foreman_ansible 6.4.1 → 7.0.0

data/webpack/components/DualList/ListItem.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+const ListItem = props => {
+  const draggableBtn = (
+    <div className="pf-c-dual-list-selector__draggable">
+      <button
+        className="pf-c-button pf-m-plain"
+        type="button"
+        aria-pressed="false"
+        aria-label="Reorder"
+        id="draggable-list-item-2-draggable-button"
+        aria-labelledby="draggable-list-item-2-draggable-button draggable-list-item-2-item-text"
+        aria-describedby="draggable-help"
+      >
+        <i className="fas fa-grip-vertical" aria-hidden="true" />
+      </button>
+    </div>
+  );
+
+  const orderBtn = (
+    <span className="foreman-dual-list-order">{`${props.index + 1}.`}</span>
+  );
+
+  return (
+    <li className="pf-c-dual-list-selector__list-item">
+      <div
+        className={classNames('pf-c-dual-list-selector__list-item-row ', {
+          'pf-m-selected': props.selected,
+          'pf-m-ghost-row': props.dragging,
+        })}
+      >
+        {props.draggable && draggableBtn}
+        <button
+          className="pf-c-dual-list-selector__item"
+          type="button"
+          onClick={props.onClick}
+        >
+          <span className="pf-c-dual-list-selector__item-main">
+            <span className="pf-c-dual-list-selector__item-text">
+              {props.draggable && orderBtn}
+              <span>{props.name}</span>
+            </span>
+          </span>
+          <span className="pf-c-dual-list-selector__item-count">
+            <span className="pf-c-badge pf-m-read" />
+          </span>
+        </button>
+      </div>
+    </li>
+  );
+};
+
+ListItem.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  dragging: PropTypes.bool,
+  draggable: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+ListItem.defaultProps = {
+  draggable: false,
+  dragging: false,
+};
+
+export default ListItem;

data/webpack/components/DualList/ListPane.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import PropTypes from 'prop-types';
+
+import {
+  orderable,
+  orderDragged,
+} from 'foremanReact/components/common/forms/OrderableSelect/helpers';
+
+import ListItem from './ListItem';
+import ListHeader from './ListHeader';
+import SelectedStatus from './SelectedStatus';
+
+const OrderableListItem = orderable(ListItem, {
+  type: 'orderableItem',
+  getItem: props => ({ id: props.name }),
+  direction: 'vertical',
+});
+
+const ListPane = ({
+  items,
+  isItemSelected,
+  draggable,
+  onItemClick,
+  paneClass,
+  title,
+  selected,
+  onSetOrderedItems,
+}) => {
+  const moveValue = (dragIndex, hoverIndex) => {
+    onSetOrderedItems(orderDragged(items, dragIndex, hoverIndex));
+  };
+
+  const renderOrderableItem = (item, idx) => (
+    <OrderableListItem
+      key={item}
+      name={item}
+      index={idx}
+      moveValue={moveValue}
+      onClick={onItemClick(item)}
+      selected={isItemSelected(item)}
+      draggable={draggable}
+    />
+  );
+
+  const renderListItem = (item, idx) => (
+    <ListItem
+      key={item}
+      name={item}
+      index={idx}
+      onClick={onItemClick(item)}
+      selected={isItemSelected(item)}
+    />
+  );
+
+  const renderItem = draggable ? renderOrderableItem : renderListItem;
+
+  return (
+    <div
+      className={`pf-c-dual-list-selector__pane pf-m-available ${paneClass}`}
+    >
+      <ListHeader title={title} />
+      <SelectedStatus
+        selectedCount={selected.length}
+        totalCount={items.length}
+      />
+      <div className="pf-c-dual-list-selector__menu">
+        <DndProvider backend={HTML5Backend}>
+          <ul className="pf-c-dual-list-selector__list">
+            {items.map(renderItem)}
+          </ul>
+        </DndProvider>
+      </div>
+    </div>
+  );
+};
+
+ListPane.propTypes = {
+  items: PropTypes.array.isRequired,
+  isItemSelected: PropTypes.func.isRequired,
+  draggable: PropTypes.bool,
+  onItemClick: PropTypes.func.isRequired,
+  paneClass: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  selected: PropTypes.array.isRequired,
+  onSetOrderedItems: PropTypes.func,
+};
+
+ListPane.defaultProps = {
+  draggable: false,
+  onSetOrderedItems: () => {},
+};
+
+export default ListPane;

