feat: re enable dev console views

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

Author: jgbernalp

web/console-extensions.json

@@ -355,7 +355,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/alerts/:ruleID",
       "component": {
-        "$codeRef": "DevRedirects.AlertRedirect"
+        "$codeRef": "AlertsDetailsPage.MpCmoAlertsDetailsPage"
       }
     }
   },
@@ -365,7 +365,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/rules/:id",
       "component": {
-        "$codeRef": "DevRedirects.RulesRedirect"
+        "$codeRef": "AlertRulesDetailsPage.MpCmoAlertRulesDetailsPage"
       }
     }
   },
@@ -375,7 +375,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/silences/:id",
       "component": {
-        "$codeRef": "DevRedirects.SilenceRedirect"
+        "$codeRef": "SilencesDetailsPage.MpCmoSilencesDetailsPage"
       }
     }
   },
@@ -385,7 +385,7 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/silences/:id/edit",
       "component": {
-        "$codeRef": "DevRedirects.SilenceEditRedirect"
+        "$codeRef": "SilenceEditPage.MpCmoSilenceEditPage"
       }
     }
   },
@@ -395,18 +395,52 @@
       "exact": false,
       "path": "/dev-monitoring/ns/:ns/silences/~new",
       "component": {
-        "$codeRef": "DevRedirects.SilenceNewRedirect"
+        "$codeRef": "SilenceCreatePage.MpCmoCreateSilencePage"
       }
     }
   },
   {
-    "type": "console.page/route",
+    "type": "console.tab",
     "properties": {
-      "exact": false,
-      "path": "/dev-monitoring/ns/:ns/metrics",
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Silences%",
+      "href": "silences",
+      "component": {
+        "$codeRef": "SilencesPage.MpCmoSilencesPage"
+      }
+    }
+  },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Metrics%",
+      "href": "metrics",
+      "component": {
+        "$codeRef": "MetricsPage.MpCmoDevMetricsPage"
+      }
+    }
+  },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Alerts%",
+      "href": "alerts",
+      "component": {
+        "$codeRef": "AlertsPage.MpCmoAlertsPage"
+      }
+    }
+  },
+  {
+    "type": "console.tab",
+    "properties": {
+      "contextId": "dev-console-observe",
+      "name": "%plugin__monitoring-plugin~Alerting Rules%",
+      "href": "rules",
       "component": {
-        "$codeRef": "DevRedirects.MetricsRedirect"
+        "$codeRef": "AlertRulesPage.MpCmoAlertRulesPage"
       }
     }
   }
-]
+]

web/package.json

@@ -182,7 +182,6 @@
       "IncidentsPage": "./components/Incidents/IncidentsPage",
       "TargetsPage": "./components/targets-page",
       "PrometheusRedirectPage": "./components/redirects/prometheus-redirect-page",
