refactor: frontend changes

docs/api/openapi.yml

@@ -870,14 +870,6 @@ components:
       - timestampMillis
       - data
       type: object
-    CloudintegrationtypesAssets:
-      properties:
-        dashboards:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesDashboard'
-          nullable: true
-          type: array
-      type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
         deploymentRegion:
@@ -1025,17 +1017,6 @@ components:
       - ingestionUrl
       - ingestionKey
       type: object
-    CloudintegrationtypesDashboard:
-      properties:
-        definition:
-          $ref: '#/components/schemas/DashboardtypesStorableDashboardData'
-        description:
-          type: string
-        id:
-          type: string
-        title:
-          type: string
-      type: object
     CloudintegrationtypesDataCollected:
       properties:
         logs:
@@ -1209,7 +1190,7 @@ components:
     CloudintegrationtypesService:
       properties:
         assets:
-          $ref: '#/components/schemas/CloudintegrationtypesAssets'
+          $ref: '#/components/schemas/CloudintegrationtypesServiceAssets'
         cloudIntegrationService:
           $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
@@ -1222,8 +1203,6 @@ components:
           type: string
         supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
-        telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
         title:
           type: string
       required:
@@ -1234,9 +1213,17 @@ components:
       - assets
       - supportedSignals
       - dataCollected
-      - telemetryCollectionStrategy
       - cloudIntegrationService
       type: object
+    CloudintegrationtypesServiceAssets:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesServiceDashboard'
+          type: array
+      required:
+      - dashboards
+      type: object
     CloudintegrationtypesServiceConfig:
       properties:
         aws:
@@ -1244,6 +1231,15 @@ components:
         azure:
           $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
       type: object
+    CloudintegrationtypesServiceDashboard:
+      properties:
+        description:
+          type: string
+        integrationDashboard:
+          $ref: '#/components/schemas/CloudintegrationtypesStorableIntegrationDashboard'
+        title:
+          type: string
+      type: object
     CloudintegrationtypesServiceID:
       enum:
       - alb
@@ -1278,6 +1274,23 @@ components:
       - icon
       - enabled
       type: object
+    CloudintegrationtypesStorableIntegrationDashboard:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        dashboardId:
+          type: string
+        id:
+          type: string
+        provider:
+          type: string
+        slug:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      type: object
     CloudintegrationtypesSupportedSignals:
       properties:
         logs:
@@ -1285,13 +1298,6 @@ components:
         metrics:
           type: boolean
       type: object
-    CloudintegrationtypesTelemetryCollectionStrategy:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
-      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -2457,33 +2457,6 @@ export interface CloudintegrationtypesAccountDTO {
 	updatedAt?: string;
 }
 
-export interface DashboardtypesStorableDashboardDataDTO {
-	[key: string]: unknown;
-}
-
-export interface CloudintegrationtypesDashboardDTO {
-	definition?: DashboardtypesStorableDashboardDataDTO;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface CloudintegrationtypesAssetsDTO {
-	/**
-	 * @type array,null
-	 */
-	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
-}
-
 export interface CloudintegrationtypesAzureConnectionArtifactDTO {
 	/**
 	 * @type string
@@ -2866,6 +2839,54 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	providerAccountId?: string;
 }
 
+export interface CloudintegrationtypesStorableIntegrationDashboardDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	dashboardId?: string;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	provider?: string;
+	/**
+	 * @type string
+	 */
+	slug?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
+export interface CloudintegrationtypesServiceDashboardDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	integrationDashboard?: CloudintegrationtypesStorableIntegrationDashboardDTO;
+	/**
+	 * @type string
+	 */
+	title?: string;
+}
+
+export interface CloudintegrationtypesServiceAssetsDTO {
+	/**
+	 * @type array
+	 */
+	dashboards: CloudintegrationtypesServiceDashboardDTO[];
+}
+
 export interface CloudintegrationtypesSupportedSignalsDTO {
 	/**
 	 * @type boolean
@@ -2877,13 +2898,8 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }
 
-export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
-}
-
 export interface CloudintegrationtypesServiceDTO {
-	assets: CloudintegrationtypesAssetsDTO;
+	assets: CloudintegrationtypesServiceAssetsDTO;
 	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO | null;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
@@ -2899,7 +2915,6 @@ export interface CloudintegrationtypesServiceDTO {
 	 */
 	overview: string;
 	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -3705,6 +3720,10 @@ export interface DashboardtypesCustomVariableSpecDTO {
 	customValue: string;
 }
 
+export interface DashboardtypesStorableDashboardDataDTO {
+	[key: string]: unknown;
+}
+
 export enum DashboardtypesSourceDTO {
 	user = 'user',
 	system = 'system',

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -55,7 +55,6 @@ const buildServiceDetailsResponse = (
 				},
 			},
 		},
-		telemetryCollectionStrategy: { aws: {} },
 	},
 });
 

frontend/src/container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards.styles.scss

@@ -53,6 +53,11 @@
 				}
 			}
 
