Skip to content

Commit 6f676f7

Browse files
prakashsvmxprakashsvmx
authored
UX Prometheus dashboard (#1907)
1 parent 26d7001 commit 6f676f7

38 files changed

+2496
-400
lines changed

‎portal-ui/src/icons/NetworkGetIcon.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2022 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
17+
import React, { SVGProps } from "react";
18+
19+
const NetworkGetIcon = (props: SVGProps<SVGSVGElement>) => {
20+
return (
21+
<svg
22+
xmlns="http://www.w3.org/2000/svg"
23+
className={`min-icon`}
24+
fill={"currentcolor"}
25+
viewBox="0 0 15 15"
26+
{...props}
27+
>
28+
<path
29+
d="M7.5,0h0A7.5,7.5,0,0,0,0,7.5H0A7.5,7.5,0,0,0,7.5,15h0a7.5,7.5,0,0,0,0-15M9.978,9.776l-1.9,1.9a.819.819,0,0,1-1.166,0h0L5.022,9.776a.773.773,0,0,1-.186-.864.875.875,0,0,1,.779-.541.793.793,0,0,1,.565.247l.5.5V3.9a.818.818,0,0,1,1.636,0V9.119l.5-.5a.79.79,0,0,1,.564-.248.872.872,0,0,1,.779.541.772.772,0,0,1-.185.864"
30+
transform="translate(15 15) rotate(180)"
31+
/>
32+
</svg>
33+
);
34+
};
35+
36+
export default NetworkGetIcon;

‎portal-ui/src/icons/NetworkPutIcon.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2022 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
17+
import React, { SVGProps } from "react";
18+
19+
const NetworkPutIcon = (props: SVGProps<SVGSVGElement>) => {
20+
return (
21+
<svg
22+
xmlns="http://www.w3.org/2000/svg"
23+
className={`min-icon`}
24+
fill={"currentcolor"}
25+
viewBox="0 0 15 15"
26+
{...props}
27+
>
28+
<path d="M7.5,0h0A7.5,7.5,0,0,0,0,7.5H0A7.5,7.5,0,0,0,7.5,15h0a7.5,7.5,0,0,0,0-15M9.978,9.776l-1.9,1.9a.819.819,0,0,1-1.166,0h0L5.023,9.776a.773.773,0,0,1-.186-.864.875.875,0,0,1,.779-.541.793.793,0,0,1,.565.247l.5.5V3.9a.818.818,0,0,1,1.636,0V9.119l.5-.5a.79.79,0,0,1,.564-.248.872.872,0,0,1,.779.541.772.772,0,0,1-.185.864" />
29+
</svg>
30+
);
31+
};
32+
33+
export default NetworkPutIcon;

‎portal-ui/src/icons/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,3 +184,5 @@ export { default as DeleteNonCurrentIcon } from "./DeleteNonCurrentIcon";
184184
export { default as FilterIcon } from "./FilterIcon";
185185
export { default as EditTenantIcon } from "./EditTenantIcon";
186186
export { default as SuccessIcon } from "./SuccessIcon";
187+
export { default as NetworkGetIcon } from "./NetworkGetIcon";
188+
export { default as NetworkPutIcon } from "./NetworkPutIcon";

‎portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx

Lines changed: 215 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,17 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React, { Fragment } from "react";
17+
import React from "react";
1818
import { Theme } from "@mui/material/styles";
1919
import createStyles from "@mui/styles/createStyles";
2020
import withStyles from "@mui/styles/withStyles";
21-
import { Grid, Button } from "@mui/material";
21+
import { Grid, Button, Box } from "@mui/material";
2222
import ScheduleIcon from "@mui/icons-material/Schedule";
2323
import WatchLaterIcon from "@mui/icons-material/WatchLater";
2424
import { actionsTray, widgetContainerCommon } from "../common/styleLibrary";
2525
import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper";
2626
import SyncIcon from "../../../../../icons/SyncIcon";
27+
import { OpenListIcon } from "../../../../../icons";
2728

2829
interface IDateRangeSelector {
2930
classes: any;
@@ -32,6 +33,9 @@ interface IDateRangeSelector {
3233
timeEnd: any;
3334
setTimeEnd: (date: any) => void;
3435
triggerSync?: () => void;
36+
label?: string;
37+
startLabel?: string;
38+
endLabel?: string;
3539
}
3640

3741
const styles = (theme: Theme) =>
@@ -60,57 +64,227 @@ const styles = (theme: Theme) =>
6064
},
6165
});
6266

