Added more pi metrics to dashboard

This commit is contained in:
r-freeman 2023-02-10 17:02:15 +00:00
parent e9e4fea4db
commit f90799c679
5 changed files with 109 additions and 7 deletions

View File

@ -3,7 +3,7 @@ import fetcher from '@/lib/fetcher'
const GRAFANA_URL = process.env.GRAFANA_URL
const GRAFANA_TOKEN = process.env.GRAFANA_TOKEN
export const getPiTemp = async () => {
export const getTemp = async () => {
const response = await fetcher(GRAFANA_URL, {
method: 'POST',
headers: {
@ -19,7 +19,7 @@ export const getPiTemp = async () => {
"type": "prometheus"
},
"expr": "node_hwmon_temp_celsius",
"maxDataPoints": 612
"maxDataPoints": 100
}
],
"from": "now-5m",
@ -31,3 +31,69 @@ export const getPiTemp = async () => {
temp: response.results.A.frames[0].data.values[1][15].toFixed(2)
}
}
export const getRootFsUsage = 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_filesystem_avail_bytes{mountpoint='/',fstype!='rootfs'} * 100) / node_filesystem_size_bytes{mountpoint='/',fstype!='rootfs'})",
"maxDataPoints": 100
}
],
"from": "now-5m",
"to": "now"
})
})
return {
usage: response.results.A.frames[0].data.values[1][15].toFixed(2)
}
}
export const getUptime = 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": "node_time_seconds - node_boot_time_seconds",
"maxDataPoints": 100
}
],
"from": "now-5m",
"to": "now"
})
})
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 weeks = (seconds / 604_800).toFixed(2)
return {
seconds: (seconds).toFixed(2),
minutes,
hours,
weeks
}
}

View File

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

View File

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

View File

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

View File

@ -10,10 +10,14 @@ import {getDashboardData} from '@/lib/dashboard'
import fetcher from '@/lib/fetcher'
import type {MetricGroup} from '@/types'
export default function Dashboard({metrics}: { metrics: MetricGroup }) {
const {data: tempData} = useSWR('api/grafana/temp', fetcher, {
const config = {
refreshInterval: 30000
})
}
export default function Dashboard({metrics}: { metrics: MetricGroup }) {
const {data: tempData} = useSWR('api/grafana/temp', fetcher, config)
const {data: rootFsData} = useSWR('api/grafana/rootfs', fetcher, config)
const {data: uptimeData} = useSWR('api/grafana/uptime', fetcher, config)
return (
<>
@ -60,6 +64,22 @@ export default function Dashboard({metrics}: { metrics: MetricGroup }) {
{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="#">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} %` : "—"}
</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>
</h2>
<Card.Description className="mt-0 text-zinc-800 dark:text-zinc-100 font-semibold text-3xl">
{uptimeData ? `${numberFormat(uptimeData.minutes)}` : "—"}
</Card.Description>
</Card>
</CardGroup>
</SimpleLayout>
</>