foreman-tasks 0.15.1 → 0.15.2

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

@@ -0,0 +1,24 @@
+.tasks-donut-chart {
+  .c3.not-focused {
+    opacity: 0.3;
+  }
+  .c3-chart-arcs-title {
+    cursor: pointer;
+
+    &:hover {
+      .donut-title-big-pf,
+      .donut-title-small-pf {
+        font-weight: bold;
+      }
+    }
+  }
+
+  &.tasks-donut-selected {
+    .c3-chart-arcs-title {
+      .donut-title-big-pf,
+      .donut-title-small-pf {
+        font-weight: bold;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+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 { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY } from './TasksDonutChartConstants';
+import TasksDonutChart from './TasksDonutChart';
+
+storiesOf('TasksDashboard/TasksCardsGrid', module)
+  .addDecorator(withKnobs)
+  .add('TasksDonutChart', () => (
+    <TasksDonutChart
+      last={number('last', 3)}
+      older={number('older', 5)}
+      time={text('time', '24h')}
+      focusedOn={select(
+        'focusedOn',
+        TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY,
+        TasksDonutChart.defaultProps.focusedOn
+      )}
+      onTotalClick={action('onTotalClick')}
+      onLastClick={action('onLastClick')}
+      onOlderClick={action('onOlderClick')}
+    />
+  ));

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

@@ -0,0 +1,40 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY } from './TasksDonutChartConstants';
+import TasksDonutChart from './TasksDonutChart';
+
+jest.mock('./TasksDonutChartHelper', () => ({
+  shouleBeSelected: focusedOn => focusedOn !== 'normal' && focusedOn !== 'none',
+  getBaseChartConfig: jest.fn(() => ({ base: 'some-base-config' })),
+  createChartData: jest.fn(() => ({
+    columns: 'some-columns',
+    names: 'some-names',
+    onItemClick: jest.fn(),
+  })),
+  updateChartTitle: jest.fn(),
+}));
+
+const createRequiredProps = () => ({ last: 3, older: 5 });
+
+const fixtures = {
+  'render with minimal props': { ...createRequiredProps() },
+  'render with props': {
+    ...createRequiredProps(),
+    className: 'some-class',
+    time: 'time-period',
+    colorsPattern: ['color1', 'color2'],
+    onTotalClick: jest.fn(),
+    onLastClick: jest.fn(),
+    onOlderClick: jest.fn(),
+  },
+};
+
+TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY.forEach(mode => {
+  fixtures[`render with focused-on ${mode}`] = {
+    ...createRequiredProps(),
+    focusedOn: mode,
+  };
+});
+
+describe('TasksDonutChart', () =>
+  testComponentSnapshotsWithFixtures(TasksDonutChart, fixtures));

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

@@ -0,0 +1,13 @@
+export const TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS = {
+  NORMAL: 'normal', // normal-mode
+  TOTAL: 'total', // total-mode
+  LAST: 'last', // last X mode
+  OLDER: 'older', // older then X mode
+  NONE: 'none', // unfocus-mode: another card is selected
+};
+
+export const TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS_ARRAY = Object.values(
+  TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS
+);
+
+export const COLLOR_PATTERN = ['#C315C7', '#0089C9'];

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

@@ -0,0 +1,94 @@
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from './TasksDonutChartConstants';
+
+const {
+  LAST,
+  OLDER,
+  TOTAL,
+  NONE,
+  NORMAL,
+} = TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS;
+
+export const getBaseChartConfig = () =>
+  window.patternfly.c3ChartDefaults().getDefaultDonutConfig();
+
+export const shouleBeSelected = focusedOn =>
+  focusedOn !== NORMAL && focusedOn !== NONE;
+
+export const getFocusedOn = (query, wantedState, wantedTime) => {
+  if (query.state === wantedState) {
+    if (query.time === wantedTime) {
+      switch (query.mode) {
+        case 'last':
+          return LAST;
+        case 'older':
+          return OLDER;
+        default:
+      }
+    }
+
+    return TOTAL;
+  }
+
+  return query.state ? NONE : NORMAL;
+};
+
+export const createChartData = ({
+  last,
+  older,
+  time,
+  onLastClick,
+  onOlderClick,
+}) => {
+  const lastKey = LAST;
+  const olderKey = OLDER;
+
+  const data = {
+    [lastKey]: {
+      name: sprintf(__('%(last)s Last %(time)s'), { last, time }),
+      value: last,
+      onClick: onLastClick,
+    },
+    [olderKey]: {
+      name: sprintf(__('%(older)s Older %(time)s'), {
+        older,
+        time,
+      }),
+      value: older,
+      onClick: onOlderClick,
+    },
+  };
+
+  const columns = Object.entries(data).map(([key, item]) => [key, item.value]);
+  const names = {
+    [lastKey]: data[lastKey].name,
+    [olderKey]: data[olderKey].name,
+  };
+  const onItemClick = key => data[key].onClick();
+
+  return { columns, names, onItemClick };
+};
+
+export const updateChartTitle = ({ chartElement, value }) =>
+  window.patternfly.pfSetDonutChartTitle(chartElement, value, __('Total'));
+
+export const assignExtraChartEvents = ({
+  chartElement,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+}) =>
+  window.d3
+    .select(chartElement)
+    .select('text.c3-chart-arcs-title')
+    .on('click', onClick)
+    .on('mouseover', onMouseOver)
+    .on('mouseout', onMouseOut);
+
+export const clearExtraChartEvents = chartElement =>
+  window.d3
+    .select(chartElement)
+    .select('text.c3-chart-arcs-title')
+    .on('click', null)
+    .on('mouseover', null)
+    .on('mouseout', null);

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

@@ -0,0 +1,152 @@
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from './TasksDonutChartConstants';
+import {
+  getBaseChartConfig,
+  shouleBeSelected,
+  getFocusedOn,
+  createChartData,
+  updateChartTitle,
+  assignExtraChartEvents,
+  clearExtraChartEvents,
+} from './TasksDonutChartHelper';
+
+const {
+  LAST,
+  OLDER,
+  TOTAL,
+  NONE,
+  NORMAL,
+} = TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS;
+
+const defaultChartConfig = {
+  baseConfig1: 'base-config-1',
+  baseConfig2: 'base-config-2',
+};
+const c3ChartDefaults = () => ({
+  getDefaultDonutConfig: () => defaultChartConfig,
+});
+let pfSetDonutChartTitle;
+let d3Select;
+let d3On;
+
+describe('TasksDonutChartHelper', () => {
+  beforeEach(() => {
+    pfSetDonutChartTitle = jest.fn();
+    d3Select = jest.fn(() => global.window.d3);
+    d3On = jest.fn(() => global.window.d3);
+
+    global.window.patternfly = {
+      c3ChartDefaults,
+      pfSetDonutChartTitle,
+    };
+    global.window.d3 = {
+      select: d3Select,
+      on: d3On,
+    };
+  });
+
+  it('should contain the base chart config', () => {
+    expect(getBaseChartConfig()).toEqual(defaultChartConfig);
+  });
+
+  it('should decide if should-be-selected based on focused-on', () => {
+    const selectedFocusedOn = [LAST, OLDER, TOTAL];
+    const noneSelectedFocusedOn = [NONE, NORMAL];
+
+    selectedFocusedOn.forEach(opt => expect(shouleBeSelected(opt)).toBe(true));
+    noneSelectedFocusedOn.forEach(opt =>
+      expect(shouleBeSelected(opt)).toBe(false)
+    );
+  });
+
+  it('should get focused-on', () => {
+    const optionsMap = {
+      [NORMAL]: {
+        query: {},
+        wantedState: '',
+        wantedTime: '',
+      },
+      [NONE]: {
+        query: { state: 'some-state' },
+        wantedState: '',
+        wantedTime: '',
+      },
+      [LAST]: {
+        query: { state: 'wanted-state', time: 'wanted-time', mode: LAST },
+        wantedState: 'wanted-state',
+        wantedTime: 'wanted-time',
+      },
+      [OLDER]: {
+        query: { state: 'wanted-state', time: 'wanted-time', mode: OLDER },
+        wantedState: 'wanted-state',
+        wantedTime: 'wanted-time',
+      },
+      [TOTAL]: {
+        query: { state: 'wanted-state' },
+        wantedState: 'wanted-state',
+        wantedTime: 'wanted-time',
+      },
+    };
+
+    Object.entries(optionsMap).forEach(([focus, options]) => {
+      const focusedOn = getFocusedOn(
+        options.query,
+        options.wantedState,
+        options.wantedTime
+      );
+
+      expect(focusedOn).toBe(focus);
+    });
+  });
+
+  it('should create chart-data', () => {
+    expect(
+      createChartData({
+        last: 1,
+        older: 3,
+        time: '24h',
+        onLastClick: jest.fn(),
+        onOlderClick: jest.fn(),
+      })
+    ).toMatchSnapshot();
+  });
+
+  it('should update chart-title', () => {
+    const chartElement = 'some-element';
+    const value = 'some-value';
+    updateChartTitle({ chartElement, value });
+
+    expect(pfSetDonutChartTitle).toBeCalledWith(chartElement, value, 'Total');
+  });
+
+  it('should assign extra chart-events', () => {
+    const chartElement = 'some-element';
+    const onClick = jest.fn();
+    const onMouseOver = jest.fn();
+    const onMouseOut = jest.fn();
+
+    assignExtraChartEvents({
+      chartElement,
+      onClick,
+      onMouseOver,
+      onMouseOut,
+    });
+
+    expect(d3Select).toHaveBeenNthCalledWith(1, chartElement);
+    expect(d3Select).toHaveBeenNthCalledWith(2, 'text.c3-chart-arcs-title');
+    expect(d3On).toHaveBeenNthCalledWith(1, 'click', onClick);
+    expect(d3On).toHaveBeenNthCalledWith(2, 'mouseover', onMouseOver);
+    expect(d3On).toHaveBeenNthCalledWith(3, 'mouseout', onMouseOut);
+  });
+
+  it('should clear extra chart-events', () => {
+    const chartElement = 'some-element';
+
+    clearExtraChartEvents(chartElement);
+
+    expect(d3Select).toHaveBeenNthCalledWith(1, chartElement);
+    expect(d3Select).toHaveBeenNthCalledWith(2, 'text.c3-chart-arcs-title');
+    expect(d3On).toHaveBeenNthCalledWith(1, 'click', null);
+    expect(d3On).toHaveBeenNthCalledWith(2, 'mouseover', null);
+    expect(d3On).toHaveBeenNthCalledWith(3, 'mouseout', null);
+  });
+});

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

@@ -0,0 +1,302 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TasksDonutChart render with focused-on last 1`] = `
+<C3Chart
+  base="some-base-config"
+  className="donut-chart-pf tasks-donut-chart tasks-donut-selected"
+  color={
+    Object {
+      "pattern": Array [
+        "#C315C7",
+        "#0089C9",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": "some-columns",
+      "names": "some-names",
+      "onclick": [Function],
+      "onmouseout": [Function],
+      "onmouseover": [Function],
+      "type": "donut",
+    }
+  }
+  legend={
+    Object {
+      "item": Object {
+        "onclick": [Function],
+        "onmouseout": [Function],
+        "onmouseover": [Function],
+      },
+      "position": "right",
+      "show": true,
+    }
+  }
+  onChartCreate={[Function]}
+  size={
+    Object {
+      "height": 120,
+    }
+  }
+  type="donut"
+/>
+`;
+
+exports[`TasksDonutChart render with focused-on none 1`] = `
+<C3Chart
+  base="some-base-config"
+  className="donut-chart-pf tasks-donut-chart"
+  color={
+    Object {
+      "pattern": Array [
+        "#C315C7",
+        "#0089C9",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": "some-columns",
+      "names": "some-names",
+      "onclick": [Function],
+      "onmouseout": [Function],
+      "onmouseover": [Function],
+      "type": "donut",
+    }
+  }
+  legend={
+    Object {
+      "item": Object {
+        "onclick": [Function],
+        "onmouseout": [Function],
+        "onmouseover": [Function],
+      },
+      "position": "right",
+      "show": true,
+    }
+  }
+  onChartCreate={[Function]}
+  size={
+    Object {
+      "height": 120,
+    }
+  }
+  type="donut"
+/>
+`;
+
+exports[`TasksDonutChart render with focused-on normal 1`] = `
+<C3Chart
+  base="some-base-config"
+  className="donut-chart-pf tasks-donut-chart"
+  color={
+    Object {
+      "pattern": Array [
+        "#C315C7",
+        "#0089C9",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": "some-columns",
+      "names": "some-names",
+      "onclick": [Function],
+      "onmouseout": [Function],
+      "onmouseover": [Function],
+      "type": "donut",
+    }
+  }
+  legend={
+    Object {
+      "item": Object {
+        "onclick": [Function],
+        "onmouseout": [Function],
+        "onmouseover": [Function],
+      },
+      "position": "right",
+      "show": true,
+    }
+  }
+  onChartCreate={[Function]}
+  size={
+    Object {
+      "height": 120,
+    }
+  }
+  type="donut"
+/>
+`;
+
+exports[`TasksDonutChart render with focused-on older 1`] = `
+<C3Chart
+  base="some-base-config"
+  className="donut-chart-pf tasks-donut-chart tasks-donut-selected"
+  color={
+    Object {
+      "pattern": Array [
+        "#C315C7",
+        "#0089C9",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": "some-columns",
+      "names": "some-names",
+      "onclick": [Function],
+      "onmouseout": [Function],
+      "onmouseover": [Function],
+      "type": "donut",
+    }
+  }
+  legend={
+    Object {
+      "item": Object {
+        "onclick": [Function],
+        "onmouseout": [Function],
+        "onmouseover": [Function],
+      },
+      "position": "right",
+      "show": true,
+    }
+  }
+  onChartCreate={[Function]}
+  size={
+    Object {
+      "height": 120,
+    }
+  }
+  type="donut"
+/>
+`;
+
+exports[`TasksDonutChart render with focused-on total 1`] = `
+<C3Chart
+  base="some-base-config"
+  className="donut-chart-pf tasks-donut-chart tasks-donut-selected"
+  color={
+    Object {
+      "pattern": Array [
+        "#C315C7",
+        "#0089C9",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": "some-columns",
+      "names": "some-names",
+      "onclick": [Function],
+      "onmouseout": [Function],
+      "onmouseover": [Function],
+      "type": "donut",
+    }
+  }
+  legend={
+    Object {
+      "item": Object {
+        "onclick": [Function],
+        "onmouseout": [Function],
+        "onmouseover": [Function],
+      },
+      "position": "right",
+      "show": true,
+    }
+  }
+  onChartCreate={[Function]}
+  size={
+    Object {
+      "height": 120,
+    }
+  }
+  type="donut"
+/>
+`;
+
+exports[`TasksDonutChart render with minimal props 1`] = `
+<C3Chart
+  base="some-base-config"
+  className="donut-chart-pf tasks-donut-chart"
+  color={
+    Object {
+      "pattern": Array [
+        "#C315C7",
+        "#0089C9",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": "some-columns",
+      "names": "some-names",
+      "onclick": [Function],
+      "onmouseout": [Function],
+      "onmouseover": [Function],
+      "type": "donut",
+    }
+  }
+  legend={
+    Object {
+      "item": Object {
+        "onclick": [Function],
+        "onmouseout": [Function],
+        "onmouseover": [Function],
+      },
+      "position": "right",
+      "show": true,
+    }
+  }
+  onChartCreate={[Function]}
+  size={
+    Object {
+      "height": 120,
+    }
+  }
+  type="donut"
+/>
+`;
+
+exports[`TasksDonutChart render with props 1`] = `
+<C3Chart
+  base="some-base-config"
+  className="donut-chart-pf tasks-donut-chart some-class"
+  color={
+    Object {
+      "pattern": Array [
+        "color1",
+        "color2",
+      ],
+    }
+  }
+  data={
+    Object {
+      "columns": "some-columns",
+      "names": "some-names",
+      "onclick": [Function],
+      "onmouseout": [Function],
+      "onmouseover": [Function],
+      "type": "donut",
+    }
+  }
+  legend={
+    Object {
+      "item": Object {
+        "onclick": [Function],
+        "onmouseout": [Function],
+        "onmouseover": [Function],
+      },
+      "position": "right",
+      "show": true,
+    }
+  }
+  onChartCreate={[Function]}
+  size={
+    Object {
+      "height": 120,
+    }
+  }
+  type="donut"
+/>
+`;