diff --git a/app/vmui/packages/vmui/src/components/Layout/Layout.tsx b/app/vmui/packages/vmui/src/components/Layout/Layout.tsx index 1d89a2984..7a34cac18 100644 --- a/app/vmui/packages/vmui/src/components/Layout/Layout.tsx +++ b/app/vmui/packages/vmui/src/components/Layout/Layout.tsx @@ -1,6 +1,7 @@ import Header from "./Header/Header"; import React, { FC, useEffect } from "preact/compat"; -import { Outlet, useLocation } from "react-router-dom"; +import { Outlet, useLocation, useSearchParams } from "react-router-dom"; +import qs from "qs"; import "./style.scss"; import { getAppModeEnable } from "../../utils/app-mode"; import classNames from "classnames"; @@ -12,14 +13,33 @@ import useDeviceDetect from "../../hooks/useDeviceDetect"; const Layout: FC = () => { const appModeEnable = getAppModeEnable(); const { isMobile } = useDeviceDetect(); + const { pathname } = useLocation(); + const [searchParams, setSearchParams] = useSearchParams(); + useFetchDashboards(); - const { pathname } = useLocation(); - useEffect(() => { + const setDocumentTitle = () => { const defaultTitle = "vmui"; const routeTitle = routerOptions[pathname]?.title; document.title = routeTitle ? `${routeTitle} - ${defaultTitle}` : defaultTitle; - }, [pathname]); + }; + + // for support old links with search params + const redirectSearchToHashParams = () => { + const { search } = window.location; + if (search) { + const query = qs.parse(search, { ignoreQueryPrefix: true }); + Object.entries(query).forEach(([key, value]) => { + searchParams.set(key, value as string); + setSearchParams(searchParams); + }); + window.location.search = ""; + } + window.location.replace(window.location.href.replace(/\/\?#\//, "/#/")); + }; + + useEffect(setDocumentTitle, [pathname]); + useEffect(redirectSearchToHashParams, []); return
diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx index b34cf4af3..cf8ce0e6c 100644 --- a/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx +++ b/app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx @@ -19,9 +19,15 @@ export interface QueryConfiguratorProps { error?: ErrorTypes | string; queryOptions: string[] onHideQuery: (queries: number[]) => void + onRunQuery: () => void } -const QueryConfigurator: FC = ({ error, queryOptions, onHideQuery }) => { +const QueryConfigurator: FC = ({ + error, + queryOptions, + onHideQuery, + onRunQuery +}) => { const { isMobile } = useDeviceDetect(); const { query, queryHistory, autocomplete } = useQueryState(); @@ -45,21 +51,22 @@ const QueryConfigurator: FC = ({ error, queryOptions, on }); }; - const onRunQuery = () => { + const handleRunQuery = () => { updateHistory(); queryDispatch({ type: "SET_QUERY", payload: stateQuery }); timeDispatch({ type: "RUN_QUERY" }); + onRunQuery(); }; - const onAddQuery = () => { + const handleAddQuery = () => { setStateQuery(prev => [...prev, ""]); }; - const onRemoveQuery = (index: number) => { + const handleRemoveQuery = (index: number) => { setStateQuery(prev => prev.filter((q, i) => i !== index)); }; - const onToggleHideQuery = (e: ReactMouseEvent, index: number) => { + const handleToggleHideQuery = (e: ReactMouseEvent, index: number) => { const { ctrlKey, metaKey } = e; const ctrlMetaKey = ctrlKey || metaKey; @@ -95,17 +102,17 @@ const QueryConfigurator: FC = ({ error, queryOptions, on }; const createHandlerRemoveQuery = (i: number) => () => { - onRemoveQuery(i); + handleRemoveQuery(i); setHideQuery(prev => prev.includes(i) ? prev.filter(n => n !== i) : prev.map(n => n > i ? n - 1: n)); }; const createHandlerHideQuery = (i: number) => (e: ReactMouseEvent) => { - onToggleHideQuery(e, i); + handleToggleHideQuery(e, i); }; useEffect(() => { if (prevStateQuery && (stateQuery.length < prevStateQuery.length)) { - onRunQuery(); + handleRunQuery(); } }, [stateQuery]); @@ -137,7 +144,7 @@ const QueryConfigurator: FC = ({ error, queryOptions, on error={error} onArrowUp={createHandlerArrow(-1, i)} onArrowDown={createHandlerArrow(1, i)} - onEnter={onRunQuery} + onEnter={handleRunQuery} onChange={createHandlerChangeQuery(i)} label={`Query ${i + 1}`} disabled={hideQuery.includes(i)} @@ -173,7 +180,7 @@ const QueryConfigurator: FC = ({ error, queryOptions, on {stateQuery.length < MAX_QUERY_FIELDS && ( }