foreman_remote_execution 4.6.0 → 5.0.1

data/webpack/JobWizard/steps/form/SelectField.js

@@ -8,6 +8,8 @@ export const SelectField = ({
   options,
   value,
   setValue,
+  labelIcon,
+  isRequired,
   ...props
 }) => {
   const onSelect = (event, selection) => {
@@ -15,8 +17,23 @@ export const SelectField = ({
     setIsOpen(false);
   };
   const [isOpen, setIsOpen] = useState(false);
+  const selectOptions = [
+    !isRequired && (
+      <SelectOption key={0} value="">
+        <p> </p>
+      </SelectOption>
+    ),
+    ...options.map((option, index) => (
+      <SelectOption key={index + 1} value={option} />
+    )),
+  ];
   return (
-    <FormGroup label={label} fieldId={fieldId}>
+    <FormGroup
+      label={label}
+      fieldId={fieldId}
+      labelIcon={labelIcon}
+      isRequired={isRequired}
+    >
       <Select
         selections={value}
         onSelect={onSelect}
@@ -25,24 +42,30 @@ export const SelectField = ({
         className="without_select2"
         maxHeight="45vh"
         menuAppendTo={() => document.body}
+        placeholderText=" " // To prevent showing first option as selected
+        aria-labelledby={fieldId}
+        toggleAriaLabel={`${label} toggle`}
         {...props}
       >
-        {options.map((option, index) => (
-          <SelectOption key={index} value={option} />
-        ))}
+        {selectOptions.filter(option => option)}
       </Select>
     </FormGroup>
   );
 };
 SelectField.propTypes = {
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
   fieldId: PropTypes.string.isRequired,
   options: PropTypes.array,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   setValue: PropTypes.func.isRequired,
+  labelIcon: PropTypes.node,
+  isRequired: PropTypes.bool,
 };
 
 SelectField.defaultProps = {
+  label: null,
   options: [],
+  labelIcon: null,
   value: null,
+  isRequired: false,
 };

data/webpack/JobWizard/steps/form/WizardTitle.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Title } from '@patternfly/react-core';
+
+export const WizardTitle = ({ title, ...props }) => (
+  <Title headingLevel="h2" className="wizard-title" {...props}>
+    {title}
+  </Title>
+);
+
+WizardTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+export default WizardTitle;

data/webpack/JobWizard/steps/form/__tests__/SelectSearch.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { SearchSelect } from '../SearchSelect';
+
+const apiKey = 'HOSTS_KEY';
+
+describe('SearchSelect', () => {
+  it('too many', () => {
+    const onSearch = jest.fn();
+    render(
+      <SearchSelect
+        selected={['hosts1,host2']}
+        setSelected={jest.fn()}
+        apiKey={apiKey}
+        url="/hosts"
+        placeholderText="Test hosts"
+        useNameSearch={() => [
+          onSearch,
+          { results: ['host1', 'host2', 'host3'], subtotal: 101 },
+          false,
+        ]}
+      />
+    );
+    const openSelectbutton = screen.getByRole('button', {
+      name: 'typeahead select toggle',
+    });
+    fireEvent.click(openSelectbutton);
+    const tooMany = screen.queryAllByText(
+      'You have %s results to display. Showing first %s results + 101 + 100'
+    );
+    expect(tooMany).toHaveLength(1);
+  });
+});

data/webpack/JobWizard/submit.js

@@ -0,0 +1,120 @@
+import { post } from 'foremanReact/redux/API';
+import { repeatTypes, JOB_INVOCATION } from './JobWizardConstants';
+import { buildHostQuery } from './steps/HostsAndInputs/buildHostQuery';
+
+export const submit = ({
+  jobTemplateID,
+  templateValues,
+  advancedValues,
+  scheduleValue,
+  selectedTargets,
+  hostsSearchQuery,
+  location,
+  organization,
+  dispatch,
+}) => {
+  const {
+    repeatAmount,
+    repeatType,
+    repeatData,
+    startsAt,
+    startsBefore,
+    ends,
+    purpose,
+  } = scheduleValue;
+  const {
+    effectiveUserValue,
+    effectiveUserPassword,
+    description,
+    timeoutToKill,
+    isRandomizedOrdering,
+    timeSpan,
+    concurrencyLevel,
+    templateValues: advancedTemplateValues,
+    password,
+    keyPassphrase,
+  } = advancedValues;
+  const getCronLine = () => {
+    const [hour, minute] = repeatData.at
+      ? repeatData.at.split(':')
+      : [null, null];
+    switch (repeatType) {
+      case repeatTypes.cronline:
+        return repeatData.cronline;
+      case repeatTypes.monthly:
+        return `${minute} ${hour} ${repeatData.days} * *`;
+      case repeatTypes.weekly:
+        return `${minute} ${hour} * * ${repeatData.daysOfWeek}`;
+      case repeatTypes.daily:
+        return `${minute} ${hour} * * *`;
+      case repeatTypes.hourly:
+        return `${repeatData.minute} * * * *`;
+      case repeatTypes.noRepeat:
+      default:
+        return null;
+    }
+  };
+  const api = {
+    location,
+    organization,
+    job_invocation: {
+      job_template_id: jobTemplateID,
+      targeting_type: scheduleValue?.isTypeStatic
+        ? 'static_query'
+        : 'dynamic_query',
+      randomized_ordering: isRandomizedOrdering,
+      inputs: { ...templateValues, ...advancedTemplateValues },
+      ssh: {
+        effective_user: effectiveUserValue,
+        effective_user_password: effectiveUserPassword,
+      },
+      password,
+      key_passphrase: keyPassphrase,
+      recurrence:
+        repeatType !== repeatTypes.noRepeat
+          ? {
+              cron_line: getCronLine(),
+              max_iteration: repeatAmount,
+              end_time: ends.length ? new Date(ends).toISOString() : null,
+              purpose,
+            }
+          : null,
+      scheduling:
+        startsAt?.length || startsBefore?.length
+          ? {
+              start_at: startsAt?.length
+                ? new Date(startsAt).toISOString()
+                : null,
+              start_before: startsBefore?.length
+                ? new Date(startsBefore).toISOString()
+                : null,
+            }
+          : null,
+      concurrency_control: {
+        time_span: timeSpan,
+        concurrency_level: concurrencyLevel,
+      },
+      bookmark_id: null,
+      search_query:
+        buildHostQuery(selectedTargets, hostsSearchQuery) || 'name ~ *',
+      description_format: description,
+      execution_timeout_interval: timeoutToKill,
+      feature: '', // TODO add value after https://github.com/theforeman/foreman_remote_execution/pull/629
+    },
+  };
+
+  dispatch(
+    post({
+      key: JOB_INVOCATION,
+      url: '/api/job_invocations',
+      params: api,
+      handleSuccess: ({ data: { id } }) => {
+        window.location.href = `/job_invocations/${id}`;
+      },
+      errorToast: ({ response }) =>
+        response?.date?.error?.message ||
+        response?.message ||
+        response?.statusText,
+    })
+  );
+};

data/webpack/JobWizard/validation.js

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  selectTemplateInputs,
+  selectAdvancedTemplateInputs,
+} from './JobWizardSelectors';
+import { isPositiveNumber, isValidDate } from './steps/form/FormHelpers';
+import './JobWizard.scss';
+
+export const useValidation = ({ advancedValues, templateValues }) => {
+  const [valid, setValid] = useState({});
+  const templateInputs = useSelector(selectTemplateInputs);
+  const advancedTemplateInputs = useSelector(selectAdvancedTemplateInputs);
+  useEffect(() => {
+    setValid({
+      hostsAndInputs: true,
+      advanced: true,
+      schedule: true,
+    });
+    const inputValidation = (inputs, values, setInvalid) => {
+      inputs.forEach(({ name, required, value_type: valueType }) => {
+        const value = values[name];
+        if (required && !value) {
+          setInvalid();
+        }
+        if (value && valueType === 'date') {
+          if (!isValidDate(value) && !isValidDate(new Date(value))) {
+            setInvalid();
+          }
+        }
+      });
+    };
+    inputValidation(templateInputs, templateValues, () =>
+      setValid(currValid => ({ ...currValid, hostsAndInputs: false }))
+    );
+
+    inputValidation(advancedTemplateInputs, advancedValues.templateValues, () =>
+      setValid(currValid => ({ ...currValid, advanced: false }))
+    );
+    [
+      advancedValues.timeoutToKill,
+      advancedValues.concurrencyLevel,
+      advancedValues.timeSpan,
+    ].forEach(value => {
+      if (value && !isPositiveNumber(value)) {
+        setValid(currValid => ({ ...currValid, advanced: false }));
+      }
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [advancedValues, templateValues]);
+  return [valid, setValid];
+};

data/webpack/__mocks__/foremanReact/Root/Context/ForemanContext/index.js

@@ -0,0 +1,2 @@
+export const useForemanOrganization = () => ({ id: 1 });
+export const useForemanLocation = () => ({ id: 2 });

data/webpack/__mocks__/foremanReact/common/I18n.js

@@ -1 +1,3 @@
+export const sprintf = (string, ...args) => [string, ...args].join(' + ');
 export const translate = s => s;
+export const documentLocale = () => 'en';

data/webpack/__mocks__/foremanReact/components/AutoComplete/AutoCompleteActions.js

@@ -0,0 +1 @@
+export const resetData = payload => ({ type: 'REST_DATA', payload });

data/webpack/__mocks__/foremanReact/components/AutoComplete/AutoCompleteConstants.js

@@ -0,0 +1 @@
+export const TRIGGERS = { INPUT_CHANGE: 'INPUT_CHANGE' };

data/webpack/__mocks__/foremanReact/components/SearchBar.js

@@ -1,2 +1,19 @@
-const SearchBar = () => jest.fn();
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SearchBar = ({ onChange }) => (
+  <input
+    className="foreman-search"
+    onChange={onChange}
+    placeholder="Filter..."
+  />
+);
 export default SearchBar;
+
+SearchBar.propTypes = {
+  onChange: PropTypes.func,
+};
+
+SearchBar.defaultProps = {
+  onChange: () => null,
+};

data/webpack/__mocks__/foremanReact/routes/RouterSelector.js

@@ -0,0 +1 @@
+export const selectRouterLocation = jest.fn(() => ({}));

data/webpack/helpers.js

@@ -0,0 +1 @@
+export const noop = Function.prototype;

data/webpack/react_app/components/RecentJobsCard/JobStatusIcon.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  QuestionCircleIcon,
+} from '@patternfly/react-icons';
+import { JOB_SUCCESS_STATUS, JOB_ERROR_STATUS } from './constants';
+import './styles.scss';
+
+const JobStatusIcon = ({ status, children, ...props }) => {
+  switch (status) {
+    case JOB_SUCCESS_STATUS:
+      return (
+        <span className="job-success">
+          <CheckCircleIcon {...props} /> {children}
+        </span>
+      );
+    case JOB_ERROR_STATUS:
+      return (
+        <span className="job-error">
+          <ExclamationCircleIcon {...props} /> {children}
+        </span>
+      );
+    default:
+      return (
+        <span className="job-info">
+          <QuestionCircleIcon {...props} /> {children}
+        </span>
+      );
+  }
+};
+
+JobStatusIcon.propTypes = {
+  status: PropTypes.number,
+  children: PropTypes.string.isRequired,
+};
+
+JobStatusIcon.defaultProps = {
+  status: undefined,
+};
+
+export default JobStatusIcon;

data/webpack/react_app/components/RecentJobsCard/RecentJobsCard.js

@@ -1,76 +1,78 @@
-/* eslint-disable camelcase */
-
 import PropTypes from 'prop-types';
-import React from 'react';
-import Skeleton from 'react-loading-skeleton';
-import ElipsisWithTooltip from 'react-ellipsis-with-tooltip';
-
-import { Grid, GridItem } from '@patternfly/react-core';
-import {
-  PropertiesSidePanel,
-  PropertyItem,
-} from '@patternfly/react-catalog-view-extension';
-import { ArrowIcon, ErrorCircleOIcon, OkIcon } from '@patternfly/react-icons';
+import React, { useState } from 'react';
 
-import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
-import CardItem from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
-import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+import { DropdownItem, Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
 import { translate as __ } from 'foremanReact/common/I18n';
-import './styles.css';
+import { foremanUrl } from 'foremanReact/common/helpers';
 
-const RecentJobsCard = ({ hostDetails: { name } }) => {
-  const jobsUrl =
-    name && `/api/job_invocations?search=host%3D${name}&per_page=3`;
-  const {
-    response: { results: jobs },
-  } = useAPI('get', jobsUrl);
+import {
+  FINISHED_TAB,
+  RUNNING_TAB,
+  SCHEDULED_TAB,
+  JOB_BASE_URL,
+} from './constants';
+import RecentJobsTable from './RecentJobsTable';
 
-  const iconMarkup = status => {
-    if (status === 1) return <ErrorCircleOIcon color="#C9190B" />;
-    return <OkIcon color="#3E8635" />;
-  };
+const RecentJobsCard = ({ hostDetails: { name, id } }) => {
+  const [activeTab, setActiveTab] = useState(FINISHED_TAB);
+
+  const handleTabClick = (evt, tabIndex) => setActiveTab(tabIndex);
 
   return (
-    <CardItem
-      header={
-        <span>
-          {__('Recent Jobs')}{' '}
-          <a href={`/job_invocations?search=host+%3D+${name}`}>
-            <ArrowIcon />
-          </a>
-        </span>
-      }
+    <CardTemplate
+      overrideGridProps={{ xl2: 6, xl: 8, lg: 8, md: 12 }}
+      header={__('Recent jobs')}
+      dropdownItems={[
+        <DropdownItem
+          href={foremanUrl(`${JOB_BASE_URL}${name}`)}
+          key="link-to-all"
+        >
+          {__('View All Jobs')}
+        </DropdownItem>,
+        <DropdownItem
+          href={foremanUrl(
+            `${JOB_BASE_URL}${name}+and+status+%3D+failed+or+status%3D+succeeded`
+          )}
+          key="link-to-finished"
+        >
+          {__('View Finished Jobs')}
+        </DropdownItem>,
+        <DropdownItem
+          href={foremanUrl(`${JOB_BASE_URL}${name}+and+status+%3D+running`)}
+          key="link-to-running"
+        >
+          {__('View Running Jobs')}
+        </DropdownItem>,
+        <DropdownItem
+          href={foremanUrl(`${JOB_BASE_URL}${name}+and+status+%3D+queued`)}
+          key="link-to-scheduled"
+        >
+          {__('View Scheduled Jobs')}
+        </DropdownItem>,
+      ]}
     >
-      <PropertiesSidePanel>
-        {jobs?.map(({ status, status_label, id, start_at, description }) => (
-          <PropertyItem
-            key={id}
-            label={
-              description ? (
-                <Grid>
-                  <GridItem span={8}>
-                    <ElipsisWithTooltip>{description}</ElipsisWithTooltip>
-                  </GridItem>
-                  <GridItem span={1}>{iconMarkup(status)}</GridItem>
-                  <GridItem span={3}>{status_label}</GridItem>
-                </Grid>
-              ) : (
-                <Skeleton />
-              )
-            }
-            value={
-              start_at ? (
-                <a href={`/job_invocations/${id}`}>
-                  <RelativeDateTime date={start_at} />
-                </a>
-              ) : (
-                <Skeleton />
-              )
-            }
-          />
-        ))}
-      </PropertiesSidePanel>
-    </CardItem>
+      <Tabs mountOnEnter activeKey={activeTab} onSelect={handleTabClick}>
+        <Tab
+          eventKey={FINISHED_TAB}
+          title={<TabTitleText>{__('Finished')}</TabTitleText>}
+        >
+          <RecentJobsTable hostId={id} status="failed+or+status%3D+succeeded" />
+        </Tab>
+        <Tab
+          eventKey={RUNNING_TAB}
+          title={<TabTitleText>{__('Running')}</TabTitleText>}
+        >
+          <RecentJobsTable hostId={id} status="running" />
+        </Tab>
+        <Tab
+          eventKey={SCHEDULED_TAB}
+          title={<TabTitleText>{__('Scheduled')}</TabTitleText>}
+        >
+          <RecentJobsTable hostId={id} status="queued" />
+        </Tab>
+      </Tabs>
+    </CardTemplate>
   );
 };
 
@@ -79,5 +81,10 @@ export default RecentJobsCard;
 RecentJobsCard.propTypes = {
   hostDetails: PropTypes.shape({
     name: PropTypes.string,
-  }).isRequired,
+    id: PropTypes.number,
+  }),
+};
+
+RecentJobsCard.defaultProps = {
+  hostDetails: {},
 };

data/webpack/react_app/components/RecentJobsCard/RecentJobsTable.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+  DataListWrapModifier,
+  Text,
+  Bullseye,
+} from '@patternfly/react-core';
+import { STATUS } from 'foremanReact/constants';
+
+import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+
+import JobStatusIcon from './JobStatusIcon';
+import { JOB_API_URL, JOBS_IN_CARD } from './constants';
+
+const RecentJobsTable = ({ status, hostId }) => {
+  const jobsUrl =
+    hostId &&
+    foremanUrl(
+      `${JOB_API_URL}${hostId}+and+status%3D${status}&per_page=${JOBS_IN_CARD}`
+    );
+  const {
+    response: { results: jobs },
+    status: responseStatus,
+  } = useAPI('get', jobsUrl);
+
+  return (
+    <DataList aria-label="recent-jobs-table" isCompact>
+      <SkeletonLoader
+        skeletonProps={{ count: 3 }}
+        status={responseStatus || STATUS.PENDING}
+        emptyState={
+          <Bullseye>
+            <Text style={{ marginTop: '20px' }} component="p">
+              {__('No results found')}
+            </Text>
+          </Bullseye>
+        }
+      >
+        {jobs?.length &&
+          jobs.map(
+            ({
+              status: jobStatus,
+              status_label: label,
+              id,
+              start_at: startAt,
+              description,
+            }) => (
+              <DataListItem key={id}>
+                <DataListItemRow>
+                  <DataListItemCells
+                    dataListCells={[
+                      <DataListCell
+                        wrapModifier={DataListWrapModifier.truncate}
+                        key={`name-${id}`}
+                      >
+                        <a href={foremanUrl(`/job_invocations/${id}`)}>
+                          {description}
+                        </a>
+                      </DataListCell>,
+                      <DataListCell key={`date-${id}`}>
+                        <RelativeDateTime date={startAt} />
+                      </DataListCell>,
+                      <DataListCell key={`status-${id}`}>
+                        <JobStatusIcon status={jobStatus}>
+                          {label}
+                        </JobStatusIcon>
+                      </DataListCell>,
+                    ]}
+                  />
+                </DataListItemRow>
+              </DataListItem>
+            )
+          )}
+      </SkeletonLoader>
+    </DataList>
+  );
+};
+
+RecentJobsTable.propTypes = {
+  hostId: PropTypes.number,
+  status: PropTypes.string,
+};
+
+RecentJobsTable.defaultProps = {
+  hostId: undefined,
+  status: STATUS.PENDING,
+};
+
+export default RecentJobsTable;

data/webpack/react_app/components/RecentJobsCard/constants.js

@@ -1 +1,12 @@
 export const HOST_DETAILS_JOBS = 'HOST_DETAILS_JOBS';
+export const FINISHED_TAB = 0;
+export const RUNNING_TAB = 1;
+export const SCHEDULED_TAB = 2;
+
+export const JOB_SUCCESS_STATUS = 0;
+export const JOB_ERROR_STATUS = 1;
+
+export const JOB_BASE_URL = '/job_invocations?search=host+%3D+';
+export const JOB_API_URL =
+  '/api/job_invocations?order=start_at+DESC&search=targeted_host_id%3D';
+export const JOBS_IN_CARD = 3;

data/webpack/react_app/components/RecentJobsCard/styles.scss

@@ -0,0 +1,11 @@
+.job-success {
+  color: var(--pf-global--success-color--100);
+}
+
+.job-error {
+  color: var(--pf-global--danger-color--100);
+}
+
+.job-info {
+  color: var(--pf-global--info-color--200);
+}

data/webpack/react_app/components/TargetingHosts/__tests__/__snapshots__/TargetingHostsPage.test.js.snap

@@ -27,6 +27,7 @@ exports[`TargetingHostsPage renders 1`] = `
             "controller": "hosts",
           }
         }
+        onChange={[Function]}
         onSearch={[Function]}
       />
     </Col>

data/webpack/react_app/extend/fillRecentJobsCard.js

@@ -6,6 +6,6 @@ export default () =>
   addGlobalFill(
     'details-cards',
     'rex-host-details-latest-jobs',
-    <RecentJobsCard />,
+    <RecentJobsCard key="rex-host-details-latest-jobs" />,
     1000
   );