Fixes #30633 - Stopped chart doesnt count cancelled

app/services/foreman_tasks/dashboard_table_filter.rb

@@ -24,7 +24,11 @@ def scope
     private
 
     def scope_by(field)
-      @new_scope = @new_scope.where(field => @params[field]) if @params[field].present?
+      if (field == :result) && (@params[field] == 'other')
+        @new_scope = @new_scope.where(:result => ['cancelled', 'pending'])
+      elsif @params[field].present?
+        @new_scope = @new_scope.where(field => @params[field])
+      end
     end
 
     def scope_by_time

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.scss

@@ -1,15 +1,19 @@
 .scheduled-tasks-card {
   text-align: center;
+
   .scheduled-data {
+    margin-top: 30px;
     padding-right: 15px;
     cursor: pointer;
     font-size: 40px;
     font-weight: 300;
     transition: font-weight 50ms ease-in;
+
     p {
       font-size: 20px;
       margin: 0;
     }
+
     * {
       margin: 10px;
     }

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/OtherInfo.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { Icon, Button, OverlayTrigger, Tooltip } from 'patternfly-react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS,
+} from '../../../../TasksDashboardConstants';
+import { queryPropType } from '../../../../TasksDashboardPropTypes';
+
+const tooltip = (
+  <Tooltip id="stopped-tooltip">
+    {__('Other includes all stopped tasks that are cancelled or pending')}
+  </Tooltip>
+);
+
+export const OtherInfo = ({ updateQuery, otherCount, query }) => {
+  const { OTHER } = TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS;
+  const { STOPPED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+  const active = query.state === STOPPED && query.result === OTHER;
+  return (
+    <span className={classNames(active && 'other-active')}>
+      <OverlayTrigger
+        overlay={tooltip}
+        trigger={['hover', 'focus']}
+        placement="bottom"
+      >
+        <span>
+          <Icon type="pf" name="info" />
+          <span>{__('Other:')} </span>
+        </span>
+      </OverlayTrigger>
+      <Button
+        bsStyle="link"
+        onClick={() =>
+          updateQuery({
+            state: STOPPED,
+            result: OTHER,
+          })
+        }
+      >
+        {otherCount}
+      </Button>
+    </span>
+  );
+};
+OtherInfo.propTypes = {
+  updateQuery: PropTypes.func.isRequired,
+  otherCount: PropTypes.number.isRequired,
+  query: queryPropType.isRequired,
+};

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/OtherInfo.test.js

@@ -0,0 +1,14 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import { OtherInfo } from './OtherInfo';
+
+const fixtures = {
+  render: {
+    updateQuery: jest.fn,
+    otherCount: 7,
+    query: { state: 'STOPPED', result: 'OTHER' },
+  },
+};
+
+describe('OtherInfo', () =>
+  testComponentSnapshotsWithFixtures(OtherInfo, fixtures));

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.js

@@ -4,8 +4,8 @@ import { Card } from 'patternfly-react';
 import classNames from 'classnames';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
-
-import { StoppedTable } from './StoppedTasksCardHelper';
+import { OtherInfo } from './OtherInfo';
+import { StoppedTable } from './StoppedTasksCardTable';
 import {
   timePropType,
   queryPropType,
@@ -14,7 +14,6 @@ import {
   TASKS_DASHBOARD_AVAILABLE_TIMES,
   TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
 } from '../../../../TasksDashboardConstants';
-import { getQueryValueText } from '../../../../TasksDashboardHelper';
 import './StoppedTasksCard.scss';
 
 const StoppedTasksCard = ({
@@ -44,16 +43,19 @@ const StoppedTasksCard = ({
         {__('Stopped')}
       </Card.Title>
       <Card.Body>
-        <table className="table table-bordered table-striped stopped-table">
-          <thead>
-            <tr>
-              <th />
-              <th>{__('Total')}</th>
-              <th>{getQueryValueText(time)}</th>
-            </tr>
-          </thead>
-          <tbody>{StoppedTable(data, query, time, updateQuery)}</tbody>
-        </table>
+        <React.Fragment>
+          <StoppedTable
+            data={data.results}
+            query={query}
+            time={time}
+            updateQuery={updateQuery}
+          />
+          <OtherInfo
+            updateQuery={updateQuery}
+            otherCount={data.other}
+            query={query}
+          />
+        </React.Fragment>
       </Card.Body>
     </Card>
   );
@@ -66,9 +68,12 @@ const resultPropType = PropTypes.shape({
 
 StoppedTasksCard.propTypes = {
   data: PropTypes.shape({
-    error: resultPropType.isRequired,
-    warning: resultPropType.isRequired,
-    success: resultPropType.isRequired,
+    results: PropTypes.shape({
+      error: resultPropType.isRequired,
+      warning: resultPropType.isRequired,
+      success: resultPropType.isRequired,
+    }),
+    other: PropTypes.number,
   }),
   time: timePropType,
   query: queryPropType,
@@ -78,9 +83,12 @@ StoppedTasksCard.propTypes = {
 
 StoppedTasksCard.defaultProps = {
   data: {
-    error: { total: 0, last: 0 },
-    warning: { total: 0, last: 0 },
-    success: { total: 0, last: 0 },
+    results: {
+      error: { total: 0, last: 0 },
+      warning: { total: 0, last: 0 },
+      success: { total: 0, last: 0 },
+    },
+    other: 0,
   },
   time: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
   query: {},

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.scss

@@ -39,4 +39,18 @@
       }
     }
   }
+
+  .other-active {
+    text-decoration: underline;
+  }
+
+  .pficon {
+    margin-right: 5px;
+  }
+
+  .btn-link {
+    font-size: 14px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.test.js

@@ -1,48 +1,15 @@
 import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-import {
-  TASKS_DASHBOARD_AVAILABLE_TIMES,
-  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
-  TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
-  TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS,
-} from '../../../../TasksDashboardConstants';
+import { TASKS_DASHBOARD_AVAILABLE_QUERY_STATES } from '../../../../TasksDashboardConstants';
 import StoppedTasksCard from './StoppedTasksCard';
 
 const { STOPPED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
-const { LAST } = TASKS_DASHBOARD_AVAILABLE_QUERY_MODES;
-const { WEEK } = TASKS_DASHBOARD_AVAILABLE_TIMES;
 
 const fixtures = {
   'render with minimal props': {},
-  'render with props': {
-    data: {
-      error: { total: 9, last: 1 },
-      warning: { total: 8, last: 2 },
-      success: { total: 7, last: 3 },
-    },
-    time: WEEK,
-  },
   'render selected': {
     query: { state: STOPPED },
   },
 };
 
-Object.values(TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS).forEach(result => {
-  fixtures[`render ${result}-total selected`] = {
-    query: {
-      state: STOPPED,
-      result,
-    },
-  };
-  fixtures[`render ${result}-last selected`] = {
-    time: WEEK,
-    query: {
-      state: STOPPED,
-      result,
-      mode: LAST,
-      time: WEEK,
-    },
-  };
-});
-
 describe('StoppedTasksCard', () =>
   testComponentSnapshotsWithFixtures(StoppedTasksCard, fixtures));

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCardHelper.js → webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCardTable.js

@@ -1,19 +1,26 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { capitalize } from 'lodash';
 import classNames from 'classnames';
 import { Icon, Button } from 'patternfly-react';
+import { translate as __ } from 'foremanReact/common/I18n';
 import {
   TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
   TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
 } from '../../../../TasksDashboardConstants';
+import { getQueryValueText } from '../../../../TasksDashboardHelper';
+import {
+  timePropType,
+  queryPropType,
+} from '../../../../TasksDashboardPropTypes';
 
 const resultIcons = {
   error: <Icon type="pf" name="error-circle-o" />,
   warning: <Icon type="pf" name="warning-triangle-o" />,
   success: <Icon type="pf" name="ok" />,
 };
 
-export const StoppedTable = (data, query, time, updateQuery) =>
+const StoppedTableCells = (data, query, time, updateQuery) =>
   Object.entries(data).map(([result, { total, last }]) => {
     const { STOPPED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
     const { LAST } = TASKS_DASHBOARD_AVAILABLE_QUERY_MODES;
@@ -61,3 +68,23 @@ export const StoppedTable = (data, query, time, updateQuery) =>
       </tr>
     );
   });
+
+export const StoppedTable = ({ data, query, time, updateQuery }) => (
+  <table className="table table-bordered table-striped stopped-table">
+    <thead>
+      <tr>
+        <th />
+        <th>{__('Total')}</th>
+        <th>{getQueryValueText(time)}</th>
+      </tr>
+    </thead>
+    <tbody>{StoppedTableCells(data, query, time, updateQuery)}</tbody>
+  </table>
+);
+
+StoppedTable.propTypes = {
+  data: PropTypes.object.isRequired,
+  query: queryPropType.isRequired,
+  time: timePropType.isRequired,
+  updateQuery: PropTypes.func.isRequired,
+};

webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCardTable.test.js

@@ -0,0 +1,54 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import { StoppedTable } from './StoppedTasksCardTable';
+import {
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS,
+} from '../../../../TasksDashboardConstants';
+
+const { STOPPED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+const { LAST } = TASKS_DASHBOARD_AVAILABLE_QUERY_MODES;
+const { WEEK } = TASKS_DASHBOARD_AVAILABLE_TIMES;
+const data = {
+  error: { total: 9, last: 1 },
+  warning: { total: 8, last: 2 },
+  success: { total: 7, last: 3 },
+};
+const fixtures = {
+  'render with props': {
+    data,
+    time: WEEK,
+    query: {},
+    updateQuery: jest.fn(),
+  },
+};
+
+Object.values(TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS)
+  .filter(result => result !== TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS.OTHER)
+  .forEach(result => {
+    fixtures[`render ${result}-total selected`] = {
+      query: {
+        state: STOPPED,
+        result,
+      },
+      updateQuery: jest.fn(),
+      data,
+      time: WEEK,
+    };
+    fixtures[`render ${result}-last selected`] = {
+      time: WEEK,
+      query: {
+        state: STOPPED,
+        result,
+        mode: LAST,
+        time: WEEK,
+      },
+      updateQuery: jest.fn(),
+      data,
+    };
+  });
+
+describe('StoppedTable', () =>
+  testComponentSnapshotsWithFixtures(StoppedTable, fixtures));