Fix: Added read-only mode support and optimized navigation logic #9869 (#10370)

### What problem does this PR solve?

Fix: Added read-only mode support and optimized navigation logic #9869

- Added the `isReadonly` property to the parseResult component to
control the enabled state of editing and interactive features
- Added the `navigateToDataFile` navigation method to navigate to the
data file details page
- Refactored the `navigateToDataflowResult` method to use an object
parameter to support more flexible query parameter configuration
- Unified the `var(--accent-primary)` CSS variable format to
`rgb(var(--accent-primary))` to accommodate more styling scenarios
- Extracted the parser initialization logic into a separate hook
(`useParserInit`)

### Type of change

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

web/src/pages/dataset/dataset-overview/hook.ts

@@ -1,3 +1,4 @@
+import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
 import {
   useGetPaginationWithRouter,
   useHandleSearchChange,
@@ -32,6 +33,7 @@ const useFetchFileLogList = () => {
   const [searchParams] = useSearchParams();
   const { searchString, handleInputChange } = useHandleSearchChange();
   const { pagination, setPagination } = useGetPaginationWithRouter();
+  const { filterValue, handleFilterSubmit } = useHandleFilterSubmit();
   const { id } = useParams();
   const [active, setActive] = useState<(typeof LogTabs)[keyof typeof LogTabs]>(
     LogTabs.FILE_LOGS,
@@ -48,6 +50,7 @@ const useFetchFileLogList = () => {
       pagination,
       searchString,
       active,
+      filterValue,
     ],
     placeholderData: (previousData) => {
       if (previousData === undefined) {
@@ -57,13 +60,16 @@ const useFetchFileLogList = () => {
     },
     enabled: true,
     queryFn: async () => {
-      const { data: res = {} } = await fetchFunc({
-        kb_id: knowledgeBaseId,
-        page: pagination.current,
-        page_size: pagination.pageSize,
-        keywords: searchString,
-        // order_by: '',
-      });
+      const { data: res = {} } = await fetchFunc(
+        {
+          kb_id: knowledgeBaseId,
+          page: pagination.current,
+          page_size: pagination.pageSize,
+          keywords: searchString,
+          // order_by: '',
+        },
+        { ...filterValue },
+      );
       return res.data || [];
     },
   });
@@ -82,6 +88,8 @@ const useFetchFileLogList = () => {
     setPagination,
     active,
     setActive,
+    filterValue,
+    handleFilterSubmit,
   };
 };
 

web/src/pages/dataset/dataset-overview/index.tsx

@@ -1,10 +1,12 @@
+import { FilterCollection } from '@/components/list-filter-bar/interface';
 import SvgIcon from '@/components/svg-icon';
 import { useIsDarkTheme } from '@/components/theme-provider';
 import { useFetchDocumentList } from '@/hooks/use-document-request';
-import { parseColorToRGBA } from '@/utils/common-util';
+import { t } from 'i18next';
 import { CircleQuestionMark } from 'lucide-react';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { RunningStatus, RunningStatusMap } from '../dataset/constant';
 import { LogTabs } from './dataset-common';
 import { DatasetFilter } from './dataset-filter';
 import { useFetchFileLogList, useFetchOverviewTital } from './hook';
@@ -16,6 +18,10 @@ interface StatCardProps {
   icon: JSX.Element;
   children?: JSX.Element;
 }
+interface CardFooterProcessProps {
+  success: number;
+  failed: number;
+}
 
 const StatCard: FC<StatCardProps> = ({ title, value, children, icon }) => {
   return (
@@ -35,10 +41,6 @@ const StatCard: FC<StatCardProps> = ({ title, value, children, icon }) => {
   );
 };
 
-interface CardFooterProcessProps {
-  success: number;
-  failed: number;
-}
 const CardFooterProcess: FC<CardFooterProcessProps> = ({
   success = 0,
   failed = 0,
@@ -47,12 +49,7 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
   return (
     <div className="flex items-center flex-col gap-2">
       <div className="w-full flex justify-between gap-4 rounded-lg text-sm font-bold text-text-primary">
-        <div
-          className="flex items-center justify-between  rounded-md w-1/2 p-2"
-          style={{
-            backgroundColor: `${parseColorToRGBA('var(--state-success)', 0.05)}`,
-          }}
-        >
+        <div className="flex items-center justify-between  rounded-md w-1/2 p-2 bg-state-success-5">
           <div className="flex items-center rounded-lg gap-1">
             <div className="w-2 h-2 rounded-full bg-state-success"></div>
             <div>{t('knowledgeDetails.success')}</div>
@@ -70,6 +67,35 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
     </div>
   );
 };
+
+const filters = [
+  {
+    field: 'operation_status',
+    label: t('knowledgeDetails.status'),
+    list: Object.values(RunningStatus).map((value) => {
+      // const value = key as RunningStatus;
+      console.log(value);
+      return {
+        id: value,
+        label: RunningStatusMap[value].label,
+      };
+    }),
+  },
+  {
+    field: 'types',
+    label: t('knowledgeDetails.task'),
+    list: [
+      {
+        id: 'Parse',
+        label: 'Parse',
+      },
+      {
+        id: 'Download',
+        label: 'Download',
+      },
+    ],
+  },
+];
 const FileLogsPage: FC = () => {
   const { t } = useTranslation();
 
@@ -89,12 +115,11 @@ const FileLogsPage: FC = () => {
       failed: 0,
     },
   });
-
   const { data: topData } = useFetchOverviewTital();
   const {
     pagination: { total: fileTotal },
   } = useFetchDocumentList();
-  console.log('topData --> ', topData);
+
   useEffect(() => {
     setTopAllData((prev) => {
       return {
@@ -127,6 +152,8 @@ const FileLogsPage: FC = () => {
     pagination,
     setPagination,
     active,
+    filterValue,
+    handleFilterSubmit,
     setActive,
   } = useFetchFileLogList();
 
@@ -156,6 +183,7 @@ const FileLogsPage: FC = () => {
   };
 
   const isDark = useIsDarkTheme();
+
   return (
     <div className="p-5 min-w-[880px] border-border border rounded-lg mr-5">
       {/* Stats Cards */}
@@ -215,10 +243,13 @@ const FileLogsPage: FC = () => {
 
       {/* Tabs & Search */}
       <DatasetFilter
+        filters={filters as FilterCollection[]}
+        value={filterValue}
         active={active}
         setActive={changeActiveLogs}
         searchString={searchString}
         onSearchChange={handleInputChange}
+        onChange={handleFilterSubmit}
       />
 
       {/* Table */}

web/src/pages/dataset/dataset-overview/overview-table.tsx

@@ -14,6 +14,8 @@ import {
 import { RunningStatusMap } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { PipelineResultSearchParams } from '@/pages/dataflow-result/constant';
+import { NavigateToDataflowResultProps } from '@/pages/dataflow-result/interface';
 import { formatDate, formatSecondsToHumanReadable } from '@/utils/date';
 import {
   ColumnDef,
@@ -41,9 +43,7 @@ export const getFileLogsTableColumns = (
   showLog: (row: Row<IFileLogItem & DocumentLog>, active: LogTabs) => void,
   kowledgeId: string,
   navigateToDataflowResult: (
-    id: string,
-    knowledgeId: string,
-    doc_id?: string,
+    props: NavigateToDataflowResultProps,
   ) => () => void,
 ) => {
   // const { t } = useTranslate('knowledgeDetails');
@@ -165,18 +165,23 @@ export const getFileLogsTableColumns = (
           >
             <Eye />
           </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="p-1"
-            onClick={navigateToDataflowResult(
-              row.original.id,
-              kowledgeId,
-              row.original.document_id,
-            )}
-          >
-            <ClipboardList />
-          </Button>
+          {row.original.pipeline_id && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="p-1"
+              onClick={navigateToDataflowResult({
+                id: row.original.id,
+                [PipelineResultSearchParams.KnowledgeId]: kowledgeId,
+                [PipelineResultSearchParams.DocumentId]:
+                  row.original.document_id,
+                [PipelineResultSearchParams.IsReadOnly]: 'false',
+                [PipelineResultSearchParams.Type]: 'dataflow',
+              })}
+            >
+              <ClipboardList />
+            </Button>
+          )}
         </div>
       ),
     },
@@ -371,6 +376,7 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
       ? Math.ceil(pagination.total / pagination.pageSize)
       : 0,
   });
+
   return (
     <div className="w-full h-[calc(100vh-360px)]">
       <Table rootClassName="max-h-[calc(100vh-380px)]">