feat: add alerting rules tab to dev console

Signed-off-by: Gabriel Bernal <[email protected]>

Author: jgbernalp

web/console-extensions.json

@@ -170,6 +170,17 @@
       }
     }
   },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Alerting Rules%",
+      "href": "alertrules",
+      "component": {
+        "$codeRef": "AlertRulesPage"
+      }
+    }
+  },
   {
     "type": "console.redux-reducer",
     "properties": {
@@ -261,9 +272,7 @@
     "type": "console.page/route",
     "properties": {
       "exact": false,
-      "path": [
-        "/virt-monitoring"
-      ],
+      "path": ["/virt-monitoring"],
       "component": { "$codeRef": "AlertingPage" }
     }
   },

web/src/components/alerting/AlertRulesDetailsPage.tsx

@@ -58,7 +58,6 @@ import { formatPrometheusDuration } from '../console/console-shared/src/datetime
 import { ExternalLink } from '../console/utils/link';
 import {
   getAlertRulesUrl,
-  getAlertsUrl,
   getAlertUrl,
   getLegacyObserveState,
   getNewSilenceAlertUrl,
@@ -187,16 +186,9 @@ const AlertRulesDetailsPage_: React.FC = () => {
         <PageGroup>
           <PageBreadcrumb hasBodyWrapper={false}>
             <Breadcrumb>
-              {perspective === 'dev' && (
-                <BreadcrumbItem>
-                  <Link to={getAlertsUrl(perspective, namespace)}>{t('Alerts')}</Link>
-                </BreadcrumbItem>
-              )}
-              {perspective !== 'dev' && (
-                <BreadcrumbItem>
-                  <Link to={getAlertRulesUrl(perspective)}>{t('Alerting rules')}</Link>
-                </BreadcrumbItem>
-              )}
+              <BreadcrumbItem>
+                <Link to={getAlertRulesUrl(perspective, namespace)}>{t('Alerting rules')}</Link>
+              </BreadcrumbItem>
               <BreadcrumbItem isActive>{t('Alerting rule details')}</BreadcrumbItem>
             </Breadcrumb>
           </PageBreadcrumb>

web/src/components/alerting/AlertRulesPage.tsx

@@ -7,6 +7,7 @@ import {
   RowProps,
   Rule,
   TableColumn,
+  useActiveNamespace,
   useListPageFilter,
   VirtualizedTable,
 } from '@openshift-console/dynamic-plugin-sdk';
@@ -96,7 +97,7 @@ const RuleTableRow: React.FC<RowProps<Rule>> = ({ obj }) => {
             <ResourceIcon kind={RuleResource.kind} />
           </FlexItem>
           <FlexItem>
-            <Link to={getRuleUrl(perspective, obj)}>
+            <Link to={getRuleUrl(perspective, obj, obj.labels.namespace)}>
               <Truncate content={obj.name} />
             </Link>
           </FlexItem>
@@ -118,6 +119,7 @@ const RuleTableRow: React.FC<RowProps<Rule>> = ({ obj }) => {
 const AlertRulesPage_: React.FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { alertsKey, silencesKey, rulesKey, perspective, defaultAlertTenant } = usePerspective();
+  const [namespace] = useActiveNamespace();
 
   useAlertsPoller();
 
@@ -137,6 +139,14 @@ const AlertRulesPage_: React.FC = () => {
     [data],
   );
 
+  const namespacedData = React.useMemo(() => {
+    if (perspective === 'dev') {
+      return data?.filter((rule) => rule.labels?.namespace === namespace);
+    }
+
+    return data;
+  }, [data, perspective, namespace]);
+
   const rowFilters: RowFilter[] = [
     // TODO: The "name" filter doesn't really fit useListPageFilter's idea of a RowFilter, but
     //       useListPageFilter doesn't yet provide a better way to add a filter like this
@@ -163,7 +173,7 @@ const AlertRulesPage_: React.FC = () => {
     },
   ];
 
-  const [staticData, filteredData, onFilterChange] = useListPageFilter(data, rowFilters);
+  const [staticData, filteredData, onFilterChange] = useListPageFilter(namespacedData, rowFilters);
 
   const columns = React.useMemo<TableColumn<Rule>[]>(
     () => [

web/src/components/hooks/usePerspective.tsx

@@ -125,12 +125,14 @@ export const getAlertsUrl = (perspective: Perspective, namespace?: string) => {
 };
 
 // There is no equivalent rules list page in the developer perspective
-export const getAlertRulesUrl = (perspective: Perspective) => {
+export const getAlertRulesUrl = (perspective: Perspective, namespace?: string) => {
   switch (perspective) {
     case 'acm':
       return `/multicloud${RuleResource.plural}`;
     case 'virtualization-perspective':
       return `/virt-monitoring/alertrules`;
+    case 'dev':
+      return `/dev-monitoring/ns/${namespace}/alertrules`;
     case 'admin':
     default:
       return RuleResource.plural;