Simplify add cluster view (#2716)

- Only shows editor, and will save all text to file

- Reports some validation errors, but doesn't block the add cluster
  button

- Cleanup kube helpers to facilitate clearer FS interactions

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

src/renderer/api/kube-watch-api.ts

@@ -26,8 +26,8 @@ import type { KubeObjectStore } from "../kube-object.store";
 import type { ClusterContext } from "../components/context";
 
 import plimit from "p-limit";
-import { comparer, IReactionDisposer, observable, reaction, makeObservable } from "mobx";
-import { autoBind, noop } from "../utils";
+import { comparer, observable, reaction, makeObservable } from "mobx";
+import { autoBind, Disposer, noop } from "../utils";
 import type { KubeApi } from "./kube-api";
 import type { KubeJsonApiData } from "./kube-json-api";
 import { isDebugging, isProduction } from "../../common/vars";
@@ -80,7 +80,7 @@ export class KubeWatchApi {
     };
   }
 
-  subscribeStores(stores: KubeObjectStore[], opts: IKubeWatchSubscribeStoreOptions = {}): () => void {
+  subscribeStores(stores: KubeObjectStore[], opts: IKubeWatchSubscribeStoreOptions = {}): Disposer {
     const { preload = true, waitUntilLoaded = true, loadOnce = false, } = opts;
     const subscribingNamespaces = opts.namespaces ?? this.context?.allNamespaces ?? [];
     const unsubscribeList: Function[] = [];
@@ -88,7 +88,7 @@ export class KubeWatchApi {
 
     const load = (namespaces = subscribingNamespaces) => this.preloadStores(stores, { namespaces, loadOnce });
     let preloading = preload && load();
-    let cancelReloading: IReactionDisposer = noop;
+    let cancelReloading: Disposer = noop;
 
     const subscribe = () => {
       if (isUnsubscribed) return;

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -20,35 +20,48 @@
  */
 
 import "./add-cluster.scss";
-import React from "react";
+
+import type { KubeConfig } from "@kubernetes/client-node";
+import fse from "fs-extra";
+import { debounce } from "lodash";
+import { action, computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { action, observable, runInAction, makeObservable } from "mobx";
-import { KubeConfig } from "@kubernetes/client-node";
+import path from "path";
+import React from "react";
+
+import { catalogURL } from "../+catalog";
+import { ClusterStore } from "../../../common/cluster-store";
+import { appEventBus } from "../../../common/event-bus";
+import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
+import { docsUrl } from "../../../common/vars";
+import { navigate } from "../../navigation";
+import { iter } from "../../utils";
 import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
-import { loadConfig, splitConfig, validateKubeConfig } from "../../../common/kube-helpers";
-import { ClusterStore } from "../../../common/cluster-store";
-import { v4 as uuid } from "uuid";
-import { navigate } from "../../navigation";
-import { UserStore } from "../../../common/user-store";
-import { Notifications } from "../notifications";
-import { ExecValidationNotFoundError } from "../../../common/custom-errors";
-import { appEventBus } from "../../../common/event-bus";
 import { PageLayout } from "../layout/page-layout";
-import { docsUrl } from "../../../common/vars";
-import { catalogURL } from "../+catalog";
-import { preferencesURL } from "../+preferences";
-import { Input } from "../input";
+import { Notifications } from "../notifications";
+
+interface Option {
+  config: KubeConfig;
+  error?: string;
+}
+
+function getContexts(config: KubeConfig): Map<string, Option> {
+  return new Map(
+    splitConfig(config)
+      .map(({ config, error }) => [config.currentContext, {
+        config,
+        error,
+      }])
+  );
+}
+
 @observer
 export class AddCluster extends React.Component {
-  @observable.ref kubeConfigLocal: KubeConfig;
-  @observable.ref error: React.ReactNode;
+  @observable kubeContexts = observable.map<string, Option>();
   @observable customConfig = "";
-  @observable proxyServer = "";
   @observable isWaiting = false;
-  @observable showSettings = false;
-
-  kubeContexts = observable.map<string, KubeConfig>();
+  @observable errorText: string;
 
   constructor(props: {}) {
     super(props);
@@ -59,159 +72,75 @@ export class AddCluster extends React.Component {
     appEventBus.emit({ name: "cluster-add", action: "start" });
   }
 
-  componentWillUnmount() {
-    UserStore.getInstance().markNewContextsAsSeen();
+  @computed get allErrors(): string[] {
+    return [
+      this.errorText,
+      ...iter.map(this.kubeContexts.values(), ({ error }) => error)
+    ].filter(Boolean);
   }
 
   @action
-  refreshContexts() {
-    this.kubeContexts.clear();
+  refreshContexts = debounce(() => {
+    const { config, error } = loadConfigFromString(this.customConfig.trim() || "{}");
 
-    try {
-      this.error = "";
-      const contexts = this.getContexts(loadConfig(this.customConfig || "{}"));
-
-      console.log(contexts);
-
-      this.kubeContexts.replace(contexts);
-    } catch (err) {
-      this.error = String(err);
-    }
-  }
-
-  getContexts(config: KubeConfig): Map<string, KubeConfig> {
-    const contexts = new Map();
-
-    splitConfig(config).forEach(config => {
-      contexts.set(config.currentContext, config);
-    });
-
-    return contexts;
-  }
+    this.kubeContexts.replace(getContexts(config));
+    this.errorText = error?.toString();
+  }, 500);
 
   @action
-  addClusters = (): void => {
+  addClusters = async () => {
+    this.isWaiting = true;
+    appEventBus.emit({ name: "cluster-add", action: "click" });
+
     try {
+      const absPath = ClusterStore.getCustomKubeConfigPath();
 
-      this.error = "";
-      this.isWaiting = true;
-      appEventBus.emit({ name: "cluster-add", action: "click" });
-      const newClusters = Array.from(this.kubeContexts.keys()).filter(context => {
-        const kubeConfig = this.kubeContexts.get(context);
-        const error = validateKubeConfig(kubeConfig, context);
+      await fse.ensureDir(path.dirname(absPath));
+      await fse.writeFile(absPath, this.customConfig.trim(), { encoding: "utf-8", mode: 0o600 });
 
-        if (error) {
-          this.error = error.toString();
+      Notifications.ok(`Successfully added ${this.kubeContexts.size} new cluster(s)`);
 
-          if (error instanceof ExecValidationNotFoundError) {
-            Notifications.error(<>Error while adding cluster(s): {this.error}</>);
-          }
-        }
-
-        return Boolean(!error);
-      }).map(context => {
-        const clusterId = uuid();
-        const kubeConfig = this.kubeContexts.get(context);
-        const kubeConfigPath = ClusterStore.embedCustomKubeConfig(clusterId, kubeConfig); // save in app-files folder
-
-        return {
-          id: clusterId,
-          kubeConfigPath,
-          contextName: kubeConfig.currentContext,
-          preferences: {
-            clusterName: kubeConfig.currentContext,
-            httpsProxy: this.proxyServer || undefined,
-          },
-        };
-      });
-
-      runInAction(() => {
-        ClusterStore.getInstance().addClusters(...newClusters);
-
-        Notifications.ok(
-          <>Successfully imported <b>{newClusters.length}</b> cluster(s)</>
-        );
-
-        navigate(catalogURL());
-      });
-      this.refreshContexts();
-    } catch (err) {
-      this.error = String(err);
-      Notifications.error(<>Error while adding cluster(s): {this.error}</>);
-    } finally {
-      this.isWaiting = false;
+      return navigate(catalogURL());
+    } catch (error) {
+      Notifications.error(`Failed to add clusters: ${error}`);
     }
   };
 
-  renderInfo() {
+  render() {
     return (
-      <p>
-        Paste kubeconfig as a text from the clipboard to the textarea below.
-        If you want to add clusters from kubeconfigs that exists on filesystem, please add those files (or folders) to kubeconfig sync via <a onClick={() => navigate(preferencesURL())}>Preferences</a>.
-        Read more about adding clusters <a href={`${docsUrl}/clusters/adding-clusters/`} rel="noreferrer" target="_blank">here</a>.
-      </p>
-    );
-  }
-
-  renderKubeConfigSource() {
-    return (
-      <>
+      <PageLayout className="AddClusters" showOnTop={true}>
+        <h2>Add Clusters from Kubeconfig</h2>
+        <p>
+          Clusters added here are <b>not</b> merged into the <code>~/.kube/config</code> file.
+          Read more about adding clusters <a href={`${docsUrl}/clusters/adding-clusters/`} rel="noreferrer" target="_blank">here</a>.
+        </p>
         <div className="flex column">
           <AceEditor
             autoFocus
             showGutter={false}
             mode="yaml"
             value={this.customConfig}
-            wrap={true}
             onChange={value => {
               this.customConfig = value;
+              this.errorText = "";
               this.refreshContexts();
             }}
           />
         </div>
-      </>
-    );
-  }
-
-  render() {
-    const submitDisabled = this.kubeContexts.size === 0;
-
-    return (
-      <PageLayout className="AddClusters" showOnTop={true}>
-        <h2>Add Clusters from Kubeconfig</h2>
-        {this.renderInfo()}
-        {this.renderKubeConfigSource()}
-        <div className="cluster-settings">
-          <a href="#" onClick={() => this.showSettings = !this.showSettings}>
-            Proxy settings
-          </a>
-        </div>
-        {this.showSettings && (
-          <div className="proxy-settings">
-            <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
-            <Input
-              autoFocus
-              value={this.proxyServer}
-              onChange={value => this.proxyServer = value}
-              theme="round-black"
-            />
-            <small className="hint">
-              {"A HTTP proxy server URL (format: http://<address>:<port>)."}
-            </small>
-          </div>
+        {this.allErrors.length > 0 && (
+          <>
+            <h3>KubeConfig Yaml Validation Errors:</h3>
+            {...this.allErrors.map(error => <div key={error} className="error">{error}</div>)}
+          </>
         )}
-        {this.error && (
-          <div className="error">{this.error}</div>
-        )}
-
         <div className="actions-panel">
           <Button
             primary
-            disabled={submitDisabled}
-            label={this.kubeContexts.keys.length < 2 ? "Add cluster" : "Add clusters"}
+            disabled={this.kubeContexts.size === 0}
+            label={this.kubeContexts.size === 1 ? "Add cluster" : "Add clusters"}
             onClick={this.addClusters}
             waiting={this.isWaiting}
-            tooltip={submitDisabled ? "Paste a valid kubeconfig." : undefined}
+            tooltip={this.kubeContexts.size === 0 || "Paste in at least one cluster to add."}
             tooltipOverrideDisabled
           />
         </div>

src/renderer/components/cluster-manager/cluster-status.tsx

@@ -19,21 +19,23 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import type { KubeAuthProxyLog } from "../../../main/kube-auth-proxy";
-
 import "./cluster-status.scss";
-import React from "react";
-import { observer } from "mobx-react";
+
 import { ipcRenderer } from "electron";
 import { computed, observable, makeObservable } from "mobx";
-import { requestMain, subscribeToBroadcast } from "../../../common/ipc";
-import { Icon } from "../icon";
-import { Button } from "../button";
-import { cssNames, IClassName } from "../../utils";
-import type { Cluster } from "../../../main/cluster";
-import { ClusterId, ClusterStore } from "../../../common/cluster-store";
-import { CubeSpinner } from "../spinner";
+import { observer } from "mobx-react";
+import React from "react";
 import { clusterActivateHandler } from "../../../common/cluster-ipc";
+import { ClusterId, ClusterStore } from "../../../common/cluster-store";
+import { requestMain, subscribeToBroadcast } from "../../../common/ipc";
+import type { Cluster } from "../../../main/cluster";
+import { cssNames, IClassName } from "../../utils";
+import { Button } from "../button";
+import { Icon } from "../icon";
+import { CubeSpinner } from "../spinner";
+import type { KubeAuthProxyLog } from "../../../main/kube-auth-proxy";
+import { navigate } from "../../navigation";
+import { entitySettingsURL } from "../+entity-settings";
 
 interface Props {
   className?: IClassName;
@@ -82,6 +84,15 @@ export class ClusterStatus extends React.Component<Props> {
     this.isReconnecting = false;
   };
 
+  manageProxySettings = () => {
+    navigate(entitySettingsURL({
+      params: {
+        entityId: this.props.clusterId,
+      },
+      fragment: "http-proxy",
+    }));
+  };
+
   renderContent() {
     const { authOutput, cluster, hasErrors } = this;
     const failureReason = cluster.failureReason;
@@ -89,7 +100,7 @@ export class ClusterStatus extends React.Component<Props> {
     if (!hasErrors || this.isReconnecting) {
       return (
         <>
-          <CubeSpinner/>
+          <CubeSpinner />
           <pre className="kube-auth-out">
             <p>{this.isReconnecting ? "Reconnecting..." : "Connecting..."}</p>
             {authOutput.map(({ data, error }, index) => {
@@ -102,7 +113,7 @@ export class ClusterStatus extends React.Component<Props> {
 
     return (
       <>
-        <Icon material="cloud_off" className="error"/>
+        <Icon material="cloud_off" className="error" />
         <h2>
           {cluster.preferences.clusterName}
         </h2>
@@ -121,6 +132,12 @@ export class ClusterStatus extends React.Component<Props> {
           onClick={this.reconnect}
           waiting={this.isReconnecting}
         />
+        <Button
+          primary
+          label="Manage Proxy Settings"
+          className="box center"
+          onClick={this.manageProxySettings}
+        />
       </>
     );
   }

src/renderer/components/cluster-settings/components/cluster-proxy-setting.tsx

@@ -58,7 +58,7 @@ export class ClusterProxySetting extends React.Component<Props> {
   render() {
     return (
       <>
-        <SubTitle title="HTTP Proxy" />
+        <SubTitle title="HTTP Proxy" id="http-proxy" />
         <Input
           theme="round-black"
           value={this.proxy}