Additional feedback

locales/en/plugin__nmstate-console-plugin.json

@@ -15,6 +15,7 @@
   "Auto-gateway": "Auto-gateway",
   "Auto-routes": "Auto-routes",
   "Available": "Available",
+  "Base interface": "Base interface",
   "Cancel": "Cancel",
   "Cannot delete in view-only mode": "Cannot delete in view-only mode",
   "Cannot edit in view-only mode": "Cannot edit in view-only mode",
@@ -54,6 +55,7 @@
   "Failing": "Failing",
   "Features": "Features",
   "From Form": "From Form",
+  "Id": "Id",
   "Interface name": "Interface name",
   "Interface name should follow the linux kernel naming convention. The name should be smaller than 16 characters.": "Interface name should follow the linux kernel naming convention. The name should be smaller than 16 characters.",
   "Interface name should follow the linux kernel naming convention. Whitespaces and slashes are not allowed.": "Interface name should follow the linux kernel naming convention. Whitespaces and slashes are not allowed.",
@@ -121,6 +123,7 @@
   "Value": "Value",
   "View documentation": "View documentation",
   "View matching Nodes": "View matching Nodes",
+  "VLAN details": "VLAN details",
   "VLANS": "VLANS",
   "With YAML": "With YAML",
   "YAML": "YAML",

src/nmstate-types/custom-models/NodeNetworkConfigurationInterface.ts

@@ -36,4 +36,10 @@ export interface NodeNetworkConfigurationInterface {
   ethtool?: NodeNetworkConfigurationInterfaceEthtool;
 
   lldp?: NodeNetworkConfigurationInterfaceLLDP;
+
+  vlan?: {
+    id: number;
+    'base-iface': string;
+    protocol?: string;
+  };
 }

src/views/states/list/components/InterfaceDrawer/InterfaceDrawerDetailsTab.tsx

@@ -1,8 +1,17 @@
 import React, { FC } from 'react';
 
