foreman_remote_execution 4.2.1 → 4.4.0

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

@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import URI from 'urijs';
+import { get } from 'foremanReact/redux/API';
+import {
+  selectJobCategories,
+  selectJobTemplates,
+  selectJobCategoriesStatus,
+  filterJobTemplates,
+} from '../../JobWizardSelectors';
+import { CategoryAndTemplate } from './CategoryAndTemplate';
+
+import {
+  JOB_TEMPLATES,
+  JOB_CATEGORIES,
+  templatesUrl,
+} from '../../JobWizardConstants';
+
+const ConnectedCategoryAndTemplate = ({
+  jobTemplate,
+  setJobTemplate,
+  category,
+  setCategory,
+}) => {
+  const dispatch = useDispatch();
+
+  const jobCategoriesStatus = useSelector(selectJobCategoriesStatus);
+  useEffect(() => {
+    if (!jobCategoriesStatus) {
+      // Don't reload categories if they are already loaded
+      dispatch(
+        get({
+          key: JOB_CATEGORIES,
+          url: '/ui_job_wizard/categories',
+          handleSuccess: response =>
+            setCategory(response.data.job_categories[0] || ''),
+        })
+      );
+    }
+  }, [jobCategoriesStatus, dispatch, setCategory]);
+
+  const jobCategories = useSelector(selectJobCategories);
+
+  useEffect(() => {
+    if (category) {
+      const templatesUrlObject = new URI(templatesUrl);
+      dispatch(
+        get({
+          key: JOB_TEMPLATES,
+          url: templatesUrlObject.addSearch({
+            search: `job_category="${category}"`,
+            per_page: 'all',
+          }),
+          handleSuccess: response =>
+            setJobTemplate(
+              Number(filterJobTemplates(response?.data?.results)[0]?.id) || null
+            ),
+        })
+      );
+    }
+  }, [category, dispatch, setJobTemplate]);
+
+  const jobTemplates = useSelector(selectJobTemplates);
+
+  return (
+    <CategoryAndTemplate
+      jobTemplates={jobTemplates}
+      jobCategories={jobCategories}
+      setJobTemplate={setJobTemplate}
+      selectedTemplateID={jobTemplate}
+      setCategory={setCategory}
+      selectedCategory={category}
+    />
+  );
+};
+
+ConnectedCategoryAndTemplate.propTypes = {
+  jobTemplate: PropTypes.number,
+  setJobTemplate: PropTypes.func.isRequired,
+  category: PropTypes.string.isRequired,
+  setCategory: PropTypes.func.isRequired,
+};
+ConnectedCategoryAndTemplate.defaultProps = { jobTemplate: null };
+
+export default ConnectedCategoryAndTemplate;

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

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  SelectOption,
+  Select,
+  SelectGroup,
+  SelectVariant,
+  FormGroup,
+} from '@patternfly/react-core';
+
+export const GroupedSelectField = ({
+  label,
+  fieldId,
+  groups,
+  selected,
+  setSelected,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onSelect = selection => {
+    setIsOpen(false);
+    setSelected(selection);
+  };
+
+  const onClear = () => {
+    onSelect(null);
+  };
+
+  const options = groups.map((group, groupIndex) => (
+    <SelectGroup key={groupIndex} label={group.groupLabel}>
+      {group.options.map((option, optionIndex) => (
+        <SelectOption
+          key={optionIndex}
+          value={option.label}
+          onClick={() => onSelect(option.value)}
+        />
+      ))}
+    </SelectGroup>
+  ));
+
+  const onFilter = evt => {
+    const textInput = evt?.target?.value || '';
+    if (textInput === '') {
+      return options;
+    }
+    return options
+      .map(group => {
+        const filteredGroup = React.cloneElement(group, {
+          children: group.props.children.filter(item =>
+            item.props.value.toLowerCase().includes(textInput.toLowerCase())
+          ),
+        });
+        if (filteredGroup.props.children.length > 0) return filteredGroup;
+        return null;
+      })
+      .filter(newGroup => newGroup);
+  };
+
+  return (
+    <FormGroup label={label} fieldId={fieldId}>
+      <Select
+        isGrouped
+        variant={SelectVariant.typeahead}
+        onToggle={setIsOpen}
+        onFilter={onFilter}
+        isOpen={isOpen}
+        onSelect={() => null}
+        selections={selected}
+        className="without_select2"
+        onClear={onClear}
+      >
+        {options}
+      </Select>
+    </FormGroup>
+  );
+};
+
+GroupedSelectField.propTypes = {
+  label: PropTypes.string.isRequired,
+  fieldId: PropTypes.string.isRequired,
+  groups: PropTypes.array,
+  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  setSelected: PropTypes.func.isRequired,
+};
+
+GroupedSelectField.defaultProps = {
+  groups: [],
+  selected: null,
+};

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { FormGroup, Select, SelectOption } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+
+export const SelectField = ({ label, fieldId, options, value, setValue }) => {
+  const onSelect = (event, selection) => {
+    setValue(selection);
+    setIsOpen(false);
+  };
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <FormGroup label={label} fieldId={fieldId}>
+      <Select
+        selections={value}
+        onSelect={onSelect}
+        onToggle={setIsOpen}
+        isOpen={isOpen}
+        className="without_select2"
+        maxHeight="45vh"
+      >
+        {options.map((option, index) => (
+          <SelectOption key={index} value={option} />
+        ))}
+      </Select>
+    </FormGroup>
+  );
+};
+SelectField.propTypes = {
+  label: PropTypes.string.isRequired,
+  fieldId: PropTypes.string.isRequired,
+  options: PropTypes.array,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  setValue: PropTypes.func.isRequired,
+};
+
+SelectField.defaultProps = {
+  options: [],
+  value: null,
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import * as patternfly from '@patternfly/react-core';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import { GroupedSelectField } from '../GroupedSelectField';
+
+jest.spyOn(patternfly, 'Select');
+jest.spyOn(patternfly, 'SelectOption');
+patternfly.Select.mockImplementation(props => <div>{props}</div>);
+patternfly.SelectOption.mockImplementation(props => <div>{props}</div>);
+
+const fixtures = {
+  'renders with props': {
+    label: 'grouped select',
+    fieldId: 'field-id',
+    groups: [
+      {
+        groupLabel: 'Ansible',
+        options: [
+          {
+            label: 'Ansible Roles - Ansible Default',
+            value: 168,
+          },
+          {
+            label: 'Ansible Roles - Install from git',
+            value: 170,
+          },
+        ],
+      },
+    ],
+    selected: 170,
+    setSelected: jest.fn(),
+  },
+};
+
+describe('GroupedSelectField', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(GroupedSelectField, fixtures));
+});

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import * as patternfly from '@patternfly/react-core';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import { SelectField } from '../SelectField';
+
+jest.spyOn(patternfly, 'Select');
+jest.spyOn(patternfly, 'SelectOption');
+patternfly.Select.mockImplementation(props => <div>{props}</div>);
+patternfly.SelectOption.mockImplementation(props => <div>{props}</div>);
+const fixtures = {
+  'renders with props': {
+    label: 'grouped select',
+    fieldId: 'field-id',
+    options: ['Commands'],
+    value: 'Commands',
+    setValue: jest.fn(),
+  },
+};
+
+describe('SelectField', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(SelectField, fixtures));
+});

