foreman_remote_execution 13.0.0 → 13.1.1

data/test/unit/job_invocation_composer_test.rb

@@ -35,6 +35,7 @@ class JobInvocationComposerTest < ActiveSupport::TestCase
   let(:trying_job_template_1) { FactoryBot.create(:job_template, :job_category => 'trying_job_template_1', :name => 'trying1', :provider_type => 'SSH') }
   let(:trying_job_template_2) { FactoryBot.create(:job_template, :job_category => 'trying_job_template_2', :name => 'trying2', :provider_type => 'Mcollective') }
   let(:trying_job_template_3) { FactoryBot.create(:job_template, :job_category => 'trying_job_template_1', :name => 'trying3', :provider_type => 'SSH') }
+  let(:trying_job_template_5) { FactoryBot.create(:job_template, :job_category => 'trying_job_template_5', :name => 'trying5', :provider_type => 'SSH') }
   let(:unauthorized_job_template_1) { FactoryBot.create(:job_template, :job_category => 'trying_job_template_1', :name => 'unauth1', :provider_type => 'SSH') }
   let(:unauthorized_job_template_2) { FactoryBot.create(:job_template, :job_category => 'unauthorized_job_template_2', :name => 'unauth2', :provider_type => 'Ansible') }
 
@@ -44,6 +45,7 @@ class JobInvocationComposerTest < ActiveSupport::TestCase
   let(:input2) { FactoryBot.create(:template_input, :template => trying_job_template_3, :input_type => 'user') }
   let(:input3) { FactoryBot.create(:template_input, :template => trying_job_template_1, :input_type => 'user', :required => true) }
   let(:input4) { FactoryBot.create(:template_input, :template => provider_inputs_job_template, :input_type => 'user') }
+  let(:input5) { FactoryBot.create(:template_input, :template => trying_job_template_5, :input_type => 'user', :default => 'value') }
   let(:unauthorized_input1) { FactoryBot.create(:template_input, :template => unauthorized_job_template_1, :input_type => 'user') }
 
   let(:ansible_params) { { } }
@@ -654,14 +656,40 @@ class JobInvocationComposerTest < ActiveSupport::TestCase
 
     context 'with with inputs' do
       let(:params) do
-        { :job_category => trying_job_template_1.job_category,
-          :job_template_id => trying_job_template_1.id,
+        { :job_category => trying_job_template_5.job_category,
+          :job_template_id => trying_job_template_5.id,
           :targeting_type => 'static_query',
           :search_query => 'some hosts',
-          :inputs => {input1.name => 'some_value'}}
+          :inputs => {input5.name => 'some_value'}}
       end
 
       it 'finds the inputs by name' do
+        assert composer.save!
+        values = composer.pattern_template_invocations.first.input_values
+        assert_equal 1, values.count
+        assert_equal 'some_value', values.first.value
+      end
+
+      it 'can be forced to be empty' do
+        params[:inputs] = {input5.name => ''}
+        assert composer.save!
+        values = composer.pattern_template_invocations.first.input_values
+        assert_equal 1, values.count
+        assert_equal '', values.first.value
+      end
+    end
+
+    context 'with inputs and default values' do
+      let(:params) do
+        { :job_category => trying_job_template_5.job_category,
+          :job_template_id => trying_job_template_5.id,
+          :targeting_type => 'static_query',
+          :search_query => 'some hosts',
+          :inputs => {}}
+      end
+
+      it 'uses the default input values' do
+        input5 # Force the factory to be materialized
         assert composer.save!
         assert_equal 1, composer.pattern_template_invocations.first.input_values.collect.count
       end

data/webpack/JobInvocationDetail/JobInvocationConstants.js

@@ -5,3 +5,13 @@ export const STATUS = {
   SUCCEEDED: 'succeeded',
   FAILED: 'failed',
 };
+
+export const DATE_OPTIONS = {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+  timeZoneName: 'short',
+};

data/webpack/JobInvocationDetail/JobInvocationDetail.scss

