mirror of
https://github.com/prymitive/karma
synced 2026-05-05 03:16:51 +00:00
fix(ci): get rid of storybook
This commit is contained in:
Łukasz Mierzwa
committed by
Łukasz Mierzwa
Łukasz Mierzwa
parent
3521e36b2a
commit
50ea7cc924
1
.github/workflows/node-version.yml
vendored
1
.github/workflows/node-version.yml
vendored
@@ -22,7 +22,6 @@ jobs:
|
||||
- name: Synchronise Node version in actions
|
||||
run: |
|
||||
sed -i -E s/'([\ \t]+)node-version: .+'/'\1node-version: ${{ env.NODE_VERSION }}'/g .github/workflows/*
|
||||
sed -i -E s/'([\ \t]+)"node": .+'/'\1"node": "${{ env.NODE_VERSION }}"'/g ui/package.json
|
||||
|
||||
- name: Set up Node JS
|
||||
uses: actions/setup-node@v3
|
||||
|
||||
@@ -11,8 +11,5 @@ ignores:
|
||||
# devDeps
|
||||
- "@types/jest"
|
||||
- "@types/node"
|
||||
- "@storybook/preset-create-react-app"
|
||||
- "@storybook/builder-webpack5"
|
||||
- "@storybook/manager-webpack5"
|
||||
- "purgecss"
|
||||
- "eslint-plugin-jest"
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
module.exports = {
|
||||
addons: ["@storybook/preset-create-react-app"],
|
||||
stories: ["../src/**/*.stories.tsx"],
|
||||
// https://github.com/styleguidist/react-docgen-typescript/issues/356
|
||||
typescript: {
|
||||
reactDocgen: "none",
|
||||
},
|
||||
core: {
|
||||
builder: "webpack5",
|
||||
disableTelemetry: true,
|
||||
},
|
||||
staticDirs: ["../public"],
|
||||
};
|
||||
@@ -1,74 +0,0 @@
|
||||
import { configure, addDecorator } from "@storybook/react";
|
||||
|
||||
import timemachine from "timemachine";
|
||||
|
||||
import { ThemeContext } from "Components/Theme";
|
||||
import {
|
||||
ReactSelectColors,
|
||||
ReactSelectStyles,
|
||||
} from "Components/Theme/ReactSelect";
|
||||
|
||||
import { config } from "react-transition-group";
|
||||
|
||||
config.disabled = true;
|
||||
|
||||
// mock date so the silence form always shows same preview
|
||||
timemachine.config({
|
||||
dateString: "August 14, 2018 17:36:40",
|
||||
});
|
||||
|
||||
addDecorator((story) => {
|
||||
document.body.style = "";
|
||||
return story();
|
||||
});
|
||||
addDecorator((story) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="theme-light">
|
||||
<ThemeContext.Provider
|
||||
value={{
|
||||
reactSelectStyles: ReactSelectStyles(ReactSelectColors.Light),
|
||||
animations: {
|
||||
duration: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
</ThemeContext.Provider>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
height: "16px",
|
||||
width: "100%",
|
||||
backgroundColor: "#eee",
|
||||
marginTop: "4px",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
></div>
|
||||
<div className="theme-dark">
|
||||
<ThemeContext.Provider
|
||||
value={{
|
||||
reactSelectStyles: ReactSelectStyles(ReactSelectColors.Dark),
|
||||
animations: {
|
||||
duration: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
</ThemeContext.Provider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const req = require.context("../src/Components", true, /\.stories\.tsx$/);
|
||||
|
||||
function loadStories() {
|
||||
req.keys().forEach((filename) => req(filename));
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
|
||||
export const parameters = {
|
||||
layout: "fullscreen",
|
||||
};
|
||||
13720
ui/package-lock.json
generated
13720
ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -3,10 +3,6 @@
|
||||
"version": "0.0.1",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"npm": ">=9.0",
|
||||
"node": "20.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom": "2.0.0",
|
||||
"@fortawesome/fontawesome-svg-core": "6.4.0",
|
||||
@@ -51,10 +47,6 @@
|
||||
"typeface-open-sans": "1.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/builder-webpack5": "6.5.16",
|
||||
"@storybook/manager-webpack5": "6.5.16",
|
||||
"@storybook/preset-create-react-app": "4.1.2",
|
||||
"@storybook/react": "6.5.16",
|
||||
"@testing-library/jest-dom": "5.16.5",
|
||||
"@testing-library/react": "12.1.5",
|
||||
"@testing-library/react-hooks": "8.0.1",
|
||||
@@ -85,7 +77,6 @@
|
||||
"purgecss": "5.0.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "1.62.1",
|
||||
"timemachine": "0.3.2",
|
||||
"typescript": "4.9.5"
|
||||
},
|
||||
"overrides": {
|
||||
@@ -98,7 +89,6 @@
|
||||
"build": "react-scripts build",
|
||||
"postbuild": "make backup-css && purgecss -c purgecss.config.js -o build/static/css",
|
||||
"test": "react-scripts test",
|
||||
"storybook": "start-storybook",
|
||||
"analyze": "npx source-map-explorer 'build/static/js/*.js'"
|
||||
},
|
||||
"jest": {
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
import { storiesOf } from "@storybook/react";
|
||||
|
||||
import fetchMock from "fetch-mock";
|
||||
|
||||
import { MockGrid } from "../../__fixtures__/Stories";
|
||||
import {
|
||||
EmptyHistoryResponse,
|
||||
RainbowHistoryResponse,
|
||||
FailedHistoryResponse,
|
||||
} from "../../__fixtures__/AlertHistory";
|
||||
import { AlertStore } from "../../Stores/AlertStore";
|
||||
import { Settings } from "../../Stores/Settings";
|
||||
import { SilenceFormStore } from "../../Stores/SilenceFormStore";
|
||||
import { FatalError } from "./FatalError";
|
||||
import { UpgradeNeeded } from "./UpgradeNeeded";
|
||||
import { ReloadNeeded } from "./ReloadNeeded";
|
||||
import { EmptyGrid } from "./EmptyGrid";
|
||||
import Grid from ".";
|
||||
import { InternalError } from "../../ErrorBoundary";
|
||||
|
||||
import "Styles/Percy.scss";
|
||||
|
||||
storiesOf("Grid", module)
|
||||
.add("InternalError", () => {
|
||||
return (
|
||||
<InternalError
|
||||
message="React error boundary message with a veryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrapping"
|
||||
secondsLeft={45}
|
||||
progressLeft={66}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.add("FatalError", () => {
|
||||
return (
|
||||
<FatalError message="Something failed with a veryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrapping" />
|
||||
);
|
||||
})
|
||||
.add("UpgradeNeeded", () => {
|
||||
return <UpgradeNeeded newVersion="1.2.3" reloadAfter={100000000} />;
|
||||
})
|
||||
.add("ReloadNeeded", () => {
|
||||
return <ReloadNeeded reloadAfter={100000000} />;
|
||||
})
|
||||
.add("EmptyGrid", () => {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<EmptyGrid />
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.add("AlertGrid", () => {
|
||||
const alertStore = new AlertStore([]);
|
||||
const settingsStore = new Settings(null);
|
||||
const silenceFormStore = new SilenceFormStore();
|
||||
|
||||
fetchMock
|
||||
.mock(
|
||||
{
|
||||
name: "group1",
|
||||
url: "/history.json",
|
||||
body: { labels: { group: "group1" } },
|
||||
},
|
||||
EmptyHistoryResponse,
|
||||
{
|
||||
matchPartialBody: true,
|
||||
overwriteRoutes: true,
|
||||
}
|
||||
)
|
||||
.mock(
|
||||
{
|
||||
name: "group2",
|
||||
url: "/history.json",
|
||||
body: { labels: { group: "group2" } },
|
||||
},
|
||||
RainbowHistoryResponse,
|
||||
{
|
||||
matchPartialBody: true,
|
||||
overwriteRoutes: true,
|
||||
}
|
||||
)
|
||||
.mock(
|
||||
{
|
||||
name: "group3",
|
||||
url: "/history.json",
|
||||
body: { labels: { group: "group3" } },
|
||||
},
|
||||
FailedHistoryResponse,
|
||||
{
|
||||
matchPartialBody: true,
|
||||
overwriteRoutes: true,
|
||||
}
|
||||
)
|
||||
.mock(
|
||||
{
|
||||
name: "group4",
|
||||
url: "/history.json",
|
||||
body: { labels: { group: "group4" } },
|
||||
},
|
||||
EmptyHistoryResponse,
|
||||
{
|
||||
delay: 30 * 1000,
|
||||
matchPartialBody: true,
|
||||
overwriteRoutes: true,
|
||||
}
|
||||
)
|
||||
.mock(
|
||||
{
|
||||
name: "any",
|
||||
url: "/history.json",
|
||||
body: { labels: { alertname: "Fake Alert" } },
|
||||
},
|
||||
EmptyHistoryResponse,
|
||||
{
|
||||
matchPartialBody: true,
|
||||
overwriteRoutes: true,
|
||||
}
|
||||
);
|
||||
|
||||
MockGrid(alertStore);
|
||||
|
||||
return (
|
||||
<Grid
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@@ -1,57 +0,0 @@
|
||||
import { storiesOf } from "@storybook/react";
|
||||
|
||||
import fetchMock from "fetch-mock";
|
||||
|
||||
import { AlertStore } from "../../Stores/AlertStore";
|
||||
import { Settings } from "../../Stores/Settings";
|
||||
import { MainModalContent } from "./MainModalContent";
|
||||
|
||||
import "Styles/Percy.scss";
|
||||
|
||||
storiesOf("MainModal", module)
|
||||
.addDecorator((storyFn) => (
|
||||
<div className="modal d-block" style={{ position: "relative" }}>
|
||||
<div className="modal-dialog modal-lg" role="document">
|
||||
<div className="modal-content">{storyFn()}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add("Configuration", () => {
|
||||
const alertStore = new AlertStore([]);
|
||||
const settingsStore = new Settings(null);
|
||||
|
||||
fetchMock.mock(
|
||||
"begin:/label",
|
||||
{
|
||||
status: 200,
|
||||
body: JSON.stringify([]),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
},
|
||||
{
|
||||
overwriteRoutes: true,
|
||||
}
|
||||
);
|
||||
|
||||
alertStore.info.setAuthentication(true, "me@example.com");
|
||||
return (
|
||||
<MainModalContent
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={() => {}}
|
||||
expandAllOptions={true}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.add("Help", () => {
|
||||
const alertStore = new AlertStore([]);
|
||||
const settingsStore = new Settings(null);
|
||||
return (
|
||||
<MainModalContent
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={() => {}}
|
||||
openTab={"help"}
|
||||
expandAllOptions={true}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@@ -1,132 +0,0 @@
|
||||
import { storiesOf } from "@storybook/react";
|
||||
|
||||
import { MockSilence } from "../../__fixtures__/Alerts";
|
||||
import { AlertStore } from "../../Stores/AlertStore";
|
||||
import { SilenceFormStore } from "../../Stores/SilenceFormStore";
|
||||
import { ManagedSilence } from ".";
|
||||
|
||||
import "Styles/Percy.scss";
|
||||
|
||||
storiesOf("ManagedSilence", module)
|
||||
.addDecorator((storyFn) => (
|
||||
<div>
|
||||
<div className="modal-dialog modal-lg" role="document">
|
||||
<div className="modal-content p-2">{storyFn()}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add("Silence", () => {
|
||||
const alertStore = new AlertStore([]);
|
||||
const silenceFormStore = new SilenceFormStore();
|
||||
const cluster = "am";
|
||||
|
||||
alertStore.data.setUpstreams({
|
||||
counters: { healthy: 1, failed: 0, total: 1 },
|
||||
instances: [
|
||||
{
|
||||
name: "am1",
|
||||
cluster: cluster,
|
||||
clusterMembers: ["am1"],
|
||||
uri: "http://localhost:9093",
|
||||
publicURI: "http://example.com",
|
||||
readonly: false,
|
||||
error: "",
|
||||
version: "0.24.0",
|
||||
headers: {},
|
||||
corsCredentials: "include",
|
||||
},
|
||||
],
|
||||
clusters: { am: ["am1"] },
|
||||
});
|
||||
|
||||
const alertStoreReadOnly = new AlertStore([]);
|
||||
alertStoreReadOnly.data.setUpstreams({
|
||||
counters: { healthy: 1, failed: 0, total: 1 },
|
||||
clusters: { ro: ["readonly"] },
|
||||
instances: [
|
||||
{
|
||||
name: "readonly",
|
||||
uri: "http://localhost:8080",
|
||||
publicURI: "http://example.com",
|
||||
readonly: true,
|
||||
headers: {},
|
||||
corsCredentials: "include",
|
||||
error: "",
|
||||
version: "0.24.0",
|
||||
cluster: "ro",
|
||||
clusterMembers: ["readonly"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const silence = MockSilence();
|
||||
silence.startsAt = "2018-08-14T16:00:00Z";
|
||||
silence.endsAt = "2018-08-14T18:00:00Z";
|
||||
|
||||
const expiredSilence = MockSilence();
|
||||
expiredSilence.startsAt = "2018-08-14T10:00:00Z";
|
||||
expiredSilence.endsAt = "2018-08-14T11:00:00Z";
|
||||
|
||||
return (
|
||||
<>
|
||||
<ManagedSilence
|
||||
cluster={cluster}
|
||||
alertCount={123}
|
||||
alertCountAlwaysVisible={true}
|
||||
silence={silence}
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={() => {}}
|
||||
/>
|
||||
<ManagedSilence
|
||||
cluster={cluster}
|
||||
alertCount={123}
|
||||
alertCountAlwaysVisible={true}
|
||||
silence={silence}
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={() => {}}
|
||||
isOpen={true}
|
||||
/>
|
||||
<ManagedSilence
|
||||
cluster={"ro"}
|
||||
alertCount={123}
|
||||
alertCountAlwaysVisible={true}
|
||||
silence={silence}
|
||||
alertStore={alertStoreReadOnly}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={() => {}}
|
||||
isOpen={true}
|
||||
/>
|
||||
<ManagedSilence
|
||||
cluster={cluster}
|
||||
alertCount={123}
|
||||
alertCountAlwaysVisible={true}
|
||||
silence={expiredSilence}
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={() => {}}
|
||||
/>
|
||||
<ManagedSilence
|
||||
cluster={cluster}
|
||||
alertCount={123}
|
||||
alertCountAlwaysVisible={true}
|
||||
silence={expiredSilence}
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={() => {}}
|
||||
isOpen={true}
|
||||
/>
|
||||
<ManagedSilence
|
||||
cluster={"ro"}
|
||||
alertCount={123}
|
||||
alertCountAlwaysVisible={true}
|
||||
silence={expiredSilence}
|
||||
alertStore={alertStoreReadOnly}
|
||||
silenceFormStore={silenceFormStore}
|
||||
onDidUpdate={() => {}}
|
||||
isOpen={true}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,188 +0,0 @@
|
||||
import { storiesOf } from "@storybook/react";
|
||||
|
||||
import {
|
||||
AlertStore,
|
||||
NewUnappliedFilter,
|
||||
FilterT,
|
||||
} from "../../Stores/AlertStore";
|
||||
import { Settings } from "../../Stores/Settings";
|
||||
import { SilenceFormStore } from "../../Stores/SilenceFormStore";
|
||||
import { HistoryMenu } from "./FilterInput/History";
|
||||
import NavBar from ".";
|
||||
|
||||
import "Styles/Percy.scss";
|
||||
|
||||
const NewFilter = (
|
||||
raw: string,
|
||||
name: string,
|
||||
matcher: string,
|
||||
value: string,
|
||||
applied: boolean,
|
||||
isValid: boolean,
|
||||
hits: number
|
||||
): FilterT => {
|
||||
const filter = NewUnappliedFilter(raw);
|
||||
filter.name = name;
|
||||
filter.matcher = matcher;
|
||||
filter.value = value;
|
||||
filter.applied = applied;
|
||||
filter.isValid = isValid;
|
||||
filter.hits = hits;
|
||||
return filter;
|
||||
};
|
||||
|
||||
storiesOf("NavBar", module).add("NavBar", () => {
|
||||
const alertStore = new AlertStore([]);
|
||||
const settingsStore = new Settings(null);
|
||||
const silenceFormStore = new SilenceFormStore();
|
||||
|
||||
alertStore.data.setUpstreams({
|
||||
counters: { total: 1, healthy: 1, failed: 0 },
|
||||
instances: [
|
||||
{
|
||||
name: "dev",
|
||||
cluster: "dev",
|
||||
clusterMembers: ["dev"],
|
||||
uri: "https://am.example.com",
|
||||
publicURI: "https://am.example.com",
|
||||
error: "",
|
||||
readonly: false,
|
||||
headers: {},
|
||||
corsCredentials: "include",
|
||||
version: "",
|
||||
},
|
||||
],
|
||||
clusters: { dev: ["dev"] },
|
||||
});
|
||||
alertStore.info.setTotalAlerts(197);
|
||||
alertStore.data.setColors({
|
||||
cluster: {
|
||||
staging: {
|
||||
brightness: 205,
|
||||
background: "rgba(246,176,247,255)",
|
||||
},
|
||||
},
|
||||
region: {
|
||||
AF: {
|
||||
brightness: 111,
|
||||
background: "rgba(115,101,152,255)",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
alertStore.filters.setFilterValues([
|
||||
NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15),
|
||||
NewFilter("region=AF", "region", "=", "AF", true, true, 180),
|
||||
NewFilter("instance!=server1", "instance", "!=", "server1", false, true, 0),
|
||||
NewFilter("server!!!=", "", "", "", true, false, 0),
|
||||
NewFilter("foo", "", "", "", true, true, 2),
|
||||
NewFilter(
|
||||
"@state=unprocessed",
|
||||
"@state",
|
||||
"=",
|
||||
"unprocessed",
|
||||
true,
|
||||
true,
|
||||
1
|
||||
),
|
||||
NewFilter("@state=active", "@state", "=", "active", true, true, 0),
|
||||
NewFilter(
|
||||
"@state=suppressed",
|
||||
"@state",
|
||||
"=",
|
||||
"suppressed",
|
||||
true,
|
||||
true,
|
||||
101
|
||||
),
|
||||
]);
|
||||
|
||||
settingsStore.filterBarConfig.setAutohide(false);
|
||||
|
||||
const history = [
|
||||
[NewFilter("alertname=Foo", "alertname", "=", "foo", true, true, 15)],
|
||||
[
|
||||
NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15),
|
||||
NewFilter("region=AF", "region", "=", "AF", true, true, 180),
|
||||
],
|
||||
[
|
||||
NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15),
|
||||
NewFilter("region=AF", "region", "=", "AF", true, true, 180),
|
||||
NewFilter(
|
||||
"instance!=server1",
|
||||
"instance",
|
||||
"!=",
|
||||
"server1",
|
||||
false,
|
||||
true,
|
||||
0
|
||||
),
|
||||
],
|
||||
[
|
||||
NewFilter(
|
||||
"alertname=VeryVeryVeryVeryVeryLoooooooooooooooongAlertnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
|
||||
"alertname",
|
||||
"=",
|
||||
"VeryVeryVeryVeryVeryLoooooooooooooooongAlertnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
|
||||
true,
|
||||
true,
|
||||
15
|
||||
),
|
||||
],
|
||||
[NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15)],
|
||||
[
|
||||
NewFilter(
|
||||
"alertname=VeryVeryVeryVeryVeryLoooooooooooooooongAlertnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
|
||||
"alertname",
|
||||
"=",
|
||||
"VeryVeryVeryVeryVeryLoooooooooooooooongAlertnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
|
||||
true,
|
||||
true,
|
||||
15
|
||||
),
|
||||
NewFilter(
|
||||
"@state=unprocessed",
|
||||
"@state",
|
||||
"=",
|
||||
"unprocessed",
|
||||
true,
|
||||
true,
|
||||
1
|
||||
),
|
||||
NewFilter("@state=active", "@state", "=", "active", true, true, 1),
|
||||
NewFilter(
|
||||
"@state=suppressed",
|
||||
"@state",
|
||||
"=",
|
||||
"suppressed",
|
||||
true,
|
||||
true,
|
||||
1
|
||||
),
|
||||
],
|
||||
[NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15)],
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavBar
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
fixedTop={false}
|
||||
/>
|
||||
<HistoryMenu
|
||||
x={0}
|
||||
y={0}
|
||||
floating={null}
|
||||
strategy={"absolute"}
|
||||
maxHeight={null}
|
||||
filters={history}
|
||||
onClear={() => {}}
|
||||
alertStore={alertStore}
|
||||
settingsStore={settingsStore}
|
||||
afterClick={() => {}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -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 }) => (
|
||||
<div className="modal d-block" style={{ position: "relative" }}>
|
||||
<div className="modal-dialog modal-lg" role="document">
|
||||
<div className="modal-content">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
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 (
|
||||
<div>
|
||||
<Modal>
|
||||
<OverviewModalContent alertStore={alertStore} onHide={() => {}} />
|
||||
</Modal>
|
||||
<Modal>
|
||||
<OverviewModalContent alertStore={emptyAlertStore} onHide={() => {}} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -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 }) => (
|
||||
<div className="modal d-block" style={{ position: "relative" }}>
|
||||
<div className="modal-dialog modal-lg" role="document">
|
||||
<div className="modal-content">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
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 (
|
||||
<>
|
||||
<Modal>
|
||||
<SilenceModalContent
|
||||
alertStore={alertStoreReadOnly}
|
||||
silenceFormStore={silenceFormStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={() => {}}
|
||||
previewOpen={true}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal>
|
||||
<SilenceModalContent
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={() => {}}
|
||||
previewOpen={true}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal>
|
||||
<div className="pt-2">
|
||||
<DateTimeSelect
|
||||
silenceFormStore={silenceFormStore}
|
||||
openTab={"start"}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal>
|
||||
<div className="pt-2">
|
||||
<DateTimeSelect
|
||||
silenceFormStore={silenceFormStore}
|
||||
openTab={"end"}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
})
|
||||
.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 (
|
||||
<Modal>
|
||||
<SilenceModalContent
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={() => {}}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
})
|
||||
.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 (
|
||||
<Modal>
|
||||
<SilenceModalContent
|
||||
alertStore={alertStore}
|
||||
silenceFormStore={silenceFormStore}
|
||||
settingsStore={settingsStore}
|
||||
onHide={() => {}}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
@@ -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 (
|
||||
<div className="d-flex flex-column">
|
||||
<Toast
|
||||
icon={faExclamation}
|
||||
iconClass="text-danger"
|
||||
message={
|
||||
<ToastMessage
|
||||
title={`Alertmanager am1 raised an error`}
|
||||
message="connection refused"
|
||||
/>
|
||||
}
|
||||
hasClose
|
||||
/>
|
||||
<Toast
|
||||
key="upgrade"
|
||||
icon={faArrowUp}
|
||||
iconClass="text-success"
|
||||
message={<UpgradeToastMessage alertStore={alertStore} />}
|
||||
hasClose={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user