foreman_remote_execution 15.0.2 → 16.0.0

data/package.json

@@ -19,20 +19,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.0",
-    "@theforeman/builder": ">= 12.0.1",
-    "@theforeman/eslint-plugin-foreman": ">= 12.0.1",
-    "@theforeman/eslint-plugin-rules": ">= 12.0.2",
-    "@theforeman/test": ">= 12.0.1",
-    "@theforeman/vendor-dev": ">= 12.0.1",
+    "@theforeman/builder": ">= 15.0.1",
+    "@theforeman/eslint-plugin-foreman": ">= 15.0.1",
+    "@theforeman/eslint-plugin-rules": ">= 15.0.1",
+    "@theforeman/test": ">= 15.0.1",
+    "@theforeman/vendor-dev": ">= 15.0.1",
     "babel-eslint": "^10.0.0",
     "eslint": "^6.8.0",
     "prettier": "^1.19.1",
     "redux-mock-store": "^1.2.2",
     "graphql-tag": "^2.11.0",
     "graphql": "^15.5.0",
-    "victory-core": "~36.8.6"
+    "victory-core": "~36.8.6",
+    "victory-pie": "~36.8.6"
   },
   "peerDependencies": {
-    "@theforeman/vendor": ">= 12.0.1"
+    "@theforeman/vendor": ">= 15.0.1"
   }
 }

data/webpack/JobInvocationDetail/JobAdditionInfo.js