@@ -0,0 +1,38 @@
+.job-invocation-detail-page-section {
+  $chart_size: 105px;
+  
+  .chart-donut {
+    height: $chart_size;
+    width: $chart_size;
+    margin-bottom: 10px;
+  }
+
+  .chart-legend {
+    height: $chart_size;
+    min-width: 270px;
+
+    .legend-title {
+      font-weight: bold;
+      font-size: var(--pf-global--FontSize--sm);
+      margin-left: 8px;
+      margin-bottom: 0;
+    }
+
+    .pf-c-description-list {
+      margin-left: 8px;
+      margin-top: 8px;
+
+      .pf-c-description-list__term .pf-c-description-list__text {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .pf-c-divider {
+    max-height: $chart_size;
+  }
+
+  .job-overview {
+    height: $chart_size;
+  }
+}

data/webpack/JobInvocationDetail/JobInvocationOverview.js

@@ -7,12 +7,15 @@ import {
   DescriptionListGroup,
   DescriptionListDescription,
 } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
 import DefaultLoaderEmptyState from 'foremanReact/components/HostDetails/DetailsCard/DefaultLoaderEmptyState';
-import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 
-const JobInvocationOverview = ({ data }) => {
+const JobInvocationOverview = ({
+  data,
+  isAlreadyStarted,
+  formattedStartDate,
+}) => {
   const {
-    start_at: startAt,
     ssh_user: sshUser,
     template_id: templateId,
     template_name: templateName,
@@ -22,27 +25,6 @@ const JobInvocationOverview = ({ data }) => {
   const canEditJobTemplates = permissions
     ? permissions.edit_job_templates
     : false;
-  const dateOptions = {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-    timeZoneName: 'short',
-  };
-  let formattedStartDate = __('Not yet');
-
-  if (startAt) {
-    // Ensures date string compatibility across browsers
-    const convertedDate = new Date(startAt.replace(/[-.]/g, '/'));
-    if (convertedDate.getTime() <= new Date().getTime()) {
-      formattedStartDate = convertedDate.toLocaleString(
-        documentLocale(),
-        dateOptions
-      );
-    }
-  }
 
   return (
     <DescriptionList
@@ -63,7 +45,7 @@ const JobInvocationOverview = ({ data }) => {
       <DescriptionListGroup>
         <DescriptionListTerm>{__('Started at:')}</DescriptionListTerm>
         <DescriptionListDescription>
-          {formattedStartDate}
+          {isAlreadyStarted ? formattedStartDate : __('Not yet')}
         </DescriptionListDescription>
       </DescriptionListGroup>
       <DescriptionListGroup>
@@ -99,6 +81,12 @@ const JobInvocationOverview = ({ data }) => {
 
 JobInvocationOverview.propTypes = {
   data: PropTypes.object.isRequired,
+  isAlreadyStarted: PropTypes.bool.isRequired,
+  formattedStartDate: PropTypes.string,
+};
+
+JobInvocationOverview.defaultProps = {
+  formattedStartDate: undefined,
 };
 
 export default JobInvocationOverview;

data/webpack/JobInvocationDetail/JobInvocationSystemStatusChart.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import {
+  ChartDonut,
+  ChartLabel,
+  ChartLegend,
+  ChartTooltip,
+} from '@patternfly/react-charts';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  FlexItem,
+  Text,
+} from '@patternfly/react-core';
+import {
+  global_palette_green_500 as successedColor,
+  global_palette_red_100 as failedColor,
+  global_palette_blue_300 as inProgressColor,
+  global_palette_black_600 as canceledColor,
+  global_palette_black_500 as emptyChartDonut,
+} from '@patternfly/react-tokens';
+import DefaultLoaderEmptyState from 'foremanReact/components/HostDetails/DetailsCard/DefaultLoaderEmptyState';
+import './JobInvocationDetail.scss';
+
+const JobInvocationSystemStatusChart = ({
+  data,
+  isAlreadyStarted,
+  formattedStartDate,
+}) => {
+  const {
+    succeeded,
+    failed,
+    pending,
+    cancelled,
+    total,
+    total_hosts: totalHosts, // includes scheduled
+  } = data;
+  const chartData = [
+    { 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 },
+  ];
+  const chartDonutTitle = () => {
+    if (total > 0) return `${succeeded.toString()}/${total}`;
+    if (totalHosts > 0) return `0/${totalHosts}`;
+    return '0';
+  };
+  const chartSize = 105;
+  const [legendWidth, setLegendWidth] = useState(270);
+
+  // Calculates chart legend width based on its content
+  useEffect(() => {
+    const legendContainer = document.querySelector('.chart-legend');
+    if (legendContainer) {
+      const rectElement = legendContainer.querySelector('rect');
+      if (rectElement) {
+        const rectWidth = parseFloat(rectElement.getAttribute('width'));
+        setLegendWidth(rectWidth);
+      }
+    }
+  }, [isAlreadyStarted, data]);
+
+  return (
+    <>
+      <FlexItem className="chart-donut">
+        <ChartDonut
+          allowTooltip
+          constrainToVisibleArea
+          data={
+            total > 0
+              ? chartData.map(d => ({
+                  label: sprintf(__(`${d.title} ${d.count} hosts`)),
+                  y: d.count,
+                }))
+              : [{ label: sprintf(__(`Scheduled: ${totalHosts} hosts`)), y: 1 }]
+          }
+          colorScale={
+            total > 0 ? chartData.map(d => d.color) : [emptyChartDonut.value]
+          }
+          labelComponent={
+            <ChartTooltip pointerLength={0} constrainToVisibleArea />
+          }
+          title={chartDonutTitle}
+          titleComponent={
+            // inline style overrides PatternFly default styling
+            <ChartLabel style={{ fontSize: '20px' }} />
+          }
+          subTitle={__('Systems')}
+          subTitleComponent={
+            // inline style overrides PatternFly default styling
+            <ChartLabel
+              style={{ fontSize: '12px', fill: canceledColor.value }}
+            />
+          }
+          padding={{
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+          }}
+          width={chartSize}
+          height={chartSize}
+        />
+      </FlexItem>
+      <FlexItem className="chart-legend">
+        <Text ouiaId="legend-title" className="legend-title">
+          {__('System status')}
+        </Text>
+        {isAlreadyStarted ? (
+          <ChartLegend
+            orientation="vertical"
+            itemsPerRow={2}
+            gutter={25}
+            rowGutter={7}
+            padding={{ left: 15 }}
+            data={chartData.map(d => ({
+              name: `${d.title} ${d.count}`,
+              symbol: { type: 'circle' },
+            }))}
+            colorScale={chartData.map(d => d.color)}
+            width={legendWidth}
+            height={chartSize}
+          />
+        ) : (
+          <DescriptionList>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{__('Scheduled at:')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {formattedStartDate || <DefaultLoaderEmptyState />}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        )}
+      </FlexItem>
+    </>
+  );
+};
+
+JobInvocationSystemStatusChart.propTypes = {
+  data: PropTypes.object.isRequired,
+  isAlreadyStarted: PropTypes.bool.isRequired,
+  formattedStartDate: PropTypes.string,
+};
+
+JobInvocationSystemStatusChart.defaultProps = {
+  formattedStartDate: undefined,
+};
+
+export default JobInvocationSystemStatusChart;

data/webpack/JobInvocationDetail/index.js

@@ -1,14 +1,20 @@
 import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Divider, PageSection, Flex, FlexItem } from '@patternfly/react-core';
-import { translate as __ } from 'foremanReact/common/I18n';
+import { Divider, PageSection, Flex } from '@patternfly/react-core';
+import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
 import { getData } from './JobInvocationActions';
 import { selectItems } from './JobInvocationSelectors';
 import JobInvocationOverview from './JobInvocationOverview';
-import { JOB_INVOCATION_KEY, STATUS } from './JobInvocationConstants';
+import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
+import {
+  JOB_INVOCATION_KEY,
+  STATUS,
+  DATE_OPTIONS,
+} from './JobInvocationConstants';
+import './JobInvocationDetail.scss';
 
 const JobInvocationDetailPage = ({
   match: {
@@ -17,11 +23,28 @@ const JobInvocationDetailPage = ({
 }) => {
   const dispatch = useDispatch();
   const items = useSelector(selectItems);
-  const { description, status_label: statusLabel, task } = items;
+  const {
+    description,
+    status_label: statusLabel,
+    task,
+    start_at: startAt,
+  } = items;
   const finished =
     statusLabel === STATUS.FAILED || statusLabel === STATUS.SUCCEEDED;
   const autoRefresh = task?.state === STATUS.PENDING || false;
 
+  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(
+      documentLocale(),
+      DATE_OPTIONS
+    );
+  }
+
   useEffect(() => {
     dispatch(getData(`/api/job_invocations/${id}`));
     if (finished && !autoRefresh) {
@@ -48,17 +71,32 @@ const JobInvocationDetailPage = ({
       searchable={false}
     >
       <React.Fragment>
-        <PageSection isFilled variant="light">
-          <Flex>
-            <FlexItem> </FlexItem>
+        <PageSection
+          className="job-invocation-detail-page-section"
+          isFilled
+          variant="light"
+        >
+          <Flex alignItems={{ default: 'alignItemsFlexStart' }}>
+            <JobInvocationSystemStatusChart
+              data={items}
+              isAlreadyStarted={isAlreadyStarted}
+              formattedStartDate={formattedStartDate}
+            />
             <Divider
               orientation={{
                 default: 'vertical',
               }}
             />
-            <FlexItem>
-              <JobInvocationOverview data={items} />
-            </FlexItem>
+            <Flex
+              className="job-overview"
+              alignItems={{ default: 'alignItemsCenter' }}
+            >
+              <JobInvocationOverview
+                data={items}
+                isAlreadyStarted={isAlreadyStarted}
+                formattedStartDate={formattedStartDate}
+              />
+            </Flex>
           </Flex>
         </PageSection>
       </React.Fragment>

data/webpack/JobWizard/Footer.js

@@ -26,6 +26,7 @@ export const Footer = ({ canSubmit, onSave }) => {
           return (
             <>
               <Button
+                ouiaId="next-footer"
                 variant="primary"
                 type="submit"
                 onClick={onNext}
@@ -36,6 +37,7 @@ export const Footer = ({ canSubmit, onSave }) => {
                   : __('Next')}
               </Button>
               <Button
+                ouiaId="back-footer"
                 variant="secondary"
                 onClick={onBack}
                 isDisabled={
@@ -54,6 +56,7 @@ export const Footer = ({ canSubmit, onSave }) => {
                 }
               >
                 <Button
+                  ouiaId="run-on-selected-hosts-footer"
                   variant="tertiary"
                   onClick={onSave}
                   isAriaDisabled={!canSubmit}
@@ -74,6 +77,7 @@ export const Footer = ({ canSubmit, onSave }) => {
                 }
               >
                 <Button
+                  ouiaId="skip-to-review-footer"
                   variant="tertiary"
                   onClick={() => goToStepByName(WIZARD_TITLES.review)}
                   isAriaDisabled={!canSubmit}
@@ -82,7 +86,7 @@ export const Footer = ({ canSubmit, onSave }) => {
                   {__('Skip to review')}
                 </Button>
               </Tooltip>
-              <Button variant="link" onClick={onClose}>
+              <Button ouiaId="cancel-footer" variant="link" onClick={onClose}>
                 {__('Cancel')}
               </Button>
               {isSubmitting && (

data/webpack/JobWizard/JobWizardPageRerun.js

@@ -48,11 +48,12 @@ const JobWizardPageRerun = ({
       searchable={false}
       toolbarButtons={
         <Button
+          ouiaId="job-wizard-rerun-old-form-button"
           variant="link"
           component="a"
           href={`/old/job_invocations/${id}/rerun${search}`}
         >
-          {__('Use old form')}
+          {__('Use legacy form')}
         </Button>
       }
     >
@@ -71,6 +72,7 @@ const JobWizardPageRerun = ({
           <React.Fragment>
             {jobOrganization?.id !== currentOrganization?.id && (
               <Alert
+                ouiaId="job-wizard-alert-organization"
                 isInline
                 className="job-wizard-alert"
                 variant="warning"
@@ -85,6 +87,7 @@ const JobWizardPageRerun = ({
             )}
             {jobLocation?.id !== currentLocation?.id && (
               <Alert
+                ouiaId="job-wizard-alert-location"
                 isInline
                 className="job-wizard-alert"
                 variant="warning"

data/webpack/JobWizard/StartsBeforeErrorAlert.js

@@ -5,6 +5,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 export const StartsBeforeErrorAlert = () => (
   <>
     <Alert
+      ouiaId="starts-before-error-alert"
       variant="danger"
       title={__("'Starts before' date must in the future")}
     >

data/webpack/JobWizard/index.js

@@ -59,6 +59,7 @@ const JobWizardPage = ({ location: { search } }) => {
       searchable={false}
       toolbarButtons={
         <Button
+          ouiaId="legacy-form"
           variant="link"
           component="a"
           href={`/old/job_invocations/new${search}`}

data/webpack/JobWizard/steps/AdvancedFields/DescriptionField.js

@@ -56,7 +56,12 @@ export const DescriptionField = ({
       }
       fieldId="description"
       helperText={
-        <Button variant="link" isInline onClick={togglePreview}>
+        <Button
+          ouiaId="description-preview-button"
+          variant="link"
+          isInline
+          onClick={togglePreview}
+        >
           {isPreview
             ? __('Edit job description template')
             : __('Preview job description')}
@@ -68,6 +73,7 @@ export const DescriptionField = ({
           <div>
             {/* div wrapper so the tooltip will be shown in chrome */}
             <TextInput
+              ouiaId="description-preview"
               aria-label="description preview"
               id="description-preview"
               value={generatedDesc}
@@ -77,6 +83,7 @@ export const DescriptionField = ({
         </Tooltip>
       ) : (
         <TextInput
+          ouiaId="description-edit"
           aria-label="description edit"
           type="text"
           autoComplete="description"

data/webpack/JobWizard/steps/AdvancedFields/Fields.js

@@ -19,6 +19,7 @@ export const EffectiveUserField = ({ value, setValue, defaultValue }) => (
     labelInfo={<ResetDefault setValue={setValue} defaultValue={defaultValue} />}
   >
     <TextInput
+      ouiaId="effective-user"
       aria-label="effective user"
       autoComplete="effective-user"
       id="effective-user"
@@ -86,6 +87,7 @@ export const PasswordField = ({ value, setValue }) => (
     fieldId="job-password"
   >
     <TextInput
+      ouiaId="job-password"
       aria-label="job password"
       autoComplete="new-password" // to prevent firefox from autofilling the user password
       id="job-password"
@@ -109,6 +111,7 @@ export const KeyPassphraseField = ({ value, setValue }) => (
     fieldId="key-passphrase"
   >
     <TextInput
+      ouiaId="key-passphrase"
       aria-label="key passphrase"
       autoComplete="key-passphrase"
       id="key-passphrase"
@@ -132,6 +135,7 @@ export const EffectiveUserPasswordField = ({ value, setValue }) => (
     fieldId="effective-user-password"
   >
     <TextInput
+      ouiaId="effective-user-password"
       aria-label="effective userpassword"
       autoComplete="effective-user-password"
       id="effective-user-password"
@@ -186,6 +190,7 @@ export const ExecutionOrderingField = ({ isRandomizedOrdering, setValue }) => (
     isInline
   >
     <Radio
+      ouiaId="execution-order-alphabetical"
       aria-label="execution order alphabetical"
       isChecked={!isRandomizedOrdering}
       name="execution-order"
@@ -194,6 +199,7 @@ export const ExecutionOrderingField = ({ isRandomizedOrdering, setValue }) => (
       label={__('Alphabetical')}
     />
     <Radio
+      ouiaId="execution-order-randomized"
       aria-label="execution order randomized"
       isChecked={isRandomizedOrdering}
       name="execution-order"
@@ -216,6 +222,7 @@ export const SSHUserField = ({ value, setValue, defaultValue }) => (
     labelInfo={<ResetDefault setValue={setValue} defaultValue={defaultValue} />}
   >
     <TextInput
+      ouiaId="ssh-user"
       aria-label="ssh user"
       autoComplete="ssh-user"
       id="ssh-user"

data/webpack/JobWizard/steps/CategoryAndTemplate/CategoryAndTemplate.js

@@ -71,7 +71,12 @@ export const CategoryAndTemplate = ({
   return (
     <>
       <WizardTitle title={WIZARD_TITLES.categoryAndTemplate} />
-      <Text component={TextVariants.p}>{__('All fields are required.')}</Text>
+      <Text
+        ouiaId="category-and-template-required-fields"
+        component={TextVariants.p}
+      >
+        {__('All fields are required.')}
+      </Text>
       <Form>
         <SelectField
           label={__('Job category')}
@@ -95,7 +100,11 @@ export const CategoryAndTemplate = ({
           placeholderText={allTemplatesError ? __('Not available') : ''}
         />
         {!isEmpty(missingPermissions) && (
-          <Alert variant="warning" title={__('Access denied')}>
+          <Alert
+            ouiaId="category-and-template-access-denied"
+            variant="warning"
+            title={__('Access denied')}
+          >
             <span>
               {__(
                 `Missing the required permissions: ${missingPermissions.join(
@@ -106,7 +115,11 @@ export const CategoryAndTemplate = ({
           </Alert>
         )}
         {isError && (
-          <Alert variant="danger" title={__('Errors:')}>
+          <Alert
+            variant="danger"
+            title={__('Errors:')}
+            ouiaId="category-and-template-errors"
+          >
             {categoryError && isEmpty(missingPermissions) && (
               <span>
                 {__('Categories list failed with:')} {categoryError}