foreman_remote_execution 14.1.4 → 15.0.0

data/webpack/JobInvocationDetail/JobInvocationHostTable.js

@@ -1,10 +1,10 @@
 /* eslint-disable camelcase */
 import PropTypes from 'prop-types';
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 import { Icon } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { FormattedMessage } from 'react-intl';
-import { Tr, Td } from '@patternfly/react-table';
+import { Tr, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
 import {
   Title,
   EmptyState,
@@ -20,57 +20,72 @@ import {
   useBulkSelect,
   useUrlParams,
 } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
-import Pagination from 'foremanReact/components/Pagination';
 import { getControllerSearchProps } from 'foremanReact/constants';
 import Columns, {
   JOB_INVOCATION_HOSTS,
   STATUS_UPPERCASE,
 } from './JobInvocationConstants';
+import { TemplateInvocation } from './TemplateInvocation';
+import { OpenAlInvocations, PopupAlert } from './OpenAlInvocations';
+import { RowActions } from './TemplateInvocationComponents/TemplateActionButtons';
+import JobInvocationHostTableToolbar from './JobInvocationHostTableToolbar';
 
-const JobInvocationHostTable = ({ id, targeting, finished, autoRefresh }) => {
+const JobInvocationHostTable = ({
+  id,
+  targeting,
+  finished,
+  autoRefresh,
+  initialFilter,
+}) => {
   const columns = Columns();
   const columnNamesKeys = Object.keys(columns);
   const apiOptions = { key: JOB_INVOCATION_HOSTS };
+  const [selectedFilter, setSelectedFilter] = useState(initialFilter || '');
   const {
     searchParam: urlSearchQuery = '',
     page: urlPage,
     per_page: urlPerPage,
   } = useUrlParams();
-  const defaultParams = { search: urlSearchQuery };
+  const constructFilter = (
+    filter = selectedFilter,
+    search = urlSearchQuery
+  ) => {
+    const dropdownFilterClause =
+      filter && filter !== 'all_statuses'
+        ? `job_invocation.result = ${filter}`
+        : null;
+    const parts = [dropdownFilterClause, search];
+    return parts
+      .filter(x => x)
+      .map(fragment => `(${fragment})`)
+      .join(' AND ');
+  };
+
+  const search = constructFilter();
+  const defaultParams = search !== '' ? { search } : {};
   if (urlPage) defaultParams.page = Number(urlPage);
   if (urlPerPage) defaultParams.per_page = Number(urlPerPage);
+  const [expandedHost, setExpandedHost] = useState([]);
   const { response, status, setAPIOptions } = useAPI(
     'get',
     `/api/job_invocations/${id}/hosts`,
     {
-      params: { ...defaultParams, key: JOB_INVOCATION_HOSTS },
+      params: defaultParams,
     }
   );
 
-  const combinedResponse = {
-    response: {
-      search: urlSearchQuery,
-      can_create: false,
-      results: response?.results || [],
-      total: response?.total || 0,
-      per_page: response?.perPage,
-      page: response?.page,
-      subtotal: response?.subtotal || 0,
-      message: response?.message || 'error',
-    },
-    status,
-    setAPIOptions,
-  };
-
-  const { setParamsAndAPI, params } = useSetParamsAndApiAndSearch({
+  const { params } = useSetParamsAndApiAndSearch({
     defaultParams,
     apiOptions,
-    setAPIOptions: combinedResponse.setAPIOptions,
+    setAPIOptions,
   });
 
-  const { updateSearchQuery } = useBulkSelect({
+  const { updateSearchQuery: updateSearchQueryBulk } = useBulkSelect({
     initialSearchQuery: urlSearchQuery,
   });
+  const updateSearchQuery = searchQuery => {
+    updateSearchQueryBulk(searchQuery);
+  };
 
   const controller = 'hosts';
   const memoDefaultSearchProps = useMemo(
@@ -81,6 +96,23 @@ const JobInvocationHostTable = ({ id, targeting, finished, autoRefresh }) => {
     `/${controller}/auto_complete_search`
   );
 
+  const wrapSetSelectedFilter = filter => {
+    const filterSearch = constructFilter(filter);
+    setAPIOptions(prevOptions => {
+      if (prevOptions.params.search !== filterSearch) {
+        return {
+          ...prevOptions,
+          params: {
+            ...prevOptions.params,
+            search: filterSearch,
+          },
+        };
+      }
+      return prevOptions;
+    });
+    setSelectedFilter(filter);
+  };
+
   useEffect(() => {
     const intervalId = setInterval(() => {
       if (!finished || autoRefresh) {
@@ -98,24 +130,31 @@ const JobInvocationHostTable = ({ id, targeting, finished, autoRefresh }) => {
     };
   }, [finished, autoRefresh, setAPIOptions]);
 
-  const onPagination = newPagination => {
-    setParamsAndAPI({
-      ...params,
-      ...newPagination,
-      search: urlSearchQuery,
-    });
+  const wrapSetAPIOptions = newAPIOptions => {
+    setAPIOptions(prevOptions => ({
+      ...prevOptions,
+      params: {
+        ...prevOptions.params,
+        ...newAPIOptions.params,
+        search: constructFilter(undefined, newAPIOptions?.params?.search),
+      },
+    }));
   };
 
-  const bottomPagination = (
-    <Pagination
-      ouiaId="table-hosts-bottom-pagination"
-      key="table-bottom-pagination"
-      page={params.page}
-      perPage={params.perPage}
-      itemCount={response?.subtotal}
-      onChange={onPagination}
-    />
-  );
+  const combinedResponse = {
+    response: {
+      search: urlSearchQuery,
+      can_create: false,
+      results: response?.results || [],
+      total: response?.total || 0,
+      per_page: response?.perPage,
+      page: response?.page,
+      subtotal: response?.subtotal || 0,
+      message: response?.message || 'error',
+    },
+    status,
+    setAPIOptions: wrapSetAPIOptions,
+  };
 
   const customEmptyState = (
     <Tr ouiaId="table-empty">
@@ -153,48 +192,105 @@ const JobInvocationHostTable = ({ id, targeting, finished, autoRefresh }) => {
     </Tr>
   );
 
+  const { results = [] } = response;
+
+  const isHostExpanded = host => expandedHost.includes(host);
+  const setHostExpanded = (host, isExpanding = true) =>
+    setExpandedHost(prevExpanded => {
+      const otherExpandedHosts = prevExpanded.filter(h => h !== host);
+      return isExpanding ? [...otherExpandedHosts, host] : otherExpandedHosts;
+    });
+  const [showAlert, setShowAlert] = useState(false);
   return (
-    <TableIndexPage
-      apiUrl=""
-      apiOptions={apiOptions}
-      customSearchProps={memoDefaultSearchProps}
-      controller="hosts"
-      creatable={false}
-      replacementResponse={combinedResponse}
-      updateSearchQuery={updateSearchQuery}
-    >
-      <Table
-        ouiaId="job-invocation-hosts-table"
-        columns={columns}
-        customEmptyState={
-          status === STATUS_UPPERCASE.RESOLVED && !response?.results?.length
-            ? customEmptyState
-            : null
-        }
-        params={params}
-        setParams={setParamsAndAPI}
-        itemCount={response?.subtotal}
-        results={response?.results}
-        url=""
-        refreshData={() => {}}
-        errorMessage={
-          status === STATUS_UPPERCASE.ERROR && response?.message
-            ? response.message
-            : null
-        }
-        isPending={status === STATUS_UPPERCASE.PENDING}
-        isDeleteable={false}
-        bottomPagination={bottomPagination}
+    <>
+      {showAlert && <PopupAlert setShowAlert={setShowAlert} />}
+      <TableIndexPage
+        apiUrl=""
+        apiOptions={apiOptions}
+        customSearchProps={memoDefaultSearchProps}
+        controller="hosts"
+        creatable={false}
+        replacementResponse={combinedResponse}
+        updateSearchQuery={updateSearchQuery}
+        customToolbarItems={[
+          <OpenAlInvocations
+            setShowAlert={setShowAlert}
+            results={results}
+            id={id}
+          />,
+          <JobInvocationHostTableToolbar
+            dropdownFilter={selectedFilter}
+            setDropdownFilter={wrapSetSelectedFilter}
+          />,
+        ]}
       >
-        {response?.results?.map((result, rowIndex) => (
-          <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`}>
-            {columnNamesKeys.map(k => (
-              <Td key={k}>{columns[k].wrapper(result)}</Td>
-            ))}
-          </Tr>
-        ))}
-      </Table>
-    </TableIndexPage>
+        <Table
+          ouiaId="job-invocation-hosts-table"
+          columns={columns}
+          customEmptyState={
+            status === STATUS_UPPERCASE.RESOLVED && !response?.results?.length
+              ? customEmptyState
+              : null
+          }
+          params={params}
+          setParams={wrapSetAPIOptions}
+          itemCount={response?.subtotal}
+          results={response?.results}
+          url=""
+          refreshData={() => {}}
+          errorMessage={
+            status === STATUS_UPPERCASE.ERROR && response?.message
+              ? response.message
+              : null
+          }
+          isPending={status === STATUS_UPPERCASE.PENDING}
+          isDeleteable={false}
+          childrenOutsideTbody
+        >
+          {results?.map((result, rowIndex) => (
+            <Tbody key={rowIndex}>
+              <Tr ouiaId={`table-row-${rowIndex}`}>
+                <Td
+                  expand={{
+                    rowIndex,
+                    isExpanded: isHostExpanded(result.id),
+                    onToggle: () =>
+                      setHostExpanded(result.id, !isHostExpanded(result.id)),
+                    expandId: 'host-expandable',
+                  }}
+                />
+                {columnNamesKeys.slice(1).map(k => (
+                  <Td key={k}>{columns[k].wrapper(result)}</Td>
+                ))}
+                <Td isActionCell>
+                  <RowActions hostID={result.id} jobID={id} />
+                </Td>
+              </Tr>
+              <Tr
+                isExpanded={isHostExpanded(result.id)}
+                ouiaId="table-row-expanded-sections"
+              >
+                <Td
+                  dataLabel={`${result.id}-expandable-content`}
+                  colSpan={columnNamesKeys.length + 1}
+                >
+                  <ExpandableRowContent>
+                    {result.job_status === 'cancelled' ||
+                    result.job_status === 'N/A' ? (
+                      <div>
+                        {__('A task for this host has not been started')}
+                      </div>
+                    ) : (
+                      <TemplateInvocation hostID={result.id} jobID={id} />
+                    )}
+                  </ExpandableRowContent>
+                </Td>
+              </Tr>
+            </Tbody>
+          ))}
+        </Table>
+      </TableIndexPage>
+    </>
   );
 };
 
@@ -203,6 +299,7 @@ JobInvocationHostTable.propTypes = {
   targeting: PropTypes.object.isRequired,
   finished: PropTypes.bool.isRequired,
   autoRefresh: PropTypes.bool.isRequired,
+  initialFilter: PropTypes.string.isRequired,
 };
 
 JobInvocationHostTable.defaultProps = {};

data/webpack/JobInvocationDetail/JobInvocationHostTableToolbar.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Select, SelectOption, SelectList } from '@patternfly/react-core/next'; // remove "/next" after switching to PF5
+import { MenuToggle, ToolbarItem } from '@patternfly/react-core';
+import { STATUS_TITLES } from './JobInvocationConstants';
+
+const JobInvocationHostTableToolbar = ({
+  dropdownFilter,
+  setDropdownFilter,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const onSelect = (_event, itemId) => {
+    setDropdownFilter(itemId);
+    setIsOpen(false);
+  };
+
+  const toggle = toggleRef => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      style={{
+        width: '200px',
+      }}
+    >
+      {Object.values(STATUS_TITLES).find(status => status.id === dropdownFilter)
+        ?.title || __('All statuses')}
+    </MenuToggle>
+  );
+
+  return (
+    <ToolbarItem>
+      <Select
+        isOpen={isOpen}
+        selected={dropdownFilter}
+        onSelect={onSelect}
+        onOpenChange={newIsOpen => setIsOpen(newIsOpen)}
+        ouiaId="host-status-select"
+        toggle={toggle}
+      >
+        <SelectList>
+          {Object.values(STATUS_TITLES).map(result => (
+            <SelectOption
+              key={result.id}
+              itemId={result.id}
+              isSelected={result.id === dropdownFilter}
+            >
+              {result.title}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </Select>
+    </ToolbarItem>
+  );
+};
+
+JobInvocationHostTableToolbar.propTypes = {
+  dropdownFilter: PropTypes.string.isRequired,
+  setDropdownFilter: PropTypes.func.isRequired,
+};
+
+export default JobInvocationHostTableToolbar;

data/webpack/JobInvocationDetail/JobInvocationSelectors.js

@@ -1,5 +1,9 @@
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
-import { JOB_INVOCATION_KEY, GET_TASK } from './JobInvocationConstants';
+import {
+  JOB_INVOCATION_KEY,
+  GET_TASK,
+  GET_TEMPLATE_INVOCATION,
+} from './JobInvocationConstants';
 
 export const selectItems = state =>
   selectAPIResponse(state, JOB_INVOCATION_KEY);
@@ -8,3 +12,6 @@ export const selectTask = state => selectAPIResponse(state, GET_TASK);
 
 export const selectTaskCancelable = state =>
   selectTask(state).available_actions?.cancellable || false;
+
+export const selectTemplateInvocation = state =>
+  selectAPIResponse(state, GET_TEMPLATE_INVOCATION);

data/webpack/JobInvocationDetail/JobInvocationSystemStatusChart.js

@@ -17,18 +17,20 @@ import {
   Text,
 } from '@patternfly/react-core';
 import {
-  global_palette_black_600 as canceledColor,
+  global_palette_black_600 as cancelledColor,
   global_palette_black_500 as emptyChartDonut,
   global_palette_red_100 as failedColor,
   global_palette_blue_300 as inProgressColor,
   global_palette_green_500 as successedColor,
 } from '@patternfly/react-tokens';
+import { STATUS_TITLES } from './JobInvocationConstants';
 import './JobInvocationDetail.scss';
 
 const JobInvocationSystemStatusChart = ({
   data,
   isAlreadyStarted,
   formattedStartDate,
+  onFilterChange,
 }) => {
   const {
     succeeded,
@@ -42,7 +44,7 @@ const JobInvocationSystemStatusChart = ({
     { title: __('Succeeded:'), count: succeeded, color: successedColor.value },
     { title: __('Failed:'), count: failed, color: failedColor.value },
     { title: __('In Progress:'), count: pending, color: inProgressColor.value },
-    { title: __('Canceled:'), count: cancelled, color: canceledColor.value },
+    { title: __('Cancelled:'), count: cancelled, color: cancelledColor.value },
   ];
   const chartDonutTitle = () => {
     if (total > 0) return `${succeeded.toString()}/${total}`;
@@ -51,6 +53,7 @@ const JobInvocationSystemStatusChart = ({
   };
   const chartSize = 105;
   const [legendWidth, setLegendWidth] = useState(270);
+  const [cursor, setCursor] = useState('default');
 
   // Calculates chart legend width based on its content
   useEffect(() => {
@@ -64,9 +67,19 @@ const JobInvocationSystemStatusChart = ({
     }
   }, [isAlreadyStarted, data]);
 
+  const onChartClick = (_evt, { index }) => {
+    const statusKeys = Object.keys(STATUS_TITLES);
+    const selectedKey = statusKeys[index + 1]; // first status is ALL_STATUSES
+    const selectedFilter = selectedKey ? STATUS_TITLES[selectedKey]?.id : null;
+
+    if (onFilterChange && selectedFilter) {
+      onFilterChange(selectedFilter);
+    }
+  };
+
   return (
     <>
-      <FlexItem className="chart-donut">
+      <FlexItem className="chart-donut" style={{ cursor }}>
         <ChartDonut
           allowTooltip
           constrainToVisibleArea
@@ -78,15 +91,25 @@ const JobInvocationSystemStatusChart = ({
                 }))
               : [{ label: sprintf(__(`Scheduled: ${totalHosts} hosts`)), y: 1 }]
           }
+          events={[
+            {
+              target: 'data',
+              eventHandlers: {
+                onClick: onChartClick,
+                onMouseOver: () => {
+                  setCursor('pointer');
+                },
+                onMouseOut: () => {
+                  setCursor('default');
+                },
+              },
+            },
+          ]}
           colorScale={
             total > 0 ? chartData.map(d => d.color) : [emptyChartDonut.value]
           }
           labelComponent={
-            <ChartTooltip
-              pointerLength={0}
-              constrainToVisibleArea
-              renderInPortal={false}
-            />
+            <ChartTooltip pointerLength={0} renderInPortal={false} />
           }
           title={chartDonutTitle}
           titleComponent={
@@ -97,7 +120,7 @@ const JobInvocationSystemStatusChart = ({
           subTitleComponent={
             // inline style overrides PatternFly default styling
             <ChartLabel
-              style={{ fontSize: '12px', fill: canceledColor.value }}
+              style={{ fontSize: '12px', fill: cancelledColor.value }}
             />
           }
           padding={{
@@ -110,7 +133,7 @@ const JobInvocationSystemStatusChart = ({
           height={chartSize}
         />
       </FlexItem>
-      <FlexItem className="chart-legend">
+      <FlexItem className="chart-legend" style={{ cursor }}>
         <Text ouiaId="legend-title" className="legend-title">
           {__('System status')}
         </Text>
@@ -128,6 +151,32 @@ const JobInvocationSystemStatusChart = ({
             colorScale={chartData.map(d => d.color)}
             width={legendWidth}
             height={chartSize}
+            events={[
+              {
+                target: 'data',
+                eventHandlers: {
+                  onClick: onChartClick,
+                  onMouseOver: () => {
+                    setCursor('pointer');
+                  },
+                  onMouseOut: () => {
+                    setCursor('default');
+                  },
+                },
+              },
+              {
+                target: 'labels',
+                eventHandlers: {
+                  onClick: onChartClick,
+                  onMouseOver: () => {
+                    setCursor('pointer');
+                  },
+                  onMouseOut: () => {
+                    setCursor('default');
+                  },
+                },
+              },
+            ]}
           />
         ) : (
           <DescriptionList>
@@ -148,10 +197,12 @@ JobInvocationSystemStatusChart.propTypes = {
   data: PropTypes.object.isRequired,
   isAlreadyStarted: PropTypes.bool.isRequired,
   formattedStartDate: PropTypes.string,
+  onFilterChange: PropTypes.func,
 };
 
 JobInvocationSystemStatusChart.defaultProps = {
   formattedStartDate: undefined,
+  onFilterChange: undefined,
 };
 
 export default JobInvocationSystemStatusChart;

data/webpack/JobInvocationDetail/OpenAlInvocations.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Alert,
+  AlertActionCloseButton,
+  Button,
+  Modal,
+  ModalVariant,
+} from '@patternfly/react-core';
+import { OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { templateInvocationPageUrl } from './JobInvocationConstants';
+
+export const PopupAlert = ({ setShowAlert }) => (
+  <Alert
+    ouiaId="template-invocation-new-tab-popup-alert"
+    variant="warning"
+    actionClose={<AlertActionCloseButton onClose={() => setShowAlert(false)} />}
+    title={__(
+      'Popups are blocked by your browser. Please allow popups for this site to open all invocations in new tabs.'
+    )}
+  />
+);
+export const OpenAlInvocations = ({ results, id, setShowAlert }) => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const openLink = url => {
+    const newWin = window.open(url);
+
+    if (!newWin || newWin.closed || typeof newWin.closed === 'undefined') {
+      setShowAlert(true);
+    }
+  };
+  const OpenAllButton = () => (
+    <Button
+      variant="link"
+      isInline
+      aria-label="open all template invocations in a new tab"
+      ouiaId="template-invocation-new-tab-button"
+      onClick={() => {
+        if (results.length <= 3) {
+          results.forEach(result => {
+            openLink(templateInvocationPageUrl(result.id, id), '_blank');
+          });
+        } else {
+          handleModalToggle();
+        }
+      }}
+    >
+      <OutlinedWindowRestoreIcon />
+    </Button>
+  );
+  const OpenAllModal = () => (
+    <Modal
+      ouiaId="template-invocation-new-tab-modal"
+      title={__('Open all invocations in new tabs')}
+      isOpen={isModalOpen}
+      onClose={handleModalToggle}
+      variant={ModalVariant.small}
+      titleIconVariant="warning"
+      actions={[
+        <Button
+          ouiaId="template-invocation-new-tab-modal-confirm"
+          key="confirm"
+          variant="primary"
+          onClick={() => {
+            results.forEach(result => {
+              openLink(templateInvocationPageUrl(result.id, id), '_blank');
+            });
+            handleModalToggle();
+          }}
+        >
+          {__('Open all in new tabs')}
+        </Button>,
+        <Button
+          ouiaId="template-invocation-new-tab-modal-cancel"
+          key="cancel"
+          variant="link"
+          onClick={handleModalToggle}
+        >
+          {__('Cancel')}
+        </Button>,
+      ]}
+    >
+      {__('Are you sure you want to open all invocations in new tabs?')}
+      <br />
+      {__('This will open a new tab for each invocation.')}
+      <br />
+      {__('The number of invocations is:')} <b>{results.length}</b>
+    </Modal>
+  );
+  return (
+    <>
+      <OpenAllButton />
+      <OpenAllModal />
+    </>
+  );
+};
+
+OpenAlInvocations.propTypes = {
+  results: PropTypes.array.isRequired,
+  id: PropTypes.string.isRequired,
+  setShowAlert: PropTypes.func.isRequired,
+};
+
+PopupAlert.propTypes = {
+  setShowAlert: PropTypes.func.isRequired,
+};