-import { Checkbox, Flex, FlexItem, List, ListItem, Title } from '@patternfly/react-core';
+import {
+  Checkbox,
+  Flex,
+  FlexItem,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
 import { NodeNetworkConfigurationInterface } from '@types';
-import { t } from '@utils/hooks/useNMStateTranslation';
+import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 import { getSystemName } from '@utils/neighbors/getters';
 
 import NeighborInformations from './NeighborInformations';
@@ -12,37 +21,32 @@ type InterfaceDrawerDetailsTabProps = {
 };
 
 const InterfaceDrawerDetailsTab: FC<InterfaceDrawerDetailsTabProps> = ({ selectedInterface }) => {
-  const ports = selectedInterface.bridge?.port?.map((port) => port.name);
+  const { t } = useNMStateTranslation();
+  const ports = selectedInterface.bridge?.port?.map((port) => port.name)?.sort();
 
   return (
-    <div>
-      {selectedInterface.ethtool?.feature && (
-        <div className="pf-u-mb-md">
-          <Title headingLevel="h4">{t('Features')}</Title>
-          <List isPlain>
-            {Object.keys(selectedInterface.ethtool?.feature)
-              .sort((a, b) => (a > b ? 1 : -1))
-              ?.map((feature) => (
-                <ListItem key={feature}>
-                  <Flex>
-                    <FlexItem>
-                      <Checkbox
-                        isDisabled
-                        id={`checkbox-${feature}`}
-                        value={feature}
-                        isChecked={selectedInterface.ethtool?.feature?.[feature]}
-                      />
-                    </FlexItem>
+    <Stack hasGutter>
+      {selectedInterface.vlan && (
+        <StackItem data-test="vlan-section">
+          <Title headingLevel="h4">{t('VLAN details')}</Title>
 
-                    <FlexItem>{feature}</FlexItem>
-                  </Flex>
-                </ListItem>
-              ))}
-          </List>
-        </div>
+          <Flex>
+            <FlexItem>
+              <strong>{t('Id')}:</strong>
+            </FlexItem>
+            <FlexItem>{selectedInterface.vlan.id}</FlexItem>
+          </Flex>
+          <Flex>
+            <FlexItem>
+              <strong>{t('Base interface')}:</strong>
+            </FlexItem>
+            <FlexItem>{selectedInterface.vlan['base-iface']}</FlexItem>
+          </Flex>
+        </StackItem>
       )}
-      <div className="pf-u-mb-md" data-test="lldp-section">
-        <Title headingLevel="h4">LLDP</Title>
+
+      <StackItem data-test="lldp-section">
+        <Title headingLevel="h4">{t('LLDP')}</Title>
         <p className="pf-u-mb-md">
           {selectedInterface.lldp?.enabled ? t('Enabled') : t('Disabled')}
         </p>
@@ -58,26 +62,52 @@ const InterfaceDrawerDetailsTab: FC<InterfaceDrawerDetailsTabProps> = ({ selecte
             </List>
           </>
         )}
-      </div>
+      </StackItem>
 
       {selectedInterface.bridge?.port?.length > 0 && (
-        <div className="pf-u-mb-md">
+        <StackItem>
           <Title headingLevel="h4">{t('Ports')}</Title>
           <List isPlain>
             {ports?.map((port) => (
               <ListItem key={port}>{port}</ListItem>
             ))}
           </List>
-        </div>
+        </StackItem>
       )}
 
       {selectedInterface['mac-address'] && (
-        <div className="pf-u-mb-md">
+        <StackItem>
           <Title headingLevel="h4">{t('MAC Address')}</Title>
           <p>{selectedInterface['mac-address']}</p>
-        </div>
+        </StackItem>
+      )}
+
+      {selectedInterface.ethtool?.feature && (
+        <StackItem>
+          <Title headingLevel="h4">{t('Features')}</Title>
+          <List isPlain>
+            {Object.keys(selectedInterface.ethtool?.feature)
+              .sort((a, b) => (a > b ? 1 : -1))
+              ?.map((feature) => (
+                <ListItem key={feature}>
+                  <Flex>
+                    <FlexItem>
+                      <Checkbox
+                        isDisabled
+                        id={`checkbox-${feature}`}
+                        value={feature}
+                        isChecked={selectedInterface.ethtool?.feature?.[feature]}
+                      />
+                    </FlexItem>
+
+                    <FlexItem>{feature}</FlexItem>
+                  </Flex>
+                </ListItem>
+              ))}
+          </List>
+        </StackItem>
       )}
-    </div>
+    </Stack>
   );
 };
 

src/views/states/list/components/InterfacesPopoverBody.tsx

@@ -1,6 +1,4 @@
 import React, { FC, useCallback } from 'react';
-import { useHistory } from 'react-router';
-import NodeNetworkStateModel from 'src/console-models/NodeNetworkStateModel';
 
 import {
   Button,
@@ -12,33 +10,34 @@ import {
   ListItem,
 } from '@patternfly/react-core';
 import { LongArrowAltDownIcon, LongArrowAltUpIcon } from '@patternfly/react-icons';
-import { NodeNetworkConfigurationInterface } from '@types';
-import { getResourceUrl } from '@utils/helpers';
+import { NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
+import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
+
+import useDrawerInterface from '../hooks/useDrawerInterface';
 
 import './interfaces-popover-body.scss';
 
 type InterfacesPopoverBodyProps = {
   interfaces: NodeNetworkConfigurationInterface[];
+  nodeNetworkState: V1beta1NodeNetworkState;
   hide: () => void;
 };
 
 const Row = ({ children }) => <Flex flexWrap={{ default: 'nowrap' }}>{children}</Flex>;
 const FirstColumn = ({ children }) => <FlexItem flex={{ default: 'flex_1' }}>{children}</FlexItem>;
 const SecondColumn = ({ children }) => <FlexItem flex={{ default: 'flex_3' }}>{children}</FlexItem>;
 
-const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({ interfaces, hide }) => {
-  const history = useHistory();
+const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({
+  interfaces,
+  nodeNetworkState,
+  hide,
+}) => {
+  const { t } = useNMStateTranslation();
+  const { setSelectedInterfaceName } = useDrawerInterface();
 
   const onInterfaceNameClick = useCallback(
     (iface: NodeNetworkConfigurationInterface) => {
-      const baseListUrl = getResourceUrl({ model: NodeNetworkStateModel });
-
-      const query = new URLSearchParams({
-        selectedInterface: iface.name,
-      });
-
-      history.push(`${baseListUrl}?${query.toString()}`);
-
+      setSelectedInterfaceName(nodeNetworkState, iface);
       hide();
     },
     [hide],
@@ -54,7 +53,7 @@ const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({ interfaces, hid
           <ListItem key={iface.name} className="interfaces-popover-body__list-item">
             <Row>
               <FirstColumn>
-                <strong>Name</strong>
+                <strong>{t('Name')}</strong>
               </FirstColumn>
               <SecondColumn>
                 <Button
@@ -68,7 +67,7 @@ const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({ interfaces, hid
             </Row>
             <Row>
               <FirstColumn>
-                <strong>IP address</strong>
+                <strong>{t('IP address')}</strong>
               </FirstColumn>
               <SecondColumn>
                 {address?.[0] ? (
@@ -82,13 +81,13 @@ const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({ interfaces, hid
             </Row>
             <Row>
               <FirstColumn>
-                <strong>Ports</strong>
+                <strong>{t('Ports')}</strong>
               </FirstColumn>
               <SecondColumn>{iface.bridge?.port?.length || '-'}</SecondColumn>
             </Row>
             <Row>
               <FirstColumn>
-                <strong>LLDP</strong>
+                <strong>{t('LLDP')}</strong>
               </FirstColumn>
               <SecondColumn>
                 <Checkbox
@@ -101,7 +100,7 @@ const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({ interfaces, hid
 
             <Row>
               <FirstColumn>
-                <strong>MTU</strong>
+                <strong>{t('MTU')}</strong>
               </FirstColumn>
               <SecondColumn>{iface?.mtu || '-'}</SecondColumn>
             </Row>

src/views/states/list/components/InterfacesTypeSection.tsx

@@ -46,6 +46,7 @@ const InterfacesTypeSection: FC<InterfacesTypeSectionProps> = memo(
 
         {interfaces.map((iface) => {
           const address = iface.ipv4?.address || iface.ipv6?.address;
+          const ports = iface.bridge?.port?.map((port) => port.name)?.sort();
           const Icon =
             iface.state.toLowerCase() === 'up' ? LongArrowAltUpIcon : LongArrowAltDownIcon;
 
@@ -55,14 +56,14 @@ const InterfacesTypeSection: FC<InterfacesTypeSectionProps> = memo(
               isExpanded={isExpanded}
               className="interfaces-table__interfaces-expandable-row"
             >
-              <Td className="pf-m-width-30">
+              <Td className="interfaces-table__interfaces-expandable-row__column-name">
                 <Button
                   variant={ButtonVariant.link}
                   onClick={() => setSelectedInterfaceName(nodeNetworkState, iface)}
                   data-test={`${interfaceType}-${iface.name}-open-drawer`}
                 >
                   {iface.name}
-                  <Icon color="black" className="pf-u-mr-sm" />
+                  <Icon className="interfaces-table__interfaces-expandable-row__status-icon" />
                 </Button>
               </Td>
               <Td>
@@ -75,17 +76,17 @@ const InterfacesTypeSection: FC<InterfacesTypeSectionProps> = memo(
                 )}
               </Td>
               <Td>
-                {iface.bridge?.port?.length ? (
+                {ports?.length ? (
                   <Tooltip
                     content={
                       <List isPlain>
-                        {iface?.bridge?.port.map((portItem) => (
-                          <ListItem key={portItem.name}>{portItem.name}</ListItem>
+                        {ports.map((port) => (
+                          <ListItem key={port}>{port}</ListItem>
                         ))}
                       </List>
                     }
                   >
-                    <span> {iface?.bridge?.port?.length}</span>
+                    <span>{ports.length}</span>
                   </Tooltip>
                 ) : (
                   '-'

src/views/states/list/components/StateRow.tsx

@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
 import { NodeNetworkStateModelGroupVersionKind } from 'src/console-models';
 
 import { ResourceLink, RowProps, TableData } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, ButtonVariant, List, ListItem, Popover, Title } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, FlexItem, Popover, Title } from '@patternfly/react-core';
 import { ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
 import { InterfaceType, V1beta1NodeNetworkState } from '@types';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
@@ -52,9 +52,9 @@ const StateRow: FC<RowProps<V1beta1NodeNetworkState, { rowIndex: number }>> = ({
           activeColumnIDs={activeColumnIDs}
           className="pf-m-width-50"
         >
-          <List isPlain>
+          <Flex flexWrap={{ default: 'wrap' }} className="state-row__flex-interfaces">
             {Object.keys(interfacesByType)?.map((interfaceType) => (
-              <ListItem key={interfaceType}>
+              <FlexItem key={interfaceType}>
                 <Popover
                   headerContent={
                     <>
@@ -64,6 +64,7 @@ const StateRow: FC<RowProps<V1beta1NodeNetworkState, { rowIndex: number }>> = ({
                   bodyContent={(hide) => (
                     <InterfacesPopoverBody
                       interfaces={interfacesByType[interfaceType]}
+                      nodeNetworkState={obj}
                       hide={hide}
                     />
                   )}
@@ -73,9 +74,9 @@ const StateRow: FC<RowProps<V1beta1NodeNetworkState, { rowIndex: number }>> = ({
                     {interfaceType} ({interfacesByType[interfaceType].length})
                   </Button>
                 </Popover>
-              </ListItem>
+              </FlexItem>
             ))}
-          </List>
+          </Flex>
         </TableData>
       </Tr>
       <Tr isExpanded={isExpanded} className={`state-row__expanded-${isExpanded}`}>

src/views/states/list/components/interfaces-table.scss

@@ -24,20 +24,26 @@
 
     .expandable-section-interface-type .pf-c-expandable-section__toggle-text {
       font-weight: bold;
-      color: var(--pf-global--Color--300);
+      color: var(--pf-global--Color--200);
     }
   }
 
-
   tbody .interfaces-table__interfaces-expandable-row {
-
     &:not(:first-child) td {
       padding-top: var(--pf-global--spacer--sm);
     }
 
     &:not(:last-child) td {
       padding-bottom: var(--pf-global--spacer--sm);
     }
-
+
+    &__status-icon {
+      color: var(--pf-global--Color--200);
+      margin-right: var(--pf-global--spacer--sm);
+    }
+
+    &__column-name {
+      width: 30%;
+    }
   }
 }