From 3bd6ebbf3a79787723225d8ab770666478b530a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 20 Feb 2019 21:00:16 +0000 Subject: [PATCH] feat(ui): use grid sorting settings from the API as defaults --- ui/src/Components/Grid/AlertGrid/index.js | 41 ++++++++++------ .../AlertGroupSortConfiguration.js | 48 +++++++++++-------- .../AlertGroupSortConfiguration.test.js | 34 ++++++++++++- .../MainModal/Configuration/SortLabelName.js | 10 ++++ .../AlertGroupSortConfiguration.test.js.snap | 17 +------ .../MainModalContent.test.js.snap | 17 +------ ui/src/Stores/AlertStore.js | 5 ++ ui/src/Stores/Settings.js | 14 ++---- ui/src/__mocks__/Fetch.js | 5 ++ 9 files changed, 113 insertions(+), 78 deletions(-) diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js index 85ec39c6f..7e11d0db0 100644 --- a/ui/src/Components/Grid/AlertGrid/index.js +++ b/ui/src/Components/Grid/AlertGrid/index.js @@ -72,37 +72,48 @@ const AlertGrid = observer( compare = (a, b) => { const { alertStore, settingsStore } = this.props; - // don't sort if sorting is disabled - if ( + const useDefaults = settingsStore.gridConfig.config.sortOrder === - settingsStore.gridConfig.options.disabled.value - ) + settingsStore.gridConfig.options.default.value; + + const sortOrder = useDefaults + ? alertStore.settings.values.sorting.grid.order + : settingsStore.gridConfig.config.sortOrder; + + // don't sort if sorting is disabled + if (sortOrder === settingsStore.gridConfig.options.disabled.value) return 0; + const sortReverse = + useDefaults || settingsStore.gridConfig.config.reverseSort === undefined + ? alertStore.settings.values.sorting.grid.reverse + : settingsStore.gridConfig.config.reverseSort; + + const sortLabel = + useDefaults || settingsStore.gridConfig.config.sortLabel === undefined + ? alertStore.settings.values.sorting.grid.label + : settingsStore.gridConfig.config.sortLabel; + const getLabelValue = g => { // if timestamp sort is enabled use latest alert for sorting - if ( - settingsStore.gridConfig.config.sortOrder === - settingsStore.gridConfig.options.startsAt.value - ) { + if (sortOrder === settingsStore.gridConfig.options.startsAt.value) { return moment.max(g.alerts.map(a => moment(a.startsAt))); } - const labelName = settingsStore.gridConfig.config.sortLabel; const labelValue = - g.labels[labelName] || - g.shared.labels[labelName] || - g.alerts[0].labels[labelName]; + g.labels[sortLabel] || + g.shared.labels[sortLabel] || + g.alerts[0].labels[sortLabel]; let mappedValue; // check if we have a mapping for label value if ( labelValue !== undefined && - alertStore.settings.values.sorting.valueMapping[labelName] !== + alertStore.settings.values.sorting.valueMapping[sortLabel] !== undefined ) { mappedValue = - alertStore.settings.values.sorting.valueMapping[labelName][ + alertStore.settings.values.sorting.valueMapping[sortLabel][ labelValue ]; } @@ -111,7 +122,7 @@ const AlertGrid = observer( return mappedValue !== undefined ? mappedValue : labelValue; }; - const val = settingsStore.gridConfig.config.reverseSort ? -1 : 1; + const val = sortReverse ? -1 : 1; const av = getLabelValue(a); const bv = getLabelValue(b); diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js index 9938a744c..2dd593cc4 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js @@ -49,13 +49,19 @@ const AlertGroupSortConfiguration = observer( .includes(settingsStore.gridConfig.config.sortOrder) ) { settingsStore.gridConfig.config.sortOrder = - settingsStore.gridConfig.defaults.sortOrder; + settingsStore.gridConfig.options.default.value; } }); render() { const { settingsStore } = this.props; + const hideReverse = + settingsStore.gridConfig.config.sortOrder === + settingsStore.gridConfig.options.default.value || + settingsStore.gridConfig.config.sortOrder === + settingsStore.gridConfig.options.disabled.value; + return (
@@ -81,24 +87,28 @@ const AlertGroupSortConfiguration = observer(
) : null} -
- - - - -
+ {hideReverse ? null : ( +
+ + + + +
+ )}
); diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.test.js b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.test.js index 94542c916..867d6bc08 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.test.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.test.js @@ -49,7 +49,7 @@ describe("", () => { FakeConfiguration(); setTimeout(() => { expect(settingsStore.gridConfig.config.sortOrder).toBe( - settingsStore.gridConfig.defaults.sortOrder + settingsStore.gridConfig.options.default.value ); done(); }, 200); @@ -74,6 +74,38 @@ describe("", () => { }, 200); }); + it("reverse checkbox is not rendered when sort order is == 'default'", () => { + settingsStore.gridConfig.config.sortOrder = + settingsStore.gridConfig.options.default.value; + const tree = FakeConfiguration(); + const labelSelect = tree.find("#configuration-sort-reverse"); + expect(labelSelect).toHaveLength(0); + }); + + it("reverse checkbox is not rendered when sort order is == 'disabled'", () => { + settingsStore.gridConfig.config.sortOrder = + settingsStore.gridConfig.options.disabled.value; + const tree = FakeConfiguration(); + const labelSelect = tree.find("#configuration-sort-reverse"); + expect(labelSelect).toHaveLength(0); + }); + + it("reverse checkbox is rendered when sort order is = 'startsAt'", () => { + settingsStore.gridConfig.config.sortOrder = + settingsStore.gridConfig.options.startsAt.value; + const tree = FakeConfiguration(); + const labelSelect = tree.find("#configuration-sort-reverse"); + expect(labelSelect).toHaveLength(1); + }); + + it("reverse checkbox is rendered when sort order is = 'label'", () => { + settingsStore.gridConfig.config.sortOrder = + settingsStore.gridConfig.options.label.value; + const tree = FakeConfiguration(); + const labelSelect = tree.find("#configuration-sort-reverse"); + expect(labelSelect).toHaveLength(1); + }); + it("label select is not rendered when sort order is != 'label'", () => { settingsStore.gridConfig.config.sortOrder = settingsStore.gridConfig.options.disabled.value; diff --git a/ui/src/Components/MainModal/Configuration/SortLabelName.js b/ui/src/Components/MainModal/Configuration/SortLabelName.js index cc49f0f0f..dca03f1eb 100644 --- a/ui/src/Components/MainModal/Configuration/SortLabelName.js +++ b/ui/src/Components/MainModal/Configuration/SortLabelName.js @@ -6,6 +6,7 @@ import { observer } from "mobx-react"; import CreatableSelect from "react-select/lib/Creatable"; +import { StaticLabels } from "Common/Query"; import { FormatBackendURI } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { ReactSelectStyles } from "Components/MultiSelect"; @@ -18,6 +19,15 @@ const SortLabelName = observer( settingsStore: PropTypes.instanceOf(Settings).isRequired }; + constructor(props) { + super(props); + + if (!props.settingsStore.gridConfig.config.sortLabel) { + props.settingsStore.gridConfig.config.sortLabel = + StaticLabels.AlertName; + } + } + suggestions = observable({ names: [] }); diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap index 19d7b8744..305552b77 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap @@ -14,7 +14,7 @@ exports[` matches snapshot with default values 1`
- Sort by alert timestamp + Use defaults from karma config file
matches snapshot with default values 1`
-
- - - - -
" diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap index 5cc2ac6b7..9fc52d13f 100644 --- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap +++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap @@ -124,7 +124,7 @@ exports[` matches snapshot 1`] = `
- Sort by alert timestamp + Use defaults from karma config file
matches snapshot 1`] = `
-
- - - - -
diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js index c9bcabfa5..dfd75948b 100644 --- a/ui/src/Stores/AlertStore.js +++ b/ui/src/Stores/AlertStore.js @@ -171,6 +171,11 @@ class AlertStore { annotationsHidden: [], annotationsVisible: [], sorting: { + grid: { + order: "startsAt", + reverse: false, + label: "alertname" + }, valueMapping: {} } } diff --git a/ui/src/Stores/Settings.js b/ui/src/Stores/Settings.js index 7af1f2795..9dc47b0ef 100644 --- a/ui/src/Stores/Settings.js +++ b/ui/src/Stores/Settings.js @@ -1,8 +1,6 @@ import { action } from "mobx"; import { localStored } from "mobx-stored"; -import { StaticLabels } from "Common/Query"; - class SavedFilters { config = localStored( "savedFilters", @@ -58,21 +56,15 @@ class SilenceFormConfig { class GridConfig { options = Object.freeze({ + default: { label: "Use defaults from karma config file", value: "default" }, disabled: { label: "No sorting", value: "disabled" }, startsAt: { label: "Sort by alert timestamp", value: "startsAt" }, label: { label: "Sort by alert label", value: "label" } }); - defaults = { - sortOrder: this.options.startsAt.value, - reverseSort: true, - sortLabel: StaticLabels.AlertName - }; config = localStored( - "gridConfig", + "alertGridConfig", { - sortOrder: this.defaults.sortOrder, - reverseSort: this.defaults.reverseSort, - sortLabel: this.defaults.sortLabel + sortOrder: this.options.default.value }, { delay: 100 } ); diff --git a/ui/src/__mocks__/Fetch.js b/ui/src/__mocks__/Fetch.js index 1555242ad..1c6430373 100644 --- a/ui/src/__mocks__/Fetch.js +++ b/ui/src/__mocks__/Fetch.js @@ -24,6 +24,11 @@ const EmptyAPIResponse = () => ({ ], settings: { sorting: { + grid: { + order: "startsAt", + reverse: false, + label: "alertname" + }, valueMapping: { cluster: { dev: 3,