data/webpack/components/DualList/SelectedStatus.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+
+const SelectedStatus = ({ selectedCount, totalCount }) => (
+  <div className="pf-c-dual-list-selector__status">
+    <span className="pf-c-dual-list-selector__status-text">
+      {sprintf(__('%(selectedCount)s of %(totalCount)s items selected'), {
+        selectedCount,
+        totalCount,
+      })}
+    </span>
+  </div>
+);
+
+SelectedStatus.propTypes = {
+  selectedCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.number.isRequired,
+};
+
+export default SelectedStatus;

data/webpack/components/DualList/index.js

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import ListControls from './ListControls';
+import ListPane from './ListPane';
+import './DualList.scss';
+
+const DualList = props => {
+  const defaultSelectState = { availableSelected: [], chosenSelected: [] };
+  const [selectState, setSelectState] = useState(defaultSelectState);
+
+  const onItemClick = stateName => itemName => (...args) => {
+    if (isItemSelected(stateName)(itemName)) {
+      setSelectState({
+        ...selectState,
+        [stateName]: selectState[stateName].filter(item => item !== itemName),
+      });
+    } else {
+      setSelectState({
+        ...selectState,
+        [stateName]: [...selectState[stateName], itemName],
+      });
+    }
+  };
+
+  const isItemSelected = stateName => item =>
+    selectState[stateName].includes(item);
+
+  const onAddAll = () =>
+    props.onListChange([], [...props.chosenOptions, ...props.availableOptions]);
+  const onRemoveAll = () =>
+    props.onListChange([...props.availableOptions, ...props.chosenOptions], []);
+
+  const onAddSelected = () => {
+    const [newAvailable, newChosen] = moveItems(
+      props.availableOptions,
+      props.chosenOptions,
+      selectState.availableSelected
+    );
+    setSelectState(defaultSelectState);
+    props.onListChange(newAvailable, newChosen);
+  };
+
+  const onRemoveSelected = () => {
+    const [newChosen, newAvailable] = moveItems(
+      props.chosenOptions,
+      props.availableOptions,
+      selectState.chosenSelected
+    );
+    setSelectState(defaultSelectState);
+    props.onListChange(newAvailable, newChosen);
+  };
+
+  const moveItems = (removeFrom, addTo, selected) => {
+    const newRemoveFrom = removeFrom.filter(item => !selected.includes(item));
+    return [newRemoveFrom, [...addTo, ...selected]];
+  };
+
+  const onChosenSetOrder = items =>
+    props.onListChange(props.availableOptions, items);
+
+  return (
+    <div className="pf-c-dual-list-selector">
+      <ListPane
+        title={__('Available options')}
+        items={props.availableOptions}
+        paneClass="pf-m-available"
+        onItemClick={onItemClick('availableSelected')}
+        selected={selectState.availableSelected}
+        isItemSelected={isItemSelected('availableSelected')}
+      />
+      <ListControls
+        onAddSelected={onAddSelected}
+        onRemoveSelected={onRemoveSelected}
+        onRemoveAll={onRemoveAll}
+        onAddAll={onAddAll}
+        addAllDisabled={props.availableOptions.length === 0}
+        removeAllDisabled={props.chosenOptions.length === 0}
+        addSelectedDisabled={selectState.availableSelected.length === 0}
+        removeSelectedDisabled={selectState.chosenSelected.length === 0}
+      />
+      <ListPane
+        title={__('Chosen options')}
+        items={props.chosenOptions}
+        paneClass="pf-m-chosen"
+        draggable
+        onItemClick={onItemClick('chosenSelected')}
+        selected={selectState.chosenSelected}
+        isItemSelected={isItemSelected('chosenSelected')}
+        onSetOrderedItems={onChosenSetOrder}
+      />
+    </div>
+  );
+};
+
+DualList.propTypes = {
+  onListChange: PropTypes.func.isRequired,
+  chosenOptions: PropTypes.array.isRequired,
+  availableOptions: PropTypes.array.isRequired,
+};
+
+export default DualList;

