reverting dashboard rendering to webview, part 1

src/renderer/_vue/App.vue

@@ -1,29 +1,33 @@
 <template>
-  <div class="draggable-top" />
-  <div class="main-view" :class="{ 'menu-visible': isMenuVisible }">
-    <main-menu v-if="isMenuVisible" />
-    <router-view />
+  <div id="app_vue">
+    <div id="lens-container" />
+    <div class="draggable-top"/>
+    <div class="main-view" :class="{ 'menu-visible': isMenuVisible }">
+      <main-menu v-if="isMenuVisible"/>
+      <router-view/>
+    </div>
+    <bottom-bar v-if="isMenuVisible"/>
   </div>
-  <bottom-bar v-if="isMenuVisible" />
 </template>
 
 <script>
 import MainMenu from "@/_vue/components/MainMenu/MainMenu";
 import BottomBar from "@/_vue/components/BottomBar/BottomBar";
+
 export default {
   name: 'Lens',
   components: {
     BottomBar,
     MainMenu
   },
-  computed:{
-    isMenuVisible: function(){ return this.$store.getters.isMenuVisible }
+  computed: {
+    isMenuVisible: function () { return this.$store.getters.isMenuVisible }
   }
 }
 </script>
 
 <style scoped>
-  .draggable-top{
+  .draggable-top {
     -webkit-app-region: drag;
     left: 0;
     top: 0;

src/renderer/_vue/assets/css/app.scss

@@ -25,18 +25,7 @@ pre {
   color: $lens-text-color-light;
 }
 
-// react-app container (dashboard)
 #app {
-  position: absolute;
-  top: 0;
-  left: 70px;
-  right: 0;
-  height: 100%;
-  z-index: 100;
-  display: none;
-}
-
-#app_vue {
   width: 100%;
   height: 100%;
   & > .main-view{
@@ -161,7 +150,7 @@ h1, h2, h3, h4, h5, h6{
 
 // Force BS modals to use main app font etc.
 .modal-open{
-  @extend #app_vue
+  @extend #app
 }
 
 .popover {
@@ -204,4 +193,14 @@ h1, h2, h3, h4, h5, h6{
     top: 3px;
     font-size: 16px;
   }
-}
+}
+
+#lens-container {
+  position: absolute;
+  top: 0;
+  left: 70px;
+  right: 0;
+  height: 100%;
+  z-index: 100;
+  display: none;
+}

src/renderer/_vue/components/AddWorkspacePage.vue

@@ -89,7 +89,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
   right: 70px;
 }

src/renderer/_vue/components/EditWorkspacePage.vue

@@ -98,7 +98,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
   right: 70px;
 }

src/renderer/_vue/components/PreferencesPage.vue

@@ -225,7 +225,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
 }
 .lens-preferences {

src/renderer/_vue/components/WorkspacesPage.vue

@@ -98,7 +98,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
   right: 70px;
 }

src/renderer/_vue/index.js

@@ -1,3 +1,4 @@
+import "../../common/system-ca"
 import "./assets/css/app.scss"
 import "prismjs";
 import "prismjs/components/prism-yaml"
@@ -29,19 +30,19 @@ Vue.mixin({
   }
 })
 
-// run
-setTimeout(main, 250);
-
-export async function main() {
-  try {
-    await store.dispatch('init');
+// any initialization we want to do for app state
+setTimeout(() => {
+  store.dispatch('init', ).catch((error) => {
+    console.error(error)
+  }).finally(() => {
+    /* eslint-disable no-new */
+    console.log("start vue")
     new Vue({
-      components: {App},
+      components: { App },
+      persist,
       store,
       router,
       template: '<App/>'
-    }).$mount('#app_vue')
-  } catch (err) {
-    console.error(err)
-  }
-}
+    }).$mount('#app')
+  })
+}, 0)

src/renderer/_vue/store/modules/clusters.ts

@@ -166,7 +166,7 @@ const actions: ActionTree<ClusterState, any>  = {
   },
 
   attachWebview({commit}, lens: LensWebview) {
-    const container: any = document.getElementById("app");
+    const container: any = document.getElementById("lens-container");
     if (!container || !lens.webview) {
       return
     }
@@ -190,7 +190,7 @@ const actions: ActionTree<ClusterState, any>  = {
     promiseIpc.send("enableClusterSettingsMenuItem", lens.id)
   },
   detachWebview({commit}, lens: LensWebview) {
-    const container: any = document.getElementById("app");
+    const container: any = document.getElementById("lens-container");
     if (!container) { return }
     container.childNodes.forEach((child: any) => {
       if (child === lens.webview) {
@@ -203,7 +203,7 @@ const actions: ActionTree<ClusterState, any>  = {
     promiseIpc.send("disableClusterSettingsMenuItem")
   },
   hideWebviews({commit}) {
-    const container: any = document.getElementById("app");
+    const container: any = document.getElementById("lens-container");
     if (!container) { return }
     container.style = "display: none;"
     container.childNodes.forEach((child: any) => {

src/renderer/components/app.tsx

@@ -1,4 +1,3 @@
-import "../../common/system-ca"
 import "./app.scss";
 
 import React from "react";

src/renderer/template.html

@@ -7,15 +7,11 @@
 </head>
 <body>
 
-We are using node <script>document.write(process.versions.node)</script>,
-Chrome <script>document.write(process.versions.chrome)</script>,
-and Electron <script>document.write(process.versions.electron)</script>.
-
 <div id="app"></div>
-<div id="app_vue"></div>
 
-<script src="dll.js"></script>
-<script src="renderer_vue.js"></script>
+<!--<div id="app_vue"></div>-->
+<!--<script src="dll.js"></script>-->
+<!--<script src="renderer_vue.js"></script>-->
 
 </body>
 </html>