From b104431bf0e6879bebd82f7149276256273fc7e4 Mon Sep 17 00:00:00 2001 From: liamcottle Date: Sat, 8 Jun 2024 16:11:24 +1200 Subject: [PATCH] add power metrics and charts to node details panel --- src/public/index.html | 300 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 300 insertions(+) diff --git a/src/public/index.html b/src/public/index.html index a7ac65a..759a135 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -926,6 +926,92 @@ + +
+
Power Metrics
+ +
+
@@ -1617,6 +1703,7 @@ selectedNode: null, selectedNodeDeviceMetrics: [], selectedNodeEnvironmentMetrics: [], + selectedNodePowerMetrics: [], selectedNodeMqttMetrics: [], selectedNodeTraceroutes: [], @@ -1645,6 +1732,7 @@ this.selectedNode = node; this.loadNodeDeviceMetrics(node.node_id); this.loadNodeEnvironmentMetrics(node.node_id); + this.loadNodePowerMetrics(node.node_id); this.loadNodeMqttMetrics(node.node_id); this.loadNodeTraceroutes(node.node_id); }; @@ -1707,6 +1795,20 @@ this.renderEnvironmentMetricCharts(); }); }, + loadNodePowerMetrics: function(nodeId) { + window.axios.get(`/api/v1/nodes/${nodeId}/power-metrics`, { + params: { + count: 100, + }, + }).then((response) => { + // reverse response, as it's newest to oldest, but we want oldest to newest + this.selectedNodePowerMetrics = response.data.power_metrics.reverse(); + this.renderPowerMetricCharts(); + }).catch(() => { + this.selectedNodePowerMetrics = []; + this.renderPowerMetricCharts(); + }); + }, loadNodeMqttMetrics: function(nodeId) { this.selectedNodeMqttMetrics = []; window.axios.get(`/api/v1/nodes/${nodeId}/mqtt-metrics`).then((response) => { @@ -2114,6 +2216,200 @@ } }); + }, + renderPowerMetricCharts: function() { + this.updateCh1VoltageChart(); + this.updateCh2VoltageChart(); + this.updateCh3VoltageChart(); + }, + updateCh1VoltageChart: function() { + + // get chart context + const ctx = window.document.getElementById('ch1VoltageChart')?.getContext('2d'); + if(!ctx){ + return; + } + + // get ch1 voltage metrics + const powerMetrics = this.selectedNodePowerMetrics.filter((powerMetric) => { + return powerMetric.ch1_voltage != null; + }); + + new window.Chart(ctx, { + type: 'line', + data: { + labels: powerMetrics.map((powerMetric) => { + return new Date(powerMetric.created_at).toLocaleTimeString(); + }), + datasets: [{ + label: 'Voltage', + data: powerMetrics.map((powerMetric) => { + return powerMetric.ch1_voltage; + }), + borderColor: '#22c55e', + backgroundColor: '#e5e7eb', + fill: true, + }] + }, + options: { + responsive: true, + scales: { + x: { + display: false, // Hide x-axis labels + }, + y: { + display: false, // Hide y-axis labels + min: 0, + max: 24, + }, + }, + plugins: { + legend: { + display: false, // Hide the legend + }, + tooltip: { + yAlign: 'top', + intersect: false, + displayColors: false, + callbacks: { + label: (item) => item.formattedValue + "V", + }, + }, + }, + elements: { + point: { + radius: 0, // Set the radius to 0 to hide the dots + }, + }, + } + }); + + }, + updateCh2VoltageChart: function() { + + // get chart context + const ctx = window.document.getElementById('ch2VoltageChart')?.getContext('2d'); + if(!ctx){ + return; + } + + // get ch1 voltage metrics + const powerMetrics = this.selectedNodePowerMetrics.filter((powerMetric) => { + return powerMetric.ch2_voltage != null; + }); + + new window.Chart(ctx, { + type: 'line', + data: { + labels: powerMetrics.map((powerMetric) => { + return new Date(powerMetric.created_at).toLocaleTimeString(); + }), + datasets: [{ + label: 'Voltage', + data: powerMetrics.map((powerMetric) => { + return powerMetric.ch2_voltage; + }), + borderColor: '#22c55e', + backgroundColor: '#e5e7eb', + fill: true, + }] + }, + options: { + responsive: true, + scales: { + x: { + display: false, // Hide x-axis labels + }, + y: { + display: false, // Hide y-axis labels + min: 0, + max: 24, + }, + }, + plugins: { + legend: { + display: false, // Hide the legend + }, + tooltip: { + yAlign: 'top', + intersect: false, + displayColors: false, + callbacks: { + label: (item) => item.formattedValue + "V", + }, + }, + }, + elements: { + point: { + radius: 0, // Set the radius to 0 to hide the dots + }, + }, + } + }); + + }, + updateCh3VoltageChart: function() { + + // get chart context + const ctx = window.document.getElementById('ch3VoltageChart')?.getContext('2d'); + if(!ctx){ + return; + } + + // get ch1 voltage metrics + const powerMetrics = this.selectedNodePowerMetrics.filter((powerMetric) => { + return powerMetric.ch3_voltage != null; + }); + + new window.Chart(ctx, { + type: 'line', + data: { + labels: powerMetrics.map((powerMetric) => { + return new Date(powerMetric.created_at).toLocaleTimeString(); + }), + datasets: [{ + label: 'Voltage', + data: powerMetrics.map((powerMetric) => { + return powerMetric.ch3_voltage; + }), + borderColor: '#22c55e', + backgroundColor: '#e5e7eb', + fill: true, + }] + }, + options: { + responsive: true, + scales: { + x: { + display: false, // Hide x-axis labels + }, + y: { + display: false, // Hide y-axis labels + min: 0, + max: 24, + }, + }, + plugins: { + legend: { + display: false, // Hide the legend + }, + tooltip: { + yAlign: 'top', + intersect: false, + displayColors: false, + callbacks: { + label: (item) => item.formattedValue + "V", + }, + }, + }, + elements: { + point: { + radius: 0, // Set the radius to 0 to hide the dots + }, + }, + } + }); + }, showTraceRoute: function(traceroute) { this.selectedTraceRoute = traceroute; @@ -2191,6 +2487,10 @@ return nodes; }, + selectedNodeLatestPowerMetric() { + const [ latestPowerMetric ] = this.selectedNodePowerMetrics.slice(-1); + return latestPowerMetric; + }, }, watch: { configNodesMaxAgeInSeconds() {