data/webpack/components/ErrorState.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import EmptyState from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
+
+import { EmptyStateIcon } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { global_danger_color_200 as dangerColor } from '@patternfly/react-tokens';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const ErrorState = props => {
+  const icon = (
+    <EmptyStateIcon icon={ExclamationCircleIcon} color={dangerColor.value} />
+  );
+  return <EmptyState header={__('Error!')} icon={icon} {...props} />;
+};
+
+export default ErrorState;

data/webpack/components/withLoading.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import Skeleton from 'react-loading-skeleton';
+import EmptyState from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
+import { LockIcon } from '@patternfly/react-icons';
+import { EmptyStateIcon } from '@patternfly/react-core';
+import {
+  permissionCheck,
+  permissionDeniedMsg,
+  allowPrimaryAction,
+} from '../permissionsHelper';
+import ErrorState from './ErrorState';
+
+const pluckData = (data, path) => {
+  const split = path.split('.');
+  return split.reduce((memo, item) => {
+    if (item) {
+      return memo[item];
+    }
+    throw new Error('Unexpected empty segment in response data path');
+  }, data);
+};
+
+const withLoading = Component => {
+  const defaultEmptyStateProps = {
+    header: __('Nothing Found!'),
+    description: '',
+  };
+
+  const Subcomponent = ({
+    fetchFn,
+    renameData,
+    renamedDataPath,
+    showEmptyState,
+    emptyWrapper,
+    loadingWrapper,
+    wrapper,
+    emptyStateProps,
+    permissions,
+    allowed,
+    requiredPermissions,
+    primaryActionPermissions,
+    ...rest
+  }) => {
+    const { loading, error, data } = fetchFn(rest);
+
+    if (loading) {
+      return loadingWrapper(<Skeleton count={5} />);
+    }
+
+    if (error) {
+      return emptyWrapper(<ErrorState description={error.message} />);
+    }
+
+    const check = permissionCheck(data.currentUser, permissions);
+
+    if (!check.allowed) {
+      return emptyWrapper(
+        <EmptyState
+          icon={<EmptyStateIcon icon={LockIcon} />}
+          header={__('Permission denied')}
+          description={permissionDeniedMsg(
+            check.permissions.map(item => item.name)
+          )}
+        />
+      );
+    }
+
+    if (!allowed) {
+      return emptyWrapper(
+        <EmptyState
+          icon={<EmptyStateIcon icon={LockIcon} />}
+          header={__('Permission denied')}
+          description={permissionDeniedMsg(requiredPermissions)}
+        />
+      );
+    }
+
+    const renamedData = renameData(data);
+    const result = pluckData(renamedData, renamedDataPath);
+
+    if (
+      showEmptyState &&
+      ((Array.isArray(result) && result.length === 0) || !result)
+    ) {
+      return emptyWrapper(
+        <EmptyState
+          {...{
+            ...defaultEmptyStateProps,
+            ...allowPrimaryAction(
+              emptyStateProps,
+              data.currentUser,
+              primaryActionPermissions
+            ),
+          }}
+        />
+      );
+    }
+
+    return wrapper(<Component {...rest} {...renamedData} />);
+  };
+
+  Subcomponent.propTypes = {
+    fetchFn: PropTypes.func.isRequired,
+    renamedDataPath: PropTypes.string.isRequired,
+    renameData: PropTypes.func,
+    showEmptyState: PropTypes.bool,
+    loadingWrapper: PropTypes.func,
+    emptyWrapper: PropTypes.func,
+    emptyStateProps: PropTypes.object,
+    wrapper: PropTypes.func,
+    permissions: PropTypes.array,
+    allowed: PropTypes.bool,
+    primaryActionPermissions: PropTypes.array,
+  };
+
+  Subcomponent.defaultProps = {
+    renameData: data => data,
+    showEmptyState: true,
+    loadingWrapper: child => child,
+    emptyWrapper: child => child,
+    wrapper: child => child,
+    emptyStateProps: defaultEmptyStateProps,
+    permissions: [],
+    requiredPermissions: [],
+    primaryActionPermissions: [],
+    allowed: true,
+  };
+
+  return Subcomponent;
+};
+
+export default withLoading;

