Fix: Interface integration for the file log page in the overview #9869 (#10222)

### What problem does this PR solve?

Fix: Interface integration for the file log page in the overview

- Support for selecting data pipeline parsing types
- Use the RunningStatus enumeration instead of numeric status
- Obtain and display data pipeline file log details
- Replace existing mock data with new interface data on the page
- Link the file log list to the real data source
- Optimize log information display
- Fixed a typo in the field name "pipeline_id" → "pipeline_id"

### Type of change

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

web/src/components/chunk-method-dialog/index.tsx

@@ -18,6 +18,10 @@ import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-reques
 import { IModalProps } from '@/interfaces/common';
 import { IParserConfig } from '@/interfaces/database/document';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
+import {
+  ChunkMethodItem,
+  ParseTypeItem,
+} from '@/pages/dataset/dataset-setting/configuration/common-item';
 import { zodResolver } from '@hookform/resolvers/zod';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
@@ -30,6 +34,7 @@ import {
   AutoKeywordsFormField,
   AutoQuestionsFormField,
 } from '../auto-keywords-form-field';
+import { DataFlowSelect } from '../data-pipeline-select';
 import { DelimiterFormField } from '../delimiter-form-field';
 import { EntityTypesFormField } from '../entity-types-form-field';
 import { ExcelToHtmlFormField } from '../excel-to-html-form-field';
@@ -45,7 +50,6 @@ import RaptorFormFields, {
 } from '../parse-configuration/raptor-form-fields';
 import { ButtonLoading } from '../ui/button';
 import { Input } from '../ui/input';
