foreman_remote_execution 16.0.3 → 16.0.5

data/webpack/JobInvocationDetail/CheckboxesActions.js

@@ -0,0 +1,196 @@
+/* eslint-disable camelcase */
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  Tooltip,
+} from '@patternfly/react-core';
+import {
+  EllipsisVIcon,
+  OutlinedWindowRestoreIcon,
+} from '@patternfly/react-icons';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  templateInvocationPageUrl,
+  MAX_HOSTS_API_SIZE,
+  DIRECT_OPEN_HOST_LIMIT,
+} from './JobInvocationConstants';
+import { selectHasPermission, selectItems } from './JobInvocationSelectors';
+import OpenAllInvocationsModal, { PopupAlert } from './OpenAllInvocationsModal';
+
+export const CheckboxesActions = ({
+  selectedIds,
+  failedCount,
+  jobID,
+  filter,
+  bulkParams,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
+  const [isOpenFailed, setIsOpenFailed] = useState(false);
+  const hasPermission = useSelector(
+    selectHasPermission('create_job_invocations')
+  );
+  const jobSearchQuery = useSelector(selectItems)?.targeting?.search_query;
+  const filterQuery =
+    filter && filter !== 'all_statuses'
+      ? ` and job_invocation.result = ${filter}`
+      : '';
+  const combinedQuery = `${bulkParams}${filterQuery}`;
+
+  const { response: failedHostsData } = useAPI(
+    'get',
+    foremanUrl(`/api/job_invocations/${jobID}/hosts`),
+    {
+      params: {
+        per_page: MAX_HOSTS_API_SIZE,
+        search: `job_invocation.result = failed`,
+      },
+      skip: failedCount === 0,
+    }
+  );
+
+  const failedHosts = failedHostsData?.results || [];
+
+  const openLink = url => {
+    const newWin = window.open(url);
+
+    if (!newWin || newWin.closed || typeof newWin.closed === 'undefined') {
+      setShowAlert(true);
+    }
+  };
+
+  const handleOpenHosts = async (type = 'all') => {
+    if (type === 'failed') {
+      if (failedCount <= DIRECT_OPEN_HOST_LIMIT) {
+        failedHosts.forEach(host =>
+          openLink(templateInvocationPageUrl(host.id, jobID))
+        );
+        return;
+      }
+      setIsOpenFailed(true);
+      setIsModalOpen(true);
+      return;
+    }
+
+    if (selectedIds.length <= DIRECT_OPEN_HOST_LIMIT) {
+      selectedIds.forEach(id => openLink(templateInvocationPageUrl(id, jobID)));
+      return;
+    }
+
+    setIsOpenFailed(false);
+    setIsModalOpen(true);
+  };
+
+  const ActionsKebab = () => {
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+    const dropdownItems = [
+      <DropdownItem
+        ouiaId="open-failed-dropdown-item"
+        key="open-failed"
+        onClick={() => handleOpenHosts('failed')}
+        isDisabled={failedCount === 0}
+      >
+        {sprintf(__('Open all failed runs (%s)'), failedCount)}
+      </DropdownItem>,
+    ];
+
+    return (
+      <Dropdown
+        isOpen={isDropdownOpen}
+        onOpenChange={setIsDropdownOpen}
+        onSelect={() => setIsDropdownOpen(false)}
+        ouiaId="actions-kebab"
+        shouldFocusToggleOnSelect
+        toggle={toggleRef => (
+          <MenuToggle
+            aria-label="actions dropdown toggle"
+            id="toggle-kebab"
+            isExpanded={isDropdownOpen}
+            onClick={() => setIsDropdownOpen(prev => !prev)}
+            ref={toggleRef}
+            variant="plain"
+          >
+            <EllipsisVIcon />
+          </MenuToggle>
+        )}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
+    );
+  };
+
+  const OpenAllButton = () => (
+    <Button
+      aria-label="open all template invocations in new tab"
+      className="open-all-button"
+      isDisabled={selectedIds.length === 0}
+      isInline
+      onClick={() => handleOpenHosts('all')}
+      ouiaId="template-invocation-new-tab-button"
+      variant="link"
+    >
+      <Tooltip content={__('Open selected in new tab')}>
+        <OutlinedWindowRestoreIcon />
+      </Tooltip>
+    </Button>
+  );
+
+  const RerunSelectedButton = () => (
+    <Button
+      aria-label="rerun selected template invocations"
+      className="rerun-selected-button"
+      component="a"
+      href={foremanUrl(
+        `/job_invocations/${jobID}/rerun?search=(${jobSearchQuery}) AND (${combinedQuery})`
+      )}
+      // eslint-disable-next-line camelcase
+      isDisabled={selectedIds.length === 0 || !hasPermission}
+      isInline
+      ouiaId="template-invocation-rerun-selected-button"
+      variant="secondary"
+    >
+      {__('Rerun')}
+    </Button>
+  );
+
+  return (
+    <>
+      <OpenAllButton />
+      <RerunSelectedButton />
+      <ActionsKebab />
+      {showAlert && <PopupAlert setShowAlert={setShowAlert} />}
+      <OpenAllInvocationsModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        failedCount={failedCount}
+        failedHosts={failedHosts}
+        jobID={jobID}
+        isOpenFailed={isOpenFailed}
+        setShowAlert={setShowAlert}
+        selectedIds={selectedIds}
+      />
+    </>
+  );
+};
+
+CheckboxesActions.propTypes = {
+  selectedIds: PropTypes.array.isRequired,
+  failedCount: PropTypes.number.isRequired,
+  jobID: PropTypes.string.isRequired,
+  bulkParams: PropTypes.string,
+  filter: PropTypes.string,
+};
+
+CheckboxesActions.defaultProps = {
+  bulkParams: '',
+  filter: '',
+};

data/webpack/JobInvocationDetail/{JobInvocationHostTableToolbar.js → DropdownFilter.js}

@@ -10,10 +10,7 @@ import {
 } from '@patternfly/react-core';
 import { STATUS_TITLES } from './JobInvocationConstants';
 
-const JobInvocationHostTableToolbar = ({
-  dropdownFilter,
-  setDropdownFilter,
-}) => {
+const DropdownFilter = ({ dropdownFilter, setDropdownFilter }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const onSelect = (_event, itemId) => {
     setDropdownFilter(itemId);
@@ -60,9 +57,9 @@ const JobInvocationHostTableToolbar = ({
   );
 };
 
-JobInvocationHostTableToolbar.propTypes = {
+DropdownFilter.propTypes = {
   dropdownFilter: PropTypes.string.isRequired,
   setDropdownFilter: PropTypes.func.isRequired,
 };
 
-export default JobInvocationHostTableToolbar;
+export default DropdownFilter;

data/webpack/JobInvocationDetail/JobInvocationConstants.js

@@ -16,12 +16,17 @@ export const CANCEL_RECURRING_LOGIC = 'CANCEL_RECURRING_LOGIC';
 export const GET_REPORT_TEMPLATES = 'GET_REPORT_TEMPLATES';
 export const GET_REPORT_TEMPLATE_INPUTS = 'GET_REPORT_TEMPLATE_INPUTS';
 export const JOB_INVOCATION_HOSTS = 'JOB_INVOCATION_HOSTS';
+export const GET_TEMPLATE_INVOCATION = 'GET_TEMPLATE_INVOCATION';
+export const MAX_HOSTS_API_SIZE = 100;
+export const DIRECT_OPEN_HOST_LIMIT = 3;
+export const ALL_JOB_HOSTS = 'ALL_JOB_HOSTS';
 export const currentPermissionsUrl = foremanUrl(
   '/api/v2/permissions/current_permissions'
 );
-export const GET_TEMPLATE_INVOCATION = 'GET_TEMPLATE_INVOCATION';
+
 export const showTemplateInvocationUrl = (hostID, jobID) =>
   `/show_template_invocation_by_host/${hostID}/job_invocation/${jobID}`;
+export const LIST_TEMPLATE_INVOCATIONS = 'LIST_TEMPLATE_INVOCATIONS';
 
 export const templateInvocationPageUrl = (hostID, jobID) =>
   `/job_invocations_detail/${jobID}/host_invocation/${hostID}`;
@@ -83,7 +88,7 @@ const Columns = () => {
 
   return {
     expand: {
-      title: '',
+      title: ' ',
       weight: 0,
       wrapper: () => null,
     },
@@ -135,11 +140,6 @@ const Columns = () => {
       },
       weight: 5,
     },
-    actions: {
-      title: '',
-      weight: 6,
-      wrapper: () => null,
-    },
   };
 };
 

data/webpack/JobInvocationDetail/JobInvocationDetail.scss

@@ -7,6 +7,16 @@
     height: $chart_size;
     width: $chart_size;
     margin-bottom: 10px;
+
+    svg {
+      position: relative;
+      overflow: visible;
+      z-index: 999;
+    }
+
+    path {
+      cursor: pointer;
+    }
   }
 
   .chart-legend {
@@ -28,6 +38,10 @@
         font-weight: normal;
       }
     }
+
+    text, path {
+      cursor: pointer;
+    }
   }
 
   .pf-v5-c-divider {
@@ -38,14 +52,26 @@
     height: $chart_size;
   }
 }
+
 .job-additional-info {
   padding: 0;
   margin-bottom: -10px;
 }
+
 .job-details-table-section {
   section:nth-child(1) {
     padding: 0;
   }
+
+  .pf-v5-c-toolbar__group.pf-m-button-group {
+    display: flex;
+    align-items: center;
+  }
+
+  .open-all-button {
+    margin-left: 10px;
+    margin-right: 15px;
+  }
 }
 
 .template-invocation {
@@ -108,3 +134,9 @@
     margin-bottom: 10px;
   }
 }
+
+.open-all-modal .pf-v5-c-modal-box__title-text {
+    white-space: normal;
+    text-overflow: unset;
+    word-break: break-word;
+}