Serverless Functions Console

A Functions-as-a-Service PoC UI for the OpenShift Web Console. Developers create, edit, and deploy serverless functions without CLI knowledge.

Built as an OpenShift Console dynamic plugin using React, TypeScript, and PatternFly 6.

Check out the Github page for a quick start or read ahead.

Team Values

• Support each other and find time for each other
• Deliver high quality output
• Communicate often and speak freely without hesitation
• Care about bringing value to the customer

Guides

Guide	Description
Agile Workflow	Issue tracking, branching, pull requests
Architecture	Layered architecture, dependency rules, and React patterns
Style Guide	Code style, naming conventions, commit conventions, CSS rules, and OCP plugin constraints
Testing	TDD approach, test layers, mock strategy, and file conventions

Templates

Template	Description
PR Template	Pull request description format
Jira Epic	Template for creating Jira epics
Jira Story	Template for creating Jira stories

Slash Commands

Command	Description
/begin	Start a session, orient, and pick work
/commit	Create a git commit
/create-pr	Run pre-checks, review, and create a PR
/e2e	Scaffold and debug Playwright e2e tests
/scrutinise	Critically review your own output

Deployment on cluster

Prerequisites

• oc CLI
• An OpenShift 4.19 cluster
• Github Personal Access Token with administration, content, secret and workflow write permissions in all repositories

Quick install

oc new-project console-functions-plugin
oc apply -f https://functions-dev.github.io/ocp-console-plugin/plugin.yaml

Manual install (requires Helm)

oc new-project console-functions-plugin
helm upgrade -i console-functions-plugin charts/openshift-console-plugin \
    -n console-functions-plugin --create-namespace \
    --set "plugin.image=ghcr.io/functions-dev/ocp-console-plugin-functions-plugin:latest@sha256:<digest>"

To deploy a specific build, use its git commit SHA as the tag:

--set "plugin.image=ghcr.io/functions-dev/ocp-console-plugin-functions-plugin:sha-<commit>"

Available image tags are listed in the container registry. Consult the chart values file for additional parameters.

Development

Prerequisites

• Node.js (v18+)
• Yarn (v4)
• Go (v1.24+)
• Helm
• oc CLI
• Docker or podman 3.2.0+
• An OpenShift cluster
• Github Personal Access Token with administration, content and workflow write permissions in all repositories
• gh CLI (optional, enables your agent to create/update PRs)
• inotify-tools (optional, enables Go backend auto-recompile on file changes)
• Superpowers (optional, enables your coding agents to brainstorm, write plans, use tdd, etc.)
• Jira CLI (optional, enables your coding agent to read Jira tickets)

Setup

1. oc login to your OpenShift cluster
2. yarn install
3. ./init.sh

This builds the pages assets (plugin.yaml, landing page), compiles the Go backend, starts the webpack dev server, and launches the OpenShift console in a container. Navigate to http://localhost:9000 to see the running plugin.

To stop the dev environment:

./init.sh --stop

To use random ports (useful when defaults are already in use):

./init.sh --randomize-ports

Running e2e tests

E2e tests use Playwright against a running cluster. Set BRIDGE_GITHUB_PAT in .env with a GitHub PAT that has repo scope, then:

yarn test:e2e              # all tests, headless
yarn test:e2e:report       # open HTML report
yarn test:e2e:headed       # visible browser
yarn test:e2e:ui           # interactive UI mode

See docs/TESTING.md for full conventions, helpers, and environment variables.

Viewing GitHub Pages locally

The landing page served at functions-dev.github.io/ocp-console-plugin is built from pages/index.html and the Helm chart. The init.sh script generates these assets into backend/static/ automatically, so the running backend serves them at http://localhost:8080.

Docker image

Before you can deploy your plugin on a cluster, you must build an image and push it to an image registry.

1. Build the image:

   docker build -t quay.io/my-repository/my-plugin:latest .

2. Run the image:

   docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest

3. Push the image:

   docker push quay.io/my-repository/my-plugin:latest

NOTE: If you have a Mac with Apple silicon, you will need to add the flag --platform=linux/amd64 when building the image to target the correct platform to run in-cluster.

i18n

The plugin uses react-i18next for translations, with i18next-cli for string extraction and TypeScript type generation. The i18n namespace must match the name of the ConsolePlugin resource with the plugin__ prefix to avoid naming conflicts. This plugin uses the plugin__console-functions-plugin namespace.

You can use the useTranslation hook with this namespace as follows:

const Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-functions-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};

For labels in console-extensions.json, you can use the format %plugin__console-functions-plugin~My Label%. Console will replace the value with the message for the current language from the plugin__console-functions-plugin namespace. For example:

  {
    "type": "console.navigation/section",
    "properties": {
      "id": "functions-section",
      "perspective": "admin",
      "name": "%plugin__console-functions-plugin~Serverless Functions%"
    }
  }

Running yarn i18n extracts translatable strings into the JSON files in the locales folder and regenerates TypeScript types in config/i18next/. The extraction configuration is in i18next.config.ts.

Linting

This project adds prettier, eslint, and stylelint. Linting can be run with yarn run lint.

The stylelint config disallows defining colors since these cause problems with dark mode. Use PatternFly semantic tokens for colors instead.

The stylelint config also disallows naked element selectors like table and .pf- or .co- prefixed classes. This prevents plugins from accidentally overwriting default console styles, breaking the layout of existing pages. The best practice is to prefix your CSS class names with your plugin name to avoid conflicts. Please don't disable these rules without understanding how they can break console styles!

References

• Console Plugin SDK README
• Customization Plugin Example
• Dynamic Plugin Enhancement Proposal