Refactor replay logic (9421b685) · Commits · ExaDigiT / sim-dashboard

src/components/jobs/JobList.tsx

+2 −17

Original line number	Diff line number	Diff line
		@@ -9,7 +9,7 @@ import { GridSizes, getGridSize } from "../../util/gridSizing";
		import { FetchNextPageOptions } from "@tanstack/react-query";
		import { Outlet, useNavigate } from "@tanstack/react-router";
		import { Route as JobsRoute } from "../../routes/simulations.$simulationId.jobs";
		import { isAfter, isBefore } from "date-fns";
		import { computeJobState } from "../../util/jobs"

		function JobListColumn({
		size,
		@@ -86,21 +86,6 @@ export function JobList({
		rowVirtualizer.getVirtualItems(),
		]);

		const computeJobState = (job: Job) => {
		if (!job.time_start \|\| isBefore(currentTimestamp, job.time_start)) {
		return "Pending";
		}
		if (
		isAfter(currentTimestamp, job.time_start) &&
		(!job.time_end \|\| isBefore(currentTimestamp, job.time_end))
		) {
		return "Running";
		}
		if (job.time_end) {
		return "Completed";
		}
		};

		return (
		<>
		<Outlet />
		@@ -152,7 +137,7 @@ export function JobList({
		<JobListColumn size="small">{job.job_id}</JobListColumn>
		<JobListColumn size="small">{job.name}</JobListColumn>
		<JobListColumn size="small">
		{computeJobState(job)}
		{computeJobState(job, currentTimestamp)}
		</JobListColumn>
		<JobListColumn size="small">{job.node_count}</JobListColumn>
		<JobListColumn size="large">

src/components/simulations/console/power.tsx

+12 −17

Original line number	Diff line number	Diff line
		import { CoolingCDU } from "../../../models/CoolingCDU.model";
		import { CoolingCEP } from "../../../models/CoolingCEP.model";
		import { ConsoleHeader } from "../../shared/simulation/consoleHeader";
		import { sumBy } from "lodash"

		export function Power({ metrics }: { metrics: CoolingCDU[] }) {
		export function Power({ cdus, cep }: { cdus: CoolingCDU[], cep: CoolingCEP }) {
		const total_power = sumBy(cdus, c => c.total_power)
		const total_loss = sumBy(cdus, c => c.total_loss)
		return (
		<div className="col-start-1 col-end-8 row-start-1 row-end-2">
		<ConsoleHeader>Power Stats</ConsoleHeader>
		@@ -19,26 +23,17 @@ export function Power({ metrics }: { metrics: CoolingCDU[] }) {
		PUE
		</span>
		<span className="border-2 border-t-0 border-neutral-400 dark:border-neutral-900">
		{metrics
		.reduce((prev, curr) => prev + curr.total_power, 0)
		.toFixed(2)}{" "}
		kW
		{total_power.toFixed(2)}{" kW"}
		</span>
		<span className="border-2 border-l-0 border-t-0 border-neutral-400 dark:border-neutral-900">
		{metrics.reduce((prev, curr) => prev + curr.total_loss, 0).toFixed(2)}{" "}
		kW
		{total_loss.toFixed(2)}{" kW"}
		</span>
		<span className="border-2 border-l-0 border-t-0 border-neutral-400 dark:border-neutral-900">
		{(
		(metrics.reduce((prev, curr) => prev + curr.total_loss, 0) /
		metrics.reduce((prev, curr) => prev + curr.total_power, 0)) *
		100
		).toFixed(2)}
		%
		</span>
		{/* <span className="border-2 border-l-0 border-t-0 border-neutral-400 dark:border-neutral-900"> TODO:
		{metrics.reduce((prev, curr) => prev + curr.pue_output, 0).toFixed(2)}
		</span> */}
		{((total_loss / total_power) * 100).toFixed(2)}%
		</span>
		<span className="border-2 border-l-0 border-t-0 border-neutral-400 dark:border-neutral-900">
		{cep.pue_output.toFixed(2)}
		</span>
		</div>
		</div>
		);

src/components/simulations/console/scheduler.tsx

+4 −9

Original line number	Diff line number	Diff line
		import { SimulationStatistic } from "../../../models/SimulationStatistic.model";
		import { LoadingSpinner } from "../../shared/loadingSpinner";
		import { ConsoleHeader } from "../../shared/simulation/consoleHeader";

		export function Scheduler({
		statistics,
		isLoading,
		}: {
		statistics: SimulationStatistic[];
		isLoading: boolean;
		statistics: SimulationStatistic;
		}) {
		if (isLoading) return <LoadingSpinner />;

		return (
		<div className="col-start-8 col-end-13 row-start-1 row-end-2">
		<ConsoleHeader>Scheduler Stats</ConsoleHeader>
		@@ -25,13 +20,13 @@ export function Scheduler({
		Down Nodes
		</span>
		<span className="border-2 border-t-0 border-neutral-400 dark:border-neutral-900">
		{statistics.reduce((prev, curr) => prev + curr.jobs_running, 0)}
		{statistics.jobs_running}
		</span>
		<span className="border-2 border-l-0 border-t-0 border-neutral-400 dark:border-neutral-900">
		{statistics.reduce((prev, curr) => prev + curr.jobs_pending, 0)}
		{statistics.jobs_pending}
		</span>
		<span className="border-2 border-l-0 border-t-0 border-neutral-400 dark:border-neutral-900">
		{statistics.reduce((prev, curr) => prev + curr.down_nodes.length, 0)}
		{statistics.down_nodes.length}
		</span>
		</div>
		</div>

src/components/simulations/details/gauges.tsx

+25 −40

Original line number	Diff line number	Diff line
		import { GraphHeader } from "../../shared/plots/graphHeader";
		import { CoolingCDU } from "../../../models/CoolingCDU.model";
		import { CoolingCEP } from "../../../models/CoolingCEP.model"
		import { Gauge } from "../../shared/plots/gauge";
		import { SimulationStatistic } from "../../../models/SimulationStatistic.model";
		import { useQuery } from "@tanstack/react-query";
		import { getFrontierSystemInformation } from "../../../util/queryOptions";
		import { LoadingSpinner } from "../../shared/loadingSpinner";
		import { sumBy } from "lodash";

		function round(x: number\|null\|undefined, fractionDigits: number) {
		return Number(x?.toFixed(fractionDigits) ?? 0)
		}

		function GaugeWrapper(props: { children: React.ReactNode }) {
		return (
		@@ -15,10 +21,10 @@ function GaugeWrapper(props: { children: React.ReactNode }) {
		}

		export function SimulationGauges({
		metrics,
		statistics,
		cdus = [], cep, statistics,
		}: {
		metrics?: CoolingCDU[];
		cdus?: CoolingCDU[];
		cep?: CoolingCEP;
		statistics?: SimulationStatistic;
		}) {
		const { data } = useQuery(getFrontierSystemInformation());
		@@ -34,11 +40,7 @@ export function SimulationGauges({
		<Gauge
		minValue={0}
		maxValue={35000}
		value={Number(
		metrics
		?.reduce((prev, curr) => prev + curr.total_power, 0)
		.toFixed(2) ?? 0,
		)}
		value={round(sumBy(cdus, c => c.total_power), 2)}
		labels={{
		tickLabels: {
		type: "outer",
		@@ -66,11 +68,7 @@ export function SimulationGauges({
		<Gauge
		minValue={0}
		maxValue={2000}
		value={Number(
		metrics
		?.reduce((prev, curr) => prev + curr.total_loss, 0)
		.toFixed(2) ?? 0,
		)}
		value={round(sumBy(cdus, c => c.total_loss), 2)}
		labels={{
		tickLabels: {
		type: "outer",
		@@ -93,7 +91,7 @@ export function SimulationGauges({
		<Gauge
		minValue={0}
		maxValue={2000}
		value={Number(statistics?.p_flops.toFixed(2) ?? 0)}
		value={round(statistics?.p_flops, 2)}
		labels={{
		tickLabels: {
		type: "outer",
		@@ -128,7 +126,7 @@ export function SimulationGauges({
		tickLabels: {
		type: "outer",
		ticks: [
		{ value: Number(data?.g_flops_w_peak.toFixed(2) ?? 0) },
		{ value: round(data?.g_flops_w_peak, 2) },
		],
		},
		valueLabel: {
		@@ -145,19 +143,13 @@ export function SimulationGauges({
		<div className="flex flex-col">
		<GaugeWrapper>
		<GraphHeader>Temperature</GraphHeader>
		{/* <Gauge TODO:
		<Gauge
		minValue={5}
		maxValue={50}
		value={Number(
		(
		(metrics?.reduce(
		(prev, curr) => prev + curr.htwr_htws_ctwr_ctws_temp,
		0,
		) ?? 0) /
		(metrics?.filter((metric) => !!metric.htwr_htws_ctwr_ctws_temp)
		.length ?? 0)
		).toFixed(2),
		)}
		value={cep ?
		round((cep.htw_return_temp + cep.htw_supply_temp + cep.ctw_return_temp + cep.ctw_supply_temp) / 4, 2)
		: 0
		}
		labels={{
		tickLabels: {
		type: "outer",
		@@ -198,24 +190,17 @@ export function SimulationGauges({
		},
		],
		}}
		/> */}
		/>
		</GaugeWrapper>
		<GaugeWrapper>
		<GraphHeader>Pressure</GraphHeader>
		{/* <Gauge TODO:
		<Gauge
		minValue={10}
		maxValue={90}
		value={Number(
		(
		(metrics?.reduce(
		(prev, curr) => prev + curr.htwr_htws_ctwr_ctws_pressure,
		0,
		) ?? 0) /
		(metrics?.filter(
		(metric) => !!metric.htwr_htws_ctwr_ctws_pressure,
		).length ?? 0)
		).toFixed(2),
		)}
		value={cep ?
		round((cep.htw_return_pressure + cep.htw_supply_pressure + cep.ctw_return_pressure + cep.ctw_supply_pressure) / 4, 2)
		: 0
		}
		labels={{
		tickLabels: {
		type: "outer",
		@@ -253,7 +238,7 @@ export function SimulationGauges({
		},
		],
		}}
		/> */}
		/>
		</GaugeWrapper>
		</div>
		</>

src/components/simulations/list/SimulationsDataGridRow.tsx

+0 −13

Original line number	Diff line number	Diff line
		@@ -2,7 +2,6 @@ import { Link } from "@tanstack/react-router";
		import { Simulation } from "../../../models/Simulation.model";
		import { formatDate } from "../../../util/datetime";
		import { CSSProperties } from "react";
		import { addSeconds, differenceInSeconds } from "date-fns";

		function SimulationDataGridCell({
		value,
		@@ -35,18 +34,6 @@ export function SimulationsDataGridRow({
		params={{ simulationId: simulation.id }}
		className="grid w-full grid-cols-8 border-b-2 border-neutral-400 transition-opacity duration-500 hover:opacity-75 dark:border-neutral-700"
		search={{
		start: simulation.start,
		end: simulation.end,
		currentTimestamp: addSeconds(
		simulation.start,
		simulation.progress *
		differenceInSeconds(simulation.end, simulation.start),
		).toISOString(),
		initialTimestamp: addSeconds(
		simulation.start,
		simulation.progress *
		differenceInSeconds(simulation.end, simulation.start),
		).toISOString(),
		playbackInterval: 15,
		}}
		style={{ ...style }}