67+
const DateFilterAdornIcon = () => {
68+
return (
69+
<Box
70+
sx={{
71+
display: "flex",
72+
alignItems: "center",
73+
"& .min-icon": {
74+
width: "10px",
75+
height: "10px",
76+
},
77+
}}
78+
>
79+
<OpenListIcon />
80+
</Box>
81+
);
82+
};
83+
6384
const DateRangeSelector = ({
6485
classes,
6586
timeStart,
6687
setTimeStart,
6788
timeEnd,
6889
setTimeEnd,
6990
triggerSync,
91+
label = "Filter:",
92+
startLabel = "Start Time:",
93+
endLabel = "End Time:",
7094
}: IDateRangeSelector) => {
7195
return (
72-
<Fragment>
73-
<Grid item xs={12} className={classes.timeContainers}>
74-
<span className={classes.filterTitle}>Filter:</span>
75-
<div className={classes.filterContainer}>
76-
<span className={`${classes.filterTitle} ${classes.schedulerIcon}`}>
77-
<ScheduleIcon />
78-
</span>
79-
<span className={classes.selectorLabel}>Start Time:</span>
80-
<DateTimePickerWrapper
81-
value={timeStart}
82-
onChange={setTimeStart}
83-
forFilterContained
84-
id="stTime"
85-
noInputIcon
86-
/>
87-
<span className={classes.divisorLine}>&nbsp;</span>
88-
<span className={`${classes.filterTitle} ${classes.schedulerIcon}`}>
89-
<WatchLaterIcon />
90-
</span>
91-
<span className={classes.selectorLabel}>End Time:</span>
92-
<DateTimePickerWrapper
93-
value={timeEnd}
94-
onChange={setTimeEnd}
95-
forFilterContained
96-
id="endTime"
97-
noInputIcon
98-
/>
99-
</div>
96+
<Grid
97+
item
98+
xs={12}
99+
sx={{
100+
"& .filter-date-input-label, .end-time-input-label": {
101+
display: "none",
102+
},
103+
"& .MuiInputBase-adornedEnd.filter-date-date-time-input": {
104+
width: "100%",
105+
border: "1px solid #eaeaea",
106+
paddingLeft: "8px",
107+
paddingRight: "8px",
108+
borderRadius: "1px",
109+
},
110+
111+
"& .MuiInputAdornment-root button": {
112+
height: "20px",
113+
width: "20px",
114+
marginRight: "5px",
115+
},
116+
"& .filter-date-input-wrapper": {
117+
height: "30px",
118+
width: "100%",
119+
120+
"& .MuiTextField-root": {
121+
height: "30px",
122+
width: "90%",
123+
124+
"& input.Mui-disabled": {
125+
color: "#000000",
126+
WebkitTextFillColor: "#101010",
127+
},
128+
},
129+
},
130+
}}
131+
>
132+
<Box
133+
sx={{
134+
display: "grid",
135+
height: {
136+
md: "40px",
137+
xs: "auto",
138+
},
139+
alignItems: "center",
140+
gridTemplateColumns: {
141+
md: "auto 2fr auto",
142+
sm: "1fr",
143+
},
144+
padding: {
145+
md: "0",
146+
xs: " 5px",
147+
},
148+
gap: "5px",
149+
}}
150+
>
151+
<Box sx={{ fontSize: "14px", fontWeight: 500, marginRight: "5px" }}>
152+
{label}
153+
</Box>
154+
<Box
155+
sx={{
156+
display: "grid",
157+
height: {
158+
md: "40px",
159+
xs: "auto",
160+
},
161+
border: {
162+
md: "1px solid #eaeaea",
163+
},
164+
alignItems: "center",
165+
gridTemplateColumns: {
166+
md: "1fr 1fr",
167+
sm: "1fr",
168+
},
169+
gap: "8px",
170+
paddingLeft: "8px",
171+
paddingRight: "8px",
172+
}}
173+
>
174+
<Box
175+
sx={{
176+
display: "grid",
177+
height: "30px",
178+
alignItems: "center",
179+
gridTemplateColumns: {
180+
xs: "12px auto 1fr",
181+
},
182+
gap: "5px",
183+
}}
184+
>
185+
<Box
186+
sx={{
187+
display: "flex",
188+
alignItems: "center",
189+
"& .min-icon": {
190+
width: "10px",
191+
height: "10px",
192+
fill: "#B4B5B4",
193+
},
194+
}}
195+
>
196+
<ScheduleIcon className="min-icon" />
197+
</Box>
198+
<Box
199+
sx={{
200+
fontSize: "12px",
201+
marginLeft: "8px",
202+
}}
203+
>
204+
{startLabel}
205+
</Box>
206+
<Box>
207+
<DateTimePickerWrapper
208+
value={timeStart}
209+
onChange={setTimeStart}
210+
id="stTime"
211+
classNamePrefix={"filter-date-"}
212+
forFilterContained
213+
noInputIcon={true}
214+
openPickerIcon={DateFilterAdornIcon}
215+
/>
216+
</Box>
217+
</Box>
218+
219+
<Box
220+
sx={{
221+
display: "grid",
222+
height: "30px",
223+
alignItems: "center",
224+
gridTemplateColumns: {
225+
xs: "12px auto 1fr",
226+
},
227+
gap: "5px",
228+
}}
229+
>
230+
<Box
231+
sx={{
232+
display: "flex",
233+
alignItems: "center",
234+
"& .min-icon": {
235+
width: "10px",
236+
height: "10px",
237+
fill: "#B4B5B4",
238+
},
239+
}}
240+
>
241+
<WatchLaterIcon className="min-icon" />
242+
</Box>
243+
<Box
244+
sx={{
245+
fontSize: "12px",
246+
marginLeft: "8px",
247+
}}
248+
>
249+
{endLabel}
250+
</Box>
251+
<Box>
252+
<DateTimePickerWrapper
253+
value={timeEnd}
254+
onChange={setTimeEnd}
255+
id="endTime"
256+
classNamePrefix={"filter-date-"}
257+
forFilterContained
258+
noInputIcon={true}
259+
openPickerIcon={DateFilterAdornIcon}
260+
/>
261+
</Box>
262+
</Box>
263+
</Box>
264+
100265
{triggerSync && (
101-
<Button
102-
type="button"
103-
variant="contained"
104-
color="primary"
105-
onClick={triggerSync}
106-
endIcon={<SyncIcon />}
107-
className={classes.syncButton}
266+
<Box
267+
sx={{
268+
alignItems: "flex-end",
269+
display: "flex",
270+
justifyContent: "flex-end",
271+
marginRight: "35px",
272+
}}
108273
>
109-
Sync
110-
</Button>
274+
<Button
275+
type="button"
276+
variant="contained"
277+
color="primary"
278+
onClick={triggerSync}
279+
endIcon={<SyncIcon />}
280+
className={classes.syncButton}
281+
>
282+
Sync
283+
</Button>
284+
</Box>
111285
)}
112-
</Grid>
113-
</Fragment>
286+
</Box>
287+
</Grid>
114288
);
115289
};
116290

0 commit comments

Comments
 (0)