foreman-tasks 0.15.1 → 0.15.2

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card } from 'patternfly-react';
+import classNames from 'classnames';
+import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { TASKS_DASHBOARD_AVAILABLE_QUERY_STATES } from '../../../../TasksDashboardConstants';
+import { queryPropType } from '../../../../TasksDashboardPropTypes';
+import './ScheduledTasksCard.scss';
+
+const ScheduledTasksCard = ({
+  data,
+  className,
+  query,
+  updateQuery,
+  ...props
+}) => {
+  const { SCHEDULED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+  const onClick = () => updateQuery({ state: SCHEDULED });
+
+  return (
+    <Card
+      className={classNames(
+        'tasks-donut-card',
+        'scheduled-tasks-card',
+        className,
+        {
+          'selected-tasks-card': query.state === SCHEDULED,
+        }
+      )}
+      {...props}
+    >
+      <Card.Title onClick={onClick}>{__('Scheduled')}</Card.Title>
+      <Card.Body>
+        <div
+          className={classNames('scheduled-data', {
+            'not-focused': query.state && query.state !== SCHEDULED,
+          })}
+          onClick={onClick}
+        >
+          {data}
+          <p>{__('Total')}</p>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
+ScheduledTasksCard.propTypes = {
+  data: PropTypes.number,
+  query: queryPropType,
+  className: PropTypes.string,
+  updateQuery: PropTypes.func,
+};
+
+ScheduledTasksCard.defaultProps = {
+  data: 0,
+  query: {},
+  className: '',
+  updateQuery: noop,
+};
+
+export default ScheduledTasksCard;

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

@@ -0,0 +1,25 @@
+.scheduled-tasks-card {
+  text-align: center;
+  .not-focused {
+    opacity: 0.3;
+  }
+  .scheduled-data {
+    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;
+    }
+
+    &:hover {
+      transition: font-weight 50ms ease-in;
+      font-weight: 600;
+    }
+  }
+}

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withCardsDecorator } from '../../../../../../../stories/decorators';
+
+import { TASKS_DASHBOARD_AVAILABLE_QUERY_STATES } from '../../../../TasksDashboardConstants';
+import ScheduledTasksCard from './ScheduledTasksCard';
+
+storiesOf('TasksDashboard/TasksCardsGrid', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withCardsDecorator)
+  .add('ScheduledTasksCard', () => {
+    const selectState = select(
+      'query.state',
+      { ...TASKS_DASHBOARD_AVAILABLE_QUERY_STATES, NONE: 'none' },
+      'none'
+    );
+    return (
+      <ScheduledTasksCard
+        data={number('data', 1)}
+        query={{
+          state: selectState,
+        }}
+        updateQuery={action('updateQuery')}
+      />
+    );
+  });

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.test.js

@@ -0,0 +1,18 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import { TASKS_DASHBOARD_AVAILABLE_QUERY_STATES } from '../../../../TasksDashboardConstants';
+import ScheduledTasksCard from './ScheduledTasksCard';
+
+const fixtures = {
+  'render with minimal props': {},
+  'render with props': {
+    data: 3,
+    className: 'some-class',
+  },
+  'render selected': {
+    query: { state: TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.SCHEDULED },
+  },
+};
+
+describe('ScheduledTasksCard', () =>
+  testComponentSnapshotsWithFixtures(ScheduledTasksCard, fixtures));

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/__snapshots__/ScheduledTasksCard.test.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScheduledTasksCard render selected 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card scheduled-tasks-card selected-tasks-card"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  >
+    Scheduled
+  </CardTitle>
+  <CardBody
+    className=""
+  >
+    <div
+      className="scheduled-data"
+      onClick={[Function]}
+    >
+      0
+      <p>
+        Total
+      </p>
+    </div>
+  </CardBody>
+</Card>
+`;
+
+exports[`ScheduledTasksCard render with minimal props 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card scheduled-tasks-card"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  >
+    Scheduled
+  </CardTitle>
+  <CardBody
+    className=""
+  >
+    <div
+      className="scheduled-data"
+      onClick={[Function]}
+    >
+      0
+      <p>
+        Total
+      </p>
+    </div>
+  </CardBody>
+</Card>
+`;
+
+exports[`ScheduledTasksCard render with props 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card scheduled-tasks-card some-class"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  >
+    Scheduled
+  </CardTitle>
+  <CardBody
+    className=""
+  >
+    <div
+      className="scheduled-data"
+      onClick={[Function]}
+    >
+      3
+      <p>
+        Total
+      </p>
+    </div>
+  </CardBody>
+</Card>
+`;

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 {
+  timePropType,
+  queryPropType,
+} from '../../../../TasksDashboardPropTypes';
+import {
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+} from '../../../../TasksDashboardConstants';
+import { getQueryValueText } from '../../../../TasksDashboardHelper';
+import './StoppedTasksCard.scss';
+
+const StoppedTasksCard = ({
+  data,
+  query,
+  time,
+  className,
+  updateQuery,
+  ...props
+}) => {
+  const { STOPPED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+  return (
+    <Card
+      className={classNames(
+        'tasks-donut-card',
+        'stopped-tasks-card',
+        className,
+        {
+          'selected-tasks-card': query.state === STOPPED,
+        }
+      )}
+      {...props}
+    >
+      <Card.Title onClick={() => updateQuery({ state: STOPPED })}>
+        {__('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>
+      </Card.Body>
+    </Card>
+  );
+};
+
+const resultPropType = PropTypes.shape({
+  total: PropTypes.number.isRequired,
+  last: PropTypes.number.isRequired,
+});
+
+StoppedTasksCard.propTypes = {
+  data: PropTypes.shape({
+    error: resultPropType.isRequired,
+    warning: resultPropType.isRequired,
+    success: resultPropType.isRequired,
+  }),
+  time: timePropType,
+  query: queryPropType,
+  className: PropTypes.string,
+  updateQuery: PropTypes.func,
+};
+
+StoppedTasksCard.defaultProps = {
+  data: {
+    error: { total: 0, last: 0 },
+    warning: { total: 0, last: 0 },
+    success: { total: 0, last: 0 },
+  },
+  time: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+  query: {},
+  className: '',
+  updateQuery: noop,
+};
+
+export default StoppedTasksCard;

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

@@ -0,0 +1,46 @@
+.stopped-tasks-card {
+  .stopped-table {
+    width: 100%;
+    border: none;
+    table-layout: fixed;
+
+    .not-focused {
+      opacity: 0.3;
+    }
+
+    thead {
+      background-color: transparent;
+      background-image: none;
+      tr {
+        th {
+          font-weight: bold;
+          border: none;
+        }
+      }
+    }
+
+    td,
+    th {
+      text-align: center;
+      padding-left: 5px;
+      width: 33%;
+
+      &:first-child {
+        text-align: left;
+      }
+    }
+
+    td {
+      &.active {
+        font-weight: bold;
+      }
+    }
+    .data-col {
+      &:hover {
+        cursor: pointer;
+        border: 1px solid #d1d1d1;
+        background-color: #def3fe;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withCardsDecorator } from '../../../../../../../stories/decorators';
+
+import {
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_STATES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
+} from '../../../../TasksDashboardConstants';
+import StoppedTasksCard from './StoppedTasksCard';
+
+storiesOf('TasksDashboard/TasksCardsGrid', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withCardsDecorator)
+  .add('StoppedTasksCard', () => {
+    const selectTime = select(
+      'time',
+      TASKS_DASHBOARD_AVAILABLE_TIMES,
+      StoppedTasksCard.defaultProps.time
+    );
+    const selectState = select(
+      'query.state',
+      { ...TASKS_DASHBOARD_AVAILABLE_QUERY_STATES, NONE: null },
+      TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.STOPPED
+    );
+    const selectResult = select(
+      'query.result',
+      { ...TASKS_DASHBOARD_AVAILABLE_QUERY_RESULTS, NONE: null },
+      null
+    );
+    const selectMode = select(
+      'query.mode',
+      { ...TASKS_DASHBOARD_AVAILABLE_QUERY_MODES, NONE: null },
+      null
+    );
+    return (
+      <div>
+        <link
+          rel="stylesheet"
+          type="text/css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css"
+        />
+        <StoppedTasksCard
+          data={{
+            error: {
+              total: number('errorTotal', 8),
+              last: number('errorLast', 1),
+            },
+            warning: {
+              total: number('warningTotal', 20),
+              last: number('warningLast', 2),
+            },
+            success: {
+              total: number('successTotal', 25),
+              last: number('successLast', 3),
+            },
+          }}
+          time={selectTime}
+          query={{
+            state: selectState,
+            result: selectResult,
+            mode: selectMode,
+            time: selectTime,
+          }}
+          updateQuery={action('updateQuery')}
+        />
+      </div>
+    );
+  });