mirror of
https://github.com/prymitive/karma
synced 2026-05-07 03:26:52 +00:00
fix(ui): tweak silence display
This commit is contained in:
Łukasz Mierzwa
@@ -287,34 +287,54 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
|
||||
link
|
||||
</a>
|
||||
<div class=\\"components-grid-alertgrid-alertgroup-shared-silence rounded-0 border-0\\">
|
||||
<div class=\\"card mb-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
|
||||
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
|
||||
<div class=\\"card-header border-bottom-0\\">
|
||||
<div class=\\"d-flex flex-row justify-content-between\\">
|
||||
<div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
|
||||
<span class=\\"my-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
<span class=\\"badge badge-danger align-text-bottom p-1\\">
|
||||
Expired
|
||||
<time datetime=\\"946688400000\\">
|
||||
14 hours ago
|
||||
</time>
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"d-flex flex-row\\">
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"bell-slash\\"
|
||||
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 640 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-1 flex-grow-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
<span class=\\"badge badge-danger align-text-bottom p-1\\">
|
||||
Expired
|
||||
<time datetime=\\"946688400000\\">
|
||||
14 hours ago
|
||||
</time>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
|
||||
|
||||
@@ -5,14 +5,29 @@ import Truncate from "react-truncate";
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
|
||||
import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
|
||||
|
||||
import { APISilence } from "Models/API";
|
||||
import { SilenceProgress } from "./SilenceProgress";
|
||||
|
||||
const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
|
||||
const comment = (
|
||||
<Truncate className="font-italic" lines={collapsed ? 2 : false}>
|
||||
{silence.comment}
|
||||
</Truncate>
|
||||
<div className="d-flex flex-row">
|
||||
<div className="flex-shrink-0 flex-grow-0 mr-2">
|
||||
<FontAwesomeIcon icon={faBellSlash} className="text-muted" />
|
||||
</div>
|
||||
<div className="flex-shrink-1 flex-grow-1">
|
||||
<Truncate className="font-italic" lines={collapsed ? 2 : false}>
|
||||
{silence.comment}
|
||||
</Truncate>
|
||||
<span className="blockquote-footer pt-1">
|
||||
<cite className="components-grid-alertgroup-silences mr-2">
|
||||
{silence.createdBy}
|
||||
</cite>
|
||||
{collapsed ? <SilenceProgress silence={silence} /> : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
if (silence.jiraURL) {
|
||||
return (
|
||||
|
||||
@@ -2,34 +2,90 @@
|
||||
|
||||
exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
|
||||
"
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"d-flex flex-row\\">
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"bell-slash\\"
|
||||
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 640 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-1 flex-grow-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
<span class=\\"badge badge-danger align-text-bottom p-1\\">
|
||||
Expired
|
||||
<time datetime=\\"946688400000\\">
|
||||
20 years ago
|
||||
</time>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
|
||||
"
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<div class=\\"d-flex flex-row\\">
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"bell-slash\\"
|
||||
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 640 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-1 flex-grow-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
`;
|
||||
|
||||
@@ -2,44 +2,64 @@
|
||||
|
||||
exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
|
||||
"
|
||||
<div class=\\"card mb-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
|
||||
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
|
||||
<div class=\\"card-header border-bottom-0\\">
|
||||
<div class=\\"d-flex flex-row justify-content-between\\">
|
||||
<div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
|
||||
<span class=\\"my-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
<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=\\"d-flex flex-row\\">
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"bell-slash\\"
|
||||
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 640 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-1 flex-grow-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
<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>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
|
||||
@@ -66,28 +86,48 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
|
||||
|
||||
exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
|
||||
"
|
||||
<div class=\\"card mb-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
|
||||
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
|
||||
<div class=\\"card-header border-bottom-0\\">
|
||||
<div class=\\"d-flex flex-row justify-content-between\\">
|
||||
<div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
|
||||
<span class=\\"my-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
</span>
|
||||
<div class=\\"d-flex flex-row\\">
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"bell-slash\\"
|
||||
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 640 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-1 flex-grow-1\\">
|
||||
<span class=\\"font-italic\\"
|
||||
width=\\"0\\"
|
||||
>
|
||||
<span>
|
||||
</span>
|
||||
<span>
|
||||
Mocked Silence
|
||||
</span>
|
||||
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
|
||||
…
|
||||
</span>
|
||||
</span>
|
||||
<span class=\\"blockquote-footer pt-1\\">
|
||||
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
|
||||
me@example.com
|
||||
</cite>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
|
||||
|
||||
@@ -14,7 +14,6 @@ import { SilenceFormStore, SilenceTabNames } from "Stores/SilenceFormStore";
|
||||
import { MountFade } from "Components/Animations/MountFade";
|
||||
import { SilenceComment } from "./SilenceComment";
|
||||
import { SilenceDetails } from "./SilenceDetails";
|
||||
import { SilenceProgress } from "./SilenceProgress";
|
||||
|
||||
import "./index.scss";
|
||||
|
||||
@@ -66,7 +65,7 @@ const ManagedSilence = observer(
|
||||
|
||||
return (
|
||||
<MountFade in={true}>
|
||||
<div className="card mb-1 components-managed-silence">
|
||||
<div className="card my-1 components-managed-silence">
|
||||
<div className="card-header border-bottom-0">
|
||||
<div className="d-flex flex-row justify-content-between">
|
||||
<div className="flex-grow-1 flex-shrink-1 mr-2">
|
||||
@@ -75,14 +74,6 @@ const ManagedSilence = observer(
|
||||
silence={silence}
|
||||
collapsed={this.collapse.value}
|
||||
/>
|
||||
<span className="blockquote-footer pt-1">
|
||||
<cite className="components-grid-alertgroup-silences mr-2">
|
||||
{silence.createdBy}
|
||||
</cite>
|
||||
{this.collapse.value ? (
|
||||
<SilenceProgress silence={silence} />
|
||||
) : null}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">
|
||||
|
||||
Reference in New Issue
Block a user