feat: allow users to run console in a container

Allow users to run console in a container for plugin development without
requiring the VSCode Remote Containers plugin. This adds a `yarn run
start-console` command that will pull the latest console image and run
it locally configured for your plugin. It requires either Docker or
podman to be installed.

README.md

@@ -12,7 +12,8 @@ Plugins are registered with console using the `ConsolePlugin` custom resource
 and enabled in the console operator config by a cluster administrator.
 
 [Node.js](https://nodejs.org/en/) and [yarn](https://yarnpkg.com) are required
-to build and run the example.
+to build and run the example. To run OpenShift console in a container, either
+[Docker](https://www.docker.com) or [podman](https://podman.io) are required.
 
 ## Getting started
 
@@ -48,15 +49,11 @@ to deploy it to a cluster.
 
 1. `yarn install`
 2. `yarn run start`
+3. `oc login` (requires an OpenShift cluster)
+4. `yarn run start-console` (requires Docker or podman)
 
-The server runs on port 9001 with CORS enabled.
-
-See the plugin development section in
-[Console Dynamic Plugins README](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk/README.md)
-for details on how to run OpenShift console using local plugins.
-
-When a local console server is running, visit <http://localhost:9000/example>
-to see the example plugin page.
+This will run the OpenShift console in a container connected to the cluster
+you've logged into. The plugin HTTP server runs on port 9001 with CORS enabled.
 
 ### Option 2: Docker + VSCode Remote Container
 

package.json

@@ -8,6 +8,7 @@
     "build": "yarn clean && NODE_ENV=production yarn ts-node node_modules/.bin/webpack",
     "build-dev": "yarn clean && yarn ts-node node_modules/.bin/webpack",
     "start": "yarn ts-node node_modules/.bin/webpack serve",
+    "start-console": "./start-console.sh",
     "i18n": "i18next \"src/**/*.{js,jsx,ts,tsx}\" [-oc] -c i18next-parser.config.js",
     "ts-node": "ts-node -O '{\"module\":\"commonjs\"}'",
     "lint": "eslint ./src --fix"

start-console.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:latest"}
+CONSOLE_PORT=${CONSOLE_PORT:=9000}
+
+echo "Starting local OpenShift console..."
+
+BRIDGE_USER_AUTH="disabled"
+BRIDGE_K8S_MODE="off-cluster"
+BRIDGE_K8S_AUTH="bearer-token"
+BRIDGE_K8S_MODE_OFF_CLUSTER_SKIP_VERIFY_TLS=true
+BRIDGE_K8S_MODE_OFF_CLUSTER_ENDPOINT=$(oc whoami --show-server)
+BRIDGE_K8S_MODE_OFF_CLUSTER_THANOS=$(oc -n openshift-config-managed get configmap monitoring-shared-config -o jsonpath='{.data.thanosPublicURL}')
+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_PLUGINS="${npm_package_consolePlugin_name}=http://host.docker.internal:9001"
+
+echo "API Server: $BRIDGE_K8S_MODE_OFF_CLUSTER_ENDPOINT"
+echo "Console Image: $CONSOLE_IMAGE"
+echo "Console URL: http://localhost:${CONSOLE_PORT}"
+
+if [ -x "$(command -v podman)" ]; then
+    BRIDGE_PLUGINS="${npm_package_consolePlugin_name}=http://host.containers.internal:9001"
+    podman run --rm -p "$CONSOLE_PORT":9000 --env-file <(set | grep BRIDGE) $CONSOLE_IMAGE
+else
+    BRIDGE_PLUGINS="${npm_package_consolePlugin_name}=http://host.docker.internal:9001"
+    docker run --rm -p "$CONSOLE_PORT":9000 --env-file <(set | grep BRIDGE) $CONSOLE_IMAGE
+fi

webpack.config.ts

@@ -58,6 +58,8 @@ const config: Configuration = {
   devServer: {
     static: './dist',
     port: 9001,
+    // Allow bridge running in a container to connect to the plugin dev server.
+    allowedHosts: 'all',
     headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",