foreman_remote_execution 16.0.4 → 16.1.0

data/webpack/JobInvocationDetail/index.js

@@ -3,31 +3,33 @@ import {
   Flex,
   PageSection,
   PageSectionVariants,
+  Skeleton,
 } from '@patternfly/react-core';
-import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import React, { useEffect, useState } from 'react';
 import { translate as __, documentLocale } from 'foremanReact/common/I18n';
-import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
+import { useDispatch, useSelector } from 'react-redux';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
+import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
 
 import { JobAdditionInfo } from './JobAdditionInfo';
+import JobInvocationHostTable from './JobInvocationHostTable';
+import JobInvocationOverview from './JobInvocationOverview';
+import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
+import JobInvocationToolbarButtons from './JobInvocationToolbarButtons';
 import { getJobInvocation, getTask } from './JobInvocationActions';
+import './JobInvocationDetail.scss';
 import {
   CURRENT_PERMISSIONS,
-  currentPermissionsUrl,
   DATE_OPTIONS,
   JOB_INVOCATION_KEY,
   STATUS,
+  STATUS_UPPERCASE,
+  currentPermissionsUrl,
 } from './JobInvocationConstants';
-import JobInvocationHostTable from './JobInvocationHostTable';
-import JobInvocationOverview from './JobInvocationOverview';
 import { selectItems } from './JobInvocationSelectors';
