Added raspberry pi data to dashboard

app/api/rpi/[slug]/route.ts

@@ -1,5 +1,5 @@
 import {NextResponse} from 'next/server'
-import {getRamUsage, getRootFsUsage, getSysLoad, getTemp, getUptime} from '@/lib/grafana'
+import {getRamUsage, getRootFsUsage, getSysLoad, getTemp, getUptime} from '@/lib/pi'
 
 export const fetchCache = 'force-no-store'
 

app/dashboard/page.tsx

@@ -9,19 +9,10 @@ export const metadata = {
     description: 'This is my digital life in numbers, I use this dashboard to keep track of various metrics across platforms like Spotify, GitHub, Twitter and for monitoring the performance of my Raspberry Pi using Grafana and Prometheus.'
 }
 
-const config = {
-    refreshInterval: 30000
-}
-
 export const dynamic = 'force-dynamic'
 
 export default async function Dashboard() {
     const metrics = await getDashboardData()
-    // const tempData = (useSWR('api/grafana/temp', fetcher, config)).data as { temp: string }
-    // const sysLoadData = (useSWR('api/grafana/sysload', fetcher, config)).data as { sysLoad: string }
-    // const ramData = (useSWR('api/grafana/ram', fetcher, config)).data as { ramUsage: string }
-    // const rootFsData = (useSWR('api/grafana/rootfs', fetcher, config)).data as { rootFsUsage: string }
-    // const uptimeData = (useSWR('api/grafana/uptime', fetcher, config)).data as { days: number }
 
     return (
         <SimpleLayout heading="Dashboard."
@@ -41,48 +32,6 @@ export default async function Dashboard() {
                     ))}
                 </CardGroup>
             ))}
-            {/*<CardGroup title="Raspberry Pi">*/}
-            {/*    <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="#">Temperature</Card.Link>*/}
-            {/*        </h2>*/}
-            {/*        <Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">*/}
-            {/*            {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">*/}
-            {/*        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">*/}
-            {/*            <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.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 days</Card.Link>*/}
-            {/*        </h2>*/}
-            {/*        <Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">*/}
-            {/*            {uptimeData ? `${numberFormat(uptimeData.days)}` : "—"}*/}
-            {/*        </Card.Description>*/}
-            {/*    </Card>*/}
-            {/*</CardGroup>*/}
         </SimpleLayout>
     )
 }

components/ui/Views.tsx

@@ -14,9 +14,8 @@ type ViewsProps = {
     shouldRender?: boolean
 }
 
-const supabase = createPagesBrowserClient()
-
 export function Views({as: Component = 'span', slug, className, shouldUpdateViews = true, shouldRender = true}: ViewsProps) {
+    const supabase = createPagesBrowserClient()
     const {data} = useSWR(`/api/views/${slug}`, fetcher) as { data: { views: number } }
     const {mutate} = useSWRConfig()
 

lib/dashboard.ts

@@ -3,8 +3,9 @@ import {createServerComponentClient} from '@supabase/auth-helpers-nextjs'
 import {getTopRepo, getTotalFollowers, getTotalForks, getTotalRepos, getTotalStars} from '@/lib/github'
 import {getAllArticles} from '@/lib/getAllArticles'
 import {getTopArtist, getTopGenre} from '@/lib/spotify'
+import {getRamUsage, getRootFsUsage, getSysLoad, getTemp, getUptime} from '@/lib/pi'
+import {getStats} from '@/lib/statsfm'
 import {Metric} from '@/types'
-import {getStats} from "@/lib/statsfm";
 
 export async function getDashboardData() {
     const supabase = createServerComponentClient({cookies})
@@ -21,6 +22,11 @@ export async function getDashboardData() {
     const topArtist = await getTopArtist()
     const {genre} = await getTopGenre()
     const {hoursListened, minutesListened, streams} = await getStats()
+    const {temp} = await getTemp()
+    const {sysLoad} = await getSysLoad()
+    const {ramUsage} = await getRamUsage()
+    const {rootFsUsage} = await getRootFsUsage()
+    const {days} = await getUptime()
 
     const metrics: Metric[] = [
         {
@@ -94,6 +100,36 @@ export async function getDashboardData() {
             value: +views,
             group: "Blog",
             href: "/writing"
+        },
+        {
+            title: "Temp",
+            value: `${temp} ℃`,
+            group: "Raspberry Pi",
+            href: ""
+        },
+        {
+            title: "Sys load (5m avg)",
+            value: `${sysLoad}%`,
+            group: "Raspberry Pi",
+            href: ""
+        },
+        {
+            title: "RAM usage",
+            value: `${ramUsage}%`,
+            group: "Raspberry Pi",
+            href: ""
+        },
+        {
+            title: "Root FS usage",
+            value: `${rootFsUsage}%`,
+            group: "Raspberry Pi",
+            href: ""
+        },
+        {
+            title: "Uptime days",
+            value: `${Math.round(days)}`,
+            group: "Raspberry Pi",
+            href: ""
         }
     ]