data/webpack/formHelper.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  DatePicker,
+  TimePicker,
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+
+const wrapFieldProps = fieldProps => {
+  const { onChange } = fieldProps;
+  // modify onChange args to correctly wire formik with pf4 input handlers
+  const wrappedOnChange = (value, event) => {
+    onChange(event);
+  };
+
+  return { ...fieldProps, onChange: wrappedOnChange };
+};
+
+const wrapPickerProps = fieldProps => {
+  const { onChange } = fieldProps;
+  // because pf4 does not provide consistent handlers for its inputs
+  const wrappedOnChange = value => {
+    onChange({ target: { name: fieldProps.name, value } });
+  };
+
+  return { ...fieldProps, onChange: wrappedOnChange };
+};
+
+const shouldValidate = (form, fieldName) => {
+  if (form.touched[fieldName]) {
+    return form.errors[fieldName] ? 'error' : 'success';
+  }
+
+  return 'noval';
+};
+
+export const SelectField = ({
+  selectItems,
+  field,
+  form,
+  label,
+  isRequired,
+  blankLabel,
+}) => {
+  const fieldProps = wrapFieldProps(field);
+
+  const valid = shouldValidate(form, field.name);
+
+  return (
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      helperTextInvalid={form.errors[field.name]}
+      helperTextInvalidIcon={<ExclamationCircleIcon />}
+      validated={valid}
+    >
+      <FormSelect
+        {...fieldProps}
+        className="without_select2"
+        aria-label={fieldProps.name}
+        validated={valid}
+        isDisabled={form.isSubmitting}
+      >
+        <FormSelectOption key={0} value="" label={blankLabel} />
+        {selectItems.map((item, idx) => (
+          <FormSelectOption key={idx + 1} value={item.id} label={item.name} />
+        ))}
+      </FormSelect>
+    </FormGroup>
+  );
+};
+
+SelectField.propTypes = {
+  selectItems: PropTypes.array,
+  field: PropTypes.object.isRequired,
+  form: PropTypes.object.isRequired,
+  label: PropTypes.string.isRequired,
+  blankLabel: PropTypes.string,
+  isRequired: PropTypes.bool,
+};
+
+SelectField.defaultProps = {
+  selectItems: [],
+  isRequired: false,
+  blankLabel: '',
+};
+
+const pickerWithHandlers = Component => {
+  const Subcomponent = ({ form, field, isRequired, label, ...rest }) => {
+    const { onChange, onBlur } = wrapPickerProps(field);
+    const valid = shouldValidate(form, field.name);
+
+    return (
+      <FormGroup
+        label={label}
+        isRequired={isRequired}
+        helperTextInvalid={form.errors[field.name]}
+        helperTextInvalidIcon={<ExclamationCircleIcon />}
+        validated={valid}
+      >
+        <Component
+          aria-label={field.name}
+          onChange={onChange}
+          onBlur={onBlur}
+          {...rest}
+          validated={valid}
+          isDisabled={form.isSubmitting}
+        />
+      </FormGroup>
+    );
+  };
+
+  Subcomponent.propTypes = {
+    form: PropTypes.object.isRequired,
+    field: PropTypes.object.isRequired,
+    isRequired: PropTypes.bool,
+    label: PropTypes.string.isRequired,
+  };
+
+  Subcomponent.defaultProps = {
+    isRequired: false,
+  };
+
+  return Subcomponent;
+};
+
+export const DatePickerField = pickerWithHandlers(DatePicker);
+export const TimePickerField = pickerWithHandlers(TimePicker);

