From 35ba2e00fce56946a867bef30902a634dfdfa5ad Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Thu, 31 Oct 2024 18:04:28 +0600 Subject: [PATCH 1/6] fix(frontend): rearranged observability table columns --- .../apps/[app_id]/observability/index.tsx | 80 ++++++++++++------- 1 file changed, 52 insertions(+), 28 deletions(-) diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx index 8259fbd9e8..05e4fe678e 100644 --- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx @@ -67,7 +67,7 @@ const ObservabilityDashboard = ({}: Props) => { const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "") const [searchQuery, setSearchQuery] = useState("") const [traceTabs, setTraceTabs] = useState("tree") - const [editColumns, setEditColumns] = useState(["span_type"]) + const [editColumns, setEditColumns] = useState(["span_type", "key", "usage"]) const [filters, setFilters] = useState([]) const [sort, setSort] = useState({} as SortResult) const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false) @@ -98,27 +98,39 @@ const ObservabilityDashboard = ({}: Props) => { }, }, { - title: "Span type", - key: "span_type", - dataIndex: ["node", "type"], - width: 200, + title: "Name", + dataIndex: ["node", "name"], + key: "name", + width: 180, onHeaderCell: () => ({ - style: {minWidth: 200}, + style: {minWidth: 180}, }), + fixed: "left", render: (_, record) => { - return
{record.node.type}
+ const {icon: Icon} = nodeTypeStyles[record.node.type ?? "default"] + + return !record.parent ? ( + + ) : ( + +
+ +
+ {record.node.name} + + ) }, }, { - title: "Timestamp", - key: "timestamp", - dataIndex: ["time", "start"], + title: "Span type", + key: "span_type", + dataIndex: ["node", "type"], width: 200, onHeaderCell: () => ({ style: {minWidth: 200}, }), render: (_, record) => { - return
{dayjs(record.time.start).format("HH:mm:ss DD MMM YYYY")}
+ return
{record.node.type}
}, }, { @@ -151,16 +163,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", @@ -171,6 +173,16 @@ const ObservabilityDashboard = ({}: Props) => { }), render: (_, record) =>
{formatLatency(record?.metrics?.acc?.duration.total)}
, }, + { + title: "Cost", + key: "cost", + dataIndex: ["metrics", "acc", "costs", "total"], + width: 80, + onHeaderCell: () => ({ + style: {minWidth: 80}, + }), + render: (_, record) =>
{formatCurrency(record.metrics?.acc?.costs?.total)}
, + }, { title: "Usage", key: "usage", @@ -184,17 +196,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) =>
{formatCurrency(record.metrics?.acc?.costs?.total)}
, + render: (_, record) => { + return
{dayjs(record.time.start).format("HH:mm:ss DD MMM YYYY")}
+ }, + }, + { + 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) => @@ -324,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", From 57f59827e0e66dd88da4ba4ff4aafb5a771ba82b Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Thu, 31 Oct 2024 22:02:25 +0600 Subject: [PATCH 2/6] fix(frontend): resolved the changes request --- .../apps/[app_id]/observability/index.tsx | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx index 05e4fe678e..76a20d61b7 100644 --- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx @@ -75,7 +75,7 @@ const ObservabilityDashboard = ({}: Props) => { const [columns, setColumns] = useState>([ { title: "ID", - dataIndex: ["key"], + dataIndex: ["node", "id"], key: "key", width: 200, onHeaderCell: () => ({ @@ -83,18 +83,7 @@ const ObservabilityDashboard = ({}: Props) => { }), fixed: "left", render: (_, record) => { - const {icon: Icon} = nodeTypeStyles[record.node.type ?? "default"] - - return !record.parent ? ( - - ) : ( - -
- -
- {record.node.name} - - ) + return }, }, { @@ -109,9 +98,7 @@ const ObservabilityDashboard = ({}: Props) => { render: (_, record) => { const {icon: Icon} = nodeTypeStyles[record.node.type ?? "default"] - return !record.parent ? ( - - ) : ( + return (
From 6483c000e83226f6f564e333b407d0c702b6097f Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Thu, 31 Oct 2024 22:29:03 +0600 Subject: [PATCH 3/6] fix(frontend): namee column align issue --- agenta-web/src/pages/apps/[app_id]/observability/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx index 76a20d61b7..a80507bd45 100644 --- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx @@ -90,9 +90,9 @@ const ObservabilityDashboard = ({}: Props) => { title: "Name", dataIndex: ["node", "name"], key: "name", - width: 180, + width: 200, onHeaderCell: () => ({ - style: {minWidth: 180}, + style: {minWidth: 200}, }), fixed: "left", render: (_, record) => { From be7125dc993cfb81dc9aea7d700831cb4c0a895f Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Fri, 1 Nov 2024 18:54:24 +0600 Subject: [PATCH 4/6] fix(frontend): max limit column name character --- .../src/pages/apps/[app_id]/observability/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx index 8401e023a6..e0d46b9a3c 100644 --- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx @@ -104,7 +104,15 @@ const ObservabilityDashboard = ({}: Props) => {
- {record.node.name} + + {record.node.name.length >= 12 ? ( + + {record.node.name.slice(1, 12)}... + + ) : ( + record.node.name + )} + ) }, From 399ab0f95cf6de93aff6dec6569f80b688d5e4a4 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Fri, 1 Nov 2024 19:06:27 +0600 Subject: [PATCH 5/6] fix(frontend): max name charecter limit issue --- agenta-web/src/pages/apps/[app_id]/observability/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx index e0d46b9a3c..bf1d9622b2 100644 --- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx @@ -107,7 +107,7 @@ const ObservabilityDashboard = ({}: Props) => { {record.node.name.length >= 12 ? ( - {record.node.name.slice(1, 12)}... + {record.node.name.slice(0, 12)}... ) : ( record.node.name From 63cfa566399e93821f0edfbf7a6b3eecdf8285bc Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Fri, 1 Nov 2024 20:00:30 +0600 Subject: [PATCH 6/6] fix(frontend): enabled ellipsis --- agenta-web/src/pages/apps/[app_id]/observability/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx index bf1d9622b2..2d80d151b9 100644 --- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx @@ -91,6 +91,7 @@ const ObservabilityDashboard = ({}: Props) => { title: "Name", dataIndex: ["node", "name"], key: "name", + ellipsis: true, width: 200, onHeaderCell: () => ({ style: {minWidth: 200}, @@ -105,9 +106,9 @@ const ObservabilityDashboard = ({}: Props) => {
- {record.node.name.length >= 12 ? ( + {record.node.name.length >= 15 ? ( - {record.node.name.slice(0, 12)}... + {record.node.name.slice(0, 15)}... ) : ( record.node.name