From 2b1ad303d9bf0634d35affb970b648bbe6694122 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 29 Jul 2024 17:12:39 -0600
Subject: [PATCH] feat: Update MetricsTable to fetch and display attributes

This commit updates the MetricsTable component to fetch and display attributes for each metric. It adds a new API request to retrieve the attributes from the server and updates the component's state to store the fetched attributes. The attributes are then passed to the AnalyticsModelTable component to be displayed in the "Attributes" column. This enhancement improves the visibility and analysis capabilities of the metrics data.

Files modified:
- Dashboard/src/Components/Metrics/MetricsTable.tsx
---
 .../src/Components/Metrics/MetricsTable.tsx   | 68 ++++++++++++++++++-
 Ingestor/Service/OTelIngest.ts                |  2 +-
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/Dashboard/src/Components/Metrics/MetricsTable.tsx b/Dashboard/src/Components/Metrics/MetricsTable.tsx
index 5078d4c9259..2b1184bac96 100644
--- a/Dashboard/src/Components/Metrics/MetricsTable.tsx
+++ b/Dashboard/src/Components/Metrics/MetricsTable.tsx
@@ -9,7 +9,21 @@ import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
 import PageMap from "../../Utils/PageMap";
 import Route from "Common/Types/API/Route";
 import URL from "Common/Types/API/URL";
-import React, { Fragment, FunctionComponent, ReactElement } from "react";
+import React, {
+  Fragment,
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+} from "react";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import HTTPResponse from "Common/Types/API/HTTPResponse";
+import { JSONObject } from "Common/Types/JSON";
+import HTTPErrorResponse from "Common/Types/API/HTTPErrorResponse";
+import API from "Common/Utils/API";
+import { APP_API_URL } from "CommonUI/src/Config";
+import ModelAPI from "CommonUI/src/Utils/ModelAPI/ModelAPI";
+import PageLoader from "CommonUI/src/Components/Loader/PageLoader";
+import ErrorMessage from "CommonUI/src/Components/ErrorMessage/ErrorMessage";
 
 export interface ComponentProps {
   telemetryServiceId?: ObjectID | undefined;
@@ -19,6 +33,57 @@ export interface ComponentProps {
 const MetricsTable: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [attributes, setAttributes] = React.useState<Array<string>>([]);
+
+  const [isPageLoading, setIsPageLoading] = React.useState<boolean>(true);
+  const [pageError, setPageError] = React.useState<string>("");
+
+  const loadAttributes: PromiseVoidFunction = async (): Promise<void> => {
+    try {
+      setIsPageLoading(true);
+
+      const attributeRepsonse: HTTPResponse<JSONObject> | HTTPErrorResponse =
+        await API.post(
+          URL.fromString(APP_API_URL.toString()).addRoute(
+            "/telemetry/metrics/get-attributes",
+          ),
+          {},
+          {
+            ...ModelAPI.getCommonHeaders(),
+          },
+        );
+
+      if (attributeRepsonse instanceof HTTPErrorResponse) {
+        throw attributeRepsonse;
+      } else {
+        const attributes: Array<string> = attributeRepsonse.data[
+          "attributes"
+        ] as Array<string>;
+        setAttributes(attributes);
+      }
+
+      setIsPageLoading(false);
+      setPageError("");
+    } catch (err) {
+      setIsPageLoading(false);
+      setPageError(API.getFriendlyErrorMessage(err as Error));
+    }
+  };
+
+  useEffect(() => {
+    loadAttributes().catch((err: Error) => {
+      setPageError(API.getFriendlyErrorMessage(err as Error));
+    });
+  }, []);
+
+  if (isPageLoading) {
+    return <PageLoader isVisible={true} />;
+  }
+
+  if (pageError) {
+    return <ErrorMessage error={pageError} />;
+  }
+
   return (
     <Fragment>
       <AnalyticsModelTable<Metric>
@@ -97,6 +162,7 @@ const MetricsTable: FunctionComponent<ComponentProps> = (
             },
             type: FieldType.JSON,
             title: "Attributes",
+            jsonKeys: attributes,
           },
         ]}
         columns={[
diff --git a/Ingestor/Service/OTelIngest.ts b/Ingestor/Service/OTelIngest.ts
index f6a42857403..6e5206fadac 100644
--- a/Ingestor/Service/OTelIngest.ts
+++ b/Ingestor/Service/OTelIngest.ts
@@ -50,7 +50,7 @@ export default class OTelIngestService {
       const mergedKeys: Array<string> = ArrayUtil.removeDuplicates([
         ...dbKeys,
         ...data.attributes,
-        ...cacheKey,
+        ...cacheKeys,
       ]);
 
       await GlobalCache.setStringArray(