diff --git a/.env.example b/.env.example index 95f210c..4ab01fe 100644 --- a/.env.example +++ b/.env.example @@ -6,4 +6,6 @@ DATABASE_URL= SHADOW_DATABASE_URL= GITHUB_ACCESS_TOKEN= GITHUB_USERNAME= -STATSFM_USERNAME= \ No newline at end of file +STATSFM_USERNAME= +GRAFANA_URL= +GRAFANA_TOKEN= \ No newline at end of file diff --git a/lib/grafana.ts b/lib/grafana.ts new file mode 100644 index 0000000..26ed093 --- /dev/null +++ b/lib/grafana.ts @@ -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) + } +} \ No newline at end of file diff --git a/pages/api/grafana/temp.ts b/pages/api/grafana/temp.ts new file mode 100644 index 0000000..5396be0 --- /dev/null +++ b/pages/api/grafana/temp.ts @@ -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) +} \ No newline at end of file diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 92144b1..85d05d9 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -1,15 +1,20 @@ 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' - export default function Dashboard({metrics}: { metrics: MetricGroup }) { + const {data: tempData} = useSWR('api/grafana/temp', fetcher, { + refreshInterval: 30000 + }) + return ( <> @@ -46,6 +51,16 @@ export default function Dashboard({metrics}: { metrics: MetricGroup }) { ))} ))} + + +

+ Temperature +

+ + {tempData ? `${tempData.temp} ℃` : "—"} + + + )