Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/_vue/components/ClusterPage.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="content">
+    <div class="h-100">
+      <div class="wrapper" v-if="status === 'LOADING'">
+        <cube-spinner text="" />
+        <div class="auth-output">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <pre class="auth-output" v-html="authOutput" />
+        </div>
+      </div>
+      <div class="wrapper" v-if="status === 'ERROR'">
+        <div class="error">
+          <i class="material-icons">{{ error_icon }}</i>
+          <div class="text-center">
+            <h2>{{ cluster.preferences.clusterName }}</h2>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <pre v-html="authOutput" />
+            <b-button variant="link" @click="tryAgain">
+              Reconnect
+            </b-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CubeSpinner from "@/_vue/components/CubeSpinner";
+import { remote, shell } from 'electron';
+export default {
+  name: "ClusterPage",
+  components: {
+    CubeSpinner
+  },
+  data(){
+    return {
+      authOutput: ""
+    }
+  },
+  computed: {
+    cluster: function() {
+      return this.$store.getters.clusterById(this.$route.params.id);
+    },
+    online: function() {
+      if (!this.cluster) { return false }
+      return this.cluster.online;
+    },
+    accessible: function() {
+      if (!this.cluster) { return false }
+      return this.cluster.accessible;
+    },
+    lens: function() {
+      return this.$store.getters.lensById(this.cluster.id);
+    },
+    status: function() {
+      if (this.cluster) {
+        if (this.cluster.accessible && this.lens.loaded === true) {
+          return "SUCCESS";
+        } else if (this.cluster.accessible === false) {
+          return "ERROR";
+        }
+        return "LOADING";
+      }
+      return "ERROR";
+    },
+    error_icon: function() {
+      if (!this.cluster.online) {
+        return "cloud_off"
+      } else {
+        return "https"
+      }
+    }
+  },
+  methods: {
+    tryAgain: function() {
+      this.authOutput = ""
+      this.cluster.accessible = null
+      setTimeout(() => {
+        this.loadLens()
+      }, 1000)
+
+    },
+    loadLens: function() {
+      this.authOutput = "Connecting ...\n";
+      this.$promiseIpc.on(`kube-auth:${this.cluster.id}`, (output) => {
+        this.authOutput += output.data;
+      })
+      this.toggleLens();
+      return this.$store.dispatch("refineCluster", this.$route.params.id);
+    },
+    lensLoaded: function() {
+      console.log("lens loaded")
+      this.lens.loaded = true;
+      remote.webContents.fromId(this.lens.webview.getWebContentsId()).on('new-window', (e, url) => {
+        e.preventDefault()
+        shell.openExternal(url)
+      })
+      this.$store.commit("updateLens", this.lens);
+    },
+    // Called only when online state changes
+    toggleLens: function() {
+      if (!this.lens) { return }
+      if (this.accessible) {
+        setTimeout(this.activateLens, 0); // see: https://github.com/electron/electron/issues/10016
+      } else {
+        this.hideLens();
+      }
+    },
+    activateLens: async function() {
+      console.log("activate lens")
+      if (!this.lens.webview) {
+        console.log("create webview")
+        const webview = document.createElement('webview');
+        webview.addEventListener('did-finish-load', this.lensLoaded);
+        webview.src = this.cluster.url;
+        this.lens.webview = webview;
+      }
+      this.$store.dispatch("attachWebview", this.lens);
+      this.$tracker.event("cluster", "open");
+    },
+    hideLens: function() {
+      this.$store.dispatch("hideWebviews");
+    }
+  },
+  created() {
+    this.loadLens();
+  },
+  destroyed() {
+    this.hideLens();
+  },
+  watch: {
+    "$route": "loadLens",
+    "online": "toggleLens",
+    "cluster": "toggleLens",
+    "accessible": function(newStatus, oldStatus) {
+      console.log("accessible watch, vals:", newStatus, oldStatus);
+      if(newStatus === false) { // accessble == false
+        this.$tracker.event("cluster", "open-failed");
+      }
+    },
+  }
+};
+</script>
+<style scoped lang="scss">
+div.auth-output {
+  padding-top: 250px;
+  width: 70%;
+  pre {
+    height: 100px;
+    text-align: center;
+  }
+}
+.error {
+  width: 90%;
+}
+pre {
+  font-size: 80%;
+  overflow: auto;
+  max-height: 150px;
+}
+</style>