mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
vmui: auto-update chart after query field removed (#3210)
* feat: run query after query field removed * app/vmselect/vmui: `make vmui-update` Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
This commit is contained in:
parent
98a4ab796c
commit
9e4e5abac6
5 changed files with 15 additions and 6 deletions
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"files": {
|
"files": {
|
||||||
"main.css": "./static/css/main.ba692000.css",
|
"main.css": "./static/css/main.ba692000.css",
|
||||||
"main.js": "./static/js/main.623b88d4.js",
|
"main.js": "./static/js/main.dd4b1276.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",
|
||||||
"index.html": "./index.html"
|
"index.html": "./index.html"
|
||||||
},
|
},
|
||||||
"entrypoints": [
|
"entrypoints": [
|
||||||
"static/css/main.ba692000.css",
|
"static/css/main.ba692000.css",
|
||||||
"static/js/main.623b88d4.js"
|
"static/js/main.dd4b1276.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 src="./dashboards/index.js" type="module"></script><script defer="defer" src="./static/js/main.623b88d4.js"></script><link href="./static/css/main.ba692000.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 src="./dashboards/index.js" type="module"></script><script defer="defer" src="./static/js/main.dd4b1276.js"></script><link href="./static/css/main.ba692000.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
|
@ -1,4 +1,4 @@
|
||||||
import React, {FC, useState} from "preact/compat";
|
import React, {FC, useState, useEffect} from "preact/compat";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import IconButton from "@mui/material/IconButton";
|
import IconButton from "@mui/material/IconButton";
|
||||||
import Tooltip from "@mui/material/Tooltip";
|
import Tooltip from "@mui/material/Tooltip";
|
||||||
|
@ -11,6 +11,7 @@ import AdditionalSettings from "./AdditionalSettings";
|
||||||
import {ErrorTypes} from "../../../../types";
|
import {ErrorTypes} from "../../../../types";
|
||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
|
import usePrevious from "../../../../hooks/usePrevious";
|
||||||
|
|
||||||
export interface QueryConfiguratorProps {
|
export interface QueryConfiguratorProps {
|
||||||
error?: ErrorTypes | string;
|
error?: ErrorTypes | string;
|
||||||
|
@ -23,6 +24,7 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
|
||||||
|
|
||||||
const {query, queryHistory, queryControls: {autocomplete}} = useAppState();
|
const {query, queryHistory, queryControls: {autocomplete}} = useAppState();
|
||||||
const [stateQuery, setStateQuery] = useState(query || []);
|
const [stateQuery, setStateQuery] = useState(query || []);
|
||||||
|
const prevStateQuery = usePrevious(stateQuery) as (undefined | string[]);
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
const updateHistory = () => {
|
const updateHistory = () => {
|
||||||
|
@ -66,6 +68,13 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
|
||||||
payload: {value: {values, index: newIndexHistory}, queryNumber: indexQuery}
|
payload: {value: {values, index: newIndexHistory}, queryNumber: indexQuery}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (prevStateQuery && (stateQuery.length < prevStateQuery.filter(q => q).length)) {
|
||||||
|
onRunQuery();
|
||||||
|
}
|
||||||
|
}, [stateQuery]);
|
||||||
|
|
||||||
return <Box boxShadow="rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" p={4} pb={2} m={-4} mb={2}>
|
return <Box boxShadow="rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" p={4} pb={2} m={-4} mb={2}>
|
||||||
<Box>
|
<Box>
|
||||||
{stateQuery.map((q, i) =>
|
{stateQuery.map((q, i) =>
|
||||||
|
|
Loading…
Reference in a new issue