Refs #38107 - Make booted container images rows expandable (in progress)

Katello · Dec 20, 2024 · d861aea · d861aea
1 parent 2c3ae1a
commit d861aea
Showing 1 changed file with 136 additions and 34 deletions.
diff --git a/webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js b/webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js
@@ -1,13 +1,22 @@
 import React from 'react';
+import { TableComposable, Thead, Th, Tbody, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
-import { Table } from 'foremanReact/components/PF4/TableIndexPage/Table/Table';
 import {
   useSetParamsAndApiAndSearch,
   useTableIndexAPIResponse,
 } from 'foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks';
 import {
   useUrlParams,
+  useSet,
 } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import {
+  getColumnHelpers,
+} from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
+import {
+  useTableSort,
+} from 'foremanReact/components/PF4/Helpers/useTableSort';
+import Pagination from 'foremanReact/components/Pagination';
+import EmptyPage from 'foremanReact/routes/common/EmptyPage';
 import { translate as __ } from 'foremanReact/common/I18n';
 import BOOTED_CONTAINER_IMAGES_KEY, { BOOTED_CONTAINER_IMAGES_API_PATH } from './BootedContainerImagesConstants';
 
@@ -29,12 +38,6 @@ const BootedContainerImagesPage = () => {
     },
   };
 
-  const STATUS = {
-    PENDING: 'PENDING',
-    RESOLVED: 'RESOLVED',
-    ERROR: 'ERROR',
-  };
-
   const {
     searchParam: urlSearchQuery = '',
     page: urlPage,
@@ -44,15 +47,34 @@ const BootedContainerImagesPage = () => {
   if (urlPage) defaultParams.page = Number(urlPage);
   if (urlPerPage) defaultParams.per_page = Number(urlPerPage);
   const apiOptions = { key: BOOTED_CONTAINER_IMAGES_KEY };
+
   const response = useTableIndexAPIResponse({
     apiUrl: BOOTED_CONTAINER_IMAGES_API_PATH,
     apiOptions,
     defaultParams,
   });
+  const columnsToSortParams = {};
+  Object.keys(columns).forEach(key => {
+    if (columns[key].isSorted) {
+      columnsToSortParams[columns[key].title] = key;
+    }
+  });
+  const { pfSortParams } = useTableSort({
+    allColumns: Object.keys(columns).map(k => columns[k].title),
+    columnsToSortParams,
+    onSort,
+  });
+  const expandedImages = useSet([]);
+  const imageIsExpanded = image_name => expandedImages.has(image_name);
+  const STATUS = {
+    PENDING: 'PENDING',
+    RESOLVED: 'RESOLVED',
+    ERROR: 'ERROR',
+  };
 
   const {
     response: {
-      results,
+      results = [],
       per_page: perPage,
       page,
       subtotal,
@@ -68,40 +90,120 @@ const BootedContainerImagesPage = () => {
     setAPIOptions: response.setAPIOptions,
   });
 
+  const [columnNamesKeys, keysToColumnNames] = getColumnHelpers(columns);
+  const onSort = (_event, index, direction) => {
+    setParamsAndAPI({
+      ...params,
+      order: `${Object.keys(columns)[index]} ${direction}`,
+    });
+  };
+  const onPagination = newPagination => {
+    setParamsAndAPI({ ...params, ...newPagination });
+  };
+  const bottomPagination = (
+    <Pagination
+      key="table-bottom-pagination"
+      page={params.page}
+      perPage={params.perPage}
+      itemCount={subtotal}
+      onChange={onPagination}
+      updateParamsByUrl={true}
+    />
+  );
+
   return (
     <TableIndexPage
       apiUrl={BOOTED_CONTAINER_IMAGES_API_PATH}
-      apiOptions={{ key: BOOTED_CONTAINER_IMAGES_KEY }}
+      apiOptions={apiOptions}
       header={__('Booted container images')}
       createable={false}
       isDeleteable={false}
       controller="/katello/api/v2/host_bootc_images"
     >
-      <Table
-        ouiaId="booted-container-images-table"
-        isEmbedded={false}
-        params={{
-          ...params,
-          page,
-          perPage,
-        }}
-        setParams={setParamsAndAPI}
-        itemCount={subtotal}
-        results={results}
-        url={BOOTED_CONTAINER_IMAGES_API_PATH}
-        isDeleteable={false}
-        refreshData={() =>
-          setAPIOptions({
-            ...apiOptions,
-            params: { urlSearchQuery },
-          })
-        }
-        columns={columns}
-        errorMessage={
-          status === STATUS.ERROR && errorMessage ? errorMessage : null
-        }
-        isPending={status === STATUS.PENDING}
-      />
+      <>
+        <TableComposable variant="compact" ouiaId="booted-containers-table" isStriped>
+          <Thead>
+            <Tr ouiaId="table-header">
+              {columnNamesKeys.map(k => (
+                <Th
+                  key={k}
+                  sort={
+                    Object.values(columnsToSortParams).includes(k) &&
+                    pfSortParams(keysToColumnNames[k])
+                  }
+                >
+                  {keysToColumnNames[k]}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {status === STATUS.PENDING && results.length === 0 && (
+              <Tr ouiaId="table-loading">
+                <Td colSpan={100}>
+                  <EmptyPage
+                    message={{
+                      type: 'loading',
+                      text: __('Loading...'),
+                    }}
+                  />
+                </Td>
+              </Tr>
+            )}
+            {!status === STATUS.PENDING &&
+              results.length === 0 &&
+              !errorMessage && (
+                <Tr ouiaId="table-empty">
+                  <Td colSpan={100}>
+                    <EmptyPage
+                      message={{
+                        type: 'empty',
+                      }}
+                    />
+                  </Td>
+                </Tr>
+              )}
+            {errorMessage && (
+              <Tr ouiaId="table-error">
+                <Td colSpan={100}>
+                  <EmptyPage message={{ type: 'error', text: errorMessage }} />
+                </Td>
+              </Tr>
+            )}
+          </Tbody>
+          {results?.map((result, rowIndex) => {
+            const { image_name, digests } = result;
+            const isExpanded = imageIsExpanded(image_name);
+            return (
+              <Tbody key={`bootable-container-images-body-${rowIndex}`} isExpanded={isExpanded}>
+                <Tr key={image_name} ouiaId={`table-row-${rowIndex}`}>
+                  {columnNamesKeys.map(k => (
+                    <Td
+                      key={k}
+                      dataLabel={keysToColumnNames[k]}
+                      expand={{
+                        rowIndex,
+                        isExpanded,
+                        onToggle: (_event, _rInx, isOpen) => expandedImages.onToggle(isOpen, image_name),
+                      }}
+                    >
+                      {columns[k].wrapper ? columns[k].wrapper(result) : result[k]}
+                    </Td>
+                  ))}
+                </Tr>
+                {digests ? <Tr isExpanded={isExpanded}>
+                  <Td>
+                    <ExpandableRowContent>
+                      {digests[0].bootc_booted_digest}
+                    </ExpandableRowContent>
+                  </Td>
+                </Tr> : null}
+              </Tbody>
+            );
+          })}
+        </TableComposable>
+        {results.length > 0 && !errorMessage && bottomPagination}
+      </>
     </TableIndexPage>
   );
 };