refactor: Add TELEMETRY_DOCUMENTATION page to Telemetry route and upd…

…ate related components
yonasBSD · Aug 29, 2024 · 1f3cb96 · 1f3cb96
1 parent e85f8c1
commit 1f3cb96
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 19 deletions.
diff --git a/Common/UI/Components/Alerts/Alert.tsx b/Common/UI/Components/Alerts/Alert.tsx
@@ -21,13 +21,13 @@ export interface ComponentProps {
   onClose?: () => void;
   type?: AlertType;
   onClick?: () => void;
-  doNotShowIcon?: boolean;
-  dataTestId?: string;
-  textClassName?: string;
-  className?: string;
-  color?: Color;
-  id?: string;
-  textOnRight?: string;
+  doNotShowIcon?: boolean | undefined;
+  dataTestId?: string | undefined;
+  textClassName?: string | undefined;
+  className?: string | undefined;
+  color?: Color | undefined;
+  id?: string | undefined;
+  textOnRight?: string | undefined;
 }
 
 const Alert: FunctionComponent<ComponentProps> = (

diff --git a/Dashboard/src/Pages/Telemetry/Documentation.tsx b/Dashboard/src/Pages/Telemetry/Documentation.tsx
@@ -0,0 +1,15 @@
+import TelemetryDocumentation from "../../Components/Telemetry/Documentation";
+import PageComponentProps from "../PageComponentProps";
+import React, { Fragment, FunctionComponent, ReactElement } from "react";
+
+const TelemetryDocumentationPage: FunctionComponent<
+  PageComponentProps
+> = (): ReactElement => {
+  return (
+    <Fragment>
+      <TelemetryDocumentation />
+    </Fragment>
+  );
+};
+
+export default TelemetryDocumentationPage;
diff --git a/Dashboard/src/Pages/Telemetry/Exceptions/View/Layout.tsx b/Dashboard/src/Pages/Telemetry/Exceptions/View/Layout.tsx
@@ -1,15 +1,27 @@
 import { getTelemetryBreadcrumbs } from "../../../../Utils/Breadcrumbs";
-import { RouteUtil } from "../../../../Utils/RouteMap";
+import RouteMap, { RouteUtil } from "../../../../Utils/RouteMap";
 import PageComponentProps from "../../../PageComponentProps";
 import Page from "Common/UI/Components/Page/Page";
 import Navigation from "Common/UI/Utils/Navigation";
 import React, { FunctionComponent, ReactElement } from "react";
 import { Outlet } from "react-router-dom";
+import PageMap from "../../../../Utils/PageMap";
 
 const MetricsLayout: FunctionComponent<
   PageComponentProps
 > = (): ReactElement => {
   const path: string = Navigation.getRoutePath(RouteUtil.getRoutes());
+
+  if (path.endsWith("exceptions")) {
+    Navigation.navigate(
+      RouteUtil.populateRouteParams(
+        RouteMap[PageMap.TELEMETRY_EXCEPTIONS_UNRESOLVED]!,
+      ),
+    );
+
+    return <></>;
+  }
+
   return (
     <Page
       title="Exception Explorer"

diff --git a/Dashboard/src/Pages/Telemetry/Layout.tsx b/Dashboard/src/Pages/Telemetry/Layout.tsx
@@ -1,5 +1,6 @@
 import { getTelemetryBreadcrumbs } from "../../Utils/Breadcrumbs";
-import { RouteUtil } from "../../Utils/RouteMap";
+import PageMap from "../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
 import PageComponentProps from "../PageComponentProps";
 import SideMenu from "./SideMenu";
 import Page from "Common/UI/Components/Page/Page";
@@ -12,6 +13,14 @@ const TelemetryLayout: FunctionComponent<
 > = (): ReactElement => {
   const path: string = Navigation.getRoutePath(RouteUtil.getRoutes());
 
+  if (path.endsWith("telemetry") || path.endsWith("telemetry/*")) {
+    Navigation.navigate(
+      RouteUtil.populateRouteParams(RouteMap[PageMap.TELEMETRY_SERVICES]!),
+    );
+
+    return <></>;
+  }
+
   return (
     <Page
       title="Telemetry & APM"

diff --git a/Dashboard/src/Pages/Telemetry/SideMenu.tsx b/Dashboard/src/Pages/Telemetry/SideMenu.tsx
@@ -20,6 +20,15 @@ const DashboardSideMenu: FunctionComponent = (): ReactElement => {
           }}
           icon={IconProp.SquareStack}
         />
+        <SideMenuItem
+          link={{
+            title: "Documentation",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.TELEMETRY_DOCUMENTATION] as Route,
+            ),
+          }}
+          icon={IconProp.Info}
+        />
       </SideMenuSection>
       <SideMenuSection title="Telemetry">
         <SideMenuItem

diff --git a/Dashboard/src/Routes/TelemetryRoutes.tsx b/Dashboard/src/Routes/TelemetryRoutes.tsx
@@ -24,6 +24,12 @@ const TelemetryServices: LazyExoticComponent<
   return import("../Pages/Telemetry/Services");
 });
 
