updates

readme.md

@@ -44,10 +44,18 @@ The hub and agent are distributed as single binary files, as well as docker imag
 
 ## Environment Variables
 
+## 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.

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>