mirror of
https://github.com/prymitive/karma
synced 2026-05-05 03:16:51 +00:00
fix(ui): don't render silence fallback on alert group unmount
This commit is contained in:
Łukasz Mierzwa
committed by
Łukasz Mierzwa
Łukasz Mierzwa
parent
a046f5a16f
commit
c994b3cee4
109
ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.test.js
Normal file
109
ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.test.js
Normal file
@@ -0,0 +1,109 @@
|
||||
import React from "react";
|
||||
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
|
||||
import { MockSilence } from "__mocks__/Alerts";
|
||||
import { AlertStore } from "Stores/AlertStore";
|
||||
import { SilenceFormStore } from "Stores/SilenceFormStore";
|
||||
import { RenderSilence } from "./Silences";
|
||||
|
||||
describe("<RenderSilence />", () => {
|
||||
let alertStore;
|
||||
let silenceFormStore;
|
||||
|
||||
beforeEach(() => {
|
||||
alertStore = new AlertStore([]);
|
||||
silenceFormStore = new SilenceFormStore();
|
||||
});
|
||||
|
||||
it("renders fallback text if silence is not present in AlertStore", () => {
|
||||
const tree = mount(
|
||||
<RenderSilence
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
afterUpdate={jest.fn()}
|
||||
cluster="fakeCluster"
|
||||
silenceID="1234567890"
|
||||
/>
|
||||
);
|
||||
expect(tree.text()).toBe("Silenced by 1234567890");
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders ManagedSilence if silence is present in AlertStore", () => {
|
||||
const silence = MockSilence();
|
||||
|
||||
alertStore.data.silences = { fakeCluster: { [silence.id]: silence } };
|
||||
|
||||
const tree = mount(
|
||||
<RenderSilence
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
afterUpdate={jest.fn()}
|
||||
cluster="fakeCluster"
|
||||
silenceID={silence.id}
|
||||
/>
|
||||
);
|
||||
expect(tree.find("ManagedSilence")).toHaveLength(1);
|
||||
expect(tree.text()).toMatch(/Mocked Silence/);
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("re-render when silence was removed AlertStore is a no-op", () => {
|
||||
const silence = MockSilence();
|
||||
|
||||
alertStore.data.silences = { fakeCluster: { [silence.id]: silence } };
|
||||
|
||||
const tree = mount(
|
||||
<RenderSilence
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
afterUpdate={jest.fn()}
|
||||
cluster="fakeCluster"
|
||||
silenceID={silence.id}
|
||||
/>
|
||||
);
|
||||
expect(tree.find("ManagedSilence")).toHaveLength(1);
|
||||
const snapshot = toDiffableHtml(tree.html());
|
||||
|
||||
alertStore.data.silences = {};
|
||||
|
||||
tree.setProps({});
|
||||
expect(tree.find("ManagedSilence")).toHaveLength(1);
|
||||
expect(toDiffableHtml(tree.html())).toBe(snapshot);
|
||||
});
|
||||
|
||||
it("re-render when silence ID was changed updates it", () => {
|
||||
const tree = mount(
|
||||
<RenderSilence
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
afterUpdate={jest.fn()}
|
||||
cluster="fakeCluster"
|
||||
silenceID="silence1"
|
||||
/>
|
||||
);
|
||||
expect(tree.text()).toBe("Silenced by silence1");
|
||||
|
||||
tree.setProps({ silenceID: "silence2" });
|
||||
expect(tree.text()).toBe("Silenced by silence2");
|
||||
});
|
||||
|
||||
it("re-render when cluster name was changed updates it", () => {
|
||||
const tree = mount(
|
||||
<RenderSilence
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
afterUpdate={jest.fn()}
|
||||
cluster="cluster1"
|
||||
silenceID="1234567890"
|
||||
/>
|
||||
);
|
||||
expect(tree.text()).toBe("Silenced by 1234567890");
|
||||
|
||||
tree.setProps({ cluster: "cluster2" });
|
||||
expect(tree.text()).toBe("Silenced by 1234567890");
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { FC } from "react";
|
||||
import React, { FC, memo } from "react";
|
||||
|
||||
import { APISilenceT } from "Models/APITypes";
|
||||
import { AlertStore } from "Stores/AlertStore";
|
||||
@@ -36,30 +36,47 @@ const RenderSilence: FC<{
|
||||
afterUpdate: () => void;
|
||||
cluster: string;
|
||||
silenceID: string;
|
||||
}> = ({ alertStore, silenceFormStore, afterUpdate, cluster, silenceID }) => {
|
||||
const silence = GetSilenceFromStore(alertStore, cluster, silenceID);
|
||||
}> = memo(
|
||||
({ alertStore, silenceFormStore, afterUpdate, cluster, silenceID }) => {
|
||||
const silence = GetSilenceFromStore(alertStore, cluster, silenceID);
|
||||
|
||||
if (silence === null) {
|
||||
return (
|
||||
<FallbackSilenceDesciption
|
||||
key={silenceID}
|
||||
silenceID={silenceID}
|
||||
></FallbackSilenceDesciption>
|
||||
);
|
||||
}
|
||||
|
||||
if (silence === null) {
|
||||
return (
|
||||
<FallbackSilenceDesciption
|
||||
<ManagedSilence
|
||||
key={silenceID}
|
||||
silenceID={silenceID}
|
||||
></FallbackSilenceDesciption>
|
||||
cluster={cluster}
|
||||
alertCount={0}
|
||||
alertCountAlwaysVisible={false}
|
||||
silence={silence}
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={afterUpdate}
|
||||
/>
|
||||
);
|
||||
},
|
||||
(prevProps, nextProps) => {
|
||||
if (
|
||||
prevProps.cluster == nextProps.cluster &&
|
||||
prevProps.silenceID === nextProps.silenceID
|
||||
) {
|
||||
return (
|
||||
GetSilenceFromStore(
|
||||
nextProps.alertStore,
|
||||
nextProps.cluster,
|
||||
nextProps.silenceID
|
||||
) === null
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
<ManagedSilence
|
||||
key={silenceID}
|
||||
cluster={cluster}
|
||||
alertCount={0}
|
||||
alertCountAlwaysVisible={false}
|
||||
silence={silence}
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={afterUpdate}
|
||||
/>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export { RenderSilence };
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<RenderSilence /> renders ManagedSilence if silence is present in AlertStore 1`] = `
|
||||
"
|
||||
<div class=\\"card my-1 components-managed-silence\\">
|
||||
<div class=\\"card-header rounded-0 border-bottom-0 px-3\\">
|
||||
<div class=\\"d-flex flex-row\\">
|
||||
<div class=\\"flex-shrink-0 flex-grow-0\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"bell-slash\\"
|
||||
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon 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=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
|
||||
<div class=\\"font-italic components-managed-silence-comment text-truncate overflow-hidden\\">
|
||||
Mocked Silence
|
||||
</div>
|
||||
<div class=\\"components-managed-silence-cite mt-1\\">
|
||||
<span class=\\"text-muted mr-2 font-italic\\">
|
||||
— me@example.com
|
||||
</span>
|
||||
<span class=\\"badge badge-danger align-text-bottom p-1\\">
|
||||
Expired 21 years ago
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-0 flex-grow-0\\">
|
||||
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"chevron-down\\"
|
||||
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon 0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 448 512\\"
|
||||
style=\\"transition: transform 0.25s ease-in-out;\\"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`<RenderSilence /> renders fallback text if silence is not present in AlertStore 1`] = `
|
||||
"
|
||||
<div class=\\"m-1\\">
|
||||
<small class=\\"text-muted\\">
|
||||
Silenced by 1234567890
|
||||
</small>
|
||||
</div>
|
||||
"
|
||||
`;
|
||||
Reference in New Issue
Block a user