NETOBSERV-131 POC Sankey chart

web/package.json

@@ -35,7 +35,9 @@
     "@openshift-console/dynamic-plugin-sdk": "0.0.19",
     "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.10",
     "@testing-library/react": "^12.1.2",
+    "@types/chroma-js": "^2.4.4",
     "@types/copy-webpack-plugin": "8.0.1",
+    "@types/d3-sankey": "^0.12.4",
     "@types/enzyme": "3.10.x",
     "@types/jest": "27.0.3",
     "@types/jsdom": "^16.2.13",
@@ -95,7 +97,7 @@
     "description": "This plugin adds network observability functionality to Openshift console",
     "exposedModules": {
       "netflowParent": "./components/netflow-traffic-parent.tsx",
-      "netflowTab": "./components/netflow-tab.tsx"
+      "netflowTab": "./components/netflow-traffic-tab.tsx"
     },
     "dependencies": {
       "@console/pluginAPI": "*"
@@ -109,6 +111,8 @@
     "@patternfly/react-table": "4.113.0",
     "@patternfly/react-topology": "4.93.6",
     "axios": "^1.6.3",
+    "chroma-js": "^2.4.2",
+    "d3-sankey": "^0.12.3",
     "html-to-image": "^1.11.11",
     "i18next": "^21.8.14",
     "i18next-http-backend": "^1.0.21",

web/setup-tests.tsx

@@ -101,6 +101,14 @@ jest.mock('react-router-dom', () => ({
   }
 }));
 
+//Mock d3-sankey
+jest.mock('d3-shape', () => ({
+  linkHorizontal: () => ({
+    source: jest.fn(),
+    target: jest.fn()
+  })
+}));
+
 //Mock routes
 jest.mock('./src/api/routes', () => ({
   getPods: jest.fn(async () => ['ABCD']),
@@ -114,7 +122,7 @@ global.console = {
   log: jest.fn(),
   warn: jest.fn(),
   info: jest.fn(),
-  
+
   // Keep native behaviour for error, and allow logging for debugging
   debug: console.log,
   error: console.error,

web/src/api/loki.ts

@@ -171,6 +171,8 @@ export type TopologyMetrics = {
 };
 
 export type NamedMetric = TopologyMetrics & {
+  srcName: string;
+  dstName: string;
   fullName: string;
   shortName: string;
   isInternal: boolean;

web/src/app.tsx

@@ -14,8 +14,8 @@ import {
 } from '@patternfly/react-core';
 import React from 'react';
 import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
-import NetflowTab from './components/netflow-tab';
 import NetflowTrafficParent from './components/netflow-traffic-parent';
+import NetflowTrafficTab from './components/netflow-traffic-tab';
 
 interface AppState {
   activeItem: number | string;
@@ -71,11 +71,11 @@ export class App extends React.Component<{}, AppState> {
     console.debug('getPageContent', id);
     switch (id) {
       case 'pod-tab':
-        return <NetflowTab obj={{ kind: 'Pod', metadata: { name: 'test', namespace: 'default' } }} />;
+        return <NetflowTrafficTab obj={{ kind: 'Pod', metadata: { name: 'test', namespace: 'default' } }} />;
       case 'namespace-tab':
-        return <NetflowTab obj={{ kind: 'Namespace', metadata: { name: 'test' } }} />;
+        return <NetflowTrafficTab obj={{ kind: 'Namespace', metadata: { name: 'test' } }} />;
       case 'node-tab':
-        return <NetflowTab obj={{ kind: 'Node', metadata: { name: 'test' } }} />;
+        return <NetflowTrafficTab obj={{ kind: 'Node', metadata: { name: 'test' } }} />;
       default:
         return <NetflowTrafficParent />;
     }

web/src/components/__tests__/netflow-tab.spec.tsx

@@ -5,9 +5,9 @@ import * as React from 'react';
 import { AlertsResult, SilencedAlert } from '../../api/alert';
 import { FlowMetricsResult, GenericMetricsResult } from '../../api/loki';
 import { getConfig } from '../../api/routes';
-import NetflowTab from '../netflow-tab';
 import NetflowTraffic from '../netflow-traffic';
 import NetflowTrafficParent from '../netflow-traffic-parent';
+import NetflowTrafficTab from '../netflow-traffic-tab';
 import { FullConfigResultSample } from '../__tests-data__/config';
 import { extensionsMock } from '../__tests-data__/extensions';
 import { PodTabParam, ServiceTabParam, UnknownTabParam } from '../__tests-data__/tabs';
@@ -35,7 +35,7 @@ jest.mock('../../api/routes', () => ({
 
 const getConfigMock = getConfig as jest.Mock;
 
-describe('<NetflowTab />', () => {
+describe('<NetflowTrafficTab />', () => {
   beforeAll(() => {
     useResolvedExtensionsMock.mockReturnValue(extensionsMock);
   });
@@ -45,31 +45,31 @@ describe('<NetflowTab />', () => {
   });
 
   it('should mount component for Pod', async () => {
-    const wrapper = mount(<NetflowTab obj={PodTabParam} />);
+    const wrapper = mount(<NetflowTrafficTab obj={PodTabParam} />);
     await waitFor(() => {
       expect(getConfigMock).toHaveBeenCalled();
 
-      expect(wrapper.find(NetflowTab).last()).toBeTruthy();
+      expect(wrapper.find(NetflowTrafficTab).last()).toBeTruthy();
       expect(wrapper.find(NetflowTrafficParent).last()).toBeTruthy();
       expect(wrapper.find(NetflowTraffic).last()).toBeTruthy();
     });
   });
   it('should mount component for Service', async () => {
-    const wrapper = mount(<NetflowTab obj={ServiceTabParam} />);
+    const wrapper = mount(<NetflowTrafficTab obj={ServiceTabParam} />);
     await waitFor(() => {
       expect(getConfigMock).toHaveBeenCalled();
 
-      expect(wrapper.find(NetflowTab).last()).toBeTruthy();
+      expect(wrapper.find(NetflowTrafficTab).last()).toBeTruthy();
       expect(wrapper.find(NetflowTrafficParent).last()).toBeTruthy();
       expect(wrapper.find(NetflowTraffic).last()).toBeTruthy();
     });
   });
   it('should mount empty state', async () => {
-    const wrapper = mount(<NetflowTab obj={UnknownTabParam} />);
+    const wrapper = mount(<NetflowTrafficTab obj={UnknownTabParam} />);
     await waitFor(() => {
       expect(getConfigMock).toHaveBeenCalled();
 
-      expect(wrapper.find(NetflowTab).last()).toBeTruthy();
+      expect(wrapper.find(NetflowTrafficTab).last()).toBeTruthy();
       expect(wrapper.find('EmptyState[data-test="error-state"]').last()).toBeTruthy();
     });
   });