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
-
-
-
-
-
-
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,