foreman-tasks 0.15.1 → 0.15.2

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Card } from 'patternfly-react';
+import { noop } from 'foremanReact/common/helpers';
+
+import {
+  TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+  TASKS_DASHBOARD_CURRENT_TIME,
+} from '../../../../TasksDashboardConstants';
+import { getQueryValueText } from '../../../../TasksDashboardHelper';
+import {
+  timePropType,
+  queryPropType,
+} from '../../../../TasksDashboardPropTypes';
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from '../TasksDonutChart/TasksDonutChartConstants';
+import { getFocusedOn } from '../TasksDonutChart/TasksDonutChartHelper';
+import TasksDonutChart from '../TasksDonutChart/TasksDonutChart';
+import './TasksDonutCard.scss';
+
+const TasksDonutCard = ({
+  title,
+  data,
+  query,
+  wantedQueryState,
+  className,
+  time,
+  updateQuery,
+  ...props
+}) => {
+  const { LAST, OLDER } = TASKS_DASHBOARD_AVAILABLE_QUERY_MODES;
+  const focusedOn = getFocusedOn(query, wantedQueryState, time);
+  const onTotalClick = () => updateQuery({ state: wantedQueryState });
+
+  return (
+    <Card
+      className={classNames('tasks-donut-card', className, {
+        'selected-tasks-card':
+          focusedOn !== TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NORMAL &&
+          focusedOn !== TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NONE,
+      })}
+      {...props}
+    >
+      <Card.Title onClick={onTotalClick}>{title}</Card.Title>
+      <Card.Body>
+        <TasksDonutChart
+          last={data.last}
+          older={data.older}
+          time={getQueryValueText(time)}
+          focusedOn={focusedOn}
+          onTotalClick={onTotalClick}
+          onLastClick={() =>
+            updateQuery({
+              state: wantedQueryState,
+              mode: LAST,
+              time: TASKS_DASHBOARD_CURRENT_TIME,
+            })
+          }
+          onOlderClick={() =>
+            updateQuery({
+              state: wantedQueryState,
+              mode: OLDER,
+              time: TASKS_DASHBOARD_CURRENT_TIME,
+            })
+          }
+        />
+      </Card.Body>
+    </Card>
+  );
+};
+
+TasksDonutCard.propTypes = {
+  title: PropTypes.string,
+  data: PropTypes.shape({
+    last: PropTypes.number.isRequired,
+    older: PropTypes.number.isRequired,
+  }),
+  time: timePropType,
+  query: queryPropType,
+  wantedQueryState: PropTypes.string,
+  className: PropTypes.string,
+  updateQuery: PropTypes.func,
+};
+
+TasksDonutCard.defaultProps = {
+  title: '',
+  data: { last: 0, older: 0 },
+  query: {},
+  wantedQueryState: '',
+  time: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+  className: '',
+  updateQuery: noop,
+};
+
+export default TasksDonutCard;

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

