Add UI updates for uptime page and Prometheus data persistence (#15)

* feat: add prometheus persistence and uptime clean up * update service endpoints * update endpoints format * make pages more responsive * enforce user timezones
shardeum · Nov 13, 2024 · 0ff19d0 · 0ff19d0
1 parent b5a015f
commit 0ff19d0
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 130 deletions.
diff --git a/backend/endpoints.json b/backend/endpoints.json
@@ -4,70 +4,74 @@
             "group": "Archivers Servers",
             "servers": [
                 {
-                    "url": "http://198.58.110.213:4000/nodelist",
-                    "name": "Archiver 1",
+                    "url": "http://34.68.218.222:4000/nodelist",
+                    "name": "Archiver",
                     "help": "This is the first Archiver server",
                     "expectedResponse":{
                          "nodeList": [{}, {}],
                         "sign":{
-                            "owner":"d34b80a5a6f9638b7c75d6eb6e59d35d9a3e103f1877827eebbe973b8281f794"
+                            "owner":"64a3833499130406550729ab20f6bec351d04ec9be3e5f0144d54f01d4d18c45"
                         }
                     }
                 }
             ]
         },
+        {
+            "group": "Core Services",
+            "servers": [
+                {
+                    "url": "https://atomium.shardeum.org",
+                    "name": "JSON-RPC Server",
+                    "help": "This is the first JSON-RPC server",
+                    "body": {
+                        "jsonrpc": "2.0",
+                        "method": "eth_gasPrice",
+                        "params": [],
+                        "id": 73
+                    },
+                    "expectedResponse": {
+                        "jsonrpc": "2.0",
+                        "id": 73
+                    }
+                },
+                {
+                    "url": "https://explorer-atomium.shardeum.org",
+                    "name": "Explorer",
+                    "help": "This is the Shardeum Explorer",
+                    "expectedResponse": "The Shardeum Betanet Explorer"
+                },
+                {
+                    "url": "https://shardeum.org",
+                    "name": "Website",
+                    "help": "This is the Shardeum Website",
+                    "expectedResponse": "Shardeum | EVM based Sharded Layer 1 Blockchain"
+                },
+                {
+                    "url": "https://docs.shardeum.org/",
+                    "name": "Documentation",
+                    "help": "This is the Shardeum Documentation",
+                    "expectedResponse": "Shardeum is a scalable, secure, and efficient blockchain platform that enables developers to build and deploy decentralized applications. Dive into our documentation to learn more about Shardeum and how to get started with the network"
+                },
+                {
+                    "url": "https://faucet-atomium.shardeum.org/is-healthy",
+                    "name": "Faucet",
+                    "help": "This is the Shardeum Faucet",
+                    "expectedResponse": {
+                        "health": true
+                    }
+                }
+            ]
+        },
         {
             "group": "Monitors Servers",
             "servers": [
                 {
-                    "url": "http://198.58.113.59:3000/summary",
-                    "name": "Monitor 1",
+                    "url": "http://54.185.250.216:3000/summary",
+                    "name": "Monitor",
                     "help": "This is the first Monitor server",
                     "expectedResponse": "Ascending"
                 }
             ]
-        },
-        {
-            "url": "http://139.162.162.217:8080",
-            "name": "JSON-RPC Server",
-            "help": "This is the first JSON-RPC server",
-            "body": {
-                "jsonrpc": "2.0",
-                "method": "eth_gasPrice",
-                "params": [],
-                "id": 73
-            },
-            "expectedResponse": {
-                    "jsonrpc": "2.0",
-                    "id": 73
-            }
-        }, 
-        {
-            "url": "https://explorer-atomium.shardeum.org",
-            "name": "Explorer",
-            "help": "This is the Shardeum Explorer",
-            "expectedResponse": "The Shardeum Betanet Explorer"
-
-        },
-        {
-            "url": "https://shardeum.org",
-            "name": "Website",
-            "help": "This is the Shardeum Website",
-            "expectedResponse": "Shardeum | EVM based Sharded Layer 1 Blockchain"
-        },
-        {
-            "url": "https://docs.shardeum.org/",
-            "name": "Documentation",
-            "help": "This is the Shardeum Documentation",
-            "expectedResponse": "Shardeum is a scalable, secure, and efficient blockchain platform that enables developers to build and deploy decentralized applications. Dive into our documentation to learn more about Shardeum and how to get started with the network"
-        },
-        {
-            "url": "https://faucet-atomium.shardeum.org/is-healthy",
-            "name": "Faucet",
-            "help": "This is the Shardeum Faucet",
-            "expectedResponse": {
-                "health": true
-            }
         }
     ]
 }
diff --git a/backend/entry.sh b/backend/entry.sh
@@ -1,2 +1,2 @@
 #!/bin/sh
-npm start & prometheus --config.file=/etc/prometheus/prometheus.yml --web.listen-address=:9090
+npm start & prometheus --config.file=/etc/prometheus/prometheus.yml --web.listen-address=:9090 --storage.tsdb.path=/prometheus-data --storage.tsdb.retention.time=30d
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -8,6 +8,8 @@ services:
     ports:
       - "3002:3002"
       - "9090:9090"  # Exposing Prometheus port
+    volumes:
+      - prometheus-data:/prometheus-data
     networks:
       - shardeum-network
 
