Fixes #34260 - add rex features dropdown to host page

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "paths": {
+      "foremanReact/*": ["../foreman/webpack/assets/javascripts/react_app/*"]
+    }
+  }
+}

package.json

@@ -21,20 +21,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.0",
-    "@theforeman/builder": "^8.16.0",
-    "@theforeman/eslint-plugin-foreman": "^8.16.0",
-    "@theforeman/stories": "^8.16.0",
-    "@theforeman/test": "^8.16.0",
-    "@theforeman/vendor-dev": "^8.16.0",
+    "@theforeman/builder": "^10.1.0",
+    "@theforeman/eslint-plugin-foreman": "^10.1.0",
+    "@theforeman/stories": "^10.1.0",
+    "@theforeman/test": "^10.1.0",
+    "@theforeman/vendor-dev": "^10.1.0",
     "babel-eslint": "^10.0.0",
     "eslint": "^6.8.0",
     "prettier": "^1.19.1",
-    "@patternfly/react-catalog-view-extension": "^4.8.126",
     "redux-mock-store": "^1.2.2",
     "graphql-tag": "^2.11.0",
     "graphql": "^15.5.0"
   },
   "peerDependencies": {
-    "@theforeman/vendor": "^8.16.0"
+    "@theforeman/vendor": "^10.1.0"
   }
 }

webpack/global_index.js

@@ -2,9 +2,11 @@ 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 fillFeaturesDropdown from './react_app/extend/fillRexFeaturesDropdown';
 import registerReducers from './react_app/extend/reducers';
 
 registerReducers();
 registerRoutes('foreman_remote_execution', routes);
+fillFeaturesDropdown();
 fillRecentJobsCard();
 fillregistrationAdvanced();

webpack/react_app/components/FeaturesDropdown/actions.js

@@ -0,0 +1,13 @@
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { post } from 'foremanReact/redux/API';
+
+export const runFeature = (hostId, feature, label) => dispatch => {
+  const url = foremanUrl(
+    `/job_invocations?feature=${feature}&host_ids%5B%5D=${hostId}`
+  );
+
+  const successToast = () => sprintf(__('%s job has been invoked'), label);
+  const errorToast = ({ message }) => message;
+  dispatch(post({ key: feature.toUpperCase(), url, successToast, errorToast }));
+};

webpack/react_app/components/FeaturesDropdown/constant.js

@@ -0,0 +1,2 @@
+export const REX_FEATURES_API = '/api/remote_execution_features';
+export const NEW_JOB_PAGE = '/job_invocations/new?host_ids%5B%5D';

webpack/react_app/components/FeaturesDropdown/index.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  DropdownItem,
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleAction,
+} from '@patternfly/react-core';
+import { push } from 'connected-react-router';
+
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { STATUS } from 'foremanReact/constants';
+
+import { REX_FEATURES_API, NEW_JOB_PAGE } from './constant';
+import { runFeature } from './actions';
+
+const FeaturesDropdown = ({ hostId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    response: { results: features },
+    status,
+  } = useAPI('get', foremanUrl(REX_FEATURES_API));
+  const dispatch = useDispatch();
+  const dropdownItems = features
+    ?.filter(feature => feature.host_action_button)
+    ?.map(({ name, label, id, description }) => (
+      <DropdownItem
+        onClick={() => dispatch(runFeature(hostId, label, name))}
+        key={id}
+        description={description}
+      >
+        {name}
+      </DropdownItem>
+    ));
+  const scheduleJob = [
+    <DropdownToggleAction
+      onClick={() => dispatch(push(`${NEW_JOB_PAGE}=${hostId}`))}
+      key="schedule-job-action"
+    >
+      {__('Schedule a job')}
+    </DropdownToggleAction>,
+  ];
+
+  return (
+    <Dropdown
+      alignments={{ default: 'right' }}
+      onSelect={() => setIsOpen(false)}
+      toggle={
+        <DropdownToggle
+          splitButtonItems={scheduleJob}
+          toggleVariant="primary"
+          onToggle={() => setIsOpen(prev => !prev)}
+          isDisabled={status === STATUS.PENDING}
+          splitButtonVariant="action"
+        />
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+FeaturesDropdown.propTypes = {
+  hostId: PropTypes.string,
+};
+FeaturesDropdown.defaultProps = {
+  hostId: undefined,
+};
+
+export default FeaturesDropdown;

webpack/react_app/components/RecentJobsCard/RecentJobsCard.js

@@ -52,7 +52,12 @@ const RecentJobsCard = ({ hostDetails: { name, id } }) => {
         </DropdownItem>,
       ]}
     >
-      <Tabs mountOnEnter activeKey={activeTab} onSelect={handleTabClick}>
+      <Tabs
+        mountOnEnter
+        unmountOnExit
+        activeKey={activeTab}
+        onSelect={handleTabClick}
+      >
         <Tab
           eventKey={FINISHED_TAB}
           title={<TabTitleText>{__('Finished')}</TabTitleText>}

webpack/react_app/components/RecentJobsCard/RecentJobsTable.js

@@ -19,7 +19,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 
 import JobStatusIcon from './JobStatusIcon';
-import { JOB_API_URL, JOBS_IN_CARD } from './constants';
+import { JOB_API_URL, JOBS_IN_CARD, RECENT_JOBS_KEY } from './constants';
 
 const RecentJobsTable = ({ status, hostId }) => {
   const jobsUrl =
@@ -30,7 +30,7 @@ const RecentJobsTable = ({ status, hostId }) => {
   const {
     response: { results: jobs },
     status: responseStatus,
-  } = useAPI('get', jobsUrl);
+  } = useAPI('get', jobsUrl, RECENT_JOBS_KEY);
 
   return (
     <DataList aria-label="recent-jobs-table" isCompact>

webpack/react_app/components/RecentJobsCard/constants.js

@@ -10,3 +10,4 @@ export const JOB_BASE_URL = '/job_invocations?search=host+%3D+';
 export const JOB_API_URL =
   '/api/job_invocations?order=start_at+DESC&search=targeted_host_id%3D';
 export const JOBS_IN_CARD = 3;
+export const RECENT_JOBS_KEY = { key: 'RECENT_JOBS_KEY' };

webpack/react_app/extend/fillRexFeaturesDropdown.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+import FeaturesDropdown from '../components/FeaturesDropdown';
+
+export default () =>
+  addGlobalFill(
+    '_rex-host-features',
+    '_rex-host-features',
+    <FeaturesDropdown key="_rex-host-features" />,
+    1000
+  );