Insert NNS topology

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

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,15 @@ 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 +36,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,