refactor: Update MonitorTable to use MonitorElement for rendering monitor names

This commit updates the MonitorTable component to use the MonitorElement component for rendering monitor names in the table. The MonitorElement component takes a Monitor object as a prop and renders the monitor name as a link. This change improves the modularity and reusability of the code by separating the rendering logic into a separate component.

Dashboard/src/Components/Monitor/MonitorTable.tsx

@@ -34,6 +34,7 @@ import MonitorStatus from "Model/Models/MonitorStatus";
 import React, { FunctionComponent, ReactElement } from "react";
 import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
 import PageMap from "../../Utils/PageMap";
+import MonitorElement from "./Monitor";
 
 export interface ComponentProps {
   query?: Query<Monitor> | undefined;
@@ -383,7 +384,10 @@ const MonitorsTable: FunctionComponent<ComponentProps> = (
             name: true,
           },
           title: "Name",
-          type: FieldType.Text,
+          type: FieldType.Element,
+          getElement: (item: Monitor): ReactElement => {
+            return <MonitorElement monitor={item} />;
+          },
         },
         {
           field: {

Dashboard/src/Components/StatusPage/StatusPageLabel.tsx

@@ -2,6 +2,9 @@ import Route from "Common/Types/API/Route";
 import Link from "CommonUI/src/Components/Link/Link";
 import StatusPage from "Model/Models/StatusPage";
 import React, { FunctionComponent, ReactElement } from "react";
+import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
+import PageMap from "../../Utils/PageMap";
+import ObjectID from "Common/Types/ObjectID";
 
 export interface ComponentProps {
   statusPage: StatusPage;
@@ -11,25 +14,17 @@ export interface ComponentProps {
 const StatusPageElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  if (
-    props.statusPage._id &&
-    (props.statusPage.projectId ||
-      (props.statusPage.project && props.statusPage.project._id))
-  ) {
-    const projectId: string | undefined = props.statusPage.projectId
-      ? props.statusPage.projectId.toString()
-      : props.statusPage.project
-        ? props.statusPage.project._id
-        : "";
+  if (props.statusPage._id) {
     return (
       <Link
         onNavigateComplete={props.onNavigateComplete}
         className="hover:underline"
-        to={
-          new Route(
-            `/dashboard/${projectId}/status-pages/${props.statusPage._id}`,
-          )
-        }
+        to={RouteUtil.populateRouteParams(
+          RouteMap[PageMap.STATUS_PAGE_VIEW] as Route,
+          {
+            modelId: new ObjectID(props.statusPage._id as string),
+          },
+        )}
       >
         <span>{props.statusPage.name}</span>
       </Link>

Dashboard/src/Pages/StatusPages/StatusPages.tsx

@@ -14,6 +14,7 @@ import Navigation from "CommonUI/src/Utils/Navigation";
 import Label from "Model/Models/Label";
 import StatusPage from "Model/Models/StatusPage";
 import React, { FunctionComponent, ReactElement } from "react";
+import StatusPageElement from "../../Components/StatusPage/StatusPageLabel";
 
 const StatusPages: FunctionComponent<PageComponentProps> = (): ReactElement => {
   return (
@@ -117,7 +118,10 @@ const StatusPages: FunctionComponent<PageComponentProps> = (): ReactElement => {
               name: true,
             },
             title: "Name",
-            type: FieldType.Text,
+            type: FieldType.Element,
+            getElement: (item: StatusPage): ReactElement => {
+              return <StatusPageElement statusPage={item} />;
+            },
           },
           {
             field: {

config.example.env

@@ -16,11 +16,6 @@ GLOBAL_PROBE_1_KEY=please-change-this-to-random-value
 GLOBAL_PROBE_2_KEY=please-change-this-to-random-value
 INTERNAL_SMTP_PASSWORD=please-change-this-to-random-value
 
-# OTEL HOST - if you like the collector to be hosted on a different server then change this to the IP of the server.
-OTEL_COLLECTOR_HOST=
-
-# FLUENTD_HOST - if you like the fluentd to be hosted on a different server then change this to the IP of the server.
-FLUENTD_HOST=
 
 # OneUptime Port. This is the port where OneUptime will be hosted on. 
 ONEUPTIME_HTTP_PORT=80
@@ -48,6 +43,12 @@ APP_TAG=release
 # What is the name of the docker-compose project. This is used to prefix the docker containers.
 COMPOSE_PROJECT_NAME=oneuptime
 
+# OTEL HOST - if you like the collector to be hosted on a different server then change this to the IP of the server.
+OTEL_COLLECTOR_HOST=
+
+# FLUENTD_HOST - if you like the fluentd to be hosted on a different server then change this to the IP of the server.
+FLUENTD_HOST=
+
 # Clickhouse Settings
 CLICKHOUSE_USER=default
 CLICKHOUSE_DATABASE=oneuptime