github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2025-02-09 15:27:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

vmui: support node v.18 (#2529)

Browse source 
* fix: add support vmui node18

* fix: remove @mui/styles (legacy styling solution)

* Update app/vmui/Dockerfile-build

* app/vmselect/vmui: `make vmui-update`

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
This commit is contained in:
Yury Molodov 2022-05-02 18:41:53 +03:00 committed by GitHub
parent 67977e2b55
commit 87693754d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 1294 additions and 1032 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/vmselect/vmui/asset-manifest.json
View file

@ -1,7 +1,7 @@
{ {
"files": { "files": {
"main.css": "./static/css/main.d8362c27.css", "main.css": "./static/css/main.d8362c27.css",
"main.js": "./static/js/main.7e81baa6.js", "main.js": "./static/js/main.31eddb83.js",
"static/js/362.1f16598a.chunk.js": "./static/js/362.1f16598a.chunk.js", "static/js/362.1f16598a.chunk.js": "./static/js/362.1f16598a.chunk.js",
"static/js/27.939f971b.chunk.js": "./static/js/27.939f971b.chunk.js", "static/js/27.939f971b.chunk.js": "./static/js/27.939f971b.chunk.js",
"static/media/README.md": "./static/media/README.40ebc3a1f4adae949154.md", "static/media/README.md": "./static/media/README.40ebc3a1f4adae949154.md",
@ -9,6 +9,6 @@
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.d8362c27.css", "static/css/main.d8362c27.css",
"static/js/main.7e81baa6.js" "static/js/main.31eddb83.js"
] ]
} }

2
app/vmselect/vmui/index.html
View file

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.7e81baa6.js"></script><link href="./static/css/main.d8362c27.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.31eddb83.js"></script><link href="./static/css/main.d8362c27.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

2
app/vmselect/vmui/static/js/main.31eddb83.js Normal file
View file

File diff suppressed because one or more lines are too long

8
app/vmselect/vmui/static/js/main.7e81baa6.js.LICENSE.txt → app/vmselect/vmui/static/js/main.31eddb83.js.LICENSE.txt
View file

@ -1,11 +1,3 @@
/**
* A better abstraction over CSS.
*
* @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
* @website https://github.com/cssinjs/jss
* @license MIT
*/
/** /**
* React Router DOM v6.3.0 * React Router DOM v6.3.0
* *

2
app/vmselect/vmui/static/js/main.7e81baa6.js
View file

File diff suppressed because one or more lines are too long

2
app/vmui/Dockerfile-build
View file

@ -1,4 +1,4 @@
FROM node:17-alpine3.15 FROM node:18-alpine3.15
RUN apk update && apk add --no-cache bash bash-doc bash-completion libtool autoconf automake nasm pkgconfig libpng gcc make g++ zlib-dev gawk RUN apk update && apk add --no-cache bash bash-doc bash-completion libtool autoconf automake nasm pkgconfig libpng gcc make g++ zlib-dev gawk

2225
app/vmui/packages/vmui/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
app/vmui/packages/vmui/package.json
View file

@ -9,7 +9,6 @@
"@mui/icons-material": "^5.6.0", "@mui/icons-material": "^5.6.0",
"@mui/lab": "^5.0.0-alpha.73", "@mui/lab": "^5.0.0-alpha.73",
"@mui/material": "^5.5.1", "@mui/material": "^5.5.1",
"@mui/styles": "^5.5.1",
"@testing-library/jest-dom": "^5.16.2", "@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^13.0.0", "@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^14.0.4", "@testing-library/user-event": "^14.0.4",

15
app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Auth/AuthDialog.tsx
View file

@ -19,11 +19,9 @@ import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import Dialog from "@mui/material/Dialog"; import Dialog from "@mui/material/Dialog";
import createStyles from "@mui/styles/createStyles";
import TabPanel from "./AuthTabPanel"; import TabPanel from "./AuthTabPanel";
import PersonIcon from "@mui/icons-material/Person"; import PersonIcon from "@mui/icons-material/Person";
import LockIcon from "@mui/icons-material/Lock"; import LockIcon from "@mui/icons-material/Lock";
import makeStyles from "@mui/styles/makeStyles";
import {useAuthDispatch, useAuthState} from "../../../../state/auth/AuthStateContext"; import {useAuthDispatch, useAuthState} from "../../../../state/auth/AuthStateContext";
import {AUTH_METHOD, WithCheckbox} from "../../../../state/auth/reducer"; import {AUTH_METHOD, WithCheckbox} from "../../../../state/auth/reducer";
import {ChangeEvent, ClipboardEvent} from "react"; import {ChangeEvent, ClipboardEvent} from "react";
@ -39,14 +37,6 @@ export interface AuthTab {
id: AUTH_METHOD; id: AUTH_METHOD;
} }
const useStyles = makeStyles(() =>
createStyles({
tabsContent: {
height: "200px"
},
}),
);
const BEARER_PREFIX = "Bearer "; const BEARER_PREFIX = "Bearer ";
const tabs: AuthTab[] = [ const tabs: AuthTab[] = [
@ -57,7 +47,6 @@ const tabs: AuthTab[] = [
export const AuthDialog: React.FC<DialogProps> = (props) => { export const AuthDialog: React.FC<DialogProps> = (props) => {
const classes = useStyles();
const {onClose, open} = props; const {onClose, open} = props;
const {saveAuthLocally, basicData, bearerData, authMethod} = useAuthState(); const {saveAuthLocally, basicData, bearerData, authMethod} = useAuthState();
@ -133,7 +122,7 @@ export const AuthDialog: React.FC<DialogProps> = (props) => {
tabs.map(t => <Tab key={t.id} label={t.title} />) tabs.map(t => <Tab key={t.id} label={t.title} />)
} }
</Tabs> </Tabs>
<Box p={0} display="flex" flexDirection="column" className={classes.tabsContent}> <Box p={0} display="flex" flexDirection="column" sx={{height: "200px"}}>
<Box flexGrow={1}> <Box flexGrow={1}>
<TabPanel value={tabIndex} index={0}> <TabPanel value={tabIndex} index={0}>
<Typography style={{fontStyle: "italic"}}> <Typography style={{fontStyle: "italic"}}>
@ -213,4 +202,4 @@ export const AuthDialog: React.FC<DialogProps> = (props) => {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );
}; };

17
app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Graph/GraphSettings.tsx
View file

@ -7,12 +7,11 @@ import Paper from "@mui/material/Paper";
import Popper from "@mui/material/Popper"; import Popper from "@mui/material/Popper";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import makeStyles from "@mui/styles/makeStyles";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import ClickAwayListener from "@mui/material/ClickAwayListener"; import ClickAwayListener from "@mui/material/ClickAwayListener";
import {AxisRange, YaxisState} from "../../../../state/graph/reducer"; import {AxisRange, YaxisState} from "../../../../state/graph/reducer";
const useStyles = makeStyles({ const classes = {
popover: { popover: {
display: "grid", display: "grid",
gridGap: "16px", gridGap: "16px",
@ -32,7 +31,7 @@ const useStyles = makeStyles({
gridGap: "6px", gridGap: "6px",
padding: "0 14px", padding: "0 14px",
} }
}); };
const title = "Axes Settings"; const title = "Axes Settings";
@ -46,8 +45,6 @@ const GraphSettings: FC<GraphSettingsProps> = ({yaxis, setYaxisLimits, toggleEna
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null); const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const classes = useStyles();
return <Box> return <Box>
<Tooltip title={title}> <Tooltip title={title}>
<IconButton onClick={(e) => setAnchorEl(e.currentTarget)}> <IconButton onClick={(e) => setAnchorEl(e.currentTarget)}>
@ -60,14 +57,14 @@ const GraphSettings: FC<GraphSettingsProps> = ({yaxis, setYaxisLimits, toggleEna
placement="left-start" placement="left-start"
modifiers={[{name: "offset", options: {offset: [0, 6]}}]}> modifiers={[{name: "offset", options: {offset: [0, 6]}}]}>
<ClickAwayListener onClickAway={() => setAnchorEl(null)}> <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
<Paper elevation={3} className={classes.popover}> <Paper elevation={3} sx={classes.popover}>
<div id="handle" className={classes.popoverHeader}> <Box id="handle" sx={classes.popoverHeader}>
<Typography variant="body1"><b>{title}</b></Typography> <Typography variant="body1"><b>{title}</b></Typography>
<IconButton size="small" onClick={() => setAnchorEl(null)}> <IconButton size="small" onClick={() => setAnchorEl(null)}>
<CloseIcon style={{color: "white"}}/> <CloseIcon style={{color: "white"}}/>
</IconButton> </IconButton>
</div> </Box>
<Box className={classes.popoverBody}> <Box sx={classes.popoverBody}>
<AxesLimitsConfigurator <AxesLimitsConfigurator
yaxis={yaxis} yaxis={yaxis}
setYaxisLimits={setYaxisLimits} setYaxisLimits={setYaxisLimits}
@ -80,4 +77,4 @@ const GraphSettings: FC<GraphSettingsProps> = ({yaxis, setYaxisLimits, toggleEna
</Box>; </Box>;
}; };
export default GraphSettings; export default GraphSettings;

15
app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx
View file

@ -1,7 +1,6 @@
import React, {FC, useEffect, useState, useMemo} from "preact/compat"; import React, {FC, useEffect, useState, useMemo} from "preact/compat";
import {useAppDispatch, useAppState} from "../../../../state/common/StateContext"; import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
import {dateFromSeconds, formatDateForNativeInput} from "../../../../utils/time"; import {dateFromSeconds, formatDateForNativeInput} from "../../../../utils/time";
import makeStyles from "@mui/styles/makeStyles";
import TimeDurationSelector from "./TimeDurationSelector"; import TimeDurationSelector from "./TimeDurationSelector";
import dayjs from "dayjs"; import dayjs from "dayjs";
import QueryBuilderIcon from "@mui/icons-material/QueryBuilder"; import QueryBuilderIcon from "@mui/icons-material/QueryBuilder";
@ -17,7 +16,7 @@ import Tooltip from "@mui/material/Tooltip";
const formatDate = "YYYY-MM-DD HH:mm:ss"; const formatDate = "YYYY-MM-DD HH:mm:ss";
const useStyles = makeStyles({ const classes = {
container: { container: {
display: "grid", display: "grid",
gridTemplateColumns: "200px auto 200px", gridTemplateColumns: "200px auto 200px",
@ -32,12 +31,10 @@ const useStyles = makeStyles({
datePickerItem: { datePickerItem: {
minWidth: "200px", minWidth: "200px",
}, },
}); };
export const TimeSelector: FC = () => { export const TimeSelector: FC = () => {
const classes = useStyles();
const [until, setUntil] = useState<string>(); const [until, setUntil] = useState<string>();
const [from, setFrom] = useState<string>(); const [from, setFrom] = useState<string>();
@ -91,9 +88,9 @@ export const TimeSelector: FC = () => {
modifiers={[{name: "offset", options: {offset: [0, 6]}}]}> modifiers={[{name: "offset", options: {offset: [0, 6]}}]}>
<ClickAwayListener onClickAway={() => setAnchorEl(null)}> <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
<Paper elevation={3}> <Paper elevation={3}>
<Box className={classes.container}> <Box sx={classes.container}>
<Box className={classes.timeControls}> <Box sx={classes.timeControls}>
<Box className={classes.datePickerItem}> <Box sx={classes.datePickerItem}>
<DateTimePicker <DateTimePicker
label="From" label="From"
ampm={false} ampm={false}
@ -106,7 +103,7 @@ export const TimeSelector: FC = () => {
maxDate={dayjs(until)} maxDate={dayjs(until)}
PopperProps={{disablePortal: true}}/> PopperProps={{disablePortal: true}}/>
</Box> </Box>
<Box className={classes.datePickerItem}> <Box sx={classes.datePickerItem}>
<DateTimePicker <DateTimePicker
label="To" label="To"
ampm={false} ampm={false}

13
app/vmui/packages/vmui/src/components/CustomPanel/Views/TableView.tsx
View file

@ -8,7 +8,6 @@ import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead"; import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel"; import TableSortLabel from "@mui/material/TableSortLabel";
import makeStyles from "@mui/styles/makeStyles";
import {useSortedCategories} from "../../../hooks/useSortedCategories"; import {useSortedCategories} from "../../../hooks/useSortedCategories";
import Alert from "@mui/material/Alert"; import Alert from "@mui/material/Alert";
@ -16,16 +15,8 @@ export interface GraphViewProps {
data: InstantMetricResult[]; data: InstantMetricResult[];
} }
const useStyles = makeStyles({
deemphasized: {
opacity: 0.4
}
});
const TableView: FC<GraphViewProps> = ({data}) => { const TableView: FC<GraphViewProps> = ({data}) => {
const classes = useStyles();
const sortedColumns = useSortedCategories(data); const sortedColumns = useSortedCategories(data);
const [orderBy, setOrderBy] = useState(""); const [orderBy, setOrderBy] = useState("");
@ -88,7 +79,7 @@ const TableView: FC<GraphViewProps> = ({data}) => {
{row.metadata.map((rowMeta, index2) => { {row.metadata.map((rowMeta, index2) => {
const prevRowValue = rows[index - 1] && rows[index - 1].metadata[index2]; const prevRowValue = rows[index - 1] && rows[index - 1].metadata[index2];
return ( return (
<TableCell className={prevRowValue === rowMeta ? classes.deemphasized : undefined} <TableCell sx={prevRowValue === rowMeta ? {opacity: 0.4} : {}}
key={index2}>{rowMeta}</TableCell> key={index2}>{rowMeta}</TableCell>
); );
} }
@ -104,4 +95,4 @@ const TableView: FC<GraphViewProps> = ({data}) => {
); );
}; };
export default TableView; export default TableView;

10
app/vmui/packages/vmui/src/components/Header/Header.tsx
View file

@ -6,7 +6,6 @@ import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import {ExecutionControls} from "../CustomPanel/Configurator/Time/ExecutionControls"; import {ExecutionControls} from "../CustomPanel/Configurator/Time/ExecutionControls";
import Logo from "../common/Logo"; import Logo from "../common/Logo";
import makeStyles from "@mui/styles/makeStyles";
import {setQueryStringWithoutPageReload} from "../../utils/query-string"; import {setQueryStringWithoutPageReload} from "../../utils/query-string";
import {TimeSelector} from "../CustomPanel/Configurator/Time/TimeSelector"; import {TimeSelector} from "../CustomPanel/Configurator/Time/TimeSelector";
import GlobalSettings from "../CustomPanel/Configurator/Settings/GlobalSettings"; import GlobalSettings from "../CustomPanel/Configurator/Settings/GlobalSettings";
@ -15,7 +14,7 @@ import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab"; import Tab from "@mui/material/Tab";
import router from "../../router/index"; import router from "../../router/index";
const useStyles = makeStyles({ const classes = {
logo: { logo: {
position: "relative", position: "relative",
display: "flex", display: "flex",
@ -51,11 +50,10 @@ const useStyles = makeStyles({
boxShadow: "rgba(0, 0, 0, 0.15) 0px 2px 8px" boxShadow: "rgba(0, 0, 0, 0.15) 0px 2px 8px"
} }
} }
}); };
const Header: FC = () => { const Header: FC = () => {
const classes = useStyles();
const {search, pathname} = useLocation(); const {search, pathname} = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
@ -74,14 +72,14 @@ const Header: FC = () => {
return <AppBar position="static" sx={{px: 1, boxShadow: "none"}}> return <AppBar position="static" sx={{px: 1, boxShadow: "none"}}>
<Toolbar> <Toolbar>
<Box display="grid" alignItems="center" justifyContent="center"> <Box display="grid" alignItems="center" justifyContent="center">
<Box onClick={onClickLogo} className={classes.logo}> <Box onClick={onClickLogo} sx={classes.logo}>
<Logo style={{color: "inherit", marginRight: "6px"}}/> <Logo style={{color: "inherit", marginRight: "6px"}}/>
<Typography variant="h5"> <Typography variant="h5">
<span style={{fontWeight: "bolder"}}>VM</span> <span style={{fontWeight: "bolder"}}>VM</span>
<span style={{fontWeight: "lighter"}}>UI</span> <span style={{fontWeight: "lighter"}}>UI</span>
</Typography> </Typography>
</Box> </Box>
<Link className={classes.issueLink} target="_blank" <Link sx={classes.issueLink} target="_blank"
href="https://github.com/VictoriaMetrics/VictoriaMetrics/issues/new"> href="https://github.com/VictoriaMetrics/VictoriaMetrics/issues/new">
create an issue create an issue
</Link> </Link>

2
app/vmui/packages/vmui/src/components/PredefinedPanels/PredefinedDashboard.tsx
View file

@ -1,4 +1,5 @@
import React, {FC, useEffect, useMemo, useState} from "preact/compat"; import React, {FC, useEffect, useMemo, useState} from "preact/compat";
import {CSSProperties} from "react";
import {MouseEvent as ReactMouseEvent} from "react"; import {MouseEvent as ReactMouseEvent} from "react";
import {DashboardRow} from "../../types"; import {DashboardRow} from "../../types";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
@ -10,7 +11,6 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import PredefinedPanels from "./PredefinedPanels"; import PredefinedPanels from "./PredefinedPanels";
import Alert from "@mui/material/Alert"; import Alert from "@mui/material/Alert";
import {CSSProperties} from "@mui/styles";
import useResize from "../../hooks/useResize"; import useResize from "../../hooks/useResize";
export interface PredefinedDashboardProps extends DashboardRow { export interface PredefinedDashboardProps extends DashboardRow {

4
app/vmui/packages/vmui/src/components/common/Logo.tsx
View file

@ -1,5 +1,5 @@
import React, {FC} from "preact/compat"; import React, {FC} from "preact/compat";
import {CSSProperties} from "@mui/styles"; import {CSSProperties} from "react";
import SvgIcon from "@mui/material/SvgIcon"; import SvgIcon from "@mui/material/SvgIcon";
interface LogoProps { interface LogoProps {
@ -17,4 +17,4 @@ const Logo: FC<LogoProps> = ({style}) => (
</SvgIcon> </SvgIcon>
); );
export default Logo; export default Logo;

4
app/vmui/packages/vmui/src/theme/switch.ts
View file

@ -1,5 +1,5 @@
import Switch from "@mui/material/Switch"; import Switch from "@mui/material/Switch";
import {styled} from "@mui/styles"; import {styled} from "@mui/material/styles";
const BasicSwitch = styled(Switch)(() => ({ const BasicSwitch = styled(Switch)(() => ({
padding: 10, padding: 10,
@ -22,4 +22,4 @@ const BasicSwitch = styled(Switch)(() => ({
}, },
})); }));
export default BasicSwitch; export default BasicSwitch;