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>
2024-11-23 12:31:07 +01:00 · 2022-05-02 18:41:53 +03:00 · 2022-05-02 18:41:53 +03:00 · 87693754d5
commit 87693754d5
parent 67977e2b55
16 changed files with 1294 additions and 1032 deletions
--- a/app/vmselect/vmui/asset-manifest.json
+++ b/app/vmselect/vmui/asset-manifest.json
@ -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"
  ]
 }
--- a/app/vmselect/vmui/index.html
+++ b/app/vmselect/vmui/index.html
@ -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>
--- a/app/vmselect/vmui/static/js/main.31eddb83.js
+++ b/app/vmselect/vmui/static/js/main.31eddb83.js
--- a/app/vmselect/vmui/static/js/main.31eddb83.js.LICENSE.txt
+++ b/app/vmselect/vmui/static/js/main.31eddb83.js.LICENSE.txt
@ -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
 *
--- a/app/vmselect/vmui/static/js/main.7e81baa6.js
+++ b/app/vmselect/vmui/static/js/main.7e81baa6.js
--- a/app/vmui/Dockerfile-build
+++ b/app/vmui/Dockerfile-build
@ -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

--- a/app/vmui/packages/vmui/package-lock.json
+++ b/app/vmui/packages/vmui/package-lock.json
--- a/app/vmui/packages/vmui/package.json
+++ b/app/vmui/packages/vmui/package.json
@ -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",
--- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Auth/AuthDialog.tsx
+++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Auth/AuthDialog.tsx
@ -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>
  );
-};
+};
--- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Graph/GraphSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Graph/GraphSettings.tsx
@ -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;
--- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx
+++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx
@ -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}
--- a/app/vmui/packages/vmui/src/components/CustomPanel/Views/TableView.tsx
+++ b/app/vmui/packages/vmui/src/components/CustomPanel/Views/TableView.tsx
@ -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;
--- a/app/vmui/packages/vmui/src/components/Header/Header.tsx
+++ b/app/vmui/packages/vmui/src/components/Header/Header.tsx
@ -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>
--- a/app/vmui/packages/vmui/src/components/PredefinedPanels/PredefinedDashboard.tsx
+++ b/app/vmui/packages/vmui/src/components/PredefinedPanels/PredefinedDashboard.tsx
@ -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 {
--- a/app/vmui/packages/vmui/src/components/common/Logo.tsx
+++ b/app/vmui/packages/vmui/src/components/common/Logo.tsx
@ -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;
--- a/app/vmui/packages/vmui/src/theme/switch.ts
+++ b/app/vmui/packages/vmui/src/theme/switch.ts
@ -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;