refactor: clean up code formatting and remove unused imports in Metrics components

App/FeatureSet/Dashboard/src/Components/Metrics/MetricsDashboard.tsx

@@ -21,7 +21,6 @@ import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
 import PageMap from "../../Utils/PageMap";
 import Route from "Common/Types/API/Route";
 import AppLink from "../AppLink/AppLink";
-import Includes from "Common/Types/BaseDatabase/Includes";
 
 interface ServiceMetricSummary {
   service: Service;
@@ -71,8 +70,6 @@ const MetricsDashboard: FunctionComponent = (): ReactElement => {
           name: true,
           unit: true,
           description: true,
-        },
-        relationSelect: {
           services: {
             _id: true,
             name: true,
@@ -106,9 +103,7 @@ const MetricsDashboard: FunctionComponent = (): ReactElement => {
 
         for (const metricService of metricServices) {
           const serviceId: string =
-            metricService._id?.toString() ||
-            metricService.id?.toString() ||
-            "";
+            metricService._id?.toString() || metricService.id?.toString() || "";
           let summary: ServiceMetricSummary | undefined =
             summaryMap.get(serviceId);
 
@@ -285,7 +280,10 @@ const MetricsDashboard: FunctionComponent = (): ReactElement => {
           {serviceSummaries.map((summary: ServiceMetricSummary) => {
             return (
               <div
-                key={summary.service.id?.toString() || summary.service._id?.toString()}
+                key={
+                  summary.service.id?.toString() ||
+                  summary.service._id?.toString()
+                }
                 className="rounded-lg border border-gray-200 bg-white p-5 hover:shadow-md transition-shadow"
               >
                 <div className="flex items-start justify-between mb-3">

App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx

@@ -172,8 +172,7 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
           }
 
           if (span.statusCode === SpanStatus.Error) {
-            const errorSet: Set<string> =
-              serviceErrorTraceIds.get(serviceId)!;
+            const errorSet: Set<string> = serviceErrorTraceIds.get(serviceId)!;
 
             if (!errorSet.has(traceId)) {
               errorSet.add(traceId);
@@ -193,8 +192,10 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
           }
         }
 
-        // For the recent traces lists, pick the first span per trace
-        // (which is the most recent since we sort desc)
+        /*
+         * For the recent traces lists, pick the first span per trace
+         * (which is the most recent since we sort desc)
+         */
         if (!seenTraceIds.has(traceId) && traceId) {
           seenTraceIds.add(traceId);
 
@@ -202,9 +203,7 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
             traceId: traceId,
             name: span.name?.toString() || "Unknown",
             serviceId: serviceId,
-            startTime: span.startTime
-              ? new Date(span.startTime)
-              : new Date(),
+            startTime: span.startTime ? new Date(span.startTime) : new Date(),
             statusCode: span.statusCode || SpanStatus.Unset,
             durationNano: (span.durationUnixNano as number) || 0,
           };
@@ -224,9 +223,7 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
             traceId: traceId,
             name: span.name?.toString() || "Unknown",
             serviceId: serviceId,
-            startTime: span.startTime
-              ? new Date(span.startTime)
-              : new Date(),
+            startTime: span.startTime ? new Date(span.startTime) : new Date(),
             statusCode: span.statusCode,
             durationNano: (span.durationUnixNano as number) || 0,
           });
@@ -303,9 +300,36 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
             stroke="currentColor"
           >
             {/* Three horizontal bars representing a waterfall/trace timeline */}
-            <rect x="4" y="10" width="28" height="5" rx="2.5" strokeWidth={1.5} fill="currentColor" opacity={0.5} />
-            <rect x="12" y="20" width="20" height="5" rx="2.5" strokeWidth={1.5} fill="currentColor" opacity={0.7} />
-            <rect x="20" y="30" width="24" height="5" rx="2.5" strokeWidth={1.5} fill="currentColor" opacity={0.9} />
+            <rect
+              x="4"
+              y="10"
+              width="28"
+              height="5"
+              rx="2.5"
+              strokeWidth={1.5}
+              fill="currentColor"
+              opacity={0.5}
+            />
+            <rect
+              x="12"
+              y="20"
+              width="20"
+              height="5"
+              rx="2.5"
+              strokeWidth={1.5}
+              fill="currentColor"
+              opacity={0.7}
+            />
+            <rect
+              x="20"
+              y="30"
+              width="24"
+              height="5"
+              rx="2.5"
+              strokeWidth={1.5}
+              fill="currentColor"
+              opacity={0.9}
+            />
             {/* Connecting lines */}
             <path d="M18 15 L16 20" strokeWidth={1.5} opacity={0.4} />
             <path d="M22 25 L24 30" strokeWidth={1.5} opacity={0.4} />

App/FeatureSet/Dashboard/src/Pages/Metrics/View/Layout.tsx

@@ -11,10 +11,7 @@ const MetricsViewLayout: FunctionComponent<
 > = (): ReactElement => {
   const path: string = Navigation.getRoutePath(RouteUtil.getRoutes());
   return (
-    <Page
-      title="Metric Explorer"
-      breadcrumbLinks={getMetricsBreadcrumbs(path)}
-    >
+    <Page title="Metric Explorer" breadcrumbLinks={getMetricsBreadcrumbs(path)}>
       <Outlet />
     </Page>
   );

App/FeatureSet/Dashboard/src/Routes/MetricsRoutes.tsx

@@ -31,9 +31,7 @@ const MetricsRoutes: FunctionComponent<ComponentProps> = (
         />
         <PageRoute
           path={MetricsRoutePath[PageMap.METRICS_LIST] || ""}
-          element={
-            <MetricsListPage />
-          }
+          element={<MetricsListPage />}
         />
         <PageRoute
           path={MetricsRoutePath[PageMap.METRICS_DOCUMENTATION] || ""}