OpenShift Dynamic Console Plugin - zhuje/openshift-wiki GitHub Wiki

Console Extensions are plugins that allow you to inject additional functionality into existing applications.

Full Demos

Console Plugin Template

Dynamic Demo Plugin

Example 1 Creating a new Page in a Console plugin


  1. console-extensions.json
  2. Component contains the hello world you’ll see when you click the href ‘Observe > Perses Dashboards’ and it leads you to the path localhost:9000/perses-dashboards
  3. Expose the Module : The module refers to step #2 in the screenshot above; its the component we want to render. The plugin is by default private, you need to expose the module to make it public. Once it's exposed the OpenShift console can hook into this component and rendering it in the console. I'm not sure of the actual mechanism of how the exposed modules are detected...there might be some operator that watches for exposed modules once a plugin is deployed on the cluster.


Example 2 -- Creating an ActionService and ActionServiceProvider


An ActionServiceProvider lives in the component where you want to render the action. ActionService lives in the component that contains the logic you want to give to the ActionServiceProvider. For example, Lightspeed is an AI extension. LightSpeed is the ActionService which will allow other applications to hook into its AI services. In openshift/monitoring-plugin we want to render a input that will allow users to chat with Lightspeed AI to diagnose their observability issues.

Creating a ActionService


Figure 1. This is an screenshot of the 3 steps that need to be taken to create an extension. The ActionService creates

1. Create a console-extensions.json file that declares all the available extensions/plugins in your provider.
You must name this file console-extensions.json … there is probably some operator that collects these files in a store. Later, a consumer can use this extension by accessing the store of extensions: useResolvedExtentsion(isFooTypeExtension).

  • Example Code

      // [logging-view-plugin/web/console-extensions.json](
          "type": "console.action/provider", // types are defined in SDK
          "properties": {
            "contextId": "alert-detail-toolbar-actions", // This Id allows you to filter for a specific extension
            "provider": { "$codeRef": "LogActionsProvider" } // This points a key:value in package.json which will tell you the file the extension will come from

2. In package.json define a consolePlugin and then expose the modules that will provide the extension functionality. In the example below, look at "LogActionsProvider": "./hooks/useLogActionsExtension". The reference 'LogActionsProvider' is now pointing to the exact file we need to make our extension work.

  • Example Code

    // [logging-view-plugin/web/package.json](
    	"consolePlugin": {
        "name": "logging-view-plugin",
        "version": "0.0.1",
        "displayName": "Logging View Plugin",
        "description": "This plugin adds the logs UI to Openshift console",
        "exposedModules": {
          "LogsPage": "./pages/logs-page",
          "LogsDetailPage": "./pages/logs-detail-page",
          **"LogActionsProvider": "./hooks/useLogActionsExtension",**
          "LogsDevPage": "./pages/logs-dev-page",
          "getUserAlertingRules": "./getUserAlertingRules",
          "getPlatformAlertingRules": "./getPlatformAlertingRules",
          "LogsAlertMetrics": "./components/alerts/logs-alerts-metrics"
        "dependencies": {
          "@console/pluginAPI": "*"

3. Define your extensions in the module you exposed (e.g., useLogsActionsExtension)

  • Example Code

    // [logging-view-plugin/web/src/hooks/useLogActionsExtension.tsx](
    import { Action, Alert, ExtensionHook } from '@openshift-console/dynamic-plugin-sdk';
    import { ListIcon } from '@patternfly/react-icons';
    import React from 'react';
    import { useTranslation } from 'react-i18next';
    type LogActionsExtensionOptions = {
      alert?: Alert;
    const useLogActionsExtension: ExtensionHook<Array<Action>, LogActionsExtensionOptions> = (
    ) => {
      const { t } = useTranslation('plugin__logging-view-plugin');
      // TODO: transform promQL into logQL
      const alertQuery = options.alert?.rule?.query ?? '';
      const href = `/monitoring/logs?q=${alertQuery}`;
      const [actions] = React.useState([
          id: 'link-to-logs',
          label: (
              <ListIcon /> {t('See related logs')}
          cta: { href },
      return [actions, true, null];
    export default useLogActionsExtension;

Creating a ActionServiceProvider

The ActionServiceProvider is able to hook into an ActionService and provide a service to the calling component.

Example of consuming an ActionProvider


Figure 2. ActionServiceProvider will hook into plugins that only have the matching contextId. The contextId is set in an application's 'console-extension.json' (see Figure 1 above). Resource:


  1. OpenShift Console Dynamic Plugin SDK — console extensions

  1. OpenShift Dynamic Plugin Demo

⚠️ ** Fallback** ⚠️