mirror of https://github.com/waku-org/metrics.git
Merge pull request #13 from waku-org/feat/add-network-metrics
feat: add network metrics
This commit is contained in:
commit
9d47b6ea6c
|
@ -37,3 +37,5 @@ next-env.d.ts
|
||||||
.env
|
.env
|
||||||
|
|
||||||
.idea/
|
.idea/
|
||||||
|
|
||||||
|
certificates
|
|
@ -1,17 +1,57 @@
|
||||||
import React from 'react'
|
import React, {useState, useEffect} from 'react'
|
||||||
|
import Prometheus from "../utils/prometheus"
|
||||||
|
import { MdNetworkPing } from "react-icons/md";
|
||||||
|
import CommunityMetricsCard from "@/components/molecules/CommunityMetricsCard";
|
||||||
|
import { LuNetwork } from "react-icons/lu";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function NetworkMetrics() {
|
export default function NetworkMetrics() {
|
||||||
|
|
||||||
|
const [avgPing, setAvgPing] = useState()
|
||||||
|
const [connectablePeers, setConnectablePeers] = useState()
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
Prometheus.getAvgPing().then((x) => {
|
||||||
|
setAvgPing(parseFloat(x))
|
||||||
|
})
|
||||||
|
Prometheus.getConnectablePeers().then((x) => {
|
||||||
|
setConnectablePeers(parseInt(x))
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className=''>
|
<div className=''>
|
||||||
<div className='flex justify-between items-center'>
|
<div className='flex justify-between items-center'>
|
||||||
<h1 className='text-2xl'>Network metrics</h1>
|
<h1 className='text-2xl'>Network metrics</h1>
|
||||||
<h1 className='text-[#707071] hidden md:block'>Powered by Waku</h1>
|
<h1 className='text-[#707071] hidden md:block'>Powered by Waku</h1>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid mt-60 px-4 place-content-center">
|
|
||||||
<h1 className='text-[#707071] hidden md:block'>Work in progress</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="space-y-5 mt-5 justify-between">
|
||||||
|
<CommunityMetricsCard
|
||||||
|
title={"Average Ping Response between nodes (ms)"}
|
||||||
|
icon={
|
||||||
|
<span className="hidden rounded-full bg-gray-100 p-2 text-gray-600 dark:bg-black dark:text-gray-300 sm:block">
|
||||||
|
<MdNetworkPing />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
//isLoading={props.isLoading}
|
||||||
|
current={avgPing && avgPing.toFixed(2)}
|
||||||
|
//previous={props.previous?.data?.stats?.github}
|
||||||
|
/>
|
||||||
|
<CommunityMetricsCard
|
||||||
|
title={"Connectable Nodes"}
|
||||||
|
icon={
|
||||||
|
<span className="hidden rounded-full bg-gray-100 p-2 text-gray-600 dark:bg-black dark:text-gray-300 sm:block">
|
||||||
|
<LuNetwork />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
//isLoading={props.isLoading}
|
||||||
|
current={connectablePeers}
|
||||||
|
//previous={props.previous?.data?.stats?.github}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -70,6 +70,7 @@ export default function Router() {
|
||||||
const twitter = 2;
|
const twitter = 2;
|
||||||
|
|
||||||
setOverviewLoading(false);
|
setOverviewLoading(false);
|
||||||
|
console.log("loading...")
|
||||||
setStats({
|
setStats({
|
||||||
twitter,
|
twitter,
|
||||||
discord,
|
discord,
|
||||||
|
@ -370,7 +371,7 @@ export default function Router() {
|
||||||
<Overview
|
<Overview
|
||||||
stats={stats}
|
stats={stats}
|
||||||
isLoading={overviewLoading}
|
isLoading={overviewLoading}
|
||||||
previous={Object.values(saves)[Object.keys(saves).length - 1]}
|
previous={saves && Object.values(saves)[Object.keys(saves).length - 1]}
|
||||||
/>
|
/>
|
||||||
)) ||
|
)) ||
|
||||||
(screen === 1 && (
|
(screen === 1 && (
|
||||||
|
@ -378,7 +379,7 @@ export default function Router() {
|
||||||
stats={stats}
|
stats={stats}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
previous={
|
previous={
|
||||||
Object.keys(saves).length
|
saves && Object.keys(saves).length
|
||||||
? Object.values(saves)[Object.keys(saves).length - 1]
|
? Object.values(saves)[Object.keys(saves).length - 1]
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
|
@ -601,7 +602,7 @@ export default function Router() {
|
||||||
stats={stats}
|
stats={stats}
|
||||||
isLoading={overviewLoading}
|
isLoading={overviewLoading}
|
||||||
previous={
|
previous={
|
||||||
Object.keys(saves).length
|
saves && Object.keys(saves).length
|
||||||
? Object.values(saves)[Object.keys(saves).length - 1]
|
? Object.values(saves)[Object.keys(saves).length - 1]
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
|
@ -612,7 +613,7 @@ export default function Router() {
|
||||||
stats={stats}
|
stats={stats}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
previous={
|
previous={
|
||||||
Object.keys(saves).length
|
saves && Object.keys(saves).length
|
||||||
? Object.values(saves)[Object.keys(saves).length - 1]
|
? Object.values(saves)[Object.keys(saves).length - 1]
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -17,11 +17,12 @@
|
||||||
"cheerio": "^1.0.0-rc.12",
|
"cheerio": "^1.0.0-rc.12",
|
||||||
"encoding": "^0.1.13",
|
"encoding": "^0.1.13",
|
||||||
"eslint": "8.48.0",
|
"eslint": "8.48.0",
|
||||||
"eslint-config-next": "13.4.19",
|
"eslint-config-next": "14.0.4",
|
||||||
"next": "13.4.19",
|
"next": "14.0.4",
|
||||||
"postcss": "8.4.28",
|
"postcss": "8.4.28",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
|
"react-icons": "^5.0.1",
|
||||||
"react-responsive-modal": "^6.4.2",
|
"react-responsive-modal": "^6.4.2",
|
||||||
"reactjs-popup": "^2.0.5",
|
"reactjs-popup": "^2.0.5",
|
||||||
"tailwindcss": "3.3.3",
|
"tailwindcss": "3.3.3",
|
||||||
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const promUrl: string = process.env.NEXT_PUBLIC_PROMETHEUS_URL || "https://metrics-proxy.infra.status.im";
|
||||||
|
|
||||||
|
export default class Prometheus {
|
||||||
|
|
||||||
|
static async getMetric(metric: string) {
|
||||||
|
const data = (await axios.get('/' + metric, {baseURL: promUrl})).data
|
||||||
|
if (data.status != "success") return NaN
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
static async getAvgPing(): Promise<number> {
|
||||||
|
const data = await this.getMetric("avg_ping")
|
||||||
|
return data.data.result[0].value[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
static async getConnectablePeers(): Promise<number> {
|
||||||
|
const data = await this.getMetric("connectable_peers")
|
||||||
|
return data.data.result[0].value[1]
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue