fix(new-webui): Add support for querying metadata from multiple datasets (fixes #1024).

components/log-viewer-webui/client/package.json

@@ -19,6 +19,8 @@
     "@emotion/styled": "^11.14.0",
     "@mui/joy": "^5.0.0-beta.51",
     "@sinclair/typebox": "^0.34.25",
+    "@tanstack/react-query": "^5.81.4",
+    "@tanstack/react-query-devtools": "^5.81.4",
     "antd": "^5.24.5",
     "axios": "^1.7.9",
     "chart.js": "^4.4.9",

components/log-viewer-webui/client/src/AntdApp.tsx

@@ -1,7 +1,10 @@
 import {RouterProvider} from "react-router";
 
+import {QueryClientProvider} from "@tanstack/react-query";
+import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
 import {ConfigProvider} from "antd";
 
+import queryClient from "./config/queryClient";
 import router from "./router";
 import THEME_CONFIG from "./theme";
 
@@ -15,11 +18,14 @@ import "@ant-design/v5-patch-for-react-19";
  */
 const AntApp = () => {
     return (
-        <ConfigProvider
-            theme={THEME_CONFIG}
-        >
-            <RouterProvider router={router}/>
-        </ConfigProvider>
+        <QueryClientProvider client={queryClient}>
+            <ConfigProvider
+                theme={THEME_CONFIG}
+            >
+                <RouterProvider router={router}/>
+            </ConfigProvider>
+            <ReactQueryDevtools initialIsOpen={false}/>
+        </QueryClientProvider>
     );
 };
 

components/log-viewer-webui/client/src/api/sql.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+
+/**
+ * Query the SQL server with the queryString.
+ *
+ * @param queryString
+ * @return
+ */
+const querySql = async <T>(queryString: string) => {
+    return axios.post<T>("/query/sql", {queryString});
+};
+
+export {querySql};

components/log-viewer-webui/client/src/components/DashboardCard/index.tsx

@@ -13,6 +13,7 @@ interface DashboardCardProps {
     titleColor?: string;
     backgroundColor?: string;
     children?: React.ReactNode;
+    isLoading?: boolean;
 }
 
 /**
@@ -23,13 +24,21 @@ interface DashboardCardProps {
  * @param props.titleColor
  * @param props.backgroundColor
  * @param props.children
+ * @param props.isLoading
  * @return
  */
-const DashboardCard = ({title, titleColor, backgroundColor, children}: DashboardCardProps) => {
+const DashboardCard = ({
+    title,
+    titleColor,
+    backgroundColor,
+    children,
+    isLoading = false,
+}: DashboardCardProps) => {
     return (
         <Card
             className={styles["card"] || ""}
             hoverable={true}
+            loading={isLoading}
             style={{backgroundColor}}
         >
             <div className={styles["cardContent"]}>

components/log-viewer-webui/client/src/components/StatCard/index.tsx

@@ -15,6 +15,7 @@ interface StatCardProps {
     backgroundColor?: string;
     statSize?: string;
     statColor?: string;
+    isLoading?: boolean;
 }
 
 /**
@@ -27,6 +28,7 @@ interface StatCardProps {
  * @param props.backgroundColor
  * @param props.statSize
  * @param props.statColor
+ * @param props.isLoading
  * @return
  */
 const StatCard = ({
@@ -36,9 +38,11 @@ const StatCard = ({
     backgroundColor,
     statSize,
     statColor,
+    isLoading = false,
 }: StatCardProps) => {
     const props: DashboardCardProps = {
         title,
+        isLoading,
         ...(titleColor ?
             {titleColor} :
             {}),

components/log-viewer-webui/client/src/config/queryClient.ts

@@ -0,0 +1,14 @@
+import {QueryClient} from "@tanstack/react-query";
+
+
+const DEFAULT_STALE_TIME_MILLIS = 10_000;
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: DEFAULT_STALE_TIME_MILLIS,
+        },
+    },
+});
+
+export default queryClient;

components/log-viewer-webui/client/src/pages/IngestPage/Details/DetailsCard.tsx

@@ -6,6 +6,7 @@ import StatCard from "../../../components/StatCard";
 interface DetailsCardProps {
     title: string;
     stat: string;
+    isLoading: boolean;
 }
 
 /**
@@ -14,12 +15,14 @@ interface DetailsCardProps {
  * @param props
  * @param props.title
  * @param props.stat
+ * @param props.isLoading
  * @return
  */
-const DetailsCard = ({title, stat}: DetailsCardProps) => {
+const DetailsCard = ({title, stat, isLoading}: DetailsCardProps) => {
     const {token} = theme.useToken();
     return (
         <StatCard
+            isLoading={isLoading}
             stat={stat}
             statColor={token.colorTextSecondary}
             statSize={"1.4rem"}

components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx

@@ -5,18 +5,21 @@ import DetailsCard from "./DetailsCard";
 
 interface FilesProps {
     numFiles: Nullable<number>;
+    isLoading: boolean;
 }
 
 /**
  * Renders the files statistic.
  *
  * @param props
  * @param props.numFiles
+ * @param props.isLoading
  * @return
  */
-const Files = ({numFiles}: FilesProps) => {
+const Files = ({numFiles, isLoading}: FilesProps) => {
     return (
         <DetailsCard
+            isLoading={isLoading}
             stat={(numFiles ?? 0).toString()}
             title={"Files"}/>
     );

components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx

@@ -5,18 +5,21 @@ import DetailsCard from "./DetailsCard";
 
 interface MessagesProps {
     numMessages: Nullable<number>;
+    isLoading: boolean;
 }
 
 /**
  * Renders the messages statistic.
  *
  * @param props
  * @param props.numMessages
+ * @param props.isLoading
  * @return
  */
-const Messages = ({numMessages}: MessagesProps) => {
+const Messages = ({numMessages, isLoading}: MessagesProps) => {
     return (
         <DetailsCard
+            isLoading={isLoading}
             stat={(numMessages ?? 0).toString()}
             title={"Messages"}/>
     );

components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx

@@ -8,6 +8,7 @@ const DATE_FORMAT = "MMMM D, YYYY";
 interface TimeRangeProps {
     beginDate: Dayjs;
     endDate: Dayjs;
+    isLoading: boolean;
 }
 
 /**
@@ -16,9 +17,10 @@ interface TimeRangeProps {
  * @param props
  * @param props.beginDate
  * @param props.endDate
+ * @param props.isLoading
  * @return
  */
-const TimeRange = ({beginDate, endDate}: TimeRangeProps) => {
+const TimeRange = ({beginDate, endDate, isLoading}: TimeRangeProps) => {
     let stat;
     if (beginDate.isValid() && endDate.isValid()) {
         stat = `${beginDate.format(DATE_FORMAT)} - ${endDate.format(DATE_FORMAT)}`;
@@ -28,6 +30,7 @@ const TimeRange = ({beginDate, endDate}: TimeRangeProps) => {
 
     return (
         <DetailsCard
+            isLoading={isLoading}
             stat={stat}
             title={"Time Range"}/>
     );