updates

site/src/components/charts/bandwidth-chart.tsx

@@ -16,7 +16,7 @@ const chartConfig = {
 	},
 	sent: {
 		label: 'Sent',
-		color: 'hsl(var(--chart-1))',
+		color: 'hsl(var(--chart-5))',
 	},
 } satisfies ChartConfig
 

site/src/components/charts/disk-io-chart.tsx

@@ -12,7 +12,7 @@ import Spinner from '../spinner'
 const chartConfig = {
 	read: {
 		label: 'Read',
-		color: 'hsl(var(--chart-5))',
+		color: 'hsl(var(--chart-1))',
 	},
 	write: {
 		label: 'Write',
@@ -78,13 +78,6 @@ export default function DiskIoChart({
 						/>
 					}
 				/>
-				<Area
-					dataKey="read"
-					type="monotoneX"
-					fill="var(--color-read)"
-					fillOpacity={0.4}
-					stroke="var(--color-read)"
-				/>
 				<Area
 					dataKey="write"
 					type="monotoneX"
@@ -92,6 +85,13 @@ export default function DiskIoChart({
 					fillOpacity={0.4}
 					stroke="var(--color-write)"
 				/>
+				<Area
+					dataKey="read"
+					type="monotoneX"
+					fill="var(--color-read)"
+					fillOpacity={0.4}
+					stroke="var(--color-read)"
+				/>
 			</AreaChart>
 		</ChartContainer>
 	)

site/src/components/routes/server.tsx

@@ -19,11 +19,6 @@ const DiskChart = lazy(() => import('../charts/disk-chart'))
 const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
 const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
 
-function timestampToBrowserTime(timestamp: string) {
-	const date = new Date(timestamp)
-	return date.toLocaleString()
-}
-
 export default function ServerDetail({ name }: { name: string }) {
 	const servers = useStore($systems)
 	const updatedSystem = useStore($updatedSystem)
@@ -254,6 +249,7 @@ export default function ServerDetail({ name }: { name: string }) {
 					<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
 				</ChartCard>
 			)}
+
 			<ChartCard title="Total Memory Usage" description="Precise utilization at the recorded time">
 				<MemChart chartData={memChartData} ticks={ticks} />
 			</ChartCard>
@@ -263,12 +259,14 @@ export default function ServerDetail({ name }: { name: string }) {
 					<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
 				</ChartCard>
 			)}
+
 			<ChartCard
 				title="Disk Usage"
 				description="Usage of partition where the root filesystem is mounted"
 			>
 				<DiskChart chartData={diskChartData} ticks={ticks} />
 			</ChartCard>
+
 			<ChartCard
 				title="Disk I/O"
 				description="Throughput of disk where the root filesystem is mounted"
@@ -279,18 +277,6 @@ export default function ServerDetail({ name }: { name: string }) {
 			<ChartCard title="Bandwidth" description="Throughput of network interfaces">
 				<BandwidthChart chartData={bandwidthChartData} ticks={ticks} />
 			</ChartCard>
-
-			<Card>
-				<CardHeader>
-					<CardTitle className={'mb-3'}>{server.name}</CardTitle>
-					<CardDescription>
-						{server.ip} - last updated: {timestampToBrowserTime(server.updated)}
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<pre>{JSON.stringify(server, null, 2)}</pre>
-				</CardContent>
-			</Card>
 		</div>
 	)
 }

site/src/components/server-table/systems-table.tsx

@@ -73,7 +73,7 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 				<span
 					className={cn(
 						'absolute inset-0 w-full h-full origin-left',
-						(val < 50 && 'bg-green-500') || (val < 80 && 'bg-yellow-500') || 'bg-red-500'
+						(val < 50 && 'bg-green-500') || (val < 80 && 'bg-yellow-500') || 'bg-red-600'
 					)}
 					style={{ transform: `scalex(${val}%)` }}
 				></span>