[#180] monitoring: broker metrics for restricted mode

Display broker metrics for restricted mode. The user needs to activate
the monitoring capabilities when creating the broker.

Author: lavocatt

README.md

@@ -10,6 +10,7 @@ This project is a ActiveMQ Artemis Self Provisioning Plugin to the Administrator
   - [Installing the cert-manager operator](#installing-the-cert-manager-operator)
   - [Installing trust-manager](#installing-trust-manager)
   - [Setting up Chain of Trust](#setting-up-chain-of-trust)
+  - [Metrics (User Workload Monitoring)](#metrics-user-workload-monitoring)
   - [Running the plugin](#running-the-plugin)
   - [Trusting Self-Signed Certificates](#trusting-self-signed-certificates-for-websocket-hot-reloading)
 - [PKI Setup and Cleanup Scripts](#pki-setup-and-cleanup-scripts)
@@ -120,6 +121,30 @@ yarn chain-of-trust setup
 
 For detailed options, cleanup procedures, and manual commands, see the [PKI Setup and Cleanup Scripts](#pki-setup-and-cleanup-scripts) section.
 
+### Metrics (User Workload Monitoring)
+
+Broker metrics in user namespaces require OpenShift user workload monitoring.
+Enable it with the following ConfigMap:
+
+```bash
+cat <<'EOF' | kubectl apply -f -
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: cluster-monitoring-config
+  namespace: openshift-monitoring
+data:
+  config.yaml: |
+    enableUserWorkload: true
+EOF
+```
+
+Verify:
+
+```bash
+kubectl get pods -n openshift-user-workload-monitoring
+```
+
 ### Running the plugin
 
 #### Download the secrets so that the bridge can authenticate the user with the api server backend

locales/en/plugin__activemq-artemis-self-provisioning-plugin.json

@@ -37,15 +37,53 @@
   "CPU Usage": "CPU Usage",
   "Memory Usage": "Memory Usage",
   "Memory usage": "Memory usage",
+  "Pending Messages": "Pending Messages",
+  "Total Produced": "Total Produced",
+  "Throughput": "Throughput",
+  "Messages": "Messages",
+  "Messages per second": "Messages per second",
   "Bytes": "Bytes",
   "Time": "Time",
   "Information about {{title}}": "Information about {{title}}",
   "Metrics data is loading": "Metrics data is loading",
   "Data unavailable": "Data unavailable",
+  "Waiting for the first scrape. This can take up to a minute after enabling monitoring.": "Waiting for the first scrape. This can take up to a minute after enabling monitoring.",
   "All Metrics": "All Metrics",
   "Memory Usage Metrics": "Memory Usage Metrics",
   "CPU Usage Metrics": "CPU Usage Metrics",
+  "Broker Metrics": "Broker Metrics",
   "Metrics": "Metrics",
+  "Monitoring": "Monitoring",
+  "Enable monitoring to create a Prometheus client certificate, metrics service, and ServiceMonitor.": "Enable monitoring to create a Prometheus client certificate, metrics service, and ServiceMonitor.",
+  "Enable monitoring to create Prometheus resources.": "Enable monitoring to create Prometheus resources.",
+  "Enable monitoring to create the metrics service.": "Enable monitoring to create the metrics service.",
+  "Enable monitoring to create the ServiceMonitor.": "Enable monitoring to create the ServiceMonitor.",
+  "Prometheus certificate": "Prometheus certificate",
+  "Metrics service": "Metrics service",
+  "ServiceMonitor": "ServiceMonitor",
+  "Monitoring prerequisites": "Monitoring prerequisites",
+  "User workload monitoring must be enabled cluster-wide. The namespace must be labeled to allow scraping.": "User workload monitoring must be enabled cluster-wide. The namespace must be labeled to allow scraping.",
+  "Open service": "Open service",
+  "Open ServiceMonitor": "Open ServiceMonitor",
+  "User monitoring label": "User monitoring label",
+  "Open namespace": "Open namespace",
+  "Ensuring Prometheus certificate...": "Ensuring Prometheus certificate...",
+  "Ensuring metrics service...": "Ensuring metrics service...",
+  "Ensuring ServiceMonitor...": "Ensuring ServiceMonitor...",
+  "Ensuring namespace label for user monitoring...": "Ensuring namespace label for user monitoring...",
+  "Removing namespace label for user monitoring...": "Removing namespace label for user monitoring...",
+  "Prometheus certificate is ready.": "Prometheus certificate is ready.",
+  "Metrics service is ready.": "Metrics service is ready.",
+  "ServiceMonitor is ready.": "ServiceMonitor is ready.",
+  "Namespace is labeled for user monitoring.": "Namespace is labeled for user monitoring.",
+  "Namespace is not labeled for monitoring.": "Namespace is not labeled for monitoring.",
+  "Namespace label removed.": "Namespace label removed.",
+  "Failed to create Prometheus certificate.": "Failed to create Prometheus certificate.",
+  "Failed to create metrics service.": "Failed to create metrics service.",
+  "Failed to create ServiceMonitor.": "Failed to create ServiceMonitor.",
+  "Enable monitoring to label the namespace for scraping.": "Enable monitoring to label the namespace for scraping.",
+  "Failed to label namespace for monitoring.": "Failed to label namespace for monitoring.",
+  "Failed to remove namespace label.": "Failed to remove namespace label.",
   "0": "Refresh Off",
   "15s": "15 seconds",
   "30s": "30 seconds",

src/brokers/broker-details/components/Overview/Metrics/Metrics.tsx

@@ -2,6 +2,9 @@ import { FC, useReducer } from 'react';
 import { CardBrokerMemoryUsageMetricsContainer } from './components/CardBrokerMemoryUsageMetrics/CardBrokerMemoryUsageMetrics.container';
 import { MetricsActions } from './components/MetricsActions/MetricsActions';
 import { CardBrokerCPUUsageMetricsContainer } from './components/CardBrokerCPUUsageMetrics/CardBrokerCPUUsageMetrics.container';
+import { CardBrokerPendingMessagesMetricsContainer } from './components/CardBrokerPendingMessagesMetrics/CardBrokerPendingMessagesMetrics.container';
+import { CardBrokerTotalProducedMetricsContainer } from './components/CardBrokerTotalProducedMetrics/CardBrokerTotalProducedMetrics.container';
+import { CardBrokerThroughputMetricsContainer } from './components/CardBrokerThroughputMetrics/CardBrokerThroughputMetrics.container';
 import { MetricsType, MetricsState, MetricsAction } from './utils/types';
 import { MetricsLayout } from './components/MetricsLayout/MetricsLayout';
 
@@ -44,6 +47,13 @@ export const Metrics: FC<{ name: string; namespace: string; size: number }> = ({
         <CardBrokerMemoryUsageMetricsContainer state={state} />
       }
       metricsCPUUsage={<CardBrokerCPUUsageMetricsContainer state={state} />}
+      metricsPendingMessages={
+        <CardBrokerPendingMessagesMetricsContainer state={state} />
+      }
+      metricsTotalProduced={
+        <CardBrokerTotalProducedMetricsContainer state={state} />
+      }
+      metricsThroughput={<CardBrokerThroughputMetricsContainer state={state} />}
       metricsActions={<MetricsActions state={state} dispatch={dispatch} />}
     />
   );

src/brokers/broker-details/components/Overview/Metrics/components/CardBrokerPendingMessagesMetrics/CardBrokerPendingMessagesMetrics.container.tsx

@@ -0,0 +1,117 @@
+import { FC, useState, useMemo, useCallback } from 'react';
+import { parsePrometheusDuration } from '../../../../Overview/Metrics/utils/prometheus';
+import { getMaxSamplesForSpan, formatNumber } from '../../utils/format';
+import { pendingMessagesQuery } from '../../utils/queries';
+import { MetricsPolling } from '../MetricsPolling/MetricsPolling';
+import { useTranslation } from '@app/i18n/i18n';
+import { CardQueryBrowser } from '../CardQueryBrowser/CardQueryBrowser';
+import { PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
+import { MetricsState } from '../../utils/types';
+import { MetricsErrorBoundary } from '../../MetricsErrorBoundary';
+
+type CardBrokerPendingMessagesMetricsContainerProps = {
+  state: MetricsState;
+};
+
+type AxisDomain = [number, number];
+
+export const CardBrokerPendingMessagesMetricsContainer: FC<
+  CardBrokerPendingMessagesMetricsContainerProps
+> = ({ state }) => {
+  const { t } = useTranslation();
+
+  const [xDomain] = useState<AxisDomain>();
+  const [results, setResults] = useState<{
+    [key: number]: {
+      result: PrometheusResponse | null;
+      loaded: boolean;
+      loadError: unknown | null;
+    };
+  }>({});
+
+  const queries = useMemo(
+    () =>
+      [...Array(state.size)].map((_, i) =>
+        pendingMessagesQuery(state.name, state.namespace, i),
+      ),
+    [state.size, state.name, state.namespace],
+  );
+
+  const handleMetricResult = useCallback(
+    (
+      index: number,
+      result: PrometheusResponse | null,
+      loaded: boolean,
+      loadError: unknown | null,
+    ) => {
+      setResults((prev) => ({
+        ...prev,
+        [index]: { result, loaded, loadError },
+      }));
+    },
+    [],
+  );
+
+  const { metricsResult, loaded, errorObject } = useMemo(() => {
+    const resultsArray = Object.values(results);
+
+    const loaded =
+      queries.length > 0 &&
+      resultsArray.length === queries.length &&
+      resultsArray.every((r) => r.loaded);
+
+    const errorObject =
+      resultsArray.find((r) => r.loadError)?.loadError || null;
+
+    const metricsResult = resultsArray
+      .map((r) => r.result)
+      .filter((res): res is PrometheusResponse => !!res);
+
+    return { metricsResult, loaded, errorObject };
+  }, [results, queries]);
+
+  const samples = getMaxSamplesForSpan(parsePrometheusDuration(state.span));
+  const endTime = xDomain?.[1];
+
+  const yTickFormat = useCallback(
+    (tick: number) => formatNumber(String(tick)),
+    [],
+  );
+
+  return (
+    <>
+      {queries.map((query, i) => (
+        <MetricsPolling
+          key={i}
+          query={query}
+          index={i}
+          namespace={state.namespace}
+          span={parsePrometheusDuration(state.span)}
+          samples={samples}
+          endTime={endTime}
+          delay={parsePrometheusDuration(state.pollTime)}
+          onResult={handleMetricResult}
+        />
+      ))}
+      <MetricsErrorBoundary>
+        <CardQueryBrowser
+          isInitialLoading={false}
+          backendUnavailable={false}
+          allMetricsSeries={metricsResult}
+          span={parsePrometheusDuration(state.span)}
+          isLoading={!loaded}
+          fixedXDomain={xDomain}
+          samples={samples}
+          formatSeriesTitle={(labels) => labels.pod}
+          title={t('Pending Messages')}
+          helperText={t('Pending Messages')}
+          dataTestId={'metrics-broker-pending-messages'}
+          yTickFormat={yTickFormat}
+          label={'\n\n\n\n' + t('Messages')}
+          ariaTitle={t('Pending Messages')}
+          error={errorObject}
+        />
+      </MetricsErrorBoundary>
+    </>
+  );
+};

src/brokers/broker-details/components/Overview/Metrics/components/CardBrokerThroughputMetrics/CardBrokerThroughputMetrics.container.tsx

@@ -0,0 +1,117 @@
+import { FC, useState, useMemo, useCallback } from 'react';
+import { parsePrometheusDuration } from '../../../../Overview/Metrics/utils/prometheus';
+import { getMaxSamplesForSpan, formatNumber } from '../../utils/format';
+import { throughputQuery } from '../../utils/queries';
+import { MetricsPolling } from '../MetricsPolling/MetricsPolling';
+import { useTranslation } from '@app/i18n/i18n';
+import { CardQueryBrowser } from '../CardQueryBrowser/CardQueryBrowser';
+import { PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
+import { MetricsState } from '../../utils/types';
+import { MetricsErrorBoundary } from '../../MetricsErrorBoundary';
+
+type CardBrokerThroughputMetricsContainerProps = {
+  state: MetricsState;
+};
+
+type AxisDomain = [number, number];
+
+export const CardBrokerThroughputMetricsContainer: FC<
+  CardBrokerThroughputMetricsContainerProps
+> = ({ state }) => {
+  const { t } = useTranslation();
+
+  const [xDomain] = useState<AxisDomain>();
+  const [results, setResults] = useState<{
+    [key: number]: {
+      result: PrometheusResponse | null;
+      loaded: boolean;
+      loadError: unknown | null;
+    };
+  }>({});
+
+  const queries = useMemo(
+    () =>
+      [...Array(state.size)].map((_, i) =>
+        throughputQuery(state.name, state.namespace, i),
+      ),
+    [state.size, state.name, state.namespace],
+  );
+
+  const handleMetricResult = useCallback(
+    (
+      index: number,
+      result: PrometheusResponse | null,
+      loaded: boolean,
+      loadError: unknown | null,
+    ) => {
+      setResults((prev) => ({
+        ...prev,
+        [index]: { result, loaded, loadError },
+      }));
+    },
+    [],
+  );
+
+  const { metricsResult, loaded, errorObject } = useMemo(() => {
+    const resultsArray = Object.values(results);
+
+    const loaded =
+      queries.length > 0 &&
+      resultsArray.length === queries.length &&
+      resultsArray.every((r) => r.loaded);
+
+    const errorObject =
+      resultsArray.find((r) => r.loadError)?.loadError || null;
+
+    const metricsResult = resultsArray
+      .map((r) => r.result)
+      .filter((res): res is PrometheusResponse => !!res);
+
+    return { metricsResult, loaded, errorObject };
+  }, [results, queries]);
+
+  const samples = getMaxSamplesForSpan(parsePrometheusDuration(state.span));
+  const endTime = xDomain?.[1];
+
+  const yTickFormat = useCallback(
+    (tick: number) => formatNumber(String(tick), 2, 'mps'),
+    [],
+  );
+
+  return (
+    <>
+      {queries.map((query, i) => (
+        <MetricsPolling
+          key={i}
+          query={query}
+          index={i}
+          namespace={state.namespace}
+          span={parsePrometheusDuration(state.span)}
+          samples={samples}
+          endTime={endTime}
+          delay={parsePrometheusDuration(state.pollTime)}
+          onResult={handleMetricResult}
+        />
+      ))}
+      <MetricsErrorBoundary>
+        <CardQueryBrowser
+          isInitialLoading={false}
+          backendUnavailable={false}
+          allMetricsSeries={metricsResult}
+          span={parsePrometheusDuration(state.span)}
+          isLoading={!loaded}
+          fixedXDomain={xDomain}
+          samples={samples}
+          formatSeriesTitle={(labels) => labels.pod}
+          title={t('Throughput')}
+          helperText={t('Throughput')}
+          dataTestId={'metrics-broker-throughput'}
+          yTickFormat={yTickFormat}
+          label={'\n\n\n\n' + t('Messages per second')}
+          ariaTitle={t('Throughput')}
+          error={errorObject}
+        />
+      </MetricsErrorBoundary>
+    </>
+  );
+};