tweak

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

extensions/metrics-cluster-feature/renderer.tsx

@@ -1,12 +1,24 @@
 import { Registry, LensRendererExtension } from "@k8slens/extensions"
 import { MetricsFeature } from "./src/metrics-feature"
+import React from "react"
 
 export default class ClusterMetricsFeatureExtension extends LensRendererExtension {
   registerClusterFeatures(registry: Registry.ClusterFeatureRegistry) {
     this.disposers.push(
       registry.add({
         title: "Metrics Stack",
-        description: "Enable timeseries data visualization (Prometheus stack) for your cluster.",
+        components: {
+          Description: () => {
+            return (
+              <span>
+                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
+                <a href="https://github.com/lensapp/lens/tree/master/extensions/lens-metrics/resources" target="_blank">here</a>.
+              </span>
+            )
+          }
+        },
         feature: new MetricsFeature()
       })
     )

src/extensions/cluster-feature-registry.ts

@@ -1,10 +1,14 @@
 import { observable } from "mobx"
-import { Feature } from "../main/feature";
+import { ClusterFeature } from "./cluster-feature";
+
+export interface ClusterFeatureComponents {
+  Description: React.ComponentType<any>;
+}
 
 export interface ClusterFeatureRegistration {
   title: string;
-  description: string;
+  components: ClusterFeatureComponents
-  feature: Feature
+  feature: ClusterFeature
 }
 
 export class ClusterFeatureRegistry {

src/extensions/cluster-feature.ts

@@ -2,25 +2,25 @@ import fs from "fs";
 import path from "path"
 import hb from "handlebars"
 import { observable } from "mobx"
-import { ResourceApplier } from "./resource-applier"
+import { ResourceApplier } from "../main/resource-applier"
-import { Cluster } from "./cluster";
+import { Cluster } from "../main/cluster";
-import logger from "./logger";
+import logger from "../main/logger";
 import { app } from "electron"
 import { clusterIpc } from "../common/cluster-ipc"
 
-export interface FeatureStatus {
+export interface ClusterFeatureStatus {
   currentVersion: string;
   installed: boolean;
   latestVersion: string;
   canUpgrade: boolean;
 }
 
-export abstract class Feature {
+export abstract class ClusterFeature {
   name: string;
   latestVersion: string;
   config: any;
 
-  @observable status: FeatureStatus = {
+  @observable status: ClusterFeatureStatus = {
     currentVersion: null,
     installed: false,
     latestVersion: null,
@@ -33,7 +33,7 @@ export abstract class Feature {
 
   abstract async uninstall(cluster: Cluster): Promise<void>;
 
-  abstract async updateStatus(cluster: Cluster): Promise<FeatureStatus>;
+  abstract async updateStatus(cluster: Cluster): Promise<ClusterFeatureStatus>;
 
   protected async applyResources(cluster: Cluster, resources: string[]) {
     if (app) {

src/extensions/core-api/cluster-feature.ts

@@ -1 +1 @@
-export { Feature, FeatureStatus } from "../../main/feature"
+export { ClusterFeature as Feature, ClusterFeatureStatus as FeatureStatus } from "../cluster-feature"

src/renderer/components/+cluster-settings/components/install-feature.tsx

@@ -5,17 +5,18 @@ import { Cluster } from "../../../../main/cluster";
 import { Button } from "../../button";
 import { Notifications } from "../../notifications";
 import { Spinner } from "../../spinner";
-import { Feature } from "../../../../main/feature";
+import { ClusterFeature } from "../../../../extensions/cluster-feature";
 import { interval } from "../../../utils";
 
 interface Props {
   cluster: Cluster
-  feature: Feature
+  feature: ClusterFeature
 }
 
 @observer
 export class InstallFeature extends React.Component<Props> {
   @observable loading = false;
+  @observable message = "";
 
   componentDidMount() {
     const feature = this.props.feature
@@ -32,6 +33,7 @@ export class InstallFeature extends React.Component<Props> {
     disposeOnUnmount(this,
       reaction(() => feature.status.installed, () => {
         this.loading = false;
+        this.message = ""
       }, { equals: comparer.structural })
     );
   }
@@ -57,9 +59,10 @@ export class InstallFeature extends React.Component<Props> {
           <Button
             accent
             disabled={disabled}
-            onClick={this.runAction(() =>
+            onClick={this.runAction(async () => {
+              this.message = "Uninstalling feature ..."
               feature.uninstall(cluster)
-            )}
+            })}
           >
             Uninstall
           </Button>
@@ -68,15 +71,17 @@ export class InstallFeature extends React.Component<Props> {
           <Button
             primary
             disabled={disabled}
-            onClick={this.runAction(() =>
+            onClick={this.runAction(async () =>{
+              this.message = "Installing feature ..."
               feature.install(cluster)
-            )}
+            })}
           >
             Install
           </Button>
         }
         {loadingIcon}
         {!cluster.isAdmin && <span className='admin-note'>Actions can only be performed by admins.</span>}
+        {cluster.isAdmin && this.loading && this.message !== "" && <span className='admin-note'>{this.message}</span>}
       </div>
     );
   }

src/renderer/components/+cluster-settings/features.tsx

@@ -19,7 +19,7 @@ export class Features extends React.Component<Props> {
             <InstallFeature cluster={cluster} feature={f.feature}>
               <>
                 <SubTitle title={f.title}/>
-                <p>{f.description}</p>
+                <p><f.components.Description /></p>
               </>
             </InstallFeature>
           )