data/webpack/JobWizard/steps/form/__tests__/__snapshots__/GroupedSelectField.test.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GroupedSelectField rendering renders with props 1`] = `
+<FormGroup
+  fieldId="field-id"
+  label="grouped select"
+>
+  <mockConstructor
+    className="without_select2"
+    isGrouped={true}
+    isOpen={false}
+    onClear={[Function]}
+    onFilter={[Function]}
+    onSelect={[Function]}
+    onToggle={[Function]}
+    selections={170}
+    variant="typeahead"
+  >
+    <SelectGroup
+      key="0"
+      label="Ansible"
+    >
+      <mockConstructor
+        key="0"
+        onClick={[Function]}
+        value="Ansible Roles - Ansible Default"
+      />
+      <mockConstructor
+        key="1"
+        onClick={[Function]}
+        value="Ansible Roles - Install from git"
+      />
+    </SelectGroup>
+  </mockConstructor>
+</FormGroup>
+`;

data/webpack/JobWizard/steps/form/__tests__/__snapshots__/SelectField.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectField rendering renders with props 1`] = `
+<FormGroup
+  fieldId="field-id"
+  label="grouped select"
+>
+  <mockConstructor
+    className="without_select2"
+    isOpen={false}
+    maxHeight="45vh"
+    onSelect={[Function]}
+    onToggle={[Function]}
+    selections="Commands"
+  >
+    <mockConstructor
+      key="0"
+      value="Commands"
+    />
+  </mockConstructor>
+</FormGroup>
+`;

