fix: node count in transaction graph

includable · Sep 29, 2024 · d4f1bc7 · d4f1bc7
1 parent 287e057
commit d4f1bc7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/packages/dashboard/src/components/stats/transaction-details.tsx b/packages/dashboard/src/components/stats/transaction-details.tsx
@@ -95,8 +95,8 @@ const ServiceIcon = ({ transaction }) => {
 
 const SpanDetails = ({ span }) => {
   if (span.info?.trigger) {
-      return (
-        <>
+    return (
+      <>
         <PayloadPreview
           title="Trigger"
           value={
@@ -106,19 +106,19 @@ const SpanDetails = ({ span }) => {
           }
         />
         {span.error && (
-            <div>
-              <h4 className="text-sm font-medium mb-3 mt-4">Error</h4>
-              <div className="rounded-md border overflow-auto max-h-[30rem]">
-                <pre className="font-mono text-sm p-4 px-5">
-                  <b className="text-red-400">{span.error.message}</b>
-                  <br />
-                  {span.error.stacktrace}
-                </pre>
-              </div>
+          <div>
+            <h4 className="text-sm font-medium mb-3 mt-4">Error</h4>
+            <div className="rounded-md border overflow-auto max-h-[30rem]">
+              <pre className="font-mono text-sm p-4 px-5">
+                <b className="text-red-400">{span.error.message}</b>
+                <br />
+                {span.error.stacktrace}
+              </pre>
             </div>
-          )}
-        </>
-      );
+          </div>
+        )}
+      </>
+    );
   }
 
   if (span.info?.dynamodbMethod) {
@@ -171,6 +171,7 @@ const SpanItem = ({ spans, nested = false }) => {
   );
 
   const hasDuration = duration !== null && transaction.spanType !== "function";
+  const count = spans?.reduce((acc, span) => acc + (span.instances || 1), 0);
 
   return (
     <details
@@ -192,11 +193,7 @@ const SpanItem = ({ spans, nested = false }) => {
         >
           <ServiceIcon transaction={transaction} />
           <span className="block flex-1 truncate w-full">
-            {spans.length > 1
-              ? `(${spans.length}) `
-              : spans[0].instances > 1
-                ? `(${spans[0].instances}) `
-                : ""}
+            {count > 1 ? `(${count}) ` : ""}
             <TransactionTitle transaction={transaction} />
           </span>
         </div>

diff --git a/packages/dashboard/src/components/stats/transaction-graph.tsx b/packages/dashboard/src/components/stats/transaction-graph.tsx
@@ -37,9 +37,9 @@ const GraphNode = ({ data, isConnectable }) => {
         position={Position.Right}
         isConnectable={isConnectable}
       />
-      {data.spans.length > 1 ? (
+      {data.instances > 1 ? (
         <div className="bg-primary text-white p-1 min-w-6 min-h-6 text-center rounded-full absolute -top-2 -right-2">
-          {data.spans.length}
+          {data.instances}
         </div>
       ) : null}
       <div className="absolute top-full pointer-events-none -left-12 -right-12 mt-2 text-foreground truncate text-center text-xs">
@@ -61,6 +61,7 @@ const buildTransactionGraph = (transaction) => {
 
     if (existingGroup) {
       existingGroup.data.spans.push(node.id);
+      existingGroup.data.instances += node.instances;
       mappings[node.id] = existingGroup.data.id;
       return existingGroup.data.id;
     }
@@ -74,6 +75,7 @@ const buildTransactionGraph = (transaction) => {
         connectable: false,
         deletable: false,
         data: {
+          instances: node.instances,
           spans: [node.id],
           ...node,
         },
@@ -111,6 +113,7 @@ const buildTransactionGraph = (transaction) => {
       transaction: item,
       service: getTransactionService(item),
       groupingKey: getGroupingKey(item),
+      instances: item.instances || 1,
     });
 
     if (item.parentId) {
@@ -122,13 +125,14 @@ const buildTransactionGraph = (transaction) => {
       for (const trigger of item.info.trigger) {
         const id = addNode({
           id: trigger.id,
-          type: 'trigger',
+          type: "trigger",
           label: getTransactionLabel({
             service: trigger.triggeredBy || "trigger",
           }),
           groupingKey: trigger.triggeredBy,
           service: trigger.triggeredBy || item.service || item.spanType,
           transaction: item,
+          instances: 1,
         });
         const target = mappings[item.id] || item.id;
         addEdge({ source: id, target });