@@ -25,6 +27,9 @@ services:
     networks:
       - shardeum-network
 
+volumes:
+  prometheus-data:
+
 networks:
   shardeum-network:
     driver: bridge
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
     "@heroicons/react": "^2.1.1",
     "apexcharts": "^3.48.0",
     "axios": "^1.6.7",
+    "date-fns": "^4.1.0",
     "next": "14.1.3",
     "react": "^18",
     "react-apexcharts": "^1.4.1",

diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
diff --git a/frontend/src/app/latency/page.tsx b/frontend/src/app/latency/page.tsx
@@ -32,11 +32,13 @@ export default async function Home() {
 
 
     return (
-        <main className="flex flex-col items-center p-24 bg-white">
-            <div className="max-w-4xl w-full">
-                <h1 className="text-black font-regular my-2 text-xl text-left justify-start w-full max-w-[930px]">Latency Graph</h1>
-                <LatencyGraph data={serverServices} name={"Server services"} />
-                <LatencyGraph data={websiteServices} name={"Website services"} />
+        <main className="flex flex-col items-center p-4 sm:p-8 md:p-16 lg:p-24 bg-white">
+            <div className="w-full max-w-4xl px-2 sm:px-4">
+                <h1 className="text-black font-regular my-2 text-lg sm:text-xl text-left justify-start w-full">Latency Graph</h1>
+                <div className="space-y-4 sm:space-y-6">
+                    <LatencyGraph data={serverServices} name={"Server services"} />
+                    <LatencyGraph data={websiteServices} name={"Website services"} />
+                </div>
             </div>
         </main>
     );

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -6,8 +6,8 @@ import { Footer } from "./components/Footer";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Shardeum Status",
-  description: "The Shardeum Status page",
+  title: "Shardeum Network Status",
+  description: "This is the Shardeum Network Status page",
 };
 
 export default function RootLayout({
@@ -17,6 +17,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+
       <body className={inter.className}>
         <Header />
         {children}

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -6,33 +6,32 @@ export default async function Home() {
   const { services } = data;
 
   return (
-    <main className="flex flex-col items-center p-24 bg-white">
-      <h1 className="text-black font-regular my-2 text-xl text-left justify-start w-full max-w-[930px]">Current Network Status</h1>
+    <main className="flex flex-col items-center p-4 sm:p-8 md:p-16 lg:p-24 bg-white">
+      <h1 className="text-black font-regular my-2 text-lg sm:text-xl text-left justify-start w-full max-w-[930px]">Current Network Status</h1>
       <div className="flex w-full max-w-[930px] h-full gap-2 gap-y-5 p-2 items-center flex-wrap">
 
         {services.map((service: Service, index: any) => (
-          <div key={index} className="w-[450px] p-6 bg-white border border-gray-200 rounded-lg shadow flex justify-between">
+          <div key={index} className="w-full sm:w-[450px] p-3 sm:p-4 md:p-6 bg-white border border-gray-200 rounded-lg shadow flex justify-between">
             <div className="flex flex-col">
-              <h5 className="mb-2 text-black text-xl font-bold tracking-tight">{service.name}</h5>
-              <p className="font-normal text-gray-700 ">{service.status.value === 1 ? 'Operational' : 'Offline'}</p>
-
+              <h5 className="mb-2 text-black text-lg sm:text-xl font-bold tracking-tight">{service.name}</h5>
+              <p className="font-normal text-sm sm:text-base text-gray-700">{service.status.value === 1 ? 'Operational' : 'Offline'}</p>
             </div>
             <div className="inline-flex items-center">
-              <label className="relative flex items-center p-3 rounded-full cursor-pointer" htmlFor="amber">
+              <label className="relative flex items-center p-2 sm:p-3 rounded-full cursor-pointer" htmlFor="amber">
                 {
                   service.status.value === 1 ? (
                     <input type="checkbox"
-                      className="before:content[''] peer relative h-5 w-5 rounded-full cursor-pointer appearance-none  border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-green-500 checked:bg-green-500 checked:before:bg-green-500 hover:before:opacity-10"
+                      className="before:content[''] peer relative h-4 w-4 sm:h-5 sm:w-5 rounded-full cursor-pointer appearance-none border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-green-500 checked:bg-green-500 checked:before:bg-green-500 hover:before:opacity-10"
                       id="amber" checked readOnly />
                   ) : (
                     <input type="checkbox"
-                      className="before:content[''] peer relative h-5 w-5 rounded-full cursor-pointer appearance-none  border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-red-500 checked:bg-red-500 checked:before:bg-red-500 hover:before:opacity-10"
+                      className="before:content[''] peer relative h-4 w-4 sm:h-5 sm:w-5 rounded-full cursor-pointer appearance-none border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-red-500 checked:bg-red-500 checked:before:bg-red-500 hover:before:opacity-10"
                       id="amber" checked readOnly />
                   )
                 }
                 <span
                   className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 sm:h-3.5 sm:w-3.5" viewBox="0 0 20 20" fill="currentColor"
                     stroke="currentColor" strokeWidth="1">
                     <path fillRule="evenodd"
                       d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
@@ -44,6 +43,6 @@ export default async function Home() {
           </div>
         ))}
       </div>
-    </main >
+    </main>
   );
 }