Statistics of secondary network interfaces

Signed-off-by: Dana Orr <dorr@redhat.com>

locales/en/plugin__kubevirt-plugin.json

@@ -175,6 +175,7 @@
   "Boot source type": "Boot source type",
   "bootable": "bootable",
   "Bootable Volumes": "Bootable Volumes",
+  "Breakdown by network": "Breakdown by network",
   "Bridge": "Bridge",
   "Build with guided documentation": "Build with guided documentation",
   "By CPU": "By CPU",
@@ -617,6 +618,7 @@
   "Network interfaces ({{count}})_plural": "Network interfaces ({{count}})",
   "Network out": "Network out",
   "Network Transfer": "Network Transfer",
+  "Network transfer breakdown": "Network transfer breakdown",
   "Networking": "Networking",
   "Networks": "Networks",
   "Networks misconfigured": "Networks misconfigured",
@@ -731,7 +733,6 @@
   "Preference": "Preference",
   "Preffered": "Preffered",
   "Primary live migration network": "Primary live migration network",
-  "Primary Network": "Primary Network",
   "project": "project",
   "Project": "Project",
   "Project labels": "Project labels",
@@ -968,6 +969,7 @@
   "Today": "Today",
   "Tolerations": "Tolerations",
   "Tolerations are applied to VirtualMachines, and allow (but do not require) the VirtualMachines to schedule onto Nodes with matching taints.": "Tolerations are applied to VirtualMachines, and allow (but do not require) the VirtualMachines to schedule onto Nodes with matching taints.",
+  "Top consumer": "Top consumer",
   "Top consumers": "Top consumers",
   "Topology key": "Topology key",
   "Topology key must not be empty": "Topology key must not be empty",
@@ -1043,6 +1045,7 @@
   "View documentation": "View documentation",
   "View events": "View events",
   "View matching {{matchingNodeText}}": "View matching {{matchingNodeText}}",
+  "View more": "View more",
   "View More": "View More",
   "View Persistent Volume Claim details": "View Persistent Volume Claim details",
   "View PersistentVolumeClaim details": "View PersistentVolumeClaim details",

src/utils/components/Charts/NetworkUtil/NetworkThresholdChartSingleSource.tsx

@@ -3,23 +3,24 @@ import { Link } from 'react-router-dom';
 import xbytes from 'xbytes';
 
 import { isEmpty } from '@kubevirt-utils/utils/utils';
-import { PrometheusValue } from '@openshift-console/dynamic-plugin-sdk';
+import { PrometheusResult } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Chart,
-  ChartArea,
   ChartAxis,
   ChartGroup,
-  ChartVoronoiContainer,
+  ChartLegendTooltip,
+  ChartLine,
+  ChartThemeColor,
+  createContainer,
 } from '@patternfly/react-charts';
-import chart_color_blue_400 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
 import useDuration from '@virtualmachines/details/tabs/metrics/hooks/useDuration';
 
 import ComponentReady from '../ComponentReady/ComponentReady';
 import useResponsiveCharts from '../hooks/useResponsiveCharts';
 import { MILLISECONDS_MULTIPLIER, tickFormat, TICKS_COUNT } from '../utils/utils';
 
 type NetworkThresholdSingleSourceChartProps = {
-  data: PrometheusValue[];
+  data: PrometheusResult[];
   link: string;
 };
 
