Reconnecting cluster after selection (#685)

* Reconnecting selected cluster

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

* Cleaning up ClusteStatus render() method

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

src/common/cluster-store.ts

@@ -84,7 +84,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   }
 
   isActive(id: ClusterId) {
-    return this.activeCluster.id === id;
+    return this.activeClusterId === id;
   }
 
   setActive(id: ClusterId) {

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

@@ -16,6 +16,7 @@ import { getMatchedCluster } from "../cluster-manager/cluster-view.route";
 export class ClusterSettings extends React.Component {
   render() {
     const cluster = getMatchedCluster();
+    if (!cluster) return null;
     const header = (
       <>
         <ClusterIcon

src/renderer/components/app-init/app-init.tsx

@@ -13,7 +13,6 @@ interface Props {
 
 export class AppInit extends React.Component<Props> {
   static async start(rootElem: HTMLElement) {
-
     render(<AppInit/>, rootElem); // show loading indicator asap
     await AppInit.readyStateCheck(rootElem); // wait while all good to run
   }

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

@@ -11,6 +11,7 @@ import { Button } from "../button";
 import { cssNames, IClassName } from "../../utils";
 import { Cluster } from "../../../main/cluster";
 import { ClusterId, clusterStore } from "../../../common/cluster-store";
+import { CubeSpinner } from "../spinner";
 
 interface Props {
   className?: IClassName;
@@ -31,17 +32,13 @@ export class ClusterStatus extends React.Component<Props> {
   }
 
   async componentDidMount() {
-    if (this.cluster.disconnected) {
-      return;
-    }
-    this.authOutput = [{ data: "Connecting..." }];
     ipcRenderer.on(`kube-auth:${this.cluster.id}`, (evt, res: KubeAuthProxyLog) => {
       this.authOutput.push({
         data: res.data.trimRight(),
         error: res.error,
       });
     })
-    if (!this.cluster.initialized) {
+    if (!this.cluster.initialized || this.cluster.disconnected) {
       await this.refreshCluster();
     }
   }
@@ -55,48 +52,57 @@ export class ClusterStatus extends React.Component<Props> {
   }
 
   reconnect = async () => {
-    this.authOutput = [{ data: "Reconnecting..." }];
     this.isReconnecting = true;
     await this.refreshCluster();
     this.isReconnecting = false;
   }
 
-  render() {
+  renderContent() {
     const { authOutput, cluster, hasErrors } = this;
-    const isDisconnected = !!cluster.disconnected;
     const failureReason = cluster.failureReason;
-    const isError = hasErrors || isDisconnected;
+    if (!hasErrors || this.isReconnecting) {
-    return (
+      return (
-      <div className={cssNames("ClusterStatus flex column gaps box center", this.props.className)}>
+        <>
-        {isError && (
+          <CubeSpinner />
-          <Icon
-            material="cloud_off"
-            className={cssNames({ error: hasErrors })}
-          />
-        )}
-        <h2>
-          {cluster.preferences.clusterName}
-        </h2>
-        {!isDisconnected && (
           <pre className="kube-auth-out">
+            <p>{this.isReconnecting ? "Reconnecting..." : "Connecting..."}</p>
             {authOutput.map(({ data, error }, index) => {
               return <p key={index} className={cssNames({ error })}>{data}</p>
             })}
           </pre>
-        )}
+        </>
+      );
+    }
+    return (
+      <>
+        <Icon material="cloud_off" className="error" />
+        <h2>
+          {cluster.preferences.clusterName}
+        </h2>
+        <pre className="kube-auth-out">
+          {authOutput.map(({ data, error }, index) => {
+            return <p key={index} className={cssNames({ error })}>{data}</p>
+          })}
+        </pre>
         {failureReason && (
           <div className="failure-reason error">{failureReason}</div>
         )}
-        {isError && (
+        <Button
-          <Button
+          primary
-            primary
+          label="Reconnect"
-            label="Reconnect"
+          className="box center"
-            className="box center"
+          onClick={this.reconnect}
-            onClick={this.reconnect}
+          waiting={this.isReconnecting}
-            waiting={this.isReconnecting}
+        />
-          />
+      </>
-        )}
+    );
+  }
+
+  render() {
+    return (
+      <div className={cssNames("ClusterStatus flex column gaps box center align-center justify-center", this.props.className)}>
+        {this.renderContent()}
       </div>
-    )
+    );
   }
 }

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -34,7 +34,7 @@ export class ClustersMenu extends React.Component<Props> {
 
   showCluster = (clusterId: ClusterId) => {
     clusterStore.setActive(clusterId);
-    navigate(clusterViewURL({ params: { clusterId } }))
+    navigate(clusterViewURL({ params: { clusterId } }));
   }
 
   addCluster = () => {