feat: Add DashboardPreviewLink component for public dashboard preview functionality

App/FeatureSet/Dashboard/src/Components/Form/Monitor/KubernetesMonitor/KubernetesMonitorStepForm.tsx

@@ -221,14 +221,10 @@ const KubernetesMonitorStepForm: FunctionComponent<ComponentProps> = (
     const clusterIdentifier: string =
       monitorStepKubernetesMonitor.clusterIdentifier;
 
-    if (!clusterIdentifier) {
-      // Just store the template selection, config will be built when cluster is selected
-      return;
-    }
-
     // Get a dummy monitor step from the template to extract the kubernetes config
+    // Build even without a cluster so the metricViewConfig is populated for the METRIC dropdown
     const dummyStep: MonitorStep = template.getMonitorStep({
-      clusterIdentifier,
+      clusterIdentifier: clusterIdentifier || "",
       onlineMonitorStatusId: ObjectID.generate(),
       offlineMonitorStatusId: ObjectID.generate(),
       defaultIncidentSeverityId: ObjectID.generate(),
@@ -240,7 +236,7 @@ const KubernetesMonitorStepForm: FunctionComponent<ComponentProps> = (
     if (dummyStep.data?.kubernetesMonitor) {
       props.onChange({
         ...dummyStep.data.kubernetesMonitor,
-        clusterIdentifier,
+        clusterIdentifier: clusterIdentifier || "",
       });
     }
   };

App/FeatureSet/Dashboard/src/Pages/Dashboards/View/DashboardPreviewLink.tsx

@@ -0,0 +1,37 @@
+import URL from "Common/Types/API/URL";
+import ObjectID from "Common/Types/ObjectID";
+import Card from "Common/UI/Components/Card/Card";
+import { PUBLIC_DASHBOARD_URL } from "Common/UI/Config";
+import React, { FunctionComponent, ReactElement } from "react";
+import Link from "Common/UI/Components/Link/Link";
+
+export interface ComponentProps {
+  modelId: ObjectID;
+}
+
+const DashboardPreviewLink: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <>
+      <Card
+        title={`Dashboard Preview URL`}
+        description={
+          <span>
+            Here&apos;s a link to preview your public dashboard:{" "}
+            <Link
+              openInNewTab={true}
+              to={URL.fromString(
+                `${PUBLIC_DASHBOARD_URL.toString()}/${props.modelId}`,
+              )}
+            >
+              <span>{`${PUBLIC_DASHBOARD_URL.toString()}/${props.modelId}`}</span>
+            </Link>
+          </span>
+        }
+      />
+    </>
+  );
+};
+
+export default DashboardPreviewLink;

App/FeatureSet/Dashboard/src/Pages/Dashboards/View/Overview.tsx

@@ -8,6 +8,7 @@ import Navigation from "Common/UI/Utils/Navigation";
 import Label from "Common/Models/DatabaseModels/Label";
 import Dashboard from "Common/Models/DatabaseModels/Dashboard";
 import React, { Fragment, FunctionComponent, ReactElement } from "react";
+import DashboardPreviewLink from "./DashboardPreviewLink";
 
 const DashboardView: FunctionComponent<
   PageComponentProps
@@ -16,6 +17,7 @@ const DashboardView: FunctionComponent<
 
   return (
     <Fragment>
+      <DashboardPreviewLink modelId={modelId} />
       {/* Dashboard View  */}
       <CardModelDetail<Dashboard>
         name="Dashboard > Dashboard Details"

Common/ServiceRoute.ts

@@ -35,3 +35,5 @@ export const RealtimeRoute: Route = new Route("/realtime/socket");
 export const DocsRoute: Route = new Route("/docs");
 
 export const StatusPageApiRoute: Route = new Route("/status-page-api");
+
+export const PublicDashboardRoute: Route = new Route("/public-dashboard");

Common/UI/Config.ts

@@ -11,6 +11,7 @@ import {
   ProbeIngestRoute,
   IntegrationRoute,
   NotificationRoute,
+  PublicDashboardRoute,
   RealtimeRoute,
   StatusPageApiRoute,
   StatusPageRoute,
@@ -159,6 +160,12 @@ export const DASHBOARD_URL: URL = new URL(
   new Route(DashboardRoute.toString()),
 );
 
+export const PUBLIC_DASHBOARD_URL: URL = new URL(
+  HTTP_PROTOCOL,
+  DASHBOARD_HOSTNAME,
+  new Route(PublicDashboardRoute.toString()),
+);
+
 export const INTEGRATION_URL: URL = new URL(
   HTTP_PROTOCOL,
   INTEGRATION_HOSTNAME,