mirror of https://github.com/rancher/dashboard.git
66 lines
2.4 KiB
Markdown
66 lines
2.4 KiB
Markdown
# Custom page
|
|
|
|
## Defining a custom page for an Extension (virtualType)
|
|
As we've seen from the previous chapter, a developer can register a top-level product with the `product` function. How about adding a custom page to your extension product? To do that, we can use the function `virtualType` coming from `$plugin.DSL`. As an example usage of that method, one could do the following:
|
|
|
|
```ts
|
|
import { IPlugin } from '@shell/core/types';
|
|
|
|
// this is the definition of a "blank cluster" for Rancher Dashboard
|
|
// definition of a "blank cluster" in Rancher Dashboard
|
|
const BLANK_CLUSTER = '_';
|
|
|
|
|
|
export function init($plugin: IPlugin, store: any) {
|
|
const YOUR_PRODUCT_NAME = 'myProductName';
|
|
const CUSTOM_PAGE_NAME = 'page1';
|
|
|
|
const {
|
|
product,
|
|
virtualType
|
|
} = $plugin.DSL(store, YOUR_PRODUCT_NAME);
|
|
|
|
// registering a top-level product
|
|
product({
|
|
icon: 'gear',
|
|
inStore: 'management',
|
|
weight: 100,
|
|
to: { // this is the entry route for the Extension product, which is registered below
|
|
name: `${ YOUR_PRODUCT_NAME }-c-cluster-${ CUSTOM_PAGE_NAME }`,
|
|
params: {
|
|
product: YOUR_PRODUCT_NAME,
|
|
cluster: BLANK_CLUSTER
|
|
}
|
|
}
|
|
});
|
|
|
|
// => => => creating a custom page
|
|
virtualType({
|
|
labelKey: 'some.translation.key',
|
|
name: CUSTOM_PAGE_NAME,
|
|
route: {
|
|
name: `${ YOUR_PRODUCT_NAME }-c-cluster-${ CUSTOM_PAGE_NAME }`,
|
|
params: {
|
|
product: YOUR_PRODUCT_NAME,
|
|
cluster: BLANK_CLUSTER
|
|
}
|
|
}
|
|
});
|
|
}
|
|
```
|
|
|
|
With the route definition in the router (check the [Extension Routing](#routes-definition-for-an-extension-as-a-top-level-product)) chapter, you can define which Vue component will be loaded as a custom page. That will act as a "blank canvas" to render anything you want.
|
|
|
|
The acceptable parameters for the `virtualType` function are defined here:
|
|
|
|
| Key | Type | Description |
|
|
| --- | --- | --- |
|
|
|`name`| String | Page name (should be unique) |
|
|
|`label`| String | side-menu label for this page |
|
|
|`labelKey`| String | Same as "label" but allows for translation. Will superseed "label" |
|
|
| `icon` | [String | icon name (based on [rancher icons](https://rancher.github.io/icons/)) |
|
|
| `weight` | Int | Side menu ordering (bigger number on top) |
|
|
| `route` | [Vue Router route config](https://v3.router.vuejs.org/api/#routes) | Route for this custom page |
|
|
|
|
> Note: If no `label` or `labelKey` is set, then the side-menu label will be the `name` field
|