add vscode remote container infra

.devcontainer/Dockerfile.console

@@ -0,0 +1,19 @@
+FROM quay.io/openshift/origin-console:latest
+COPY --from=openshift/origin-cli:latest /usr/bin/oc /usr/local/bin/oc
+
+ENV OC_URL=$OC_URL
+ENV OC_PASS=$OC_PASS
+ENV OC_USER=$OC_USER
+ENV OC_PLUGIN_NAME=$OC_PLUGIN_NAME
+
+USER root
+CMD eval "oc login $OC_URL -u $OC_USER -p $OC_PASS --insecure-skip-tls-verify" && \
+    /opt/bridge/bin/bridge -public-dir=/opt/bridge/static \
+    -plugins $OC_PLUGIN_NAME=http://localhost:9001 \
+    -k8s-mode-off-cluster-thanos=$(oc -n openshift-config-managed get configmap monitoring-shared-config -o jsonpath='{.data.thanosPublicURL}') \
+    -k8s-mode-off-cluster-endpoint=$(oc whoami --show-server) \
+    -k8s-mode-off-cluster-skip-verify-tls=true \
+    -k8s-auth-bearer-token=$(oc whoami --show-token) \
+    -k8s-auth="bearer-token" \
+    -user-auth="disabled" \
+    -k8s-mode="off-cluster"

.devcontainer/Dockerfile.plugin

@@ -0,0 +1,2 @@
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:16 as build
+COPY --from=openshift/origin-cli:latest /usr/bin/oc /usr/local/bin/oc

.devcontainer/devcontainer.json

@@ -0,0 +1,26 @@
+{
+	"name": "Console + Dynamic Plugin",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "plugin",
+	"workspaceFolder": "/workspace",
+	"settings": {},
+	"initializeCommand": ".devcontainer/init.sh",
+	"postCreateCommand": "yarn && eval 'oc login $OC_URL -u $OC_USER -p $OC_PASS --insecure-skip-tls-verify'",
+	"forwardPorts": [9000,9001],
+	"portsAttributes": {
+		"9000": {
+			"label": "Console",
+		},
+		"9001": {
+			"label": "Plugin static files",
+			"onAutoForward": "silent"
+		}
+	},
+	"features": {},
+	"extensions": [
+		"ms-azuretools.vscode-docker",
+		"ms-vscode.vscode-typescript-next",
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+	],
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3.8'
+# create dev.env with the following values:
+# OC_URL
+# OC_USER
+# OC_PASS
+# OC_PLUGIN_NAME
+services:
+  console:
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile.console
+    env_file: dev.env
+    restart: unless-stopped
+    healthcheck:
+      test: oc whoami
+      interval: 1m30s
+      timeout: 10s
+      retries: 5
+
+  plugin:
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile.plugin
+    env_file: dev.env
+    depends_on:
+      - console
+    network_mode: service:console
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+    # Cache local workspace and copy shell history.
+    volumes:
+      - ..:/workspace:cached
+      - ~/.bash_history:/root/.bash_history
+      - ~/.zsh_history:/root/.zsh_history

.devcontainer/init.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+if [[ ! -f .devcontainer/dev.env ]]
+then
+    cat << EOF
+    env file 'dev.env' does not exist in .devcontainer, please create it and add the the correct values for your cluster.
+    OC_PLUGIN_NAME=my-plugin
+    OC_URL=https://api.example.com:6443
+    OC_USER=kubeadmin
+    OC_PASS=<password>
+EOF
+    exit 2
+else
+    echo 'found 'dev.env' in .devcontainer'
+fi
+
+# if one of the variables are missing, abort the build.
+success=1
+! grep -q OC_PLUGIN_NAME= ".devcontainer/dev.env" && success=0
+! grep -q OC_URL= ".devcontainer/dev.env" && success=0
+! grep -q OC_USER= ".devcontainer/dev.env" && success=0
+! grep -q OC_PASS= ".devcontainer/dev.env" && success=0
+
+if ((success)); then
+    echo 'dev.env is formatted correctly, proceeding.'
+else
+    cat << EOF
+    dev.env is not formatted correctly, please add the the correct values for your cluster.
+    OC_PLUGIN_NAME=my-plugin
+    OC_URL=https://api.example.com:6443
+    OC_USER=kubeadmin
+    OC_PASS=<password>
+EOF
+exit 2
+fi

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+.devcontainer/dev.env

README.md

@@ -6,7 +6,7 @@ plugin. It requires OpenShift 4.10.
 [Dynamic plugins](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk)
 allow you to extend the
 [OpenShift UI](https://github.com/openshift/console)
-at runtime, adding custom pages and other extensions.  They are based on
+at runtime, adding custom pages and other extensions. They are based on
 [webpack module federation](https://webpack.js.org/concepts/module-federation/).
 Plugins are registered with console using the `ConsolePlugin` custom resource
 and enabled in the console operator config by a cluster administrator.
@@ -42,7 +42,9 @@ file and the React component is declared in
 You can run the plugin using a local development environment or build an image
 to deploy it to a cluster.
 
-## Local development
+## Development
+
+### Option 1: Local
 
 1. `yarn install`
 2. `yarn run start`
@@ -56,6 +58,28 @@ 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.
 
+### Option 2: Docker + VSCode Remote Container
+
+Make sure the
+[Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+extension is installed. This method uses Docker Compose where one container is
+the OpenShift console and the second container is the plugin. It requires that
+you have access to an existing OpenShift cluster. After the initial build, the
+cached containers will help you start developing in seconds.
+
+1. Create a `dev.env` file inside the `.devcontainer` folder with the correct values for your cluster:
+
+```bash
+OC_PLUGIN_NAME=my-plugin
+OC_URL=https://api.example.com:6443
+OC_USER=kubeadmin
+OC_PASS=<password>
+```
+
+2. `(Ctrl+Shift+P) => Remote Containers: Open Folder in Container...`
+3. `yarn run start`
+4. Navigate to <http://localhost:9000/example>
+
 ## Docker image
 
 Before you can deploy your plugin on a cluster, you must build an image and
@@ -103,6 +127,6 @@ oc patch consoles.operator.openshift.io cluster \
 
 ## References
 
-* [Console Plugin SDK README](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk)
-* [Customization Plugin Example](https://github.com/spadgett/console-customization-plugin)
-* [Dynamic Plugin Enhancement Proposal](https://github.com/openshift/enhancements/blob/master/enhancements/console/dynamic-plugins.md)
+- [Console Plugin SDK README](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk)
+- [Customization Plugin Example](https://github.com/spadgett/console-customization-plugin)
+- [Dynamic Plugin Enhancement Proposal](https://github.com/openshift/enhancements/blob/master/enhancements/console/dynamic-plugins.md)