vmui: support node v.18 (#2529)

* 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

View file

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

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>

File diff suppressed because one or more lines are too long

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
*

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load diff

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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