foreman_remote_execution 8.1.2 → 8.2.1

data/webpack/react_app/components/TargetingHosts/TargetingHostsPage.js

@@ -5,14 +5,18 @@ import { Grid } from 'patternfly-react';
 import SearchBar from 'foremanReact/components/SearchBar';
 import Pagination from 'foremanReact/components/Pagination';
 import { getControllerSearchProps } from 'foremanReact/constants';
+import { noop } from 'foremanReact/common/helpers';
 
 import TargetingHosts from './TargetingHosts';
 import { TARGETING_HOSTS_AUTOCOMPLETE } from './TargetingHostsConsts';
 import './TargetingHostsPage.scss';
+import TargetingHostsLabelsRow from './TargetingHostsLabelsRow';
 
 const TargetingHostsPage = ({
   handleSearch,
   searchQuery,
+  statusFilter,
+  statusFilterReset,
   apiStatus,
   items,
   totalHosts,
@@ -23,7 +27,7 @@ const TargetingHostsPage = ({
     <Grid.Row>
       <Grid.Col md={6} className="title_filter">
         <SearchBar
-          onSearch={query => handleSearch(query)}
+          onSearch={query => handleSearch(query, statusFilter)}
           data={{
             ...getControllerSearchProps('hosts', TARGETING_HOSTS_AUTOCOMPLETE),
             autocomplete: {
@@ -37,6 +41,10 @@ const TargetingHostsPage = ({
         />
       </Grid.Col>
     </Grid.Row>
+    <TargetingHostsLabelsRow
+      query={statusFilter}
+      updateQuery={statusFilterReset}
+    />
     <br />
     <TargetingHosts apiStatus={apiStatus} items={items} />
     <Pagination
@@ -53,6 +61,8 @@ TargetingHostsPage.propTypes = {
   handleSearch: PropTypes.func.isRequired,
   searchQuery: PropTypes.string.isRequired,
   apiStatus: PropTypes.string,
+  statusFilter: PropTypes.object,
+  statusFilterReset: PropTypes.func,
   items: PropTypes.array.isRequired,
   totalHosts: PropTypes.number.isRequired,
   handlePagination: PropTypes.func.isRequired,
@@ -61,6 +71,8 @@ TargetingHostsPage.propTypes = {
 
 TargetingHostsPage.defaultProps = {
   apiStatus: null,
+  statusFilter: {},
+  statusFilterReset: noop,
 };
 
 export default TargetingHostsPage;

data/webpack/react_app/components/TargetingHosts/TargetingHostsSelectors.js

@@ -18,3 +18,8 @@ export const selectTotalHosts = state =>
 
 export const selectIntervalExists = state =>
   selectDoesIntervalExist(state, TARGETING_HOSTS);
+
+const defaultStatusFilter = {};
+export const selectStatusFilter = state =>
+  state.foremanRemoteExecutionReducers.jobInvocations
+    .jobInvocationStateFilter || defaultStatusFilter;

data/webpack/react_app/components/TargetingHosts/__tests__/__snapshots__/TargetingHostsPage.test.js.snap

@@ -38,6 +38,9 @@ exports[`TargetingHostsPage renders 1`] = `
       />
     </Col>
   </Row>
+  <TargetingHostsLabelsRow
+    query={Object {}}
+  />
   <br />
   <TargetingHosts
     apiStatus="RESOLVED"

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

@@ -14,10 +14,23 @@ import {
   selectAutoRefresh,
   selectTotalHosts,
   selectIntervalExists,
+  selectStatusFilter,
 } from './TargetingHostsSelectors';
 import { getApiUrl } from './TargetingHostsHelpers';
 import { TARGETING_HOSTS } from './TargetingHostsConsts';
 import TargetingHostsPage from './TargetingHostsPage';
+import { chartFilter } from '../../redux/actions/jobInvocations';
+
+const buildSearchQuery = (query, stateFilter) => {
+  const filters = Object.entries(stateFilter).map(
+    ([key, value]) => `${key} = ${value}`
+  );
+  return [query, filters]
+    .flat()
+    .filter(x => x)
+    .map(x => `(${x})`)
+    .join(' AND ');
+};
 
 const WrappedTargetingHosts = () => {
   const dispatch = useDispatch();
@@ -27,6 +40,7 @@ const WrappedTargetingHosts = () => {
   const items = useSelector(selectItems);
   const apiStatus = useSelector(selectApiStatus);
   const totalHosts = useSelector(selectTotalHosts);
+  const statusFilter = useSelector(selectStatusFilter);
   const [searchQuery, setSearchQuery] = useState('');
   const [pagination, setPagination] = useState({
     page: 1,
@@ -36,11 +50,11 @@ const WrappedTargetingHosts = () => {
   const [apiUrl, setApiUrl] = useState(getApiUrl(searchQuery, pagination));
   const intervalExists = useSelector(selectIntervalExists);
 
-  const handleSearch = query => {
+  const handleSearch = (query, status) => {
     const defaultPagination = { page: 1, per_page: pagination.per_page };
     stopApiInterval();
 
-    setApiUrl(getApiUrl(query, defaultPagination));
+    setApiUrl(getApiUrl(buildSearchQuery(query, status), defaultPagination));
     setSearchQuery(query);
     setPagination(defaultPagination);
   };
@@ -48,7 +62,7 @@ const WrappedTargetingHosts = () => {
   const handlePagination = args => {
     stopApiInterval();
     setPagination(args);
-    setApiUrl(getApiUrl(searchQuery, args));
+    setApiUrl(getApiUrl(buildSearchQuery(searchQuery, statusFilter), args));
   };
 
   const stopApiInterval = () => {
@@ -81,10 +95,16 @@ const WrappedTargetingHosts = () => {
     };
   }, [dispatch, apiUrl, autoRefresh]);
 
+  useEffect(() => {
+    handleSearch(searchQuery, statusFilter);
+  }, [statusFilter, searchQuery]);
+
   return (
     <TargetingHostsPage
       handleSearch={handleSearch}
       searchQuery={searchQuery}
+      statusFilter={statusFilter}
+      statusFilterReset={_x => chartFilter(null)(dispatch, null)}
       apiStatus={apiStatus}
       items={items}
       totalHosts={totalHosts}

data/webpack/react_app/components/jobInvocations/AggregateStatus/index.js

@@ -1,33 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const AggregateStatus = ({ statuses }) => (
+const AggregateStatus = ({ statuses, chartFilter }) => (
   <div id="aggregate_statuses">
     <p className="card-pf-aggregate-status-notifications">
-      <span className="card-pf-aggregate-status-notification">
+      <a
+        className="card-pf-aggregate-status-notification"
+        onClick={() => chartFilter('success')}
+      >
         <span id="success_count">
           <span className="pficon pficon-ok" />
           {statuses.success}
         </span>
-      </span>
-      <span className="card-pf-aggregate-status-notification">
+      </a>
+
+      <a
+        className="card-pf-aggregate-status-notification"
+        onClick={() => chartFilter('failed')}
+      >
         <span id="failed_count">
           <span className="pficon pficon-error-circle-o" />
           {statuses.failed}
         </span>
-      </span>
-      <span className="card-pf-aggregate-status-notification">
+      </a>
+
+      <a
+        className="card-pf-aggregate-status-notification"
+        onClick={() => chartFilter('pending')}
+      >
         <span id="pending_count">
           <span className="pficon pficon-running" />
           {statuses.pending}
         </span>
-      </span>
-      <span className="card-pf-aggregate-status-notification">
+      </a>
+
+      <a
+        className="card-pf-aggregate-status-notification"
+        onClick={() => chartFilter('cancelled')}
+      >
         <span id="cancelled_count">
           <span className="pficon pficon-close" />
           {statuses.cancelled}
         </span>
-      </span>
+      </a>
     </p>
   </div>
 );
@@ -39,6 +54,7 @@ AggregateStatus.propTypes = {
     pending: PropTypes.number,
     success: PropTypes.number,
   }).isRequired,
+  chartFilter: PropTypes.func.isRequired,
 };
 
 export default AggregateStatus;

data/webpack/react_app/components/jobInvocations/AggregateStatus/index.test.js

@@ -7,7 +7,9 @@ jest.unmock('./index.js');
 describe('AggregateStatus', () => {
   describe('has no data', () => {
     it('renders cards with no data', () => {
-      const chartNumbers = shallow(<AggregateStatus statuses={{}} />);
+      const chartNumbers = shallow(
+        <AggregateStatus statuses={{}} chartFilter={_x => {}} />
+      );
       const success = chartNumbers.find('#success_count').text();
       const failed = chartNumbers.find('#failed_count').text();
       const pending = chartNumbers.find('#pending_count').text();
@@ -25,7 +27,9 @@ describe('AggregateStatus', () => {
         cancelled: 31,
         pending: 3,
       };
-      const chartNumbers = shallow(<AggregateStatus statuses={statuses} />);
+      const chartNumbers = shallow(
+        <AggregateStatus statuses={statuses} chartFilter={_x => {}} />
+      );
       const success = chartNumbers.find('#success_count').text();
       const failed = chartNumbers.find('#failed_count').text();
       const pending = chartNumbers.find('#pending_count').text();

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

@@ -10,6 +10,13 @@ import * as JobInvocationActions from '../../redux/actions/jobInvocations';
 const colIndexOfMaxValue = columns =>
   columns.reduce((iMax, x, i, arr) => (x[1] > arr[iMax][1] ? i : iMax), 0);
 
+const colorMap = {
+  '#5CB85C': 'success',
+  '#D9534F': 'failed',
+  '#DEDEDE': 'pending',
+  '#B7312D': 'cancelled',
+};
+
 class JobInvocationContainer extends React.Component {
   componentDidMount() {
     const {
@@ -21,9 +28,14 @@ class JobInvocationContainer extends React.Component {
   }
 
   render() {
-    const { jobInvocations, statuses } = this.props;
+    const { jobInvocations, statuses, chartFilter } = this.props;
     const iMax = colIndexOfMaxValue(jobInvocations);
 
+    const map = jobInvocations.reduce(
+      (acc, [label, _count, color]) => ({ [label]: colorMap[color], ...acc }),
+      {}
+    );
+
     return (
       <div id="job_invocations_chart_container">
         <DonutChart
@@ -32,8 +44,11 @@ class JobInvocationContainer extends React.Component {
             type: 'percent',
             secondary: (jobInvocations[iMax] || [])[0],
           }}
+          onclick={(d, element) => {
+            chartFilter(map[d.name]);
+          }}
         />
-        <AggregateStatus statuses={statuses} />
+        <AggregateStatus statuses={statuses} chartFilter={chartFilter} />
       </div>
     );
   }
@@ -63,10 +78,12 @@ JobInvocationContainer.propTypes = {
     pending: PropTypes.number,
     success: PropTypes.number,
   }),
+  chartFilter: PropTypes.func,
 };
 
 JobInvocationContainer.defaultProps = {
   startJobInvocationsPolling: JobInvocationActions.startJobInvocationsPolling,
+  chartFilter: JobInvocationActions.chartFilter,
   data: {},
   jobInvocations: [['property', 3, 'color']],
   statuses: {},

data/webpack/react_app/redux/actions/jobInvocations/index.js

@@ -76,3 +76,11 @@ export const startJobInvocationsPolling = url => (dispatch, getState) => {
   });
   dispatch(getJobInvocations(url));
 };
+
+export const chartFilter = state => (dispatch, getState) => {
+  const filter = state ? { 'job_invocation.result': state.toLowerCase() } : {};
+  dispatch({
+    type: 'JOB_INVOCATION_CHART_FILTER',
+    payload: { filter },
+  });
+};

data/webpack/react_app/redux/reducers/jobInvocations/index.js

@@ -26,6 +26,8 @@ export default (state = initialState, action) => {
       return state
         .set('jobInvocations', payload.jobInvocations.job_invocations)
         .set('statuses', payload.jobInvocations.statuses);
+    case 'JOB_INVOCATION_CHART_FILTER':
+      return state.set('jobInvocationStateFilter', payload.filter);
     default:
       return state;
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: foreman_remote_execution
 version: !ruby/object:Gem::Version
-  version: 8.1.2
+  version: 8.2.1
 platform: ruby
 authors:
 - Foreman Remote Execution team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-13 00:00:00.000000000 Z
+date: 2023-02-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: deface
@@ -508,6 +508,8 @@ files:
 - webpack/react_app/components/TargetingHosts/TargetingHosts.js
 - webpack/react_app/components/TargetingHosts/TargetingHostsConsts.js
 - webpack/react_app/components/TargetingHosts/TargetingHostsHelpers.js
+- webpack/react_app/components/TargetingHosts/TargetingHostsLabelsRow.js
+- webpack/react_app/components/TargetingHosts/TargetingHostsLabelsRow.scss
 - webpack/react_app/components/TargetingHosts/TargetingHostsPage.js
 - webpack/react_app/components/TargetingHosts/TargetingHostsPage.scss
 - webpack/react_app/components/TargetingHosts/TargetingHostsSelectors.js