foreman_leapp 3.4.0 → 4.1.0

data/webpack/components/PreupgradeReportsTable/index.js

@@ -1,11 +1,11 @@
 /* eslint-disable max-lines */
 import PropTypes from 'prop-types';
 import React, {
-  useCallback,
-  useEffect,
+  useState,
   useMemo,
+  useCallback,
   useRef,
-  useState,
+  useEffect,
 } from 'react';
 import { useDispatch } from 'react-redux';
 import {
@@ -25,17 +25,14 @@ import SelectAllCheckbox from 'foremanReact/components/PF4/TableIndexPage/Table/
 import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import { RowSelectTd } from 'foremanReact/components/PF4/TableIndexPage/RowSelectTd';
 import { getColumnHelpers } from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
+import { getControllerSearchProps, STATUS } from 'foremanReact/constants';
+import SearchBar from 'foremanReact/components/SearchBar';
 import { APIActions } from 'foremanReact/redux/API';
-import { STATUS } from 'foremanReact/constants';
-import {
-  entriesPage,
-  entryFixable,
-} from '../PreupgradeReports/PreupgradeReportsHelpers';
+import { usePreupgradeTableState } from './PreupgradeReportsTableHelpers';
+import { entryFixable } from '../PreupgradeReports/PreupgradeReportsHelpers';
 import ReportDetails, { renderSeverityLabel } from './ReportDetails';
 import './PreupgradeReportsTable.scss';
 
-const LEAPP_TEMPLATE_NAME = 'Run preupgrade via Leapp';
-
 const isRowFixable = entryFixable;
 
 const submitJobInvocation = (
@@ -43,8 +40,12 @@ const submitJobInvocation = (
   setError,
   feature,
   hostIds,
-  remediationIds
+  remediationIds,
+  setIsSubmitting
 ) => {
+  setError(null);
+  setIsSubmitting(true);
+
   const payload = {
     job_invocation: {
       feature,
@@ -64,168 +65,131 @@ const submitJobInvocation = (
         const result = response.data || response;
         if (result?.id) {
           window.location.assign(foremanUrl(`/job_invocations/${result.id}`));
+        } else {
+          setIsSubmitting(false);
         }
       },
-      handleError: err => setError(err),
+      handleError: err => {
+        setError(err);
+        setIsSubmitting(false);
+      },
     })
   );
 };
 
 const PreupgradeReportsTable = ({ data = {} }) => {
-  const [error, setError] = useState(null);
   const [isReportExpanded, setIsReportExpanded] = useState(false);
-  const [pagination, setPagination] = useState({ page: 1, perPage: 5 });
-  const [reportData, setReportData] = useState(null);
-  const [status, setStatus] = useState(STATUS.RESOLVED);
-  const [expandedRowIds, setExpandedRowIds] = useState(new Set());
-
+  const [submitError, setSubmitError] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [fixableCount, setFixableCount] = useState(null);
   const dispatch = useDispatch();
-  // eslint-disable-next-line camelcase
-  const isLeappJob = data?.template_name?.includes(LEAPP_TEMPLATE_NAME);
+  const hasLoadedDataRef = useRef(false);
 
-  // eslint-disable-next-line camelcase
-  const jobStatusLabel = data?.status_label;
+  const {
+    isLeappJob,
+    status,
+    error,
+    reportId,
+    rows,
+    totalCount,
+    pagination,
+    sortBy,
+    searchValue,
+    setSearchValue,
+    setPagination,
+    setSortBy,
+    expandedRowIds,
+    toggleRowExpansion,
+    areAllRowsExpanded,
+    onExpandAll,
+  } = usePreupgradeTableState(data, isReportExpanded);
+
+  useEffect(() => {
+    if (totalCount > 0 && !hasLoadedDataRef.current) {
+      hasLoadedDataRef.current = true;
+    }
+  }, [totalCount]);
+  const hasData = totalCount > 0 || hasLoadedDataRef.current;
 
-  const lastFetchedKeyRef = useRef(null);
+  useEffect(() => {
+    setFixableCount(null);
+  }, [searchValue, reportId]);
+
+  const searchProps = useMemo(() => {
+    if (!reportId) return null;
+    const baseProps = getControllerSearchProps('preupgrade_report_entries');
+    return {
+      ...baseProps,
+      autocomplete: {
+        ...baseProps.autocomplete,
+        url: foremanUrl(
+          `/api/v2/preupgrade_reports/${reportId}/preupgrade_report_entries/auto_complete_search`
+        ),
+      },
+    };
+  }, [reportId]);
 
   const columns = useMemo(
     () => ({
-      title: { title: __('Title') },
-      host: {
+      title: {
+        title: __('Title'),
+        isSorted: true,
+        width: 30,
+      },
+      hostname: {
         title: __('Host'),
-        wrapper: entry => entry.hostname || reportData?.hostname || '-',
+        wrapper: e => e.hostname || '-',
+        isSorted: true,
+        width: 20,
       },
       risk_factor: {
         title: __('Risk Factor'),
         wrapper: ({ severity }) => renderSeverityLabel(severity),
+        isSorted: true,
+        width: 15,
       },
       has_remediation: {
         title: __('Has Remediation?'),
-        wrapper: entry => (entry.detail?.remediations ? __('Yes') : __('No')),
+        wrapper: e => (e.detail?.remediations ? __('Yes') : __('No')),
+        isSorted: true,
+        width: 20,
       },
       inhibitor: {
         title: __('Inhibitor?'),
-        wrapper: entry =>
-          entry.flags?.some(flag => flag === 'inhibitor') ? (
+        wrapper: e =>
+          e.flags?.includes('inhibitor') ? (
             <Tooltip content={__('This issue inhibits the upgrade.')}>
               <span>{__('Yes')}</span>
             </Tooltip>
           ) : (
             __('No')
           ),
+        isSorted: true,
+        width: 15,
       },
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [reportData?.hostname]
+    []
   );
 
-  useEffect(() => {
-    let isMounted = true;
-    const fetchKey = `${data.id}:${jobStatusLabel}`;
-
-    if (
-      !isLeappJob ||
-      !isReportExpanded ||
-      lastFetchedKeyRef.current === fetchKey
-    )
-      return undefined;
-
-    const fail = err => {
-      if (!isMounted) return;
-      setError(err);
-      setStatus(STATUS.ERROR);
-    };
-
-    const succeed = response => {
-      if (!isMounted) return;
-      lastFetchedKeyRef.current = fetchKey;
-      setReportData(response?.data || response || null);
-      setStatus(STATUS.RESOLVED);
-    };
-
-    setStatus(STATUS.PENDING);
-    dispatch(
-      APIActions.get({
-        key: `GET_LEAPP_REPORT_LIST_${data.id}`,
-        url: `/api/job_invocations/${data.id}/preupgrade_reports`,
-        handleSuccess: listResponse => {
-          if (!isMounted) return;
-          const summary = (listResponse.data || listResponse).results?.[0];
-          if (summary?.id) {
-            dispatch(
-              APIActions.get({
-                key: `GET_LEAPP_REPORT_DETAIL_${summary.id}`,
-                url: `/api/preupgrade_reports/${summary.id}`,
-                handleSuccess: detailResponse => succeed(detailResponse),
-                handleError: err => fail(err),
-              })
-            );
-            return;
-          }
-          succeed(null);
-        },
-        handleError: err => fail(err),
-      })
-    );
-
-    return () => {
-      isMounted = false;
-    };
-  }, [isReportExpanded, data.id, isLeappJob, dispatch, jobStatusLabel]);
-
-  // eslint-disable-next-line camelcase
-  const entries = useMemo(() => reportData?.preupgrade_report_entries || [], [
-    reportData,
-  ]);
-
-  const pagedEntries = useMemo(
-    () => entriesPage(entries, pagination),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [entries, pagination.page, pagination.perPage]
-  );
-
-  const getHostId = useCallback(
-    entry =>
-      entry.host_id ||
-      entry.hostId ||
-      // eslint-disable-next-line camelcase
-      reportData?.host_id ||
-      reportData?.host?.id ||
-      // eslint-disable-next-line camelcase
-      data?.targeting?.host_id,
-    [reportData, data]
-  );
+  const pagedFixableEntries = useMemo(() => rows.filter(isRowFixable), [rows]);
 
-  const handleParamsChange = useCallback(newParams => {
-    setPagination(prev => ({
-      ...prev,
-      page: newParams.page || prev.page,
-      perPage: newParams.per_page || prev.perPage,
-    }));
-    setExpandedRowIds(new Set());
-  }, []);
-
-  const toggleRowExpansion = useCallback((id, isExpanding) => {
-    setExpandedRowIds(prev => {
-      const next = new Set(prev);
-      if (isExpanding) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  }, []);
-
-  const { inclusionSet, exclusionSet, ...selectAllOptions } = useBulkSelect({
-    results: pagedEntries,
+  const {
+    inclusionSet,
+    exclusionSet,
+    selectedCount,
+    ...selectAllOptions
+  } = useBulkSelect({
+    results: pagedFixableEntries,
     metadata: {
-      total: entries.length,
+      total: totalCount,
       page: pagination.page,
-      selectable: entries.length,
+      selectable: fixableCount,
     },
-    initialSearchQuery: '',
+    initialSearchQuery: searchValue,
   });
 
   const {
-    selectAll,
+    selectAll: originalSelectAll,
     selectPage,
     selectNone,
     selectOne,
@@ -233,141 +197,266 @@ const PreupgradeReportsTable = ({ data = {} }) => {
     isSelected,
   } = selectAllOptions;
 
-  const rawSelectedIds =
-    areAllRowsSelected() || exclusionSet.size > 0
-      ? entries.map(e => e.id).filter(id => !exclusionSet.has(id))
-      : Array.from(inclusionSet);
-
-  const validFixableIds = useMemo(
-    () => entries.filter(isRowFixable).map(e => e.id),
-    [entries]
-  );
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const selectedIds = useMemo(
-    () => rawSelectedIds.filter(id => validFixableIds.includes(id)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [rawSelectedIds.join(','), validFixableIds]
+  const selectAll = useCallback(
+    (...args) => {
+      // Get count of all fixable entries before selecting
+      if (fixableCount === null) {
+        dispatch(
+          APIActions.get({
+            key: `GET_FIXABLE_COUNT_${reportId}`,
+            url: `/api/v2/preupgrade_reports/${reportId}/preupgrade_report_entries`,
+            params: {
+              search: [searchValue, 'fix_type = command']
+                .filter(Boolean)
+                .join(' AND '),
+              per_page: 0,
+            },
+            handleSuccess: res => {
+              const payload = res.data || res;
+              const count = payload.subtotal ?? 0;
+              setFixableCount(count);
+              originalSelectAll(...args);
+            },
+            handleError: () => {
+              setFixableCount(0);
+            },
+          })
+        );
+      } else {
+        originalSelectAll(...args);
+      }
+    },
+    [dispatch, reportId, searchValue, fixableCount, originalSelectAll]
   );
 
-  const pagedFixableEntries = useMemo(() => pagedEntries.filter(isRowFixable), [
-    pagedEntries,
-  ]);
+  const selectedIds = Array.from(inclusionSet);
 
   const areAllPageFixableSelected =
     pagedFixableEntries.length > 0 &&
-    pagedFixableEntries.every(e => selectedIds.includes(e.id));
-
-  const areAllFixableSelected =
-    validFixableIds.length > 0 &&
-    validFixableIds.every(id => selectedIds.includes(id));
-
-  const areAllRowsExpanded =
-    pagedEntries.length > 0 &&
-    pagedEntries.every(entry => expandedRowIds.has(entry.id));
+    pagedFixableEntries.every(e => inclusionSet.has(e.id));
 
-  const onExpandAll = useCallback(() => {
-    setExpandedRowIds(
-      areAllRowsExpanded ? new Set() : new Set(pagedEntries.map(e => e.id))
-    );
-  }, [areAllRowsExpanded, pagedEntries]);
+  // eslint-disable-next-line camelcase
+  const globalHostId = data?.targeting?.host_id;
 
-  const [columnKeys, keysToColumnNames] = useMemo(
-    () => getColumnHelpers(columns),
-    [columns]
+  const getHostId = useCallback(
+    // eslint-disable-next-line camelcase
+    entry => entry.host_id || entry.hostId || globalHostId,
+    [globalHostId]
   );
 
   const hostIdsForSelected = useMemo(
     () =>
       Array.from(
         new Set(
-          entries
+          rows
             .filter(e => selectedIds.includes(e.id))
             .map(getHostId)
             .filter(Boolean)
         )
       ),
-    [entries, selectedIds, getHostId]
+    [rows, selectedIds, getHostId]
   );
 
   const allHostIds = useMemo(
-    () => Array.from(new Set(entries.map(getHostId).filter(Boolean))),
-    [entries, getHostId]
+    () => Array.from(new Set(rows.map(getHostId).filter(Boolean))),
+    [rows, getHostId]
+  );
+
+  const handleParamsChange = useCallback(
+    newParams => {
+      let sortChanged = false;
+      if (newParams.order !== undefined) {
+        const parts = newParams.order.split(' ');
+        const newIndex = parts[0] || '';
+        const newDirection = (parts[1] || 'ASC').toLowerCase();
+        sortChanged =
+          newIndex !== sortBy.index || newDirection !== sortBy.direction;
+        if (sortChanged)
+          setSortBy({ index: newIndex, direction: newDirection });
+      }
+
+      let newPage = pagination.page;
+      if (sortChanged) {
+        newPage = 1;
+      } else if (newParams.page !== undefined) {
+        newPage = Number(newParams.page);
+      }
+
+      // eslint-disable-next-line camelcase
+      const newPerPage =
+        newParams.per_page !== undefined
+          ? Number(newParams.per_page)
+          : pagination.perPage;
+
+      setPagination({ page: newPage, perPage: newPerPage });
+    },
+    [sortBy, pagination, setSortBy, setPagination]
+  );
+
+  const commitSearch = val => {
+    setSubmitError(null);
+    setSearchValue(val);
+    setPagination(prev => ({ ...prev, page: 1 }));
+  };
+
+  const handleFixSelected = () => {
+    if (areAllRowsSelected() || exclusionSet.size > 0) {
+      setSubmitError(null);
+      setIsSubmitting(true);
+
+      dispatch(
+        APIActions.post({
+          key: `BULK_REMEDIATE_${reportId}`,
+          url: foremanUrl(
+            `/api/v2/preupgrade_reports/${reportId}/preupgrade_report_entries/bulk_remediate`
+          ),
+          params: {
+            search: searchValue,
+            excluded_ids: Array.from(exclusionSet),
+          },
+          handleSuccess: response => {
+            const result = response.data || response;
+            if (result?.id) {
+              window.location.assign(
+                foremanUrl(`/job_invocations/${result.id}`)
+              );
+            } else {
+              setIsSubmitting(false);
+            }
+          },
+          handleError: err => {
+            setSubmitError(err);
+            setIsSubmitting(false);
+          },
+        })
+      );
+    } else {
+      if (selectedIds.length === 0) return;
+
+      const hostIds =
+        hostIdsForSelected.length > 0
+          ? hostIdsForSelected
+          : [globalHostId].filter(Boolean);
+
+      submitJobInvocation(
+        dispatch,
+        setSubmitError,
+        'leapp_remediation_plan',
+        hostIds,
+        selectedIds.join(','),
+        setIsSubmitting
+      );
+    }
+  };
+
+  const handleRunUpgrade = () => {
+    const targetHostIds = globalHostId ? [globalHostId] : allHostIds;
+    submitJobInvocation(
+      dispatch,
+      setSubmitError,
+      'leapp_upgrade',
+      targetHostIds,
+      null,
+      setIsSubmitting
+    );
+  };
+
+  const [columnKeys, keysToColumnNames] = useMemo(
+    () => getColumnHelpers(columns),
+    [columns]
   );
 
   if (!isLeappJob) return null;
 
+  const hasAnySelection =
+    areAllRowsSelected() || exclusionSet.size > 0 || selectedIds.length > 0;
+
   const isFixSelectedDisabled =
-    validFixableIds.length === 0 ||
-    selectedIds.length === 0 ||
-    hostIdsForSelected.length === 0;
+    status === STATUS.PENDING ||
+    isSubmitting ||
+    !hasAnySelection ||
+    // When using select-all, check if any fixable entries exist on current page
+    (areAllRowsSelected() && pagedFixableEntries.length === 0);
+
+  const isRunUpgradeDisabled =
+    status === STATUS.PENDING ||
+    isSubmitting ||
+    (!globalHostId && allHostIds.length === 0);
+
+  const combinedErrorMessage =
+    (status === STATUS.ERROR && error?.message ? error.message : null) ||
+    submitError?.message ||
+    submitError?.error;
 
   return (
     <ExpandableSection
+      className="leapp-report-section"
       isExpanded={isReportExpanded}
-      onToggle={(_event, val) => setIsReportExpanded(val)}
+      onToggle={(_e, val) => setIsReportExpanded(val)}
       toggleText={__('Leapp preupgrade report')}
     >
-      {entries.length > 0 && status === STATUS.RESOLVED && (
-        <Toolbar ouiaId="leapp-report-toolbar">
-          <ToolbarContent>
-            <ToolbarGroup variant="filter-group">
-              <ToolbarItem>
+      <Toolbar ouiaId="leapp-report-toolbar">
+        <ToolbarContent>
+          <ToolbarGroup
+            variant="filter-group"
+            className="leapp-toolbar-filter-group"
+          >
+            {hasData && (
+              <ToolbarItem spacer={{ default: 'spacerNone' }}>
                 <SelectAllCheckbox
                   selectAll={selectAll}
                   selectPage={selectPage}
                   selectNone={selectNone}
-                  selectedCount={selectedIds.length}
+                  selectedCount={selectedCount}
                   pageRowCount={pagedFixableEntries.length}
-                  totalCount={validFixableIds.length}
+                  totalCount={fixableCount}
                   areAllRowsOnPageSelected={areAllPageFixableSelected}
-                  areAllRowsSelected={areAllFixableSelected}
+                  areAllRowsSelected={areAllRowsSelected()}
                 />
               </ToolbarItem>
-            </ToolbarGroup>
-            <ToolbarGroup
-              align={{ default: 'alignRight' }}
-              variant="button-group"
-            >
-              <ToolbarItem>
-                <Button
-                  variant="secondary"
-                  isDisabled={isFixSelectedDisabled}
-                  onClick={() =>
-                    submitJobInvocation(
-                      dispatch,
-                      setError,
-                      'leapp_remediation_plan',
-                      hostIdsForSelected,
-                      selectedIds.join(',')
-                    )
-                  }
-                  ouiaId="fix-selected-button"
-                >
-                  {__('Fix Selected')}
-                </Button>
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button
-                  variant="primary"
-                  isDisabled={allHostIds.length === 0}
-                  onClick={() =>
-                    submitJobInvocation(
-                      dispatch,
-                      setError,
-                      'leapp_upgrade',
-                      allHostIds
-                    )
-                  }
-                  ouiaId="run-upgrade-button"
-                >
-                  {__('Run Upgrade')}
-                </Button>
+            )}
+
+            {reportId && searchProps && (
+              <ToolbarItem className="leapp-searchbar-item">
+                <SearchBar
+                  data={searchProps}
+                  searchQuery={searchValue}
+                  onSearch={commitSearch}
+                  bookmarks={searchProps.bookmarks}
+                />
               </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarContent>
-        </Toolbar>
-      )}
+            )}
+          </ToolbarGroup>
+
+          <ToolbarGroup
+            align={{ default: 'alignRight' }}
+            variant="button-group"
+          >
+            <ToolbarItem>
+              <Button
+                variant="secondary"
+                isDisabled={isFixSelectedDisabled}
+                onClick={handleFixSelected}
+                ouiaId="fix-selected-button"
+                isLoading={isSubmitting}
+              >
+                {__('Fix Selected')}
+              </Button>
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button
+                variant="primary"
+                isDisabled={isRunUpgradeDisabled}
+                onClick={handleRunUpgrade}
+                ouiaId="run-upgrade-button"
+                isLoading={isSubmitting}
+              >
+                {__('Run Upgrade')}
+              </Button>
+            </ToolbarItem>
+          </ToolbarGroup>
+        </ToolbarContent>
+      </Toolbar>
 
       <Table
         ouiaId="leapp-report-table"
@@ -375,31 +464,38 @@ const PreupgradeReportsTable = ({ data = {} }) => {
         isEmbedded
         params={{
           page: pagination.page,
-          perPage: pagination.perPage,
-          order: '',
+          per_page: pagination.perPage,
+          search: searchValue,
+          order: sortBy.index
+            ? `${sortBy.index} ${sortBy.direction.toUpperCase()}`
+            : '',
         }}
-        results={pagedEntries}
-        itemCount={entries.length}
+        results={rows}
+        itemCount={totalCount}
         url=""
         isPending={status === STATUS.PENDING}
-        errorMessage={
-          status === STATUS.ERROR && error?.message ? error.message : null
-        }
+        errorMessage={combinedErrorMessage}
         showCheckboxes
         refreshData={() => {}}
         isDeleteable={false}
-        emptyMessage={__('The preupgrade report shows no issues.')}
+        emptyMessage={
+          searchValue
+            ? __('No results found for your search.')
+            : __('The preupgrade report shows no issues.')
+        }
         setParams={handleParamsChange}
         childrenOutsideTbody
         onExpandAll={onExpandAll}
         areAllRowsExpanded={!areAllRowsExpanded}
       >
-        {pagedEntries.map((entry, rowIndex) => {
+        {rows.map((entry, rowIndex) => {
+          const rowKey = entry.id
+            ? `entry-${entry.id}`
+            : `entry-row-${rowIndex}`;
           const isRowExpanded = expandedRowIds.has(entry.id);
-
           return (
             <Tbody
-              key={entry.id}
+              key={rowKey}
               isExpanded={isRowExpanded}
               className={isRowExpanded ? 'leapp-expanded-tbody' : ''}
             >
@@ -408,7 +504,7 @@ const PreupgradeReportsTable = ({ data = {} }) => {
                   expand={{
                     rowIndex,
                     isExpanded: isRowExpanded,
-                    onToggle: (_event, _rowIndex, isOpen) =>
+                    onToggle: (_e, _idx, isOpen) =>
                       toggleRowExpansion(entry.id, isOpen),
                   }}
                 />
@@ -419,7 +515,10 @@ const PreupgradeReportsTable = ({ data = {} }) => {
                   isSelectable={isRowFixable}
                 />
                 {columnKeys.map(key => (
-                  <Td key={key} dataLabel={keysToColumnNames[key]}>
+                  <Td
+                    key={`${rowKey}-col-${key}`}
+                    dataLabel={keysToColumnNames[key]}
+                  >
                     {columns[key].wrapper
                       ? columns[key].wrapper(entry)
                       : entry[key]}