feat(ui): use grid sorting settings from the API as defaults

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);

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 (
         <div className="form-group">
           <div className="text-center">
@@ -81,24 +87,28 @@ const AlertGroupSortConfiguration = observer(
                 <SortLabelName settingsStore={settingsStore} />
               </div>
             ) : null}
-            <div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0">
-              <span className="custom-control custom-switch">
-                <input
-                  id="configuration-sort-reverse"
-                  className="custom-control-input"
-                  type="checkbox"
-                  value=""
-                  checked={settingsStore.gridConfig.config.reverseSort}
-                  onChange={this.onSortReverseChange}
-                />
-                <label
-                  className="custom-control-label cursor-pointer mr-3"
-                  htmlFor="configuration-sort-reverse"
-                >
-                  Reverse
-                </label>
-              </span>
-            </div>
+            {hideReverse ? null : (
+              <div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0">
+                <span className="custom-control custom-switch">
+                  <input
+                    id="configuration-sort-reverse"
+                    className="custom-control-input"
+                    type="checkbox"
+                    value=""
+                    checked={
+                      settingsStore.gridConfig.config.reverseSort || false
+                    }
+                    onChange={this.onSortReverseChange}
+                  />
+                  <label
+                    className="custom-control-label cursor-pointer mr-3"
+                    htmlFor="configuration-sort-reverse"
+                  >
+                    Reverse
+                  </label>
+                </span>
+              </div>
+            )}
           </div>
         </div>
       );

ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.test.js

@@ -49,7 +49,7 @@ describe("<AlertGroupSortConfiguration />", () => {
     FakeConfiguration();
     setTimeout(() => {
       expect(settingsStore.gridConfig.config.sortOrder).toBe(
-        settingsStore.gridConfig.defaults.sortOrder
+        settingsStore.gridConfig.options.default.value
       );
       done();
     }, 200);
@@ -74,6 +74,38 @@ describe("<AlertGroupSortConfiguration />", () => {
     }, 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;

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: []
     });

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap

@@ -14,7 +14,7 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
         <div class=\\"css-7jxtyj react-select__control\\">
           <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
             <div class=\\"css-xp4uvy react-select__single-value\\">
-              Sort by alert timestamp
+              Use defaults from karma config file
             </div>
             <div class=\\"css-1g6gooi\\">
               <div class=\\"react-select__input\\"
@@ -57,21 +57,6 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
         </div>
       </div>
     </div>
-    <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0\\">
-      <span class=\\"custom-control custom-switch\\">
-        <input id=\\"configuration-sort-reverse\\"
-               class=\\"custom-control-input\\"
-               type=\\"checkbox\\"
-               value
-               checked
-        >
-        <label class=\\"custom-control-label cursor-pointer mr-3\\"
-               for=\\"configuration-sort-reverse\\"
-        >
-          Reverse
-        </label>
-      </span>
-    </div>
   </div>
 </div>
 "

ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap

@@ -124,7 +124,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
               <div class=\\"css-7jxtyj react-select__control\\">
                 <div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
                   <div class=\\"css-xp4uvy react-select__single-value\\">
-                    Sort by alert timestamp
+                    Use defaults from karma config file
                   </div>
                   <div class=\\"css-1g6gooi\\">
                     <div class=\\"react-select__input\\"
@@ -167,21 +167,6 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
               </div>
             </div>
           </div>
-          <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0\\">
-            <span class=\\"custom-control custom-switch\\">
-              <input id=\\"configuration-sort-reverse\\"
-                     class=\\"custom-control-input\\"
-                     type=\\"checkbox\\"
-                     value
-                     checked
-              >
-              <label class=\\"custom-control-label cursor-pointer mr-3\\"
-                     for=\\"configuration-sort-reverse\\"
-              >
-                Reverse
-              </label>
-            </span>
-          </div>
         </div>
       </div>
     </form>

ui/src/Stores/AlertStore.js

@@ -171,6 +171,11 @@ class AlertStore {
         annotationsHidden: [],
         annotationsVisible: [],
         sorting: {
+          grid: {
+            order: "startsAt",
+            reverse: false,
+            label: "alertname"
+          },
           valueMapping: {}
         }
       }

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 }
   );

ui/src/__mocks__/Fetch.js

@@ -24,6 +24,11 @@ const EmptyAPIResponse = () => ({
   ],
   settings: {
     sorting: {
+      grid: {
+        order: "startsAt",
+        reverse: false,
+        label: "alertname"
+      },
       valueMapping: {
         cluster: {
           dev: 3,