@@ -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() {