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

chore(ui): tweak affected alerts preview

Browse Source
This commit is contained in:
Łukasz Mierzwa
2018-10-11 11:50:16 +01:00
parent 02443edd8d
commit a0cca7f049
6 changed files with 46 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
View File

@@ -178,15 +178,10 @@ const DeleteSilenceModalContent = observer(
<SuccessMessage />
)
) : this.previewState.error === null ? (
<div>
<p className="lead text-center">
Alerts affected by this silence
</p>
<LabelSetList
alertStore={alertStore}
labelsList={this.previewState.alertLabels}
/>
</div>
<LabelSetList
alertStore={alertStore}
labelsList={this.previewState.alertLabels}
/>
) : (
<ErrorMessage message={this.previewState.error} />
)}

49
ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
View File

@@ -2,27 +2,32 @@
exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
"
<ul class=\\"list-group list-group-flush\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
foo: bar
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
job: node_exporter
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
instance: server1
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
cluster: prod
</span>
</li>
</ul>
<div>
<p class=\\"lead text-center\\">
Affected alerts
</p>
<ul class=\\"list-group list-group-flush mb-3\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
foo: bar
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
job: node_exporter
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
instance: server1
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
cluster: prod
</span>
</li>
</ul>
</div>
"
`;

8
ui/src/Components/LabelSetList/index.js
View File

@@ -59,8 +59,9 @@ const LabelSetList = observer(
const { alertStore, labelsList } = this.props;
return labelsList.length > 0 ? (
<React.Fragment>
<ul className="list-group list-group-flush">
<div>
<p className="lead text-center">Affected alerts</p>
<ul className="list-group list-group-flush mb-3">
{labelsList
.slice(
(this.pagination.activePage - 1) * this.maxPerPage,
@@ -91,7 +92,6 @@ const LabelSetList = observer(
pageRangeDisplayed={5}
onChange={this.pagination.onPageChange}
hideFirstLastPages
hideDisabled
innerClass="pagination justify-content-center"
itemClass="page-item"
linkClass="page-link"
@@ -100,7 +100,7 @@ const LabelSetList = observer(
/>
</div>
) : null}
</React.Fragment>
</div>
) : (
<p className="text-muted text-center">No alerts matched</p>
);

6
ui/src/Components/LabelSetList/index.test.js
View File

@@ -28,7 +28,7 @@ describe("<LabelSetList />", () => {
it("renders labels on populated list", () => {
const tree = MountedLabelSetList([{ foo: "bar" }]);
expect(tree.text()).not.toBe("No alerts matched");
expect(tree.text()).toBe("foo: bar");
expect(tree.find("ul.list-group").text()).toBe("foo: bar");
});
it("matches snapshot with populated list", () => {
@@ -59,8 +59,8 @@ describe("<LabelSetList />", () => {
const tree = MountedLabelSetList(
Array.from(Array(21), (_, i) => ({ instance: `server${i + 1}` }))
);
const pageLink = tree.find(".page-link").at(2);
const pageLink = tree.find(".page-link").at(3);
pageLink.simulate("click");
expect(tree.text()).toBe("instance: server21");
expect(tree.find("ul.list-group").text()).toBe("instance: server21");
});
});

8
ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
View File

@@ -3,11 +3,11 @@
exports[`<SilencePreview /> matches snapshot 1`] = `
"
<div class=\\"mb-3\\">
<p class=\\"lead text-center\\">
Unique alert label sets (without receiver) matching this silence.
</p>
<div>
<ul class=\\"list-group list-group-flush\\">
<p class=\\"lead text-center\\">
Affected alerts
</p>
<ul class=\\"list-group list-group-flush mb-3\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate badge badge-dark mw-100\\">
alertname: foo

16
ui/src/Components/SilenceModal/SilencePreview/index.js
View File

@@ -96,18 +96,10 @@ const SilencePreview = observer(
{this.matchedAlerts.error !== null ? (
<FetchError message={this.matchedAlerts.error} />
) : (
<React.Fragment>
<p className="lead text-center">
Unique alert label sets (without receiver) matching this
silence.
</p>
<div>
<LabelSetList
alertStore={alertStore}
labelsList={this.matchedAlerts.alertLabels}
/>
</div>
</React.Fragment>
<LabelSetList
alertStore={alertStore}
labelsList={this.matchedAlerts.alertLabels}
/>
)}
</div>
<div className="d-flex flex-row-reverse">