added more sample extensions to overvew list, started clusterFeatures doc

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

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 <br> K8sApi.KubeApi <br> K8sApi.KubeObjectStore <br> Component.KubeObjectListLayout <br> Component.KubeObjectDetailsProps <br> Component.IconProps |
 [helloworld](https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |
 [minikube](https://github.com/lensapp/lens-extension-samples/tree/master/minikube-sample) | LensMainExtension <br> Store.clusterStore <br> Store.workspaceStore |
+[styling-css-modules-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-css-modules-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |
+[styling-emotion-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-emotion-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |
+[styling-sass-sample](https://github.com/lensapp/lens-extension-samples/tree/master/styling-sass-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |

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 (
             <span>
-                Enable timeseries data visualization (Prometheus stack) for your cluster.
+                Enable an example feature.
-                Install this only if you don't have existing Prometheus stack installed.
-                You can see preview of manifests <a href="https://github.com/lensapp/lens/tree/master/extensions/lens-metrics/resources" target="_blank">here</a>.
             </span>
           )
         }
       },
-      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<void>;
@@ -317,6 +315,49 @@ The `title` and `components.Description` fields appear on the cluster settings p
   abstract updateStatus(cluster: Cluster): Promise<ClusterFeatureStatus>;
 ```
 
+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<void> {
+
+    super.applyResources(cluster, super.renderTemplates(path.join(__dirname, "../resources/")));
+  }
+
+  async upgrade(cluster: Store.Cluster): Promise<void> {
+    return this.install(cluster);
+  }
+
+  async updateStatus(cluster: Store.Cluster): Promise<ClusterFeature.FeatureStatus> {
+    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<void> {
+    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.