project restructuring and initial refactoring

renderer/_vue/components/ClusterSettings/General/ClusterIcon.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="settings-section">
+    <b>Cluster Icon</b>
+    <p>
+      Define cluster icon. By default automatically generated.
+    </p>
+    <div class="row">
+      <span class="cluster-settings-icon">
+        <img v-if="preferences.icon" :src="preferences.icon" class="cluster-icon">
+        <hashicon v-else :name="cluster.preferences.clusterName" size="38" />
+      </span>
+      <div class="col">
+        <b-form-file
+          ref="fileUpload"
+          v-model="file"
+          accept="image/jpeg, image/png, image/gif"
+          :state="Boolean(file)"
+          placeholder="Browse for new icon..."
+          drop-placeholder="Drop file here..."
+          browse-text=""
+          @input="upload"
+        />
+      </div>
+    </div>
+    <div class="mt-3">
+      <a href="#" @click.prevent="reset" v-if="preferences.icon" class="text-muted">
+        Use automatically generated icon
+      </a>
+      <b-alert show variant="danger" v-if="status === 'ERROR'">
+        {{ errorMsg }}
+      </b-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+import hashicon from "../../hashicon/hashicon";
+export default {
+  name: 'ClusterIcon',
+  components: {
+    hashicon
+  },
+  props: {
+    cluster: {
+      type: Object,
+      required: true,
+      default: null
+    }
+  },
+  data(){
+    return {
+      status: "",
+      errorMsg: "",
+      file: null,
+    }
+  },
+  computed:{
+    preferences: function() {
+      return this.cluster.preferences;
+    },
+    isProcessing: function() {
+      return this.status === "PROCESSING";
+    },
+    isResetProcessing: function() {
+      return this.resetStatus === "PROCESSING";
+    },
+  },
+  methods: {
+    reset: async function(){
+      this.resetStatus = "PROCESSING";
+      let error = null;
+
+      let result = await this.$store.dispatch("resetClusterIcon", {
+        clusterId: this.cluster.id
+      }).catch(e => {
+        error = e;
+        return false; // just returning false to promise
+      })
+
+      // handle exceptions here; but oh why, why do we have to???
+      if(error){
+        this.resetStatus = "ERROR";
+        this.errorMsg = error;
+        return false;
+      }
+
+      // now let's look at result...
+      if(result.success === false) {
+        this.resetStatus = "ERROR"
+        this.errorMsg = result.message
+      } else {
+        this.resetStatus = "";
+        this.errorMsg = "";
+      }
+    },
+    upload: async function(file){
+      if(!file) {
+        return
+      }
+      this.status="PROCESSING";
+      let error = null;
+
+      let result = await this.$store.dispatch("uploadClusterIcon", {
+        clusterId: this.cluster.id,
+        name: file.name,
+        path: file.path
+      }).catch(e => {
+        error = e;
+        return false; // just returning false to promise
+      })
+      // handle exceptions here; but oh why, why do we have to???
+      if(error){
+        this.status = "ERROR";
+        this.errorMsg = error;
+        return false;
+      }
+
+      // now let's look at result...
+      if(result.success === false) {
+        this.status = "ERROR"
+        this.errorMsg = result.message
+      } else {
+        this.status = "";
+        this.errorMsg = "";
+        this.file = null;
+      }
+
+    },
+  },
+  mounted: function(){
+  }
+}
+</script>
+<style scoped lang="scss">
+.description{
+  padding: 0.75rem;
+}
+.actions{
+  border-top: 1px solid rgba(255,255,255,0.10);
+  padding: 15px;
+}
+
+.cluster-settings-icon {
+  background: #252729;
+  margin-left: 15px;
+  padding: 5px;
+}
+</style>

renderer/_vue/components/ClusterSettings/General/ClusterName.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="settings-section">
+    <b>Cluster Name</b>
+    <p>
+      Define cluster name.
+    </p>
+    <b-form-input v-model="cluster.preferences.clusterName"
+                  :placeholder="cluster.preferences.clusterName"
+                  :state="errors.name"
+                  trim
+                  @blur="onSave"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ClusterName',
+  props: {
+    cluster: {
+      type: Object,
+      required: true,
+      default: null
+    }
+  },
+  data(){
+    return {
+      errors: {
+        name: null
+      }
+    }
+  },
+  methods: {
+    onSave: function() {
+      if(this.cluster.preferences.clusterName === "") {
+        this.errors.name = false
+        return
+      } else {
+        this.errors.name = true
+      }
+      this.$store.dispatch("storeCluster", this.cluster);
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

renderer/_vue/components/ClusterSettings/General/ClusterWorkspace.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="settings-section">
+    <b>Cluster Workspace</b>
+    <p>
+      Define cluster <a href="/#/workspaces">workspace</a>.
+    </p>
+    <b-form-select
+      v-model="cluster.workspace"
+      :options="workspaces"
+      @change="onSave"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ClusterWorkspace',
+  props: {
+    cluster: {
+      type: Object,
+      required: true,
+      default: null
+    }
+  },
+  computed: {
+    workspaces: function() {
+      return this.$store.getters.workspaces.map((ws) => {
+        return {
+          value: ws.id,
+          text: ws.name
+        }
+      });
+    }
+  },
+  methods: {
+    onSave: async function(workspaceId) {
+      this.cluster.workspace = workspaceId
+      await this.$store.dispatch("storeCluster", this.cluster);
+      const ws = this.$store.getters.workspaceById(this.cluster.workspace);
+      if (ws) {
+        this.$store.commit("setCurrentWorkspace", ws);
+        await this.$store.dispatch("clearClusters");
+        await this.$store.dispatch("refreshClusters", ws);
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

renderer/_vue/components/ClusterSettings/General/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div id="cluster-general" class="row">
+    <div class="col-12">
+      <h2>General</h2>
+      <cluster-name :cluster="cluster" />
+      <cluster-workspace :cluster="cluster" />
+      <cluster-icon :cluster="cluster" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ClusterIcon from "./ClusterIcon";
+import ClusterName from "./ClusterName"
+import ClusterWorkspace from "./ClusterWorkspace"
+export default {
+  name: "ClusterSettingsGeneral",
+  props: {
+    cluster: {
+      type: Object,
+      required: true,
+      default: null
+    }
+  },
+  components: {
+    ClusterIcon,
+    ClusterName,
+    ClusterWorkspace
+  }
+}
+</script>
+
+<style>
+
+</style>