OU-1486: [release-coo-ocp-4.19] refactor: remove i18n script in favor of env var configuration

Dockerfile.mcp

@@ -7,13 +7,11 @@ USER 0
 ENV HUSKY=0
 COPY web/package*.json web/
 COPY Makefile Makefile
-RUN cd web && npm ci --legacy-peer-deps --ignore-scripts
+RUN make install-frontend-ci
 
 COPY web/ web/
 COPY config/ config/
-COPY scripts/update-plugin-name.sh scripts/update-plugin-name.sh
-RUN make update-plugin-name
-ENV I18N_NAMESPACE="plugin__monitoring-console-plugin"
+ENV CONSOLE_PLUGIN_NAME="monitoring-console-plugin"
 RUN make build-frontend
 
 FROM registry.access.redhat.com/ubi9/go-toolset:1.26 AS go-builder

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}
-FEATURES    ?= incidents,perses-dashboards,dev-config
+FEATURES    ?= cluster-health-analyzer,perses-dashboards,dev-config
 
 export NODE_OPTIONS?=--max_old_space_size=4096
 
@@ -55,7 +55,7 @@ build-backend:
 
 .PHONY: start-backend
 start-backend:
-	go run ./cmd/plugin-backend.go -port='9001' -config-path='./config' -static-path='./web/dist'
+	go run ./cmd/plugin-backend.go -port='9443' -config-path='./config' -static-path='./web/dist'
 
 .PHONY: test-backend
 test-backend:
@@ -78,10 +78,6 @@ build-image:
 install:
 	make install-frontend && make install-backend
 
-.PHONY: update-plugin-name
-update-plugin-name:
-	./scripts/update-plugin-name.sh
-
 .PHONY: deploy
 deploy:
 	make lint-backend
@@ -101,10 +97,6 @@ build-mcp-image:
 build-dev-mcp-image:
 	DOCKER_FILE_NAME="Dockerfile.dev-mcp" REPO="monitoring-console-plugin" scripts/build-image.sh
 
-.PHONY: start-feature-console
-start-feature-console:
-	PLUGIN_PORT=9443 ./scripts/start-console.sh
-
 .PHONY: start-feature-backend
 start-feature-backend:
 	go run ./cmd/plugin-backend.go -port='9443' -config-path='./config' -static-path='./web/dist' -features='${FEATURES}'

README.md

