Component: UI.

Why this is needed:

What should be done:

We should have the synced vertical line in the network charts along with the other metric charts. This means we should have the wrapper <SyncedCursorCharts> in a higher layer than <DashboardMetrics/>

Please find the latest design here: #3088 (comment)
Note that: This ticket doesn't include the health of Control-plane and Workload-plane, only the two graphs.

Implementation proposal (strongly recommended):
The graph should be similar as the Throughput graph in the Metrics Panel which separately displays the write and read.
Feel free to check the branch for the metrics charts, it hasn't been merged yet.

MetalK8s development/2.11:
feature/replace-the-metrics-charts-with-the-new-linetemporalchart
PR opened: #3512

The Prometheus queries should be:

  const controlPlaneNetworkBandwidthInAvgQuery = `avg(irate(node_network_receive_bytes_total{job=~"node-exporter",device=~"${controlPlaneInterface}"}[5m]))`;
  const controlPlaneNetworkBandwidthOutAvgQuery = `avg(irate(node_network_transmit_bytes_total{job=~"node-exporter",device=~"${controlPlaneInterface}"}[5m]))`;
  const workloadPlaneNetworkBandwidthInAvgQuery = `avg(irate(node_network_receive_bytes_total{job=~"node-exporter",device=~"${workloadPlaneInterface}"}[5m]))`;
  const workloadPlaneNetworkBandwidthOutAvgQuery = `avg(irate(node_network_transmit_bytes_total{job=~"node-exporter",device=~"${workloadPlaneInterface}"}[5m]))`;

Note:
So we have to retrieve the device(control plane interface/workload plane interface) before we do the query for each of the nodes.
We can define the enabled property of useQuery to the device so that it waits for it to be defined before executing the query.

The chart Y-axis title should be:
export const YAXIS_TITLE_IN_OUT = 'in(+) / out(-)';

  <LineTemporalChart
        series={seriesRef.current || []}
        height={80}
        title="Control Plane Bandwidth"
        startingTimeStamp={Date.parse(chartStartTimeRef.current) / 1000}
        yAxisType={'symmetrical'}
        unitRange={[
          { threshold: 0, label: 'B/s' },
          { threshold: 1024, label: 'KiB/s' },
          { threshold: 1024 * 1024, label: 'MiB/s' },
          { threshold: 1024 * 1024 * 1024, label: 'GiB/s' },
          { threshold: 1024 * 1024 * 1024 * 1024, label: 'TiB/s' },
        ]}
        yAxisTitle = {YAXIS_TITLE_IN_OUT}
        isLegendHided={false}
        isLoading={isNodeLoading}
      />

Test plan:
No test is needed.