fix: UI adjustments

gluonfield · Jul 11, 2024 · 392cd42 · 392cd42
1 parent ff1c38e
commit 392cd42
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/src/app/runs/[id]/components/AggregateStats/AggregateStats.tsx b/src/app/runs/[id]/components/AggregateStats/AggregateStats.tsx
@@ -54,38 +54,38 @@ export const AggregateStats: React.FC<AggregateStatsProps> = ({
 	return (
 		<div>
 			<dl className={clsx(className, "grid grid-cols-3 gap-5 px-4 md:px-0 mt-8 md:mt-0")}>
-				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-gray-500">Wall Time</dt>
 					<dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900">
 						{completedAt && <div>{formatDifference(startedAt, completedAt)}</div>}
 						{!completedAt && <TimerDisplayDynamic startedAt={startedAt} />}
 					</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-gray-500">CPU time</dt>
 					<dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900">
 						{aggregates.cpuTime.toFixed(2)} h
 					</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-gray-500">Total Memory</dt>
 					<dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900">
 						{bytes(aggregates.totalMemory, { unitSeparator: " " })}
 					</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-gray-500">Storage Read</dt>
 					<dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900">
 						{bytes(aggregates.storageRead, { unitSeparator: " " })}
 					</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-gray-500">Storage Write</dt>
 					<dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900">
 						{bytes(aggregates.storageWrite, { unitSeparator: " " })}
 					</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-white px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-gray-500">Estimated Cost</dt>
 					<dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900">$ {costEstimate.toFixed(3)}</dd>
 				</div>

diff --git a/src/app/runs/[id]/components/Main/Main.tsx b/src/app/runs/[id]/components/Main/Main.tsx
@@ -137,26 +137,24 @@ export const MainRun = (props: PageProps) => {
 
 			<Tabs tabs={tabs} className="py-5 px-5" panelClassName="max-h-96" />
 
-			{progress && <Status progress={progress} className="pt-8" />}
-
 			<div className="md:grid md:grid-cols-2 md:gap-4 pt-8 grid-cols-1">
-				<div>
-					<General workflow={workflow} workspace={props.workspace} />
-				</div>
-				<div>
-					<AggregateStats tasks={tasks} completedAt={workflow.complete} startedAt={workflow.start} />
-				</div>
+				{progress && <Status progress={progress} />}
+				<AggregateStats tasks={tasks} completedAt={workflow.complete} startedAt={workflow.start} />
 			</div>
 
 			<div className="md:grid md:grid-cols-2 md:gap-4 pt-8 grid-cols-1">
-				<div>{progress && <Processes processes={progress.processes} />}</div>
 				<div>
+					<General workflow={workflow} workspace={props.workspace} />
 					<Utilisation
 						tasks={tasks}
 						peakCpus={workflow?.stats?.peakCpus ?? 0}
 						loadCpus={workflow?.stats?.loadCpus ?? 0}
+						className="mt-8"
 					/>
 				</div>
+				<div>
+					<div>{progress && <Processes processes={progress.processes} />}</div>
+				</div>
 			</div>
 
 			{tasks.length > 0 && <TasksTable tasks={tasks} className="mt-8" onTaskClick={setselectedTask} />}

diff --git a/src/app/runs/[id]/components/Status/Status.tsx b/src/app/runs/[id]/components/Status/Status.tsx
@@ -9,28 +9,28 @@ type StatusProps = {
 export const Status: React.FC<StatusProps> = ({ progress, className }: StatusProps) => {
 	return (
 		<div>
-			<dl className={clsx(className, "grid grid-cols-3 md:grid-cols-6 gap-5 px-4 md:px-0")}>
-				<div className="overflow-hidden rounded-md bg-indigo-500 px-4 py-5 shadow text-white">
+			<dl className={clsx(className, "grid grid-cols-3 md:grid-cols-3 gap-5 px-4 md:px-0")}>
+				<div className="overflow-hidden rounded-md bg-indigo-500 px-4 py-5 shadow text-white h-24">
 					<dt className="truncate text-sm font-medium text-white">Pending</dt>
 					<dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{progress.pending}</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-amber-500 px-4 py-5 shadow ">
+				<div className="overflow-hidden rounded-md bg-amber-500 px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-white">Submitted</dt>
 					<dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{progress.submitted}</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-sky-500 px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-sky-500 px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-white">Running</dt>
 					<dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{progress.running}</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-slate-500 px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-slate-500 px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-white">Cached</dt>
 					<dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{progress.cached}</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-green-500 px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-green-500 px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-white">Succeeded</dt>
 					<dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{progress.succeeded}</dd>
 				</div>
-				<div className="overflow-hidden rounded-md bg-red-500 px-4 py-5 shadow">
+				<div className="overflow-hidden rounded-md bg-red-500 px-4 py-5 shadow h-24">
 					<dt className="truncate text-sm font-medium text-white">Failed</dt>
 					<dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{progress.failed}</dd>
 				</div>