foreman_rh_cloud 3.0.19 → 3.0.23

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediateButton.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { Button, Popover } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from '../../../ForemanRhCloudHelpers';
+
+const RemediateButton = ({ isExperimentalMode, selectedIds, toggleModal }) => {
+  const [isVisible, setVisible] = React.useState(true);
+
+  const popoverContent = __(
+    `To use this feature, please enable <a href=${foremanUrl(
+      '/settings?search=name+%3D+lab_features'
+    )}>Show Experimental Labs</a> in settings.`
+  );
+
+  let button = (
+    <Button
+      variant="primary"
+      isDisabled={isEmpty(selectedIds)}
+      onClick={() => {
+        if (!isExperimentalMode) {
+          setVisible(value => !value);
+        } else {
+          toggleModal();
+        }
+      }}
+    >
+      {__('Remediate')}
+    </Button>
+  );
+
+  if (!isExperimentalMode) {
+    button = (
+      <Popover
+        isVisible={isVisible}
+        aria-label={__('Please enable lab features to use this button')}
+        bodyContent={
+          <div dangerouslySetInnerHTML={{ __html: popoverContent }} />
+        }
+      >
+        {button}
+      </Popover>
+    );
+  }
+  return button;
+};
+
+RemediateButton.propTypes = {
+  selectedIds: PropTypes.object,
+  isExperimentalMode: PropTypes.bool,
+  toggleModal: PropTypes.func.isRequired,
+};
+
+RemediateButton.defaultProps = {
+  selectedIds: {},
+  isExperimentalMode: false,
+};
+
+export default RemediateButton;

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationActions.js

@@ -0,0 +1,12 @@
+import { get } from 'foremanReact/redux/API';
+import {
+  REMEDIATIONS_API_KEY,
+  REMEDIATIONS_PATH,
+} from './RemediationTableConstants';
+
+export const fetchRemediations = ({ selectedIds, isAllSelected, query }) =>
+  get({
+    key: REMEDIATIONS_API_KEY,
+    url: REMEDIATIONS_PATH,
+    params: { ids: Object.keys(selectedIds), isAllSelected, query },
+  });

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationHelpers.js

@@ -0,0 +1,43 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import { orderBy } from 'lodash';
+import Resolutions from './Resolutions';
+
+export const modifyRows = (remediations, setResolutions, setHostsIds) => {
+  if (remediations.length === 0) return [];
+
+  const resolutionToSubmit = [];
+  const hostsIdsToSubmit = new Set();
+  const modifiedRemediations = orderBy(
+    remediations.asMutable(),
+    [r => r.resolutions?.length || 0],
+    ['desc']
+  ).map(({ id, host_id, hostname, title, resolutions, reboot }) => {
+    hostsIdsToSubmit.add(host_id);
+    const selectedResolution = resolutions[0]?.id;
+    resolutionToSubmit.push({
+      hit_id: id,
+      resolution_id: selectedResolution /** defaults to the first resolution if many */,
+    });
+    return {
+      cells: [
+        hostname,
+        title,
+        <div>
+          <Resolutions
+            hit_id={id}
+            resolutions={resolutions}
+            setResolutions={setResolutions}
+            selectedResolution={selectedResolution}
+          />
+        </div>,
+        reboot,
+      ],
+      id,
+    };
+  });
+
+  setResolutions(resolutionToSubmit);
+  setHostsIds(Array.from(hostsIdsToSubmit));
+  return modifiedRemediations;
+};

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js

