diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/GlobalSettings.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/GlobalSettings.tsx index 552ebe50b4..732b50e278 100644 --- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/GlobalSettings.tsx +++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/GlobalSettings.tsx @@ -30,8 +30,8 @@ const GlobalSettings: FC = () => { const dispatch = useAppDispatch(); const [changedServerUrl, setChangedServerUrl] = useState(serverUrl); - const setServer = () => { - dispatch({type: "SET_SERVER", payload: changedServerUrl}); + const setServer = (url?: string) => { + dispatch({type: "SET_SERVER", payload: url || changedServerUrl}); handleClose(); }; @@ -63,12 +63,12 @@ const GlobalSettings: FC = () => { - + - diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/ServerConfigurator.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/ServerConfigurator.tsx index 837926a7ac..e085d08eef 100644 --- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/ServerConfigurator.tsx +++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Settings/ServerConfigurator.tsx @@ -2,14 +2,15 @@ import React, {FC, useState} from "preact/compat"; import TextField from "@mui/material/TextField"; import {useAppState} from "../../../../state/common/StateContext"; import {ErrorTypes} from "../../../../types"; -import {ChangeEvent} from "react"; +import {ChangeEvent, KeyboardEvent} from "react"; export interface ServerConfiguratorProps { error?: ErrorTypes | string; setServer: (url: string) => void + onEnter: (url: string) => void } -const ServerConfigurator: FC = ({error, setServer}) => { +const ServerConfigurator: FC = ({error, setServer, onEnter}) => { const {serverUrl} = useAppState(); const [changedServerUrl, setChangedServerUrl] = useState(serverUrl); @@ -20,10 +21,24 @@ const ServerConfigurator: FC = ({error, setServer}) => setServer(value); }; - return { + if (e.key === "Enter") { + e.preventDefault(); + onEnter(changedServerUrl); + } + }; + + return ; + onChange={onChangeServer} + onKeyDown={onKeyDown} + />; }; export default ServerConfigurator; diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/ExecutionControls.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/ExecutionControls.tsx index 25b57dc05e..332791ea92 100644 --- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/ExecutionControls.tsx +++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/ExecutionControls.tsx @@ -12,6 +12,7 @@ import ListItem from "@mui/material/ListItem"; import ListItemText from "@mui/material/ListItemText"; import {useLocation} from "react-router-dom"; import {getAppModeEnable} from "../../../../utils/app-mode"; +import Box from "@mui/material/Box"; interface AutoRefreshOption { seconds: number @@ -55,12 +56,16 @@ export const ExecutionControls: FC = () => { setAnchorEl(null); }; + const handleUpdate = () => { + dispatch({type: "RUN_QUERY"}); + }; + useEffect(() => { const delay = selectedDelay.seconds; let timer: number; if (autoRefresh) { timer = setInterval(() => { - dispatch({type: "RUN_QUERY_TO_NOW"}); + dispatch({type: "RUN_QUERY"}); }, delay * 1000) as unknown as number; } else { setSelectedDelay(delayOptions[0]); @@ -74,22 +79,33 @@ export const ExecutionControls: FC = () => { const open = Boolean(anchorEl); return <> - - - + + + + + + + + { modifiers={[{name: "offset", options: {offset: [0, 6]}}]}> setAnchorEl(null)}> - + {delayOptions.map(d => handleChange(d)}> diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx index e916895e60..f913b73dd7 100644 --- a/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx +++ b/app/vmui/packages/vmui/src/components/CustomPanel/Configurator/Time/TimeSelector.tsx @@ -73,11 +73,8 @@ export const TimeSelector: FC = () => { const open = Boolean(anchorEl); const setTimeAndClosePicker = () => { - if (from) { - dispatch({type: "SET_FROM", payload: new Date(from)}); - } - if (until) { - dispatch({type: "SET_UNTIL", payload: new Date(until)}); + if (from && until) { + dispatch({type: "SET_PERIOD", payload: {from: new Date(from), to: new Date(until)}}); } setAnchorEl(null); }; diff --git a/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts b/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts index a578f489db..741496368a 100644 --- a/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts +++ b/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts @@ -6,8 +6,6 @@ import {isValidHttpUrl} from "../utils/url"; import {ErrorTypes} from "../types"; import debounce from "lodash.debounce"; import {DisplayType} from "../components/CustomPanel/Configurator/DisplayTypeSwitch"; -import usePrevious from "./usePrevious"; -import {arrayEquals} from "../utils/array"; import Trace from "../components/CustomPanel/Trace/Trace"; import {MAX_SERIES} from "../config"; @@ -94,7 +92,7 @@ export const useFetchQuery = ({predefinedQuery, visible, display, customStep}: F setIsLoading(false); }; - const throttledFetchData = useCallback(debounce(fetchData, 600), []); + const throttledFetchData = useCallback(debounce(fetchData, 800), []); const fetchUrl = useMemo(() => { const expr = predefinedQuery ?? query; @@ -116,13 +114,8 @@ export const useFetchQuery = ({predefinedQuery, visible, display, customStep}: F }, [serverUrl, period, displayType, customStep]); - const prevFetchUrl = usePrevious(fetchUrl); - const prevDisplayType = usePrevious(displayType); - useEffect(() => { - const equalFetchUrl = fetchUrl && prevFetchUrl && arrayEquals(fetchUrl, prevFetchUrl); - const changedDisplayType = displayType !== prevDisplayType; - if (!visible || (equalFetchUrl && !changedDisplayType) || !fetchUrl?.length) return; + if (!visible || !fetchUrl?.length) return; setIsLoading(true); const expr = predefinedQuery ?? query; throttledFetchData(fetchUrl, fetchQueue, (display || displayType), expr); diff --git a/app/vmui/packages/vmui/src/hooks/useFetchTopQueries.ts b/app/vmui/packages/vmui/src/hooks/useFetchTopQueries.ts index 415b8a1d8b..6357e12e82 100644 --- a/app/vmui/packages/vmui/src/hooks/useFetchTopQueries.ts +++ b/app/vmui/packages/vmui/src/hooks/useFetchTopQueries.ts @@ -1,6 +1,5 @@ import { useEffect, useState } from "react"; import {ErrorTypes} from "../types"; -import {getAppModeParams} from "../utils/app-mode"; import {useAppState} from "../state/common/StateContext"; import {useMemo} from "preact/compat"; import {getTopQueries} from "../api/top-queries";