github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use accordion layout for main modal

Browse Source
This commit is contained in:
Łukasz Mierzwa
2019-09-16 21:30:52 +01:00
parent 2444e9a66a
commit 4f3a0c2e63
19 changed files with 1879 additions and 1465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js
View File

@@ -54,12 +54,7 @@ const AlertGroupCollapseConfiguration = observer(
const { settingsStore } = this.props;
return (
<div className="form-group">
<div className="text-center">
<label className="mb-4 font-weight-bold">
Default alert group display
</label>
</div>
<div className="form-group mb-0">
<Select
styles={ReactSelectStyles}
classNamePrefix="react-select"
@@ -69,6 +64,7 @@ const AlertGroupCollapseConfiguration = observer(
)}
options={Object.values(settingsStore.alertGroupConfig.options)}
onChange={this.onCollapseChange}
menuPosition="fixed"
hideSelectedOptions
/>
</div>

5
ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.js
View File

@@ -38,10 +38,7 @@ const AlertGroupConfiguration = observer(
render() {
return (
<div className="form-group text-center">
<label className="mb-4 font-weight-bold">
Default number of alerts to show per group
</label>
<div className="form-group mb-0 text-center">
<InputRange
minValue={1}
maxValue={10}

6
ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js
View File

@@ -63,10 +63,7 @@ const AlertGroupSortConfiguration = observer(
settingsStore.gridConfig.options.disabled.value;
return (
<div className="form-group">
<div className="text-center">
<label className="mb-2 font-weight-bold">Grid sort order</label>
</div>
<div className="form-group mb-0">
<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">
<Select
@@ -78,6 +75,7 @@ const AlertGroupSortConfiguration = observer(
)}
options={Object.values(settingsStore.gridConfig.options)}
onChange={this.onSortOrderChange}
menuPosition="fixed"
hideSelectedOptions
/>
</div>

7
ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.js
View File

@@ -22,12 +22,7 @@ const AlertGroupTitleBarColor = observer(
const { settingsStore } = this.props;
return (
<div className="form-group">
<div className="text-center">
<label className="mb-2 font-weight-bold">
Alert group titlebar configuration
</label>
</div>
<div className="form-group mb-0">
<div className="form-check form-check-inline">
<span className="custom-control custom-switch">
<input

5
ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js
View File

@@ -41,10 +41,7 @@ const AlertGroupWidthConfiguration = observer(
render() {
return (
<div className="form-group text-center">
<label className="mb-4 font-weight-bold">
Minimal alert group width
</label>
<div className="form-group mb-0 text-center">
<InputRange
minValue={300}
maxValue={800}

3
ui/src/Components/MainModal/Configuration/FetchConfiguration.js
View File

@@ -40,8 +40,7 @@ const FetchConfiguration = observer(
render() {
return (
<div className="form-group text-center">
<label className="mb-4 font-weight-bold">Refresh interval</label>
<div className="form-group mb-0 text-center">
<InputRange
minValue={10}
maxValue={120}

7
ui/src/Components/MainModal/Configuration/FilterBarConfiguration.js
View File

@@ -21,12 +21,7 @@ const FilterBarConfiguration = observer(
const { settingsStore } = this.props;
return (
<div className="form-group">
<div className="text-center">
<label className="mb-2 font-weight-bold">
Filter bar configuration
</label>
</div>
<div className="form-group mb-0">
<div className="form-check form-check-inline">
<span className="custom-control custom-switch">
<input

7
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
View File

@@ -2,12 +2,7 @@
exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Default alert group display
</label>
</div>
<div class=\\"form-group mb-0\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">

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

@@ -2,10 +2,7 @@
exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Default number of alerts to show per group
</label>
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>

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

@@ -2,12 +2,7 @@
exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Grid sort order
</label>
</div>
<div class=\\"form-group mb-0\\">
<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-2b097c-container\\">

7
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.js.snap
View File

@@ -2,12 +2,7 @@
exports[`<AlertGroupTitleBarColor /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Alert group titlebar configuration
</label>
</div>
<div class=\\"form-group mb-0\\">
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input id=\\"configuration-colortitlebar\\"

5
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.js.snap
View File

@@ -2,10 +2,7 @@
exports[`<AlertGroupWidthConfiguration /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Minimal alert group width
</label>
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>

5
ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap
View File

@@ -2,10 +2,7 @@
exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Refresh interval
</label>
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>

7
ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap
View File

@@ -2,12 +2,7 @@
exports[`<FilterBarConfiguration /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Filter bar configuration
</label>
</div>
<div class=\\"form-group mb-0\\">
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input id=\\"configuration-autohide\\"

714
ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
View File

@@ -2,294 +2,470 @@
exports[`<Configuration /> matches snapshot 1`] = `
"
<form class=\\"px-3\\">
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Refresh interval
</label>
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
10s
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left:0%;width:18.181818181818183%\\"
class=\\"input-range__track input-range__track--active\\"
>
<form class=\\"px-3 accordion\\">
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-open card-header cursor-pointer bg-light\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Refresh interval
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position:absolute;left:18.181818181818183%\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
30s
</span>
</span>
<div aria-valuemax=\\"120\\"
aria-valuemin=\\"10\\"
aria-valuenow=\\"30\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
120s
</span>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Filter bar configuration
</label>
</div>
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input type=\\"checkbox\\"
id=\\"configuration-autohide\\"
class=\\"custom-control-input\\"
value
checked
>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-autohide\\"
>
Hide filter bar when idle
</label>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Alert group titlebar configuration
</label>
</div>
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input type=\\"checkbox\\"
id=\\"configuration-colortitlebar\\"
class=\\"custom-control-input\\"
value
>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-colortitlebar\\"
>
Color group titlebar
</label>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Minimal alert group width
</label>
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
300
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left:0%;width:24%\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position:absolute;left:24%\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
420
</span>
</span>
<div aria-valuemax=\\"800\\"
aria-valuemin=\\"300\\"
aria-valuenow=\\"420\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
800
</span>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Default number of alerts to show per group
</label>
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
1
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left:0%;width:44.44444444444444%\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position:absolute;left:44.44444444444444%\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
5
</span>
</span>
<div aria-valuemax=\\"10\\"
aria-valuemin=\\"1\\"
aria-valuenow=\\"5\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
10
</span>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Default alert group display
</label>
</div>
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-w8afj7-Input\\">
<div class=\\"react-select__input\\"
style=\\"display:inline-block\\"
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
<input type=\\"text\\"
autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-configuration-collapse-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
value
aria-autocomplete=\\"list\\"
style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height:auto;-webkit-transition:none;-ms-transition:none;transition:none;overflow:visible\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
10s
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left:0%;width:18.181818181818183%\\"
class=\\"input-range__track input-range__track--active\\"
>
<div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position:absolute;left:18.181818181818183%\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
30s
</span>
</span>
<div aria-valuemax=\\"120\\"
aria-valuemin=\\"10\\"
aria-valuenow=\\"30\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
</div>
</span>
</div>
</div>
</div>
<div class=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
>
<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>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
120s
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Grid sort order
</label>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Filter bar configuration
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</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-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Use defaults from karma config file
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height:0;-webkit-transition:height 50ms linear;-ms-transition:height 50ms linear;transition:height 50ms linear;overflow:hidden\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input type=\\"checkbox\\"
id=\\"configuration-autohide\\"
class=\\"custom-control-input\\"
value
checked
>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-autohide\\"
>
Hide filter bar when idle
</label>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Alert group titlebar configuration
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height:0;-webkit-transition:height 50ms linear;-ms-transition:height 50ms linear;transition:height 50ms linear;overflow:hidden\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input type=\\"checkbox\\"
id=\\"configuration-colortitlebar\\"
class=\\"custom-control-input\\"
value
>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-colortitlebar\\"
>
Color group titlebar
</label>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Minimal alert group width
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height:0;-webkit-transition:height 50ms linear;-ms-transition:height 50ms linear;transition:height 50ms linear;overflow:hidden\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
300
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left:0%;width:24%\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<div class=\\"css-w8afj7-Input\\">
<div class=\\"react-select__input\\"
style=\\"display:inline-block\\"
<span class=\\"input-range__slider-container\\"
style=\\"position:absolute;left:24%\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
420
</span>
</span>
<div aria-valuemax=\\"800\\"
aria-valuemin=\\"300\\"
aria-valuenow=\\"420\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
<input type=\\"text\\"
autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-configuration-sort-order-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
value
aria-autocomplete=\\"list\\"
style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
800
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default number of alerts to show per group
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height:0;-webkit-transition:height 50ms linear;-ms-transition:height 50ms linear;transition:height 50ms linear;overflow:hidden\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
1
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left:0%;width:44.44444444444444%\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position:absolute;left:44.44444444444444%\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
5
</span>
</span>
<div aria-valuemax=\\"10\\"
aria-valuemin=\\"1\\"
aria-valuenow=\\"5\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
10
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default alert group display
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height:0;-webkit-transition:height 50ms linear;-ms-transition:height 50ms linear;transition:height 50ms linear;overflow:hidden\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-w8afj7-Input\\">
<div class=\\"react-select__input\\"
style=\\"display:inline-block\\"
>
<div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
<input type=\\"text\\"
autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-configuration-collapse-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
value
aria-autocomplete=\\"list\\"
style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
>
<div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
</div>
</div>
</div>
</div>
</div>
<div class=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
<div class=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<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>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
>
<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>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Grid sort order
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height:0;-webkit-transition:height 50ms linear;-ms-transition:height 50ms linear;transition:height 50ms linear;overflow:hidden\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<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-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-w8afj7-Input\\">
<div class=\\"react-select__input\\"
style=\\"display:inline-block\\"
>
<input type=\\"text\\"
autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-configuration-sort-order-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
value
aria-autocomplete=\\"list\\"
style=\\"box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
>
<div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
</div>
</div>
</div>
</div>
<div class=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
>
<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>

47
ui/src/Components/MainModal/Configuration/index.js
View File

@@ -2,6 +2,7 @@ import React from "react";
import PropTypes from "prop-types";
import { Settings } from "Stores/Settings";
import { Accordion } from "Components/Accordion";
import { FetchConfiguration } from "./FetchConfiguration";
import { FilterBarConfiguration } from "./FilterBarConfiguration";
import { AlertGroupConfiguration } from "./AlertGroupConfiguration";
@@ -11,20 +12,38 @@ import { AlertGroupCollapseConfiguration } from "./AlertGroupCollapseConfigurati
import { AlertGroupTitleBarColor } from "./AlertGroupTitleBarColor";
const Configuration = ({ settingsStore }) => (
<form className="px-3">
<FetchConfiguration settingsStore={settingsStore} />
<div className="mt-5" />
<FilterBarConfiguration settingsStore={settingsStore} />
<div className="mt-5" />
<AlertGroupTitleBarColor settingsStore={settingsStore} />
<div className="mt-5" />
<AlertGroupWidthConfiguration settingsStore={settingsStore} />
<div className="mt-5" />
<AlertGroupConfiguration settingsStore={settingsStore} />
<div className="mt-5" />
<AlertGroupCollapseConfiguration settingsStore={settingsStore} />
<div className="mt-5" />
<AlertGroupSortConfiguration settingsStore={settingsStore} />
<form className="px-3 accordion">
<Accordion
text="Refresh interval"
content={<FetchConfiguration settingsStore={settingsStore} />}
extraProps={{ open: true }}
/>
<Accordion
text="Filter bar configuration"
content={<FilterBarConfiguration settingsStore={settingsStore} />}
/>
<Accordion
text="Alert group titlebar configuration"
content={<AlertGroupTitleBarColor settingsStore={settingsStore} />}
/>
<Accordion
text="Minimal alert group width"
content={<AlertGroupWidthConfiguration settingsStore={settingsStore} />}
/>
<Accordion
text="Default number of alerts to show per group"
content={<AlertGroupConfiguration settingsStore={settingsStore} />}
/>
<Accordion
text="Default alert group display"
content={
<AlertGroupCollapseConfiguration settingsStore={settingsStore} />
}
/>
<Accordion
text="Grid sort order"
content={<AlertGroupSortConfiguration settingsStore={settingsStore} />}
/>
</form>
);
Configuration.propTypes = {

393
ui/src/Components/MainModal/Help.js
View File

@@ -1,6 +1,8 @@
import React from "react";
import PropTypes from "prop-types";
import { Accordion } from "Components/Accordion";
const FilterOperatorHelp = ({ operator, description, children }) => (
<React.Fragment>
<dt>
@@ -62,203 +64,216 @@ FilterExample.propTypes = {
};
const Help = () => (
<div>
<h4 className="text-center">Filter operators</h4>
<dl>
<FilterOperatorHelp operator="=" description="Exact match">
True if compared alert attribute value is equal to <code>value</code>.
</FilterOperatorHelp>
<FilterOperatorHelp operator="!=" description="Negative match">
True if compared alert attribute is missing or have a value that is not
equal to <code>value</code>.
</FilterOperatorHelp>
<FilterOperatorHelp operator="=~" description="Regular expression match">
True if compared alert attribute value matches <code>value</code> regex.
</FilterOperatorHelp>
<FilterOperatorHelp
operator="!~"
description="Negative regular expression match"
>
False if compared alert attribute value matches <code>value</code>{" "}
regex.
</FilterOperatorHelp>
<FilterOperatorHelp operator="&gt;" description="Greater than match">
True if compared alert attribute value is greater than{" "}
<code>value</code>.
</FilterOperatorHelp>
<FilterOperatorHelp operator="&lt;" description="Less than match">
True if compared alert attribue value is less than <code>value</code>.
</FilterOperatorHelp>
</dl>
<div className="mt-5">
<h4 className="text-center">Filtering using alert labels</h4>
<dl>
<QueryHelp
title="Match alerts based on any label"
operators={["=", "!=", "=~", "!~", ">", "<"]}
>
<FilterExample example="alertname=UnableToPing">
Match alerts with label <code>alertname</code> equal to{" "}
<code>UnableToPing</code>.
</FilterExample>
<FilterExample example="hostname=localhost">
Match alerts with label <code>hostname</code> equal to{" "}
<code>localhost</code>.
</FilterExample>
<FilterExample example="service!=apache3">
Match alerts with label <code>service</code> missing or not equal to{" "}
<code>apache3</code>.
</FilterExample>
<FilterExample example="service=~apache">
Match alerts with label <code>service</code> matching regular
expression <code>/.*apache.*/</code>.
</FilterExample>
<FilterExample example="service=~apache[1-3]">
Match alerts with label <code>service</code> matching regular
expression <code>/.*apache[1-3].*/</code>.
</FilterExample>
<FilterExample example="priority>4">
Match alerts with label <code>priority</code> value{" "}
<code>&gt;</code> than <code>4</code>. Value will be casted to
integer if possible, string comparision will be used as fallback.
</FilterExample>
</QueryHelp>
</dl>
</div>
<div className="mt-5">
<h4 className="text-center">Filtering alerts using special filters</h4>
<dl>
<QueryHelp
title="Match alerts based on the Alertmanager instance name they were
<div className="accordion">
<Accordion
text="Fiter operators"
content={
<dl>
<FilterOperatorHelp operator="=" description="Exact match">
True if compared alert attribute value is equal to{" "}
<code>value</code>.
</FilterOperatorHelp>
<FilterOperatorHelp operator="!=" description="Negative match">
True if compared alert attribute is missing or have a value that is
not equal to <code>value</code>.
</FilterOperatorHelp>
<FilterOperatorHelp
operator="=~"
description="Regular expression match"
>
True if compared alert attribute value matches <code>value</code>{" "}
regex.
</FilterOperatorHelp>
<FilterOperatorHelp
operator="!~"
description="Negative regular expression match"
>
False if compared alert attribute value matches <code>value</code>{" "}
regex.
</FilterOperatorHelp>
<FilterOperatorHelp operator="&gt;" description="Greater than match">
True if compared alert attribute value is greater than{" "}
<code>value</code>.
</FilterOperatorHelp>
<FilterOperatorHelp operator="&lt;" description="Less than match">
True if compared alert attribue value is less than{" "}
<code>value</code>.
</FilterOperatorHelp>
</dl>
}
extraProps={{ open: true }}
/>
<Accordion
text="Filtering using alert labels"
content={
<dl>
<QueryHelp
title="Match alerts based on any label"
operators={["=", "!=", "=~", "!~", ">", "<"]}
>
<FilterExample example="alertname=UnableToPing">
Match alerts with label <code>alertname</code> equal to{" "}
<code>UnableToPing</code>.
</FilterExample>
<FilterExample example="hostname=localhost">
Match alerts with label <code>hostname</code> equal to{" "}
<code>localhost</code>.
</FilterExample>
<FilterExample example="service!=apache3">
Match alerts with label <code>service</code> missing or not equal
to <code>apache3</code>.
</FilterExample>
<FilterExample example="service=~apache">
Match alerts with label <code>service</code> matching regular
expression <code>/.*apache.*/</code>.
</FilterExample>
<FilterExample example="service=~apache[1-3]">
Match alerts with label <code>service</code> matching regular
expression <code>/.*apache[1-3].*/</code>.
</FilterExample>
<FilterExample example="priority>4">
Match alerts with label <code>priority</code> value{" "}
<code>&gt;</code> than <code>4</code>. Value will be casted to
integer if possible, string comparision will be used as fallback.
</FilterExample>
</QueryHelp>
</dl>
}
/>
<Accordion
text="Filtering alerts using special filters"
content={
<dl>
<QueryHelp
title="Match alerts based on the Alertmanager instance name they were
collected from"
operators={["=", "!=", "=~", "!~"]}
>
<FilterExample example="@alertmanager=prod">
Match alerts collected from Alertmanager instance named{" "}
<code>prod</code>.
</FilterExample>
<FilterExample example="@alertmanager!=dev">
Match alerts collected from Alertmanager instances except for the
one named <code>dev</code>.
</FilterExample>
<FilterExample example="@alertmanager=~prod">
Match alerts collected from Alertmanager instances with names
matching regular expression <code>/.*prod.*/</code>.
</FilterExample>
</QueryHelp>
operators={["=", "!=", "=~", "!~"]}
>
<FilterExample example="@alertmanager=prod">
Match alerts collected from Alertmanager instance named{" "}
<code>prod</code>.
</FilterExample>
<FilterExample example="@alertmanager!=dev">
Match alerts collected from Alertmanager instances except for the
one named <code>dev</code>.
</FilterExample>
<FilterExample example="@alertmanager=~prod">
Match alerts collected from Alertmanager instances with names
matching regular expression <code>/.*prod.*/</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the receiver name"
operators={["=", "!=", "=~", "!~"]}
>
<FilterExample example="@receiver=default">
Match alerts sent to the default receiver.
</FilterExample>
<FilterExample example="@receiver!=hipchat">
Match alerts not sent to the hipchat receiver.
</FilterExample>
<FilterExample example="@receiver=~email">
Match alerts sent to any receiver with name matching regular
expression <code>/.*email.*/</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the receiver name"
operators={["=", "!=", "=~", "!~"]}
>
<FilterExample example="@receiver=default">
Match alerts sent to the default receiver.
</FilterExample>
<FilterExample example="@receiver!=hipchat">
Match alerts not sent to the hipchat receiver.
</FilterExample>
<FilterExample example="@receiver=~email">
Match alerts sent to any receiver with name matching regular
expression <code>/.*email.*/</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the state"
operators={["=", "!="]}
>
<FilterExample example="@state=active">
Match only active alerts.
</FilterExample>
<FilterExample example="@state!=active">
Match alerts that are not active, only suppressed and unprocessed
will be matched.
</FilterExample>
<FilterExample example="@state=suppressed">
Match only suppressed alerts.
</FilterExample>
<FilterExample example="@state=unprocessed">
Match only unprocessed alerts.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the state"
operators={["=", "!="]}
>
<FilterExample example="@state=active">
Match only active alerts.
</FilterExample>
<FilterExample example="@state!=active">
Match alerts that are not active, only suppressed and unprocessed
will be matched.
</FilterExample>
<FilterExample example="@state=suppressed">
Match only suppressed alerts.
</FilterExample>
<FilterExample example="@state=unprocessed">
Match only unprocessed alerts.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match suppressed alerts based on the silence ID"
operators={["=", "!="]}
>
<FilterExample example="@silence_id=abc123456789">
Match alerts suppressed by silence <code>abc123456789</code>.
</FilterExample>
<FilterExample example="@silence_id!=abc123456789">
Match alerts suppressed by any silence except{" "}
<code>abc123456789</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match suppressed alerts based on the silence ID"
operators={["=", "!="]}
>
<FilterExample example="@silence_id=abc123456789">
Match alerts suppressed by silence <code>abc123456789</code>.
</FilterExample>
<FilterExample example="@silence_id!=abc123456789">
Match alerts suppressed by any silence except{" "}
<code>abc123456789</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the author of silence"
operators={["=", "!=", "=~", "!~"]}
>
<FilterExample example="@silence_author=me@example.com">
Match alerts silenced by <code>me@example.com</code>.
</FilterExample>
<FilterExample example="@silence_author!=me@example.com">
Match alerts silenced by everyone except{" "}
<code>foo@example.com</code>.
</FilterExample>
<FilterExample example="@silence_author=~@example.com">
Match alerts silenced by author matching regular expression{" "}
<code>/.*@example.com.*/</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the author of silence"
operators={["=", "!=", "=~", "!~"]}
>
<FilterExample example="@silence_author=me@example.com">
Match alerts silenced by <code>me@example.com</code>.
</FilterExample>
<FilterExample example="@silence_author!=me@example.com">
Match alerts silenced by everyone except{" "}
<code>foo@example.com</code>.
</FilterExample>
<FilterExample example="@silence_author=~@example.com">
Match alerts silenced by author matching regular expression{" "}
<code>/.*@example.com.*/</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the jira linked in the silence"
operators={["=", "!=", "=~", "!~"]}
>
<div className="text-warning">
This is supported only if JIRA regexp are enabled and able to match
JIRA ids in the silence comment body.
</div>
<FilterExample example="@silence_jira=PROJECT-123">
Match silenced alerts where detected JIRA issue id is equal to{" "}
<code>PROJECT-123</code>.
</FilterExample>
<FilterExample example="@silence_jira!=PROJECT-123">
Match silenced alerts where detected JIRA issue id is different than{" "}
<code>PROJECT-123</code>.
</FilterExample>
<FilterExample example="@silence_jira=~PROJECT">
Match silenced alerts where detected JIRA issue id matches regular
expression <code>/.*PROJECT.*/</code>.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on the jira linked in the silence"
operators={["=", "!=", "=~", "!~"]}
>
<div className="text-warning">
This is supported only if JIRA regexp are enabled and able to
match JIRA ids in the silence comment body.
</div>
<FilterExample example="@silence_jira=PROJECT-123">
Match silenced alerts where detected JIRA issue id is equal to{" "}
<code>PROJECT-123</code>.
</FilterExample>
<FilterExample example="@silence_jira!=PROJECT-123">
Match silenced alerts where detected JIRA issue id is different
than <code>PROJECT-123</code>.
</FilterExample>
<FilterExample example="@silence_jira=~PROJECT">
Match silenced alerts where detected JIRA issue id matches regular
expression <code>/.*PROJECT.*/</code>.
</FilterExample>
</QueryHelp>
<QueryHelp title="Limit number of displayed alerts" operators={["="]}>
<div className="text-warning">Value must be a number &gt;= 1.</div>
<FilterExample example="@limit=10">
Limit number of displayed alerts to 10.
</FilterExample>
</QueryHelp>
<QueryHelp title="Limit number of displayed alerts" operators={["="]}>
<div className="text-warning">Value must be a number &gt;= 1.</div>
<FilterExample example="@limit=10">
Limit number of displayed alerts to 10.
</FilterExample>
</QueryHelp>
<QueryHelp
title="Match alerts based on creation timestamp"
operators={[">", "<"]}
>
<FilterExample example="@age&gt;15m">
Match alerts older than 15 minutes.
</FilterExample>
<FilterExample example="@age&gt;1h">
Match alerts older than 1 hour.
</FilterExample>
<FilterExample example="@age&lt;10h30m">
Match alerts more recent than 10 hours and 30 minutes.
</FilterExample>
</QueryHelp>
</dl>
</div>
<QueryHelp
title="Match alerts based on creation timestamp"
operators={[">", "<"]}
>
<FilterExample example="@age&gt;15m">
Match alerts older than 15 minutes.
</FilterExample>
<FilterExample example="@age&gt;1h">
Match alerts older than 1 hour.
</FilterExample>
<FilterExample example="@age&lt;10h30m">
Match alerts more recent than 10 hours and 30 minutes.
</FilterExample>
</QueryHelp>
</dl>
}
/>
</div>
);

1392
ui/src/Components/MainModal/__snapshots__/Help.test.js.snap
View File

File diff suppressed because it is too large Load Diff

714
ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
View File

@@ -21,294 +21,470 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</nav>
</div>
<div class=\\"modal-body\\">
<form class=\\"px-3\\">
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Refresh interval
</label>
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
10s
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left: 0%; width: 18.181818181818183%;\\"
class=\\"input-range__track input-range__track--active\\"
>
<form class=\\"px-3 accordion\\">
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-open card-header cursor-pointer bg-light\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Refresh interval
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position: absolute; left: 18.181818181818183%;\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
30s
</span>
</span>
<div aria-valuemax=\\"120\\"
aria-valuemin=\\"10\\"
aria-valuenow=\\"30\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
120s
</span>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Filter bar configuration
</label>
</div>
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input id=\\"configuration-autohide\\"
class=\\"custom-control-input\\"
type=\\"checkbox\\"
value
checked
>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-autohide\\"
>
Hide filter bar when idle
</label>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Alert group titlebar configuration
</label>
</div>
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input id=\\"configuration-colortitlebar\\"
class=\\"custom-control-input\\"
type=\\"checkbox\\"
value
>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-colortitlebar\\"
>
Color group titlebar
</label>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Minimal alert group width
</label>
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
300
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left: 0%; width: 24%;\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position: absolute; left: 24%;\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
420
</span>
</span>
<div aria-valuemax=\\"800\\"
aria-valuemin=\\"300\\"
aria-valuenow=\\"420\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
800
</span>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Default number of alerts to show per group
</label>
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
1
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left: 0%; width: 44.44444444444444%;\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position: absolute; left: 44.44444444444444%;\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
5
</span>
</span>
<div aria-valuemax=\\"10\\"
aria-valuemin=\\"1\\"
aria-valuenow=\\"5\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
10
</span>
</span>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-4 font-weight-bold\\">
Default alert group display
</label>
</div>
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-w8afj7-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-configuration-collapse-input\\"
spellcheck=\\"false\\"
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height: auto; transition: none; overflow: visible;\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
10s
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left: 0%; width: 18.181818181818183%;\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position: absolute; left: 18.181818181818183%;\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
30s
</span>
</span>
<div aria-valuemax=\\"120\\"
aria-valuemin=\\"10\\"
aria-valuenow=\\"30\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
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;\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
120s
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Filter bar configuration
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height: 0px; transition: height 50ms linear; overflow: hidden;\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input id=\\"configuration-autohide\\"
class=\\"custom-control-input\\"
type=\\"checkbox\\"
value
checked
>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-autohide\\"
>
Hide filter bar when idle
</label>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Alert group titlebar configuration
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height: 0px; transition: height 50ms linear; overflow: hidden;\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<div class=\\"form-check form-check-inline\\">
<span class=\\"custom-control custom-switch\\">
<input id=\\"configuration-colortitlebar\\"
class=\\"custom-control-input\\"
type=\\"checkbox\\"
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=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
>
<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>
<label class=\\"custom-control-label cursor-pointer mr-3\\"
for=\\"configuration-colortitlebar\\"
>
Color group titlebar
</label>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"mt-5\\">
</div>
<div class=\\"form-group\\">
<div class=\\"text-center\\">
<label class=\\"mb-2 font-weight-bold\\">
Grid sort order
</label>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Minimal alert group width
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</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-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Use defaults from karma config file
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height: 0px; transition: height 50ms linear; overflow: hidden;\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
300
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left: 0%; width: 24%;\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<div class=\\"css-w8afj7-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
<span class=\\"input-range__slider-container\\"
style=\\"position: absolute; left: 24%;\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
420
</span>
</span>
<div aria-valuemax=\\"800\\"
aria-valuemin=\\"300\\"
aria-valuenow=\\"420\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
<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>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
800
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default number of alerts to show per group
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height: 0px; transition: height 50ms linear; overflow: hidden;\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0 text-center\\">
<div aria-disabled=\\"false\\"
class=\\"input-range\\"
>
<span class=\\"input-range__label input-range__label--min\\">
<span class=\\"input-range__label-container\\">
1
</span>
</span>
<div class=\\"input-range__track input-range__track--background\\">
<div style=\\"left: 0%; width: 44.44444444444444%;\\"
class=\\"input-range__track input-range__track--active\\"
>
</div>
<span class=\\"input-range__slider-container\\"
style=\\"position: absolute; left: 44.44444444444444%;\\"
>
<span class=\\"input-range__label input-range__label--value\\">
<span class=\\"input-range__label-container\\">
5
</span>
</span>
<div aria-valuemax=\\"10\\"
aria-valuemin=\\"1\\"
aria-valuenow=\\"5\\"
class=\\"input-range__slider\\"
draggable=\\"false\\"
role=\\"slider\\"
tabindex=\\"0\\"
>
</div>
</span>
</div>
<span class=\\"input-range__label input-range__label--max\\">
<span class=\\"input-range__label-container\\">
10
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default alert group display
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height: 0px; transition: height 50ms linear; overflow: hidden;\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-w8afj7-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
<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;\\">
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-configuration-collapse-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>
<div class=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
<div class=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<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>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
>
<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>
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Grid sort order
</div>
<div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
</div>
<div class=\\"Collapsible__contentOuter collapse show\\"
style=\\"height: 0px; transition: height 50ms linear; overflow: hidden;\\"
>
<div class=\\"Collapsible__contentInner card-body my-2\\">
<div class=\\"form-group mb-0\\">
<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-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-w8afj7-Input\\">
<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=\\"react-select__indicators css-u1mhof-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-tj5bde-Svg\\"
>
<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>