+			&.aws-service-dashboard-item-disabled {
+				cursor: not-allowed;
+				opacity: 0.6;
+			}
+
 			.aws-service-dashboard-item-content {
 				display: flex;
 				flex-direction: column;

frontend/src/container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import {
-	CloudintegrationtypesDashboardDTO,
+	CloudintegrationtypesServiceDashboardDTO,
 	CloudintegrationtypesServiceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -8,6 +10,9 @@ import { withBasePath } from 'utils/basePath';
 
 import './ServiceDashboards.styles.scss';
 
+const DISABLED_TOOLTIP =
+	'Enable metrics collection for this service to view this dashboard.';
+
 function ServiceDashboards({
 	service,
 	isInteractive = true,
@@ -25,68 +30,85 @@ function ServiceDashboards({
 		<div className="aws-service-dashboards">
 			<div className="aws-service-dashboards-title">Dashboards</div>
 			<div className="aws-service-dashboards-items">
-				{dashboards.map((dashboard: CloudintegrationtypesDashboardDTO) => {
+				{dashboards.map(
-					if (!dashboard.id) {
+					(dashboard: CloudintegrationtypesServiceDashboardDTO, index: number) => {
-						return null;
+						const dashboardId = dashboard.integrationDashboard?.dashboardId;
-					}
+						const isEnabled = Boolean(dashboardId) && isInteractive;
+						const itemKey = dashboardId || `${dashboard.title}-${index}`;
+						const dashboardUrl = dashboardId ? `/dashboard/${dashboardId}` : '';
 
-					const dashboardUrl = `/dashboard/${dashboard.id}`;
+						const handleClick = (event: MouseEvent<HTMLDivElement>): void => {
+							if (!isEnabled) {
+								return;
+							}
+							if (event.metaKey || event.ctrlKey) {
+								window.open(
+									withBasePath(dashboardUrl),
+									'_blank',
+									'noopener,noreferrer',
+								);
+								return;
+							}
+							safeNavigate(dashboardUrl);
+						};
 
-					return (
+						const handleAuxClick = (event: MouseEvent<HTMLDivElement>): void => {
-						<div
+							if (!isEnabled) {
-							key={dashboard.id}
+								return;
-							className={`aws-service-dashboard-item ${
+							}
-								isInteractive ? 'aws-service-dashboard-item-clickable' : ''
+							if (event.button === 1) {
-							}`}
+								window.open(
-							role={isInteractive ? 'button' : undefined}
+									withBasePath(dashboardUrl),
-							tabIndex={isInteractive ? 0 : -1}
+									'_blank',
-							onClick={(event): void => {
+									'noopener,noreferrer',
-								if (!isInteractive) {
+								);
-									return;
+							}
-								}
+						};
-								if (event.metaKey || event.ctrlKey) {
+
-									window.open(
+						const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
-										withBasePath(dashboardUrl),
+							if (!isEnabled) {
-										'_blank',
+								return;
-										'noopener,noreferrer',
+							}
-									);
+							if (event.key === 'Enter' || event.key === ' ') {
-									return;
+								event.preventDefault();
-								}
 								safeNavigate(dashboardUrl);
-							}}
+							}
-							onAuxClick={(event): void => {
+						};
-								if (!isInteractive) {
+
-									return;
+						const card = (
-								}
+							<div
-								if (event.button === 1) {
+								className={`aws-service-dashboard-item ${
-									window.open(
+									isEnabled ? 'aws-service-dashboard-item-clickable' : ''
-										withBasePath(dashboardUrl),
+								} ${!dashboardId ? 'aws-service-dashboard-item-disabled' : ''}`}
-										'_blank',
+								role={isEnabled ? 'button' : undefined}
-										'noopener,noreferrer',
+								tabIndex={isEnabled ? 0 : -1}
-									);
+								aria-disabled={!dashboardId}
-								}
+								onClick={handleClick}
-							}}
+								onAuxClick={handleAuxClick}
-							onKeyDown={(event): void => {
+								onKeyDown={handleKeyDown}
-								if (!isInteractive) {
+							>
-									return;
+								<div className="aws-service-dashboard-item-content">
-								}
+									<div className="aws-service-dashboard-item-title">
-								if (event.key === 'Enter' || event.key === ' ') {
+										{dashboard.title}
-									event.preventDefault();
+									</div>
-									safeNavigate(dashboardUrl);
+									<div className="aws-service-dashboard-item-description">
-								}
+										{dashboard.description}
-							}}
+									</div>
-						>
-							<div className="aws-service-dashboard-item-content">
-								<div className="aws-service-dashboard-item-title">
-									{dashboard.title}
-								</div>
-								<div className="aws-service-dashboard-item-description">
-									{dashboard.description}
 								</div>
 							</div>
-						</div>
+						);
-					);
+
-				})}
+						if (!dashboardId) {
+							return (
+								<TooltipSimple key={itemKey} title={DISABLED_TOOLTIP} arrow>
+									{card}
+								</TooltipSimple>
+							);
+						}
+
+						return <div key={itemKey}>{card}</div>;
+					},
+				)}
 			</div>
 		</div>
 	);