Insert NNS topology

Signed-off-by: Aviv Turgeman <[email protected]>

locales/en/plugin__nmstate-console-plugin.json

@@ -138,6 +138,7 @@
   "Server": "Server",
   "System Description": "System Description",
   "System Name": "System Name",
+  "Tech preview": "Tech preview",
   "The Open vSwitch bridge mapping is a list of Open vSwitch bridges and the physical interfaces that are connected to them.": "The Open vSwitch bridge mapping is a list of Open vSwitch bridges and the physical interfaces that are connected to them.",
   "This is the list of ports to copy MAC address from. Select one of the matched ports this policy will apply to": "This is the list of ports to copy MAC address from. Select one of the matched ports this policy will apply to",
   "This node already has a policy matching it": "This node already has a policy matching it",

src/utils/components/TechPreview/TechPreview.scss

@@ -0,0 +1,7 @@
+.TechPreviewLabel {
+  color: var(--pf-v5-c-button--m-danger--Color);
+  background-color: var(--pf-v5-c-button--m-danger--BackgroundColor);
+  margin-left: var(--pf-v5-global--spacer--md);
+  padding: 0 var(--pf-v5-global--spacer--sm);
+  align-self: center;
+}

src/utils/components/TechPreview/TechPreview.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+
+import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
+
+import './TechPreview.scss';
+const TechPreview: FC = () => {
+  const { t } = useNMStateTranslation();
+
+  return (
+    <div className={classNames('pf-v5-c-button', 'TechPreviewLabel')}>{t('Tech preview')}</div>
+  );
+};
+
+export default TechPreview;

src/views/states/list/StatesList.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useState } from 'react';
-// import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useNMStateTranslation } from 'src/utils/hooks/useNMStateTranslation';
 
 import {
@@ -14,8 +14,8 @@ import {
   useK8sWatchResource,
   useListPageFilter,
 } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Flex, /*Icon*/ Pagination } from '@patternfly/react-core';
-// import { TopologyIcon } from '@patternfly/react-icons';
+import { Button, Flex, Icon, Pagination } from '@patternfly/react-core';
+import { TopologyIcon } from '@patternfly/react-icons';
 import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-table';
 import { V1beta1NodeNetworkState } from '@types';
 import usePagination from '@utils/hooks/usePagination/usePagination';
