Fix: Added some prompts and polling functionality to retrieve data source logs. #10703 (#11103)

### What problem does this PR solve?

Fix: Added some prompts and polling functionality to retrieve data
source logs.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx

@@ -66,7 +66,7 @@ const SourceDetailPage = () => {
         render: (fieldProps: FormFieldConfig) => (
           <div className="flex items-center  gap-1 w-full relative">
             <Input {...fieldProps} type={FormFieldType.Number} />
-            <span className="absolute right-0 -translate-x-12 text-text-secondary italic ">
+            <span className="absolute right-0 -translate-x-[58px] text-text-secondary italic ">
               minutes
             </span>
             <button
@@ -96,7 +96,7 @@ const SourceDetailPage = () => {
           return (
             <div className="flex items-center  gap-1 w-full relative">
               <Input {...fieldProps} type={FormFieldType.Number} />
-              <span className="absolute right-0 -translate-x-3 text-text-secondary italic ">
+              <span className="absolute right-0 -translate-x-6 text-text-secondary italic ">
                 hours
               </span>
             </div>
@@ -111,7 +111,7 @@ const SourceDetailPage = () => {
         render: (fieldProps: FormFieldConfig) => (
           <div className="flex items-center  gap-1 w-full relative">
             <Input {...fieldProps} type={FormFieldType.Number} />
-            <span className="absolute right-0 -translate-x-3 text-text-secondary italic ">
+            <span className="absolute right-0 -translate-x-6 text-text-secondary italic ">
               seconds
             </span>
           </div>
@@ -183,7 +183,7 @@ const SourceDetailPage = () => {
           </div>
           <section className="flex flex-col gap-2 mt-6">
             <div className="text-2xl text-text-primary">{t('setting.log')}</div>
-            <DataSourceLogsTable />
+            <DataSourceLogsTable refresh_freq={detail?.refresh_freq || false} />
           </section>
         </CardContent>
       </Card>

web/src/pages/user-setting/data-source/data-source-detail-page/log-table.tsx

@@ -130,9 +130,14 @@ const columns = ({
 //   pageSize: 10,
 //   total: 0,
 // };
-export const DataSourceLogsTable = () => {
+export const DataSourceLogsTable = ({
+  refresh_freq,
+}: {
+  refresh_freq: number | false;
+}) => {
   // const [pagination, setPagination] = useState(paginationInit);
-  const { data, pagination, setPagination } = useLogListDataSource();
+  const { data, pagination, setPagination } =
+    useLogListDataSource(refresh_freq);
   const navigate = useNavigate();
   const currentPagination = useMemo(
     () => ({

web/src/pages/user-setting/data-source/hooks.ts

@@ -2,6 +2,7 @@ import message from '@/components/ui/message';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
 import dataSourceService, {
+  dataSourceRebuild,
   dataSourceResume,
   deleteDataSource,
   featchDataSourceDetail,
@@ -10,7 +11,7 @@ import dataSourceService, {
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { t } from 'i18next';
 import { useCallback, useMemo, useState } from 'react';
-import { useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'umi';
 import { DataSourceInfo, DataSourceKey } from './contant';
 import { IDataSorceInfo, IDataSource, IDataSourceBase } from './interface';
 
@@ -109,14 +110,15 @@ export const useAddDataSource = () => {
   };
 };
 
-export const useLogListDataSource = () => {
+export const useLogListDataSource = (refresh_freq: number | false) => {
   const { pagination, setPagination } = useGetPaginationWithRouter();
   const [currentQueryParameters] = useSearchParams();
   const id = currentQueryParameters.get('id');
 
   const { data, isFetching } = useQuery<{ logs: IDataSource[]; total: number }>(
     {
-      queryKey: ['data-source-logs', id, pagination],
+      queryKey: ['data-source-logs', id, pagination, refresh_freq],
+      refetchInterval: refresh_freq ? refresh_freq * 60 * 1000 : false,
       queryFn: async () => {
         const { data } = await getDataSourceLogs(id as string, {
           page_size: pagination.pageSize,
@@ -186,3 +188,22 @@ export const useDataSourceResume = () => {
   );
   return { handleResume };
 };
+
+export const useDataSourceRebuild = () => {
+  const { id } = useParams();
+  // const [currentQueryParameters] = useSearchParams();
+  // const id = currentQueryParameters.get('id');
+  const handleRebuild = useCallback(
+    async (param: { source_id: string }) => {
+      const { data } = await dataSourceRebuild(param.source_id as string, {
+        kb_id: id as string,
+      });
+      if (data.code === 0) {
+        // queryClient.invalidateQueries({ queryKey: ['data-source-detail', id] });
+        message.success(t(`message.operated`));
+      }
+    },
+    [id],
+  );
+  return { handleRebuild };
+};

web/src/pages/user-setting/data-source/index.tsx

@@ -58,7 +58,17 @@ const DataSource = () => {
     icon,
   }: IDataSorceInfo) => {
     return (
-      <div className="p-[10px] border border-border-button rounded-lg relative group hover:bg-bg-card">
+      <div
+        className="p-[10px] border border-border-button rounded-lg relative group hover:bg-bg-card"
+        onClick={() =>
+          showAddingModal({
+            id,
+            name,
+            description,
+            icon,
+          })
+        }
+      >
         <div className="flex gap-2">
           <div className="w-6 h-6">{icon}</div>
           <div className="flex flex-1 flex-col items-start gap-2">
@@ -67,17 +77,7 @@ const DataSource = () => {
           </div>
         </div>
         <div className=" absolute top-2 right-2">
-          <Button
-            onClick={() =>
-              showAddingModal({
-                id,
-                name,
-                description,
-                icon,
-              })
-            }
-            className=" rounded-md px-1 text-bg-base gap-1 bg-text-primary text-xs py-0 h-6 items-center hidden group-hover:flex"
-          >
+          <Button className=" rounded-md px-1 text-bg-base gap-1 bg-text-primary text-xs py-0 h-6 items-center hidden group-hover:flex">
             <Plus size={12} />
             {t('setting.add')}
           </Button>