{}}
- alertStore={alertStore}
- settingsStore={settingsStore}
- afterClick={() => {}}
- />
-
- );
-});
diff --git a/ui/src/Components/OverviewModal/index.stories.tsx b/ui/src/Components/OverviewModal/index.stories.tsx
deleted file mode 100644
index e8485dfc6..000000000
--- a/ui/src/Components/OverviewModal/index.stories.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { FC } from "react";
-
-import { storiesOf } from "@storybook/react";
-
-import fetchMock from "fetch-mock";
-
-import { MockGrid } from "../../__fixtures__/Stories";
-import { AlertStore } from "../../Stores/AlertStore";
-import { OverviewModalContent } from "./OverviewModalContent";
-
-import "Styles/Percy.scss";
-
-storiesOf("OverviewModal", module).add("OverviewModal", () => {
- const Modal: FC = ({ children }) => (
-
- );
-
- fetchMock.mock(
- "begin:/counters.json?q=full",
- {
- total: 0,
- counters: [
- {
- name: "@receiver",
- hits: 2,
- values: [
- {
- value: "by-cluster-service",
- raw: "@receiver=by-cluster-service",
- hits: 2,
- percent: 100,
- offset: 0,
- },
- ],
- },
- {
- name: "alertname",
- hits: 90,
- values: [
- {
- value: "Fake Alert",
- raw: "alertname=Fake Alert",
- hits: 45,
- percent: 50,
- offset: 0,
- },
- {
- value: "Second Fake Alert",
- raw: "alertname=Second Fake Alert",
- hits: 45,
- percent: 50,
- offset: 50,
- },
- ],
- },
- {
- name: "group",
- hits: 100,
- values: [
- {
- value: "group1",
- raw: "group=group1",
- hits: 25,
- percent: 25,
- offset: 0,
- },
- {
- value: "group2",
- raw: "group=group2",
- hits: 70,
- percent: 70,
- offset: 25,
- },
- {
- value: "group3",
- raw: "group=group3",
- hits: 4,
- percent: 4,
- offset: 95,
- },
- {
- value: "group4",
- raw: "group=group4",
- hits: 1,
- percent: 1,
- offset: 99,
- },
- ],
- },
- ],
- },
- {
- overwriteRoutes: true,
- }
- );
- fetchMock.mock(
- "begin:/counters.json?q=empty",
- {
- total: 0,
- counters: [],
- },
- {
- overwriteRoutes: true,
- }
- );
-
- const alertStore = new AlertStore(["full"]);
- MockGrid(alertStore);
-
- const emptyAlertStore = new AlertStore(["empty"]);
-
- return (
-
-
- {}} />
-
-
- {}} />
-
-
- );
-});
diff --git a/ui/src/Components/SilenceModal/index.stories.tsx b/ui/src/Components/SilenceModal/index.stories.tsx
deleted file mode 100644
index 30b34f5af..000000000
--- a/ui/src/Components/SilenceModal/index.stories.tsx
+++ /dev/null
@@ -1,331 +0,0 @@
-import type { FC } from "react";
-
-import fetchMock from "fetch-mock";
-
-import { storiesOf } from "@storybook/react";
-
-import addHours from "date-fns/addHours";
-import addDays from "date-fns/addDays";
-
-import { MockSilence, MockAlert } from "../../__fixtures__/Alerts";
-import { AlertStore } from "../../Stores/AlertStore";
-import { Settings } from "../../Stores/Settings";
-import {
- SilenceFormStore,
- NewEmptyMatcher,
- MatcherWithIDT,
-} from "../../Stores/SilenceFormStore";
-import { StringToOption } from "../../Common/Select";
-import { DateTimeSelect } from "./DateTimeSelect";
-import { SilenceModalContent } from "./SilenceModalContent";
-
-import "Styles/Percy.scss";
-
-const MockMatcher = (
- name: string,
- values: string[],
- isRegex: boolean,
- isEqual: boolean
-): MatcherWithIDT => {
- const matcher = NewEmptyMatcher();
- matcher.name = name;
- matcher.values = values.map((v) => StringToOption(v));
- matcher.isRegex = isRegex;
- matcher.isEqual = isEqual;
- return matcher;
-};
-
-const Modal: FC = ({ children }) => (
-
-);
-
-storiesOf("SilenceModal", module)
- .add("Editor", () => {
- const alertStore = new AlertStore([]);
- const settingsStore = new Settings(null);
- const silenceFormStore = new SilenceFormStore();
-
- alertStore.info.setAuthentication(true, "me@example.com");
-
- alertStore.data.setUpstreams({
- counters: { healthy: 3, failed: 0, total: 3 },
- clusters: { default: ["default"], HA: ["ha1", "ha2"] },
- instances: [
- {
- name: "default",
- uri: "http://localhost:8080",
- publicURI: "http://example.com",
- readonly: false,
- headers: {},
- corsCredentials: "include",
- error: "",
- version: "0.24.0",
- cluster: "default",
- clusterMembers: ["default"],
- },
- {
- name: "ha1",
- uri: "http://localhost:8081",
- publicURI: "http://ha1.example.com",
- readonly: false,
- headers: {},
- corsCredentials: "include",
- error: "",
- version: "0.24.0",
- cluster: "HA",
- clusterMembers: ["ha1", "ha2"],
- },
- {
- name: "ha2",
- uri: "http://localhost:8082",
- publicURI: "http://ha2.example.com",
- readonly: false,
- headers: {},
- corsCredentials: "include",
- error: "",
- version: "0.24.0",
- cluster: "HA",
- clusterMembers: ["ha1", "ha2"],
- },
- ],
- });
-
- silenceFormStore.toggle.visible = true;
- silenceFormStore.data.setAutofillMatchers(false);
- silenceFormStore.data.setMatchers([
- MockMatcher("cluster", ["prod"], false, true),
- MockMatcher("instance", ["server1", "server3"], true, false),
- MockMatcher(
- "tooLong",
- [
- "12345",
- "Some Alerts With A Ridiculously Long Name To Test Label Truncation In All The Places We Render Those Alerts",
- ],
- true,
- true
- ),
- ]);
- silenceFormStore.data.addEmptyMatcher();
- silenceFormStore.data.setAuthor("john@example.com");
- silenceFormStore.data.setComment("fake silence");
-
- silenceFormStore.data.setSilenceID("1234567890");
- silenceFormStore.data.setStart(new Date());
- silenceFormStore.data.setEnd(addDays(addHours(new Date(), 2), 10));
-
- silenceFormStore.tab.current = "editor";
-
- fetchMock.mock(
- "begin:/alertList.json?q=cluster",
- { alerts: [] },
- {
- overwriteRoutes: true,
- }
- );
- fetchMock.mock(
- "begin:/alertList.json?q=instance",
- { alerts: Array(23).fill(MockAlert([], [], "active")) },
- {
- overwriteRoutes: true,
- }
- );
- fetchMock.mock(
- "begin:/alertList.json?q=tooLong",
- {
- body: "error",
- status: 503,
- },
- {
- overwriteRoutes: true,
- }
- );
- fetchMock.mock(
- "begin:/label",
- {
- status: 200,
- body: JSON.stringify([]),
- headers: { "Content-Type": "application/json" },
- },
- {
- overwriteRoutes: true,
- }
- );
-
- const alertStoreReadOnly = new AlertStore([]);
- alertStoreReadOnly.data.setUpstreams({
- counters: { healthy: 1, failed: 0, total: 1 },
- clusters: { default: ["readonly"] },
- instances: [
- {
- name: "readonly",
- uri: "http://localhost:8080",
- publicURI: "http://example.com",
- readonly: true,
- headers: {},
- corsCredentials: "include",
- error: "",
- version: "0.24.0",
- cluster: "default",
- clusterMembers: ["readonly"],
- },
- ],
- });
-
- return (
- <>
-
- {}}
- previewOpen={true}
- />
-
-
- {}}
- previewOpen={true}
- />
-
-
-
-
-
-
-
-
-
-
-
-
- );
- })
- .add("Browser", () => {
- const alertStore = new AlertStore([]);
- const settingsStore = new Settings(null);
- const silenceFormStore = new SilenceFormStore();
-
- silenceFormStore.tab.current = "browser";
-
- alertStore.data.setUpstreams({
- counters: { healthy: 1, failed: 0, total: 1 },
- instances: [
- {
- name: "am1",
- cluster: "am",
- clusterMembers: ["am1"],
- uri: "http://localhost:9093",
- publicURI: "http://example.com",
- readonly: false,
- error: "",
- version: "0.24.0",
- headers: {},
- corsCredentials: "include",
- },
- ],
- clusters: { am: ["am1"] },
- });
-
- const silences = [];
- for (let index = 1; index <= 18; index++) {
- const silence = MockSilence();
- silence.startsAt = "2018-08-14T16:00:00Z";
- silence.endsAt = `2018-08-14T18:${index < 10 ? "0" + index : index}:00Z`;
- silence.matchers.push({
- name: "thisIsAveryLongNameToTestMatcherWrapping",
- value: "valueIsAlsoAbitLong",
- isRegex: false,
- isEqual: true,
- });
- silence.matchers.push({
- name: "alertname",
- value: "(foo1|foo2|foo3|foo4)",
- isRegex: true,
- isEqual: true,
- });
- silence.id = `silence${index}`;
- silences.push({
- cluster: "am",
- alertCount: (index - 1) * 9,
- silence: silence,
- });
- }
-
- fetchMock.mock("begin:/silences.json?", silences, {
- overwriteRoutes: true,
- });
-
- return (
-
- {}}
- />
-
- );
- })
- .add("Empty Browser", () => {
- const alertStore = new AlertStore([]);
- const settingsStore = new Settings(null);
- const silenceFormStore = new SilenceFormStore();
-
- silenceFormStore.tab.current = "browser";
-
- alertStore.data.setUpstreams({
- counters: { healthy: 1, failed: 0, total: 1 },
- instances: [
- {
- name: "am1",
- cluster: "am",
- clusterMembers: ["am1"],
- uri: "http://localhost:9093",
- publicURI: "http://example.com",
- readonly: false,
- error: "",
- version: "0.24.0",
- headers: {},
- corsCredentials: "include",
- },
- ],
- clusters: { am: ["am1"] },
- });
-
- fetchMock.mock(
- "begin:/silences.json?",
- {
- status: 200,
- body: JSON.stringify([]),
- headers: { "Content-Type": "application/json" },
- },
- {
- overwriteRoutes: true,
- }
- );
-
- return (
-
- {}}
- />
-
- );
- });
diff --git a/ui/src/Components/Toast/index.stories.tsx b/ui/src/Components/Toast/index.stories.tsx
deleted file mode 100644
index 695293c57..000000000
--- a/ui/src/Components/Toast/index.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { storiesOf } from "@storybook/react";
-
-import { faArrowUp } from "@fortawesome/free-solid-svg-icons/faArrowUp";
-import { faExclamation } from "@fortawesome/free-solid-svg-icons/faExclamation";
-
-import { AlertStore } from "../../Stores/AlertStore";
-import { Toast } from ".";
-import { ToastMessage, UpgradeToastMessage } from "./ToastMessages";
-
-import "Styles/Percy.scss";
-
-storiesOf("AppToasts", module).add("AppToasts", () => {
- const alertStore = new AlertStore([]);
- alertStore.info.setVersion("999.99.0");
-
- return (
-
-
- }
- hasClose
- />
- }
- hasClose={false}
- />
-
- );
-});