Merge pull request #447 from prymitive/grid-sort

feat(ui): allow sorting alert grid

ui/src/Components/Grid/AlertGrid/index.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
+import moment from "moment";
+
 import MasonryInfiniteScroller from "react-masonry-infinite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -67,6 +69,42 @@ const AlertGrid = observer(
       );
     });
 
+    compare = (a, b) => {
+      const { settingsStore } = this.props;
+
+      // don't sort if sorting is disabled
+      if (
+        settingsStore.gridConfig.config.sortOrder ===
+        settingsStore.gridConfig.options.disabled.value
+      )
+        return 0;
+
+      const getLabelValue = g => {
+        // if timestamp sort is enabled use latest alert for sorting
+        if (
+          settingsStore.gridConfig.config.sortOrder ===
+          settingsStore.gridConfig.options.startsAt.value
+        ) {
+          return moment.max(g.alerts.map(a => moment(a.startsAt)));
+        }
+
+        const label = settingsStore.gridConfig.config.sortLabel;
+        return g.labels[label] || g.alerts[0].labels[label] || "";
+      };
+
+      const av = getLabelValue(a);
+      const bv = getLabelValue(b);
+
+      const val = settingsStore.gridConfig.config.reverseSort ? -1 : 1;
+      if (av > bv) {
+        return val;
+      } else if (av < bv) {
+        return val * -1;
+      } else {
+        return 0;
+      }
+    };
+
     componentDidUpdate() {
       // whenever grid component re-renders we need to ensure that grid elements
       // are packed correctly
@@ -94,13 +132,13 @@ const AlertGrid = observer(
               </div>
             }
           >
-            {Object.keys(alertStore.data.groups)
-              .sort()
+            {Object.values(alertStore.data.groups)
+              .sort(this.compare)
               .slice(0, this.groupsToRender.value)
-              .map(id => (
+              .map(group => (
                 <AlertGroup
-                  key={id}
-                  group={alertStore.data.groups[id]}
+                  key={group.id}
+                  group={group}
                   showAlertmanagers={
                     Object.keys(alertStore.data.upstreams.clusters).length > 1
                   }

ui/src/Components/Grid/AlertGrid/index.test.js

@@ -46,12 +46,12 @@ const MockGroup = (groupName, alertCount) => {
   return group;
 };
 
-const MockGroupList = count => {
+const MockGroupList = (count, alertPerGroup) => {
   let groups = {};
   for (let i = 1; i <= count; i++) {
     let id = `id${i}`;
     let hash = `hash${i}`;
-    let group = MockGroup(`group${i}`, count);
+    let group = MockGroup(`group${i}`, alertPerGroup);
     group.id = id;
     group.hash = hash;
     groups[id] = group;
@@ -66,14 +66,14 @@ const MockGroupList = count => {
 
 describe("<AlertGrid />", () => {
   it("renders only first 50 alert groups", () => {
-    MockGroupList(60);
+    MockGroupList(60, 5);
     const tree = ShallowAlertGrid();
     const alertGroups = tree.find("AlertGroup");
     expect(alertGroups).toHaveLength(50);
   });
 
   it("appends 30 groups after loadMore() call", () => {
-    MockGroupList(100);
+    MockGroupList(100, 5);
     const tree = ShallowAlertGrid();
     // call it directly, it should happen on scroll to the bottom of the page
     tree.instance().loadMore();
@@ -107,6 +107,127 @@ describe("<AlertGrid />", () => {
     const tree = ShallowAlertGrid();
     const instance = tree.instance();
     instance.storeMasonryRef("foo");
-    expect(instance.masonryComponentReference.ref).toBe("foo");
+    expect(instance.masonryComponentReference.ref).toEqual("foo");
+  });
+
+  it("doesn't sort groups when sorting is set to 'disabled'", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.disabled.value;
+    settingsStore.gridConfig.config.reverseSort = false;
+    MockGroupList(3, 1);
+    const tree = ShallowAlertGrid();
+    const alertGroups = tree.find("AlertGroup");
+    expect(alertGroups.map(g => g.props().group.id)).toEqual([
+      "id1",
+      "id2",
+      "id3"
+    ]);
+  });
+
+  it("doesn't sort groups when sorting is set to 'disabled' and 'reverse' is on", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.disabled.value;
+    settingsStore.gridConfig.config.reverseSort = true;
+    MockGroupList(3, 1);
+    const tree = ShallowAlertGrid();
+    const alertGroups = tree.find("AlertGroup");
+    expect(alertGroups.map(g => g.props().group.id)).toEqual([
+      "id1",
+      "id2",
+      "id3"
+    ]);
+  });
+
+  it("groups are sorted by timestamp when sorting is set to 'startsAt'", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.startsAt.value;
+    settingsStore.gridConfig.config.reverseSort = false;
+
+    MockGroupList(3, 1);
+    alertStore.data.groups.id1.alerts[0].startsAt = "2001-01-01T00:00:00Z";
+    alertStore.data.groups.id2.alerts[0].startsAt = "2002-01-01T00:00:00Z";
+    alertStore.data.groups.id3.alerts[0].startsAt = "2000-01-01T00:00:00Z";
+
+    const tree = ShallowAlertGrid();
+    const alertGroups = tree.find("AlertGroup");
+    expect(alertGroups.map(g => g.props().group.id)).toEqual([
+      "id3",
+      "id1",
+      "id2"
+    ]);
+  });
+
+  it("groups are sorted by reversed timestamp when sorting is set to 'startsAt' and 'reverse' is on", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.startsAt.value;
+    settingsStore.gridConfig.config.reverseSort = true;
+
+    MockGroupList(3, 1);
+    alertStore.data.groups.id1.alerts[0].startsAt = "2001-01-01T00:00:00Z";
+    alertStore.data.groups.id2.alerts[0].startsAt = "2002-01-01T00:00:00Z";
+    alertStore.data.groups.id3.alerts[0].startsAt = "2000-01-01T00:00:00Z";
+
+    const tree = ShallowAlertGrid();
+    const alertGroups = tree.find("AlertGroup");
+    expect(alertGroups.map(g => g.props().group.id)).toEqual([
+      "id2",
+      "id1",
+      "id3"
+    ]);
+  });
+
+  it("groups are sorted by label when sorting is set to 'label'", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.label.value;
+    settingsStore.gridConfig.config.sortLabel = "instance";
+    settingsStore.gridConfig.config.reverseSort = false;
+
+    MockGroupList(3, 1);
+    alertStore.data.groups.id1.alerts[0].labels.instance = "abc1";
+    alertStore.data.groups.id2.alerts[0].labels.instance = "abc3";
+    alertStore.data.groups.id3.alerts[0].labels.instance = "abc2";
+
+    const tree = ShallowAlertGrid();
+    const alertGroups = tree.find("AlertGroup");
+    expect(alertGroups.map(g => g.props().group.id)).toEqual([
+      "id1",
+      "id3",
+      "id2"
+    ]);
+  });
+
+  it("groups are sorted by reverse label when sorting is set to 'label' and 'reverse' is on", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.label.value;
+    settingsStore.gridConfig.config.sortLabel = "instance";
+    settingsStore.gridConfig.config.reverseSort = true;
+
+    MockGroupList(3, 1);
+    alertStore.data.groups.id1.alerts[0].labels.instance = "abc1";
+    alertStore.data.groups.id2.alerts[0].labels.instance = "abc3";
+    alertStore.data.groups.id3.alerts[0].labels.instance = "abc2";
+
+    const tree = ShallowAlertGrid();
+    const alertGroups = tree.find("AlertGroup");
+    expect(alertGroups.map(g => g.props().group.id)).toEqual([
+      "id2",
+      "id3",
+      "id1"
+    ]);
+  });
+
+  it("sorting is no-op when when sorting is set to 'label' and alerts lack that label", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.label.value;
+    settingsStore.gridConfig.config.sortLabel = "foo";
+    settingsStore.gridConfig.config.reverseSort = false;
+    MockGroupList(3, 1);
+    const tree = ShallowAlertGrid();
+    const alertGroups = tree.find("AlertGroup");
+    expect(alertGroups.map(g => g.props().group.id)).toEqual([
+      "id1",
+      "id2",
+      "id3"
+    ]);
   });
 });

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

@@ -16,7 +16,7 @@ const FakeConfiguration = () => {
   return mount(<AlertGroupConfiguration settingsStore={settingsStore} />);
 };
 
-describe("<AlertGroupConfiguration /> className", () => {
+describe("<AlertGroupConfiguration />", () => {
   it("matches snapshot with default values", () => {
     const tree = FakeConfiguration();
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();

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

@@ -0,0 +1,109 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { action } from "mobx";
+import { observer } from "mobx-react";
+
+import ReactSelect from "react-select";
+
+import { Settings } from "Stores/Settings";
+import { ReactSelectStyles } from "Components/MultiSelect";
+import { SortLabelName } from "./SortLabelName";
+
+const AlertGroupSortConfiguration = observer(
+  class AlertGroupSortConfiguration extends Component {
+    static propTypes = {
+      settingsStore: PropTypes.instanceOf(Settings).isRequired
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.validateConfig();
+    }
+
+    onSortOrderChange = action((newValue, actionMeta) => {
+      const { settingsStore } = this.props;
+
+      settingsStore.gridConfig.config.sortOrder = newValue.value;
+    });
+
+    onSortReverseChange = action(event => {
+      const { settingsStore } = this.props;
+
+      settingsStore.gridConfig.config.reverseSort = event.target.checked;
+    });
+
+    valueToOption = val => {
+      const { settingsStore } = this.props;
+
+      return { label: settingsStore.gridConfig.options[val].label, value: val };
+    };
+
+    validateConfig = action(() => {
+      const { settingsStore } = this.props;
+
+      if (
+        !Object.values(settingsStore.gridConfig.options)
+          .map(o => o.value)
+          .includes(settingsStore.gridConfig.config.sortOrder)
+      ) {
+        settingsStore.gridConfig.config.sortOrder =
+          settingsStore.gridConfig.defaults.sortOrder;
+      }
+    });
+
+    render() {
+      const { settingsStore } = this.props;
+
+      return (
+        <div className="form-group">
+          <div className="text-center">
+            <label className="mb-4">Grid sort order</label>
+          </div>
+          <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
+            <div className="flex-shrink-0 flex-grow-1 flex-basis-auto">
+              <ReactSelect
+                styles={ReactSelectStyles}
+                classNamePrefix="react-select"
+                instanceId="configuration-sort-order"
+                defaultValue={this.valueToOption(
+                  settingsStore.gridConfig.config.sortOrder
+                )}
+                options={Object.values(settingsStore.gridConfig.options)}
+                onChange={this.onSortOrderChange}
+                hideSelectedOptions
+              />
+            </div>
+            {settingsStore.gridConfig.config.sortOrder ===
+            settingsStore.gridConfig.options.label.value ? (
+              <div className="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0">
+                <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>
+          </div>
+        </div>
+      );
+    }
+  }
+);
+
+export { AlertGroupSortConfiguration };

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

@@ -0,0 +1,141 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { Settings } from "Stores/Settings";
+import { AlertGroupSortConfiguration } from "./AlertGroupSortConfiguration";
+
+let settingsStore;
+beforeEach(() => {
+  fetch.mockResponse(JSON.stringify([]));
+  settingsStore = new Settings();
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+const FakeConfiguration = () => {
+  return mount(<AlertGroupSortConfiguration settingsStore={settingsStore} />);
+};
+
+const ExpandSortLabelSuggestions = async () => {
+  settingsStore.gridConfig.config.sortOrder =
+    settingsStore.gridConfig.options.label.value;
+  const tree = FakeConfiguration();
+  const labelSelect = tree.find("SortLabelName");
+  await expect(
+    labelSelect.instance().nameSuggestionsFetch
+  ).resolves.toBeUndefined();
+
+  tree
+    .find("input#react-select-configuration-sort-label-input")
+    .simulate("change", { target: { value: "a" } });
+
+  fetch.resetMocks();
+  return tree;
+};
+
+describe("<AlertGroupSortConfiguration />", () => {
+  it("matches snapshot with default values", () => {
+    const tree = FakeConfiguration();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("invalid sortOrder value is reset on mount", done => {
+    settingsStore.gridConfig.config.sortOrder = "badValue";
+    FakeConfiguration();
+    setTimeout(() => {
+      expect(settingsStore.gridConfig.config.sortOrder).toBe(
+        settingsStore.gridConfig.defaults.sortOrder
+      );
+      done();
+    }, 200);
+  });
+
+  it("changing sort order value update settingsStore", async done => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.label.value;
+    expect(settingsStore.gridConfig.config.sortOrder).toBe(
+      settingsStore.gridConfig.options.label.value
+    );
+    const tree = FakeConfiguration();
+    tree.instance().onSortOrderChange({
+      label: settingsStore.gridConfig.options.startsAt.label,
+      value: settingsStore.gridConfig.options.startsAt.value
+    });
+    setTimeout(() => {
+      expect(settingsStore.gridConfig.config.sortOrder).toBe(
+        settingsStore.gridConfig.options.startsAt.value
+      );
+      done();
+    }, 200);
+  });
+
+  it("label select is not rendered when sort order is != 'label'", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.disabled.value;
+    const tree = FakeConfiguration();
+    const labelSelect = tree.find("SortLabelName");
+    expect(labelSelect).toHaveLength(0);
+  });
+
+  it("label select is rendered when sort order is == 'label'", () => {
+    settingsStore.gridConfig.config.sortOrder =
+      settingsStore.gridConfig.options.label.value;
+    const tree = FakeConfiguration();
+    const labelSelect = tree.find("SortLabelName");
+    expect(labelSelect).toHaveLength(1);
+  });
+
+  it("label select renders suggestions on click", async () => {
+    fetch.mockResponse(JSON.stringify(["alertname", "cluster", "fakeLabel"]));
+    const tree = await ExpandSortLabelSuggestions();
+    const options = tree.find(".react-select__option");
+    expect(options).toHaveLength(3);
+    expect(options.at(0).text()).toBe("alertname");
+    expect(options.at(1).text()).toBe("cluster");
+    expect(options.at(2).text()).toBe("fakeLabel");
+  });
+
+  it("label select handles fetch errors", async () => {
+    fetch.mockReject("error");
+    const tree = await ExpandSortLabelSuggestions();
+    const options = tree.find(".react-select__option");
+    expect(options).toHaveLength(0);
+  });
+
+  it("label select handles invalid JSON", async () => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+    fetch.mockResponse("invalid JSON");
+    const tree = await ExpandSortLabelSuggestions();
+    const options = tree.find(".react-select__option");
+    expect(options).toHaveLength(0);
+  });
+
+  it("clicking on a label option updates settingsStore", async done => {
+    fetch.mockResponse(JSON.stringify(["alertname", "cluster", "fakeLabel"]));
+    const tree = await ExpandSortLabelSuggestions();
+    const options = tree.find(".react-select__option");
+    options.at(1).simulate("click");
+    setTimeout(() => {
+      expect(settingsStore.gridConfig.config.sortLabel).toBe("cluster");
+      done();
+    }, 200);
+  });
+
+  it("clicking on the 'reverse' checkbox updates settingsStore", done => {
+    settingsStore.gridConfig.config.reverseSort = false;
+    const tree = FakeConfiguration();
+    const checkbox = tree.find("#configuration-sort-reverse");
+
+    expect(settingsStore.gridConfig.config.reverseSort).toBe(false);
+    checkbox.simulate("change", { target: { checked: true } });
+    setTimeout(() => {
+      expect(settingsStore.gridConfig.config.reverseSort).toBe(true);
+      done();
+    }, 200);
+  });
+});

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

@@ -16,7 +16,7 @@ const FakeConfiguration = () => {
   return mount(<FetchConfiguration settingsStore={settingsStore} />);
 };
 
-describe("<FetchConfiguration /> className", () => {
+describe("<FetchConfiguration />", () => {
   it("matches snapshot with default values", () => {
     const tree = FakeConfiguration();
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();

ui/src/Components/MainModal/Configuration/SortLabelName.js

@@ -0,0 +1,76 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+
+import CreatableSelect from "react-select/lib/Creatable";
+
+import { FormatBackendURI } from "Stores/AlertStore";
+import { Settings } from "Stores/Settings";
+import { ReactSelectStyles } from "Components/MultiSelect";
+
+const valueToOption = v => ({ label: v, value: v });
+
+const SortLabelName = observer(
+  class SortLabelName extends CreatableSelect {
+    static propTypes = {
+      settingsStore: PropTypes.instanceOf(Settings).isRequired
+    };
+
+    suggestions = observable({
+      names: []
+    });
+
+    populateNameSuggestions = action(() => {
+      this.nameSuggestionsFetch = fetch(FormatBackendURI(`labelNames.json`), {
+        credentials: "include"
+      })
+        .then(
+          result => result.json(),
+          err => {
+            return [];
+          }
+        )
+        .then(result => {
+          this.suggestions.names = result.map(value => ({
+            label: value,
+            value: value
+          }));
+        })
+        .catch(err => {
+          console.error(err.message);
+          this.suggestions.names = [];
+        });
+    });
+
+    onChange = action((newValue, actionMeta) => {
+      const { settingsStore } = this.props;
+
+      settingsStore.gridConfig.config.sortLabel = newValue.value;
+    });
+
+    componentDidMount() {
+      this.populateNameSuggestions();
+    }
+
+    render() {
+      const { settingsStore } = this.props;
+
+      return (
+        <CreatableSelect
+          styles={ReactSelectStyles}
+          classNamePrefix="react-select"
+          instanceId="configuration-sort-label"
+          defaultValue={valueToOption(
+            settingsStore.gridConfig.config.sortLabel
+          )}
+          options={this.suggestions.names}
+          onChange={this.onChange}
+        />
+      );
+    }
+  }
+);
+
+export { SortLabelName };

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<AlertGroupConfiguration /> className matches snapshot with default values 1`] = `
+exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-group text-center\\">
   <label class=\\"mb-4\\">

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

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`] = `
+"
+<div class=\\"form-group\\">
+  <div class=\\"text-center\\">
+    <label class=\\"mb-4\\">
+      Grid sort order
+    </label>
+  </div>
+  <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
+    <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
+      <div class=\\"css-10nd86i\\">
+        <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
+            </div>
+            <div class=\\"css-1g6gooi\\">
+              <div class=\\"react-select__input\\"
+                   style=\\"display: inline-block;\\"
+              >
+                <input autocapitalize=\\"none\\"
+                       autocomplete=\\"off\\"
+                       autocorrect=\\"off\\"
+                       id=\\"react-select-configuration-sort-order-input\\"
+                       spellcheck=\\"false\\"
+                       tabindex=\\"0\\"
+                       type=\\"text\\"
+                       aria-autocomplete=\\"list\\"
+                       style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\"
+                       value
+                >
+                <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class=\\"css-mik995 react-select__indicators\\">
+            <span class=\\"css-d8oujb react-select__indicator-separator\\">
+            </span>
+            <div aria-hidden=\\"true\\"
+                 class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+            >
+              <svg height=\\"20\\"
+                   width=\\"20\\"
+                   viewbox=\\"0 0 20 20\\"
+                   aria-hidden=\\"true\\"
+                   focusable=\\"false\\"
+                   class=\\"css-19bqh2r\\"
+              >
+                <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                </path>
+              </svg>
+            </div>
+          </div>
+        </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/Configuration/__snapshots__/FetchConfiguration.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FetchConfiguration /> className matches snapshot with default values 1`] = `
+exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-group text-center\\">
   <label class=\\"mb-4\\">

ui/src/Components/MainModal/Configuration/index.js

@@ -4,12 +4,15 @@ import PropTypes from "prop-types";
 import { Settings } from "Stores/Settings";
 import { FetchConfiguration } from "./FetchConfiguration";
 import { AlertGroupConfiguration } from "./AlertGroupConfiguration";
+import { AlertGroupSortConfiguration } from "./AlertGroupSortConfiguration";
 
 const Configuration = ({ settingsStore }) => (
   <form className="px-3">
     <FetchConfiguration settingsStore={settingsStore} />
     <div className="mt-5" />
     <AlertGroupConfiguration settingsStore={settingsStore} />
+    <div className="mt-5" />
+    <AlertGroupSortConfiguration settingsStore={settingsStore} />
   </form>
 );
 Configuration.propTypes = {

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

@@ -10,7 +10,7 @@ describe("<Configuration />", () => {
     const settingsStore = new Settings();
     const tree = shallow(<Configuration settingsStore={settingsStore} />);
     expect(tree.text()).toBe(
-      "<FetchConfiguration /><AlertGroupConfiguration />"
+      "<FetchConfiguration /><AlertGroupConfiguration /><AlertGroupSortConfiguration />"
     );
   });
 });

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

@@ -110,6 +110,80 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           </span>
         </div>
       </div>
+      <div class=\\"mt-5\\">
+      </div>
+      <div class=\\"form-group\\">
+        <div class=\\"text-center\\">
+          <label class=\\"mb-4\\">
+            Grid sort order
+          </label>
+        </div>
+        <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
+          <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
+            <div class=\\"css-10nd86i\\">
+              <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
+                  </div>
+                  <div class=\\"css-1g6gooi\\">
+                    <div class=\\"react-select__input\\"
+                         style=\\"display: inline-block;\\"
+                    >
+                      <input autocapitalize=\\"none\\"
+                             autocomplete=\\"off\\"
+                             autocorrect=\\"off\\"
+                             id=\\"react-select-configuration-sort-order-input\\"
+                             spellcheck=\\"false\\"
+                             tabindex=\\"0\\"
+                             type=\\"text\\"
+                             aria-autocomplete=\\"list\\"
+                             style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\"
+                             value
+                      >
+                      <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class=\\"css-mik995 react-select__indicators\\">
+                  <span class=\\"css-d8oujb react-select__indicator-separator\\">
+                  </span>
+                  <div aria-hidden=\\"true\\"
+                       class=\\"css-1ep9fjw react-select__indicator react-select__dropdown-indicator\\"
+                  >
+                    <svg height=\\"20\\"
+                         width=\\"20\\"
+                         viewbox=\\"0 0 20 20\\"
+                         aria-hidden=\\"true\\"
+                         focusable=\\"false\\"
+                         class=\\"css-19bqh2r\\"
+                    >
+                      <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                      </path>
+                    </svg>
+                  </div>
+                </div>
+              </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>
   </div>
   <div class=\\"modal-footer\\">

ui/src/Stores/Settings.js

@@ -1,6 +1,8 @@
 import { action } from "mobx";
 import { localStored } from "mobx-stored";
 
+import { StaticLabels } from "Common/Query";
+
 class SavedFilters {
   config = localStored(
     "savedFilters",
@@ -54,11 +56,34 @@ class SilenceFormConfig {
   });
 }
 
+class GridConfig {
+  options = Object.freeze({
+    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",
+    {
+      sortOrder: this.defaults.sortOrder,
+      reverseSort: this.defaults.reverseSort,
+      sortLabel: this.defaults.sortLabel
+    },
+    { delay: 100 }
+  );
+}
+
 class Settings {
   constructor() {
     this.savedFilters = new SavedFilters();
     this.fetchConfig = new FetchConfig();
     this.alertGroupConfig = new AlertGroupConfig();
+    this.gridConfig = new GridConfig();
     this.silenceFormConfig = new SilenceFormConfig();
   }
 }