import React from 'react'
import Head from 'next/head'
import {GetServerSideProps} from 'next'
import useSWR from 'swr'
import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {Card} from '@/components/ui/Card'
import {CardGroup} from '@/components/ui/CardGroup'
import {numberFormat} from '@/lib/numberFormat'
import {getDashboardData} from '@/lib/dashboard'
import fetcher from '@/lib/fetcher'
import type {MetricGroup} from '@/types'
const config = {
refreshInterval: 30000
}
export default function Dashboard({metrics}: { metrics: MetricGroup }) {
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 (
<>
Dashboard - Ryan Freeman
{metrics.map(({groupName, groupItems}) => (
{groupItems.map((item) => (
{item.title}
{typeof item.value === "number" ? numberFormat(item.value) : item.value}
))}
))}
Temperature
{tempData ? `${tempData.temp}℃` : "—"}
Sys load (5m avg)
{sysLoadData ? `${sysLoadData.sysLoad}%` : "—"}
RAM usage
{ramData ? `${ramData.ramUsage}%` : "—"}
Root FS usage
{rootFsData ? `${rootFsData.rootFsUsage}%` : "—"}
Uptime days
{uptimeData ? `${numberFormat(uptimeData.days)}` : "—"}
)
}
export const getServerSideProps: GetServerSideProps = async (context) => {
return {
props: {
metrics: await getDashboardData(context)
}
}
}