@@ -0,0 +1,17 @@
+.tasks-donut-card {
+  .card-pf-title {
+    text-align: center;
+    font-size: 180%;
+    cursor: pointer;
+  }
+
+  .card-pf-body {
+    padding-left: 15px;
+  }
+
+  &.selected-tasks-card {
+    .card-pf-title {
+      font-weight: bold;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, text, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withCardsDecorator } from '../../../../../../../stories/decorators';
+
+import {
+  TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+} from '../../../../TasksDashboardConstants';
+import TasksDonutCard from './TasksDonutCard';
+
+storiesOf('TasksDashboard/TasksCardsGrid', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withCardsDecorator)
+  .add('TasksDonutCard', () => {
+    const selectTime = select(
+      'time',
+      TASKS_DASHBOARD_AVAILABLE_TIMES,
+      TasksDonutCard.defaultProps.time
+    );
+
+    const selectMode = select(
+      'mode',
+      { ...TASKS_DASHBOARD_AVAILABLE_QUERY_MODES, NONE: 'none' },
+      'none'
+    );
+
+    return (
+      <TasksDonutCard
+        title={text('title', 'Some Title')}
+        data={{
+          last: number('data.last', 3),
+          older: number('data.older', 5),
+        }}
+        time={selectTime}
+        query={{
+          state: text('query.state', 'some-state'),
+          mode: selectMode,
+          time: selectTime,
+        }}
+        wantedQueryState={text('wantedQueryState', 'wanted-state')}
+        updateQuery={action('updateQuery')}
+      />
+    );
+  });

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

@@ -0,0 +1,43 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import {
+  TASKS_DASHBOARD_AVAILABLE_TIMES,
+  TASKS_DASHBOARD_AVAILABLE_QUERY_MODES,
+} from '../../../../TasksDashboardConstants';
+import TasksDonutCard from './TasksDonutCard';
+
+const fixtures = {
+  'render with minimal props': {},
+  'render with props': {
+    title: 'some title',
+    time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    wantedQueryState: 'some-state',
+    className: 'some-classname',
+    data: { last: 3, older: 5 },
+  },
+  'render with total selected': {
+    wantedQueryState: 'some-state',
+    query: { state: 'some-state' },
+  },
+  'render with last selected': {
+    wantedQueryState: 'some-state',
+    time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    query: {
+      state: 'some-state',
+      mode: TASKS_DASHBOARD_AVAILABLE_QUERY_MODES.LAST,
+      time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    },
+  },
+  'render with older selected': {
+    wantedQueryState: 'some-state',
+    time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    query: {
+      state: 'some-state',
+      mode: TASKS_DASHBOARD_AVAILABLE_QUERY_MODES.OLDER,
+      time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    },
+  },
+};
+
+describe('TasksDonutCard', () =>
+  testComponentSnapshotsWithFixtures(TasksDonutCard, fixtures));

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

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TasksDonutCard render with last selected 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card selected-tasks-card"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  />
+  <CardBody
+    className=""
+  >
+    <TasksDonutChart
+      className=""
+      colorsPattern={
+        Array [
+          "#C315C7",
+          "#0089C9",
+        ]
+      }
+      focusedOn="last"
+      last={0}
+      older={0}
+      onLastClick={[Function]}
+      onOlderClick={[Function]}
+      onTotalClick={[Function]}
+      time="week"
+    />
+  </CardBody>
+</Card>
+`;
+
+exports[`TasksDonutCard render with minimal props 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  />
+  <CardBody
+    className=""
+  >
+    <TasksDonutChart
+      className=""
+      colorsPattern={
+        Array [
+          "#C315C7",
+          "#0089C9",
+        ]
+      }
+      focusedOn="normal"
+      last={0}
+      older={0}
+      onLastClick={[Function]}
+      onOlderClick={[Function]}
+      onTotalClick={[Function]}
+      time="24h"
+    />
+  </CardBody>
+</Card>
+`;
+
+exports[`TasksDonutCard render with older selected 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card selected-tasks-card"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  />
+  <CardBody
+    className=""
+  >
+    <TasksDonutChart
+      className=""
+      colorsPattern={
+        Array [
+          "#C315C7",
+          "#0089C9",
+        ]
+      }
+      focusedOn="older"
+      last={0}
+      older={0}
+      onLastClick={[Function]}
+      onOlderClick={[Function]}
+      onTotalClick={[Function]}
+      time="week"
+    />
+  </CardBody>
+</Card>
+`;
+
+exports[`TasksDonutCard render with props 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card some-classname"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  >
+    some title
+  </CardTitle>
+  <CardBody
+    className=""
+  >
+    <TasksDonutChart
+      className=""
+      colorsPattern={
+        Array [
+          "#C315C7",
+          "#0089C9",
+        ]
+      }
+      focusedOn="normal"
+      last={3}
+      older={5}
+      onLastClick={[Function]}
+      onOlderClick={[Function]}
+      onTotalClick={[Function]}
+      time="week"
+    />
+  </CardBody>
+</Card>
+`;
+
+exports[`TasksDonutCard render with total selected 1`] = `
+<Card
+  accented={false}
+  aggregated={false}
+  aggregatedMini={false}
+  cardRef={null}
+  className="tasks-donut-card selected-tasks-card"
+  matchHeight={false}
+>
+  <CardTitle
+    className=""
+    onClick={[Function]}
+  />
+  <CardBody
+    className=""
+  >
+    <TasksDonutChart
+      className=""
+      colorsPattern={
+        Array [
+          "#C315C7",
+          "#0089C9",
+        ]
+      }
+      focusedOn="total"
+      last={0}
+      older={0}
+      onLastClick={[Function]}
+      onOlderClick={[Function]}
+      onTotalClick={[Function]}
+      time="24h"
+    />
+  </CardBody>
+</Card>
+`;

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { noop } from 'foremanReact/common/helpers';
+
+import Chart from '../../../../../../Components/Chart/Chart';
+
+import {
+  TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS,
+  TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY,
+  COLLOR_PATTERN,
+} from './TasksDonutChartConstants';
+import {
+  getBaseChartConfig,
+  shouleBeSelected,
+  createChartData,
+  updateChartTitle,
+  assignExtraChartEvents,
+  clearExtraChartEvents,
+} from './TasksDonutChartHelper';
+import './TasksDonutChart.scss';
+
+class TasksDonutChart extends React.Component {
+  componentDidUpdate() {
+    this.updateChart();
+  }
+
+  componentWillUnmount() {
+    clearExtraChartEvents(this.chart.element);
+  }
+
+  onChartCreate(chart) {
+    this.chart = chart;
+
+    this.updateChart();
+    this.assignExtraChartEvents();
+  }
+
+  updateChart() {
+    this.updateChartTitle();
+    this.updateChartFocus();
+  }
+
+  updateChartTitle() {
+    const { last, older } = this.props;
+
+    updateChartTitle({
+      chartElement: this.chart.element,
+      value: last + older,
+    });
+  }
+
+  updateChartFocus() {
+    this.setChartFocus(this.props.focusedOn);
+  }
+
+  assignExtraChartEvents() {
+    assignExtraChartEvents({
+      chartElement: this.chart.element,
+      onClick: () => this.props.onTotalClick(),
+      onMouseOver: () =>
+        this.setChartFocus(TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.TOTAL),
+      onMouseOut: () => this.updateChartFocus(),
+    });
+  }
+
+  setChartFocus(focusedOn) {
+    switch (focusedOn) {
+      case TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.TOTAL:
+        this.chart.focus([
+          TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.LAST,
+          TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.OLDER,
+        ]);
+        break;
+      case TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.LAST:
+      case TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.OLDER:
+        this.chart.focus(focusedOn);
+        break;
+      case TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NONE:
+        this.chart.focus([]);
+        break;
+      default:
+        this.chart.revert();
+    }
+  }
+
+  render() {
+    const {
+      className,
+      last,
+      older,
+      time,
+      focusedOn,
+      colorsPattern,
+      onLastClick,
+      onOlderClick,
+    } = this.props;
+
+    const { columns, names, onItemClick } = createChartData({
+      last,
+      older,
+      time,
+      onLastClick,
+      onOlderClick,
+    });
+
+    const classes = classNames(
+      'donut-chart-pf',
+      'tasks-donut-chart',
+      className,
+      { 'tasks-donut-selected': shouleBeSelected(focusedOn) }
+    );
+
+    return (
+      <Chart
+        {...getBaseChartConfig()}
+        type="donut"
+        className={classes}
+        size={{ height: 120 }}
+        color={{ pattern: colorsPattern }}
+        onChartCreate={chart => this.onChartCreate(chart)}
+        data={{
+          columns,
+          names,
+          onclick: ({ id }) => onItemClick(id),
+          onmouseover: ({ id }) => this.setChartFocus(id),
+          onmouseout: () => this.updateChartFocus(),
+          type: 'donut',
+        }}
+        legend={{
+          show: true,
+          position: 'right',
+          item: {
+            onclick: id => onItemClick(id),
+            onmouseover: id => this.setChartFocus(id),
+            onmouseout: () => this.updateChartFocus(),
+          },
+        }}
+      />
+    );
+  }
+}
+
+TasksDonutChart.propTypes = {
+  last: PropTypes.number.isRequired,
+  older: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  time: PropTypes.string,
+  colorsPattern: PropTypes.arrayOf(PropTypes.string),
+  focusedOn: PropTypes.oneOf(TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY),
+  onTotalClick: PropTypes.func,
+  onLastClick: PropTypes.func,
+  onOlderClick: PropTypes.func,
+};
+
+TasksDonutChart.defaultProps = {
+  className: '',
+  time: '24h',
+  colorsPattern: COLLOR_PATTERN,
+  focusedOn: TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NORMAL,
+  onTotalClick: noop,
+  onLastClick: noop,
+  onOlderClick: noop,
+};
+
+export default TasksDonutChart;