Skip to content

Commit dfa790d

Browse files
AndrewChubatiukAndrewChubatiuk
committed
alert and rule modals
1 parent 02755b5 commit dfa790d

Some content is hidden

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

65 files changed

+2229
-1062
lines changed

‎app/vlselect/vmui/assets/index-0SHj8eDk.js‎

Lines changed: 31 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-CkfLAq4v.js‎

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

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

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

‎app/vlselect/vmui/assets/index-DNAeotCf.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/vendor-pls7qu0A.js renamed to app/vlselect/vmui/assets/vendor-CPfD-UI4.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-CkfLAq4v.js"></script>
39-
<link rel="modulepreload" crossorigin href="./assets/vendor-pls7qu0A.js">
38+
<script type="module" crossorigin src="./assets/index-0SHj8eDk.js"></script>
39+
<link rel="modulepreload" crossorigin href="./assets/vendor-CPfD-UI4.js">
4040
<link rel="stylesheet" crossorigin href="./assets/vendor-D1GxaB_c.css">
41-
<link rel="stylesheet" crossorigin href="./assets/index-DJHUr1p5.css">
41+
<link rel="stylesheet" crossorigin href="./assets/index-DNAeotCf.css">
4242
</head>
4343
<body>
4444
<noscript>You need to enable JavaScript to run this app.</noscript>

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,7 @@ const App: FC = () => {
2929
/>
3030
<Route
3131
path={router.rules}
32-
element={<ExploreRules
33-
ruleTypeFilter=""
34-
/>}
35-
/>
36-
<Route
37-
path={router.alerts}
38-
element={<ExploreRules
39-
ruleTypeFilter="alert"
40-
/>}
32+
element={<ExploreRules />}
4133
/>
4234
<Route
4335
path={router.notifiers}

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
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;
1+
export const getGroupsUrl = (server: string): string => {
2+
return `${server}/vmalert/api/v1/rules?datasource_type=vlogs`;
3+
};
4+
5+
export const getItemUrl = (
6+
server: string,
7+
groupId: string,
8+
id: string,
9+
mode: string,
10+
): string => {
11+
return `${server}/vmalert/api/v1/${mode}?group_id=${groupId}&${mode}_id=${id}`;
12+
};
13+
14+
export const getGroupUrl = (
15+
server: string,
16+
id: string,
17+
): string => {
18+
return `${server}/vmalert/api/v1/group?group_id=${id}`;
719
};
820

921
export const getNotifiersUrl = (server: string): string => {
10-
return `${server}/api/v1/notifiers`;
22+
return `${server}/vmalert/api/v1/notifiers`;
1123
};

‎app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls.tsx‎

Lines changed: 102 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@ const delayOptions: AutoRefreshOption[] = [
3030
{ seconds: 7200, title: "2h" }
3131
];
3232

33-
export const ExecutionControls: FC = () => {
33+
interface ExecutionControlsProps {
34+
tooltip: string;
35+
useAutorefresh?: boolean;
36+
closeModal: () => void;
37+
}
38+
39+
export const ExecutionControls: FC<ExecutionControlsProps> = ({ tooltip, useAutorefresh, closeModal }) => {
3440
const { isMobile } = useDeviceDetect();
3541

3642
const dispatch = useTimeDispatch();
@@ -56,6 +62,9 @@ export const ExecutionControls: FC = () => {
5662

5763
const handleUpdate = () => {
5864
dispatch({ type: "RUN_QUERY" });
65+
if (!useAutorefresh && isMobile) {
66+
closeModal();
67+
}
5968
};
6069

6170
useEffect(() => {
@@ -84,84 +93,109 @@ export const ExecutionControls: FC = () => {
8493
"vm-execution-controls-buttons": true,
8594
"vm-execution-controls-buttons_mobile": isMobile,
8695
"vm-header-button": !appModeEnable,
96+
"vm-autorefresh": useAutorefresh,
8797
})}
8898
>
89-
{!isMobile && (
90-
<Tooltip title="Refresh dashboard">
99+
{useAutorefresh ? (
100+
isMobile ? (
101+
<div
102+
className="vm-mobile-option"
103+
onClick={toggleOpenOptions}
104+
>
105+
<span className="vm-mobile-option__icon"><RestartIcon/></span>
106+
<div className="vm-mobile-option-text">
107+
<span className="vm-mobile-option-text__label">Auto-refresh</span>
108+
<span className="vm-mobile-option-text__value">{selectedDelay.title}</span>
109+
</div>
110+
<span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
111+
</div>
112+
) : (
113+
<>
114+
<Tooltip title={tooltip}>
115+
<Button
116+
variant="contained"
117+
color="primary"
118+
onClick={handleUpdate}
119+
startIcon={<RefreshIcon/>}
120+
ariaLabel={tooltip}
121+
/>
122+
</Tooltip>
123+
<Tooltip title="Auto-refresh control">
124+
<div ref={optionsButtonRef}>
125+
<Button
126+
variant="contained"
127+
color="primary"
128+
fullWidth
129+
endIcon={(
130+
<div
131+
className={classNames({
132+
"vm-execution-controls-buttons__arrow": true,
133+
"vm-execution-controls-buttons__arrow_open": openOptions,
134+
})}
135+
>
136+
<ArrowDownIcon/>
137+
</div>
138+
)}
139+
onClick={toggleOpenOptions}
140+
>
141+
{selectedDelay.title}
142+
</Button>
143+
</div>
144+
</Tooltip>
145+
</>
146+
)
147+
) : (
148+
isMobile ? (
149+
<div
150+
className="vm-mobile-option"
151+
onClick={handleUpdate}
152+
>
153+
<span className="vm-mobile-option__icon"><RestartIcon/></span>
154+
<div className="vm-mobile-option-text">
155+
<span className="vm-mobile-option-text__label">Refresh</span>
156+
</div>
157+
</div>
158+
) : (
91159
<Button
92160
variant="contained"
93161
color="primary"
94162
onClick={handleUpdate}
95163
startIcon={<RefreshIcon/>}
96-
ariaLabel="refresh dashboard"
164+
ariaLabel={tooltip}
97165
/>
98-
</Tooltip>
99-
)}
100-
{isMobile ? (
101-
<div
102-
className="vm-mobile-option"
103-
onClick={toggleOpenOptions}
104-
>
105-
<span className="vm-mobile-option__icon"><RestartIcon/></span>
106-
<div className="vm-mobile-option-text">
107-
<span className="vm-mobile-option-text__label">Auto-refresh</span>
108-
<span className="vm-mobile-option-text__value">{selectedDelay.title}</span>
109-
</div>
110-
<span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
111-
</div>
112-
) : (
113-
<Tooltip title="Auto-refresh control">
114-
<div ref={optionsButtonRef}>
115-
<Button
116-
variant="contained"
117-
color="primary"
118-
fullWidth
119-
endIcon={(
120-
<div
121-
className={classNames({
122-
"vm-execution-controls-buttons__arrow": true,
123-
"vm-execution-controls-buttons__arrow_open": openOptions,
124-
})}
125-
>
126-
<ArrowDownIcon/>
127-
</div>
128-
)}
129-
onClick={toggleOpenOptions}
130-
>
131-
{selectedDelay.title}
132-
</Button>
133-
</div>
134-
</Tooltip>
166+
)
135167
)}
136168
</div>
137169
</div>
138-
<Popper
139-
open={openOptions}
140-
placement="bottom-right"
141-
onClose={handleCloseOptions}
142-
buttonRef={optionsButtonRef}
143-
title={isMobile ? "Auto-refresh duration" : undefined}
144-
>
145-
<div
146-
className={classNames({
147-
"vm-execution-controls-list": true,
148-
"vm-execution-controls-list_mobile": isMobile,
149-
})}
170+
{useAutorefresh && (
171+
<Popper
172+
open={openOptions}
173+
placement="bottom-right"
174+
onClose={handleCloseOptions}
175+
buttonRef={optionsButtonRef}
176+
title={isMobile ? "Auto-refresh duration" : undefined}
150177
>
151-
{delayOptions.map(d => (
152-
<div
153-
className={classNames({
154-
"vm-list-item": true,
155-
"vm-list-item_mobile": isMobile,
156-
"vm-list-item_active": d.seconds === selectedDelay.seconds
157-
})}
158-
key={d.seconds}
159-
onClick={createHandlerChange(d)}
160-
>
161-
{d.title}
162-
</div>
163-
))}
164-
</div>
165-
</Popper>
178+
<div
179+
className={classNames({
180+
"vm-execution-controls-list": true,
181+
"vm-execution-controls-list_mobile": isMobile,
182+
})}
183+
>
184+
{delayOptions.map(d => (
185+
<div
186+
className={classNames({
187+
"vm-list-item": true,
188+
"vm-list-item_mobile": isMobile,
189+
"vm-list-item_active": d.seconds === selectedDelay.seconds
190+
})}
191+
key={d.seconds}
192+
onClick={createHandlerChange(d)}
193+
>
194+
{d.title}
195+
</div>
196+
))}
197+
</div>
198+
</Popper>
199+
)}
166200
</>;
167201
};

‎app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/ExecutionControls/style.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
display: flex;
88
justify-content: space-between;
99
border-radius: calc($button-radius + 1px);
10-
min-width: 107px;
10+
:is(.vm-autorefresh) {
11+
min-width: 107px;
12+
}
1113

1214
&_mobile {
1315
flex-direction: column;

0 commit comments

Comments
 (0)