Added more pi metrics to dashboard

lib/grafana.ts

@@ -57,7 +57,7 @@ export const getRootFsUsage = async () => {
     })
 
     return {
-        usage: response.results.A.frames[0].data.values[1][15].toFixed(2)
+        rootFsUsage: response.results.A.frames[0].data.values[1][15].toFixed(2)
     }
 }
 
@@ -88,12 +88,72 @@ export const getUptime = async () => {
     const seconds = response.results.A.frames[0].data.values[1][15]
     const minutes = (seconds / 60).toFixed(2)
     const hours = (seconds / 3_600).toFixed(2)
+    const days = (seconds / 86400).toFixed(2)
     const weeks = (seconds / 604_800).toFixed(2)
 
     return {
         seconds: (seconds).toFixed(2),
         minutes,
         hours,
+        days,
         weeks
     }
+}
+
+export const getRamUsage = async () => {
+    const response = await fetcher(GRAFANA_URL, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${GRAFANA_TOKEN}`,
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            "queries": [
+                {
+                    "datasource": {
+                        "uid": "4f-R6jgRz",
+                        "type": "prometheus"
+                    },
+                    "expr": "100 - ((node_memory_MemAvailable_bytes * 100) / node_memory_MemTotal_bytes)",
+                    "maxDataPoints": 100
+                }
+            ],
+            "from": "now-5m",
+            "to": "now"
+        })
+    })
+
+    return {
+        ramUsage: response.results.A.frames[0].data.values[1][15].toFixed(2)
+    }
+}
+
+export const getSysLoad = async () => {
+    const response = await fetcher(GRAFANA_URL, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${GRAFANA_TOKEN}`,
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            "queries": [
+                {
+                    "datasource": {
+                        "uid": "4f-R6jgRz",
+                        "type": "prometheus"
+                    },
+                    "expr": "avg(node_load5) /  count(count(node_cpu_seconds_total) by (cpu)) * 100",
+                    "maxDataPoints": 100
+                }
+            ],
+            "from": "now-5m",
+            "to": "now"
+        })
+    })
+
+    return {
+        sysLoad: response.results.A.frames[0].data.values[1][15].toFixed(2)
+    }
 }

pages/api/grafana/ram.ts

@@ -0,0 +1,8 @@
+import {NextApiRequest, NextApiResponse} from 'next'
+import {getRamUsage} from '@/lib/grafana'
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const response = await getRamUsage()
+
+    return res.status(200).json(response)
+}

pages/api/grafana/sysload.ts

@@ -0,0 +1,8 @@
+import {NextApiRequest, NextApiResponse} from 'next'
+import {getSysLoad} from '@/lib/grafana'
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const response = await getSysLoad()
+
+    return res.status(200).json(response)
+}

pages/dashboard.tsx

@@ -16,6 +16,8 @@ const config = {
 
 export default function Dashboard({metrics}: { metrics: MetricGroup }) {
     const {data: tempData} = useSWR('api/grafana/temp', fetcher, config)
+    const {data: sysLoadData} = useSWR('api/grafana/sysload', fetcher, config)
+    const {data: ramData} = useSWR('api/grafana/ram', fetcher, config)
     const {data: rootFsData} = useSWR('api/grafana/rootfs', fetcher, config)
     const {data: uptimeData} = useSWR('api/grafana/uptime', fetcher, config)
 
@@ -61,7 +63,23 @@ export default function Dashboard({metrics}: { metrics: MetricGroup }) {
                             <Card.Link href="#">Temperature</Card.Link>
                         </h2>
                         <Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">
-                            {tempData ? `${tempData.temp} ℃` : "—"}
+                            {tempData ? `${tempData.temp}℃` : "—"}
+                        </Card.Description>
+                    </Card>
+                    <Card as="li">
+                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
+                            <Card.Link href="#">Sys load (5m avg)</Card.Link>
+                        </h2>
+                        <Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">
+                            {sysLoadData ? `${sysLoadData.sysLoad}%` : "—"}
+                        </Card.Description>
+                    </Card>
+                    <Card as="li">
+                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
+                            <Card.Link href="#">RAM usage</Card.Link>
+                        </h2>
+                        <Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">
+                            {ramData ? `${ramData.ramUsage}%` : "—"}
                         </Card.Description>
                     </Card>
                     <Card as="li">
@@ -69,15 +87,15 @@ export default function Dashboard({metrics}: { metrics: MetricGroup }) {
                             <Card.Link href="#">Root FS usage</Card.Link>
                         </h2>
                         <Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">
-                            {rootFsData ? `${rootFsData.usage} %` : "—"}
+                            {rootFsData ? `${rootFsData.rootFsUsage}%` : "—"}
                         </Card.Description>
                     </Card>
                     <Card as="li">
                         <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
-                            <Card.Link href="#">Uptime minutes</Card.Link>
+                            <Card.Link href="#">Uptime days</Card.Link>
                         </h2>
                         <Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">
-                            {uptimeData ? `${numberFormat(uptimeData.minutes)}` : "—"}
+                            {uptimeData ? `${numberFormat(uptimeData.days)}` : "—"}
                         </Card.Description>
                     </Card>
                 </CardGroup>