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): show matched alert count on silence browser

Browse Source
This commit is contained in:
Łukasz Mierzwa
2019-10-30 14:19:06 +00:00
parent 67e473af54
commit 96822e7f66
12 changed files with 252 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View File

@@ -290,7 +290,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
<div class=\\"card-header border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -306,39 +306,39 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
14 hours ago
</time>
</span>
</div>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
14 hours ago
</time>
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
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\\"
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column justify-content-between align-items-center\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
</path>
</svg>
<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>

2
ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.js
View File

@@ -46,6 +46,8 @@ const RenderSilence = (
<ManagedSilence
key={silenceID}
cluster={cluster}
alertCount={0}
alertCountAlwaysVisible={false}
silence={silence}
alertStore={alertStore}
silenceFormStore={silenceFormStore}

9
ui/src/Components/Labels/FilteringCounterBadge/index.js
View File

@@ -19,13 +19,14 @@ const FilteringCounterBadge = observer(
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
counter: PropTypes.number.isRequired,
themed: PropTypes.bool.isRequired
themed: PropTypes.bool.isRequired,
alwaysVisible: PropTypes.bool
};
render() {
const { name, value, counter, themed } = this.props;
const { name, value, counter, themed, alwaysVisible } = this.props;
if (counter === 0) return null;
if (!alwaysVisible && counter === 0) return null;
const cs = this.getClassAndStyle(
name,
@@ -35,7 +36,7 @@ const FilteringCounterBadge = observer(
return (
<TooltipWrapper
title={`Click to only show ${value} alerts or Alt+Click to hide them`}
title={`Click to only show ${name}=${value} alerts or Alt+Click to hide them`}
>
<Flash spy={counter}>
<span

51
ui/src/Components/ManagedSilence/SilenceComment.js
View File

@@ -8,13 +8,18 @@ import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalL
import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
import { APISilence } from "Models/API";
import { AlertStore } from "Stores/AlertStore";
import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge";
import { SilenceProgress } from "./SilenceProgress";
const SilenceComment = ({
silence,
alertCount,
alertCountAlwaysVisible,
collapsed,
collapseToggle,
afterUpdate
afterUpdate,
alertStore
}) => {
const comment = silence.jiraURL ? (
<a href={silence.jiraURL} target="_blank" rel="noopener noreferrer">
@@ -28,10 +33,10 @@ const SilenceComment = ({
return (
<React.Fragment>
<div className="d-flex flex-row">
<div className="flex-shrink-0 flex-grow-0 mr-2">
<div className="flex-shrink-0 flex-grow-0">
<FontAwesomeIcon icon={faBellSlash} className="text-muted" />
</div>
<div className="flex-shrink-1 flex-grow-1 mw-1p">
<div className="mx-2 flex-shrink-1 flex-grow-1 mw-1p">
<div
className={`font-italic ${
collapsed ? "text-truncate overflow-hidden" : ""
@@ -39,21 +44,29 @@ const SilenceComment = ({
>
{comment}
</div>
<div className="components-managed-silence-cite">
<span className="text-muted mr-2 font-italic">
&mdash; {silence.createdBy}
</span>
{collapsed ? <SilenceProgress silence={silence} /> : null}
</div>
</div>
</div>
<div className="pt-1 d-flex flex-row justify-content-between">
<div className="flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite">
<span className="text-muted mr-2 font-italic">
&mdash; {silence.createdBy}
</span>
{collapsed ? <SilenceProgress silence={silence} /> : null}
</div>
<div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">
<FontAwesomeIcon
icon={collapsed ? faChevronUp : faChevronDown}
className="ml-2 text-muted cursor-pointer"
onClick={collapseToggle}
/>
<div className="flex-shrink-0 flex-grow-0">
<div className="d-flex flex-column justify-content-between align-items-center">
<FilteringCounterBadge
alertStore={alertStore}
name="@silence_id"
value={silence.id}
counter={alertCount}
themed={false}
alwaysVisible={alertCountAlwaysVisible}
/>
<FontAwesomeIcon
icon={collapsed ? faChevronUp : faChevronDown}
className="mt-2 mr-1 text-muted cursor-pointer"
onClick={collapseToggle}
/>
</div>
</div>
</div>
</React.Fragment>
@@ -61,8 +74,10 @@ const SilenceComment = ({
};
SilenceComment.propTypes = {
silence: APISilence.isRequired,
alertCount: PropTypes.number.isRequired,
collapsed: PropTypes.bool.isRequired,
collapseToggle: PropTypes.func.isRequired
collapseToggle: PropTypes.func.isRequired,
alertStore: PropTypes.instanceOf(AlertStore).isRequired
};
export { SilenceComment };

5
ui/src/Components/ManagedSilence/SilenceComment.test.js
View File

@@ -5,12 +5,15 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { MockSilence } from "__mocks__/Alerts";
import { AlertStore } from "Stores/AlertStore";
import { SilenceComment } from "./SilenceComment";
let silence;
let alertStore;
beforeEach(() => {
silence = MockSilence();
alertStore = new AlertStore([]);
});
afterEach(() => {
@@ -23,6 +26,8 @@ const CollapseMock = jest.fn();
const MountedSilenceComment = collapsed => {
return mount(
<SilenceComment
alertStore={alertStore}
alertCount={123}
silence={silence}
collapsed={collapsed}
collapseToggle={CollapseMock}

128
ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
View File

@@ -3,7 +3,7 @@
exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
"
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -19,39 +19,51 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
20 years ago
</time>
</span>
</div>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
20 years ago
</time>
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
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\\"
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
>
</path>
</svg>
<span class=\\" badge-light badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
>
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
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>
"
@@ -60,7 +72,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
"
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -76,33 +88,45 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 ml-2 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<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\\"
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
>
</path>
</svg>
<span class=\\" badge-light badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
>
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<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\\"
>
</path>
</svg>
</div>
</div>
</div>
"

146
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View File

@@ -5,7 +5,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
<div class=\\"card-header border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -21,49 +21,61 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-truncate overflow-hidden\\">
Mocked Silence
</div>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
Expires
<time datetime=\\"946688400000\\">
in 30 minutes
</time>
<div class=\\"progress silence-progress bg-white\\">
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 50%;\\"
aria-valuenow=\\"50\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
<div class=\\"components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
Expires
<time datetime=\\"946688400000\\">
in 30 minutes
</time>
<div class=\\"progress silence-progress bg-white\\">
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 50%;\\"
aria-valuenow=\\"50\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
</span>
</span>
</div>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
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\\"
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
>
</path>
</svg>
<span class=\\" badge-light badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
>
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
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>
@@ -76,7 +88,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
<div class=\\"card-header border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -92,33 +104,45 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 ml-2 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<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\\"
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
>
</path>
</svg>
<span class=\\" badge-light badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
>
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 mt-2 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<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\\"
>
</path>
</svg>
</div>
</div>
</div>
</div>

7
ui/src/Components/ManagedSilence/index.js
View File

@@ -17,6 +17,8 @@ const ManagedSilence = observer(
class ManagedSilence extends Component {
static propTypes = {
cluster: PropTypes.string.isRequired,
alertCount: PropTypes.number.isRequired,
alertCountAlwaysVisible: PropTypes.bool.isRequired,
silence: APISilence.isRequired,
alertStore: PropTypes.instanceOf(AlertStore).isRequired,
silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
@@ -60,6 +62,8 @@ const ManagedSilence = observer(
render() {
const {
cluster,
alertCount,
alertCountAlwaysVisible,
silence,
alertStore,
silenceFormStore,
@@ -71,7 +75,10 @@ const ManagedSilence = observer(
<div className="card my-1 components-managed-silence">
<div className="card-header border-bottom-0 px-3">
<SilenceComment
alertStore={alertStore}
silence={silence}
alertCount={alertCount}
alertCountAlwaysVisible={alertCountAlwaysVisible}
collapsed={this.collapse.value}
collapseToggle={this.collapse.toggle}
/>

2
ui/src/Components/ManagedSilence/index.test.js
View File

@@ -54,6 +54,8 @@ const MountedManagedSilence = onDidUpdate => {
return mount(
<ManagedSilence
cluster={cluster}
alertCount={123}
alertCountAlwaysVisible={true}
silence={silence}
alertStore={alertStore}
silenceFormStore={silenceFormStore}

2
ui/src/Components/SilenceModal/Browser/index.js
View File

@@ -241,6 +241,8 @@ const Browser = observer(
<ManagedSilence
key={`${silence.cluster}/${silence.silence.id}`}
cluster={silence.cluster}
alertCount={silence.alertCount}
alertCountAlwaysVisible={true}
silence={silence.silence}
alertStore={alertStore}
silenceFormStore={silenceFormStore}

5
ui/src/Components/SilenceModal/Browser/index.test.js
View File

@@ -63,6 +63,7 @@ const MockSilenceList = count => {
silence.id = `silence${index}`;
silences.push({
cluster: cluster,
alertCount: 123,
silence: silence
});
}
@@ -86,6 +87,7 @@ describe("<Browser />", () => {
JSON.stringify([
{
cluster: cluster,
alertCount: 123,
silence: silence
}
])
@@ -102,6 +104,7 @@ describe("<Browser />", () => {
JSON.stringify([
{
cluster: cluster,
alertCount: 123,
silence: silence
}
])
@@ -123,6 +126,7 @@ describe("<Browser />", () => {
JSON.stringify([
{
cluster: cluster,
alertCount: 123,
silence: silence
}
])
@@ -172,6 +176,7 @@ describe("<Browser />", () => {
JSON.stringify([
{
cluster: cluster,
alertCount: 123,
silence: silence
}
])

1
ui/src/Components/SilenceModal/index.stories.js
View File

@@ -125,6 +125,7 @@ storiesOf("SilenceModal", module)
silence.id = `silence${index}`;
silences.push({
cluster: "am",
alertCount: index - 1,
silence: silence
});
}