handle Virtualization perspective

Author: zhuje

config/incidents.patch.json

@@ -5,7 +5,22 @@
     "value": {
       "type": "console.tab",
       "properties": {
-        "contextId": "admin-console-observe",
+        "contextId": "admin-alerts-nav",
+        "name": "%plugin__monitoring-console-plugin~Incidents%",
+        "href": "incidents",
+        "component": {
+          "$codeRef": "IncidentsPage"
+        }
+      }
+    }
+  }, 
+  {
+    "op": "add",
+    "path": "/extensions/1",
+    "value": {
+      "type": "console.tab",
+      "properties": {
+        "contextId": "virtualization-perspective-alerts-nav",
         "name": "%plugin__monitoring-console-plugin~Incidents%",
         "href": "incidents",
         "component": {

web/src/components/alerting/AlertingPage.tsx

@@ -1,8 +1,7 @@
 import { PageSection, Title } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-
-import { HorizontalNav } from '@openshift-console/dynamic-plugin-sdk';
+import { HorizontalNav, useActivePerspective } from '@openshift-console/dynamic-plugin-sdk';
 
 const AlertsPage = React.lazy(
   () => import(/* webpackChunkName: "AlertsPage" */ '../alerting/AlertsPage'),
@@ -17,6 +16,12 @@ const AlertRulesPage = React.lazy(
 const AlertingPage: React.FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
+  const [perspective] = useActivePerspective();
+
+  // contextId allow console.tab extensions to be injected
+  // https://github.com/openshift/console/blob/main/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md#consoletab
+  const contextId = `${perspective}-alerts-nav`;
+
   const pages = [
     {
       href: 'alerts',
@@ -45,7 +50,7 @@ const AlertingPage: React.FC = () => {
     <>
       <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h1">{t('Alerting')}</Title>
-        <HorizontalNav contextId="admin-console-observe" pages={pages} />
+        <HorizontalNav contextId={contextId} pages={pages} />
       </PageSection>
     </>
   );