From b6137976f71e410b0d3a29b974fac5114985649f Mon Sep 17 00:00:00 2001 From: Jim Ehrismann Date: Tue, 24 Nov 2020 12:52:09 -0500 Subject: [PATCH] added more sample extensions to overvew list, started clusterFeatures doc Signed-off-by: Jim Ehrismann --- docs/extensions/guides/README.md | 4 ++ docs/extensions/guides/renderer-extension.md | 61 ++++++++++++++++---- 2 files changed, 55 insertions(+), 10 deletions(-) diff --git a/docs/extensions/guides/README.md b/docs/extensions/guides/README.md index 2f04edfea1..90967f68a9 100644 --- a/docs/extensions/guides/README.md +++ b/docs/extensions/guides/README.md @@ -25,5 +25,9 @@ Each guide or sample will include: | Sample | APIs | | ----- | ----- | +[custom-resource-page](https://github.com/lensapp/lens-extension-samples/tree/master/custom-resource-page) | LensRendererExtension
K8sApi.KubeApi
K8sApi.KubeObjectStore
Component.KubeObjectListLayout
Component.KubeObjectDetailsProps
Component.IconProps | [helloworld](https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample) | LensMainExtension
LensRendererExtension
Component.Icon
Component.IconProps | [minikube](https://github.com/lensapp/lens-extension-samples/tree/master/minikube-sample) | LensMainExtension
Store.clusterStore
Store.workspaceStore | +[styling-css-modules-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-css-modules-sample) | LensMainExtension
LensRendererExtension
Component.Icon
Component.IconProps | +[styling-emotion-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-emotion-sample) | LensMainExtension
LensRendererExtension
Component.Icon
Component.IconProps | +[styling-sass-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-sass-sample) | LensMainExtension
LensRendererExtension
Component.Icon
Component.IconProps | diff --git a/docs/extensions/guides/renderer-extension.md b/docs/extensions/guides/renderer-extension.md index 8d02fb9cef..d7d6092748 100644 --- a/docs/extensions/guides/renderer-extension.md +++ b/docs/extensions/guides/renderer-extension.md @@ -280,35 +280,33 @@ WIP below! ### `clusterFeatures` -Cluster features are Kubernetes resources that can applied and managed to the active cluster. They can be installed/uninstalled from the [cluster settings page](). +Cluster features are Kubernetes resources that can be applied to and managed within the active cluster. They can be installed/uninstalled from the [cluster settings page](). The following example shows how to add a cluster feature: ``` typescript import { LensRendererExtension } from "@k8slens/extensions" -import { MetricsFeature } from "./src/metrics-feature" +import { ExampleFeature } from "./src/example-feature" import React from "react" -export default class ClusterMetricsFeatureExtension extends LensRendererExtension { +export default class ExampleFeatureExtension extends LensRendererExtension { clusterFeatures = [ { - title: "Metrics Stack", + title: "Example Feature", components: { Description: () => { return ( - Enable timeseries data visualization (Prometheus stack) for your cluster. - Install this only if you don't have existing Prometheus stack installed. - You can see preview of manifests here. - + Enable an example feature. + ) } }, - feature: new MetricsFeature() + feature: new ExampleFeature() } ]; } ``` -The `title` and `components.Description` fields appear on the cluster settings page. The cluster feature must extend the abstract class `ClusterFeature.Feature`, and specifically implement the following methods: +The `title` and `components.Description` fields provide content that appears on the cluster settings page, in the **Features** section. The `feature` field must specify an instance which extends the abstract class `ClusterFeature.Feature`, and specifically implement the following methods: ``` typescript abstract install(cluster: Cluster): Promise; @@ -317,6 +315,49 @@ The `title` and `components.Description` fields appear on the cluster settings p abstract updateStatus(cluster: Cluster): Promise; ``` +The following shows a very simple implementation of a `ClusterFeature`: + +``` typescript +import { ClusterFeature, Store, K8sApi } from "@k8slens/extensions"; + +export class ExampleFeature extends ClusterFeature.Feature { + + async install(cluster: Store.Cluster): Promise { + + super.applyResources(cluster, super.renderTemplates(path.join(__dirname, "../resources/"))); + } + + async upgrade(cluster: Store.Cluster): Promise { + return this.install(cluster); + } + + async updateStatus(cluster: Store.Cluster): Promise { + try { + const statefulSet = K8sApi.forCluster(cluster, K8sApi.Pod); + const examplePod = await pod.get({name: "example-pod", namespace: "default"}); + if (examplePod?.kind) { + this.status.installed = true; + this.status.currentVersion = examplePod.spec.template.spec.containers[0].image.split(":")[1]; + this.status.canUpgrade = true; // a real implementation would perform a check here that is relevant to the specific feature + } else { + this.status.installed = false; + } + } catch(e) { + if (e?.error?.code === 404) { + this.status.installed = false; + } + } + + return this.status; + } + + async uninstall(cluster: Store.Cluster): Promise { + const podApi = K8sApi.forCluster(cluster, K8sApi.Pod); + + await podApi.delete({name: "example-pod", namespace: "default"}); +} +``` + ### `appPreferences` The Preferences page is essentially a global page. Extensions can add custom preferences to the Preferences page, thus providing a single location for users to configure global, for Lens and extensions alike.