@@ -61,9 +61,9 @@ Changes to the store must be completed in the `openshift/console` codebase and a
 Install the [devspace](https://www.devspace.sh/docs/getting-started/installation) cli.
 
 1. Install the frontend dependencies running `make install-frontend`.
-2. Start the frontend `make start-feature-frontend`.
-4. Select the namespace the monitoring-plugin is located in `devspace use namespace openshift-monitoring`.
-5. In a different terminal start the devspace sync `devspace dev`.
+2. Start the frontend `make start-frontend`.
+3. Select the namespace the monitoring-plugin is located in `devspace use namespace openshift-monitoring`.
+4. In a different terminal start the devspace sync `devspace dev`.
 
 When running the `devspace dev` command, the pipeline will run the `scale_down_cmo` function to prevent CMO from fighting over control of the pod. After CMO has been scaled down, devspace will "take over" the monitoring-plugin pod, grabbing all of the certificates and backend binary and configuration to run in the devspace pod. The backend will stay the same as what is built in the Dockerfile.devspace file, only the frontend changes will be reflected live in cluster.
 
@@ -109,12 +109,13 @@ The application will be running at [localhost:9000](http://localhost:9000/).
 ## monitoring-console-plugin (mcp)
 
 ### Dependencies
+
 1. [Local Development Dependencies](README#Dependencies)
 2. [yq](https://github.com/mikefarah/yq) for acm deployment
 3. sed ([gnu-sed](https://formulae.brew.sh/formula/gnu-sed) for mac, with sed being aliased to that gnu-sed)
 
-
 ### Building an image
+
 Images for the mcp can be built by running the following command. Due to the limitation of linux/amd64 image builds on Apple Silicon Macs's, some of the changes are run locally and not just in the Dockerfiles. If you are on a Mac, it is not suggested to cancel the exection of this scipt part way through
 
 ```bash
@@ -125,12 +126,12 @@ make build-dev-mcp-image
 
 Feature flags are used by the mcp mode to dictate the specific features which are enabled when the server starts up. Feature flags should be added to the Feature enum [here](pkg/server.go) and to the useFeature hook [here](web/src/components/hooks/useFeatures.ts). When any feature flag is enabled the default extension points are overridden, including a new monitoring-console-plugin exclusive redux store and all extension points for the flags. These feature extension points are created through the use of [json-patches](https://datatracker.ietf.org/doc/html/rfc6902), such as the `acm-alerting` patch [here](config/acm-alerting.patch.json). The server looks for a patch in the format of `{feature-flag-name}.patch.json` to apply.
 
-| Feature           | OCP Version |
-|-------------------|-------------|
-| acm-alerting      | 4.14+       |
-| perses-dashboards | 4.14+       |
-| incidents         | 4.17+       |
-| dev-config        |             |
+| Feature                 | OCP Version |
+| ----------------------- | ----------- |
+| acm-alerting            | 4.14+       |
+| perses-dashboards       | 4.14+       |
+| cluster-health-analyzer | 4.19+       |
+| dev-config              |             |
 
 #### ACM
 
@@ -152,26 +153,26 @@ Since the store for the `monitoring-plugin` is stored in the `openshift/console`
 # Login to an OpenShift cluster
 $ oc login <clusterAddress> -u <username> -p <password>
 
-# Start podman (or Docker) - Linux machines can skip this part 
+# Start podman (or Docker)
 $ podman machine init
 $ podman machine start
 
 # Install dependencies
 $ make install
 
-# Run the application
+# Run the frontend
 $ make start-frontend
-
 # In a separate terminal
-$ make start-feature-console
-
+# Run the backend
+$ make start-backend
 # In a separate terminal
-$ make start-feature-backend
+$ make start-console
 ```
 
 `make start-feature-backend` will inject the `perses-dashboards`, `incidents`, and `dev-config` features by default. Features such as `acm-alerting` which take in extra parameters will need to run the `make start-feature-backend` command with the appropriate environment variables, such as `MONITORING_PLUGIN_ALERTMANAGER`.
 
 #### Local Development with Perses Proxy
+
 The bridge script `start-console.sh` is configured to proxy to a local Perses instance running at port `:8080`. To run the local Perses instance you will need to clone the [perses/perses](https://github.com/perses/perses) repository and follow the start up instructions in [ui/README.md](https://github.com/perses/perses/blob/63601751674403f626d1dea3dec168bdad0ef1c7/ui/README.md) :
 
 ```
@@ -188,16 +189,18 @@ $ ./scripts/api_backend_dev.sh
 # Lastly navigate to http://localhost:8080/ to see Perses app running
 ```
 
-##### Install COO && Perses Datasource && Perses Sample Dashboard 
-1. Install COO through the OpenShift UI > OperatorHub > Cluster Observability Operator 
-2. Install UIPlugin > monitoring 
+##### Install COO && Perses Datasource && Perses Sample Dashboard
+
+1. Install COO through the OpenShift UI > OperatorHub > Cluster Observability Operator
+2. Install UIPlugin > monitoring
 3. oc apply -f <PERSES_DATASOURCE_YAML>
-   - See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/thanos-querier-datasource.yaml) 
+   - See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/thanos-querier-datasource.yaml)
 4. oc apply -f <PERSES_DASHBOARD_YAML>
-   - See sample yaml  [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/perses-dashboard.yaml)
+   - See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/perses-dashboard.yaml)
+
+##### Port forward Perses Datasource
 
-##### Port forward Perses Datasource 
-To use the PERSES_DATASOURCE you deployed above, you'll need to forward it to your local machine then proxy it using the local Perses Instance. 
+To use the PERSES_DATASOURCE you deployed above, you'll need to forward it to your local machine then proxy it using the local Perses Instance.
 
 ```
 # Forward cluster Prometheus Instance to localhost:9090

scripts/start-console.sh

@@ -4,9 +4,9 @@ set -euo pipefail
 
 CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:latest"}
 CONSOLE_PORT=${CONSOLE_PORT:=9000}
-PLUGIN_PORT=${PLUGIN_PORT:=9001}
+PLUGIN_PORT=${PLUGIN_PORT:=9443}
 CONSOLE_IMAGE_PLATFORM=${CONSOLE_IMAGE_PLATFORM:="linux/amd64"}
-npm_package_consolePlugin_name=${npm_package_consolePlugin_name:="monitoring-plugin"}
+npm_package_consolePlugin_name=${CONSOLE_PLUGIN_NAME:-"monitoring-plugin"}
 
 echo "Starting local OpenShift console..."
 
@@ -19,6 +19,7 @@ BRIDGE_K8S_MODE_OFF_CLUSTER_THANOS=$(oc -n openshift-config-managed get configma
 BRIDGE_K8S_MODE_OFF_CLUSTER_ALERTMANAGER=$(oc -n openshift-config-managed get configmap monitoring-shared-config -o jsonpath='{.data.alertmanagerPublicURL}')
 BRIDGE_K8S_AUTH_BEARER_TOKEN=$(oc whoami --show-token 2>/dev/null)
 BRIDGE_USER_SETTINGS_LOCATION="localstorage"
+BRIDGE_I18N_NAMESPACES="plugin__${npm_package_consolePlugin_name}"
 
 echo "API Server: $BRIDGE_K8S_MODE_OFF_CLUSTER_ENDPOINT"
 echo "Console Image: $CONSOLE_IMAGE"

web/webpack.config.ts

@@ -5,6 +5,7 @@ import { DefinePlugin, Configuration as WebpackConfiguration } from 'webpack';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import * as path from 'path';
 import { ConsoleRemotePlugin } from '@openshift-console/dynamic-plugin-sdk-webpack';
+import pkg from './package.json';
 
 interface Configuration extends WebpackConfiguration {
   devServer?: WebpackDevServerConfiguration;
@@ -82,17 +83,38 @@ const config: Configuration = {
   },
   plugins: [
     new ConsoleRemotePlugin({
+      pluginMetadata: process.env.CONSOLE_PLUGIN_NAME
+        ? { ...pkg.consolePlugin, name: process.env.CONSOLE_PLUGIN_NAME }
+        : undefined,
       validateExtensionIntegrity: false,
     }),
     new CopyWebpackPlugin({
-      patterns: [{ from: path.resolve(__dirname, 'locales'), to: 'locales' }],
+      patterns: [
+        {
+          from: path.resolve(__dirname, 'locales'),
+          to({ absoluteFilename }) {
+            if (!absoluteFilename) {
+              return 'locales/[path][name][ext]';
+            }
+            const i18nNamespace = `plugin__${process.env.CONSOLE_PLUGIN_NAME ?? 'monitoring-plugin'}`;
+            const relativePath = path.relative(
+              path.resolve(__dirname, 'locales'),
+              absoluteFilename,
+            );
+            return path.join(
+              'locales',
+              relativePath.replace('plugin__monitoring-plugin', i18nNamespace),
+            );
+          },
+        },
+      ],
     }),
     new DefinePlugin({
       // Build-time injection of proxy path for config module
       PERSES_PROXY_BASE_URL: JSON.stringify('/api/proxy/plugin/monitoring-console-plugin/perses'),
-      'process.env.I18N_NAMESPACE': process.env.I18N_NAMESPACE
-        ? JSON.stringify(process.env.I18N_NAMESPACE)
-        : JSON.stringify('plugin__monitoring-plugin'),
+      'process.env.I18N_NAMESPACE': JSON.stringify(
+        `plugin__${process.env.CONSOLE_PLUGIN_NAME ?? 'monitoring-plugin'}`,
+      ),
     }),
   ],
   devtool: 'source-map',