Dashboard does not use metrics anymore (#1333)

* add DashboardAggregator that subscribe to mining_completed

* Add DashboardAggregatorAggregator genserver

* Dashboard use the DashboardAggregatorAggregator

* Publish the mining completed event

* DashboardAggregatorAggregator listen to node_up

* Remove Metrics collection

* rename DashboardAggregator to DashboardMetrics

* simplify bucket_key function

* optimize zip_nodes_with_latest_request

* Manual start of the processes for the tests

* do not update version anymore

* use :continue instead of send after

* lint

* Refactor Dashboard to display the transactions count instead of validations count

* add new graph network_tx_avg_duration

* add flag to median function

* Replace 2 charts by 2 others

- Boxplot of validation duration
- Tx count per node within last hour

.formatter.exs

@@ -2,7 +2,7 @@
 [
   inputs: [
     "{mix,.formatter}.exs",
-    "{config,lib,test}/**/*.{ex,exs}",
+    "{config,lib,test}/**/*.{ex,exs,heex}",
     "apps/*/{lib,config,test}/**/*.{ex,exs}",
     "apps/*/mix.exs"
   ],

assets/js/app.js

@@ -3,10 +3,14 @@
 // its own CSS file.
 import { } from "./ui";
 import {
-  initializeNbTransactionGraph,
-  updateNbTransactionGraph,
-  initializeValidationDurationGraph,
-  updateValidationDurationGraph
+  initBoxPlotTransactionsAvgDurationChart,
+  initNetworkTransactionsCountChart,
+  initNetworkTransactionsAvgDurationChart,
+  initNodeTransactionsCountChart,
+  updateBoxPlotTransactionsAvgDurationChart,
+  updateNetworkTransactionsCountChart,
+  updateNetworkTransactionsAvgDurationChart,
+  updateNodeTransactionsCountChart
 } from "./metric_config.js";
 import { createWorldmap, updateWorldmap } from "./worldmap";
 
@@ -85,20 +89,41 @@ Hooks.Logs = {
   },
 };
 
-//metric dashboard hook /metrics/dashboard
-Hooks.network_charts = {
+Hooks.network_transactions_count_chart = {
   mounted() {
-    const nbTransactionEl = this.el.querySelector("#nb_transactions")
-    const validationDurationEl = this.el.querySelector("#validation_duration")
+    const chart = initNetworkTransactionsCountChart(this.el.querySelector(".chart"));
+    this.handleEvent("network_transactions_count", (stats) => {
+      updateNetworkTransactionsCountChart(chart, stats);
+    });
+  }
+};
+
+Hooks.network_transactions_avg_duration_chart = {
+  mounted() {
+    const chart = initNetworkTransactionsAvgDurationChart(this.el.querySelector(".chart"));
+    this.handleEvent("network_transactions_avg_duration", (stats) => {
+      updateNetworkTransactionsAvgDurationChart(chart, stats);
+    });
+  }
+};
 
-    const txGraph = initializeNbTransactionGraph(nbTransactionEl);
-    const validationDurationGraph = initializeValidationDurationGraph(validationDurationEl);
+Hooks.node_transactions_count_chart = {
+  mounted() {
+    const chart = initNodeTransactionsCountChart(this.el.querySelector(".chart"));
+    this.handleEvent("node_transactions_count", (stats) => {
+      updateNodeTransactionsCountChart(chart, stats);
+    });
+  }
+};
 
-    this.handleEvent("network_updates", ({ nb_transactions, validation_duration }) => {
-      updateNbTransactionGraph(txGraph, nb_transactions);
-      updateValidationDurationGraph(validationDurationGraph, validation_duration);
+
+Hooks.boxplot_transactions_avg_duration = {
+  mounted() {
+    const chart = initBoxPlotTransactionsAvgDurationChart(this.el.querySelector(".chart"));
+    this.handleEvent("boxplot_transactions_avg_duration", (stats) => {
+      updateBoxPlotTransactionsAvgDurationChart(chart, stats);
     });
-  },
+  }
 };
 
 Hooks.worldmap = {