feat: add network metrics

.gitignore

@@ -37,3 +37,5 @@ next-env.d.ts
 .env
 
 .idea/
+
+certificates

components/NetworkMetrics.js

@@ -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>
   )
 }

components/Router.js

@@ -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]
                     : {}
                 }

package.json

@@ -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",

utils/prometheus.ts

@@ -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]
+    }
+}