Merge pull request #434 from bartoval/add_metrics_topology_sidebar_pr…

…ocess

Add metrics topology sidebar process

package.json

@@ -43,14 +43,14 @@
     "@patternfly/react-core": "^5.3.4",
     "@patternfly/react-icons": "^5.3.2",
     "@patternfly/react-table": "5.3.4",
-    "@tanstack/react-query": "^5.51.15",
-    "axios": "^1.7.2",
+    "@tanstack/react-query": "^5.51.21",
+    "axios": "^1.7.3",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.3.19",
+    "framer-motion": "^11.3.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-router-dom": "^6.25.1"
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
@@ -62,8 +62,8 @@
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "commitizen": "^4.3.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
@@ -74,11 +74,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jest": "^28.7.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "html-webpack-plugin": "^5.6.0",
-    "husky": "^9.1.3",
+    "husky": "^9.1.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.0",
@@ -87,7 +87,7 @@
     "start-server-and-test": "^2.0.5",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.4",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "ts-prune": "^0.10.3",

src/config/config.ts

@@ -30,5 +30,5 @@ export const IDS_GROUP_SEPARATOR = '~';
 export const IDS_MULTIPLE_SELECTION_SEPARATOR = ',';
 export const PAIR_SEPARATOR = '-to-';
 
-export const MIN_DRAWER_WIDTH = 450;
+export const MIN_DRAWER_WIDTH = 500;
 export const MAX_DRAWER_WIDTH = 800;

src/core/components/SKSanckeyChart/SkSankeyChart.interfaces.ts

