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

https://github.com/openshift/console-plugin-template

https://github.com/openshift/console/blob/master/dynamic-demo-plugin/README.md

1. console-extensions.json
   • [console.navigation/href](https://github.com/openshift/console/blob/master/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md#consolenavigationhref) > href : an href is html element; its a link you can click on. This creates the ‘Observe > Perses Dashboard’ button you see in the picture below
   • [console.page/route](https://github.com/openshift/console/blob/master/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md#consolepageroute) : uses <React.BrowerRouter> and <React.Route> to create paths within our application to different pages localhost:9000/perses-dashboards
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.

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.

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). https://github.com/openshift/console/blob/8bde63cc9377ea70c55eae14d60313ef6ff191b2/frontend/packages/console-dynamic-plugin-sdk/src/api/useResolvedExtensions.ts#L8

• Example Code

    ```jsx
    // [logging-view-plugin/web/console-extensions.json](https://github.com/openshift/logging-view-plugin/blob/main/web/console-extensions.json)
    [
    	{
        "type": "console.action/provider", // types are defined in SDK https://github.com/openshift/console/blob/master/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md#consoleactionprovider
        "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](https://github.com/openshift/logging-view-plugin/blob/main/web/package.json)
  {
  	name:...
  	version:...
  	scripts:...
  	devDepenencies:...
  	overrides:...
  	"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": "*"
      }
    },
  	dependencies:...
  }

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

• Example Code

  // [logging-view-plugin/web/src/hooks/useLogActionsExtension.tsx](https://github.com/openshift/logging-view-plugin/blob/main/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> = (
    options,
  ) => {
    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;

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

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: https://github.com/openshift/monitoring-plugin/pull/95/files

1. OpenShift Console Dynamic Plugin SDK — console extensions

https://github.com/openshift/console/blob/master/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md#consoleactionprovider

1. OpenShift Dynamic Plugin Demo

https://github.com/openshift/console/tree/8bde63cc9377ea70c55eae14d60313ef6ff191b2/dynamic-demo-plugin