-      "DevRedirects": "./components/redirects/dev-redirects",
       "MonitoringContext": "./contexts/MonitoringContext"
     },
     "dependencies": {

web/src/components/MetricsPage.tsx

@@ -1324,6 +1324,7 @@ const MetricsPage_: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const [units, setUnits] = useQueryParam(QueryParams.Units, StringParam);
   const { setNamespace } = useQueryNamespace();
+  const { displayNamespaceSelector } = useMonitoring();
 
   const dispatch = useDispatch();
 
@@ -1402,14 +1403,18 @@ const MetricsPage_: FC = () => {
 
   return (
     <>
-      <DocumentTitle>{t('Metrics')}</DocumentTitle>
-      <NamespaceBar
-        onNamespaceChange={(namespace) => {
-          dispatch(queryBrowserDeleteAllQueries());
-          setNamespace(namespace);
-        }}
-      />
-      <ListPageHeader title={t('Metrics')}>
+      {displayNamespaceSelector && (
+        <>
+          <DocumentTitle>{t('Metrics')}</DocumentTitle>
+          <NamespaceBar
+            onNamespaceChange={(namespace) => {
+              dispatch(queryBrowserDeleteAllQueries());
+              setNamespace(namespace);
+            }}
+          />
+        </>
+      )}
+      <ListPageHeader title={displayNamespaceSelector ? t('Metrics') : ' '}>
         <Split hasGutter>
           <SplitItem data-test={DataTestIDs.MetricGraphUnitsDropDown}>
             <Tooltip content={<>{t('This dropdown only formats results.')}</>}>
@@ -1470,6 +1475,20 @@ export const MpCmoMetricsPage: React.FC = () => {
   );
 };
 
+export const MpCmoDevMetricsPage: React.FC = () => {
+  return (
+    <MonitoringProvider
+      monitoringContext={{
+        plugin: 'monitoring-plugin',
+        prometheus: 'cmo',
+        displayNamespaceSelector: false,
+      }}
+    >
+      <MetricsPage />
+    </MonitoringProvider>
+  );
+};
+
 type QueryTableProps = {
   index: number;
   namespace?: string;

web/src/components/alerting/AlertingPage.tsx

@@ -58,8 +58,6 @@ const namespacedPages = [
 const AlertingPage: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const dispatch = useDispatch();
-  const { useAlertsTenancy, accessCheckLoading } = useMonitoring();
-
   const [perspective] = useActivePerspective();
   const { setNamespace } = useQueryNamespace();
 
@@ -97,7 +95,7 @@ const AlertingPage: FC = () => {
 
   return (
     <>
-      {namespacedPages.includes(pathname) && !accessCheckLoading && useAlertsTenancy && (
+      {namespacedPages.includes(pathname) && (
         <NamespaceBar
           onNamespaceChange={(namespace) => {
             dispatch(alertingClearSelectorData(prometheus, namespace));

web/src/components/alerting/AlertsPage.tsx

@@ -110,7 +110,20 @@ const AlertsPage_: FC = () => {
     rowFilters = rowFilters.filter((filter) => filter.type !== 'alert-source');
   }
 
-  const [staticData, filteredData, onFilterChange] = useListPageFilter(alerts, rowFilters);
+  /**
+   * Filters alerts based on tenancy:
+   * - with tenancy: alerts are automatically pre-filtered.
+   * - without tenancy (admin): filters by selected namespace for UX consistency.
+   * - "All Projects": returns all alerts, including those without a namespace label.
+   */
+  const namespacedAlerts =
+    useAlertsTenancy || ALL_NAMESPACES_KEY === namespace
+      ? alerts
+      : alerts.filter((a) => a.labels.namespace === namespace);
+  const [staticData, filteredData, onFilterChange] = useListPageFilter(
+    namespacedAlerts,
+    rowFilters,
+  );
 
   const columns = useAggregateAlertColumns();
   const selectedFilters = useSelectedFilters();

web/src/components/metrics/promql-expression-input.tsx

@@ -358,6 +358,7 @@ export const PromQLExpressionInput: FC<PromQLExpressionInputProps> = ({
       .then((response) => {
         const metrics = response?.data;
         setMetricNames(metrics);
+        setErrorMessage(undefined);
       })
       .catch((err) => {
         if (err.name !== 'AbortError') {

web/src/components/redirects/dev-redirects.tsx

@@ -19,6 +19,11 @@ type MonitoringContextType = {
   useMetricsTenancy: boolean;
   /** Dictates if the users access is being loaded. */
   accessCheckLoading: boolean;
+  /**
+   * Dictates if the namespace selector is shown inside the view,
+   * in some perspectives the selector already exist outside monitoring components scope
+   */
+  displayNamespaceSelector: boolean;
 };
 
 export const MonitoringContext = React.createContext<MonitoringContextType>({
@@ -27,12 +32,14 @@ export const MonitoringContext = React.createContext<MonitoringContextType>({
   useAlertsTenancy: false,
   useMetricsTenancy: false,
   accessCheckLoading: true,
+  displayNamespaceSelector: true,
 });
 
 export const MonitoringProvider: React.FC<{
   monitoringContext: {
     plugin: MonitoringPlugins;
     prometheus: Prometheus;
+    displayNamespaceSelector?: boolean;
   };
 }> = ({ children, monitoringContext }) => {
   const [allNamespaceAlertsTenancy, alertAccessCheckLoading] = useAccessReview({
@@ -56,6 +63,7 @@ export const MonitoringProvider: React.FC<{
       useAlertsTenancy: monitoringContext.prometheus === 'cmo' && !allNamespaceAlertsTenancy,
       useMetricsTenancy: monitoringContext.prometheus === 'cmo' && !allNamespaceMeticsTenancy,
       accessCheckLoading: alertAccessCheckLoading || metricsAccessCheckLoading,
+      displayNamespaceSelector: monitoringContext.displayNamespaceSelector ?? true,
     };
   }, [
     monitoringContext,

web/src/contexts/MonitoringContext.tsx

@@ -2,13 +2,20 @@ import { useContext } from 'react';
 import { MonitoringContext } from '../contexts/MonitoringContext';
 
 export const useMonitoring = () => {
-  const { prometheus, plugin, useAlertsTenancy, useMetricsTenancy, accessCheckLoading } =
-    useContext(MonitoringContext);
+  const {
+    prometheus,
+    plugin,
+    useAlertsTenancy,
+    useMetricsTenancy,
+    accessCheckLoading,
+    displayNamespaceSelector,
+  } = useContext(MonitoringContext);
   return {
     prometheus,
     plugin,
     useAlertsTenancy,
     useMetricsTenancy,
     accessCheckLoading,
+    displayNamespaceSelector,
   };
 };