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

Merge pull request #142 from prymitive/match-counter-tooltip

Browse Source 
feat(ui): add tooltips to silence matcher counters
This commit is contained in:
Łukasz Mierzwa
2018-10-11 12:59:45 +01:00
committed by GitHub
parent 931c7d0582 ba3a572604
commit 6dbe5683c8
3 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
View File

@@ -14,6 +14,7 @@ import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclama
import { FormatBackendURI, FormatAlertsQ } from "Stores/AlertStore";
import { SilenceFormStore } from "Stores/SilenceFormStore";
import { SilenceFormMatcher } from "Models/SilenceForm";
import { TooltipWrapper } from "Components/TooltipWrapper";
import { MatcherToFilter, AlertManagersToFilter } from "../Matchers";
const MatchCounter = observer(
@@ -93,7 +94,16 @@ const MatchCounter = observer(
if (this.matchedAlerts.error !== null) {
return (
<FontAwesomeIcon className="text-danger" icon={faExclamationCircle} />
<TooltipWrapper
title={`Failed to fetch alerts matching this label: ${
this.matchedAlerts.error
}`}
>
<FontAwesomeIcon
className="text-danger"
icon={faExclamationCircle}
/>
</TooltipWrapper>
);
}
@@ -107,13 +117,15 @@ const MatchCounter = observer(
});
return (
<span
className="badge badge-light badge-pill"
style={{ fontSize: "85%" }}
data-hash={matcherHash}
>
{this.matchedAlerts.total}
</span>
<TooltipWrapper title="Number of alerts matching this label">
<span
className="badge badge-light badge-pill"
style={{ fontSize: "85%" }}
data-hash={matcherHash}
>
{this.matchedAlerts.total}
</span>
</TooltipWrapper>
);
}
}

15
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
View File

@@ -5,12 +5,17 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
<div class=\\"css-10nd86i\\">
<div class=\\"css-7jxtyj\\">
<div class=\\"css-10war8y\\">
<span class=\\"badge badge-light badge-pill\\"
style=\\"font-size:85%\\"
data-hash=\\"76ea01a7b7d0189a690ed2b409ad07a87dbd039c\\"
<div title=\\"Number of alerts matching this label\\"
class
style=\\"display:inline\\"
>
0
</span>
<span class=\\"badge badge-light badge-pill\\"
style=\\"font-size:85%\\"
data-hash=\\"76ea01a7b7d0189a690ed2b409ad07a87dbd039c\\"
>
0
</span>
</div>
<div>
<div class=\\"css-1492t68\\">
Label value

17
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
View File

@@ -2,11 +2,18 @@
exports[`<MatchCounter /> matches snapshot with empty matcher 1`] = `
"
<span class=\\"badge badge-light badge-pill\\"
style=\\"font-size: 85%;\\"
data-hash=\\"2153b6623363af13fa91f1ad35fa4cfc6462d349\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Number of alerts matching this label\\"
>
0
</span>
<span class=\\"badge badge-light badge-pill\\"
style=\\"font-size: 85%;\\"
data-hash=\\"2153b6623363af13fa91f1ad35fa4cfc6462d349\\"
>
0
</span>
</div>
"
`;