From e6c8af4b0c3eb98648bcc2696e63d2c12546a6ad Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Fri, 19 Jul 2024 17:32:20 -0400
Subject: [PATCH] updates

---
 readme.md                                     | 18 +++++++++++------
 .../src/components/charts/bandwidth-chart.tsx |  2 +-
 site/src/components/charts/disk-io-chart.tsx  | 16 +++++++--------
 site/src/components/routes/server.tsx         | 20 +++----------------
 .../components/server-table/systems-table.tsx |  2 +-
 5 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/readme.md b/readme.md
index 0db4985..093b18c 100644
--- a/readme.md
+++ b/readme.md
@@ -44,10 +44,18 @@ The hub and agent are distributed as single binary files, as well as docker imag
 
 ## Environment Variables
 
-| Name                    | Default | Description                                      |
-| ----------------------- | ------- | ------------------------------------------------ |
-| `DISABLE_PASSWORD_AUTH` | false   | Disables password authentication                 |
-| `FILESYSTEM`            | unset   | Filesystem / partition to use for disk I/O stats |
+## Hub
+
+| Name                    | Default | Description                      |
+| ----------------------- | ------- | -------------------------------- |
+| `DISABLE_PASSWORD_AUTH` | false   | Disables password authentication |
+
+## Agent
+
+| Name         | Default | Description                                      |
+| ------------ | ------- | ------------------------------------------------ |
+| `FILESYSTEM` | unset   | Filesystem / partition to use for disk I/O stats |
+| `PORT`       | 45876   | Port to listen on                                |
 
 ## OAuth / OIDC setup
 
@@ -113,8 +121,6 @@ If it's not set, the agent will try to find the filesystem mounted on `/` and us
 - Run `lsblk` and choose an option under "NAME"
 - Run `sudo fdisk -l` and choose an option under "Device"
 
-> Note: the first reading always comes in as 0 bytes because it needs to establish baseline values.
-
 ### Month / week records are not populating reliably
 
 Records for longer time periods are made by averaging stats from the shorter time periods. They require the agent to be running uninterrupted for long enough to get a full set of data.
diff --git a/site/src/components/charts/bandwidth-chart.tsx b/site/src/components/charts/bandwidth-chart.tsx
index 236ca1c..d3e129a 100644
--- a/site/src/components/charts/bandwidth-chart.tsx
+++ b/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
 
diff --git a/site/src/components/charts/disk-io-chart.tsx b/site/src/components/charts/disk-io-chart.tsx
index c4feda6..302b6eb 100644
--- a/site/src/components/charts/disk-io-chart.tsx
+++ b/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>
 	)
diff --git a/site/src/components/routes/server.tsx b/site/src/components/routes/server.tsx
index 378429e..4555ff0 100644
--- a/site/src/components/routes/server.tsx
+++ b/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>
 	)
 }
diff --git a/site/src/components/server-table/systems-table.tsx b/site/src/components/server-table/systems-table.tsx
index 8db820b..5d11ec5 100644
--- a/site/src/components/server-table/systems-table.tsx
+++ b/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>