improve trace detail view header

Author: n1ru4l

packages/web/app/src/components/ui/skeleton.tsx

@@ -1,7 +1,12 @@
 import { cn } from '@/lib/utils';
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('bg-primary/10 animate-pulse rounded-md', className)} {...props} />;
+  return (
+    <div
+      className={cn('bg-primary/10 animate-pulse rounded-md align-middle', className)}
+      {...props}
+    />
+  );
 }
 
 export { Skeleton };

packages/web/app/src/index.css

@@ -52,9 +52,6 @@
 
     --chart-1: 173 58% 39%;
     --chart-2: 12 76% 61%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
   }
 
   .dark {
@@ -102,9 +99,6 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
 
     --chart-1: 220 70% 50%;
-    --chart-5: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
     --chart-2: 340 75% 55%;
   }
 }
@@ -114,6 +108,10 @@
     @apply border-border;
   }
 
+  html {
+    @apply bg-[#030711];
+  }
+
   body {
     @apply text-foreground bg-[#030711];
     font-feature-settings:

packages/web/app/src/pages/target-trace.tsx

@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { formatDate } from 'date-fns';
 import {
   AlertTriangle,
   ArrowUp,
@@ -994,6 +995,31 @@ export function TraceSheet(props: TraceSheetProps) {
   );
 }
 
+const TargetInsightsNewPageContent_TraceQuery = graphql(/* GraphQL */ `
+  query TargetInsightsNewPageContent_TraceQuery(
+    $targetSelector: TargetSelectorInput!
+    $traceId: ID!
+  ) {
+    target(reference: { bySelector: $targetSelector }) {
+      id
+      trace(traceId: $traceId) {
+        ...TraceSheet_TraceFragment
+        id
+        operationName
+        duration
+        success
+        timestamp
+        spans {
+          id
+          name
+          parentId
+          ...SpanFragment
+        }
+      }
+    }
+  }
+`);
+
 function TargetInsightsNewPageContent(props: {
   organizationSlug: string;
   projectSlug: string;
@@ -1003,7 +1029,7 @@ function TargetInsightsNewPageContent(props: {
   activeSpanTab: string | null;
 }) {
   const [result] = useQuery({
-    query: TargetTraceQuery,
+    query: TargetInsightsNewPageContent_TraceQuery,
     variables: {
       targetSelector: {
         organizationSlug: props.organizationSlug,
@@ -1014,6 +1040,8 @@ function TargetInsightsNewPageContent(props: {
     },
   });
 
+  const trace = result.data?.target?.trace;
+
   return (
     <div className="flex h-full flex-col space-y-4 pt-6">
       <Meta title={`Trace ${props.traceId}`} />
@@ -1031,30 +1059,65 @@ function TargetInsightsNewPageContent(props: {
               Traces
             </Link>{' '}
             <span className="inline-block px-2 italic text-gray-500">/</span>{' '}
-            {result.data?.target?.trace ? (
-              result.data.target.trace.id
+            {trace ? (
+              <>
+                {trace.operationName ?? <span className="text-gray-400">{'<unknown>'}</span>}
+                <span className="text-muted-foreground ml-2 font-mono font-normal">
+                  {trace.id.substring(0, 4)}
+                </span>
+              </>
             ) : (
               <Skeleton className="inline-block h-5 w-[150px]" />
             )}
           </span>
         }
         description={
           <>
-            <CardDescription>Insights into the requests made to your GraphQL API.</CardDescription>
+            <CardDescription>
+              Trace ID:{' '}
+              {trace?.id ? (
+                <>
+                  <span className="font-mono"> {trace.id}</span>
+                  <CopyIconButton value={trace.id} label="Copy Trace ID" />
+                </>
+              ) : (
+                <Skeleton className="inline-block h-4 w-[200px]" />
+              )}
+            </CardDescription>
+            {trace && (
+              <div className="mt-2 flex items-center gap-3 text-xs">
+                <div className="flex items-center gap-1">
+                  <Clock className="size-3 text-gray-400" />
+                  <span className="text-gray-300">{formatNanoseconds(BigInt(trace.duration))}</span>
+                </div>
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    'rounded-sm border-0 px-1 font-medium uppercase',
+                    trace.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
+                  )}
+                >
+                  {trace.success ? 'Ok' : 'Error'}
+                </Badge>
+                <span className="font-mono uppercase text-gray-300">
+                  {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
+                </span>
+              </div>
+            )}
           </>
         }
       />
-      {result.data?.target?.trace && (
+      {trace && (
         <TraceSheet
           organizationSlug={props.organizationSlug}
           projectSlug={props.projectSlug}
           targetSlug={props.targetSlug}
-          trace={result.data.target.trace}
+          trace={trace}
           activeSpanId={props.activeSpanId}
           activeSpanTab={props.activeSpanTab}
         />
       )}
-      {!result.data?.target?.trace && !result.fetching && (
+      {!trace && !result.fetching && (
         <>
           <Meta title="Trace Not found" />
           <NotFoundContent heading="Trace not found." subheading="This trace does not exist." />
@@ -1095,24 +1158,6 @@ export function TargetTracePage(props: {
   );
 }
 
-const TargetTraceQuery = graphql(/* GraphQL */ `
-  query TargetTraceQuery($targetSelector: TargetSelectorInput!, $traceId: ID!) {
-    target(reference: { bySelector: $targetSelector }) {
-      id
-      trace(traceId: $traceId) {
-        ...TraceSheet_TraceFragment
-        id
-        spans {
-          id
-          name
-          parentId
-          ...SpanFragment
-        }
-      }
-    }
-  }
-`);
-
 const SpanFragment = graphql(/* GraphQL */ `
   fragment SpanFragment on Span {
     id