foreman_rh_cloud 3.0.19 → 3.0.20

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js

@@ -6,7 +6,7 @@ import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 import SelectAllAlert from './SelectAllAlert';
 import { columns } from './InsightsTableConstants';
-import TableEmptyState from './components/EmptyState';
+import TableEmptyState from '../../../common/table/EmptyState';
 import {
   modifySelectedRows,
   getSortColumnIndex,

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableSelectors.js

@@ -76,3 +76,6 @@ export const selectItemCount = state =>
 
 export const selectHasToken = state =>
   selectAPIResponse(state, INSIGHTS_HITS_API_KEY).hasToken;
+
+export const selectExperimental = state =>
+  selectAPIResponse(state, INSIGHTS_HITS_API_KEY).isExperimentalMode;

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

@@ -0,0 +1,59 @@
+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}
+        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/InsightsCloudSync.js

@@ -6,10 +6,12 @@ import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import InsightsHeader from './Components/InsightsHeader';
 import { NoTokenEmptyState } from './Components/NoTokenEmptyState';
 import InsightsTable from './Components/InsightsTable';
+import RemediationModal from './Components/RemediationModal';
 import {
   INSIGHTS_SYNC_PAGE_TITLE,
   INSIGHTS_SEARCH_PROPS,
 } from './InsightsCloudSyncConstants';
+import './InsightsCloudSync.scss';
 
 const InsightsCloudSync = ({
   syncInsights,
@@ -32,9 +34,12 @@ const InsightsCloudSync = ({
         onSearch={nextQuery => fetchInsights({ query: nextQuery, page: 1 })}
         header={INSIGHTS_SYNC_PAGE_TITLE}
         toolbarButtons={
-          <Button variant="primary" onClick={syncInsights}>
-            {__('Start recommendations sync')}
-          </Button>
+          <>
+            <RemediationModal />
+            <Button variant="secondary" onClick={syncInsights}>
+              {__('Start recommendations sync')}
+            </Button>
+          </>
         }
         searchQuery={query}
         beforeToolbarComponent={<InsightsHeader />}