-import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
-import JobInvocationToolbarButtons from './JobInvocationToolbarButtons';
-
-import './JobInvocationDetail.scss';
 
 const JobInvocationDetailPage = ({
   match: {
@@ -38,21 +40,20 @@ const JobInvocationDetailPage = ({
   const items = useSelector(selectItems);
   const {
     description,
+    failed = 0,
     status_label: statusLabel,
     task,
     start_at: startAt,
-    targeting,
+    targeting = {},
   } = items;
   const finished =
     statusLabel === STATUS.FAILED ||
     statusLabel === STATUS.SUCCEEDED ||
     statusLabel === STATUS.CANCELLED;
   const autoRefresh = task?.state === STATUS.PENDING || false;
-  const { response, status } = useAPI(
-    'get',
-    currentPermissionsUrl,
-    CURRENT_PERMISSIONS
-  );
+  useAPI('get', currentPermissionsUrl, {
+    key: CURRENT_PERMISSIONS,
+  });
   const [selectedFilter, setSelectedFilter] = useState('');
 
   const handleFilterChange = newFilter => {
@@ -88,10 +89,22 @@ const JobInvocationDetailPage = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, task?.id]);
 
+  const pageStatus =
+    items.id === undefined
+      ? STATUS_UPPERCASE.PENDING
+      : STATUS_UPPERCASE.RESOLVED;
+
   const breadcrumbOptions = {
     breadcrumbItems: [
       { caption: __('Jobs'), url: `/job_invocations` },
-      { caption: description },
+      {
+        caption:
+          pageStatus === STATUS_UPPERCASE.PENDING ? (
+            <Skeleton width="350px" />
+          ) : (
+            description
+          ),
+      },
     ],
     isPf4: true,
   };
@@ -101,26 +114,27 @@ const JobInvocationDetailPage = ({
       <PageLayout
         header={description}
         breadcrumbOptions={breadcrumbOptions}
-        toolbarButtons={
-          <JobInvocationToolbarButtons
-            jobId={id}
-            data={items}
-            currentPermissions={response.results}
-            permissionsStatus={status}
-          />
-        }
+        toolbarButtons={<JobInvocationToolbarButtons jobId={id} data={items} />}
         searchable={false}
       >
         <Flex
           className="job-invocation-detail-flex"
           alignItems={{ default: 'alignItemsFlexStart' }}
         >
-          <JobInvocationSystemStatusChart
-            data={items}
-            isAlreadyStarted={isAlreadyStarted}
-            formattedStartDate={formattedStartDate}
-            onFilterChange={handleFilterChange}
-          />
+          <SkeletonLoader
+            status={pageStatus}
+            skeletonProps={{
+              height: 105,
+              width: 375,
+            }}
+          >
+            <JobInvocationSystemStatusChart
+              data={items}
+              isAlreadyStarted={isAlreadyStarted}
+              formattedStartDate={formattedStartDate}
+              onFilterChange={handleFilterChange}
+            />
+          </SkeletonLoader>
           <Divider
             orientation={{
               default: 'vertical',
@@ -130,35 +144,51 @@ const JobInvocationDetailPage = ({
             className="job-overview"
             alignItems={{ default: 'alignItemsCenter' }}
           >
-            <JobInvocationOverview
-              data={items}
-              isAlreadyStarted={isAlreadyStarted}
-              formattedStartDate={formattedStartDate}
-              onFilterChange={handleFilterChange}
-            />
+            <SkeletonLoader
+              status={pageStatus}
+              skeletonProps={{
+                height: 105,
+                width: 270,
+              }}
+            >
+              <JobInvocationOverview
+                data={items}
+                isAlreadyStarted={isAlreadyStarted}
+                formattedStartDate={formattedStartDate}
+              />
+            </SkeletonLoader>
           </Flex>
         </Flex>
         <PageSection
           variant={PageSectionVariants.light}
           className="job-additional-info"
         >
-          {items.id !== undefined && <JobAdditionInfo data={items} />}
+          <SkeletonLoader
+            status={pageStatus}
+            skeletonProps={{ height: 150, width: '100%' }}
+          >
+            <JobAdditionInfo data={items} />
+          </SkeletonLoader>
         </PageSection>
       </PageLayout>
       <PageSection
         variant={PageSectionVariants.light}
         className="job-details-table-section table-section"
       >
-        {items.id !== undefined && (
+        <SkeletonLoader
+          status={pageStatus}
+          skeletonProps={{ height: 400, width: '100%' }}
+        >
           <JobInvocationHostTable
             id={id}
             targeting={targeting}
+            failedCount={failed}
             finished={finished}
             autoRefresh={autoRefresh}
             initialFilter={selectedFilter}
             onFilterUpdate={handleFilterChange}
           />
-        )}
+        </SkeletonLoader>
       </PageSection>
     </>
   );

data/webpack/JobWizard/steps/HostsAndInputs/buildHostQuery.js

@@ -1,12 +1,31 @@
 export const buildHostQuery = (selected, search) => {
+  const nameEscape = name => `"${name.replaceAll('"', '\\"')}"`;
   const { hosts, hostCollections, hostGroups } = selected;
-  const hostsSearch = `id ^ (${hosts.map(({ id }) => id).join(',')})`;
-  const hostCollectionsSearch = `host_collection_id ^ (${hostCollections
-    .map(({ id }) => id)
-    .join(',')})`;
-  const hostGroupsSearch = `hostgroup_id ^ (${hostGroups
-    .map(({ id }) => id)
-    .join(',')})`;
+  const MAX_NAME_ITEMS = 50;
+  let hostsSearch;
+  if (hosts.length < MAX_NAME_ITEMS)
+    hostsSearch = `name ^ (${hosts.map(({ name }) => name).join(',')})`;
+  else hostsSearch = `id ^ (${hosts.map(({ id }) => id).join(',')})`;
+
+  let hostCollectionsSearch;
+  if (hostCollections.length < MAX_NAME_ITEMS)
+    hostCollectionsSearch = `host_collection ^ (${hostCollections
+      .map(({ name }) => nameEscape(name))
+      .join(',')})`;
+  else
+    hostCollectionsSearch = `host_collection_id ^ (${hostCollections
+      .map(({ id }) => id)
+      .join(',')})`;
+
+  let hostGroupsSearch;
+  if (hostCollections.length < MAX_NAME_ITEMS)
+    hostGroupsSearch = `hostgroup_fullname ^ (${hostGroups
+      .map(({ name }) => nameEscape(name))
+      .join(',')})`;
+  else
+    hostGroupsSearch = `hostgroup_id ^ (${hostGroups
+      .map(({ id }) => id)
+      .join(',')})`;
   const queryParts = [
     hosts.length ? hostsSearch : false,
     hostCollections.length ? hostCollectionsSearch : false,

data/webpack/Routes/routes.js

@@ -16,7 +16,7 @@ const ForemanREXRoutes = [
     render: props => <JobWizardPageRerun {...props} />,
   },
   {
-    path: '/experimental/job_invocations_detail/:id',
+    path: '/job_invocations/:id',
     exact: true,
     render: props => <JobInvocationDetailPage {...props} />,
   },

data/webpack/react_app/components/TargetingHosts/TargetingHostsLabelsRow.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'foremanReact/common/variables';
 
 .tasks-labels-row {
   margin: 0;

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: foreman_remote_execution
 version: !ruby/object:Gem::Version
-  version: 16.0.4
+  version: 16.1.0
 platform: ruby
 authors:
 - Foreman Remote Execution team
 bindir: bin
 cert_chain: []
-date: 2025-06-26 00:00:00.000000000 Z
+date: 2025-08-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: deface
@@ -353,6 +353,7 @@ files:
 - extra/cockpit/settings.yml.example
 - lib/foreman_remote_execution.rb
 - lib/foreman_remote_execution/engine.rb
+- lib/foreman_remote_execution/plugin.rb
 - lib/foreman_remote_execution/tasks/explain_proxy_selection.rake
 - lib/foreman_remote_execution/version.rb
 - lib/tasks/foreman_remote_execution_tasks.rake
@@ -419,17 +420,18 @@ files:
 - test/unit/renderer_scope_input_test.rb
 - test/unit/targeting_test.rb
 - test/unit/template_invocation_input_value_test.rb
+- webpack/JobInvocationDetail/CheckboxesActions.js
+- webpack/JobInvocationDetail/DropdownFilter.js
 - webpack/JobInvocationDetail/JobAdditionInfo.js
 - webpack/JobInvocationDetail/JobInvocationActions.js
 - webpack/JobInvocationDetail/JobInvocationConstants.js
 - webpack/JobInvocationDetail/JobInvocationDetail.scss
 - webpack/JobInvocationDetail/JobInvocationHostTable.js
-- webpack/JobInvocationDetail/JobInvocationHostTableToolbar.js
 - webpack/JobInvocationDetail/JobInvocationOverview.js
 - webpack/JobInvocationDetail/JobInvocationSelectors.js
 - webpack/JobInvocationDetail/JobInvocationSystemStatusChart.js
 - webpack/JobInvocationDetail/JobInvocationToolbarButtons.js
-- webpack/JobInvocationDetail/OpenAlInvocations.js
+- webpack/JobInvocationDetail/OpenAllInvocationsModal.js
 - webpack/JobInvocationDetail/TemplateInvocation.js
 - webpack/JobInvocationDetail/TemplateInvocationComponents/OutputCodeBlock.js
 - webpack/JobInvocationDetail/TemplateInvocationComponents/OutputToggleGroup.js
@@ -438,8 +440,8 @@ files:
 - webpack/JobInvocationDetail/TemplateInvocationComponents/index.scss
 - webpack/JobInvocationDetail/TemplateInvocationPage.js
 - webpack/JobInvocationDetail/__tests__/MainInformation.test.js
-- webpack/JobInvocationDetail/__tests__/OpenAlInvocations.test.js
 - webpack/JobInvocationDetail/__tests__/OutputCodeBlock.test.js
+- webpack/JobInvocationDetail/__tests__/TableToolbarActions.test.js
 - webpack/JobInvocationDetail/__tests__/TemplateInvocation.test.js
 - webpack/JobInvocationDetail/__tests__/fixtures.js
 - webpack/JobInvocationDetail/index.js
@@ -605,7 +607,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.7
+rubygems_version: 3.6.9
 specification_version: 4
 summary: A plugin bringing remote execution to the Foreman, completing the config
   management functionality with remote management functionality.

data/webpack/JobInvocationDetail/OpenAlInvocations.js

@@ -1,111 +0,0 @@
-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,
-};

data/webpack/JobInvocationDetail/__tests__/OpenAlInvocations.test.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { OpenAlInvocations, PopupAlert } from '../OpenAlInvocations';
-import { templateInvocationPageUrl } from '../JobInvocationConstants';
-
-// Mock the templateInvocationPageUrl function
-jest.mock('../JobInvocationConstants', () => ({
-  ...jest.requireActual('../JobInvocationConstants'),
-  templateInvocationPageUrl: jest.fn((resultId, id) => `url/${resultId}/${id}`),
-}));
-
-describe('OpenAlInvocations', () => {
-  const mockResults = [{ id: 1 }, { id: 2 }, { id: 3 }];
-  const mockSetShowAlert = jest.fn();
-  let windowSpy;
-  const windowOpen = window.open;
-
-  beforeAll(() => {
-    window.open = () => {};
-  });
-  afterAll(() => {
-    windowSpy.mockRestore();
-    jest.clearAllMocks();
-    window.open = windowOpen;
-  });
-
-  test('renders without crashing', () => {
-    render(
-      <OpenAlInvocations
-        results={mockResults}
-        id="test-id"
-        setShowAlert={mockSetShowAlert}
-      />
-    );
-  });
-
-  test('opens links when results length is less than or equal to 3', () => {
-    render(
-      <OpenAlInvocations
-        results={mockResults}
-        id="test-id"
-        setShowAlert={mockSetShowAlert}
-      />
-    );
-
-    const button = screen.getByRole('button', { name: /open all/i });
-    fireEvent.click(button);
-
-    expect(templateInvocationPageUrl).toHaveBeenCalledTimes(mockResults.length);
-    mockResults.forEach(result => {
-      expect(templateInvocationPageUrl).toHaveBeenCalledWith(
-        result.id,
-        'test-id'
-      );
-    });
-  });
-
-  test('shows modal when results length is greater than 3', () => {
-    const largeResults = [...mockResults, { id: 4 }];
-    render(
-      <OpenAlInvocations
-        results={largeResults}
-        id="test-id"
-        setShowAlert={mockSetShowAlert}
-      />
-    );
-
-    const button = screen.getByRole('button', { name: /open all/i });
-    fireEvent.click(button);
-
-    expect(
-      screen.getAllByText(/open all invocations in new tabs/i)
-    ).toHaveLength(2);
-  });
-
-  test('shows alert when popups are blocked', () => {
-    window.open = jest.fn().mockReturnValueOnce(null);
-
-    render(
-      <OpenAlInvocations
-        results={mockResults}
-        id="test-id"
-        setShowAlert={mockSetShowAlert}
-      />
-    );
-
-    const button = screen.getByRole('button', { name: /open all/i });
-    fireEvent.click(button);
-
-    expect(mockSetShowAlert).toHaveBeenCalledWith(true);
-  });
-});
-
-describe('PopupAlert', () => {
-  const mockSetShowAlert = jest.fn();
-
-  test('renders without crashing', () => {
-    render(<PopupAlert setShowAlert={mockSetShowAlert} />);
-  });
-
-  test('closes alert when close button is clicked', () => {
-    render(<PopupAlert setShowAlert={mockSetShowAlert} />);
-
-    const closeButton = screen.getByRole('button', { name: /close/i });
-    fireEvent.click(closeButton);
-
-    expect(mockSetShowAlert).toHaveBeenCalledWith(false);
-  });
-});