data/webpack/globalIdHelper.js

@@ -0,0 +1,13 @@
+const idSeparator = '-';
+const versionSeparator = ':';
+const defaultVersion = '01';
+
+export const decodeModelId = model => decodeId(model.id);
+
+export const decodeId = id => {
+  const split = atob(id).split(idSeparator);
+  return parseInt(split[split.length - 1], 10);
+};
+
+export const encodeId = (typename, id) =>
+  btoa([defaultVersion, versionSeparator, typename, idSeparator, id].join(''));

data/webpack/global_index.js

@@ -1,12 +1,18 @@
 import React from 'react';
+import { registerRoutes } from 'foremanReact/routes/RoutingService';
 
 import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
 
+import routes from './routes/routes';
 import AnsibleHostDetail from './components/AnsibleHostDetail';
 
+import { ANSIBLE_KEY } from './components/AnsibleHostDetail/constants';
+
 addGlobalFill(
   'host-details-page-tabs',
-  'Ansible',
+  ANSIBLE_KEY,
   <AnsibleHostDetail key="ansible-host-detail" />,
   500
 );
+
+registerRoutes('foreman_ansible', routes);

data/webpack/graphql/mutations/assignAnsibleRoles.gql

@@ -0,0 +1,17 @@
+mutation AssignAnsibleRoles($id: ID!, $ansibleRoleIds: [Int!]!) {
+  assignAnsibleRoles(input: { id: $id, ansibleRoleIds: $ansibleRoleIds }) {
+    host {
+      id
+      ownAnsibleRoles {
+        nodes {
+          id
+          name
+        }
+      }
+    }
+    errors {
+      path
+      message
+    }
+  }
+}

data/webpack/graphql/mutations/cancelRecurringLogic.gql

@@ -0,0 +1,12 @@
+mutation CancelRecurringLogic($id:ID!) {
+  cancelRecurringLogic(input: { id: $id }){
+    recurringLogic {
+      id
+      cronLine
+    }
+    errors {
+      message
+      path
+    }
+  }
+}

data/webpack/graphql/mutations/createAnsibleVariableOverride.gql

@@ -0,0 +1,28 @@
+mutation CreateAnsibleVariableOverride(
+  $hostId: Int!,
+  $value: RawJson!,
+  $lookupKeyId: Int!,
+  $match: String!) {
+  createAnsibleVariableOverride(input: { hostId: $hostId, lookupKeyId: $lookupKeyId, value: $value, match: $match }) {
+    overridenAnsibleVariable {
+      id
+      lookupValues(match: $match) {
+        nodes {
+          id
+          match
+          value
+          omit
+        }
+      }
+      currentValue {
+        element
+        value
+        elementName
+      }
+    }
+    errors {
+      path
+      message
+    }
+  }
+}

data/webpack/graphql/mutations/createJobInvocation.gql

@@ -0,0 +1,11 @@
+mutation CreateJobInvocation($jobInvocation: JobInvocationInput!) {
+  createJobInvocation(input: { jobInvocation: $jobInvocation }) {
+    jobInvocation {
+      id
+    }
+    errors {
+      path
+      message
+    }
+  }
+}

data/webpack/graphql/mutations/deleteAnsibleVariableOverride.gql

@@ -0,0 +1,17 @@
+mutation DeleteAnsibleVariableOverride($id: ID!, $hostId: Int!, $variableId: Int!) {
+  deleteAnsibleVariableOverride(input: { id: $id, hostId: $hostId, variableId: $variableId }) {
+    id
+    overridenAnsibleVariable {
+      id
+      currentValue {
+        value
+        element
+        elementName
+      }
+    }
+    errors {
+      path
+      message
+    }
+  }
+}