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

Added grafana/pi metric to dashboard

Browse Source
This commit is contained in:
r-freeman 2023-02-09 22:30:35 +00:00
parent 8ae7c4a022
commit 3b837eeca5
4 changed files with 60 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@ -7,3 +7,5 @@ SHADOW_DATABASE_URL=
GITHUB_ACCESS_TOKEN= GITHUB_ACCESS_TOKEN=
GITHUB_USERNAME= GITHUB_USERNAME=
STATSFM_USERNAME= STATSFM_USERNAME=
GRAFANA_URL=
GRAFANA_TOKEN=

33
lib/grafana.ts Normal file
View File

@ -0,0 +1,33 @@
import fetcher from '@/lib/fetcher'
const GRAFANA_URL = process.env.GRAFANA_URL
const GRAFANA_TOKEN = process.env.GRAFANA_TOKEN
export const getPiTemp = 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_hwmon_temp_celsius",
"maxDataPoints": 612
}
],
"from": "now-5m",
"to": "now"
})
})
return {
temp: response.results.A.frames[0].data.values[1][15].toFixed(2)
}
}

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

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

17
pages/dashboard.tsx
View File

@ -1,15 +1,20 @@
import React from 'react' import React from 'react'
import Head from 'next/head' import Head from 'next/head'
import {GetStaticProps} from 'next' import {GetStaticProps} from 'next'
import useSWR from 'swr'
import {SimpleLayout} from '@/components/layouts/SimpleLayout' import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {Card} from '@/components/Card' import {Card} from '@/components/Card'
import {CardGroup} from '@/components/CardGroup' import {CardGroup} from '@/components/CardGroup'
import {numberFormat} from '@/lib/numberFormat' import {numberFormat} from '@/lib/numberFormat'
import {getDashboardData} from '@/lib/dashboard' import {getDashboardData} from '@/lib/dashboard'
import fetcher from '@/lib/fetcher'
import type {MetricGroup} from '@/types' import type {MetricGroup} from '@/types'
export default function Dashboard({metrics}: { metrics: MetricGroup }) { export default function Dashboard({metrics}: { metrics: MetricGroup }) {
const {data: tempData} = useSWR('api/grafana/temp', fetcher, {
refreshInterval: 30000
})
return ( return (
<> <>
<Head> <Head>
@ -46,6 +51,16 @@ export default function Dashboard({metrics}: { metrics: MetricGroup }) {
))} ))}
</CardGroup> </CardGroup>
))} ))}
<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">
{tempData ? `${tempData.temp} ℃` : "—"}
</Card.Description>
</Card>
</CardGroup>
</SimpleLayout> </SimpleLayout>
</> </>
) )