@shardus/monitor-client - npm Package Compare versions

Comparing version 2.5.8 to 2.5.9

package.json

 {
     "name": "@shardus/monitor-client",
-    "version": "2.5.8",
+    "version": "2.5.9",
     "description": "",
@@ -5,0 +5,0 @@ "main": "entry.js",

public/app-versions.js

@@ -8,9 +8,20 @@ const INTERVAL = 10_000
     const tooltips = []
+    const selectedNodeType = nodeTypeSelect.value; // Get the selected node type from the dropdown
 
     const appDataResponse = await requestWithToken(`${monitorServerUrl}/app-versions`)
     const appDataList = appDataResponse.data
+    for(const appVersion in appDataList) {
+        const activeNodes = appDataList[appVersion].activeNodeCount === undefined || NaN? 0 : appDataList[appVersion].activeNodeCount;
+        const joiningNodes = appDataList[appVersion].joiningNodeCount  === undefined || NaN? 0 : appDataList[appVersion].joiningNodeCount;
+        const syncingNodes = appDataList[appVersion].syncingNodeCount  === undefined || NaN? 0 : appDataList[appVersion].syncingNodeCount;
 
-    for(const appVersion in appDataList) {
-        const count = appDataList[appVersion].nodeCount
-        data.push(count)
+        const count = (activeNodes + joiningNodes) === undefined || NaN? 0 : (activeNodes + joiningNodes);
+        const nodes = {
+            active: activeNodes,
+            joining: joiningNodes,
+            syncing: syncingNodes,
+            all: count
+        };
+
+        data.push(nodes);
         labels.push(appVersion)
@@ -22,4 +33,4 @@ const cliVersions = Object.entries(appDataList[appVersion].cliVersions).map(([version, count]) => `${version}: ${count}`).join("\n");
 
-    drawPieChart(data, labels, tooltips, animate)
-    writeInfoPanel(data, labels)
+    drawPieChart(data, labels, tooltips, animate, selectedNodeType)
+    writeInfoPanel(data, labels, selectedNodeType)
 }
@@ -42,3 +53,3 @@
 
-const drawPieChart = (data, labels, tooltips, animate) => {
+const drawPieChart = (data, labels, tooltips, animate, selectedNodeType) => {
   let chartStatus = Chart.getChart("app-versions-chart"); // <canvas> id
@@ -70,10 +81,43 @@ if (chartStatus != undefined) {
 
+  let graphType = "pie";
+  let datasets;
+
+  if (selectedNodeType === "all") {
+    datasets = [
+      {
+        data: data.map((nodes) => nodes.all),
+        backgroundColor: colors,
+      },
+    ];
+  } else {
+    datasets = [
+      {
+        data: data.map((nodes) => nodes[selectedNodeType]),
+        backgroundColor: colors,
+        label: selectedNodeType,
+      },
+    ];
+  }
+
+  // Check if all data values are 0
+  const allZero = datasets.every((dataset) =>
+    dataset.data.every((value) => value === 0)
+  );
+
+  if (allZero) {
+    datasets = [
+      {
+        data: [1], // Add a dummy value to display an empty pie chart
+        backgroundColor: ["#808080"], // Set the color to grey
+        borderWidth: 0, // Remove the border
+        label: "No data available",
+      },
+    ];
+  }
+
   new Chart(ctx, {
-    type: "pie",
+    type: graphType,
     data: {
-    datasets: [{
-        data: data,
-        backgroundColor: colors,
-    }],
-    labels: labels,
+      datasets: datasets,
+      labels: labels,
     },
@@ -84,20 +128,39 @@ options: chartOptions
 
-const writeInfoPanel = (data, labels) => {
-    // Print total number of nodes for each version along with percentage
-    const total = data.reduce((a, b) => a + b, 0)
-    const infoPanel = document.getElementById("app-versions-info")
-    infoPanel.innerHTML = ""
-    for (let i = 0; i < data.length; i++) {
-        const percentage = Math.round((data[i] / total) * 100)
-        const color = stringToColour(labels[i])
+const writeInfoPanel = (data, labels, selectedNodeType) => {
+    const infoPanel = document.getElementById("app-versions-info");
+    infoPanel.innerHTML = "";
+    if (selectedNodeType === "all") {
+      const totalAll = data.reduce((total, nodes) => total + nodes.all, 0); // Calculate the total count for all nodes
+      for (let i = 0; i < data.length; i++) {
+        const total = data[i].active + data[i].joining + data[i].syncing;
+        const percentage = totalAll > 0 ? Math.round((total / totalAll) * 100) : 0; // Calculate the percentage for each node version
+        // eslint-disable-next-line no-unsanitized/property
         infoPanel.innerHTML += `
-        <div>
+          <div>
             <span style="display: inline-block; width: 12px; height: 12px; background-color: ${colors[i]};"></span>
-            <span style="font-weight: bold;">${labels[i]}:</span> ${data[i]} (${percentage}%)
-        </div>
+            <span style="font-weight: bold;">${labels[i]}:</span> ${total} (${percentage}%)
+          </div>
         `;
+      }
+    } else {
+      const total = data.reduce((total, nodes) => total + nodes[selectedNodeType], 0);
+      for (let i = 0; i < data.length; i++) {
+        const percentage = total > 0 ? Math.round((data[i][selectedNodeType] / total) * 100) : 0;
+        // eslint-disable-next-line no-unsanitized/property
+        infoPanel.innerHTML += `
+          <div>
+            <span style="display: inline-block; width: 12px; height: 12px; background-color: ${colors[i]};"></span>
+            <span style="font-weight: bold;">${labels[i]}:</span> ${data[i][selectedNodeType]} (${percentage}%)
+          </div>
+        `;
+      }
     }
-}
+  };
 
+const nodeTypeSelect = document.getElementById("node-type");
+nodeTypeSelect.addEventListener("change", () => {
+  fetchChanges(true);
+});
+
 fetchChanges(true)
 setInterval(fetchChanges, INTERVAL)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2360545

increased by0.12%

Lines of code

5266

increased by1.09%

No dependency changes