OU-1212: Create Observability Services landing page

Makefile

@@ -3,7 +3,7 @@ PLATFORMS   ?= linux/arm64,linux/amd64
 ORG         ?= openshift-observability-ui
 PLUGIN_NAME ?=monitoring-plugin
 IMAGE       ?= quay.io/${ORG}/${PLUGIN_NAME}:${VERSION}
-MONITORING_FEATURES    ?=alerting,alerting-management,targets,legacy-dashboards,metrics
+MONITORING_FEATURES    ?=alerting,alerting-management,overview,targets,legacy-dashboards,metrics
 ALL_FEATURES    ?=$(MONITORING_FEATURES),cluster-health-analyzer,perses-dashboards
 MCP_DEVSPACE_FEATURES  ?=cluster-health-analyzer,perses-dashboards,perses-ui-customization,acm-alerting
 

README.md

@@ -16,6 +16,7 @@ Feature flags should be added to the Feature enum [here](pkg/server/server.go) a
 | legacy-dashboards   | 5.0+        |
 | metrics             | 5.0+        |
 | targets             | 5.0+        |
+| overview            | 5.0+        |
 
 ## monitoring-plugin
 
@@ -170,7 +171,7 @@ $ make start-console
 $ make start-coo-backend
 ```
 
-`make start-coo-backend` will inject the `alerting,targets,legacy-dashboards,metrics,incidents,perses-dashboards` features.
+`make start-coo-backend` will inject the `alerting,targets,overview,legacy-dashboards,metrics,incidents,perses-dashboards` features.
 
 #### Local Development with Perses Proxy
 

cmd/plugin-backend.go

@@ -17,7 +17,7 @@ var (
 	portArg             = flag.Int("port", 9443, "server port to listen on\nports 9444 and 9445 reserved for other use")
 	certArg             = flag.String("cert", "", "cert file path to enable TLS (disabled by default)")
 	keyArg              = flag.String("key", "", "private key file path to enable TLS (disabled by default)")
-	featuresArg         = flag.String("features", "", "enabled features, comma separated.\noptions: ['acm-alerting', 'alerting', 'alerting-management', 'legacy-dashboards', 'metrics', 'targets', 'perses-dashboards', 'cluster-health-analyzer']")
+	featuresArg         = flag.String("features", "", "enabled features, comma separated.\noptions: ['acm-alerting', 'alerting', 'alerting-management', 'legacy-dashboards', 'metrics', 'targets', 'overview', 'perses-dashboards', 'cluster-health-analyzer']")
 	staticPathArg       = flag.String("static-path", "/opt/app-root/web/dist", "static files path to serve frontend")
 	configPathArg       = flag.String("config-path", "/opt/app-root/config", "config files path")
 	pluginConfigArg     = flag.String("plugin-config-path", "/etc/plugin/config.yaml", "plugin yaml configuration")

config/overview.patch.json

@@ -0,0 +1,30 @@
+[
+  {
+    "op": "add",
+    "path": "/extensions/0",
+    "value": {
+      "type": "console.navigation/href",
+      "properties": {
+        "id": "overview",
+        "name": "%plugin__monitoring-plugin~Observability services%",
+        "href": "/monitoring/overview",
+        "perspective": "admin",
+        "section": "observe"
+      }
+    }
+  },
+  {
+    "op": "add",
+    "path": "/extensions/0",
+    "value": {
+      "type": "console.page/route",
+      "properties": {
+        "exact": false,
+        "path": "/monitoring/overview",
+        "component": {
+          "$codeRef": "OverviewPage.MpCmoOverviewPage"
+        }
+      }
+    }
+  }
+]

pkg/server/plugin_handler.go

@@ -37,12 +37,13 @@ func patchManifest(baseManifestData []byte, cfg *Config) []byte {
 		file    string
 		enabled bool
 	}{
-		{"monitoring-plugin.patch.json", features[Alerting] || features[LegacyDashboards] || features[Metrics] || features[Targets]},
+		{"monitoring-plugin.patch.json", features[Alerting] || features[LegacyDashboards] || features[Metrics] || features[Targets] || features[Overview]},
 		{"alerting.patch.json", features[Alerting]},
 		{"metrics.patch.json", features[Metrics]},
 		{"legacy-dashboards.patch.json", features[LegacyDashboards]},
 		{"targets.patch.json", features[Targets]},
 		{"monitoring-console-plugin.patch.json", features[ClusterHealthAnalyzer] || features[PersesDashboards] || features[AcmAlerting]},
+		{"overview.patch.json", features[Overview]},
 		{"acm-alerting.patch.json", features[AcmAlerting]},
 		{"cluster-health-analyzer.patch.json", features[ClusterHealthAnalyzer]},
 		{"perses-dashboards.patch.json", features[PersesDashboards]},

pkg/server/server.go

@@ -63,6 +63,7 @@ const (
 	LegacyDashboards      Feature = "legacy-dashboards"
 	Metrics               Feature = "metrics"
 	Targets               Feature = "targets"
+	Overview              Feature = "overview"
 	PersesDashboards      Feature = "perses-dashboards"
 	PersesUICustomization Feature = "perses-ui-customization"
 	ClusterHealthAnalyzer Feature = "cluster-health-analyzer"

web/cypress/component/overview/CapabilitiesSection.cy.tsx

@@ -0,0 +1,80 @@
+import { MemoryRouter } from 'react-router';
+
+import AdvancedSection from '@/features/overview/components/capabilities/AdvancedSection';
+import CapabilitiesSection from '@/features/overview/components/capabilities/CapabilitiesSection';
+import { ObservabilityCapability } from '@/features/overview/types/types';
+import { DataTestIDs } from '@/shared/constants/data-test';
+
+import { buildCapability, monitoringPlugin } from './fixtures';
+
+const capabilityCard = (id: string) =>
+  cy.get(`[data-test="${DataTestIDs.OverviewPage.CapabilityCard}-${id}"]`);
+
+const allCapabilityCards = () =>
+  cy.get(`[data-test^="${DataTestIDs.OverviewPage.CapabilityCard}-"]`);
+
+const capabilities: ObservabilityCapability[] = [
+  buildCapability(),
+  buildCapability({ id: 'logging', title: 'Logging' }),
+  buildCapability({ id: 'dashboards', title: 'Dashboards' }),
+];
+
+const mountSection = (Section: typeof CapabilitiesSection, props: { loaded: boolean }) => {
+  cy.mount(
+    <MemoryRouter>
+      <Section
+        capabilities={capabilities}
+        loaded={props.loaded}
+        monitoringPlugin={monitoringPlugin}
+      />
+    </MemoryRouter>,
+  );
+};
+
+describe('CapabilitiesSection', () => {
+  it('renders one card per capability once loaded', () => {
+    mountSection(CapabilitiesSection, { loaded: true });
+
+    cy.get(`[data-test="${DataTestIDs.OverviewPage.CapabilitiesSection}"]`).should('be.visible');
+    cy.contains('h2', 'Capabilities').should('be.visible');
+    allCapabilityCards().should('have.length', 3);
+    capabilityCard('monitoring').should('be.visible');
+    capabilityCard('logging').should('be.visible');
+    capabilityCard('dashboards').should('be.visible');
+  });
+
+  it('shows a spinner and no cards while loading', () => {
+    mountSection(CapabilitiesSection, { loaded: false });
+
+    cy.get(`[data-test="${DataTestIDs.OverviewPage.InstalledLoading}"]`).should('be.visible');
+    allCapabilityCards().should('not.exist');
+  });
+
+  it('renders the heading with no cards when there are no capabilities', () => {
+    cy.mount(
+      <MemoryRouter>
+        <CapabilitiesSection capabilities={[]} loaded monitoringPlugin={monitoringPlugin} />
+      </MemoryRouter>,
+    );
+
+    cy.contains('h2', 'Capabilities').should('be.visible');
+    allCapabilityCards().should('not.exist');
+  });
+});
+
+describe('AdvancedSection', () => {
+  it('renders one card per capability once loaded', () => {
+    mountSection(AdvancedSection, { loaded: true });
+
+    cy.get(`[data-test="${DataTestIDs.OverviewPage.AdvancedSection}"]`).should('be.visible');
+    cy.contains('h2', 'Advanced analytics').should('be.visible');
+    allCapabilityCards().should('have.length', 3);
+  });
+
+  it('shows a spinner and no cards while loading', () => {
+    mountSection(AdvancedSection, { loaded: false });
+
+    cy.get(`[data-test="${DataTestIDs.OverviewPage.RecommendedLoading}"]`).should('be.visible');
+    allCapabilityCards().should('not.exist');
+  });
+});