added empty state in metrics

Author: Shubhdeep12

packages/spotlight/src/ui/telemetry/components/metrics/MetricsList.tsx

@@ -23,6 +23,7 @@ import type { SentryMetricPayload } from "../../types";
 import { getFormattedNumber } from "../../utils/duration";
 import { aggregateMetrics, calculatePercentiles, groupMetricsByName } from "../../utils/metrics";
 import { truncateId } from "../../utils/text";
+import EmptyState from "../shared/EmptyState";
 import MetricDetail from "./MetricDetail";
 import MetricTypeBadge from "./components/MetricTypeBadge";
 
@@ -141,18 +142,19 @@ export default function MetricsList({ traceId }: MetricsListProps) {
     });
   }, []);
 
-  //TODO: to add Empty state here once #1264 is merged.
   if (allMetrics.length === 0) {
     return (
-      <CardList>
-        <p className="text-primary-300 px-6 py-4">
-          No metrics yet. Send some trace-connected metrics to see them here.
-        </p>
-      </CardList>
+      <EmptyState
+        variant={traceId ? "simple" : "full"}
+        className={traceId ? undefined : "h-full"}
+        title={traceId ? undefined : "No Metrics"}
+        description="No metrics yet. Send some trace-connected metrics to see them here."
+        showDocsLink={!traceId}
+      />
     );
   }
 
-  const hasActiveFilters = selectedNames.size > 0 || searchQuery.length > 0;
+  const hasActiveFilters = selectedNames.size > 0;
 
   return (
     <>
@@ -241,9 +243,16 @@ export default function MetricsList({ traceId }: MetricsListProps) {
       </div>
 
       <CardList>
-        {/* TODO: to add Empty state here once #1264 is merged. */}
         {metricGroups.length === 0 ? (
-          <p className="text-primary-300 px-6 py-4">No metrics match the current filters.</p>
+          <EmptyState
+            variant="simple"
+            description={
+              traceId
+                ? "No metrics yet. Send some trace-connected metrics to see them here."
+                : "No metrics match the current filters."
+            }
+            showDocsLink={!traceId}
+          />
         ) : (
           metricGroups.map(group => {
             const isExpanded = expandedSections.has(group.name);

packages/spotlight/src/ui/telemetry/components/traces/TraceDetails/index.tsx

@@ -102,18 +102,13 @@ export default function TraceDetails({ trace, aiConfig }: TraceDetailsProps) {
         severe: errorCount > 0,
       },
     }),
+    createTab("metrics", "Metrics", {
+      notificationCount: {
+        count: metrics.length,
+      },
+    }),
   ];
 
-  if (metrics.length > 0) {
-    tabs.push(
-      createTab("metrics", "Metrics", {
-        notificationCount: {
-          count: metrics.length,
-        },
-      }),
-    );
-  }
-
   if (profile) {
     tabs.push(createTab("profileTree", "Profile"));
   }
@@ -131,12 +126,8 @@ export default function TraceDetails({ trace, aiConfig }: TraceDetailsProps) {
               <Route path="errors" element={<EventList traceId={trace.trace_id} />} />
               <Route path="logs" element={<LogsList traceId={trace.trace_id} />} />
               <Route path="logs/:id" element={<LogsList traceId={trace.trace_id} />} />
-              {metrics.length > 0 && (
-                <>
-                  <Route path="metrics" element={<MetricsList traceId={trace.trace_id} />} />
-                  <Route path="metrics/:metricId/*" element={<MetricsList traceId={trace.trace_id} />} />
-                </>
-              )}
+              <Route path="metrics" element={<MetricsList traceId={trace.trace_id} />} />
+              <Route path="metrics/:metricId/*" element={<MetricsList traceId={trace.trace_id} />} />
               {profile && <Route path="profileTree" element={<TraceProfileTree profile={profile} />} />}
               {/* Default tab */}
               <Route path="*" element={<Navigate to="context" replace />} />