diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx new file mode 100644 index 00000000000..8d6112130e7 --- /dev/null +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; + +import { ThresholdsEditor } from './ThresholdsEditor'; + +const ThresholdsEditorStories = storiesOf('UI/ThresholdsEditor', module); +const thresholds = [{ index: 0, value: -Infinity, color: 'green' }, { index: 1, value: 50, color: 'red' }]; + +ThresholdsEditorStories.add('default', () => { + return ; +}); + +ThresholdsEditorStories.add('with thresholds', () => { + return ; +}); diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx index 38cd8e5c763..db494053d6e 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx @@ -1,6 +1,7 @@ import React, { ChangeEvent } from 'react'; import { mount } from 'enzyme'; import { ThresholdsEditor, Props } from './ThresholdsEditor'; +import { colors } from '../../utils'; const setup = (propOverrides?: Partial) => { const props: Props = { @@ -31,7 +32,7 @@ describe('Initialization', () => { it('should add a base threshold if missing', () => { const { instance } = setup(); - expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]); + expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: colors[0] }]); }); }); @@ -41,7 +42,7 @@ describe('Add threshold', () => { instance.onAddThreshold(0); - expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]); + expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: colors[0] }]); }); it('should add threshold', () => { @@ -50,41 +51,41 @@ describe('Add threshold', () => { instance.onAddThreshold(1); expect(instance.state.thresholds).toEqual([ - { index: 0, value: -Infinity, color: '#7EB26D' }, - { index: 1, value: 50, color: '#EAB839' }, + { index: 0, value: -Infinity, color: colors[0] }, + { index: 1, value: 50, color: colors[2] }, ]); }); it('should add another threshold above a first', () => { const { instance } = setup({ - thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }], + thresholds: [{ index: 0, value: -Infinity, color: colors[0] }, { index: 1, value: 50, color: colors[2] }], }); instance.onAddThreshold(2); expect(instance.state.thresholds).toEqual([ - { index: 0, value: -Infinity, color: '#7EB26D' }, - { index: 1, value: 50, color: '#EAB839' }, - { index: 2, value: 75, color: '#6ED0E0' }, + { index: 0, value: -Infinity, color: colors[0] }, + { index: 1, value: 50, color: colors[2] }, + { index: 2, value: 75, color: colors[3] }, ]); }); it('should add another threshold between first and second index', () => { const { instance } = setup({ thresholds: [ - { index: 0, value: -Infinity, color: '#7EB26D' }, - { index: 1, value: 50, color: '#EAB839' }, - { index: 2, value: 75, color: '#6ED0E0' }, + { index: 0, value: -Infinity, color: colors[0] }, + { index: 1, value: 50, color: colors[2] }, + { index: 2, value: 75, color: colors[3] }, ], }); instance.onAddThreshold(2); expect(instance.state.thresholds).toEqual([ - { index: 0, value: -Infinity, color: '#7EB26D' }, - { index: 1, value: 50, color: '#EAB839' }, - { index: 2, value: 62.5, color: '#EF843C' }, - { index: 3, value: 75, color: '#6ED0E0' }, + { index: 0, value: -Infinity, color: colors[0] }, + { index: 1, value: 50, color: colors[2] }, + { index: 2, value: 62.5, color: colors[4] }, + { index: 3, value: 75, color: colors[3] }, ]); }); }); diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index 3361e1bee46..adacf393a09 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -3,8 +3,8 @@ import { Threshold } from '../../types'; import { ColorPicker } from '..'; import { PanelOptionsGroup } from '..'; import { colors } from '../../utils'; -import { ThemeContext } from '../../themes/ThemeContext'; -import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; +import { ThemeContext } from '../../themes'; +import { getColorFromHexRgbOrName } from '../../utils'; export interface Props { thresholds: Threshold[]; diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index b0dc025090b..bd0ab03bf51 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -1,7 +1,447 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Render should render with base threshold 1`] = ` - - - + + +
+
+ + Thresholds + +
+
+
+
+
+ +
+
+
+
+ +
+
+ + + + } + hideAfter={300} + > + +
+
+
+
+
+ + + + +
+
+
+ +
+
+
+
+
+
+
+ + `;