Merge pull request #2161 from Agenta-AI/fix/observability-table-columns

fix(frontend): rearranged observability table columns

agenta-web/src/pages/apps/[app_id]/observability/index.tsx

@@ -78,29 +78,49 @@ const ObservabilityDashboard = ({}: Props) => {
     const router = useRouter()
     const classes = useStyles()
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
-    const [editColumns, setEditColumns] = useState<string[]>(["span_type"])
+    const [editColumns, setEditColumns] = useState<string[]>(["span_type", "key", "usage"])
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
         {
             title: "ID",
-            dataIndex: ["key"],
+            dataIndex: ["node", "id"],
             key: "key",
             width: 200,
             onHeaderCell: () => ({
                 style: {minWidth: 200},
             }),
             fixed: "left",
+            render: (_, record) => {
+                return <ResultTag value1={`# ${record.node.id.split("-")[0]}`} />
+            },
+        },
+        {
+            title: "Name",
+            dataIndex: ["node", "name"],
+            key: "name",
+            ellipsis: true,
+            width: 200,
+            onHeaderCell: () => ({
+                style: {minWidth: 200},
+            }),
+            fixed: "left",
             render: (_, record) => {
                 const {icon: Icon} = nodeTypeStyles[record.node.type ?? "default"]
 
-                return !record.parent ? (
-                    <ResultTag value1={`# ${record.key.split("-")[0]}`} />
-                ) : (
+                return (
                     <Space align="center" size={4}>
                         <div className="grid place-items-center">
                             <Icon size={16} />
                         </div>
-                        <Typography>{record.node.name}</Typography>
+                        <Typography>
+                            {record.node.name.length >= 15 ? (
+                                <Tooltip title={record.node.name} placement="bottom">
+                                    {record.node.name.slice(0, 15)}...
+                                </Tooltip>
+                            ) : (
+                                record.node.name
+                            )}
+                        </Typography>
                     </Space>
                 )
             },
@@ -117,18 +137,6 @@ const ObservabilityDashboard = ({}: Props) => {
                 return <div>{record.node.type}</div>
             },
         },
-        {
-            title: "Timestamp",
-            key: "timestamp",
-            dataIndex: ["time", "start"],
-            width: 200,
-            onHeaderCell: () => ({
-                style: {minWidth: 200},
-            }),
-            render: (_, record) => {
-                return <div>{dayjs(record.time.start).format("HH:mm:ss DD MMM YYYY")}</div>
-            },
-        },
         {
             title: "Inputs",
             key: "inputs",
@@ -163,16 +171,6 @@ const ObservabilityDashboard = ({}: Props) => {
                 )
             },
         },
-        {
-            title: "Status",
-            key: "status",
-            dataIndex: ["status", "code"],
-            width: 160,
-            onHeaderCell: () => ({
-                style: {minWidth: 160},
-            }),
-            render: (_, record) => StatusRenderer({status: record.status, showMore: true}),
-        },
         {
             title: "Latency",
             key: "latency",
@@ -185,6 +183,16 @@ const ObservabilityDashboard = ({}: Props) => {
                 <div>{formatLatency(record?.metrics?.acc?.duration.total / 1000)}</div>
             ),
         },
+        {
+            title: "Cost",
+            key: "cost",
+            dataIndex: ["metrics", "acc", "costs", "total"],
+            width: 80,
+            onHeaderCell: () => ({
+                style: {minWidth: 80},
+            }),
+            render: (_, record) => <div>{formatCurrency(record.metrics?.acc?.costs?.total)}</div>,
+        },
         {
             title: "Usage",
             key: "usage",
@@ -198,17 +206,28 @@ const ObservabilityDashboard = ({}: Props) => {
             ),
         },
         {
-            title: "Total cost",
-            key: "total_cost",
-            dataIndex: ["metrics", "acc", "costs", "total"],
-            width: 80,
+            title: "Start time",
+            key: "start_time",
+            dataIndex: ["time", "start"],
+            width: 200,
             onHeaderCell: () => ({
-                style: {minWidth: 80},
+                style: {minWidth: 200},
             }),
-            render: (_, record) => <div>{formatCurrency(record.metrics?.acc?.costs?.total)}</div>,
+            render: (_, record) => {
+                return <div>{dayjs(record.time.start).format("HH:mm:ss DD MMM YYYY")}</div>
+            },
+        },
+        {
+            title: "Status",
+            key: "status",
+            dataIndex: ["status", "code"],
+            width: 160,
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => StatusRenderer({status: record.status, showMore: true}),
         },
     ])
-
     const activeTraceIndex = useMemo(
         () =>
             traces?.findIndex((item) =>
@@ -328,6 +347,7 @@ const ObservabilityDashboard = ({}: Props) => {
                 // Helper function to create a trace object
                 const createTraceObject = (trace: any) => ({
                     "Trace ID": trace.key,
+                    Name: trace.node.name,
                     Timestamp: dayjs(trace.time.start).format("HH:mm:ss DD MMM YYYY"),
                     Inputs: trace?.data?.inputs?.topic || "N/A",
                     Outputs: convertToStringOrJson(trace?.data?.outputs) || "N/A",