foreman_remote_execution 4.3.1 → 4.5.2

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const NumberInput = ({ formProps, inputProps }) => {
+  const [validated, setValidated] = useState();
+  return (
+    <FormGroup
+      {...formProps}
+      helperTextInvalid={__('Has to be a number')}
+      validated={validated}
+    >
+      <TextInput
+        type="text"
+        {...inputProps}
+        onChange={newValue => {
+          setValidated(
+            /^\d+$/.test(newValue) || newValue === ''
+              ? ValidatedOptions.noval
+              : ValidatedOptions.error
+          );
+          inputProps.onChange(newValue);
+        }}
+      />
+    </FormGroup>
+  );
+};
+
+NumberInput.propTypes = {
+  formProps: PropTypes.object.isRequired,
+  inputProps: PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,60 @@
+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,
+  labelIcon,
+  isRequired,
+  ...props
+}) => {
+  const onSelect = (event, selection) => {
+    setValue(selection);
+    setIsOpen(false);
+  };
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <FormGroup
+      label={label}
+      fieldId={fieldId}
+      labelIcon={labelIcon}
+      isRequired={isRequired}
+    >
+      <Select
+        selections={value}
+        onSelect={onSelect}
+        onToggle={setIsOpen}
+        isOpen={isOpen}
+        className="without_select2"
+        maxHeight="45vh"
+        menuAppendTo={() => document.body}
+        {...props}
+      >
+        {options.map((option, index) => (
+          <SelectOption key={index} value={option} />
+        ))}
+      </Select>
+    </FormGroup>
+  );
+};
+SelectField.propTypes = {
+  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/__tests__/Formatter.test.js.example

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import * as patternfly from '@patternfly/react-core';
+import { mount, shallow } from '@theforeman/test';
+import { formatter } from '../Formatter';
+
+jest.spyOn(patternfly, 'Select');
+jest.spyOn(patternfly, 'SelectOption');
+jest.spyOn(patternfly, 'FormGroup');
+patternfly.Select.mockImplementation(props => <div props={props} />);
+patternfly.SelectOption.mockImplementation(props => <div props={props} />);
+patternfly.FormGroup.mockImplementation(props => <div props={props} />);
+const mockStore = configureMockStore([]);
+const store = mockStore({});
+
+describe('formatter', () => {
+  it('render date input', () => {
+    const props = {
+      name: 'date adv',
+      required: false,
+      options: '',
+      advanced: true,
+      value_type: 'date',
+      resource_type: 'ansible_roles',
+      default: '',
+      hidden_value: false,
+    };
+    expect(shallow(formatter(props, {}, jest.fn()))).toMatchSnapshot();
+  });
+  it('render text input', () => {
+    const props = {
+      name: 'plain adv hidden',
+      required: true,
+      description: 'some Description',
+      options: '',
+      advanced: true,
+      value_type: 'plain',
+      resource_type: 'ansible_roles',
+      default: 'Default val',
+      hidden_value: true,
+    };
+    expect(shallow(formatter(props, {}, jest.fn()))).toMatchSnapshot();
+  });
+  it('render select input', () => {
+    const props = {
+      name: 'adv plain search',
+      required: false,
+      input_type: 'user',
+      options: 'option 1\r\noption 2\r\noption 3\r\noption 4',
+      advanced: true,
+      value_type: 'plain',
+      resource_type: 'ansible_roles',
+      default: '',
+      hidden_value: false,
+    };
+    expect(shallow(formatter(props, {}, jest.fn()))).toMatchSnapshot();
+  });
+  it('render search input', () => {
+    const props = {
+      name: 'search adv',
+      required: false,
+      options: '',
+      advanced: true,
+      value_type: 'search',
+      resource_type: 'foreman_tasks/tasks',
+      default: '',
+      hidden_value: false,
+    };
+    expect(
+      mount(
+        <Provider store={store}>{formatter(props, {}, jest.fn())}</Provider>
+      )
+    ).toMatchSnapshot();
+  });
+});

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

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

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/redux/API/APISelectors.js

@@ -1,2 +1,21 @@
-export const selectAPIStatus = () => 'RESOLVED';
-export const selectAPIResponse = state => state;
+export const selectAPI = state => state;
+export const selectAPIByKey = (state, key) => selectAPI(state)[key] || {};
+
+export const selectAPIStatus = (state, key) =>
+  selectAPIByKey(state, key).status;
+
+export const selectAPIPayload = (state, key) =>
+  selectAPIByKey(state, key).payload || {};
+
+export const selectAPIResponse = (state, key) =>
+  selectAPIByKey(state, key).response || {};
+
+export const selectAPIError = (state, key) =>
+  selectAPIStatus(state, key) === 'ERROR'
+    ? selectAPIResponse(state, key)
+    : null;
+
+export const selectAPIErrorMessage = (state, key) => {
+  const error = selectAPIError(state, key);
+  return error && error.message;
+};

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/global_index.js

@@ -1,4 +1,10 @@
 import { registerRoutes } from 'foremanReact/routes/RoutingService';
 import routes from './Routes/routes';
+import fillregistrationAdvanced from './react_app/extend/fillregistrationAdvanced';
+import fillRecentJobsCard from './react_app/extend/fillRecentJobsCard';
+import registerReducers from './react_app/extend/reducers';
 
+registerReducers();
 registerRoutes('foreman_remote_execution', routes);
+fillRecentJobsCard();
+fillregistrationAdvanced();

data/webpack/index.js

@@ -1,8 +1,9 @@
-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';
+import registerReducers from './react_app/extend/reducers';
+
+registerReducers();
 
 const components = [
   { name: 'JobInvocationContainer', type: JobInvocationContainer },
@@ -12,5 +13,3 @@ const components = [
 components.forEach(component => {
   componentRegistry.register(component);
 });
-
-registerReducer('foremanRemoteExecutionReducers', rootReducer);

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

@@ -0,0 +1,83 @@
+/* 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 { 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,
+};

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

@@ -0,0 +1 @@
+export const HOST_DETAILS_JOBS = 'HOST_DETAILS_JOBS';

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

@@ -0,0 +1 @@
+export { default } from './RecentJobsCard';

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

@@ -0,0 +1,15 @@
+.properties-side-panel-pf-property-value {
+  font-size: 14px !important;
+  margin-top: 8px;
+  word-break: break-word;
+}
+
+.properties-side-panel-pf-property-label {
+  font-weight: 700 !important;
+  font-size: 14px !important;
+  margin: 0 !important;
+}
+
+.properties-side-panel-pf-property {
+  margin-top: 24px;
+}

data/webpack/react_app/components/RegistrationExtension/RexInterface.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { FormGroup, TextInput, Popover } from '@patternfly/react-core';
+
+import { HelpIcon } from '@patternfly/react-icons';
+
+const RexInterface = ({ isLoading, onChange }) => (
+  <FormGroup
+    label={__('Remote Execution Interface')}
+    fieldId="reg_rex_interface"
+    labelIcon={
+      <Popover
+        bodyContent={
+          <div>
+            {__('Identifier of the Host interface for Remote execution')}
+          </div>
+        }
+      >
+        <button
+          className="pf-c-form__group-label-help"
+          onClick={e => e.preventDefault()}
+        >
+          <HelpIcon noVerticalAlign />
+        </button>
+      </Popover>
+    }
+  >
+    <TextInput
+      type="text"
+      onBlur={e => onChange({ remoteExecutionInterface: e.target.value })}
+      id="reg_rex_interface_input"
+      isDisabled={isLoading}
+    />
+  </FormGroup>
+);
+
+RexInterface.propTypes = {
+  onChange: PropTypes.func,
+  isLoading: PropTypes.bool,
+};
+
+RexInterface.defaultProps = {
+  onChange: undefined,
+  isLoading: false,
+};
+
+export default RexInterface;

data/webpack/react_app/components/RegistrationExtension/__tests__/RexInterface.test.js

@@ -0,0 +1,9 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import RexInterface from '../RexInterface';
+
+const fixtures = {
+  renders: { isLoading: false, onChange: () => {} },
+};
+
+describe('RexInterface', () =>
+  testComponentSnapshotsWithFixtures(RexInterface, fixtures));

data/webpack/react_app/components/RegistrationExtension/__tests__/__snapshots__/RexInterface.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RexInterface renders 1`] = `
+<FormGroup
+  fieldId="reg_rex_interface"
+  label="Remote Execution Interface"
+  labelIcon={
+    <Popover
+      bodyContent={
+        <div>
+          Identifier of the Host interface for Remote execution
+        </div>
+      }
+    >
+      <button
+        className="pf-c-form__group-label-help"
+        onClick={[Function]}
+      >
+        <HelpIcon
+          color="currentColor"
+          noVerticalAlign={true}
+          size="sm"
+        />
+      </button>
+    </Popover>
+  }
+>
+  <TextInput
+    id="reg_rex_interface_input"
+    isDisabled={false}
+    onBlur={[Function]}
+    type="text"
+  />
+</FormGroup>
+`;