feat(ui): allow configuring default number of alerts to display per group

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

@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { observable, action, toJS } from "mobx";
+import { observer } from "mobx-react";
+
+import InputRange from "react-input-range";
+
+import { Settings } from "Stores/Settings";
+
+import "./InputRange.css";
+
+const FetchConfiguration = observer(
+  class FetchConfiguration extends Component {
+    static propTypes = {
+      settingsStore: PropTypes.instanceOf(Settings).isRequired
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.config = observable({
+        fetchInterval: toJS(props.settingsStore.fetchConfig.config.interval)
+      });
+    }
+
+    onChange = action(value => {
+      this.config.fetchInterval = value;
+    });
+
+    onChangeComplete = action(value => {
+      const { settingsStore } = this.props;
+
+      settingsStore.fetchConfig.setInterval(value);
+    });
+
+    formatLabel(value) {
+      return `${value}s`;
+    }
+
+    render() {
+      return (
+        <div className="form-group text-center">
+          <label className="mb-4">Refresh interval</label>
+          <InputRange
+            minValue={10}
+            maxValue={120}
+            step={10}
+            value={this.config.fetchInterval}
+            id="formControlRange"
+            formatLabel={this.formatLabel}
+            onChange={this.onChange}
+            onChangeComplete={this.onChangeComplete}
+          />
+        </div>
+      );
+    }
+  }
+);
+
+export { FetchConfiguration };