-import { RAGFlowSelect } from '../ui/select';
 import { DynamicPageRange } from './dynamic-page-range';
 import { useFetchParserListOnMount, useShowAutoKeywords } from './hooks';
 import {
@@ -62,6 +66,7 @@ interface IProps
   }> {
   loading: boolean;
   parserId: string;
+  pipelineId?: string;
   parserConfig: IParserConfig;
   documentExtension: string;
   documentId: string;
@@ -80,6 +85,7 @@ export function ChunkMethodDialog({
   hideModal,
   onOk,
   parserId,
+  pipelineId,
   documentExtension,
   visible,
   parserConfig,
@@ -100,12 +106,14 @@ export function ChunkMethodDialog({
   const fillDefaultParserValue = useFillDefaultValueOnMount();
 
   const FormSchema = z.object({
+    parseType: z.number(),
     parser_id: z
       .string()
       .min(1, {
         message: t('common.pleaseSelect'),
       })
       .trim(),
+    pipeline_id: z.string().optional(),
     parser_config: z.object({
       task_page_size: z.coerce.number().optional(),
       layout_recognize: z.string().optional(),
@@ -138,7 +146,8 @@ export function ChunkMethodDialog({
     resolver: zodResolver(FormSchema),
     defaultValues: {
       parser_id: parserId,
-
+      pipeline_id: pipelineId,
+      parseType: pipelineId ? 2 : 1,
       parser_config: defaultParserValues,
     },
   });
@@ -201,6 +210,8 @@ export function ChunkMethodDialog({
         parserConfig?.pages?.map((x) => ({ from: x[0], to: x[1] })) ?? [];
       form.reset({
         parser_id: parserId,
+        pipeline_id: pipelineId,
+        parseType: pipelineId ? 2 : 1,
         parser_config: fillDefaultParserValue({
           pages: pages.length > 0 ? pages : [{ from: 1, to: 1024 }],
           ...omit(parserConfig, 'pages'),
@@ -223,7 +234,11 @@ export function ChunkMethodDialog({
     useGraphRag,
     visible,
   ]);
-
+  const parseType = useWatch({
+    control: form.control,
+    name: 'parseType',
+    defaultValue: 1,
+  });
   return (
     <Dialog open onOpenChange={hideModal}>
       <DialogContent className="max-w-[50vw]">
@@ -237,7 +252,17 @@ export function ChunkMethodDialog({
             id={FormId}
           >
             <FormContainer>
-              <FormField
+              <ParseTypeItem />
+              {parseType === 1 && <ChunkMethodItem></ChunkMethodItem>}
+              {parseType === 2 && (
+                <DataFlowSelect
+                  isMult={false}
+                  // toDataPipeline={navigateToAgents}
+                  formFieldName="pipeline_id"
+                />
+              )}
+
+              {/* <FormField
                 control={form.control}
                 name="parser_id"
                 render={({ field }) => (
@@ -252,9 +277,11 @@ export function ChunkMethodDialog({
                     <FormMessage />
                   </FormItem>
                 )}
-              />
-              {showPages && <DynamicPageRange></DynamicPageRange>}
-              {showPages && layoutRecognize && (
+              /> */}
+              {showPages && parseType === 1 && (
+                <DynamicPageRange></DynamicPageRange>
+              )}
+              {showPages && parseType === 1 && layoutRecognize && (
                 <FormField
                   control={form.control}
                   name="parser_config.task_page_size"
@@ -279,50 +306,60 @@ export function ChunkMethodDialog({
                 />
               )}
             </FormContainer>
-            <FormContainer
-              show={showOne || showMaxTokenNumber}
-              className="space-y-3"
-            >
-              {showOne && <LayoutRecognizeFormField></LayoutRecognizeFormField>}
-              {showMaxTokenNumber && (
-                <>
-                  <MaxTokenNumberFormField
-                    max={
-                      selectedTag === DocumentParserType.KnowledgeGraph
-                        ? 8192 * 2
-                        : 2048
-                    }
-                  ></MaxTokenNumberFormField>
-                  <DelimiterFormField></DelimiterFormField>
-                </>
-              )}
-            </FormContainer>
-            <FormContainer
-              show={showAutoKeywords(selectedTag) || showExcelToHtml}
-              className="space-y-3"
-            >
-              {showAutoKeywords(selectedTag) && (
-                <>
-                  <AutoKeywordsFormField></AutoKeywordsFormField>
-                  <AutoQuestionsFormField></AutoQuestionsFormField>
-                </>
-              )}
-              {showExcelToHtml && <ExcelToHtmlFormField></ExcelToHtmlFormField>}
-            </FormContainer>
-            {showRaptorParseConfiguration(
-              selectedTag as DocumentParserType,
-            ) && (
-              <FormContainer>
-                <RaptorFormFields></RaptorFormFields>
-              </FormContainer>
-            )}
-            {showGraphRagItems(selectedTag as DocumentParserType) &&
-              useGraphRag && (
-                <FormContainer>
-                  <UseGraphRagFormField></UseGraphRagFormField>
+            {parseType === 1 && (
+              <>
+                <FormContainer
+                  show={showOne || showMaxTokenNumber}
+                  className="space-y-3"
+                >
+                  {showOne && (
+                    <LayoutRecognizeFormField></LayoutRecognizeFormField>
+                  )}
+                  {showMaxTokenNumber && (
+                    <>
+                      <MaxTokenNumberFormField
+                        max={
+                          selectedTag === DocumentParserType.KnowledgeGraph
+                            ? 8192 * 2
+                            : 2048
+                        }
+                      ></MaxTokenNumberFormField>
+                      <DelimiterFormField></DelimiterFormField>
+                    </>
+                  )}
                 </FormContainer>
-              )}
-            {showEntityTypes && <EntityTypesFormField></EntityTypesFormField>}
+                <FormContainer
+                  show={showAutoKeywords(selectedTag) || showExcelToHtml}
+                  className="space-y-3"
+                >
+                  {showAutoKeywords(selectedTag) && (
+                    <>
+                      <AutoKeywordsFormField></AutoKeywordsFormField>
+                      <AutoQuestionsFormField></AutoQuestionsFormField>
+                    </>
+                  )}
+                  {showExcelToHtml && (
+                    <ExcelToHtmlFormField></ExcelToHtmlFormField>
+                  )}
+                </FormContainer>
+                {showRaptorParseConfiguration(
+                  selectedTag as DocumentParserType,
+                ) && (
+                  <FormContainer>
+                    <RaptorFormFields></RaptorFormFields>
+                  </FormContainer>
+                )}
+                {showGraphRagItems(selectedTag as DocumentParserType) &&
+                  useGraphRag && (
+                    <FormContainer>
+                      <UseGraphRagFormField></UseGraphRagFormField>
+                    </FormContainer>
+                  )}
+                {showEntityTypes && (
+                  <EntityTypesFormField></EntityTypesFormField>
+                )}
+              </>
+            )}
           </form>
         </Form>
         <DialogFooter>

web/src/components/data-pipeline-select/index.tsx

@@ -52,13 +52,15 @@ export function DataFlowSelect(props: IProps) {
               >
                 {t('dataFlow')}
               </FormLabel>
-              <div
-                className="text-sm flex text-text-primary cursor-pointer"
-                onClick={toDataPipLine}
-              >
-                {t('buildItFromScratch')}
-                <ArrowUpRight size={14} />
-              </div>
+              {toDataPipeline && (
+                <div
+                  className="text-sm flex text-text-primary cursor-pointer"
+                  onClick={toDataPipLine}
+                >
+                  {t('buildItFromScratch')}
+                  <ArrowUpRight size={14} />
+                </div>
+              )}
             </div>
 
             <div className="text-muted-foreground">

web/src/components/file-status-badge.tsx

@@ -1,11 +1,12 @@
 // src/pages/dataset/file-logs/file-status-badge.tsx
+import { RunningStatus } from '@/pages/dataset/dataset/constant';
 import { FC } from 'react';
 /**
  * params: status: 0 not run yet 1 running, 2 cancel, 3 success, 4 fail
  */
 interface StatusBadgeProps {
   // status: 'Success' | 'Failed' | 'Running' | 'Pending';
-  status: 0 | 1 | 2 | 3 | 4;
+  status: RunningStatus;
   name?: string;
 }
 
@@ -16,13 +17,13 @@ const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name }) => {
     // #00beb4  → rgb(0, 190, 180)   // accent-primary
     // #faad14  → rgb(250, 173, 20)  // state-warning
     switch (status) {
-      case 3:
+      case RunningStatus.DONE:
         return `bg-[rgba(59,160,92,0.1)] text-state-success`;
-      case 4:
+      case RunningStatus.FAIL:
         return `bg-[rgba(216,73,75,0.1)] text-state-error`;
-      case 1:
+      case RunningStatus.RUNNING:
         return `bg-[rgba(0,190,180,0.1)] text-accent-primary`;
-      case 0:
+      case RunningStatus.UNSTART:
         return `bg-[rgba(250,173,20,0.1)] text-state-warning`;
       default:
         return 'bg-gray-500/10 text-white';
@@ -35,13 +36,13 @@ const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name }) => {
     // #00beb4  → rgb(0, 190, 180)   // accent-primary
     // #faad14  → rgb(250, 173, 20)  // state-warning
     switch (status) {
-      case 3:
+      case RunningStatus.DONE:
         return `bg-[rgba(59,160,92,1)] text-state-success`;
-      case 4:
+      case RunningStatus.FAIL:
         return `bg-[rgba(216,73,75,1)] text-state-error`;
-      case 1:
+      case RunningStatus.RUNNING:
         return `bg-[rgba(0,190,180,1)] text-accent-primary`;
-      case 0:
+      case RunningStatus.UNSTART:
         return `bg-[rgba(250,173,20,1)] text-state-warning`;
       default:
         return 'bg-gray-500/10 text-white';