feat(compass-connections-navigation): [WIP] add links to cluster level atlas pages COMPASS-9967

Author: nbbeeken

packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx

@@ -30,6 +30,7 @@ import {
   type SchemaAnalysisError,
 } from '../../schema-analysis-types';
 import { MAX_COLLECTION_NESTING_DEPTH } from '../mock-data-generator-modal/utils';
+import { type AtlasClusterMetadata } from '@mongodb-js/connection-info';
 
 const collectionHeaderActionsStyles = css({
   display: 'flex',
@@ -60,6 +61,21 @@ function buildChartsUrl(
   return url.toString();
 }
 
+function buildMonitoringUrl({
+  projectId,
+  clusterType,
+  clusterUniqueId,
+}: AtlasClusterMetadata) {
+  // {origin}/v2/{groupId}#/host/{'replicaSet' | 'cluster'}/{clusterId}
+  const url = new URL(`/v2/${projectId}`, window.location.origin);
+  const fragmentPath = [
+    'host',
+    clusterType === 'REPLICASET' ? 'replicaSet' : 'cluster',
+    clusterUniqueId,
+  ].join('/');
+  return `${url}#/${fragmentPath}`;
+}
+
 type CollectionHeaderActionsProps = {
   namespace: string;
   isReadonly: boolean;
@@ -234,6 +250,18 @@ const CollectionHeaderActions: React.FunctionComponent<
           </>
         </Tooltip>
       )}
+      {atlasMetadata && (
+        <Button
+          data-testid="collection-header-view-monitoring"
+          size={ButtonSize.Small}
+          href={buildMonitoringUrl(atlasMetadata)}
+          target="_self"
+          rel="noopener noreferrer"
+          leftGlyph={<Icon glyph="TimeSeries" />}
+        >
+          View monitoring
+        </Button>
+      )}
       {atlasMetadata && (
         <Button
           data-testid="collection-header-visualize-your-data"

packages/compass-connections-navigation/src/constants.tsx

@@ -8,6 +8,9 @@ export const ROW_HEIGHT = 28;
 export type Actions =
   // Atlas Cloud actions
   | 'show-connect-via-modal'
+  | 'connection-cluster-overview'
+  | 'connection-view-monitoring'
+  | 'connection-query-insights'
   // connection item related actions
   | 'open-shell'
   | 'select-connection'

packages/compass-connections-navigation/src/item-actions.ts

@@ -121,6 +121,43 @@ export const connectedConnectionItemActions = ({
           disabledDescription: 'Not supported',
         }
       : null,
+    // The following are just links to other parts of Atlas
+    !isPerformanceTabAvailable && connectionInfo.atlasMetadata
+      ? {
+          action: 'connection-performance-metrics',
+          icon: 'Gauge',
+          label: 'View performance metrics',
+          isDisabled: false,
+          disabledDescription: 'Not supported',
+        }
+      : null,
+    connectionInfo.atlasMetadata
+      ? {
+          action: 'connection-cluster-overview',
+          icon: 'Dashboard',
+          label: 'View cluster overview',
+          isDisabled: false,
+          disabledDescription: 'Not supported',
+        }
+      : null,
+    connectionInfo.atlasMetadata
+      ? {
+          action: 'connection-view-monitoring',
+          icon: 'TimeSeries',
+          label: 'View monitoring',
+          isDisabled: false,
+          disabledDescription: 'Not supported',
+        }
+      : null,
+    connectionInfo.atlasMetadata
+      ? {
+          action: 'connection-query-insights',
+          icon: 'Bulb',
+          label: 'View query insights',
+          isDisabled: false,
+          disabledDescription: 'Not supported',
+        }
+      : null,
     isAtlas
       ? null
       : {

packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx

@@ -421,6 +421,18 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
         case 'show-connect-via-modal':
           onOpenConnectViaModal?.(getConnectionInfo(item).atlasMetadata);
           return;
+        case 'connection-cluster-overview':
+          window.location.href =
+            'https://cloud-dev.mongodb.com/v2/683db0293f4d675ff02ea19e#/clusters/detail/Cluster0';
+          return;
+        case 'connection-view-monitoring':
+          window.location.href =
+            'https://cloud-dev.mongodb.com/v2/683db0293f4d675ff02ea19e#/host/replicaSet/690251704698a545f6b8192c';
+          return;
+        case 'connection-query-insights':
+          window.location.href =
+            'https://cloud-qa.mongodb.com/v2/6822107ec640076ae576fd9a#/metrics/replicaSet/690233c5bf01906dc1e9a9fe/queryInsights/shape';
+          return;
         case 'select-database':
           openCollectionsWorkspace(connectionId, getNamespace(item));
           return;

packages/databases-collections-list/src/items-table.tsx

@@ -35,7 +35,10 @@ import {
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import toNS from 'mongodb-ns';
-import { getConnectionTitle } from '@mongodb-js/connection-info';
+import {
+  type AtlasClusterMetadata,
+  getConnectionTitle,
+} from '@mongodb-js/connection-info';
 import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
 import { usePreferences } from 'compass-preferences-model/provider';
 
@@ -114,6 +117,21 @@ function buildChartsUrl(
   return url.toString();
 }
 
+function buildMonitoringUrl({
+  projectId,
+  clusterType,
+  clusterUniqueId,
+}: AtlasClusterMetadata) {
+  // {origin}/v2/{groupId}#/host/{'replicaSet' | 'cluster'}/{clusterId}
+  const url = new URL(`/v2/${projectId}`, window.location.origin);
+  const fragmentPath = [
+    'host',
+    clusterType === 'REPLICASET' ? 'replicaSet' : 'cluster',
+    clusterUniqueId,
+  ].join('/');
+  return `${url}#/${fragmentPath}`;
+}
+
 const TableControls: React.FunctionComponent<{
   namespace?: string;
   itemType: string;
@@ -197,7 +215,18 @@ const TableControls: React.FunctionComponent<{
               Open MongoDB shell
             </Button>
           )}
-
+          {connectionInfo.atlasMetadata && (
+            <Button
+              data-testid={`${itemType}-header-view-monitoring`}
+              size="small"
+              href={buildMonitoringUrl(connectionInfo.atlasMetadata)}
+              target="_self"
+              rel="noopener noreferrer"
+              leftGlyph={<Icon glyph="TimeSeries" />}
+            >
+              View monitoring
+            </Button>
+          )}
           {connectionInfo.atlasMetadata && (
             <Button
               data-testid={`${itemType}-header-visualize-your-data`}