Skip to content

Commit 29dec0e

Browse files
AndrewChubatiukAndrewChubatiuk
committed
app/vmui: vmalert ui for logs
1 parent aa5b74c commit 29dec0e

File tree

50 files changed

+1971
-68
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1971
-68
lines changed

‎app/vlselect/vmui/assets/index-CkfLAq4v.js‎

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/vlselect/vmui/assets/index-DI9cuQIS.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/vlselect/vmui/assets/index-DJHUr1p5.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/vlselect/vmui/assets/index-JAtxLowL.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

app/vlselect/vmui/assets/vendor-Bf6IQ3Qt.js renamed to app/vlselect/vmui/assets/vendor-pls7qu0A.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/vlselect/vmui/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
<meta property="og:title" content="UI for VictoriaLogs">
3636
<meta property="og:url" content="https://victoriametrics.com/products/victorialogs/">
3737
<meta property="og:description" content="Explore your log data with VictoriaLogs UI">
38-
<script type="module" crossorigin src="./assets/index-JAtxLowL.js"></script>
39-
<link rel="modulepreload" crossorigin href="./assets/vendor-Bf6IQ3Qt.js">
38+
<script type="module" crossorigin src="./assets/index-CkfLAq4v.js"></script>
39+
<link rel="modulepreload" crossorigin href="./assets/vendor-pls7qu0A.js">
4040
<link rel="stylesheet" crossorigin href="./assets/vendor-D1GxaB_c.css">
41-
<link rel="stylesheet" crossorigin href="./assets/index-DI9cuQIS.css">
41+
<link rel="stylesheet" crossorigin href="./assets/index-DJHUr1p5.css">
4242
</head>
4343
<body>
4444
<noscript>You need to enable JavaScript to run this app.</noscript>

‎app/vmui/Dockerfile-build‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM node:20-alpine3.19
1+
FROM node:22-alpine3.22
22

33
# Sets a custom location for the npm cache, preventing access errors in system directories
44
ENV NPM_CONFIG_CACHE=/build/.npm

‎app/vmui/packages/vmui/src/App.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import AppContextProvider from "./contexts/AppContextProvider";
44
import ThemeProvider from "./components/Main/ThemeProvider/ThemeProvider";
55
import ExploreLogs from "./pages/ExploreLogs/ExploreLogs";
66
import LogsLayout from "./layouts/LogsLayout/LogsLayout";
7+
import ExploreRules from "./pages/ExploreAlerts/ExploreRules";
8+
import ExploreNotifiers from "./pages/ExploreAlerts/ExploreNotifiers";
79
import "./constants/markedPlugins";
10+
import router from "./router";
811

912
const App: FC = () => {
1013
const [loadedTheme, setLoadedTheme] = useState(false);
@@ -24,6 +27,22 @@ const App: FC = () => {
2427
path={"/"}
2528
element={<ExploreLogs/>}
2629
/>
30+
<Route
31+
path={router.rules}
32+
element={<ExploreRules
33+
ruleTypeFilter=""
34+
/>}
35+
/>
36+
<Route
37+
path={router.alerts}
38+
element={<ExploreRules
39+
ruleTypeFilter="alert"
40+
/>}
41+
/>
42+
<Route
43+
path={router.notifiers}
44+
element={<ExploreNotifiers/>}
45+
/>
2746
</Route>
2847
</Routes>
2948
)}

‎app/vmui/packages/vmui/src/api/explore-alerts.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const getGroupsUrl = (server: string, ruleType: string): string => {
2+
let groupUrl = `${server}/api/v1/rules`;
3+
if (ruleType) {
4+
groupUrl = `${groupUrl}?type=${ruleType}`;
5+
}
6+
return groupUrl;
7+
};
8+
9+
export const getNotifiersUrl = (server: string): string => {
10+
return `${server}/api/v1/notifiers`;
11+
};

‎app/vmui/packages/vmui/src/components/ExploreAlerts/GroupHeader/index.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { FC } from "preact/compat";
2+
import "./style.scss";
3+
import useDeviceDetect from "../../../hooks/useDeviceDetect";
4+
import { Group as APIGroup } from "../../../types";
5+
import useCopyToClipboard from "../../../hooks/useCopyToClipboard";
6+
import { CopyIcon } from "../../../components/Main/Icons";
7+
import Button from "../../../components/Main/Button/Button";
8+
9+
interface GroupHeaderControlsProps {
10+
group: APIGroup,
11+
}
12+
13+
const GroupHeaderHeader: FC<GroupHeaderControlsProps> = ({
14+
group,
15+
}) => {
16+
const { isMobile } = useDeviceDetect();
17+
const copyToClipboard = useCopyToClipboard();
18+
19+
const handlerCopy = async () => {
20+
const link = `${window.location.origin}${window.location.pathname}#/groups#group-${group.id}`;
21+
await copyToClipboard(link, "Link to group has been copied");
22+
};
23+
24+
if (isMobile) {
25+
return (
26+
<div className="vm-explore-alerts-group-header vm-explore-alerts-group-header_mobile">
27+
<div className="vm-explore-alerts-group-header__name">{group.name}</div>
28+
<div className="circle-container">
29+
{Object.entries(group.states || {}).map(([name, value]) => (
30+
<div
31+
key={name}
32+
className={`circle ${name.toLowerCase().replace(" ", "-")}`}
33+
>{value}</div>
34+
))}
35+
<Button
36+
variant="outlined"
37+
startIcon={<CopyIcon/>}
38+
onClick={handlerCopy}
39+
/>
40+
</div>
41+
</div>
42+
);
43+
}
44+
45+
return (
46+
<div className="vm-explore-alerts-group-header">
47+
<div className="vm-explore-alerts-group-header__desc">
48+
<div className="vm-explore-alerts-group-header__name">{group.name}</div>
49+
<div className="vm-explore-alerts-group-header__file">{group.file}</div>
50+
</div>
51+
<div className="circle-container">
52+
{Object.entries(group.states || {}).map(([name, value]) => (
53+
<div
54+
key={name}
55+
className={`circle ${name.toLowerCase().replace(" ", "-")}`}
56+
>{value}</div>
57+
))}
58+
<Button
59+
variant="outlined"
60+
startIcon={<CopyIcon/>}
61+
onClick={handlerCopy}
62+
/>
63+
</div>
64+
</div>
65+
);
66+
};
67+
68+
export default GroupHeaderHeader;

0 commit comments

Comments
 (0)