this.tab.setTab(TabNames.Help)}
/>
+
-
{this.tab.current === TabNames.Help ?
: null}
diff --git a/ui/src/Components/MultiSelect/index.js b/ui/src/Components/MultiSelect/index.js
new file mode 100644
index 000000000..282c653c8
--- /dev/null
+++ b/ui/src/Components/MultiSelect/index.js
@@ -0,0 +1,102 @@
+import React from "react";
+
+import CreatableSelect from "react-select/lib/Creatable";
+
+const ReactSelectStyles = {
+ control: (base, state) =>
+ state.isFocused
+ ? {
+ ...base,
+ outline: "0",
+ outlineOffset: "-2px",
+ boxShadow: "0 0 0 0.2rem rgba(69, 90, 100, 0.25)",
+ borderRadius: "0.25rem",
+ borderColor: "#819ba8",
+ "&:hover": {
+ borderColor: "#819ba8"
+ }
+ }
+ : {
+ ...base,
+ borderRadius: "0.25rem",
+ borderColor: "#ced4da",
+ "&:hover": { borderColor: "#ced4da" }
+ },
+ valueContainer: (base, state) =>
+ state.isMulti
+ ? {
+ ...base,
+ borderRadius: "0.25rem",
+ backgroundColor: "#fff",
+ paddingLeft: "4px",
+ paddingRight: "4px",
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "wrap",
+ maxWidth: "100%",
+ overflow: "hidden"
+ }
+ : {
+ ...base,
+ borderRadius: "0.25rem",
+ backgroundColor: "#fff"
+ },
+ valueLabel: (base, state) => ({
+ ...base,
+ whiteSpace: "normal",
+ wordWrap: "break-word"
+ }),
+ multiValue: (base, state) => ({
+ ...base,
+ borderRadius: "4px",
+ backgroundColor: "#95a5a6",
+ "&:hover": {
+ backgroundColor: "#95a5a6"
+ }
+ }),
+ multiValueLabel: (base, state) => ({
+ ...base,
+ color: "#fff",
+ whiteSpace: "normal",
+ wordWrap: "break-word",
+ "&:hover": {
+ color: "#fff"
+ }
+ }),
+ multiValueRemove: (base, state) => ({
+ ...base,
+ cursor: "pointer",
+ color: "#fff",
+ backgroundColor: "inherit",
+ opacity: "0.4",
+ "&:hover": {
+ color: "#fff",
+ backgroundColor: "inherit",
+ opacity: "0.75"
+ }
+ }),
+ indicatorsContainer: (base, state) => ({
+ ...base,
+ backgroundColor: "#fff",
+ borderTopRightRadius: "0.25rem",
+ borderBottomRightRadius: "0.25rem"
+ }),
+ option: (base, state) => ({
+ ...base,
+ color: state.isSelected ? "#95a5a6" : "inherit",
+ backgroundColor: "inherit",
+ "&:hover": { color: "#fff", backgroundColor: "#455a64", cursor: "pointer" }
+ })
+};
+
+class MultiSelect extends CreatableSelect {
+ renderProps = () => ({});
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export { MultiSelect, ReactSelectStyles };
diff --git a/ui/src/Components/NavBar/FilterInput/History.css b/ui/src/Components/NavBar/FilterInput/History.css
index a5396bb5f..0599e8fbb 100644
--- a/ui/src/Components/NavBar/FilterInput/History.css
+++ b/ui/src/Components/NavBar/FilterInput/History.css
@@ -1,5 +1,38 @@
+.dropdown-menu.components-navbar-historymenu {
+ white-space: nowrap;
+}
+
+.dropdown-menu.components-navbar-historymenu > .dropdown-item {
+ white-space: normal;
+}
+
+.dropdown-menu.components-navbar-historymenu > .container {
+ white-space: pre;
+}
+
+.components-navbar-historymenu-labels {
+ border-left: 3px solid;
+}
+
+@media screen and (min-width: 1px) and (max-width: 599px) {
+ .dropdown-menu.components-navbar-historymenu {
+ max-width: 100%;
+ }
+}
+@media screen and (min-width: 600px) and (max-width: 999px) {
+ .dropdown-menu.components-navbar-historymenu {
+ max-width: 500px;
+ }
+}
+@media screen and (min-width: 1000px) {
+ .dropdown-menu.components-navbar-historymenu {
+ max-width: 600px;
+ }
+}
+
.component-history-button {
margin-right: 0.5rem;
+ margin-bottom: 0.5rem;
}
.component-history-button:last-child {
margin-right: 0;
diff --git a/ui/src/Components/NavBar/FilterInput/index.css b/ui/src/Components/NavBar/FilterInput/index.css
index b5d5d5473..69c13cbbd 100644
--- a/ui/src/Components/NavBar/FilterInput/index.css
+++ b/ui/src/Components/NavBar/FilterInput/index.css
@@ -12,30 +12,6 @@ input.components-filterinput-wrapper {
vertical-align: middle;
}
-.dropdown-menu.components-navbar-historymenu > .dropdown-item {
- white-space: normal;
-}
-
-.components-navbar-historymenu-labels {
- border-left: 3px solid;
-}
-
-@media screen and (min-width: 1px) and (max-width: 599px) {
- .dropdown-menu.components-navbar-historymenu {
- max-width: 100%;
- }
-}
-@media screen and (min-width: 600px) and (max-width: 999px) {
- .dropdown-menu.components-navbar-historymenu {
- max-width: 500px;
- }
-}
-@media screen and (min-width: 1000px) {
- .dropdown-menu.components-navbar-historymenu {
- max-width: 600px;
- }
-}
-
input.components-filterinput-wrapper {
width: 1px;
}
diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index b6866c576..7d9c551c5 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/ui/src/Components/NavBar/index.js
@@ -7,9 +7,11 @@ import ReactResizeDetector from "react-resize-detector";
import { AlertStore } from "Stores/AlertStore";
import { Settings } from "Stores/Settings";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
import { FetchIndicator } from "./FetchIndicator";
import { FilterInput } from "./FilterInput";
import { MainModal } from "Components/MainModal";
+import { SilenceModal } from "Components/SilenceModal";
import "./index.css";
@@ -21,11 +23,21 @@ const NavBar = observer(
class NavBar extends Component {
static propTypes = {
alertStore: PropTypes.instanceOf(AlertStore).isRequired,
- settingsStore: PropTypes.instanceOf(Settings).isRequired
+ settingsStore: PropTypes.instanceOf(Settings).isRequired,
+ silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired
};
render() {
- const { alertStore, settingsStore } = this.props;
+ const { alertStore, settingsStore, silenceFormStore } = this.props;
+
+ // if we have at least 2 filters then it's likely that filter input will
+ // use 2 lines, so set right side icons on small screeens to column mode
+ // for more compact layout
+ const flexClass =
+ alertStore.filters.values.length >= 2
+ ? "flex-column flex-sm-column flex-md-row flex-lg-row flex-xl-row"
+ : "flex-row";
+
return (