Show service name and operation name (#77)

* Don't throw when parent can't be found.

* Show service name and operation name

Author: nojaf

scripts/create-depth-trace.js

@@ -11,6 +11,37 @@ const log = (...xs) => console.info(new Date().toISOString(), ...xs);
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 const rndFloat = (min, max) => Math.random() * (max - min) + min;
 
+const operations = [
+  'Assault Weathertop',
+  'Siege Dol Guldur',
+  'Cross the Misty Mountains',
+  'Guard the Argonath',
+  'Seek the Arkenstone',
+  'Unearth Moria',
+  "Hold Helm's Deep",
+  'Reclaim Erebor',
+  'Venture into Mirkwood',
+  'Pursue the Orc-pack',
+  'Rally the Rohirrim',
+  'Scout the Black Gate',
+  'Defend Minas Tirith',
+  'Bind the Nine',
+  'Forge Andúril',
+  'Break the Siege',
+  'Illuminate the Path',
+  'Whisper to Eagles',
+  'Secure the Shire',
+  'Journey to Mount Doom',
+];
+
+let currentOperationIndex = 0;
+
+export function getOperation() {
+  const operation = operations[currentOperationIndex];
+  currentOperationIndex = (currentOperationIndex + 1) % operations.length; // Cycle through the array
+  return operation;
+}
+
 // ---------- parameters ----------
 const NUM_SERVICES = 3;
 const CHILDREN = 5;
@@ -74,7 +105,7 @@ async function main() {
 
   for (let i = 0; i < NUM_SERVICES; i++) {
     // Use the service tracer to create service spans with proper namespace
-    const serviceSpan = tracers[i].startSpan(`service_${i + 1}`, undefined, rootCtx);
+    const serviceSpan = tracers[i].startSpan(`${getOperation()} (s${i + 1})`, undefined, rootCtx);
     serviceSpan.setAttribute('k8s.container.name', `service-container-${i + 1}`);
 
     // Add 3 events to service span
@@ -92,7 +123,7 @@ async function main() {
 
     for (let j = 0; j < CHILDREN; j++) {
       // Use the same service tracer for child spans to maintain namespace
-      const childSpan = tracers[i].startSpan(`service_${i + 1}_child_${j + 1}`, undefined, serviceCtx);
+      const childSpan = tracers[i].startSpan(`${getOperation()} (s${i + 1} c${j + 1})`, undefined, serviceCtx);
       childSpan.setAttribute('child-span-attribute-xyz', 456);
       childSpan.setAttribute('k8s.container.name', `container-${i + 1}-${j + 1}`);
 

src/components/Span/Span.tsx

@@ -80,13 +80,14 @@ export const Span = (props: SpanNodeProps) => {
           <Expand childStatus={props.childStatus} action={() => props.updateChildStatus(props)}></Expand>
           {props.childCount !== undefined && props.childCount > 0 && (
             <strong
-              style={{ backgroundColor: getColourForValue(props.serviceNamespace || 'default') }}
+              style={{ backgroundColor: getColourForValue(props.serviceName || 'default') }}
               className="block p-[3px] min-w-5 mr-1 rounded font-mono font-thin leading-none text-gray-900 dark:text-black text-center"
             >
               {props.childCount}
             </strong>
           )}
-          <span className="text-gray-900 dark:text-white">{props.name}</span>
+          <span className="text-gray-900 dark:text-white">{props.serviceName}</span>
+          <span className="text-gray-400">{props.name}</span>
         </div>
       </div>
       <div
@@ -101,7 +102,7 @@ export const Span = (props: SpanNodeProps) => {
             style={{
               left: `${offset}%`,
               width: `${Math.max(width, 0.1)}%`,
-              backgroundColor: getColourForValue(props.serviceNamespace || 'default'),
+              backgroundColor: getColourForValue(props.serviceName || 'default'),
             }} // Limitation in tailwind dynamic class construction: Check README.md for more details
             title={`Duration: ${props.endTimeUnixNano - props.startTimeUnixNano}ns`}
           ></div>

src/components/TraceDetail.tsx

@@ -92,7 +92,9 @@ async function extractSpans(
     } else {
       let parentLevel = idToLevelMap.get(parentSpanId);
       if (parentLevel === undefined) {
-        throw new Error(`Parent level not found for ${span.spanID}`);
+        // If traces are linked, there might be a parentId from another trace.
+        // In this case, we consider it a root span.
+        parentLevel = 0;
       }
       idToLevelMap.set(span.spanID, parentLevel + 1);
     }
@@ -110,12 +112,7 @@ async function extractSpans(
       childCount = await fetchChildCountViaAPI(datasourceUid, traceId, span.spanID, startTimeUnixNano, endTimeUnixNano);
     }
 
-    const serviceNamespace =
-      span.attributes?.find((a) => a.key === 'service.namespace')?.value?.stringValue || undefined;
-
-    // Using k8s.container.name as the service name since this is specific to our Kubernetes environment.
-    // Jaeger UI is pulling this info from the process object which is in our case translated to this attribute.
-    const serviceName = span.attributes?.find((a) => a.key === 'k8s.container.name')?.value?.stringValue || undefined;
+    const serviceName = span.attributes?.find((a) => a.key === 'service.name')?.value?.stringValue || undefined;
 
     spans.push({
       spanId: span.spanID,
@@ -126,8 +123,8 @@ async function extractSpans(
       endTimeUnixNano: endTimeUnixNano,
       childStatus: childCount !== undefined && childCount > 0 ? ChildStatus.RemoteChildren : ChildStatus.NoChildren,
       childCount,
-      name: serviceName || span.name || '',
-      serviceNamespace,
+      name: span.name || '',
+      serviceName,
     });
   }
   return spans;
@@ -141,9 +138,7 @@ async function loadMoreSpans(
 ): Promise<SpanInfo[]> {
   const q = `{ trace:id = "${traceId}" && span:parentID = "${
     span.spanId
-  }" } | select (span:parentID, span:name, span.k8s.container.name, resource.service.namespace${
-    supportsChildCount ? ', childCount' : ''
-  })`;
+  }" } | select (span:parentID, span:name, resource.service.name${supportsChildCount ? ', childCount' : ''})`;
   const start = mkUnixEpochFromNanoSeconds(span.startTimeUnixNano);
   // As a precaution, we add 1 second to the end time.
   // This is to avoid any rounding errors where the microseconds or nanoseconds are not included in the end time.
@@ -184,7 +179,7 @@ function TraceDetail({
       queryFn: async () => {
         const start = mkUnixEpochFromMiliseconds(startTimeInMs);
         const end = start + 1;
-        const q = `{ trace:id = "${traceId}" && nestedSetParent = -1 } | select (span:name, span.k8s.container.name, resource.service.namespace${
+        const q = `{ trace:id = "${traceId}" && nestedSetParent = -1 } | select (span:name, resource.service.name${
           supportsChildCount ? ', childCount' : ''
         })`;
         const data = await search(datasourceUid, q, start, end);

src/types.ts

@@ -19,7 +19,7 @@ export type SpanInfo = {
   name: string;
   childStatus: ChildStatus;
   childCount?: number;
-  serviceNamespace?: string;
+  serviceName?: string;
 };
 
 export type TraceViewerHeaderProps = {