@@ -35,7 +35,7 @@ import './states-list.scss';
 
 const StatesList: FC = () => {
   const { t } = useNMStateTranslation();
-  // const navigate = useNavigate();
+  const navigate = useNavigate();
   const {
     selectedInterfaceName,
     selectedStateName,
@@ -77,11 +77,11 @@ const StatesList: FC = () => {
   return (
     <>
       <ListPageHeader title={t(NodeNetworkStateModel.label)}>
-        {/* <Button isInline variant="plain" onClick={() => navigate('/nmstate-topology')}>
+        <Button isInline variant="plain" onClick={() => navigate('/nmstate-topology')}>
           <Icon>
             <TopologyIcon />
           </Icon>
-        </Button> */}
+        </Button>
       </ListPageHeader>
       <ListPageBody>
         <StatusBox loaded={statesLoaded} error={statesError}>

src/views/states/manifest.ts

@@ -2,14 +2,14 @@ import type { EncodedExtension } from '@openshift/dynamic-plugin-sdk';
 import type {
   ResourceClusterNavItem,
   ResourceListPage,
-  // RoutePage,
+  RoutePage,
 } from '@openshift-console/dynamic-plugin-sdk';
 
 import { NodeNetworkStateModelGroupVersionKind } from '../../console-models';
 
 export const StateExposedModules = {
   StatesList: './views/states/list/StatesList',
-  // Topology: './views/states/topology/Topology',
+  Topology: './views/states/topology/Topology',
 };
 
 export const StateExtensions: EncodedExtension[] = [
@@ -35,13 +35,13 @@ export const StateExtensions: EncodedExtension[] = [
       component: { $codeRef: 'StatesList' },
     },
   } as EncodedExtension<ResourceListPage>,
-  // {
-  //   type: 'console.page/route',
-  //   properties: {
-  //     path: ['nmstate-topology'],
-  //     component: {
-  //       $codeRef: 'Topology',
-  //     },
-  //   },
-  // } as EncodedExtension<RoutePage>,
+  {
+    type: 'console.page/route',
+    properties: {
+      path: ['nmstate-topology'],
+      component: {
+        $codeRef: 'Topology',
+      },
+    },
+  } as EncodedExtension<RoutePage>,
 ];

src/views/states/topology/components/BridgeIcon.tsx

@@ -0,0 +1,15 @@
+import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon';
+
+export const BridgeIconConfig = {
+  name: 'BridgeIcon',
+  height: 32,
+  width: 32,
+  svgPath:
+    'M28.3,6.8c.5-.5.5-1.3,0-1.8l-3.7-3.7c-.5-.5-1.3-.5-1.8,0s-.5,1.3,0,1.8l1.6,1.6h-11.8c-.7,0-1.2.6-1.2,1.2s.6,1.2,1.2,1.2h11.8l-1.6,1.6c-.5.5-.5,1.3,0,1.8s1.3.5,1.8,0l3.7-3.7h0Z M3.7,11.8c-.5.5-.5,1.3,0,1.8l3.7,3.7c.5.5,1.3.5,1.8,0s.5-1.3,0-1.8l-1.6-1.6h11.8c.7,0,1.2-.6,1.2-1.2s-.6-1.2-1.2-1.2H7.6l1.6-1.6c.5-.5.5-1.3,0-1.8s-1.3-.5-1.8,0l-3.7,3.7h0Z M28.3,20.2c.5-.5.5-1.3,0-1.8l-3.7-3.7c-.5-.5-1.3-.5-1.8,0s-.5,1.3,0,1.8l1.6,1.6h-11.8c-.7,0-1.2.6-1.2,1.2s.6,1.2,1.2,1.2h11.8l-1.6,1.6c-.5.5-.5,1.3,0,1.8s1.3.5,1.8,0l3.7-3.7h0Z M3.7,25.2c-.5.5-.5,1.3,0,1.8l3.7,3.7c.5.5,1.3.5,1.8,0s.5-1.3,0-1.8l-1.6-1.6h11.8c.7,0,1.2-.6,1.2-1.2s-.6-1.2-1.2-1.2H7.6l1.6-1.6c.5-.5.5-1.3,0-1.8s-1.3-.5-1.8,0l-3.7,3.7h0Z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+export const BridgeIcon = createIcon(BridgeIconConfig);
+
+export default BridgeIcon;

src/views/states/topology/components/TopologyToolbar/TopologyToolbar.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom-v5-compat';
 import { NodeNetworkStateModelRef } from '@models';
 import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
 import { ListIcon } from '@patternfly/react-icons';
+import TechPreview from '@utils/components/TechPreview/TechPreview';
 
 import TopologyToolbarFilter from './TopologyToolbarFilter';
 
@@ -24,6 +25,7 @@ const TopologyButton: FC<TopologyToolbarProps> = (props) => {
       <ToolbarContent className="topology-toolbar__content">
         <ToolbarGroup>
           <TopologyToolbarFilter {...props} />
+          <TechPreview />
         </ToolbarGroup>
         <ToolbarGroup>
           <ToolbarItem className="list-view-btn">

src/views/states/topology/utils/utils.ts

@@ -8,6 +8,9 @@ import {
   NodeStatus,
 } from '@patternfly/react-topology';
 import { InterfaceType, NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
+import { isEmpty } from '@utils/helpers';
+
+import BridgeIcon from '../components/BridgeIcon';
 
 import { GROUP, NODE_DIAMETER } from './constants';
 
@@ -22,6 +25,7 @@ const getStatus = (iface: NodeNetworkConfigurationInterface): NodeStatus => {
 };
 
 const getIcon = (iface: NodeNetworkConfigurationInterface) => {
+  if (!isEmpty(iface.bridge)) return BridgeIcon;
   if (iface.ethernet || iface.type === InterfaceType.ETHERNET) return EthernetIcon;
   if (iface.type === InterfaceType.BOND) return LinkIcon;
   return NetworkIcon;
@@ -95,7 +99,7 @@ const createEdges = (
       });
     }
 
-    if (iface.vlan?.['base-iface'] && iface.name !== iface.vlan?.['base-iface']) {
+    if (iface.vlan?.['base-iface'] && iface.name === iface.vlan?.['base-iface']) {
       edges.push({
         id: `${nodeId}~${iface.vlan['base-iface']}-edge`,
         type: ModelKind.edge,