CNV-40105: Button to expand all sections

locales/en/plugin__nmstate-console-plugin.json

@@ -20,6 +20,7 @@
   "Cannot delete in view-only mode": "Cannot delete in view-only mode",
   "Cannot edit in view-only mode": "Cannot edit in view-only mode",
   "Click <1>Create NodeNetworkConfigurationPolicy</1> to create your first policy": "Click <1>Create NodeNetworkConfigurationPolicy</1> to create your first policy",
+  "Collapse all": "Collapse all",
   "Confirm deletion by typing <1>{{name}}</1> below:": "Confirm deletion by typing <1>{{name}}</1> below:",
   "Copied": "Copied",
   "Copy": "Copy",
@@ -51,6 +52,7 @@
   "Enactment states": "Enactment states",
   "Enactments categorized by status": "Enactments categorized by status",
   "Enter name": "Enter name",
+  "Expand all": "Expand all",
   "Explore {{kind}} list": "Explore {{kind}} list",
   "Failing": "Failing",
   "Features": "Features",

src/views/states/list/StatesList.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import {
   NodeNetworkStateModelGroupVersionKind,
   NodeNetworkStateModelRef,
@@ -13,7 +13,7 @@ import {
   useK8sWatchResource,
   useListPageFilter,
 } from '@openshift-console/dynamic-plugin-sdk';
-import { Pagination } from '@patternfly/react-core';
+import { Button, Flex, Pagination } from '@patternfly/react-core';
 import { Table, TableGridBreakpoint, TableHeader } from '@patternfly/react-table';
 import { V1beta1NodeNetworkState } from '@types';
 import usePagination from '@utils/hooks/usePagination/usePagination';
@@ -33,6 +33,8 @@ const StatesList: FC = () => {
   const { t } = useNMStateTranslation();
   const { selectedInterfaceName, selectedStateName, selectedInterfaceType } = useDrawerInterface();
 
+  const [expandAll, setExpandAll] = useState(false);
+
   const [states, statesLoaded, statesError] = useK8sWatchResource<V1beta1NodeNetworkState[]>({
     groupVersionKind: NodeNetworkStateModelGroupVersionKind,
     isList: true,
@@ -58,34 +60,39 @@ const StatesList: FC = () => {
       <ListPageBody>
         <StatusBox loaded={statesLoaded} error={statesError}>
           <div className="list-managment-group">
-            <ListPageFilter
-              data={data}
-              loaded={statesLoaded}
-              rowFilters={filters.filter((filter) => filter?.type !== FILTER_TYPES.IP_ADDRESS)}
-              hideLabelFilter
-              nameFilterTitle={t('IP address')}
-              nameFilterPlaceholder={t('Search by IP address...')}
-              nameFilter={FILTER_TYPES.IP_ADDRESS}
-              onFilterChange={(...args) => {
-                onFilterChange(...args);
-                onPaginationChange({
-                  endIndex: pagination?.perPage,
-                  page: 1,
-                  perPage: pagination?.perPage,
-                  startIndex: 0,
-                });
-              }}
-              columnLayout={{
-                columns: columns?.map(({ id, title, additional }) => ({
-                  id,
-                  title,
-                  additional,
-                })),
-                id: NodeNetworkStateModelRef,
-                selectedColumns: new Set(activeColumns?.map((col) => col?.id)),
-                type: t('NodeNetworkState'),
-              }}
-            />
+            <Flex>
+              <ListPageFilter
+                data={data}
+                loaded={statesLoaded}
+                rowFilters={filters.filter((filter) => filter?.type !== FILTER_TYPES.IP_ADDRESS)}
+                hideLabelFilter
+                nameFilterTitle={t('IP address')}
+                nameFilterPlaceholder={t('Search by IP address...')}
+                nameFilter={FILTER_TYPES.IP_ADDRESS}
+                onFilterChange={(...args) => {
+                  onFilterChange(...args);
+                  onPaginationChange({
+                    endIndex: pagination?.perPage,
+                    page: 1,
+                    perPage: pagination?.perPage,
+                    startIndex: 0,
+                  });
+                }}
+                columnLayout={{
+                  columns: columns?.map(({ id, title, additional }) => ({
+                    id,
+                    title,
+                    additional,
+                  })),
+                  id: NodeNetworkStateModelRef,
+                  selectedColumns: new Set(activeColumns?.map((col) => col?.id)),
+                  type: t('NodeNetworkState'),
+                }}
+              />
+              <Button onClick={() => setExpandAll(!expandAll)}>
+                {expandAll ? t('Collapse all') : t('Expand all')}
+              </Button>
+            </Flex>
             <Pagination
               onPerPageSelect={(_e, perPage, page, startIndex, endIndex) =>
                 onPaginationChange({ endIndex, page, perPage, startIndex })
@@ -115,7 +122,7 @@ const StatesList: FC = () => {
                   key={nnstate?.metadata?.name}
                   obj={nnstate}
                   activeColumnIDs={new Set(activeColumns.map(({ id }) => id))}
-                  rowData={{ rowIndex: index, selectedFilters }}
+                  rowData={{ rowIndex: index, selectedFilters, expandAll }}
                 />
               ))}
             </Table>

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

@@ -12,9 +12,14 @@ import './interfaces-table.scss';
 interface InterfacesTableProps {
   interfacesByType: { [interfaceType in string]: NodeNetworkConfigurationInterface[] };
   nodeNetworkState: V1beta1NodeNetworkState;
+  expandAll: boolean;
 }
 
-const InterfacesTable: FC<InterfacesTableProps> = ({ interfacesByType, nodeNetworkState }) => {
+const InterfacesTable: FC<InterfacesTableProps> = ({
+  interfacesByType,
+  nodeNetworkState,
+  expandAll,
+}) => {
   const columns = useInterfaceColumns();
 
   return (
@@ -34,6 +39,7 @@ const InterfacesTable: FC<InterfacesTableProps> = ({ interfacesByType, nodeNetwo
               interfaceType={interfaceType}
               interfaces={interfacesByType[interfaceType]}
               nodeNetworkState={nodeNetworkState}
+              expandAll={expandAll}
             />
           ))}
       </Tbody>

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

@@ -22,21 +22,23 @@ interface InterfacesTypeSectionProps {
   interfaces: NodeNetworkConfigurationInterface[];
   interfaceType: string;
   nodeNetworkState: V1beta1NodeNetworkState;
+  expandAll: boolean;
 }
 
 const InterfacesTypeSection: FC<InterfacesTypeSectionProps> = memo(
-  ({ interfaceType, interfaces, nodeNetworkState }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
+  ({ interfaceType, interfaces, nodeNetworkState, expandAll }) => {
+    const [expand, setExpand] = useState(false);
 
     const { setSelectedInterfaceName } = useDrawerInterface();
 
+    const isExpanded = expandAll || expand;
     return (
       <>
         <Tr className="interfaces-table__interface-type-row">
           <Td colSpan={6}>
             <ExpandableSectionToggle
               isExpanded={isExpanded}
-              onToggle={setIsExpanded}
+              onToggle={setExpand}
               className="expandable-section-interface-type"
               data-test={`${interfaceType}-expandable-section-toggle`}
             >

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

@@ -16,9 +16,12 @@ import { filterInterfaces, getInterfacesByType } from './utils';
 import './state-row.scss';
 
 const StateRow: FC<
-  RowProps<V1beta1NodeNetworkState, { rowIndex: number; selectedFilters: SelectedFilters }>
-> = ({ obj, activeColumnIDs, rowData: { rowIndex, selectedFilters } }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  RowProps<
+    V1beta1NodeNetworkState,
+    { rowIndex: number; selectedFilters: SelectedFilters; expandAll: boolean }
+  >
+> = ({ obj, activeColumnIDs, rowData: { rowIndex, selectedFilters, expandAll } }) => {
+  const [expand, setExpand] = useState(false);
   const { t } = useNMStateTranslation();
   const interfaces = obj?.status?.currentState?.interfaces as NodeNetworkConfigurationInterface[];
 
@@ -32,14 +35,16 @@ const StateRow: FC<
     [filteredInterfaces],
   );
 
+  const isExpanded = expandAll || expand;
+
   return (
     <Tbody key={obj.metadata.name} isExpanded={isExpanded} role="rowgroup" className="state-row">
       <Tr>
         <Td
           expand={{
             rowIndex,
             isExpanded,
-            onToggle: (event, rowIndex, isOpen) => setIsExpanded(isOpen),
+            onToggle: (event, rowIndex, isOpen) => setExpand(isOpen),
             expandId: 'expand-interfaces-list',
           }}
         />
@@ -93,7 +98,11 @@ const StateRow: FC<
               </small>
             </Title>
 
-            <InterfacesTable interfacesByType={interfacesByType} nodeNetworkState={obj} />
+            <InterfacesTable
+              interfacesByType={interfacesByType}
+              nodeNetworkState={obj}
+              expandAll={expandAll}
+            />
           </ExpandableRowContent>
         </Td>
       </Tr>