diff --git a/app/vmui/packages/vmui/src/App.tsx b/app/vmui/packages/vmui/src/App.tsx index 9736b0e9d..a5087f34d 100644 --- a/app/vmui/packages/vmui/src/App.tsx +++ b/app/vmui/packages/vmui/src/App.tsx @@ -14,7 +14,7 @@ import PreviewIcons from "./components/Main/Icons/PreviewIcons"; import WithTemplate from "./pages/WithTemplate"; import Relabel from "./pages/Relabel"; import ExploreLogs from "./pages/ExploreLogs/ExploreLogs"; -import from "./pages/ActiveQueries"; +import ActiveQueries from "./pages/ActiveQueries"; const App: FC = () => { const [loadedTheme, setLoadedTheme] = useState(false); diff --git a/app/vmui/packages/vmui/src/pages/ActiveQueries/index.tsx b/app/vmui/packages/vmui/src/pages/ActiveQueries/index.tsx index fc6ebed81..6fd581ca7 100644 --- a/app/vmui/packages/vmui/src/pages/ActiveQueries/index.tsx +++ b/app/vmui/packages/vmui/src/pages/ActiveQueries/index.tsx @@ -11,6 +11,8 @@ import classNames from "classnames"; import Button from "../../components/Main/Button/Button"; import { RefreshIcon } from "../../components/Main/Icons"; import "./style.scss"; +import { DATE_TIME_FORMAT } from "../../constants/date"; +import { roundStep } from "../../utils/time"; const ActiveQueries: FC = () => { const { isMobile } = useDeviceDetect(); @@ -18,29 +20,31 @@ const ActiveQueries: FC = () => { const { data, lastUpdated, isLoading, error, fetchData } = useFetchActiveQueries(); - const activeQueries = useMemo(() => data.map(({ duration, ...item }: ActiveQueriesType) => ({ - duration, - data: JSON.stringify(item, null, 2), - from: dayjs(item.start).tz().format("MMM DD, YYYY \nHH:mm:ss.SSS"), - to: dayjs(item.end).tz().format("MMM DD, YYYY \nHH:mm:ss.SSS"), - ...item, - })), [data, timezone]); + const activeQueries = useMemo(() => data.map((item: ActiveQueriesType) => { + const from = dayjs(item.start).tz().format(DATE_TIME_FORMAT); + const to = dayjs(item.end).tz().format(DATE_TIME_FORMAT); + return { + duration: item.duration, + remote_addr: item.remote_addr, + query: item.query, + args: `${from} to ${to}, step=${roundStep(item.step)}`, + data: JSON.stringify(item, null, 2), + } as ActiveQueriesType; + }), [data, timezone]); const columns = useMemo(() => { if (!activeQueries?.length) return []; - const hideColumns = ["end", "start", "data"]; - const keys = new Set(); - for (const item of activeQueries) { - for (const key in item) { - keys.add(key); - } - } - return Array.from(keys) - .filter((col) => !hideColumns.includes(col)) - .map((key) => ({ - key: key as keyof ActiveQueriesType, - title: key, - })); + const keys = Object.keys(activeQueries[0]) as (keyof ActiveQueriesType)[]; + + const titles: Partial> = { + remote_addr: "client address", + }; + const hideColumns = ["data"]; + + return keys.filter((col) => !hideColumns.includes(col)).map((key) => ({ + key: key, + title: titles[key] || key, + })); }, [activeQueries]); const handleRefresh = async () => { @@ -76,7 +80,7 @@ const ActiveQueries: FC = () => { diff --git a/app/vmui/packages/vmui/src/types/index.ts b/app/vmui/packages/vmui/src/types/index.ts index c199808a9..33235ea1c 100644 --- a/app/vmui/packages/vmui/src/types/index.ts +++ b/app/vmui/packages/vmui/src/types/index.ts @@ -147,7 +147,6 @@ export interface ActiveQueriesType { query: string; remote_addr: string; step: number; - from?: string; - to?: string; + args?: string; data?: string; } diff --git a/app/vmui/packages/vmui/src/utils/time.ts b/app/vmui/packages/vmui/src/utils/time.ts index 3f4c1c59d..fb964e574 100644 --- a/app/vmui/packages/vmui/src/utils/time.ts +++ b/app/vmui/packages/vmui/src/utils/time.ts @@ -30,7 +30,7 @@ const shortDurations = supportedDurations.map(d => d.short); export const roundToMilliseconds = (num: number): number => Math.round(num*1000)/1000; -const roundStep = (step: number) => { +export const roundStep = (step: number) => { let result = roundToMilliseconds(step); const integerStep = Math.round(step);