Feat: Add suffix field to all operators #9869 (#10195)

### What problem does this PR solve?

Feat: Add suffix field to all operators #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx

@@ -1,3 +1,84 @@
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+} from '@/components/originui/timeline';
+import { Aperture } from 'lucide-react';
+
+const items = [
+  {
+    id: 1,
+    date: '15 minutes ago',
+    title: 'Hannah Kandell',
+    action: 'opened a new issue',
+    description:
+      "I'm having trouble with the new component library. It's not rendering properly.",
+    image: '/avatar-40-01.jpg',
+  },
+  {
+    id: 2,
+    date: '10 minutes ago',
+    title: 'Chris Tompson',
+    action: 'commented on',
+    description:
+      "Hey Hannah, I'm having trouble with the new component library. It's not rendering properly.",
+    image: '/avatar-40-02.jpg',
+  },
+  {
+    id: 3,
+    date: '5 minutes ago',
+    title: 'Emma Davis',
+    action: 'assigned you to',
+    description:
+      'The new component library is not rendering properly. Can you take a look?',
+    image: '/avatar-40-03.jpg',
+  },
+  {
+    id: 4,
+    date: '2 minutes ago',
+    title: 'Alex Morgan',
+    action: 'closed the issue',
+    description: 'The issue has been fixed. Please review the changes.',
+    image: '/avatar-40-05.jpg',
+  },
+];
+
 export function DataflowTimeline() {
-  return <div>xx</div>;
+  return (
+    <Timeline>
+      {items.map((item) => (
+        <TimelineItem
+          key={item.id}
+          step={item.id}
+          className="group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8"
+        >
+          <TimelineHeader>
+            <TimelineSeparator className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-7" />
+            <TimelineTitle className="">
+              {/* {item.title}
+              <span className="text-muted-foreground text-sm font-normal">
+                {item.action}
+              </span> */}
+              <TimelineContent className="text-foreground mt-2 rounded-lg border px-4 py-3">
+                {item.description}
+                <TimelineDate className="mt-1 mb-0">{item.date}</TimelineDate>
+              </TimelineContent>
+            </TimelineTitle>
+            <TimelineIndicator className="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
+              <Aperture className="size-6 rounded-full" />
+            </TimelineIndicator>
+          </TimelineHeader>
+          {/* <TimelineContent className="text-foreground mt-2 rounded-lg border px-4 py-3">
+            {item.description}
+            <TimelineDate className="mt-1 mb-0">{item.date}</TimelineDate>
+          </TimelineContent> */}
+        </TimelineItem>
+      ))}
+    </Timeline>
+  );
 }

web/src/pages/data-flow/log-sheet/index.tsx

@@ -8,6 +8,7 @@ import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
 import { NotebookText } from 'lucide-react';
 import 'react18-json-view/src/style.css';
+import { DataflowTimeline } from './dataflow-timeline';
 
 type LogSheetProps = IModalProps<any>;
 
@@ -18,7 +19,7 @@ export function LogSheet({ hideModal }: LogSheetProps) {
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />
-            Log
+            <DataflowTimeline></DataflowTimeline>
           </SheetTitle>
         </SheetHeader>
         <section className="max-h-[82vh] overflow-auto mt-6"></section>