import React from 'react'
import Head from 'next/head'
import {GetStaticProps} from 'next'
import useSWR from 'swr'
import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {Card} from '@/components/Card'
import {CardGroup} from '@/components/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 {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)
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 getStaticProps: GetStaticProps = async () => {
return {
props: {
metrics: await getDashboardData()
}
}
}