@@ -0,0 +1,101 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+import { STATUS } from 'foremanReact/constants';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { columns } from './RemediationTableConstants';
+import { modifyRows } from './RemediationHelpers';
+import ModalFooter from './RemediationModalFooter';
+import TableEmptyState from '../../../common/table/EmptyState';
+import './RemediationModal.scss';
+import RemediateButton from './RemediateButton';
+
+const RemediationModal = ({
+  selectedIds,
+  fetchRemediations,
+  remediations,
+  status,
+  error,
+  isAllSelected,
+  query,
+  isExperimentalMode,
+}) => {
+  const [rows, setRows] = React.useState([]);
+  const [open, setOpen] = React.useState(false);
+  const [resolutions, setResolutions] = React.useState([]);
+  const [hostsIds, setHostsIds] = React.useState([]);
+  const toggleModal = () => setOpen(prevValue => !prevValue);
+
+  useEffect(() => {
+    if (open) fetchRemediations({ selectedIds, isAllSelected, query });
+  }, [open]);
+
+  useEffect(() => {
+    const modifiedRows =
+      status === STATUS.PENDING
+        ? []
+        : modifyRows(remediations, setResolutions, setHostsIds);
+    setRows(modifiedRows);
+  }, [remediations, status]);
+
+  return (
+    <React.Fragment>
+      <RemediateButton
+        isExperimentalMode={isExperimentalMode}
+        selectedIds={selectedIds}
+        toggleModal={toggleModal}
+      />{' '}
+      <Modal
+        id="remediation-modal"
+        appendTo={document.body}
+        variant={ModalVariant.large}
+        title={__('Remediation summary')}
+        isOpen={open}
+        onClose={toggleModal}
+        footer={
+          <ModalFooter
+            toggleModal={toggleModal}
+            resolutions={resolutions}
+            hostsIds={hostsIds}
+          />
+        }
+      >
+        <Table
+          className="remediations-table"
+          aria-label="remediations Table"
+          cells={columns}
+          rows={rows}
+        >
+          <TableHeader />
+          <TableBody />
+        </Table>
+        <TableEmptyState status={status} error={error} />
+      </Modal>
+    </React.Fragment>
+  );
+};
+
+RemediationModal.propTypes = {
+  selectedIds: PropTypes.object,
+  fetchRemediations: PropTypes.func.isRequired,
+  remediations: PropTypes.array,
+  status: PropTypes.string,
+  error: PropTypes.string,
+  isAllSelected: PropTypes.bool,
+  query: PropTypes.string,
+  isExperimentalMode: PropTypes.bool,
+};
+
+RemediationModal.defaultProps = {
+  selectedIds: {},
+  remediations: [],
+  status: null,
+  error: null,
+  isAllSelected: false,
+  query: null,
+  isExperimentalMode: false,
+};
+
+export default RemediationModal;

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.scss

@@ -0,0 +1,9 @@
+#remediation-modal {
+  height: 80vh;
+
+  .resolution-radio {
+    label {
+      margin-top: 5px;
+    }
+  }
+}

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModalFooter.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { JOB_INVOCATION_PATH } from './RemediationTableConstants';
+
+const ModalFooter = ({ toggleModal, resolutions, hostsIds }) => {
+  let token = document.querySelector('meta[name="csrf-token"]');
+  token = token?.content || '';
+  return (
+    <form action={JOB_INVOCATION_PATH} method="post">
+      <Button type="submit" key="confirm" variant="primary">
+        {__('Remediate')}
+      </Button>
+      <Button key="cancel" variant="link" onClick={toggleModal}>
+        {__('Cancel')}
+      </Button>
+      <input type="hidden" name="feature" value="rh_cloud_remediate_hosts" />
+      <input type="hidden" name="authenticity_token" value={token} />
+      <input
+        type="hidden"
+        name="inputs[hit_remediation_pairs]"
+        value={JSON.stringify(resolutions)}
+      />
+      {hostsIds.map(id => (
+        <input type="hidden" name="host_ids[]" key={id} value={id} />
+      ))}
+    </form>
+  );
+};
+
+ModalFooter.propTypes = {
+  toggleModal: PropTypes.func.isRequired,
+  resolutions: PropTypes.array,
+  hostsIds: PropTypes.array,
+};
+
+ModalFooter.defaultProps = {
+  resolutions: [],
+  hostsIds: [],
+};
+
+export default ModalFooter;

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationTableConstants.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { cellWidth } from '@patternfly/react-table';
+import { CheckCircleIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from '../../../ForemanRhCloudHelpers';
+
+export const rebootFormatter = ({ title: reboot }) => ({
+  children: reboot ? <CheckCircleIcon color="green" /> : __('No'),
+});
+
+export const columns = [
+  {
+    sortKey: 'hostname',
+    title: __('Hostname'),
+    transforms: [cellWidth(20)],
+  },
+  {
+    title: __('Recommendation'),
+    transforms: [cellWidth(35)],
+  },
+  {
+    title: __('Resolution'),
+    transforms: [cellWidth(30)],
+  },
+  {
+    title: __('Reboot Required'),
+    transforms: [cellWidth(15)],
+    cellTransforms: [rebootFormatter],
+  },
+];
+
+export const REMEDIATIONS_PATH = foremanUrl('/insights_cloud/hits/resolutions');
+
+export const JOB_INVOCATION_PATH = foremanUrl('/job_invocations/new');
+
+export const REMEDIATIONS_API_KEY = 'INSIGHTS_REMEDIATIONS';
+
+export const SUBMIT_RESOLUTIONS = 'SUBMIT_INSIGHTS_RESOLUTIONS';

data/webpack/InsightsCloudSync/Components/RemediationModal/Resolutions.js

@@ -0,0 +1,55 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Radio } from '@patternfly/react-core';
+
+const Resolutions = ({
+  resolutions,
+  setResolutions,
+  selectedResolution,
+  hit_id,
+}) => {
+  const [checkedID, setCheckedID] = React.useState(selectedResolution);
+
+  if (resolutions.length === 1) return <>{resolutions[0].description}</>;
+
+  return (
+    <>
+      {resolutions.map(({ id: resolution_id, description }) => (
+        <Radio
+          key={resolution_id}
+          className="resolution-radio"
+          id={resolution_id}
+          isChecked={resolution_id === checkedID}
+          onChange={() =>
+            setResolutions(stateRes =>
+              stateRes.map(res => {
+                if (hit_id === res.hit_id) {
+                  setCheckedID(resolution_id);
+                  return { ...res, resolution_id };
+                }
+                return res;
+              })
+            )
+          }
+          label={description}
+        />
+      ))}
+    </>
+  );
+};
+
+Resolutions.propTypes = {
+  setResolutions: PropTypes.func.isRequired,
+  resolutions: PropTypes.array,
+  hit_id: PropTypes.number,
+  selectedResolution: PropTypes.number,
+};
+
+Resolutions.defaultProps = {
+  resolutions: [],
+  hit_id: null,
+  selectedResolution: null,
+};
+
+export default Resolutions;

