{"id":20410273,"url":"https://github.com/kuadrant/kuadrant-console-plugin","last_synced_at":"2026-01-08T19:20:09.662Z","repository":{"id":250851714,"uuid":"820812497","full_name":"Kuadrant/kuadrant-console-plugin","owner":"Kuadrant","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-04T11:17:10.000Z","size":5149,"stargazers_count":2,"open_issues_count":21,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T01:08:14.450Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kuadrant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-27T08:20:41.000Z","updated_at":"2025-04-04T11:17:13.000Z","dependencies_parsed_at":"2024-07-30T12:51:35.283Z","dependency_job_id":"74b83632-8378-4723-a1bb-a5c9bd56db81","html_url":"https://github.com/Kuadrant/kuadrant-console-plugin","commit_stats":null,"previous_names":["kuadrant/console-plugin","kuadrant/kuadrant-console-plugin"],"tags_count":17,"template":false,"template_full_name":"openshift/console-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kuadrant%2Fkuadrant-console-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kuadrant%2Fkuadrant-console-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kuadrant%2Fkuadrant-console-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kuadrant%2Fkuadrant-console-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kuadrant","download_url":"https://codeload.github.com/Kuadrant/kuadrant-console-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248592142,"owners_count":21130190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","hacktoberfest2024"],"created_at":"2024-11-15T05:45:17.875Z","updated_at":"2026-01-08T19:20:09.585Z","avatar_url":"https://github.com/Kuadrant.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kuadrant OpenShift/OKD Console Plugin\n\nSee below for setup requirements.\n\nBased on https://github.com/openshift/console-plugin-template\n\n## Screenshots\n\n![Overview](docs/images/overview.gif)\n## Running\n\n- Target a running OCP with `oc login`\n- `yarn run start` # start webpack\n- `yarn run start-console` # start local ocp console + proxy\n\n# Requirements for running locally\n\n[Node.js](https://nodejs.org/en/) and [yarn](https://yarnpkg.com) are required\nto build and run this locally. To run OpenShift console in a container, either\n[Docker](https://www.docker.com) or [podman 3.2.0+](https://podman.io) and\n[oc](https://console.redhat.com/openshift/downloads) are required.\n\n## Getting started\n\n### Option 1: Local\n\nIn one terminal window, run:\n\n1. `yarn install`\n2. `yarn run start`\n\nIn another terminal window, run:\n\n1. `oc login` (requires [oc](https://console.redhat.com/openshift/downloads) and an [OpenShift cluster](https://console.redhat.com/openshift/create))\n2. `yarn run start-console` (requires [Docker](https://www.docker.com) or [podman 3.2.0+](https://podman.io))\n\nThis will run the OpenShift console in a container connected to the cluster\nyou've logged into. The plugin HTTP server runs on port 9001 with CORS enabled.\nNavigate to \u003chttp://localhost:9000/example\u003e to see the running plugin.\n\n### Option 2: Docker + VSCode Remote Container\n\nMake sure the\n[Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)\nextension is installed. This method uses Docker Compose where one container is\nthe OpenShift console and the second container is the plugin. It requires that\nyou have access to an existing OpenShift cluster. After the initial build, the\ncached containers will help you start developing in seconds.\n\n1. Create a `dev.env` file inside the `.devcontainer` folder with the correct values for your cluster:\n\n```bash\nOC_PLUGIN_NAME=console-plugin-template\nOC_URL=https://api.example.com:6443\nOC_USER=kubeadmin\nOC_PASS=\u003cpassword\u003e\n```\n\n2. `(Ctrl+Shift+P) =\u003e Remote Containers: Open Folder in Container...`\n3. `yarn run start`\n4. Navigate to \u003chttp://localhost:9000/example\u003e\n\n## Docker image\n\nBefore you can deploy your plugin on a cluster, you must build an image and\npush it to an image registry.\n\n1. Build the image:\n\n```bash\ndocker buildx create --use\ndocker buildx build --platform linux/amd64,linux/arm64 -t quay.io/kuadrant/console-plugin:latest --push .\n```\n\n2. Run the image:\n\n```bash\ndocker run -it --rm -d -p 9001:80 quay.io/kuadrant/console-plugin:latest\n```\n\nNOTE: If you have a Mac with Apple silicon, you will need to add the flag\n`--platform=linux/amd64` when building the image to target the correct platform\nto run in-cluster.\n\n## Deployment on cluster\n\nTwo easy ways to deploy.\n\n### Via `kubectl` or `oc`\n\n`oc apply -f install.yaml`\n\nor\n\n`kubectl apply -f install.yaml`\n\n### Via the [`kuadrant-operator`](https://www.github.com/kuadrant/kuadrant-operator)\n\nInstall via the [`kuadrant-operator`](https://www.github.com/kuadrant/kuadrant-operator). If the operator detects it is running on OKD or OpenShift, the operator will automatically configure and install the plugin. You will need to enable it in Cluster Settings.\n\n## i18n\n\nThe plugin template demonstrates how you can translate messages in with [react-i18next](https://react.i18next.com/). The i18n namespace must match\nthe name of the `ConsolePlugin` resource with the `plugin__` prefix to avoid\nnaming conflicts. For example, the plugin template uses the\n`plugin__kuadrant-console` namespace. You can use the `useTranslation` hook\nwith this namespace as follows:\n\n```tsx\nconster Header: React.FC = () =\u003e {\n  const { t } = useTranslation('plugin__kuadrant-console-plugin');\n  return \u003ch1\u003e{t('Hello, World!')}\u003c/h1\u003e;\n};\n```\n\nFor labels in `console-extensions.json`, you can use the format\n`%plugin__kuadrant-console-plugin~My Label%`. Console will replace the value with\nthe message for the current language from the `plugin__kuadrant-console`\nnamespace. For example:\n\n```json\n{\n  \"type\": \"console.navigation/section\",\n  \"properties\": {\n    \"id\": \"admin-demo-section\",\n    \"perspective\": \"admin\",\n    \"name\": \"%plugin__kuadrant-console-plugin~Plugin Template%\"\n  }\n}\n```\n\nRunning `yarn i18n` updates the JSON files in the `locales` folder of the\nplugin template when adding or changing messages.\n\n## Linting\n\nThis project adds prettier, eslint, and stylelint. Linting can be run with\n`yarn run lint`.\n\nThe stylelint config disallows hex colors since these cause problems with dark\nmode (starting in OpenShift console 4.11). You should use the\n[PatternFly global CSS variables](https://patternfly-react-main.surge.sh/developer-resources/global-css-variables#global-css-variables)\nfor colors instead.\n\nThe stylelint config also disallows naked element selectors like `table` and\n`.pf-` or `.co-` prefixed classes. This prevents plugins from accidentally\noverwriting default console styles, breaking the layout of existing pages. The\nbest practice is to prefix your CSS classnames with your plugin name to avoid\nconflicts. Please don't disable these rules without understanding how they can\nbreak console styles!\n\n### Linting Extensions\n\nIf you'd like to auto lint, install these VSCode extensions and configure formatting on save:\n\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)\n\n#### Format on save in VSCode:\n\nUpdate `settings.json` (File \u003e Preferences \u003e Settings):\n\n```json\n\"editor.formatOnSave\": true\n```\n## Version matrix\n\n| kuadrant-console-plugin version | PatternFly version | Openshift console version | Dynamic Plugin SDK |\n|---------------------------------|--------------------|---------------------------|--------------------|\n|         v0.0.3 - v0.0.18        |          5         |          v4.17.x          |       v1.6.0       |\n|                TBD              |          5         |          v4.18.x          |       v1.8.0       |\n|                TBD              |          6         |          v4.19.x          |         TBD        |\n\nOpenshift console is configured to share modules with its dynamic plugins (console plugins). For more information on versions and changes to the shared modules, please see the shared modules [documentation](https://www.npmjs.com/package/@openshift-console/dynamic-plugin-sdk?activeTab=readme)\n\n\n\n## References\n\n- [Console Plugin SDK README](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk)\n- [Customization Plugin Example](https://github.com/spadgett/console-customization-plugin)\n- [Dynamic Plugin Enhancement Proposal](https://github.com/openshift/enhancements/blob/master/enhancements/console/dynamic-plugins.md)\n- [Console Plugin Template](https://github.com/openshift/console-plugin-template)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuadrant%2Fkuadrant-console-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuadrant%2Fkuadrant-console-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuadrant%2Fkuadrant-console-plugin/lists"}