From 54e1865d17286c0917b36ea4e7058d95f9bb96e4 Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Fri, 28 Oct 2022 13:47:50 +0200 Subject: [PATCH] vmui: minor fixes (#3276) * feat: apply serverURL on down Enter * fix: change method of set time range * fix: remove prevent run fetch without changes * fix: prevent reset timerange when autorefresh --- .../Configurator/Settings/GlobalSettings.tsx | 8 +-- .../Settings/ServerConfigurator.tsx | 23 ++++++-- .../Configurator/Time/ExecutionControls.tsx | 52 ++++++++++++------- .../Configurator/Time/TimeSelector.tsx | 7 +-- .../packages/vmui/src/hooks/useFetchQuery.ts | 11 +--- .../vmui/src/hooks/useFetchTopQueries.ts | 1 - 6 files changed, 61 insertions(+), 41 deletions(-) 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 552ebe50b..732b50e27 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 837926a7a..e085d08ee 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 25b57dc05..332791ea9 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 e916895e6..f913b73dd 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 a578f489d..741496368 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 415b8a1d8..6357e12e8 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";