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

ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.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 AlertGroupConfiguration = observer(
+  class AlertGroupConfiguration extends Component {
+    static propTypes = {
+      settingsStore: PropTypes.instanceOf(Settings).isRequired
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.config = observable({
+        defaultRenderCount: toJS(
+          props.settingsStore.alertGroupConfig.config.defaultRenderCount
+        )
+      });
+    }
+
+    onChange = action(value => {
+      this.config.defaultRenderCount = value;
+    });
+
+    onChangeComplete = action(value => {
+      const { settingsStore } = this.props;
+
+      settingsStore.alertGroupConfig.update({ defaultRenderCount: value });
+    });
+
+    render() {
+      return (
+        <div className="form-group text-center">
+          <label className="mb-4">
+            Default number of alerts to show per group
+          </label>
+          <InputRange
+            minValue={1}
+            maxValue={10}
+            step={1}
+            value={this.config.defaultRenderCount}
+            id="formControlRange"
+            formatLabel={this.formatLabel}
+            onChange={this.onChange}
+            onChangeComplete={this.onChangeComplete}
+          />
+        </div>
+      );
+    }
+  }
+);
+
+export { AlertGroupConfiguration };

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

ui/src/Components/MainModal/Configuration/InputRange.css

@@ -0,0 +1,81 @@
+.input-range__slider {
+  appearance: none;
+  background: #2C3E50;
+  border: 1px solid #2C3E50;
+  border-radius: 100%;
+  cursor: pointer;
+  display: block;
+  height: 1rem;
+  margin-left: -0.5rem;
+  margin-top: -0.65rem;
+  outline: none;
+  position: absolute;
+  top: 50%;
+  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+  width: 1rem; }
+  .input-range__slider:active {
+    transform: scale(1.3); }
+  .input-range__slider:focus {
+    box-shadow: 0 0 0 5px rgba(44, 62, 80, 0.2); }
+  .input-range--disabled .input-range__slider {
+    background: #95a5a6;
+    border: 1px solid #95a5a6;
+    box-shadow: none;
+    transform: none; }
+
+.input-range__slider-container {
+  transition: left 0.3s ease-out; }
+
+.input-range__label {
+  color: #7b8a8b;
+  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.8rem;
+  transform: translateZ(0);
+  white-space: nowrap; }
+
+.input-range__label--min,
+.input-range__label--max {
+  bottom: -1.4rem;
+  position: absolute; }
+
+.input-range__label--min {
+  left: 0; }
+
+.input-range__label--max {
+  right: 0; }
+
+.input-range__label--value {
+  position: absolute;
+  top: -1.8rem; }
+
+.input-range__label-container {
+  left: -50%;
+  position: relative; }
+  .input-range__label--max .input-range__label-container {
+    left: 50%; }
+
+.input-range__track {
+  background: #ecf0f1;
+  border-radius: 0.3rem;
+  cursor: pointer;
+  display: block;
+  height: 0.3rem;
+  position: relative;
+  transition: left 0.3s ease-out, width 0.3s ease-out; }
+  .input-range--disabled .input-range__track {
+    background: #ecf0f1; }
+
+.input-range__track--background {
+  left: 0;
+  margin-top: -0.15rem;
+  position: absolute;
+  right: 0;
+  top: 50%; }
+
+.input-range__track--active {
+  background: #2C3E50; }
+
+.input-range {
+  height: 1rem;
+  position: relative;
+  width: 100%; }

ui/src/Components/MainModal/Configuration/InputRange.scss

@@ -0,0 +1,10 @@
+// customize colors and fonts using bootstrap variables
+@import "../../../node_modules/bootswatch/dist/flatly/variables";
+
+$input-range-font-family: $font-family-sans-serif;
+$input-range-primary-color: $primary;
+$input-range-neutral-color: $dark;
+$input-range-neutral-light-color: $light;
+$input-range-disabled-color: $secondary;
+
+@import "../../../node_modules/react-input-range/src/scss/input-range/input-range";

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

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Settings } from "Stores/Settings";
+import { FetchConfiguration } from "./FetchConfiguration";
+import { AlertGroupConfiguration } from "./AlertGroupConfiguration";
+
+const Configuration = ({ settingsStore }) => (
+  <form className="px-3">
+    <FetchConfiguration settingsStore={settingsStore} />
+    <div className="mt-5" />
+    <AlertGroupConfiguration settingsStore={settingsStore} />
+  </form>
+);
+Configuration.propTypes = {
+  settingsStore: PropTypes.instanceOf(Settings).isRequired
+};
+
+export { Configuration };