dashboard/docusaurus/docs/extensions/advanced/hooks.md

Hooks

Navigation In and Out of Extensions

Extensions can define onEnter and onLeave hooks in their index addNavHooks extension method, which will run when the authenticated middleware detects a package change by checking the route meta property. onEnter and onLeave accept the same props: the vuex store context and a config object containing:

Key	Type	Description
clusterId	String	The unique ID of the current cluster, determined by the route's cluster param
product	String	The name of the product being navigated to, also taken from the route
oldProduct	String	The name of the product being navigated away from
oldIsExt	Boolean	True if the previous product was in a package (note that this doesn't distinguish between inter- and intra-package product changes)

The authenticated middleware will:

• Connect to the management cluster (loadManagement)
• Apply product config, as determined from the route (applyProducts)
• If an old extension is loaded, run its onLeave hook
• Run onEnter hook for new extension
• Run loadCluster (which, as stated above, can run load and unload cluster actions defined in extensions)

An example of the usage onEnter and onLeave using the addNavHooks extension method would be:

import { importTypes } from '@rancher/auto-import';
import { IPlugin, OnNavToPackage, OnNavAwayFromPackage } from '@shell/core/types';

const onEnter: OnNavToPackage = async(store, config) => {
  // define any function needed here for `onEnter`
};
const onLeave: OnNavAwayFromPackage = async(store, config) => {
  // define any function needed here for `onLeave`
};

// Init the extension
export default function(plugin: IPlugin) {
  // Auto-import model, detail, edit from the folders
  importTypes(plugin);

  // Provide extension metadata from package.json
  // it will grab information such as `name` and `description`
  plugin.metadata = require('./package.json');

  // Load a product
  plugin.addProduct(require('./product'));

  // => => => Add hooks to Vue navigation world
  plugin.addNavHooks(onEnter, onLeave);
}

Login and Logout hooks

Extensions can define onLogIn and onLogOut hooks in their index addNavHooks extension method , which will run when the user logs in or logs out of Rancher. This is particularly useful if from the extension initialisation file index.ts you'll need to perform store-based actions (Vuex) from this context.

An example of the usage onLogIn and onLogOut using the addNavHooks extension method would be:

import { importTypes } from '@rancher/auto-import';
import { IPlugin } from '@shell/core/types';

// Init the extension
export default function(plugin: IPlugin) {
  // Auto-import model, detail, edit from the folders
  importTypes(plugin);

  // Provide extension metadata from package.json
  // it will grab information such as `name` and `description`
  plugin.metadata = require('./package.json');

  // Load a product
  plugin.addProduct(require('./product'));

  // => => => Add hooks to Vue navigation world
  // on login
  plugin.addNavHooks({
    onLogIn: async(store: any) => {
      ....
    }
  });

  // on logout
  plugin.addNavHooks({
    onLogOut: async(store: any) => {
      ....
    }
  });
}