diff --git a/app/vmui/packages/vmui/src/components/Table/helpers.ts b/app/vmui/packages/vmui/src/components/Table/helpers.ts index dd371f961a42..b0fa4426e863 100644 --- a/app/vmui/packages/vmui/src/components/Table/helpers.ts +++ b/app/vmui/packages/vmui/src/components/Table/helpers.ts @@ -1,10 +1,17 @@ import { Order } from "../../pages/CardinalityPanel/Table/types"; +import dayjs from "dayjs"; + +const dateColumns = ["date", "timestamp", "time"]; export function descendingComparator(a: T, b: T, orderBy: keyof T) { - if (b[orderBy] < a[orderBy]) { + const valueA = a[orderBy]; + const valueB = b[orderBy]; + const parsedValueA = dateColumns.includes(`${orderBy}`) ? dayjs(`${valueA}`).unix() : valueA; + const parsedValueB = dateColumns.includes(`${orderBy}`) ? dayjs(`${valueB}`).unix() : valueB; + if (parsedValueB < parsedValueA) { return -1; } - if (b[orderBy] > a[orderBy]) { + if (parsedValueB > parsedValueA) { return 1; } return 0; diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx index d371a0cab244..e177a121797c 100644 --- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx +++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx @@ -9,6 +9,8 @@ import Alert from "../../components/Main/Alert/Alert"; import ExploreLogsHeader from "./ExploreLogsHeader/ExploreLogsHeader"; import "./style.scss"; import usePrevious from "../../hooks/usePrevious"; +import { ErrorTypes } from "../../types"; +import { useState } from "react"; const ExploreLogs: FC = () => { const { serverUrl } = useAppState(); @@ -17,9 +19,18 @@ const ExploreLogs: FC = () => { const [query, setQuery] = useStateSearchParams("", "query"); const prevQuery = usePrevious(query); const { logs, isLoading, error, fetchLogs } = useFetchLogs(serverUrl, query); + const [queryError, setQueryError] = useState(""); + const [loaded, isLoaded] = useState(false); const handleRunQuery = () => { - fetchLogs(); + if (!query) { + setQueryError(ErrorTypes.validQuery); + return; + } + + fetchLogs().then(() => { + isLoaded(true); + }); const changedQuery = prevQuery && query !== prevQuery; const params: Record = changedQuery ? { query, page: 1 } : { query }; setSearchParamsFromKeys(params); @@ -29,16 +40,24 @@ const ExploreLogs: FC = () => { if (query) handleRunQuery(); }, []); + useEffect(() => { + setQueryError(""); + }, [query]); + return (
{isLoading && } {error && {error}} - +
); }; diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/ExploreLogsBody.tsx b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/ExploreLogsBody.tsx index ff33d65f7608..929677c43395 100644 --- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/ExploreLogsBody.tsx +++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/ExploreLogsBody.tsx @@ -18,7 +18,8 @@ import TableLogs from "./TableLogs"; import GroupLogs from "./GroupLogs"; export interface ExploreLogBodyProps { - data: Logs[] + data: Logs[]; + loaded?: boolean; } enum DisplayType { @@ -33,7 +34,7 @@ const tabs = [ { label: "JSON", value: DisplayType.json, icon: }, ]; -const ExploreLogsBody: FC = ({ data }) => { +const ExploreLogsBody: FC = ({ data, loaded }) => { const { isMobile } = useDeviceDetect(); const { timezone } = useTimeState(); const { setSearchParamsFromKeys } = useSearchParamsFromObject(); @@ -117,6 +118,11 @@ const ExploreLogsBody: FC = ({ data }) => { "vm-explore-logs-body__table_mobile": isMobile, })} > + {!data.length && ( +
+ {loaded ? "No logs found" : "Run query to see logs"} +
+ )} {!!data.length && ( <> {activeTab === DisplayType.table && ( diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/style.scss b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/style.scss index 9116c17234d0..2d27780ab3e6 100644 --- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/style.scss +++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/style.scss @@ -15,6 +15,15 @@ } } + &__empty { + display: flex; + align-items: center; + justify-content: center; + min-height: 120px; + color: $color-text-disabled; + text-align: center; + } + &__table { padding-top: $padding-medium; width: calc(100vw - ($padding-medium * 4) - var(--scrollbar-width)); diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsHeader/ExploreLogsHeader.tsx b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsHeader/ExploreLogsHeader.tsx index 0d51f1224eca..d46cf28189f2 100644 --- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsHeader/ExploreLogsHeader.tsx +++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsHeader/ExploreLogsHeader.tsx @@ -8,11 +8,12 @@ import QueryEditor from "../../../components/Configurators/QueryEditor/QueryEdit export interface ExploreLogHeaderProps { query: string; + error?: string; onChange: (val: string) => void; onRun: () => void; } -const ExploreLogsHeader: FC = ({ query, onChange, onRun }) => { +const ExploreLogsHeader: FC = ({ query, error, onChange, onRun }) => { const { isMobile } = useDeviceDetect(); return ( @@ -32,6 +33,7 @@ const ExploreLogsHeader: FC = ({ query, onChange, onRun } onEnter={onRun} onChange={onChange} label={"Log query"} + error={error} />