Fix cell diagram filtering for dynamic component types

  Update CellDiagramInfoService to use ComponentTypeUtils instead of hardcoded
  type checks ('Service', 'WebApplication'). Now properly handles new dynamic
  component type format (e.g., 'deployment/http-service').

  - Add openchoreo-common dependency to openchoreo-backend
  - Pass config to CellDiagramInfoService constructor
  - Replace hardcoded type filters with page variant-based filtering
  - Support all service and website component types via pattern matching

  Fixes cell diagram returning empty components after component type system changes.

Author: kaviththiranga

plugins/openchoreo-backend/package.json

@@ -41,6 +41,7 @@
     "@backstage/plugin-kubernetes-backend": "^0.20.2",
     "@backstage/plugin-kubernetes-node": "^0.3.4",
     "@backstage/plugin-permission-common": "^0.9.1",
+    "@openchoreo/backstage-plugin-common": "workspace:^",
     "@openchoreo/openchoreo-client-node": "workspace:^",
     "@wso2/cell-diagram": "0.2.0",
     "express": "^4.17.1",

plugins/openchoreo-backend/src/plugin.ts

@@ -52,6 +52,7 @@ export const choreoPlugin = createBackendPlugin({
         const cellDiagramInfoService = new CellDiagramInfoService(
           logger,
           openchoreoConfig.get('baseUrl'),
+          config,
         );
 
         const buildTemplateInfoService = new BuildTemplateInfoService(

plugins/openchoreo-backend/src/services/CellDiagramService/CellDiagramInfoService.ts

@@ -1,4 +1,5 @@
 import { LoggerService } from '@backstage/backend-plugin-api';
+import { Config } from '@backstage/config';
 
 import {
   Project,
@@ -10,6 +11,7 @@ import {
   createOpenChoreoApiClient,
   type OpenChoreoComponents,
 } from '@openchoreo/openchoreo-client-node';
+import { ComponentTypeUtils } from '@openchoreo/backstage-plugin-common';
 
 // Use generated type from OpenAPI spec
 type ModelsCompleteComponent =
@@ -44,17 +46,20 @@ enum ConnectionType {
 export class CellDiagramInfoService implements CellDiagramService {
   private readonly logger: LoggerService;
   private readonly baseUrl: string;
+  private readonly componentTypeUtils: ComponentTypeUtils;
 
   /**
    * Private constructor for CellDiagramInfoService.
    * Use the static create method to instantiate.
    * @param {LoggerService} logger - Logger service instance
    * @param {string} baseUrl - Base url of openchoreo api
+   * @param {Config} config - Backstage config for component type mappings
    * @private
    */
-  public constructor(logger: LoggerService, baseUrl: string) {
+  public constructor(logger: LoggerService, baseUrl: string, config: Config) {
     this.baseUrl = baseUrl;
     this.logger = logger;
+    this.componentTypeUtils = ComponentTypeUtils.fromConfig(config);
   }
 
   /**
@@ -143,10 +148,17 @@ export class CellDiagramInfoService implements CellDiagramService {
 
       const components: Component[] = completeComponents
         .filter(component => {
-          this.logger.info(JSON.stringify(component, null, 2));
-          return (
-            component.type === 'Service' || component.type === 'WebApplication'
+          if (!component.type) return false;
+
+          const pageVariant = this.componentTypeUtils.getPageVariant(
+            component.type,
+          );
+          this.logger.debug(
+            `Component ${component.name} has type ${component.type} mapped to variant ${pageVariant}`,
           );
+
+          // Include service and website components in cell diagram
+          return pageVariant === 'service' || pageVariant === 'website';
         })
         .map(component => {
           // Get connections from workload data included in component response
@@ -159,7 +171,12 @@ export class CellDiagramInfoService implements CellDiagramService {
             completeComponents,
           );
 
-          if (component.type === 'Service') {
+          const pageVariant = this.componentTypeUtils.getPageVariant(
+            component.type!,
+          );
+
+          // Map based on page variant instead of hardcoded type names
+          if (pageVariant === 'service') {
             // Extract API information from the Service.apis object
             const apis = component.service?.apis || {};
             const services: { [key: string]: any } = {};
@@ -196,7 +213,7 @@ export class CellDiagramInfoService implements CellDiagramService {
               connections: connections,
             } as Component;
           }
-          if (component.type === 'WebApplication') {
+          if (pageVariant === 'website') {
             return {
               id: component.name || '',
               label: component.name || '',

yarn.lock

@@ -9191,6 +9191,7 @@ __metadata:
     "@backstage/plugin-kubernetes-backend": "npm:^0.20.2"
     "@backstage/plugin-kubernetes-node": "npm:^0.3.4"
     "@backstage/plugin-permission-common": "npm:^0.9.1"
+    "@openchoreo/backstage-plugin-common": "workspace:^"
     "@openchoreo/openchoreo-client-node": "workspace:^"
     "@types/express": "npm:^4.17.6"
     "@types/supertest": "npm:^2.0.12"