mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
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:
parent
67977e2b55
commit
87693754d5
16 changed files with 1294 additions and 1032 deletions
|
@ -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"
|
||||
]
|
||||
}
|
|
@ -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
2
app/vmselect/vmui/static/js/main.31eddb83.js
Normal file
File diff suppressed because one or more lines are too long
|
@ -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
|
@ -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
|
||||
|
||||
|
|
2225
app/vmui/packages/vmui/package-lock.json
generated
2225
app/vmui/packages/vmui/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue