mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Add migration details for extension api docs (#3074)
* updating extension api docs for 5.0 Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * beefed up migration details Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * address review comments Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * updated cluster features docs (#3094) Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * revert extension package-lock.json files again Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
This commit is contained in:
Jim Ehrismann
GitHub
parent
4ff5a722a7
commit
49935a7306
@ -35,6 +35,14 @@ Just like Lens itself, the extension API updates on a monthly cadence, rolling o
|
||||
|
||||
Keep up with Lens and the Lens Extension API by reviewing the [release notes](https://github.com/lensapp/lens/releases).
|
||||
|
||||
## Important changes since Lens v4
|
||||
|
||||
Lens has undergone major design improvements in v5, which have resulted in several large changes to the extension API.
|
||||
Workspaces are gone, and the catalog is introduced for containing clusters, as well as other items, including custom entities.
|
||||
Lens has migrated from using mobx 5 to mobx 6 for internal state management, and this may have ramifications for extension implementations.
|
||||
Although the API retains many components from v4, given these changes, extensions written for Lens v4 are not compatible with the Lens v5 extension API.
|
||||
See the [Lens v4 to v5 extension migration notes](extensions/extension-migration.md) on getting old extensions working in Lens v5.
|
||||
|
||||
## Looking for Help
|
||||
|
||||
If you have questions for extension development, try asking on the [Lens Dev Slack](http://k8slens.slack.com/). It's a public chatroom for Lens developers, where Lens team members chime in from time to time.
|
||||
|
||||
@ -189,36 +189,6 @@ export default class ExampleExtension extends Renderer.LensExtension {
|
||||
|
||||
```
|
||||
|
||||
### Cluster Features
|
||||
|
||||
This extension can register installable features for a cluster.
|
||||
These features are visible in the "Cluster Settings" page.
|
||||
|
||||
```typescript
|
||||
import React from "react"
|
||||
import { Renderer } from "@k8slens/extensions"
|
||||
import { MyCustomFeature } from "./src/my-custom-feature"
|
||||
|
||||
export default class ExampleExtension extends Renderer.LensExtension {
|
||||
clusterFeatures = [
|
||||
{
|
||||
title: "My Custom Feature",
|
||||
components: {
|
||||
Description: () => {
|
||||
return (
|
||||
<span>
|
||||
Just an example.
|
||||
</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
feature: new MyCustomFeature()
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Top Bar Items
|
||||
|
||||
This extension can register custom components to a top bar area.
|
||||
|
||||
24
docs/extensions/extension-migration.md
Normal file
24
docs/extensions/extension-migration.md
Normal file
@ -0,0 +1,24 @@
|
||||
# Lens v4 to v5 Extension Migration Notes
|
||||
|
||||
* Lens v5 inspects the version of the extension to ensure it is compatible.
|
||||
The `package.json` for your extension must have an `"engines"` field specifying the lens version that your extension is targeted for, e.g:
|
||||
```
|
||||
"engines": {
|
||||
"lens": "^5.0.0-beta.7"
|
||||
},
|
||||
```
|
||||
Note that Lens v5 supports all the range semantics that [semver](https://www.npmjs.com/package/semver) provides.
|
||||
* Types and components have been reorganized, many have been grouped by process (`Main` and `Renderer`) plus those not specific to a process (`Common`).
|
||||
For example the `LensMainExtension` class is now referred to by `Main.LensExtension`.
|
||||
See the [API Reference](api/README.md) for the new organization.
|
||||
* The `globalPageMenus` field of the Renderer extension class (now `Renderer.LensExtension`) is removed.
|
||||
Global pages can still be made accessible via the application menus and the status bar, as well as from the newly added Welcome menu.
|
||||
* The `clusterFeatures` field of the Renderer extension class (now `Renderer.LensExtension`) is removed.
|
||||
Cluster features can still be implemented but Lens no longer dictates how a feature's lifecycle (install/upgrade/uninstall) is managed.
|
||||
`Renderer.K8sApi.ResourceStack` provides the functionality to input and apply kubernetes resources to a cluster.
|
||||
It is up to the extension developer to manage the lifecycle.
|
||||
It could be applied automatically to a cluster by the extension or the end-user could be expected to install it, etc. from the cluster **Settings** page.
|
||||
* Lens v5 now relies on mobx 6 for state management. Extensions that use mobx will need to be modified to work with mobx 6.
|
||||
See [Migrating from Mobx 4/5](https://mobx.js.org/migrating-from-4-or-5.html) for specific details.
|
||||
|
||||
For an example of an existing extension that is compatible with Lens v5 see the [Lens Resource Map Extension](https://github.com/nevalla/lens-resource-map-extension)
|
||||
@ -17,8 +17,9 @@ Each guide or code sample includes the following:
|
||||
| Guide | APIs |
|
||||
| ----- | ----- |
|
||||
| [Generate new extension project](generator.md) ||
|
||||
| [Main process extension](main-extension.md) | LensMainExtension |
|
||||
| [Renderer process extension](renderer-extension.md) | LensRendererExtension |
|
||||
| [Main process extension](main-extension.md) | Main.LensExtension |
|
||||
| [Renderer process extension](renderer-extension.md) | Renderer.LensExtension |
|
||||
| [Resource stack (cluster feature)](resource-stack.md) | |
|
||||
| [Stores](stores.md) | |
|
||||
| [Components](components.md) | |
|
||||
| [KubeObjectListLayout](kube-object-list-layout.md) | |
|
||||
|
||||
5
docs/extensions/guides/catalog.md
Normal file
5
docs/extensions/guides/catalog.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Catalog (WIP)
|
||||
|
||||
## CatalogCategoryRegistry
|
||||
|
||||
## CatalogEntityRegistry
|
||||
BIN
docs/extensions/guides/images/clusterfeature.png
Normal file
BIN
docs/extensions/guides/images/clusterfeature.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
@ -2,13 +2,14 @@
|
||||
|
||||
The Main Extension API is the interface to Lens's main process.
|
||||
Lens runs in both main and renderer processes.
|
||||
The Main Extension API allows you to access, configure, and customize Lens data, add custom application menu items, and run custom code in Lens's main process.
|
||||
The Main Extension API allows you to access, configure, and customize Lens data, add custom application menu items and [protocol handlers](protocol-handlers.md), and run custom code in Lens's main process.
|
||||
It also provides convenient methods for navigating to built-in Lens pages and extension pages, as well as adding and removing sources of catalog entities.
|
||||
|
||||
## `LensMainExtension` Class
|
||||
## `Main.LensExtension` Class
|
||||
|
||||
### `onActivate()` and `onDeactivate()` Methods
|
||||
|
||||
To create a main extension simply extend the `LensMainExtension` class:
|
||||
To create a main extension simply extend the `Main.LensExtension` class:
|
||||
|
||||
```typescript
|
||||
import { Main } from "@k8slens/extensions";
|
||||
@ -75,3 +76,27 @@ Valid values include: `"file"`, `"edit"`, `"view"`, and `"help"`.
|
||||
In this example, we simply log a message.
|
||||
However, you would typically have this navigate to a specific page or perform another operation.
|
||||
Note that pages are associated with the [`Renderer.LensExtension`](renderer-extension.md) class and can be defined in the process of extending it.
|
||||
|
||||
The following example demonstrates how an application menu can be used to navigate to such a page:
|
||||
|
||||
``` typescript
|
||||
import { Main } from "@k8slens/extensions";
|
||||
|
||||
export default class SamplePageMainExtension extends Main.LensExtension {
|
||||
appMenus = [
|
||||
{
|
||||
parentId: "help",
|
||||
label: "Sample",
|
||||
click: () => this.navigate("myGlobalPage")
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
When the menu item is clicked the `navigate()` method looks for and displays a global page with id `"myGlobalPage"`.
|
||||
This page would be defined in your extension's `Renderer.LensExtension` implmentation (See [`Renderer.LensExtension`](renderer-extension.md)).
|
||||
|
||||
### `addCatalogSource()` and `removeCatalogSource()` Methods
|
||||
|
||||
The `Main.LensExtension` class also provides the `addCatalogSource()` and `removeCatalogSource()` methods, for managing custom catalog items (or entities).
|
||||
See the [`Catalog`](catalog.md) documentation for full details about the catalog.
|
||||
@ -1,27 +1,40 @@
|
||||
# Renderer Extension
|
||||
# Renderer Extension (WIP)
|
||||
|
||||
The Renderer Extension API is the interface to Lens's renderer process.
|
||||
Lens runs in both the main and renderer processes.
|
||||
The Renderer Extension API allows you to access, configure, and customize Lens data, add custom Lens UI elements, and run custom code in Lens's renderer process.
|
||||
The Renderer Extension API allows you to access, configure, and customize Lens data, add custom Lens UI elements, protocol handlers, and command palette commands, as well as run custom code in Lens's renderer process.
|
||||
|
||||
The custom Lens UI elements that you can add include:
|
||||
|
||||
* [Cluster pages](#clusterpages)
|
||||
* [Cluster page menus](#clusterpagemenus)
|
||||
* [Global pages](#globalpages)
|
||||
* [Global page menus](#globalpagemenus)
|
||||
* [Welcome menus](#welcomemenus)
|
||||
* [App preferences](#apppreferences)
|
||||
* [Top bar items](#topbaritems)
|
||||
* [Status bar items](#statusbaritems)
|
||||
* [KubeObject menu items](#kubeobjectmenuitems)
|
||||
* [KubeObject detail items](#kubeobjectdetailitems)
|
||||
* [KubeObject status texts](#kubeobjectstatustexts)
|
||||
* [Kube workloads overview items](#kubeworkloadsoverviewitems)
|
||||
|
||||
as well as catalog-related UI elements:
|
||||
|
||||
* [Entity settings](#entitysettings)
|
||||
* [Catalog entity detail items](#catalogentitydetailitems)
|
||||
|
||||
All UI elements are based on React components.
|
||||
|
||||
## `LensRendererExtension` Class
|
||||
Finally, you can also add commands and protocol handlers:
|
||||
|
||||
* [Command palette commands](#commandpalettecommands)
|
||||
* [protocol handlers](protocol-handlers.md)
|
||||
|
||||
## `Renderer.LensExtension` Class
|
||||
|
||||
### `onActivate()` and `onDeactivate()` Methods
|
||||
|
||||
To create a renderer extension, extend the `LensRendererExtension` class:
|
||||
To create a renderer extension, extend the `Renderer.LensExtension` class:
|
||||
|
||||
```typescript
|
||||
import { Renderer } from "@k8slens/extensions";
|
||||
@ -319,254 +332,7 @@ Global pages can be made available in the following ways:
|
||||
* To add global pages as an interactive element in the blue status bar along the bottom of the Lens UI, see [`statusBarItems`](#statusbaritems).
|
||||
* To add global pages to the left side menu, see [`globalPageMenus`](#globalpagemenus).
|
||||
|
||||
### `globalPageMenus`
|
||||
|
||||
`globalPageMenus` allows you to add global page menu items to the left nav.
|
||||
|
||||
By expanding on the above example, you can add a global page menu item to the `HelpExtension` definition:
|
||||
|
||||
```typescript
|
||||
import { Renderer } from "@k8slens/extensions";
|
||||
import { HelpIcon, HelpPage } from "./page"
|
||||
import React from "react"
|
||||
|
||||
export default class HelpExtension extends Renderer.LensExtension {
|
||||
globalPages = [
|
||||
{
|
||||
id: "help",
|
||||
components: {
|
||||
Page: () => <HelpPage extension={this}/>,
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
globalPageMenus = [
|
||||
{
|
||||
target: { pageId: "help" },
|
||||
title: "Help",
|
||||
components: {
|
||||
Icon: HelpIcon,
|
||||
}
|
||||
},
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
`globalPageMenus` is an array of objects that satisfy the `PageMenuRegistration` interface.
|
||||
This element defines how the global page menu item will appear and what it will do when you click it.
|
||||
The properties of the `globalPageMenus` array objects are defined as follows:
|
||||
|
||||
* `target` links to the relevant global page using `pageId`.
|
||||
* `pageId` takes the value of the relevant global page's `id` property.
|
||||
* `title` sets the name of the global page menu item that will display as a tooltip in the left nav.
|
||||
* `components` is used to set an icon that appears in the left nav.
|
||||
|
||||
The above example creates a "Help" icon menu item.
|
||||
When users click the icon, the Lens UI will display the contents of `ExamplePage`.
|
||||
|
||||
This example requires the definition of another React-based component, `HelpIcon`.
|
||||
Update `page.tsx` from the example above with the `HelpIcon` definition, as follows:
|
||||
|
||||
```typescript
|
||||
import { Renderer } from "@k8slens/extensions";
|
||||
import React from "react"
|
||||
|
||||
type IconProps = Renderer.Component.IconProps;
|
||||
|
||||
const {
|
||||
Component: { Icon },
|
||||
} = Renderer;
|
||||
|
||||
export function HelpIcon(props: IconProps) {
|
||||
return <Icon {...props} material="help"/>
|
||||
}
|
||||
|
||||
export class HelpPage extends React.Component<{ extension: Renderer.LensExtension }> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>Help</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Lens includes various built-in components available for extension developers to use.
|
||||
One of these is the `Renderer.Component.Icon`, introduced in `HelpIcon`, which you can use to access any of the [icons](https://material.io/resources/icons/) available at [Material Design](https://material.io).
|
||||
The property that `Renderer.Component.Icon` uses is defined as follows:
|
||||
|
||||
* `material` takes the name of the icon you want to use.
|
||||
|
||||
This is what the example will look like, including how the menu item will appear in the left nav:
|
||||
|
||||
|
||||
|
||||
### `clusterFeatures`
|
||||
|
||||
Cluster features are Kubernetes resources that can be applied to and managed within the active cluster.
|
||||
They can be installed and uninstalled by the Lens user from the cluster **Settings** page.
|
||||
|
||||
!!! info
|
||||
To access the cluster **Settings** page, right-click the relevant cluster in the left side menu and click **Settings**.
|
||||
|
||||
The following example shows how to add a cluster feature as part of a `LensRendererExtension`:
|
||||
|
||||
```typescript
|
||||
import { Renderer } from "@k8slens/extensions"
|
||||
import { ExampleFeature } from "./src/example-feature"
|
||||
import React from "react"
|
||||
|
||||
export default class ExampleFeatureExtension extends Renderer.LensExtension {
|
||||
clusterFeatures = [
|
||||
{
|
||||
title: "Example Feature",
|
||||
components: {
|
||||
Description: () => {
|
||||
return (
|
||||
<span>
|
||||
Enable an example feature.
|
||||
</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
feature: new ExampleFeature()
|
||||
}
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
The properties of the `clusterFeatures` array objects are defined as follows:
|
||||
|
||||
* `title` and `components.Description` provide content that appears on the cluster settings page, in the **Features** section.
|
||||
* `feature` specifies an instance which extends the abstract class `ClusterFeature.Feature`, and specifically implements the following methods:
|
||||
|
||||
```typescript
|
||||
abstract install(cluster: Cluster): Promise<void>;
|
||||
abstract upgrade(cluster: Cluster): Promise<void>;
|
||||
abstract uninstall(cluster: Cluster): Promise<void>;
|
||||
abstract updateStatus(cluster: Cluster): Promise<ClusterFeatureStatus>;
|
||||
```
|
||||
|
||||
The four methods listed above are defined as follows:
|
||||
|
||||
* The `install()` method installs Kubernetes resources using the `applyResources()` method, or by directly accessing the [Kubernetes API](../api/README.md).
|
||||
This method is typically called when a user indicates that they want to install the feature (i.e., by clicking **Install** for the feature in the cluster settings page).
|
||||
|
||||
* The `upgrade()` method upgrades the Kubernetes resources already installed, if they are relevant to the feature.
|
||||
This method is typically called when a user indicates that they want to upgrade the feature (i.e., by clicking **Upgrade** for the feature in the cluster settings page).
|
||||
|
||||
* The `uninstall()` method uninstalls Kubernetes resources using the [Kubernetes API](../api/README.md).
|
||||
This method is typically called when a user indicates that they want to uninstall the feature (i.e., by clicking **Uninstall** for the feature in the cluster settings page).
|
||||
|
||||
* The `updateStatus()` method provides the current status information in the `status` field of the `ClusterFeature.Feature` parent class.
|
||||
Lens periodically calls this method to determine details about the feature's current status.
|
||||
The implementation of this method should uninstall Kubernetes resources using the Kubernetes api (`K8sApi`)
|
||||
Consider using the following properties with `updateStatus()`:
|
||||
|
||||
* `status.currentVersion` and `status.latestVersion` may be displayed by Lens in the feature's description.
|
||||
|
||||
* `status.installed` should be set to `true` if the feature is installed, and `false` otherwise.
|
||||
|
||||
* `status.canUpgrade` is set according to a rule meant to determine whether the feature can be upgraded.
|
||||
This rule can involve `status.currentVersion` and `status.latestVersion`, if desired.
|
||||
|
||||
The following shows a very simple implementation of a `ClusterFeature`:
|
||||
|
||||
```typescript
|
||||
import { Renderer, Common } from "@k8slens/extensions";
|
||||
import * as path from "path";
|
||||
|
||||
const {
|
||||
K8sApi: {
|
||||
ResourceStack,
|
||||
forCluster,
|
||||
StorageClass,
|
||||
Namespace,
|
||||
}
|
||||
} = Renderer;
|
||||
|
||||
type ResourceStack = Renderer.K8sApi.ResourceStack;
|
||||
type Pod = Renderer.K8sApi.Pod;
|
||||
type KubernetesCluster = Common.Catalog.KubernetesCluster;
|
||||
|
||||
export interface MetricsStatus {
|
||||
installed: boolean;
|
||||
canUpgrade: boolean;
|
||||
}
|
||||
|
||||
export class ExampleFeature {
|
||||
protected stack: ResourceStack;
|
||||
|
||||
constructor(protected cluster: KubernetesCluster) {
|
||||
this.stack = new ResourceStack(cluster, this.name);
|
||||
}
|
||||
|
||||
install(): Promise<string> {
|
||||
return this.stack.kubectlApplyFolder(path.join(__dirname, "../resources/"));
|
||||
}
|
||||
|
||||
upgrade(): Promise<string> {
|
||||
return this.install(config);
|
||||
}
|
||||
|
||||
async getStatus(): Promise<MetricsStatus> {
|
||||
const status: MetricsStatus = { installed: false, canUpgrade: false};
|
||||
|
||||
try {
|
||||
const pod = forCluster(cluster, Pod);
|
||||
const examplePod = await pod.get({name: "example-pod", namespace: "default"});
|
||||
|
||||
if (examplePod?.kind) {
|
||||
status.installed = true;
|
||||
status.currentVersion = examplePod.spec.containers[0].image.split(":")[1];
|
||||
status.canUpgrade = true; // a real implementation would perform a check here that is relevant to the specific feature
|
||||
} else {
|
||||
status.installed = false;
|
||||
status.canUpgrade = false;
|
||||
}
|
||||
} catch(e) {
|
||||
if (e?.error?.code === 404) {
|
||||
status.installed = false;
|
||||
status.canUpgrade = false;
|
||||
}
|
||||
}
|
||||
|
||||
return status;
|
||||
}
|
||||
|
||||
async uninstall(): Promise<string> {
|
||||
return this.stack.kubectlDeleteFolder(this.resourceFolder);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This example implements the `install()` method by invoking the helper `applyResources()` method.
|
||||
`applyResources()` tries to apply all resources read from all files found in the folder path provided.
|
||||
In this case the folder path is the `../resources` subfolder relative to the current source code's folder.
|
||||
The file `../resources/example-pod.yml` could contain:
|
||||
|
||||
``` yaml
|
||||
apiVersion: v1
|
||||
kind: Pod
|
||||
metadata:
|
||||
name: example-pod
|
||||
spec:
|
||||
containers:
|
||||
- name: example-pod
|
||||
image: nginx
|
||||
```
|
||||
|
||||
The example above implements the four methods as follows:
|
||||
|
||||
* It implements `upgrade()` by invoking the `install()` method.
|
||||
Depending on the feature to be supported by an extension, upgrading may require additional and/or different steps.
|
||||
|
||||
* It implements `uninstall()` by utilizing the [Kubernetes API](../api/README.md) which Lens provides to delete the `example-pod` applied by the `install()` method.
|
||||
|
||||
* It implements `updateStatus()` by using the [Kubernetes API](../api/README.md) which Lens provides to determine whether the `example-pod` is installed, what version is associated with it, and whether it can be upgraded.
|
||||
The implementation determines what the status is for a specific cluster feature.
|
||||
|
||||
### `welcomeMenus`
|
||||
### `appPreferences`
|
||||
|
||||
The Lens **Preferences** page is a built-in global page.
|
||||
@ -677,6 +443,8 @@ Note that you can manage an extension's state data using an `ExtensionStore` obj
|
||||
To simplify this guide, the example above defines a `preference` field in the `ExampleRendererExtension` class definition to hold the extension's state.
|
||||
However, we recommend that you manage your extension's state data using [`ExtensionStore`](../stores#extensionstore).
|
||||
|
||||
### `topBarItems`
|
||||
|
||||
### `statusBarItems`
|
||||
|
||||
The status bar is the blue strip along the bottom of the Lens UI.
|
||||
@ -998,3 +766,17 @@ Construct the table using the `Renderer.Component.Table` and related elements.
|
||||
For each pod the name, age, and status are obtained using the `Renderer.K8sApi.Pod` methods.
|
||||
The table is constructed using the `Renderer.Component.Table` and related elements.
|
||||
See [Component documentation](https://docs.k8slens.dev/latest/extensions/api/modules/_renderer_api_components_/) for further details.
|
||||
|
||||
### `kubeObjectStatusTexts`
|
||||
|
||||
### `kubeWorkloadsOverviewItems`
|
||||
|
||||
### `entitySettings`
|
||||
|
||||
### `catalogEntityDetailItems`
|
||||
|
||||
### `commandPaletteCommands`
|
||||
|
||||
### `protocolHandlers`
|
||||
|
||||
See the [Protocol Handlers Guide](protocol-handlers.md)
|
||||
|
||||
238
docs/extensions/guides/resource-stack.md
Normal file
238
docs/extensions/guides/resource-stack.md
Normal file
@ -0,0 +1,238 @@
|
||||
# Resource Stack (Cluster Feature)
|
||||
|
||||
A cluster feature is a set of Kubernetes resources that can be applied to and managed within the active cluster.
|
||||
The `Renderer.K8sApi.ResourceStack` class provides the functionality to input and apply kubernetes resources to a cluster.
|
||||
It is up to the extension developer to manage the life cycle of the resource stack.
|
||||
It could be applied automatically to a cluster by the extension, or the end-user could be required to install it.
|
||||
|
||||
The code examples in this section show how to create a resource stack, and define a cluster feature that is configurable from the cluster **Settings** page.
|
||||
|
||||
!!! info
|
||||
To access the cluster **Settings** page, right-click the relevant cluster in the left side menu and click **Settings**.
|
||||
|
||||
The resource stack in this example consists of a single kubernetes resource:
|
||||
|
||||
```yaml
|
||||
apiVersion: v1
|
||||
kind: Pod
|
||||
metadata:
|
||||
name: example-pod
|
||||
spec:
|
||||
containers:
|
||||
- name: example-pod
|
||||
image: nginx
|
||||
```
|
||||
|
||||
It is simply a pod named `example-pod`, running nginx. Assume this content is in the file `../resources/example-pod.yml`.
|
||||
|
||||
The following code sample shows how to use the `Renderer.K8sApi.ResourceStack` to manage installing and uninstalling this resource stack:
|
||||
|
||||
```typescript
|
||||
import { Renderer, Common } from "@k8slens/extensions";
|
||||
import * as path from "path";
|
||||
|
||||
const {
|
||||
K8sApi: {
|
||||
ResourceStack,
|
||||
forCluster,
|
||||
Pod,
|
||||
}
|
||||
} = Renderer;
|
||||
|
||||
type ResourceStack = Renderer.K8sApi.ResourceStack;
|
||||
type Pod = Renderer.K8sApi.Pod;
|
||||
type KubernetesCluster = Common.Catalog.KubernetesCluster;
|
||||
|
||||
export class ExampleClusterFeature {
|
||||
protected stack: ResourceStack;
|
||||
|
||||
constructor(protected cluster: KubernetesCluster) {
|
||||
this.stack = new ResourceStack(cluster, "example-resource-stack");
|
||||
}
|
||||
|
||||
get resourceFolder() {
|
||||
return path.join(__dirname, "../resources/");
|
||||
}
|
||||
|
||||
install(): Promise<string> {
|
||||
console.log("installing example-pod");
|
||||
return this.stack.kubectlApplyFolder(this.resourceFolder);
|
||||
}
|
||||
|
||||
async isInstalled(): Promise<boolean> {
|
||||
try {
|
||||
const podApi = forCluster(this.cluster, Pod);
|
||||
const examplePod = await podApi.get({name: "example-pod", namespace: "default"});
|
||||
|
||||
if (examplePod?.kind) {
|
||||
console.log("found example-pod");
|
||||
return true;
|
||||
}
|
||||
} catch(e) {
|
||||
console.log("Error getting example-pod:", e);
|
||||
}
|
||||
console.log("didn't find example-pod");
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async uninstall(): Promise<string> {
|
||||
console.log("uninstalling example-pod");
|
||||
return this.stack.kubectlDeleteFolder(this.resourceFolder);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `ExampleClusterFeature` class constructor takes a `Common.Catalog.KubernetesCluster` argument.
|
||||
This is the cluster that the resource stack will be applied to, and the constructor instantiates a `Renderer.K8sApi.ResourceStack` as such.
|
||||
`ExampleClusterFeature` implements an `install()` method which simply invokes the `kubectlApplyFolder()` method of the `Renderer.K8sApi.ResourceStack` class.
|
||||
`kubectlApplyFolder()` applies to the cluster all kubernetes resources found in the folder passed to it, in this case `../resources`.
|
||||
Similarly, `ExampleClusterFeature` implements an `uninstall()` method which simply invokes the `kubectlDeleteFolder()` method of the `Renderer.K8sApi.ResourceStack` class.
|
||||
`kubectlDeleteFolder()` tries to delete from the cluster all kubernetes resources found in the folder passed to it, again in this case `../resources`.
|
||||
|
||||
`ExampleClusterFeature` also implements an `isInstalled()` method, which demonstrates how you can utiliize the kubernetes api to inspect the resource stack status.
|
||||
`isInstalled()` simply tries to find a pod named `example-pod`, as a way to determine if the pod is already installed.
|
||||
This method can be useful in creating a context-sensitive UI for installing/uninstalling the feature, as demonstrated in the next sample code.
|
||||
|
||||
To allow the end-user to control the life cycle of this cluster feature the following code sample shows how to implement a user interface based on React and custom Lens UI components:
|
||||
|
||||
```typescript
|
||||
import React from "react";
|
||||
import { Common, Renderer } from "@k8slens/extensions";
|
||||
import { observer } from "mobx-react";
|
||||
import { computed, observable, makeObservable } from "mobx";
|
||||
import { ExampleClusterFeature } from "./example-cluster-feature";
|
||||
|
||||
const {
|
||||
Component: {
|
||||
SubTitle, Button,
|
||||
}
|
||||
} = Renderer;
|
||||
|
||||
interface Props {
|
||||
cluster: Common.Catalog.KubernetesCluster;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ExampleClusterFeatureSettings extends React.Component<Props> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
@observable installed = false;
|
||||
@observable inProgress = false;
|
||||
|
||||
feature: ExampleClusterFeature;
|
||||
|
||||
async componentDidMount() {
|
||||
this.feature = new ExampleClusterFeature(this.props.cluster);
|
||||
|
||||
await this.updateFeatureState();
|
||||
}
|
||||
|
||||
async updateFeatureState() {
|
||||
this.installed = await this.feature.isInstalled();
|
||||
}
|
||||
|
||||
async save() {
|
||||
this.inProgress = true;
|
||||
|
||||
try {
|
||||
if (this.installed) {
|
||||
await this.feature.uninstall();
|
||||
} else {
|
||||
await this.feature.install();
|
||||
}
|
||||
} finally {
|
||||
this.inProgress = false;
|
||||
|
||||
await this.updateFeatureState();
|
||||
}
|
||||
}
|
||||
|
||||
@computed get buttonLabel() {
|
||||
if (this.inProgress && this.installed) return "Uninstalling ...";
|
||||
if (this.inProgress) return "Applying ...";
|
||||
|
||||
if (this.installed) {
|
||||
return "Uninstall";
|
||||
}
|
||||
|
||||
return "Apply";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<section>
|
||||
<SubTitle title="Example Cluster Feature using a Resource Stack" />
|
||||
<Button
|
||||
label={this.buttonLabel}
|
||||
waiting={this.inProgress}
|
||||
onClick={() => this.save()}
|
||||
primary />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `ExampleClusterFeatureSettings` class extends `React.Component` and simply renders a subtitle and a button.
|
||||
`ExampleClusterFeatureSettings` takes the cluster as a prop and when the React component has mounted the `ExampleClusterFeature` is instantiated using this cluster (in `componentDidMount()`).
|
||||
The rest of the logic concerns the button appearance and action, based on the `ExampleClusterFeatureSettings` fields `installed` and `inProgress`.
|
||||
The `installed` value is of course determined using the aforementioned `ExampleClusterFeature` method `isInstalled()`.
|
||||
The `inProgress` value is true while waiting for the feature to be installed (or uninstalled).
|
||||
|
||||
Note that the button is a `Renderer.Component.Button` element and this example takes advantage of its `waiting` prop to show a "waiting" animation while the install (or uninstall) is in progress.
|
||||
Using elements from `Renderer.Component` is encouraged, to take advantage of their built-in properties, and to ensure a common look and feel.
|
||||
|
||||
Also note that [MobX 6](https://mobx.js.org/README.html) is used for state management, ensuring that the UI is rerendered when state has changed.
|
||||
The `ExampleClusterFeatureSettings` class is marked as an `@observer`, and its constructor must call `makeObservable()`.
|
||||
As well, the `installed` and `inProgress` fields are marked as `@observable`, ensuring that the button gets rerendered any time these fields change.
|
||||
|
||||
Finally, `ExampleClusterFeatureSettings` needs to be connected to the extension, and would typically appear on the cluster **Settings** page via a `Renderer.LensExtension.entitySettings` entry.
|
||||
The `ExampleExtension` would look like this:
|
||||
|
||||
```typescript
|
||||
import { Common, Renderer } from "@k8slens/extensions";
|
||||
import { ExampleClusterFeatureSettings } from "./src/example-cluster-feature-settings"
|
||||
import React from "react"
|
||||
|
||||
export default class ExampleExtension extends Renderer.LensExtension {
|
||||
entitySettings = [
|
||||
{
|
||||
apiVersions: ["entity.k8slens.dev/v1alpha1"],
|
||||
kind: "KubernetesCluster",
|
||||
title: "Example Cluster Feature",
|
||||
priority: 5,
|
||||
components: {
|
||||
View: ({ entity = null }: { entity: Common.Catalog.KubernetesCluster}) => {
|
||||
return (
|
||||
<ExampleClusterFeatureSettings cluster={entity} />
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
An entity setting is added to the `entitySettings` array field of the `Renderer.LensExtension` class.
|
||||
Because Lens's catalog can contain different kinds of entities, the kind must be identified.
|
||||
For more details about the catalog see the [Catalog Guide](catalog.md).
|
||||
Clusters are a built-in kind, so the `apiVersions` and `kind` fields should be set as above.
|
||||
The `title` is shown as a navigation item on the cluster **Settings** page and the `components.View` is displayed when the navigation item is clicked on.
|
||||
The `components.View` definition above shows how the `ExampleClusterFeatureSettings` element is included, and how its `cluster` prop is set.
|
||||
`priority` determines the order of the entity settings, the higher the number the higher in the navigation panel the setting is placed. The default value is 50.
|
||||
|
||||
The final result looks like this:
|
||||
|
||||
|
||||
|
||||
`ExampleClusterFeature` and `ExampleClusterFeatureSettings` demonstrate a cluster feature for a simple resource stack.
|
||||
In practice a resource stack can include many resources, and require more sophisticated life cycle management (upgrades, partial installations, etc.)
|
||||
Using `Renderer.K8sApi.ResourceStack` and `entitySettings` it is possible to implement solutions for more complex cluster features.
|
||||
The **Lens Metrics** setting (on the cluster **Settings** page) is a good example of an advanced solution.
|
||||
@ -22,6 +22,8 @@ nav:
|
||||
- Generator: extensions/guides/generator.md
|
||||
- Main Extension: extensions/guides/main-extension.md
|
||||
- Renderer Extension: extensions/guides/renderer-extension.md
|
||||
- Catalog: extensions/guides/catalog.md
|
||||
- Resource Stack: extensions/guides/resource-stack.md
|
||||
- Stores: extensions/guides/stores.md
|
||||
- Working with MobX: extensions/guides/working-with-mobx.md
|
||||
- Protocol Handlers: extensions/guides/protocol-handlers.md
|
||||
|
||||
Loading…
Reference in New Issue
Block a user