project restructuring and initial refactoring

renderer/_vue/components/MainMenu/AddClusterMenuItem.vue

@@ -0,0 +1,72 @@
+<template>
+  <span>
+    <a
+      id="add-cluster"
+      class="add-cluster menu-item"
+      :class="[{
+        'active':isActive(),
+      }]"
+      @click.prevent="addCluster"
+      v-b-tooltip.hover.right
+      title="Add clusters"
+    >
+      <i class="material-icons">add_box</i>
+      <span v-if="newContexts.length > 0" class="badge badge-success">{{ newContexts.length }}</span>
+    </a>
+  </span>
+</template>
+
+<script>
+import ClustersMixin from "@/_vue/mixins/ClustersMixin";
+import { newContexts } from '@kubernetes/client-node/dist/config_types';
+export default {
+  name: "AddClusterMenuItem",
+  mixins: [ClustersMixin],
+  data(){
+    return {
+
+    }
+  },
+  computed: {
+  },
+  methods: {
+    isActive: function( id ){
+      return "new" === this.$route.params.id;
+    },
+    addCluster: async function(){
+      this.$router.push({
+        name: "add-cluster-page",
+        params: {
+          id: "new"
+        },
+      }).catch(err => {})
+    }
+  },
+  mounted() {
+    console.log(this.newContexts.length)
+    this.$store.dispatch("reloadAvailableKubeContexts");
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.add-cluster{
+  position: relative;
+  display: block;
+  color: #fff;
+  padding: 6px 8px 6px 9px;
+  opacity: 0.4;
+  cursor: pointer;
+  &.active{
+    opacity: 0.75;
+  }
+  i {
+    font-size: 50px;
+  }
+  .badge {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
+}
+</style>

renderer/_vue/components/MainMenu/ClusterMenuItem.vue

@@ -0,0 +1,166 @@
+<template>
+  <a
+    class="menu-item"
+    :class="[{
+      'active':isActive,
+      'online':(activated && !isActive),
+    }]"
+    @click.prevent="openClusterPage()"
+    @contextmenu.prevent="openContextMenu()"
+    :title="preferences.clusterName"
+    v-b-tooltip.hover.right
+  >
+    <div
+      class="icon-frame"
+      :class="[{
+        'active':isActive
+      }]"
+    >
+      <img v-if="preferences.icon" :src="preferences.icon">
+      <hashicon v-else :name="preferences.clusterName" size="38" />
+      <span v-if="isAdmin && eventCount > 0" class="badge badge-danger">{{ eventCount >= 1000 ? "1000+" : eventCount }}</span>
+    </div>
+  </a>
+</template>
+
+<script>
+import hashicon from "../hashicon/hashicon";
+import { setInterval, clearInterval } from "timers";
+const { remote } = require('electron')
+const { Menu, MenuItem } = remote
+
+export default {
+  name: "ClusterMenuItem",
+  components: {
+    hashicon
+  },
+  data(){
+    return {
+      eventPoller: null,
+      eventCount: 0,
+      activated: false
+    }
+  },
+  props: {
+    cluster: {
+      type: Object,
+      required: true,
+      default: null
+    },
+  },
+  computed: {
+    preferences: function() {
+      return this.cluster.preferences;
+    },
+    clusterAccessible: function() {
+      return this.$store.getters.clusterById(this.cluster.id).accessible;
+    },
+    isActive: function() {
+      return this.cluster.id === this.$route.params.id;
+    },
+    isAdmin: function() {
+      return this.cluster.isAdmin;
+    }
+  },
+  methods: {
+    openClusterPage() {
+      this.activated = true;
+      this.$router.push({
+        name: "cluster-page",
+        params: {
+          id: this.cluster.id
+        },
+      }).catch(err => {})
+    },
+    openContextMenu(){
+      const self = this;
+      const menu = new Menu()
+      menu.append(new MenuItem({ label: 'Settings', click() {
+        self.$router.push({
+          name: "cluster-settings-page",
+          params: {
+            id: self.cluster.id
+          },
+        }).catch(err => {})
+      } }))
+      if (this.activated) {
+        menu.append(new MenuItem({ label: 'Disconnect', click() {
+          self.activated = false;
+          self.stopPolling();
+          self.$store.dispatch("stopCluster", self.cluster.id);
+          if (self.isActive) {
+            self.$router.push({
+              name: "landing-page"
+            }).catch(err => {})
+          }
+        } }))
+      }
+
+      menu.popup({ window: remote.getCurrentWindow() })
+    },
+    toggleEventPolling: function() {
+      if(this.clusterAccessible && !this.eventPoller && this.activated && !this.isActive) {
+        this.fetchEvents()
+        this.eventPoller = setInterval(async () => {
+          await this.fetchEvents()
+        }, 30 * 1000);
+      } else {
+        this.eventCount = 0;
+        this.stopPolling()
+      }
+    },
+    fetchEvents: async function() {
+      try {
+        this.eventCount = await this.$promiseIpc.send("getClusterEvents", this.cluster.id);
+      } catch (error) {
+        console.error("Failed to get event count for cluster:", error)
+      }
+    },
+    stopPolling: function() {
+      if (this.eventPoller) {
+        clearInterval(this.eventPoller)
+        this.eventPoller = null
+      }
+    }
+  },
+  watch: {
+    clusterAccessible: "toggleEventPolling",
+    isActive: "toggleEventPolling"
+  },
+  beforeDestroy() {
+    this.stopPolling();
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.badge {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  padding: 4px;
+  i {
+    font-size: 8px;
+  }
+}
+img {
+  width: 38px;
+  max-height: 42px;
+}
+span.hashicon {
+  margin-top: 6px;
+}
+div.icon-frame {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+
+  &.active, &:hover {
+    margin-left: -3px;
+    padding: 0px 0px 0px 3px;
+    background-color: #f8f9fa;
+    border-radius: 3px;
+  }
+}
+</style>

renderer/_vue/components/MainMenu/MainMenu.vue

@@ -0,0 +1,108 @@
+<template>
+  <div :style="{ paddingTop: computedPaddingTop }" class="main-menu">
+    <draggable v-model="clusters">
+      <ClusterMenuItem
+        v-for="cluster in clusters" :key="cluster.id"
+        :cluster="cluster"
+      />
+    </draggable>
+    <AddClusterMenuItem/>
+    <b-tooltip v-if="clusters.length === 0" show target="add-cluster" placement="rightbottom">
+      <p class="text-left">
+        This is the quick launch menu.
+      </p>
+      <p class="text-left">
+        Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
+      </p>
+    </b-tooltip>
+  </div>
+</template>
+
+<script>
+  import ClusterMenuItem from "@/_vue/components/MainMenu/ClusterMenuItem";
+  import AddClusterMenuItem from "@/_vue/components/MainMenu/AddClusterMenuItem";
+  import draggable from 'vuedraggable'
+  import { clusterStore } from "../../../../common/cluster-store"
+  import { isMac } from "../../../../common/vars"
+
+  const {remote} = require('electron')
+  const {Menu, MenuItem} = remote
+
+  export default {
+    name: "MainMenu",
+    components: {
+      ClusterMenuItem,
+      AddClusterMenuItem,
+      draggable
+    },
+    data() {
+      return {
+        computedPaddingTop: "15px"
+      }
+    },
+    computed: {
+      clusters: {
+        get: function () {
+          return this.$store.getters.clusters;
+        },
+        set: function (clusters) {
+          this.$store.commit("updateClusters", clusters);
+          clusterStore.storeClusters(clusters);
+        }
+      }
+    },
+    methods: {
+      isActive: function (id) {
+        return id === this.$route.params.id;
+      },
+      addCluster: async function () {
+        this.$router.push({
+          name: "add-cluster-page",
+          params: {
+            id: "new"
+          },
+        }).catch(err => {})
+      }
+    },
+    mounted: function () {
+      if (isMac) {
+        this.computedPaddingTop = "25px";
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .main-menu {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 20px;
+    width: 70px;
+    padding-top: 15px;
+    background: #252729;
+    overflow: hidden;
+    z-index: 1000;
+  }
+
+  .menu-item {
+    position: relative;
+    cursor: pointer;
+    display: block;
+    padding: 6px 15px 6px 15px;
+    color: #87909c;
+    opacity: 0.3;
+
+    &.active {
+      opacity: 1;
+    }
+
+    &.online {
+      opacity: 1;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+</style>