2023-01-29 22:16:58 +00:00
import React from 'react'
2023-01-27 23:33:49 +00:00
import Head from 'next/head'
2023-04-11 22:22:51 +00:00
import { GetServerSideProps } from 'next'
2023-02-09 22:30:35 +00:00
import useSWR from 'swr'
2023-02-02 21:32:09 +00:00
import { SimpleLayout } from '@/components/layouts/SimpleLayout'
2023-02-14 21:40:16 +00:00
import { Card } from '@/components/ui/Card'
import { CardGroup } from '@/components/ui/CardGroup'
2023-01-27 23:33:49 +00:00
import { numberFormat } from '@/lib/numberFormat'
2023-01-29 22:16:58 +00:00
import { getDashboardData } from '@/lib/dashboard'
2023-02-09 22:30:35 +00:00
import fetcher from '@/lib/fetcher'
2023-01-29 23:04:28 +00:00
import type { MetricGroup } from '@/types'
2023-01-27 23:33:49 +00:00
2023-02-10 17:02:15 +00:00
const config = {
refreshInterval : 30000
}
2023-01-29 23:04:28 +00:00
export default function Dashboard ( { metrics } : { metrics : MetricGroup } ) {
2023-02-22 22:40:36 +00:00
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 }
2023-02-09 22:30:35 +00:00
2023-01-27 23:33:49 +00:00
return (
< >
< Head >
< title > Dashboard - Ryan Freeman < / title >
< meta
name = "description"
2023-03-05 00:13:36 +00:00
content = "This is my digital life in numbers which is updated daily. 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."
2023-01-27 23:33:49 +00:00
/ >
< meta
property = "og:title"
content = "Dashboard - Ryan Freeman"
/ >
< meta
property = "og:description"
2023-03-05 00:13:36 +00:00
content = "This is my digital life in numbers which is updated daily. 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."
2023-01-27 23:33:49 +00:00
/ >
< / Head >
< SimpleLayout
title = "Dashboard."
2023-03-05 00:13:36 +00:00
intro = "This is my digital life in numbers which is updated daily. 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."
2023-01-27 23:33:49 +00:00
gradient = "bg-gradient-to-r from-orange-300 to-rose-300"
>
2023-01-29 23:04:28 +00:00
{ metrics . map ( ( { groupName , groupItems } ) = > (
< CardGroup title = { groupName } key = { groupName } >
{ groupItems . map ( ( item ) = > (
< Card as = "li" key = { item . title } >
< h2 className = "text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400" >
< Card.Link href = { item . href } > { item . title } < / Card.Link >
< / h2 >
2023-02-09 20:27:17 +00:00
< Card.Description className = "mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl" >
2023-01-29 23:04:28 +00:00
{ typeof item . value === "number" ? numberFormat ( item . value ) : item . value }
< / Card.Description >
< / Card >
) ) }
< / CardGroup >
2023-01-29 22:16:58 +00:00
) ) }
2023-02-09 22:30:35 +00:00
< 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" >
2023-02-10 21:52:00 +00:00
{ 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 ( 5 m 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 } % ` : "—" }
2023-02-09 22:30:35 +00:00
< / Card.Description >
< / Card >
2023-02-10 17:02:15 +00:00
< 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" >
2023-02-10 21:52:00 +00:00
{ rootFsData ? ` ${ rootFsData . rootFsUsage } % ` : "—" }
2023-02-10 17:02:15 +00:00
< / 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" >
2023-02-10 21:52:00 +00:00
< Card.Link href = "#" > Uptime days < / Card.Link >
2023-02-10 17:02:15 +00:00
< / h2 >
< Card.Description className = "mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl" >
2023-02-10 21:52:00 +00:00
{ uptimeData ? ` ${ numberFormat ( uptimeData . days ) } ` : "—" }
2023-02-10 17:02:15 +00:00
< / Card.Description >
< / Card >
2023-02-09 22:30:35 +00:00
< / CardGroup >
2023-01-27 23:33:49 +00:00
< / SimpleLayout >
< / >
)
}
2023-04-11 22:22:51 +00:00
export const getServerSideProps : GetServerSideProps = async ( context ) = > {
2023-01-27 23:33:49 +00:00
return {
props : {
2023-04-11 22:22:51 +00:00
metrics : await getDashboardData ( context )
2023-01-27 23:33:49 +00:00
}
}
}