data/webpack/InsightsCloudSync/Components/RemediationModal/index.js

@@ -0,0 +1,34 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import {
+  selectAPIResponse,
+  selectAPIStatus,
+  selectAPIErrorMessage,
+} from 'foremanReact/redux/API/APISelectors';
+import * as actions from './RemediationActions';
+import RemediationModal from './RemediationModal';
+import { REMEDIATIONS_API_KEY } from './RemediationTableConstants';
+import {
+  selectExperimental,
+  selectIsAllSelected,
+  selectSearch,
+  selectSelectedIds,
+} from '../InsightsTable/InsightsTableSelectors';
+
+// map state to props
+const mapStateToProps = state => ({
+  selectedIds: selectSelectedIds(state),
+  remediations: selectAPIResponse(state, REMEDIATIONS_API_KEY).hits || [],
+  status: selectAPIStatus(state, REMEDIATIONS_API_KEY),
+  error: selectAPIErrorMessage(state, REMEDIATIONS_API_KEY),
+  itemCount: selectAPIResponse(state, REMEDIATIONS_API_KEY).itemCount || 0,
+  isAllSelected: selectIsAllSelected(state),
+  query: selectSearch(state),
+  isExperimentalMode: selectExperimental(state),
+});
+
+// map action dispatchers to props
+const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
+
+// export connected component
+export default connect(mapStateToProps, mapDispatchToProps)(RemediationModal);

data/webpack/InsightsCloudSync/Components/__tests__/__snapshots__/NoTokenEmptyState.test.js.snap

@@ -190,21 +190,28 @@ exports[`NoTokenEmptyState render 1`] = `
             onClick={[Function]}
             variant="primary"
           >
-            <button
-              aria-disabled={true}
-              aria-label={null}
-              className="pf-c-button pf-m-primary pf-m-disabled"
-              data-ouia-component-id="OUIA-Generated-Button-primary-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={true}
+            <ButtonBase
+              innerRef={null}
+              isDisabled={true}
               onClick={[Function]}
-              role={null}
-              tabIndex={null}
-              type="button"
+              variant="primary"
             >
-              Save setting and sync recommendations
-            </button>
+              <button
+                aria-disabled={true}
+                aria-label={null}
+                className="pf-c-button pf-m-primary pf-m-disabled"
+                data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={true}
+                onClick={[Function]}
+                role={null}
+                tabIndex={null}
+                type="button"
+              >
+                Save setting and sync recommendations
+              </button>
+            </ButtonBase>
           </Button>
         </div>
       </div>