Rework extension API into parts (#2879)

* `Main`, `Common`, and `Renderer`
* move registry types to Common.Types

Signed-off-by: Sebastian Malton <sebastian@malton.name>

extensions/metrics-cluster-feature/renderer.tsx

@@ -20,10 +20,10 @@
  */
 
 import React from "react";
-import { LensRendererExtension, Catalog } from "@k8slens/extensions";
+import { Common, Renderer } from "@k8slens/extensions";
 import { MetricsSettings } from "./src/metrics-settings";
 
-export default class ClusterMetricsFeatureExtension extends LensRendererExtension {
+export default class ClusterMetricsFeatureExtension extends Renderer.LensExtension {
   entitySettings = [
     {
       apiVersions: ["entity.k8slens.dev/v1alpha1"],
@@ -31,7 +31,7 @@ export default class ClusterMetricsFeatureExtension extends LensRendererExtensio
       title: "Lens Metrics",
       priority: 5,
       components: {
-        View: ({ entity = null }: { entity: Catalog.KubernetesCluster}) => {
+        View: ({ entity = null }: { entity: Common.Catalog.KubernetesCluster}) => {
           return (
             <MetricsSettings cluster={entity} />
           );

extensions/metrics-cluster-feature/src/metrics-feature.ts

@@ -19,10 +19,14 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Catalog, K8sApi } from "@k8slens/extensions";
+import { Renderer, Common } from "@k8slens/extensions";
 import semver from "semver";
 import * as path from "path";
 
+const { ResourceStack, forCluster, StorageClass, Namespace } = Renderer.K8sApi;
+
+type ResourceStack = Renderer.K8sApi.ResourceStack;
+
 export interface MetricsConfiguration {
   // Placeholder for Metrics config structure
   prometheus: {
@@ -58,10 +62,10 @@ export class MetricsFeature {
   name = "lens-metrics";
   latestVersion = "v2.26.0-lens1";
 
-  protected stack: K8sApi.ResourceStack;
+  protected stack: ResourceStack;
 
-  constructor(protected cluster: Catalog.KubernetesCluster) {
-    this.stack = new K8sApi.ResourceStack(cluster, this.name);
+  constructor(protected cluster: Common.Catalog.KubernetesCluster) {
+    this.stack = new ResourceStack(cluster, this.name);
   }
 
   get resourceFolder() {
@@ -70,7 +74,7 @@ export class MetricsFeature {
 
   async install(config: MetricsConfiguration): Promise<string> {
     // Check if there are storageclasses
-    const storageClassApi = K8sApi.forCluster(this.cluster, K8sApi.StorageClass);
+    const storageClassApi = forCluster(this.cluster, StorageClass);
     const scs = await storageClassApi.list();
 
     config.persistence.enabled = scs.some(sc => (
@@ -91,7 +95,7 @@ export class MetricsFeature {
     const status: MetricsStatus = { installed: false, canUpgrade: false};
 
     try {
-      const namespaceApi = K8sApi.forCluster(this.cluster, K8sApi.Namespace);
+      const namespaceApi = forCluster(this.cluster, Namespace);
       const namespace = await namespaceApi.get({name: "lens-metrics"});
 
       if (namespace?.kind) {

extensions/metrics-cluster-feature/src/metrics-settings.tsx

@@ -19,13 +19,22 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import React from "react";
-import { Component, Catalog, K8sApi } from "@k8slens/extensions";
+import { Common, Renderer } from "@k8slens/extensions";
 import { observer } from "mobx-react";
 import { computed, observable, makeObservable } from "mobx";
 import { MetricsFeature, MetricsConfiguration } from "./metrics-feature";
 
+const {
+  K8sApi: {
+    forCluster, StatefulSet, DaemonSet, Deployment,
+  },
+  Component: {
+    SubTitle, FormSwitch, Switcher, Button,
+  }
+} = Renderer;
+
 interface Props {
-  cluster: Catalog.KubernetesCluster;
+  cluster: Common.Catalog.KubernetesCluster;
 }
 
 @observer
@@ -102,7 +111,7 @@ export class MetricsSettings extends React.Component<Props> {
       this.changed = true;
     }
 
-    const statefulSet = K8sApi.forCluster(this.props.cluster, K8sApi.StatefulSet);
+    const statefulSet = forCluster(this.props.cluster, StatefulSet);
 
     try {
       await statefulSet.get({name: "prometheus", namespace: "lens-metrics"});
@@ -115,7 +124,7 @@ export class MetricsSettings extends React.Component<Props> {
       }
     }
 
-    const deployment = K8sApi.forCluster(this.props.cluster, K8sApi.Deployment);
+    const deployment = forCluster(this.props.cluster, Deployment);
 
     try {
       await deployment.get({name: "kube-state-metrics", namespace: "lens-metrics"});
@@ -128,7 +137,7 @@ export class MetricsSettings extends React.Component<Props> {
       }
     }
 
-    const daemonSet = K8sApi.forCluster(this.props.cluster, K8sApi.DaemonSet);
+    const daemonSet = forCluster(this.props.cluster, DaemonSet);
 
     try {
       await daemonSet.get({name: "node-exporter", namespace: "lens-metrics"});
@@ -211,10 +220,10 @@ export class MetricsSettings extends React.Component<Props> {
           </section>
         )}
         <section>
-          <Component.SubTitle title="Prometheus" />
-          <Component.FormSwitch
+          <SubTitle title="Prometheus" />
+          <FormSwitch
             control={
-              <Component.Switcher
+              <Switcher
                 disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
                 checked={!!this.featureStates.prometheus && this.props.cluster.status.active}
                 onChange={v => this.togglePrometheus(v.target.checked)}
@@ -229,10 +238,10 @@ export class MetricsSettings extends React.Component<Props> {
         </section>
 
         <section>
-          <Component.SubTitle title="Kube State Metrics" />
-          <Component.FormSwitch
+          <SubTitle title="Kube State Metrics" />
+          <FormSwitch
             control={
-              <Component.Switcher
+              <Switcher
                 disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
                 checked={!!this.featureStates.kubeStateMetrics && this.props.cluster.status.active}
                 onChange={v => this.toggleKubeStateMetrics(v.target.checked)}
@@ -248,10 +257,10 @@ export class MetricsSettings extends React.Component<Props> {
         </section>
 
         <section>
-          <Component.SubTitle title="Node Exporter" />
-          <Component.FormSwitch
+          <SubTitle title="Node Exporter" />
+          <FormSwitch
             control={
-              <Component.Switcher
+              <Switcher
                 disabled={this.featureStates.nodeExporter === undefined || !this.isTogglable}
                 checked={!!this.featureStates.nodeExporter && this.props.cluster.status.active}
                 onChange={v => this.toggleNodeExporter(v.target.checked)}
@@ -267,7 +276,7 @@ export class MetricsSettings extends React.Component<Props> {
         </section>
 
         <section>
-          <Component.Button
+          <Button
             label={this.buttonLabel}
             waiting={this.inProgress}
             onClick={() => this.save()}