[Task](greenhouse): Research integration approach for external plugins and modules with different design systems

[ArtieReus]

Task Description

Investigate and document the best approach for integrating external plugins and small code modules/components into Greenhouse when they are based on different design systems.

Goals

• Research best practices for supporting external plugins with varying implementations
• Explore integration patterns for small code portions/components using different design systems
• Document recommended integration patterns and guidelines

Scope

• External plugin integration mechanisms
• Small code modules/components with non-standard design systems
• Design system isolation and coexistence strategies (CSS isolation, shadow DOM, iframes, etc.)
• Developer experience and API design considerations
• Build and bundling implications

Deliverables

• Research findings document
• Recommended integration approach
• Potential implementation guidelines or RFC

Additional Context

POC Implementation Details

A working proof of concept has been completed and is available in the branch:
ibakshay/perses-dashboard-app

Related Issue: apeiro#99

What Was Implemented

The POC creates a new Insights App (apps/insights) that integrates the Perses dashboard framework to visualize Greenhouse metrics.

Key Components:

1. App Structure (apps/insights/):

   • New standalone app using Perses dashboard components
   • Integrated with Juno UI components and theming
   • TypeScript-based with Vite build system

2. Perses Integration:

   • Dashboard Wrapper (PersesDashboardWrapper.tsx): Main component wrapping Perses ViewDashboard
   • Plugin Registry (PersesPluginRegistry.tsx): Registers all Perses chart plugins (bar, pie, gauge, timeseries, table, etc.)
   • Config Loader (persesConfigLoader.ts): Loads dashboard and datasource configurations from JSON manifests
   • API Integration (persesApi.ts): Handles Prometheus datasource API and theme configuration

3. Dependencies Added:

   "@perses-dev/dashboards": "^0.53.0-beta.2"
   "@perses-dev/components": "^0.53.0-beta.2"
   "@perses-dev/plugin-system": "^0.53.0-beta.2"
   "@perses-dev/prometheus-plugin": "^0.55.0"
   // Plus 12+ chart-specific plugins (bar, gauge, pie, timeseries, table, etc.)
   

4. Dashboard Manifests (src/perses-manifests/):

• greenhouse-dashboard.json: Main dashboard configuration with panels for:
  • Plugin Workload Status (Table)
  • Various metrics visualizations
• prometheus-datasource.json: Prometheus datasource configuration

5. Features Implemented:

• ✅ Read-only dashboard view
• ✅ Variable support enabled
• ✅ Prometheus datasource integration
• ✅ Theme switching (dark/light mode) via Juno themes
• ✅ MUI + Emotion theming integration
• ✅ Responsive layout