r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-11 18:45:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added more pi metrics to dashboard

Browse Source
This commit is contained in:
r-freeman 2023-02-10 21:52:00 +00:00
parent f90799c679
commit e14b878888
4 changed files with 99 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
lib/grafana.ts
View File

@ -57,7 +57,7 @@ export const getRootFsUsage = async () => {
})
return {
usage: response.results.A.frames[0].data.values[1][15].toFixed(2)
rootFsUsage: response.results.A.frames[0].data.values[1][15].toFixed(2)
}
}
@ -88,12 +88,72 @@ export const getUptime = async () => {
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 days = (seconds / 86400).toFixed(2)
const weeks = (seconds / 604_800).toFixed(2)
return {
seconds: (seconds).toFixed(2),
minutes,
hours,
days,
weeks
}
}
export const getRamUsage = 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_memory_MemAvailable_bytes * 100) / node_memory_MemTotal_bytes)",
"maxDataPoints": 100
}
],
"from": "now-5m",
"to": "now"
})
})
return {
ramUsage: response.results.A.frames[0].data.values[1][15].toFixed(2)
}
}
export const getSysLoad = 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": "avg(node_load5) / count(count(node_cpu_seconds_total) by (cpu)) * 100",
"maxDataPoints": 100
}
],
"from": "now-5m",
"to": "now"
})
})
return {
sysLoad: response.results.A.frames[0].data.values[1][15].toFixed(2)
}
}

8
pages/api/grafana/ram.ts Normal file
View File

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

8
pages/api/grafana/sysload.ts Normal file
View File

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

26
pages/dashboard.tsx
View File

@ -16,6 +16,8 @@ const config = {
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)
@ -61,7 +63,23 @@ export default function Dashboard({metrics}: { metrics: MetricGroup }) {
<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} ℃` : "—"}
{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">
@ -69,15 +87,15 @@ export default function Dashboard({metrics}: { metrics: MetricGroup }) {
<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} %` : "—"}
{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 minutes</Card.Link>
<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.minutes)}` : "—"}
{uptimeData ? `${numberFormat(uptimeData.days)}` : "—"}
</Card.Description>
</Card>
</CardGroup>