@@ -1,16 +1,3 @@
-import { VarColors } from '@config/colors';
-
-export interface ThemesProps {
-  labelTextColor: VarColors;
-  fontFamily: string;
-  fontSize: number;
-  tooltip: { container: { color: string } };
-}
-
-export interface Themes {
-  [key: string]: ThemesProps;
-}
-
 export interface SkSankeyChartNode {
   id: string;
   nodeColor?: string;

src/core/components/SkGraph/Graph.constants.ts

@@ -7,8 +7,8 @@ export const NODE_LABEL_TEXT_COLOR = HexColors.Black900;
 export const NODE_LABEL_BACKGROUND_COLOR = HexColors.White;
 export const NODE_SELECT_BORDER = HexColors.DefaultHighLight;
 export const NODE_HIGHLIGHT_BORDER = HexColors.DefaultHighLight;
-export const NODE_BADGE_GROUP_ELEMENTS_BACKGROUND = HexColors.DefaultStatusBackground;
-export const NODE_BADGE_GROUP_ELEMENTS_TEXT = HexColors.DefaultStatusText;
+export const NODE_BADGE_GROUP_ELEMENTS_BACKGROUND = HexColors.Black500;
+export const NODE_BADGE_GROUP_ELEMENTS_TEXT = HexColors.White;
 
 export const EDGE_LINE_COLOR = HexColors.DefaultEdge;
 export const EDGE_TERMINAL_COLOR = HexColors.DefaultEdge;

src/core/components/SkGraph/Graph.interfaces.ts

@@ -1,6 +1,6 @@
 import { LayoutOptions } from '@antv/g6';
 
-export type GraphIconKeys = 'component' | 'process' | 'site' | 'podman' | 'kubernetes' | 'skupper';
+type GraphIconKeys = 'component' | 'process' | 'site' | 'podman' | 'kubernetes' | 'skupper';
 
 export type GraphIconsMap = {
   [key in GraphIconKeys]: HTMLImageElement;

src/core/components/SkGraph/components/CustomElements.ts

@@ -124,7 +124,7 @@ const DEFAULT_NODE_CONFIG: NodeOptions = {
 };
 
 // EDGE
-export const DEFAULT_DATA_EDGE_CONFIG: EdgeOptions = {
+const DEFAULT_DATA_EDGE_CONFIG: EdgeOptions = {
   style: {
     visibility: 'visible',
     opacity: 1,

src/core/components/SkGraph/services/index.ts

@@ -1,5 +1,7 @@
 import { ComboData, EdgeData, NodeData } from '@antv/g6';
 
+import { ellipsisInTheMiddle } from '@core/utils/EllipsisInTheMiddle';
+
 import { graphIconsMap } from '../Graph.config';
 import {
   GraphCombo,
@@ -249,21 +251,6 @@ function markPairs(data: GraphEdge[]) {
   });
 }
 
-function ellipsisInTheMiddle(str: string) {
-  const maxLength = 20;
-  const leftPartLength = 15;
-  const rightPartLength = 5;
-
-  if (str.length <= maxLength) {
-    return str;
-  }
-
-  const leftPart = str.substring(0, leftPartLength);
-  const rightPart = str.substring(str.length - rightPartLength);
-
-  return `${leftPart}...${rightPart}`;
-}
-
 /**
  * Normalizes a given metric value (such as bitrate) to a line thickness value
  * for visual representations like graphs or charts. The normalization is done

src/core/utils/EllipsisInTheMiddle.ts

@@ -0,0 +1,17 @@
+export function ellipsisInTheMiddle(
+  str: string,
+  options?: { maxLength?: number; leftPartLenth?: number; rightPartLength?: number }
+) {
+  const maxLength = options?.maxLength || 20;
+  const leftPartLength = options?.leftPartLenth || 15;
+  const rightPartLength = options?.rightPartLength || 5;
+
+  if (str.length <= maxLength) {
+    return str;
+  }
+
+  const leftPart = str.substring(0, leftPartLength);
+  const rightPart = str.substring(str.length - rightPartLength);
+
+  return `${leftPart}...${rightPart}`;
+}

src/pages/Processes/Processes.enum.ts

@@ -61,6 +61,6 @@ export enum ProcessesLabels {
   Latency = 'Latency',
   Name = 'Name',
   Component = 'Component',
-  ByteRateRx = 'Rx byte rate',
+  ByteRateRx = 'Byte rate In',
   Exposed = 'Exposed'
 }

src/pages/Topology/Topology.interfaces.ts

@@ -1,18 +1,5 @@
 import { PrometheusMetric, PrometheusLabels } from '@API/Prometheus.interfaces';
 import { ProcessPairsResponse, ProcessResponse } from '@API/REST.interfaces';
-import { CustomItemsProps, GraphIconKeys } from '@core/components/SkGraph/Graph.interfaces';
-
-export interface Entity {
-  id: string;
-  combo?: string;
-  comboName?: string;
-  groupId?: string;
-  groupName?: string;
-  label: string;
-  iconName: GraphIconKeys;
-  type?: CustomItemsProps;
-  groupedNodeCount?: number;
-}
 
 export interface TopologyMetrics {
   bytesByProcessPairs: PrometheusMetric<'vector'>[];
@@ -56,7 +43,7 @@ export interface DisplayOptions {
 export interface NodeOrEdgeListProps {
   ids?: string[];
   items: ProcessResponse[] | ProcessPairsResponse[];
-  metrics: TopologyMetrics | null;
+  metrics: TopologyMetrics;
   modalType: 'process' | 'processPair';
 }
 

src/pages/Topology/__tests__/NodeOrEdgeList.spec.tsx

@@ -7,7 +7,7 @@ import processesPairsData from '@mocks/data/PROCESS_PAIRS.json';
 import processesData from '@mocks/data/PROCESSES.json';
 import { loadMockServer } from '@mocks/server';
 
-import NodeOrEdgeList from '../components/NodeOrEdgeList';
+import TopologyDetails from '../components/TopologyDetails';
 
 const processesResults = processesData.results as ProcessResponse[];
 const processPairsResults = processesPairsData.results as ProcessPairsResponse[];
@@ -31,12 +31,58 @@ describe('NodeOrEdgeList', () => {
 
     render(
       <Wrapper>
-        <NodeOrEdgeList ids={ids} items={items} modalType="process" metrics={null} />
+        <TopologyDetails
+          ids={ids}
+          items={items}
+          modalType="process"
+          metrics={{
+            bytesByProcessPairs: [
+              {
+                metric: {
+                  destProcess: processesResults[0].name,
+                  direction: 'incoming',
+                  sourceProcess: processesResults[1].name
+                },
+                value: [1722715709.263, 38],
+                values: [] as never
+              },
+              {
+                metric: {
+                  destProcess: processesResults[1].name,
+                  direction: 'incoming',
+                  sourceProcess: processesResults[0].name
+                },
+                value: [1722715709.263, 38],
+                values: [] as never
+              }
+            ],
+            byteRateByProcessPairs: [
+              {
+                metric: {
+                  destProcess: processesResults[0].name,
+                  direction: 'incoming',
+                  sourceProcess: processesResults[1].name
+                },
+                value: [1722715709.263, 38],
+                values: [] as never
+              },
+              {
+                metric: {
+                  destProcess: processesResults[1].name,
+                  direction: 'incoming',
+                  sourceProcess: processesResults[0].name
+                },
+                value: [1722715709.263, 38],
+                values: [] as never
+              }
+            ],
+            latencyByProcessPairs: []
+          }}
+        />
       </Wrapper>
     );
 
     expect(screen.getByText(processesResults[0].name)).toBeInTheDocument();
-    expect(screen.getByText(`${processesResults[0].sourceHost}/${processesResults[0].hostName}`)).toBeInTheDocument();
     expect(screen.getAllByText(processesResults[0].groupName)[0]).toBeInTheDocument();
     expect(screen.getAllByText(processesResults[0].parentName)[0]).toBeInTheDocument();
     expect(
@@ -48,17 +94,51 @@ describe('NodeOrEdgeList', () => {
 
   it('should render a list of process pairs when modalType is "process-pair"', () => {
     const items = processPairsResults;
-    const ids = [processPairsResults[3].identity, processPairsResults[2].identity];
+    const ids = [processPairsResults[2].identity];
 
     render(
       <Wrapper>
-        <NodeOrEdgeList ids={ids} items={items} modalType="processPair" metrics={null} />
+        <TopologyDetails
+          ids={ids}
+          items={items}
+          modalType="processPair"
+          metrics={{
+            bytesByProcessPairs: [
+              {
+                metric: {
+                  destProcess: processPairsResults[2].destinationName,
+                  sourceProcess: processPairsResults[2].sourceName
+                },
+                value: [1722715709.263, 38],
+                values: [] as never
+              }
+            ],
+            byteRateByProcessPairs: [
+              {
+                metric: {
+                  destProcess: processPairsResults[2].destinationName,
+                  sourceProcess: processPairsResults[2].sourceName
+                },
+                value: [1722715709.263, 38],
+                values: [] as never
+              }
+            ],
+            latencyByProcessPairs: [
+              {
+                metric: {
+                  destProcess: processPairsResults[2].destinationName,
+                  sourceProcess: processPairsResults[2].sourceName
+                },
+                value: [1722715709.263, 38],
+                values: [] as never
+              }
+            ]
+          }}
+        />
       </Wrapper>
     );
 
     expect(screen.getByText(processPairsResults[2].sourceName)).toBeInTheDocument();
     expect(screen.getByText(processPairsResults[2].destinationName)).toBeInTheDocument();
-    expect(screen.getByText(processPairsResults[3].sourceName)).toBeInTheDocument();
-    expect(screen.getByText(processPairsResults[3].destinationName)).toBeInTheDocument();
   });
 });