Products
A product is a top-level view in Rancher. A product typically adds a navigation entry into the top-level slide-in menu in Rancher. When the user navigates to the link, the product renders the entire view beneath the header bar.
Products typically declare their navigation such that it is presented on the left-hand side, e.g.
Registering a Product
Defining a product leverages the addProduct
extension method, which should be defined on the index.ts
on your root folder:
import { IPlugin } from '@shell/core/types';
// Init the package
export default function(plugin: IPlugin) {
// ....
// ... provide metadata
// Load a product
plugin.addProduct(require('./product'));
}
The addProduct
method registers a module which will be invoked by Rancher at the
appropriate point in its lifecycle to create the product.
You can register more than one product in an extension.
Product Definition
The module registered via addProduct
must export an init
method. This is invoked with two parameters;
- The
$plugin
API - The VueX store
Creating a product
An example init
function for creating a new product is shown below:
import { IPlugin } from '@shell/core/types';
export function init($plugin: IPlugin, store: any) {
const YOUR_PRODUCT_NAME = 'myProductName';
const { product } = $plugin.DSL(store, YOUR_PRODUCT_NAME);
product({
icon: 'gear',
inStore: 'management',
weight: 100,
to: // this will the route path that will be your entry point for this product
});
}
The function product
comes from $plugin.DSL
will add your extension to the top-level slide-in menu.
Note:
plugin.DSL
is called with the store and your product name and returns a number of functions to add and configure products and navigation. The example above shows the use of theproduct
function
The allowed parameters for the product
function are:
Key | Type | Description |
---|---|---|
icon | String | icon name (based on rancher icons) |
svg | Module | SVG icon (alernative to above). Typically use the require method with a path of an SVG file |
inStore | String | Which store should the product be registered on. Use management for a top-level product and cluster for a cluster-level product |
weight | Int | Side menu ordering (bigger number on top) |
to | Vue Router route config | Route to where the click on the product top-level menu should lead to |