vmui: ui logs enhancements (#5312)

* vmui/logs: fix time sorting #5300 * vmui/logs: add base query validation * vmui/logs: add a message for empty results
VictoriaMetrics · Nov 13, 2023 · 695bc7f · 695bc7f
1 parent 22927dc
commit 695bc7f
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 7 deletions.
diff --git 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<T>(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
@@ -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<ErrorTypes | string>("");
+  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<string, string | number> = changedQuery ? { query, page: 1 } : { query };
     setSearchParamsFromKeys(params);
@@ -29,16 +40,24 @@ const ExploreLogs: FC = () => {
     if (query) handleRunQuery();
   }, []);
 
+  useEffect(() => {
+    setQueryError("");
+  }, [query]);
+
   return (
     <div className="vm-explore-logs">
       <ExploreLogsHeader
         query={query}
+        error={queryError}
         onChange={setQuery}
         onRun={handleRunQuery}
       />
       {isLoading && <Spinner />}
       {error && <Alert variant="error">{error}</Alert>}
-      <ExploreLogsBody data={logs}/>
+      <ExploreLogsBody
+        data={logs}
+        loaded={loaded}
+      />
     </div>
   );
 };

diff --git 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: <CodeIcon /> },
 ];
 
-const ExploreLogsBody: FC<ExploreLogBodyProps> = ({ data }) => {
+const ExploreLogsBody: FC<ExploreLogBodyProps> = ({ data, loaded }) => {
   const { isMobile } = useDeviceDetect();
   const { timezone } = useTimeState();
   const { setSearchParamsFromKeys } = useSearchParamsFromObject();
@@ -117,6 +118,11 @@ const ExploreLogsBody: FC<ExploreLogBodyProps> = ({ data }) => {
           "vm-explore-logs-body__table_mobile": isMobile,
         })}
       >
+        {!data.length && (
+          <div className="vm-explore-logs-body__empty">
+            {loaded ? "No logs found" : "Run query to see logs"}
+          </div>
+        )}
         {!!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
@@ -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
@@ -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<ExploreLogHeaderProps> = ({ query, onChange, onRun }) => {
+const ExploreLogsHeader: FC<ExploreLogHeaderProps> = ({ query, error, onChange, onRun }) => {
   const { isMobile } = useDeviceDetect();
 
   return (
@@ -32,6 +33,7 @@ const ExploreLogsHeader: FC<ExploreLogHeaderProps> = ({ query, onChange, onRun }
           onEnter={onRun}
           onChange={onChange}
           label={"Log query"}
+          error={error}
         />
       </div>
       <div className="vm-explore-logs-header-bottom">