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
|
||||
|
||||
.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() {
|
||||
|
||||
const [avgPing, setAvgPing] = useState()
|
||||
const [connectablePeers, setConnectablePeers] = useState()
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
Prometheus.getAvgPing().then((x) => {
|
||||
setAvgPing(parseFloat(x))
|
||||
})
|
||||
Prometheus.getConnectablePeers().then((x) => {
|
||||
setConnectablePeers(parseInt(x))
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className=''>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h1 className='text-2xl'>Network metrics</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 className='flex justify-between items-center'>
|
||||
<h1 className='text-2xl'>Network metrics</h1>
|
||||
<h1 className='text-[#707071] hidden md:block'>Powered by Waku</h1>
|
||||
</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;
|
||||
|
||||
setOverviewLoading(false);
|
||||
console.log("loading...")
|
||||
setStats({
|
||||
twitter,
|
||||
discord,
|
||||
|
@ -370,7 +371,7 @@ export default function Router() {
|
|||
<Overview
|
||||
stats={stats}
|
||||
isLoading={overviewLoading}
|
||||
previous={Object.values(saves)[Object.keys(saves).length - 1]}
|
||||
previous={saves && Object.values(saves)[Object.keys(saves).length - 1]}
|
||||
/>
|
||||
)) ||
|
||||
(screen === 1 && (
|
||||
|
@ -378,7 +379,7 @@ export default function Router() {
|
|||
stats={stats}
|
||||
isLoading={isLoading}
|
||||
previous={
|
||||
Object.keys(saves).length
|
||||
saves && Object.keys(saves).length
|
||||
? Object.values(saves)[Object.keys(saves).length - 1]
|
||||
: {}
|
||||
}
|
||||
|
@ -601,7 +602,7 @@ export default function Router() {
|
|||
stats={stats}
|
||||
isLoading={overviewLoading}
|
||||
previous={
|
||||
Object.keys(saves).length
|
||||
saves && Object.keys(saves).length
|
||||
? Object.values(saves)[Object.keys(saves).length - 1]
|
||||
: {}
|
||||
}
|
||||
|
@ -612,7 +613,7 @@ export default function Router() {
|
|||
stats={stats}
|
||||
isLoading={isLoading}
|
||||
previous={
|
||||
Object.keys(saves).length
|
||||
saves && Object.keys(saves).length
|
||||
? 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",
|
||||
"encoding": "^0.1.13",
|
||||
"eslint": "8.48.0",
|
||||
"eslint-config-next": "13.4.19",
|
||||
"next": "13.4.19",
|
||||
"eslint-config-next": "14.0.4",
|
||||
"next": "14.0.4",
|
||||
"postcss": "8.4.28",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-responsive-modal": "^6.4.2",
|
||||
"reactjs-popup": "^2.0.5",
|
||||
"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