Skip to main content
Version: v3

Hooks

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:

KeyTypeDescription
clusterIdStringThe unique ID of the current cluster, determined by the route's cluster param
productStringThe name of the product being navigated to, also taken from the route
oldProductStringThe name of the product being navigated away from
oldIsExtBooleanTrue 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);
}