mirror of
https://github.com/prymitive/karma
synced 2026-05-07 03:26:52 +00:00
Merge pull request #1123 from prymitive/more-details
feat(ui): show silence ID on the silence detail view
This commit is contained in:
Łukasz Mierzwa
GitHub
@@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import hash from "object-hash";
|
||||
@@ -6,19 +6,45 @@ import hash from "object-hash";
|
||||
import moment from "moment";
|
||||
import Moment from "react-moment";
|
||||
|
||||
import copy from "copy-to-clipboard";
|
||||
|
||||
import Flash from "react-reveal/Flash";
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEdit } from "@fortawesome/free-solid-svg-icons/faEdit";
|
||||
import { faCalendarCheck } from "@fortawesome/free-solid-svg-icons/faCalendarCheck";
|
||||
import { faCalendarTimes } from "@fortawesome/free-solid-svg-icons/faCalendarTimes";
|
||||
import { faFilter } from "@fortawesome/free-solid-svg-icons/faFilter";
|
||||
import { faHome } from "@fortawesome/free-solid-svg-icons/faHome";
|
||||
import { faFingerprint } from "@fortawesome/free-solid-svg-icons/faFingerprint";
|
||||
import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
|
||||
|
||||
import { APISilence } from "Models/API";
|
||||
import { SilenceFormStore } from "Stores/SilenceFormStore";
|
||||
import { QueryOperators } from "Common/Query";
|
||||
import { TooltipWrapper } from "Components/TooltipWrapper";
|
||||
import { RenderLinkAnnotation } from "Components/Grid/AlertGrid/AlertGroup/Annotation";
|
||||
import { DeleteSilence } from "./DeleteSilence";
|
||||
|
||||
const SilenceIDCopyButton = ({ id }) => {
|
||||
const [clickCount, setClickCount] = useState(0);
|
||||
return (
|
||||
<TooltipWrapper title="Copy silence ID to the clipboard">
|
||||
<Flash spy={clickCount} duration={500}>
|
||||
<span
|
||||
className="badge badge-secondary px-1 mr-1 components-label cursor-pointer"
|
||||
onClick={() => {
|
||||
copy(id);
|
||||
setClickCount(clickCount + 1);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCopy} />
|
||||
</span>
|
||||
</Flash>
|
||||
</TooltipWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const SilenceDetails = ({
|
||||
alertStore,
|
||||
silenceFormStore,
|
||||
@@ -63,6 +89,20 @@ const SilenceDetails = ({
|
||||
{expiresLabel} <Moment fromNow>{silence.endsAt}</Moment>
|
||||
</span>
|
||||
</div>
|
||||
<div className="my-1 d-flex flex-row">
|
||||
<span className="badge px-1 mr-1 components-label flex-grow-0 flex-shrink-0">
|
||||
<FontAwesomeIcon
|
||||
className="text-muted mr-1"
|
||||
icon={faFingerprint}
|
||||
fixedWidth
|
||||
/>
|
||||
ID:
|
||||
</span>
|
||||
<span className="badge badge-light px-1 mr-1 components-label">
|
||||
{silence.id}
|
||||
</span>
|
||||
<SilenceIDCopyButton id={silence.id} />
|
||||
</div>
|
||||
<div className="my-1">
|
||||
<span className="badge px-1 mr-1 components-label">
|
||||
<FontAwesomeIcon
|
||||
|
||||
@@ -4,6 +4,8 @@ import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
|
||||
import copy from "copy-to-clipboard";
|
||||
|
||||
import moment from "moment";
|
||||
import { advanceTo, clear } from "jest-date-mock";
|
||||
|
||||
@@ -84,4 +86,12 @@ describe("<SilenceDetails />", () => {
|
||||
"http://example.com/#/silences/04d37636-2350-4878-b382-e0b50353230f"
|
||||
);
|
||||
});
|
||||
|
||||
it("clicking on the copy button copies silence ID to the clipboard", () => {
|
||||
const tree = MountedSilenceDetails();
|
||||
const button = tree.find("span.badge.badge-secondary");
|
||||
button.simulate("click");
|
||||
expect(copy).toHaveBeenCalledTimes(1);
|
||||
expect(copy).toHaveBeenCalledWith(silence.id);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -119,7 +119,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
|
||||
<div class
|
||||
style=\\"display: inline-block; max-width: 100%;\\"
|
||||
data-tooltipped
|
||||
aria-describedby=\\"tippy-tooltip-3\\"
|
||||
aria-describedby=\\"tippy-tooltip-4\\"
|
||||
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
|
||||
>
|
||||
<span class=\\" badge-primary badge-pill components-label-with-hover components-label badge\\"
|
||||
@@ -192,6 +192,53 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
<div class=\\"my-1 d-flex flex-row\\">
|
||||
<span class=\\"badge px-1 mr-1 components-label flex-grow-0 flex-shrink-0\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"fingerprint\\"
|
||||
class=\\"svg-inline--fa fa-fingerprint fa-w-16 fa-fw text-muted mr-1\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 512 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M256.12 245.96c-13.25 0-24 10.74-24 24 1.14 72.25-8.14 141.9-27.7 211.55-2.73 9.72 2.15 30.49 23.12 30.49 10.48 0 20.11-6.92 23.09-17.52 13.53-47.91 31.04-125.41 29.48-224.52.01-13.25-10.73-24-23.99-24zm-.86-81.73C194 164.16 151.25 211.3 152.1 265.32c.75 47.94-3.75 95.91-13.37 142.55-2.69 12.98 5.67 25.69 18.64 28.36 13.05 2.67 25.67-5.66 28.36-18.64 10.34-50.09 15.17-101.58 14.37-153.02-.41-25.95 19.92-52.49 54.45-52.34 31.31.47 57.15 25.34 57.62 55.47.77 48.05-2.81 96.33-10.61 143.55-2.17 13.06 6.69 25.42 19.76 27.58 19.97 3.33 26.81-15.1 27.58-19.77 8.28-50.03 12.06-101.21 11.27-152.11-.88-55.8-47.94-101.88-104.91-102.72zm-110.69-19.78c-10.3-8.34-25.37-6.8-33.76 3.48-25.62 31.5-39.39 71.28-38.75 112 .59 37.58-2.47 75.27-9.11 112.05-2.34 13.05 6.31 25.53 19.36 27.89 20.11 3.5 27.07-14.81 27.89-19.36 7.19-39.84 10.5-80.66 9.86-121.33-.47-29.88 9.2-57.88 28-80.97 8.35-10.28 6.79-25.39-3.49-33.76zm109.47-62.33c-15.41-.41-30.87 1.44-45.78 4.97-12.89 3.06-20.87 15.98-17.83 28.89 3.06 12.89 16 20.83 28.89 17.83 11.05-2.61 22.47-3.77 34-3.69 75.43 1.13 137.73 61.5 138.88 134.58.59 37.88-1.28 76.11-5.58 113.63-1.5 13.17 7.95 25.08 21.11 26.58 16.72 1.95 25.51-11.88 26.58-21.11a929.06 929.06 0 0 0 5.89-119.85c-1.56-98.75-85.07-180.33-186.16-181.83zm252.07 121.45c-2.86-12.92-15.51-21.2-28.61-18.27-12.94 2.86-21.12 15.66-18.26 28.61 4.71 21.41 4.91 37.41 4.7 61.6-.11 13.27 10.55 24.09 23.8 24.2h.2c13.17 0 23.89-10.61 24-23.8.18-22.18.4-44.11-5.83-72.34zm-40.12-90.72C417.29 43.46 337.6 1.29 252.81.02 183.02-.82 118.47 24.91 70.46 72.94 24.09 119.37-.9 181.04.14 246.65l-.12 21.47c-.39 13.25 10.03 24.31 23.28 24.69.23.02.48.02.72.02 12.92 0 23.59-10.3 23.97-23.3l.16-23.64c-.83-52.5 19.16-101.86 56.28-139 38.76-38.8 91.34-59.67 147.68-58.86 69.45 1.03 134.73 35.56 174.62 92.39 7.61 10.86 22.56 13.45 33.42 5.86 10.84-7.62 13.46-22.59 5.84-33.43z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
ID:
|
||||
</span>
|
||||
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
|
||||
04d37636-2350-4878-b382-e0b50353230f
|
||||
</span>
|
||||
<div class
|
||||
style=\\"display: inline-block; max-width: 100%;\\"
|
||||
data-tooltipped
|
||||
aria-describedby=\\"tippy-tooltip-5\\"
|
||||
data-original-title=\\"Copy silence ID to the clipboard\\"
|
||||
>
|
||||
<span class=\\" badge badge-secondary px-1 mr-1 components-label cursor-pointer\\"
|
||||
style=\\"opacity: 1;\\"
|
||||
>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"copy\\"
|
||||
class=\\"svg-inline--fa fa-copy fa-w-14 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 448 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"my-1\\">
|
||||
<span class=\\"badge px-1 mr-1 components-label\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
|
||||
@@ -19,7 +19,10 @@ for (const level of ["error", "warn", "info", "log", "trace"]) {
|
||||
// https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#new-deprecations
|
||||
const reactDeprecationWarning = /.*has been renamed, and is not recommended for use.*/;
|
||||
global.console[level] = (message, ...args) => {
|
||||
if (reactDeprecationWarning.test(message) === false) {
|
||||
if (
|
||||
reactDeprecationWarning.test(message) === false &&
|
||||
message !== "react-reveal - animation failed"
|
||||
) {
|
||||
throw new Error(`message=${message} args=${args}`);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user