feat(compass-connections-navigation): add links to cluster level atlas pages COMPASS-9967 (#7516)

Author: nbbeeken

package-lock.json

@@ -83,6 +83,7 @@
     "electron": "^37.8.0",
     "hadron-ipc": "^3.5.21",
     "lodash": "^4.17.21",
+    "mongodb-ns": "^3.0.3",
     "react": "^17.0.2",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2"

packages/atlas-service/package.json

@@ -1,3 +1,5 @@
+export * from './url-builders';
+
 import React, { createContext, useContext, useMemo } from 'react';
 import type { AtlasAuthService } from './atlas-auth-service';
 import { AtlasService, type AtlasServiceOptions } from './atlas-service';

packages/atlas-service/src/provider.tsx

@@ -0,0 +1,51 @@
+import toNS from 'mongodb-ns';
+import type { AtlasClusterMetadata } from '@mongodb-js/connection-info';
+
+export function buildPerformanceMetricsUrl({
+  projectId,
+  metricsType,
+  metricsId,
+}: AtlasClusterMetadata): string {
+  const url = new URL(`/v2/${projectId}`, window.location.origin);
+  return `${url}#/host/${metricsType}/${metricsId}/realtime/panel`;
+}
+
+export function buildMonitoringUrl({
+  projectId,
+  metricsType,
+  metricsId,
+}: AtlasClusterMetadata): string {
+  const url = new URL(`/v2/${projectId}`, window.location.origin);
+  return `${url}#/host/${metricsType}/${metricsId}`;
+}
+
+export function buildClusterOverviewUrl({
+  projectId,
+  clusterName,
+}: AtlasClusterMetadata): string {
+  const url = new URL(`/v2/${projectId}`, window.location.origin);
+  return `${url}#/clusters/detail/${clusterName}`;
+}
+
+export function buildQueryInsightsUrl({
+  projectId,
+  metricsType,
+  metricsId,
+}: AtlasClusterMetadata): string {
+  const url = new URL(`/v2/${projectId}`, window.location.origin);
+  return `${url}#/metrics/${metricsType}/${metricsId}/queryInsights/shape`;
+}
+
+export function buildChartsUrl(
+  { projectId, clusterName }: AtlasClusterMetadata,
+  namespace?: string
+): string {
+  const { database } = toNS(namespace ?? '');
+  const url = new URL(`/charts/${projectId}`, window.location.origin);
+  url.searchParams.set('sourceType', 'cluster');
+  url.searchParams.set('name', clusterName);
+  if (database) {
+    url.searchParams.set('database', database);
+  }
+  return `${url}`;
+}

packages/atlas-service/src/url-builders.ts

@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^9.0.0",
+    "@mongodb-js/atlas-service": "^0.70.0",
     "@mongodb-js/compass-app-registry": "^9.4.27",
     "@mongodb-js/compass-app-stores": "^7.72.0",
     "@mongodb-js/compass-components": "^1.57.1",

packages/compass-collection/package.json

@@ -30,6 +30,10 @@ import {
   type SchemaAnalysisError,
 } from '../../schema-analysis-types';
 import { MAX_COLLECTION_NESTING_DEPTH } from '../mock-data-generator-modal/utils';
+import {
+  buildChartsUrl,
+  buildMonitoringUrl,
+} from '@mongodb-js/atlas-service/provider';
 
 const collectionHeaderActionsStyles = css({
   display: 'flex',
@@ -46,20 +50,6 @@ const tooltipMessageStyles = css({
   },
 });
 
-function buildChartsUrl(
-  groupId: string,
-  clusterName: string,
-  namespace: string
-) {
-  const { database, collection } = toNS(namespace);
-  const url = new URL(`/charts/${groupId}`, window.location.origin);
-  url.searchParams.set('sourceType', 'cluster');
-  url.searchParams.set('name', clusterName);
-  url.searchParams.set('database', database);
-  url.searchParams.set('collection', collection);
-  return url.toString();
-}
-
 type CollectionHeaderActionsProps = {
   namespace: string;
   isReadonly: boolean;
@@ -234,15 +224,23 @@ const CollectionHeaderActions: React.FunctionComponent<
           </>
         </Tooltip>
       )}
+      {atlasMetadata && (
+        <Button
+          data-testid="collection-header-view-monitoring"
+          size={ButtonSize.Small}
+          href={buildMonitoringUrl(atlasMetadata)}
+          target="_blank"
+          rel="noopener noreferrer"
+          leftGlyph={<Icon glyph="TimeSeries" />}
+        >
+          View monitoring
+        </Button>
+      )}
       {atlasMetadata && (
         <Button
           data-testid="collection-header-visualize-your-data"
           size={ButtonSize.Small}
-          href={buildChartsUrl(
-            atlasMetadata.projectId,
-            atlasMetadata.clusterName,
-            namespace
-          )}
+          href={buildChartsUrl(atlasMetadata, namespace)}
           target="_self"
           rel="noopener noreferrer"
           leftGlyph={<Icon glyph="Charts" />}

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

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

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

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

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

@@ -48,6 +48,7 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "dependencies": {
+    "@mongodb-js/atlas-service": "^0.70.0",
     "@mongodb-js/compass-app-registry": "^9.4.27",
     "@mongodb-js/compass-app-stores": "^7.72.0",
     "@mongodb-js/compass-components": "^1.57.1",

packages/compass-sidebar/package.json

@@ -62,6 +62,12 @@ import {
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { usePreference } from 'compass-preferences-model/provider';
 import { wrapField } from '@mongodb-js/mongodb-constants';
+import {
+  buildPerformanceMetricsUrl,
+  buildClusterOverviewUrl,
+  buildMonitoringUrl,
+  buildQueryInsightsUrl,
+} from '@mongodb-js/atlas-service/provider';
 
 const connectionsContainerStyles = css({
   height: '100%',
@@ -421,6 +427,30 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
         case 'show-connect-via-modal':
           onOpenConnectViaModal?.(getConnectionInfo(item).atlasMetadata);
           return;
+        case 'connection-atlas-performance-metrics': {
+          const { atlasMetadata } = getConnectionInfo(item);
+          if (atlasMetadata)
+            window.open(buildPerformanceMetricsUrl(atlasMetadata), '_blank');
+          return;
+        }
+        case 'connection-cluster-overview': {
+          const { atlasMetadata } = getConnectionInfo(item);
+          if (atlasMetadata)
+            window.open(buildClusterOverviewUrl(atlasMetadata), '_blank');
+          return;
+        }
+        case 'connection-view-monitoring': {
+          const { atlasMetadata } = getConnectionInfo(item);
+          if (atlasMetadata)
+            window.open(buildMonitoringUrl(atlasMetadata), '_blank');
+          return;
+        }
+        case 'connection-query-insights': {
+          const { atlasMetadata } = getConnectionInfo(item);
+          if (atlasMetadata)
+            window.open(buildQueryInsightsUrl(atlasMetadata), '_blank');
+          return;
+        }
         case 'select-database':
           openCollectionsWorkspace(connectionId, getNamespace(item));
           return;