Sort by name NNS

scripts/start-console.sh

@@ -4,7 +4,7 @@ set -euo pipefail
 
 npm_package_consolePlugin_name="nmstate-console-plugin"
 
-CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:latest"}
+CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:4.14"}
 CONSOLE_PORT=${CONSOLE_PORT:=9000}
 
 echo "Starting local OpenShift console..."

src/views/states/list/StatesList.tsx

@@ -14,7 +14,7 @@ import {
   useListPageFilter,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { Pagination } from '@patternfly/react-core';
-import { Table, TableGridBreakpoint, TableHeader } from '@patternfly/react-table';
+import { TableComposable, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-table';
 import { V1beta1NodeNetworkState } from '@types';
 import usePagination from '@utils/hooks/usePagination/usePagination';
 import { paginationDefaultValues } from '@utils/hooks/usePagination/utils/constants';
@@ -25,10 +25,13 @@ import StateRow from './components/StateRow';
 import StatusBox from './components/StatusBox';
 import useDrawerInterface from './hooks/useDrawerInterface';
 import useSelectedFilters from './hooks/useSelectedFilters';
-import useStateColumns from './hooks/useStateColumns';
+import useSortStates from './hooks/useSortStates';
+import useStateColumns, { COLUMN_NAME_ID } from './hooks/useStateColumns';
 import useStateFilters from './hooks/useStateFilters';
 import { FILTER_TYPES } from './constants';
 
+import './states-list.scss';
+
 const StatesList: FC = () => {
   const { t } = useNMStateTranslation();
   const { selectedInterfaceName, selectedStateName, selectedInterfaceType } = useDrawerInterface();
@@ -50,14 +53,16 @@ const StatesList: FC = () => {
   const selectedFilters = useSelectedFilters();
   const [data, filteredData, onFilterChange] = useListPageFilter(states, filters);
 
-  const paginatedData = filteredData.slice(pagination?.startIndex, pagination?.endIndex + 1);
+  const { sortedStates, nameSortParams } = useSortStates(filteredData);
+
+  const paginatedData = sortedStates.slice(pagination?.startIndex, pagination?.endIndex + 1);
 
   return (
     <>
       <ListPageHeader title={t(NodeNetworkStateModel.label)}></ListPageHeader>
       <ListPageBody>
         <StatusBox loaded={statesLoaded} error={statesError}>
-          <div className="list-managment-group">
+          <div className="nns-list-management-group">
             <ListPageFilter
               data={data}
               loaded={statesLoaded}
@@ -95,21 +100,30 @@ const StatesList: FC = () => {
               }
               className="list-managment-group__pagination"
               defaultToFullPage
-              itemCount={filteredData?.length}
+              itemCount={sortedStates?.length}
               page={pagination?.page}
               perPage={pagination?.perPage}
               perPageOptions={paginationDefaultValues}
             />
           </div>
 
-          {filteredData.length > 0 ? (
-            <Table
-              cells={activeColumns}
-              rows={paginatedData}
-              gridBreakPoint={TableGridBreakpoint.none}
-              role="presentation"
-            >
-              <TableHeader />
+          {sortedStates?.length ? (
+            <TableComposable gridBreakPoint={TableGridBreakpoint.none} role="presentation">
+              <Thead>
+                <Tr>
+                  {activeColumns.map((column) => (
+                    <Th
+                      {...column.props}
+                      id={column.id}
+                      sort={column.id === COLUMN_NAME_ID ? nameSortParams : null}
+                      key={column.id}
+                    >
+                      {column.title}
+                    </Th>
+                  ))}
+                </Tr>
+              </Thead>
+
               {paginatedData.map((nnstate, index) => (
                 <StateRow
                   key={nnstate?.metadata?.name}
@@ -118,7 +132,7 @@ const StatesList: FC = () => {
                   rowData={{ rowIndex: index, selectedFilters }}
                 />
               ))}
-            </Table>
+            </TableComposable>
           ) : (
             <NNStateEmptyState />
           )}

src/views/states/list/hooks/useSortStates.ts

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { ThSortType } from '@patternfly/react-table/dist/esm/components/Table/base';
+import { V1beta1NodeNetworkState } from '@types';
+
+const useSortStates = (
+  nodeNetworkStates: V1beta1NodeNetworkState[],
+): { sortedStates: V1beta1NodeNetworkState[]; nameSortParams: ThSortType } => {
+  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);
+
+  let sortedStates = nodeNetworkStates;
+  if (activeSortIndex === 1) {
+    sortedStates = nodeNetworkStates.sort((a, b) => {
+      const aValue = a.metadata.name as string;
+      const bValue = b.metadata.name as string;
+
+      if (activeSortDirection === 'asc') {
+        return (aValue as string).localeCompare(bValue);
+      }
+      return (bValue as string).localeCompare(aValue);
+    });
+  }
+
+  const nameSortParams: ThSortType = {
+    sortBy: {
+      index: activeSortIndex,
+      direction: activeSortDirection,
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction);
+    },
+    columnIndex: 1,
+  };
+
+  return { sortedStates, nameSortParams };
+};
+
+export default useSortStates;

src/views/states/list/hooks/useStateColumns.ts

@@ -7,6 +7,8 @@ import {
   useActiveColumns,
 } from '@openshift-console/dynamic-plugin-sdk';
 
+export const COLUMN_NAME_ID = 'name';
+
 const useStateColumns = (): [
   TableColumn<K8sResourceCommon>[],
   TableColumn<K8sResourceCommon>[],
@@ -21,7 +23,7 @@ const useStateColumns = (): [
     },
     {
       title: t('Name'),
-      id: 'name',
+      id: COLUMN_NAME_ID,
     },
     {
       title: t('Network interface'),

src/views/states/list/states-list.scss

@@ -0,0 +1,7 @@
+.nns-list-management-group {
+  display: flex;
+  justify-content: space-between;
+  &__pagination {
+    flex-grow: 1;
+  }
+}