+const TelemetryDocumentation: LazyExoticComponent<
+  FunctionComponent<ComponentProps>
+> = lazy(() => {
+  return import("../Pages/Telemetry/Documentation");
+});
+
 const TelemetryLogs: LazyExoticComponent<FunctionComponent<ComponentProps>> =
   lazy(() => {
     return import("../Pages/Telemetry/Logs");
@@ -290,6 +296,18 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
             </Suspense>
           }
         />
+
+        <PageRoute
+          path={TelemetryRoutePath[PageMap.TELEMETRY_DOCUMENTATION] || ""}
+          element={
+            <Suspense fallback={Loader}>
+              <TelemetryDocumentation
+                {...props}
+                pageRoute={RouteMap[PageMap.TELEMETRY_DOCUMENTATION] as Route}
+              />
+            </Suspense>
+          }
+        />
       </PageRoute>
 
       {/* Metric View */}
@@ -333,9 +351,9 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
           index
           element={
             <Suspense fallback={Loader}>
-              <TelemetryViewException
+              <TelemetryExceptionsUnresolved
                 {...props}
-                pageRoute={RouteMap[PageMap.TELEMETRY_EXCEPTIONS_VIEW] as Route}
+                pageRoute={RouteMap[PageMap.TELEMETRY_EXCEPTIONS_ROOT] as Route}
               />
             </Suspense>
           }

diff --git a/Dashboard/src/Utils/Breadcrumbs/TelemetryBreadcrumbs.ts b/Dashboard/src/Utils/Breadcrumbs/TelemetryBreadcrumbs.ts
@@ -10,6 +10,11 @@ export function getTelemetryBreadcrumbs(path: string): Array<Link> | undefined {
       "Telemetry",
       "Services",
     ]),
+    ...BuildBreadcrumbLinksByTitles(PageMap.TELEMETRY_DOCUMENTATION, [
+      "Project",
+      "Telemetry",
+      "Documentation",
+    ]),
     ...BuildBreadcrumbLinksByTitles(PageMap.TELEMETRY_LOGS, [
       "Project",
       "Telemetry",
@@ -21,12 +26,6 @@ export function getTelemetryBreadcrumbs(path: string): Array<Link> | undefined {
       "Metrics",
     ]),
 
-    ...BuildBreadcrumbLinksByTitles(PageMap.TELEMETRY_EXCEPTIONS, [
-      "Project",
-      "Telemetry",
-      "Exceptions",
-    ]),
-
     ...BuildBreadcrumbLinksByTitles(PageMap.TELEMETRY_EXCEPTIONS_ARCHIVED, [
       "Project",
       "Telemetry",

diff --git a/Dashboard/src/Utils/PageMap.ts b/Dashboard/src/Utils/PageMap.ts
@@ -19,6 +19,7 @@ enum PageMap {
   TELEMETRY_SERVICES_VIEW_ROOT = "TELEMETRY_SERVICES_VIEW_ROOT",
   TELEMETRY = "TELEMETRY",
   TELEMETRY_SERVICES = "TELEMETRY_SERVICES",
+  TELEMETRY_DOCUMENTATION = "TELEMETRY_DOCUMENTATION",
 
   TELEMETRY_DASHBOARDS = "TELEMETRY_DASHBOARDS",
   TELEMETRY_DASHBOARD_VIEW = "TELEMETRY_DASHBOARD_VIEW",

diff --git a/Dashboard/src/Utils/RouteMap.ts b/Dashboard/src/Utils/RouteMap.ts
@@ -58,6 +58,7 @@ export const WorkflowRoutePath: Dictionary<string> = {
 
 export const TelemetryRoutePath: Dictionary<string> = {
   [PageMap.TELEMETRY_SERVICES]: "services",
+  [PageMap.TELEMETRY_DOCUMENTATION]: "documentation",
   [PageMap.TELEMETRY_LOGS]: "logs",
   [PageMap.TELEMETRY_TRACES]: "traces",
   [PageMap.TELEMETRY_METRICS]: "metrics",
@@ -74,8 +75,8 @@ export const TelemetryRoutePath: Dictionary<string> = {
   [PageMap.TELEMETRY_TRACE_ROOT]: `traces/view`,
   [PageMap.TELEMETRY_TRACE_VIEW]: `traces/view/${RouteParams.ModelID}`, // modelID is spanId
 
-  [PageMap.TELEMETRY_EXCEPTIONS_ROOT]: `exception`,
-  [PageMap.TELEMETRY_EXCEPTIONS_VIEW]: `exception/${RouteParams.ModelID}`,
+  [PageMap.TELEMETRY_EXCEPTIONS_ROOT]: `exceptions`,
+  [PageMap.TELEMETRY_EXCEPTIONS_VIEW]: `exceptions/${RouteParams.ModelID}`,
 
   [PageMap.TELEMETRY_LOG_ROOT]: `logs`,
 
@@ -857,6 +858,12 @@ const RouteMap: Dictionary<Route> = {
     }`,
   ),
 
+  [PageMap.TELEMETRY_DOCUMENTATION]: new Route(
+    `/dashboard/${RouteParams.ProjectID}/telemetry/${
+      TelemetryRoutePath[PageMap.TELEMETRY_DOCUMENTATION]
+    }`,
+  ),
+
   [PageMap.TELEMETRY_LOGS]: new Route(
     `/dashboard/${RouteParams.ProjectID}/telemetry/${
       TelemetryRoutePath[PageMap.TELEMETRY_LOGS]