data/webpack/Routes/routes.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import JobWizardPage from '../JobWizard';
+
+const ForemanREXRoutes = [
+  {
+    path: '/experimental/job_wizard',
+    exact: true,
+    render: props => <JobWizardPage {...props} />,
+  },
+];
+
+export default ForemanREXRoutes;

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

@@ -0,0 +1 @@
+export const foremanUrl = path => `foreman${path}`;

data/webpack/__mocks__/foremanReact/history.js

@@ -0,0 +1 @@
+export default { goBack: () => null };

data/webpack/__mocks__/foremanReact/redux/API/index.js

@@ -0,0 +1,5 @@
+export const API = {
+  get: jest.fn(),
+};
+
+export const get = data => ({ type: 'get-some-type', ...data });

data/webpack/__mocks__/foremanReact/routes/common/PageLayout/PageLayout.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PageLayout = ({ children }) => <div>{children}</div>;
+
+PageLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default PageLayout;

data/webpack/fills_index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+
+import RexInterface from './react_app/components/RegistrationExtension/RexInterface';
+
+addGlobalFill(
+  'registrationAdvanced',
+  'foreman-remote-exectuion-rex-interface',
+  <RexInterface key="registration-rex-interface" />,
+  100
+);

data/webpack/global_index.js

@@ -0,0 +1,8 @@
+import { registerRoutes } from 'foremanReact/routes/RoutingService';
+import routes from './Routes/routes';
+import registerReducers from './react_app/extend/reducers';
+import registerFills from './react_app/extend/fills';
+
+registerRoutes('foreman_remote_execution', routes);
+registerReducers();
+registerFills();

data/webpack/index.js

@@ -1,8 +1,6 @@
-import { registerReducer } from 'foremanReact/common/MountingService';
 import componentRegistry from 'foremanReact/components/componentRegistry';
 import JobInvocationContainer from './react_app/components/jobInvocations';
 import TargetingHosts from './react_app/components/TargetingHosts';
-import rootReducer from './react_app/redux/reducers';
 
 const components = [
   { name: 'JobInvocationContainer', type: JobInvocationContainer },
@@ -12,5 +10,3 @@ const components = [
 components.forEach(component => {
   componentRegistry.register(component);
 });
-
-registerReducer('foremanRemoteExecutionReducers', rootReducer);

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

@@ -0,0 +1,87 @@
+/* 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 {
+  OkIcon,
+  ErrorCircleOIcon,
+} from '@patternfly/react-icons/dist/js/icons';
+import {
+  PropertiesSidePanel,
+  PropertyItem,
+} from '@patternfly/react-catalog-view-extension';
+import { ArrowIcon } from '@patternfly/react-icons';
+
+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 { translate as __ } from 'foremanReact/common/I18n';
+import './styles.css';
+
+const RecentJobsCard = ({ hostDetails: { name } }) => {
+  const jobsUrl =
+    name && `/api/job_invocations?search=host%3D${name}&per_page=3`;
+  const {
+    response: { results: jobs },
+  } = useAPI('get', jobsUrl);
+
+  const iconMarkup = status => {
+    if (status === 1) return <ErrorCircleOIcon color="#C9190B" />;
+    return <OkIcon color="#3E8635" />;
+  };
+
+  return (
+    <CardItem
+      header={
+        <span>
+          {__('Recent Jobs')}{' '}
+          <a href={`/job_invocations?search=host+%3D+${name}`}>
+            <ArrowIcon />
+          </a>
+        </span>
+      }
+    >
+      <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>
+  );
+};
+
+export default RecentJobsCard;
+
+RecentJobsCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    name: PropTypes.string,
+  }).isRequired,
+};