@@ -28,14 +29,51 @@ const NetworkThresholdSingleSourceChart: React.FC<NetworkThresholdSingleSourceCh
   link,
 }) => {
   const { currentTime, duration, timespan } = useDuration();
-
   const { ref, width, height } = useResponsiveCharts();
 
-  const chartData = data?.map(([x, y]) => {
-    return { x: new Date(x * MILLISECONDS_MULTIPLIER), y: Number(y), name: 'Network In' };
+  const chartData =
+    !isEmpty(data) &&
+    data?.map((obj) => {
+      return (obj?.values || [])?.map(([x, y]) => {
+        return {
+          x: new Date(x * MILLISECONDS_MULTIPLIER),
+          y: Number(y),
+          name: obj?.metric?.interface,
+        };
+      });
+    });
+  const isReady = !isEmpty(chartData);
+
+  const findChartMaxYAxis = (chartData1: { x: Date; y: number; name: string }[][]) => {
+    const yValues =
+      !isEmpty(chartData1) &&
+      chartData1?.map((dataArray) => {
+        return Math.max(...dataArray?.map((data1) => data1?.y));
+      });
+    const maxY = Math.max(...(yValues || []));
+    return maxY;
+  };
+  const Ymax = findChartMaxYAxis(chartData);
+  const tickValues = Array.from({ length: Ymax + 1 }, (_, index) => {
+    if (index === 0) return '1 Bps';
+    if (index === Math.round(Ymax)) return `${Math.round(Ymax + 1)} Bps`;
+    return index.toString() + ' Bps';
   });
 
-  const isReady = !isEmpty(chartData);
+  const newTickFormat = (tick: any, index: number, ticks: any[]) => {
+    const isFirst = index === 0;
+    const isLast = index === ticks.length - 1;
+    if (isLast || isFirst) {
+      return tick;
+    }
+    return;
+  };
+  const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
+  const legendData =
+    !isEmpty(chartData) &&
+    chartData?.map((newChartdata, index) => {
+      return { childName: newChartdata?.[index]?.name, name: newChartdata?.[index]?.name };
+    });
 
   return (
     <ComponentReady isReady={isReady}>
@@ -44,20 +82,44 @@ const NetworkThresholdSingleSourceChart: React.FC<NetworkThresholdSingleSourceCh
           <Chart
             height={height}
             width={width}
-            padding={35}
+            padding={{ top: 30, bottom: 60, left: 70, right: 60 }}
             scale={{ x: 'time', y: 'linear' }}
+            themeColor={ChartThemeColor.multiUnordered}
             domain={{
               x: [currentTime - timespan, currentTime],
+              y: [0, tickValues.length],
             }}
             containerComponent={
-              <ChartVoronoiContainer
+              <CursorVoronoiContainer
+                cursorDimension="x"
                 labels={({ datum }) => {
-                  return `${datum?.name}: ${xbytes(datum?.y, { iec: true, fixed: 2 })}`;
+                  return `${xbytes(datum?.y, {
+                    iec: true,
+                    fixed: 2,
+                  })}ps`;
                 }}
-                constrainToVisibleArea
+                labelComponent={
+                  <ChartLegendTooltip
+                    legendData={legendData}
+                    title={(datum) => datum.x.getHours() + ':' + datum.x.getMinutes()}
+                  />
+                }
+                mouseFollowTooltips
+                voronoiDimension="x"
               />
             }
           >
+            <ChartAxis
+              dependentAxis
+              tickFormat={newTickFormat}
+              tickValues={tickValues}
+              style={{
+                ticks: {
+                  stroke: 'transparent',
+                },
+              }}
+              axisComponent={<></>}
+            />
             <ChartAxis
               tickFormat={tickFormat(duration, currentTime)}
               tickCount={TICKS_COUNT}
@@ -66,15 +128,17 @@ const NetworkThresholdSingleSourceChart: React.FC<NetworkThresholdSingleSourceCh
               }}
               axisComponent={<></>}
             />
+
             <ChartGroup>
-              <ChartArea
-                data={chartData}
-                style={{
-                  data: {
-                    stroke: chart_color_blue_400.value,
-                  },
-                }}
-              />
+              {isReady &&
+                chartData?.map((newChartdata) => (
+                  // eslint-disable-next-line react/jsx-key
+                  <ChartLine
+                    name={newChartdata?.[0]?.name}
+                    data={newChartdata}
+                    themeColor={ChartThemeColor.multiUnordered}
+                  />
+                ))}
             </ChartGroup>
           </Chart>
         </Link>

src/utils/components/Charts/utils/queries.ts

@@ -11,6 +11,7 @@ enum VMQueries {
   NETWORK_OUT_USAGE = 'NETWORK_OUT_USAGE',
   NETWORK_IN_BY_INTERFACE_USAGE = 'NETWORK_IN_BY_INTERFACE_USAGE',
   NETWORK_OUT_BY_INTERFACE_USAGE = 'NETWORK_OUT_BY_INTERFACE_USAGE',
+  NETWORK_TOTAL_BY_INTERFACE_USAGE = 'NETWORK_TOTAL_BY_INTERFACE_USAGE',
   NETWORK_TOTAL_USAGE = 'NETWORK_TOTAL_USAGE',
   STORAGE_IOPS_TOTAL = 'STORAGE_IOPS_TOTAL',
   MIGRATION_DATA_PROCESSED = 'MIGRATION_DATA_PROCESSED',
@@ -34,7 +35,6 @@ export const getUtilizationQueries: GetUtilizationQueries = ({
   obj,
   duration,
   launcherPodName,
-  nic,
 }) => {
   const { name, namespace } = obj?.metadata || {};
   return {
@@ -43,9 +43,10 @@ export const getUtilizationQueries: GetUtilizationQueries = ({
     [VMQueries.MEMORY_USAGE]: `sum(kubevirt_vmi_memory_used_bytes{name='${name}',namespace='${namespace}'}) BY (name)`,
     [VMQueries.NETWORK_IN_USAGE]: `sum(rate(kubevirt_vmi_network_receive_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace)`,
     [VMQueries.NETWORK_OUT_USAGE]: `sum(rate(kubevirt_vmi_network_transmit_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace)`,
-    [VMQueries.NETWORK_IN_BY_INTERFACE_USAGE]: `sum(rate(kubevirt_vmi_network_receive_bytes_total{name='${name}',namespace='${namespace}',interface='${nic}'}[${duration}])) BY (name, namespace, interface)`,
-    [VMQueries.NETWORK_OUT_BY_INTERFACE_USAGE]: `sum(rate(kubevirt_vmi_network_transmit_bytes_total{name='${name}',namespace='${namespace}',interface='${nic}'}[${duration}])) BY (name, namespace, interface)`,
-    [VMQueries.NETWORK_TOTAL_USAGE]: `sum(rate(kubevirt_vmi_network_receive_bytes_total{name='${name}',namespace='${namespace}',interface='${nic}'}[${duration}]) + rate(kubevirt_vmi_network_transmit_bytes_total{name='${name}',namespace='${namespace}',interface='${nic}'}[${duration}])) BY (name, namespace, interface)`,
+    [VMQueries.NETWORK_IN_BY_INTERFACE_USAGE]: `sum(rate(kubevirt_vmi_network_receive_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace, interface)`,
+    [VMQueries.NETWORK_OUT_BY_INTERFACE_USAGE]: `sum(rate(kubevirt_vmi_network_transmit_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace, interface)`,
+    [VMQueries.NETWORK_TOTAL_BY_INTERFACE_USAGE]: `sum(rate(kubevirt_vmi_network_receive_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace, interface)`,
+    [VMQueries.NETWORK_TOTAL_USAGE]: `sum(rate(kubevirt_vmi_network_receive_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace)`,
     [VMQueries.FILESYSTEM_READ_USAGE]: `sum(rate(kubevirt_vmi_storage_read_traffic_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace)`,
     [VMQueries.FILESYSTEM_WRITE_USAGE]: `sum(rate(kubevirt_vmi_storage_write_traffic_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace)`,
     [VMQueries.FILESYSTEM_USAGE_TOTAL]: `sum(rate(kubevirt_vmi_storage_read_traffic_bytes_total{name='${name}',namespace='${namespace}'}[${duration}]) + rate(kubevirt_vmi_storage_write_traffic_bytes_total{name='${name}',namespace='${namespace}'}[${duration}])) BY (name, namespace)`,

src/utils/components/Charts/utils/utils.ts

@@ -1,5 +1,9 @@
 import DurationOption from '@kubevirt-utils/components/DurationOption/DurationOption';
-import { PrometheusResponse, PrometheusValue } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  PrometheusResponse,
+  PrometheusResult,
+  PrometheusValue,
+} from '@openshift-console/dynamic-plugin-sdk';
 
 export const SINGLE_VM_DURATION = 'SINGLE_VM_DURATION';
 export const TICKS_COUNT = 100;
@@ -32,5 +36,29 @@ export const tickFormat =
     return '';
   };
 
-export const getPrometheusData = (response: PrometheusResponse): PrometheusValue[] =>
-  response?.data?.result?.[0]?.values;
+export const getPrometheusData = (response: PrometheusResponse): PrometheusValue[] => {
+  return response?.data?.result?.[0]?.values;
+};
+
+export const getPrometheusDataByNic = (
+  response: PrometheusResponse,
+  nic: string,
+): PrometheusResult[] => {
+  if (!response?.data?.result) {
+    return [];
+  }
+  const singleNic = response?.data?.result?.find((res) => res.metric?.interface === nic);
+  return singleNic ? [singleNic] : response?.data?.result;
+};
+
+export const getPrometheusDataAllNics = (response: PrometheusResponse): PrometheusResult[] => {
+  if (!response?.data?.result) {
+    return [];
+  }
+  return [
+    {
+      ...response?.data?.result?.[0],
+      metric: { ...response?.data?.result?.[0]?.metric, interface: 'all-networks' },
+    },
+  ];
+};

src/views/virtualmachines/details/tabs/metrics/NetworkCharts/NetworkCharts.tsx

@@ -1,24 +1,59 @@
 import React, { useMemo } from 'react';
 
 import { V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { Dropdown, DropdownItem, DropdownToggle, Title } from '@patternfly/react-core';
 
+import useQuery from './hook/useQuery';
 import NetworkChartsByNIC from './NetworkChartsByNIC';
 
+import '../virtual-machine-metrics-tab.scss';
 type NetworkChartsProps = {
   vmi: V1VirtualMachineInstance;
 };
 
 const NetworkCharts: React.FC<NetworkChartsProps> = ({ vmi }) => {
-  const interfacesNames = useMemo(
-    () => vmi?.spec?.domain?.devices?.interfaces.map((nic) => nic?.name),
-    [vmi],
+  const { t } = useKubevirtTranslation();
+  const interfacesNames = useMemo(() => {
+    const interfaces = vmi?.spec?.domain?.devices?.interfaces.map((nic) => nic?.name);
+    interfaces?.unshift('All networks');
+    return interfaces;
+  }, [vmi]);
+
+  const query = useQuery();
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
+  const [selectedNetwork, setSelectedNetwork] = React.useState<string>(
+    query?.get('network') || 'All networks',
   );
 
   return (
     <div>
-      {interfacesNames?.map((nic) => (
-        <NetworkChartsByNIC key={nic} vmi={vmi} nic={nic} />
-      ))}
+      <Title headingLevel="h4" className="networkcharts-by-nic--title">
+        {t('Network interface:')}
+      </Title>{' '}
+      <Dropdown
+        className="network ul.pf-c-dropdown__menu"
+        isPlain
+        isText
+        dropdownItems={interfacesNames?.map((nic) => (
+          <DropdownItem
+            key={nic}
+            onClick={(e) => {
+              setSelectedNetwork(e?.currentTarget?.innerText);
+              setIsDropdownOpen(false);
+            }}
+          >
+            {nic}
+          </DropdownItem>
+        ))}
+        isOpen={isDropdownOpen}
+        toggle={
+          <DropdownToggle onToggle={(toogle) => setIsDropdownOpen(toogle)}>
+            {selectedNetwork}
+          </DropdownToggle>
+        }
+      ></Dropdown>
+      <NetworkChartsByNIC vmi={vmi} nic={selectedNetwork} />
     </div>
   );
 };

src/views/virtualmachines/details/tabs/metrics/NetworkCharts/NetworkChartsByNIC.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import NetworkThresholdSingleSourceChart from '@kubevirt-utils/components/Charts/NetworkUtil/NetworkThresholdChartSingleSource';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { Card, CardBody, CardTitle, Grid, GridItem, Title } from '@patternfly/react-core';
+import { Card, CardBody, CardTitle, Grid, GridItem } from '@patternfly/react-core';
 
 import useNetworkData from './hook/useNetworkData';
 
@@ -14,36 +14,32 @@ type NetworkChartsByNICProps = {
 
 const NetworkChartsByNIC: React.FC<NetworkChartsByNICProps> = ({ vmi, nic }) => {
   const { t } = useKubevirtTranslation();
-  const [networkTotal, networkIn, networkOut, links] = useNetworkData(vmi, nic);
+  const { data, links } = useNetworkData(vmi, nic);
 
   return (
     <div>
-      <Title headingLevel="h4" className="networkcharts-by-nic--title">
-        {t('Network interface:')}
-      </Title>{' '}
-      {nic}
       <Grid>
         <GridItem span={4}>
           <Card>
             <CardTitle>{t('Network in')}</CardTitle>
             <CardBody>
-              <NetworkThresholdSingleSourceChart data={networkOut} link={links?.out} />
+              <NetworkThresholdSingleSourceChart data={data?.in} link={links?.in} />
             </CardBody>
           </Card>
         </GridItem>
         <GridItem span={4}>
           <Card>
             <CardTitle>{t('Network out')}</CardTitle>
             <CardBody>
-              <NetworkThresholdSingleSourceChart data={networkIn} link={links?.in} />
+              <NetworkThresholdSingleSourceChart data={data?.out} link={links?.out} />
             </CardBody>
           </Card>
         </GridItem>
         <GridItem span={4}>
           <Card>
             <CardTitle>{t('Network bandwidth')}</CardTitle>
             <CardBody>
-              <NetworkThresholdSingleSourceChart data={networkTotal} link={links?.total} />
+              <NetworkThresholdSingleSourceChart data={data?.total} link={links?.total} />
             </CardBody>
           </Card>
         </GridItem>