@@ -69,7 +69,7 @@ const Schedule = ({ data }) => {
   return (
     <ExpandableSection
       toggleText={__('Schedule')}
-      onToggle={setIsExpanded}
+      onToggle={(_event, val) => setIsExpanded(val)}
       isExpanded={isExpanded}
     >
       <DataList isCompact>
@@ -107,7 +107,7 @@ const Recurring = ({ data }) => {
   return (
     <ExpandableSection
       toggleText={__('Recurring logic')}
-      onToggle={setIsExpanded}
+      onToggle={(_event, val) => setIsExpanded(val)}
       isExpanded={isExpanded}
     >
       <DataList isCompact>
@@ -149,7 +149,7 @@ const TargetHosts = ({ data }) => {
   return (
     <ExpandableSection
       toggleText={__('Target Hosts')}
-      onToggle={setIsExpanded}
+      onToggle={(_event, val) => setIsExpanded(val)}
       isExpanded={isExpanded}
     >
       <span>{targetingSelectioning}</span>{' '}
@@ -173,7 +173,7 @@ const Inputs = ({ data }) => {
   return (
     <ExpandableSection
       toggleText={__('User Inputs')}
-      onToggle={setIsExpanded}
+      onToggle={(_event, val) => setIsExpanded(val)}
       isExpanded={isExpanded}
     >
       <DataList isCompact>

data/webpack/JobInvocationDetail/JobInvocationDetail.scss

@@ -15,22 +15,22 @@
 
     .legend-title {
       font-weight: bold;
-      font-size: var(--pf-global--FontSize--sm);
+      font-size: var(--pf-v5-global--FontSize--sm);
       margin-left: 8px;
       margin-bottom: 0;
     }
 
-    .pf-c-description-list {
+    .pf-v5-c-description-list {
       margin-left: 8px;
       margin-top: 8px;
 
-      .pf-c-description-list__term .pf-c-description-list__text {
+      .pf-v5-c-description-list__term .pf-v5-c-description-list__text {
         font-weight: normal;
       }
     }
   }
 
-  .pf-c-divider {
+  .pf-v5-c-divider {
     max-height: $chart_size;
   }
 
@@ -104,7 +104,7 @@
     margin-top: 10px;
   }
 
-  .pf-c-toggle-group {
+  .pf-v5-c-toggle-group {
     margin-bottom: 10px;
   }
 }

data/webpack/JobInvocationDetail/JobInvocationHostTable.js

@@ -6,10 +6,10 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { FormattedMessage } from 'react-intl';
 import { Tr, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
 import {
-  Title,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
+  EmptyStateHeader,
 } from '@patternfly/react-core';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
@@ -163,9 +163,10 @@ const JobInvocationHostTable = ({
           <span className="empty-state-icon">
             <Icon name="add-circle-o" type="pf" size="2x" />
           </span>
-          <Title ouiaId="empty-state-header" headingLevel="h5" size="4xl">
-            {__('No Results')}
-          </Title>
+          <EmptyStateHeader
+            titleText={<>{__('No Results')}</>}
+            headingLevel="h5"
+          />
           <EmptyStateBody>
             <div className="empty-state-description">
               {targeting?.targeting_type === 'dynamic_query' ? (
@@ -217,10 +218,12 @@ const JobInvocationHostTable = ({
             setShowAlert={setShowAlert}
             results={results}
             id={id}
+            key="OpenAlInvocations"
           />,
           <JobInvocationHostTableToolbar
             dropdownFilter={selectedFilter}
             setDropdownFilter={wrapSetSelectedFilter}
+            key="JobInvocationHostTableToolbar"
           />,
         ]}
       >

data/webpack/JobInvocationDetail/JobInvocationHostTableToolbar.js

@@ -1,8 +1,13 @@
 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 {
+  MenuToggle,
+  ToolbarItem,
+  Select,
+  SelectOption,
+  SelectList,
+} from '@patternfly/react-core';
 import { STATUS_TITLES } from './JobInvocationConstants';
 
 const JobInvocationHostTableToolbar = ({
@@ -43,7 +48,7 @@ const JobInvocationHostTableToolbar = ({
           {Object.values(STATUS_TITLES).map(result => (
             <SelectOption
               key={result.id}
-              itemId={result.id}
+              value={result.id}
               isSelected={result.id === dropdownFilter}
             >
               {result.title}

data/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js

@@ -1,16 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Button, Split, SplitItem } from '@patternfly/react-core';
 import {
-  Button,
   Dropdown,
   DropdownItem,
   DropdownPosition,
   DropdownSeparator,
   DropdownToggle,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { STATUS as APIStatus } from 'foremanReact/constants';
@@ -242,7 +240,7 @@ const JobInvocationToolbarButtons = ({
                   </Button>,
                 ]}
                 splitButtonVariant="action"
-                onToggle={setIsActionOpen}
+                onToggle={(_event, val) => setIsActionOpen(val)}
               />
             }
             isOpen={isActionOpen}

data/webpack/JobInvocationDetail/TemplateInvocationComponents/OutputToggleGroup.js

@@ -97,7 +97,7 @@ export const OutputToggleGroup = ({
                 text={text}
                 buttonId={id}
                 isSelected={isSelected}
-                onChange={onClick}
+                onChange={(_event, val) => onClick(val)}
               />
             )
           )}

data/webpack/JobInvocationDetail/TemplateInvocationComponents/PreviewTemplate.js

@@ -1,18 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  TableComposable,
-  Thead,
-  Tr,
-  Th,
-  Tbody,
-  Td,
-} from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 export const PreviewTemplate = ({ inputValues }) =>
   inputValues.length ? (
-    <TableComposable
+    <Table
       ouiaId="template-invocation-preview-table"
       isStriped
       variant="compact"
@@ -36,7 +29,7 @@ export const PreviewTemplate = ({ inputValues }) =>
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   ) : (
     <span>{__('No user input')}</span>
   );

data/webpack/JobInvocationDetail/TemplateInvocationComponents/TemplateActionButtons.js

@@ -56,7 +56,7 @@ const actions = ({
   },
   abort: {
     name: 'template-invocation-abort-job',
-    text: __('Abort Task'),
+    text: __('Abort task'),
     permission: permissions.cancel_job_invocations,
     onClick: () => {
       dispatch(
@@ -137,7 +137,7 @@ export const TemplateActionButtons = ({
       {rerun.permission && (
         <FlexItem spacer={{ default: 'spacerXs' }}>
           <Button
-            isSmall
+            size="sm"
             variant="secondary"
             isInline
             ouiaId={rerun.name}
@@ -152,7 +152,7 @@ export const TemplateActionButtons = ({
       {details.permission && (
         <FlexItem spacer={{ default: 'spacerXs' }}>
           <Button
-            isSmall
+            size="sm"
             variant="secondary"
             isInline
             ouiaId={details.name}
@@ -167,7 +167,7 @@ export const TemplateActionButtons = ({
       {cancel.permission && (
         <FlexItem spacer={{ default: 'spacerXs' }}>
           <Button
-            isSmall
+            size="sm"
             variant="danger"
             isInline
             ouiaId={cancel.name}
@@ -181,7 +181,7 @@ export const TemplateActionButtons = ({
       {abort.permission && (
         <FlexItem spacer={{ default: 'spacerXs' }}>
           <Button
-            isSmall
+            size="sm"
             variant="danger"
             isInline
             ouiaId={abort.name}

data/webpack/JobInvocationDetail/TemplateInvocationComponents/index.scss

@@ -1,3 +1,3 @@
 .jobs-table-action-item:hover {
-    color: var(--pf-c-dropdown__menu-item--Color);
+    color: var(--pf-v5-c-dropdown__menu-item--Color);
 }

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

@@ -97,7 +97,7 @@ describe('JobInvocationDetailPage', () => {
 
     expect(screen.getByText('Description')).toBeInTheDocument();
     expect(
-      container.querySelector('.chart-donut .pf-c-chart')
+      container.querySelector('.chart-donut .pf-c-chart') // todo: change to pf5 once we update @patternfly/react-charts to v7
     ).toBeInTheDocument();
     expect(screen.getByText('2/6')).toBeInTheDocument();
     expect(screen.getByText('Systems')).toBeInTheDocument();
@@ -116,22 +116,22 @@ describe('JobInvocationDetailPage', () => {
 
     Object.entries(informationToCheck).forEach(([term, expectedText]) => {
       const termContainers = container.querySelectorAll(
-        '.pf-c-description-list__term .pf-c-description-list__text'
+        '.pf-v5-c-description-list__term .pf-v5-c-description-list__text'
       );
       termContainers.forEach(termContainer => {
         if (termContainer.textContent.includes(term)) {
           let descriptionContainer;
           if (term === 'SSH user:') {
             descriptionContainer = termContainer
-              .closest('.pf-c-description-list__group')
+              .closest('.pf-v5-c-description-list__group')
               .querySelector(
-                '.pf-c-description-list__description .pf-c-description-list__text .disabled-text'
+                '.pf-v5-c-description-list__description .pf-v5-c-description-list__text .disabled-text'
               );
           } else {
             descriptionContainer = termContainer
-              .closest('.pf-c-description-list__group')
+              .closest('.pf-v5-c-description-list__group')
               .querySelector(
-                '.pf-c-description-list__description .pf-c-description-list__text'
+                '.pf-v5-c-description-list__description .pf-v5-c-description-list__text'
               );
           }
           expect(descriptionContainer.textContent).toContain(expectedText);

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

@@ -126,6 +126,6 @@ describe('TemplateInvocation', () => {
       />
     );
 
-    expect(document.querySelectorAll('.pf-c-skeleton')).toHaveLength(1);
+    expect(document.querySelectorAll('.pf-v5-c-skeleton')).toHaveLength(1);
   });
 });

data/webpack/JobInvocationDetail/__tests__/fixtures.js

@@ -41,6 +41,7 @@ export const jobInvocationData = {
   task: {
     id: '37ad5ead-51de-4798-bc73-a17687c4d5aa',
     state: 'stopped',
+    started_at: '2024-01-01 12:34:56 +0100',
   },
   template_invocations: [
     {

data/webpack/JobInvocationDetail/index.js

@@ -1,31 +1,33 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   Divider,
   Flex,
   PageSection,
   PageSectionVariants,
 } from '@patternfly/react-core';
-import { translate as __, documentLocale } from 'foremanReact/common/I18n';
-import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
+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 { JobAdditionInfo } from './JobAdditionInfo';
 import { getJobInvocation, getTask } from './JobInvocationActions';
 import {
   CURRENT_PERMISSIONS,
+  currentPermissionsUrl,
   DATE_OPTIONS,
   JOB_INVOCATION_KEY,
   STATUS,
-  currentPermissionsUrl,
 } from './JobInvocationConstants';
-import './JobInvocationDetail.scss';
+import JobInvocationHostTable from './JobInvocationHostTable';
 import JobInvocationOverview from './JobInvocationOverview';
 import { selectItems } from './JobInvocationSelectors';
 import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
 import JobInvocationToolbarButtons from './JobInvocationToolbarButtons';
-import JobInvocationHostTable from './JobInvocationHostTable';
-import { JobAdditionInfo } from './JobAdditionInfo';
+
+import './JobInvocationDetail.scss';
 
 const JobInvocationDetailPage = ({
   match: {
@@ -60,10 +62,9 @@ const JobInvocationDetailPage = ({
   let isAlreadyStarted = false;
   let formattedStartDate;
   if (startAt) {
-    // Ensures date string compatibility across browsers
-    const convertedDate = new Date(startAt.replace(/[-.]/g, '/'));
-    isAlreadyStarted = convertedDate.getTime() <= new Date().getTime();
-    formattedStartDate = convertedDate.toLocaleString(
+    // eslint-disable-next-line camelcase
+    isAlreadyStarted = !!task?.started_at;
+    formattedStartDate = new Date(startAt).toLocaleString(
       documentLocale(),
       DATE_OPTIONS
     );

data/webpack/JobWizard/Footer.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Button, Tooltip, Spinner } from '@patternfly/react-core';
 import {
-  Button,
   WizardFooter,
   WizardContextConsumer,
-  Tooltip,
-  Spinner,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { WIZARD_TITLES } from './JobWizardConstants';
 import { selectIsSubmitting } from './JobWizardSelectors';

data/webpack/JobWizard/JobWizard.js

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Wizard } from '@patternfly/react-core';
+import { Wizard } from '@patternfly/react-core/deprecated';
 import { get } from 'foremanReact/redux/API';
 import history from 'foremanReact/history';
 

data/webpack/JobWizard/JobWizard.scss

@@ -1,21 +1,21 @@
 .job-wizard {
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   .wizard-title {
     margin-bottom: 25px;
   }
 
-  .pf-c-wizard__nav.pf-m-expanded {
+  .pf-v5-c-wizard__nav.pf-m-expanded {
     z-index: calc(
-      var(--pf-c-wizard__toggle--ZIndex) + 2
+      var(--pf-v5-cwizard__toggle--ZIndex) + 2
     ); // So the small screen navigation can be shown above the select box and wizard body
   }
 
-  .pf-c-wizard__main {
+  .pf-v5-c-wizard__main {
     z-index: calc(
-      var(--pf-c-wizard__toggle--ZIndex) + 1
+      var(--pf-v5-cwizard__toggle--ZIndex) + 1
     ); // So the select box can be shown above the wizard footer and navigation toggle
   }
-  .pf-c-wizard__main-body {
+  .pf-v5-c-wizard__main-body {
     @media (max-width: 600px) {
       max-width: 100%;
     }
@@ -34,19 +34,19 @@
   }
 
   .gray-text {
-    color: var(--pf-global--Color--dark-200);
+    color: var(--pf-v5-global--Color--dark-200);
   }
 
   .target-hosts-and-inputs {
-    .pf-c-chip-group.pf-m-category {
+    .pf-v5-c-chip-group.pf-m-category {
       margin-bottom: 10px;
     }
-    .pf-c-select__toggle-typeahead {
+    .pf-v5-c-select__toggle-typeahead {
       border: 0px;
     }
 
     .target-method-select {
-      .pf-c-select__toggle-wrapper {
+      .pf-v5-c-select__toggle-wrapper {
         flex-wrap: nowrap;
       }
     }
@@ -63,8 +63,8 @@
       display: grid;
       grid-template-columns: repeat(7, 1fr);
     }
-    .pf-l-grid {
-      gap: var(--pf-c-form--GridGap);
+    .pf-v5-l-grid {
+      gap: var(--pf-v5-cform--GridGap);
     }
     #repeat-on-hourly {
       max-height: 300px;
@@ -99,14 +99,14 @@
     .clear-datetime-button {
       margin-left: 10px;
       align-self: center;
-      font-size: var(--pf-global--FontSize--md);
+      font-size: var(--pf-v5-global--FontSize--md);
     }
-    .pf-c-form__group-control {
+    .pf-v5-c-form__group-control {
       display: flex;
       flex-wrap: wrap;
     }
   }
-  .pf-c-date-picker {
+  .pf-v5-c-date-picker {
     vertical-align: top;
   }
 
@@ -123,7 +123,7 @@
     min-height: 40px;
     min-width: 100px;
   }
-  .pf-c-modal-box {
+  .pf-v5-c-modal-box {
     width: auto;
   }
 
@@ -132,15 +132,15 @@
       margin-left: 10px;
     }
   }
-  .pf-c-radio__body {
-    font-size: var(--pf-c-radio__label--FontSize);
+  .pf-v5-c-radio__body {
+    font-size: var(--pf-v5-cradio__label--FontSize);
   }
   .reset-default {
     padding-bottom: 0;
   }
 }
 
-.job-wizard-alert.pf-c-alert.pf-m-warning {
+.job-wizard-alert.pf-v5-c-alert.pf-m-warning {
   margin-bottom: 10px;
   margin-top: 10px;
 }

data/webpack/JobWizard/JobWizardPageRerun.js

@@ -7,11 +7,12 @@ import {
   Divider,
   Skeleton,
   Button,
-  Title,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { global_palette_red_200 as exclamationColor } from '@patternfly/react-tokens';
@@ -63,23 +64,28 @@ const JobWizardPageRerun = ({
   const currentLocation = useForemanLocation();
 
   const emptyStateLarge = (
-    <EmptyState variant={EmptyStateVariant.large}>
-      <EmptyStateIcon
-        icon={ExclamationCircleIcon}
-        color={exclamationColor.value}
+    <EmptyState variant={EmptyStateVariant.lg}>
+      <EmptyStateHeader
+        titleText={<>{__('Unable to run job')}</>}
+        icon={
+          <EmptyStateIcon
+            icon={ExclamationCircleIcon}
+            color={exclamationColor.value}
+          />
+        }
+        headingLevel="h4"
       />
-      <Title ouiaId="job-wizard-empty-state-header" headingLevel="h4" size="lg">
-        {__('Unable to run job')}
-      </Title>
       <EmptyStateBody>{sprintf(errorMessage)}</EmptyStateBody>
-      <Button
-        ouiaId="job-wizard-run-job-button"
-        component="a"
-        href="/job_invocations/new"
-        variant="primary"
-      >
-        {__('Create job')}
-      </Button>
+      <EmptyStateFooter>
+        <Button
+          ouiaId="job-wizard-run-job-button"
+          component="a"
+          href="/job_invocations/new"
+          variant="primary"
+        >
+          {__('Create job')}
+        </Button>
+      </EmptyStateFooter>
     </EmptyState>
   );
 

data/webpack/JobWizard/PermissionDenied.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Icon } from 'patternfly-react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from '@patternfly/react-core';
 
 const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => {
@@ -37,17 +38,20 @@ const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => {
       <span className="empty-state-icon">
         <Icon name="lock" type="fa" size="2x" />
       </span>
-      <Title ouiaId="empty-state-header" headingLevel="h5" size="4xl">
-        {__('Permission Denied')}
-      </Title>
+      <EmptyStateHeader
+        titleText={<>{__('Permission Denied')}</>}
+        headingLevel="h5"
+      />
       <EmptyStateBody>{description}</EmptyStateBody>
-      <Button
-        ouiaId="job-invocation-proceed-anyway-button"
-        variant="primary"
-        onClick={handleProceedAnyway}
-      >
-        {__('Proceed Anyway')}
-      </Button>
+      <EmptyStateFooter>
+        <Button
+          ouiaId="job-invocation-proceed-anyway-button"
+          variant="primary"
+          onClick={handleProceedAnyway}
+        >
+          {__('Proceed Anyway')}
+        </Button>
+      </EmptyStateFooter>
     </EmptyState>
   );
 };