Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Signed-off-by: Cody Belcher <cody.t.belcher@gmail.com>

src/renderer/components/ClusterSettings/Features/Components/Metrics.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="settings-section">
+    <b>Metrics</b>
+    <p class="description">
+      Enable timeseries data visualization (Prometheus stack) for your cluster. Install this only if you don't have existing Prometheus stack installed. You can see preview of manifests <a href="https://github.com/kontena/lens/tree/master/app/manifests/metrics">here</a>.
+    </p>
+    <div class="actions">
+      <b-button @click="install" v-if="!settings.installed" :disabled="!cluster.isAdmin || isProcessing || !canInstall" variant="primary">
+        <b-spinner small v-if="isProcessing" label="Small Spinner" />
+        Install
+      </b-button>
+      <b-button @click="uninstall" v-if="settings.installed" :disabled="!cluster.isAdmin || isProcessing" variant="danger">
+        <b-spinner small v-if="isProcessing" label="Small Spinner" />
+        Uninstall
+      </b-button>
+      <b-button @click="upgrade" v-if="isUpgradeAvailable" :disabled="!cluster.isAdmin" variant="primary">
+        Upgrade
+      </b-button>
+      <b-alert show variant="danger" v-if="status === 'ERROR'">
+        {{ errorMsg }}
+      </b-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+const semver = require('semver');
+
+export default {
+  name: 'Metrics',
+  components: {},
+  props: {
+    cluster: {
+      type: Object,
+      required: true,
+      default: null
+    },
+    feature: {
+      type: String,
+      required: true,
+      default: null
+    },
+    settings: {
+      type: Object,
+      required: false,
+      default: Object
+    }
+  },
+  data(){
+    return {
+      status: "",
+      errorMsg: "",
+    }
+  },
+  computed:{
+    isUpgradeAvailable: function() {
+      if(!this.settings.installed) return false;
+      if(!this.settings.currentVersion) return false;
+      if(!this.settings.latestVersion) return false;
+      let currentVersion = (this.settings.currentVersion.charAt(0) === "v") ? this.settings.currentVersion.substr(1) : this.settings.currentVersion;
+      let latestVersion = (this.settings.latestVersion.charAt(0) === "v") ? this.settings.latestVersion.substr(1) : this.settings.latestVersion;
+      return semver.gt(latestVersion, currentVersion)
+    },
+    isProcessing: function() {
+      return this.status === "PROCESSING";
+    },
+    canInstall: function() {
+      return !this.cluster.preferences.prometheus
+    }
+  },
+  methods: {
+    install: async function(){
+      this.status="PROCESSING";
+      let error = null;
+      let result = await this.$store.dispatch("installClusterFeature", {
+        name: this.feature,
+        clusterId: this.cluster.id,
+        config: null,
+      }).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.$store.dispatch("refineCluster", this.cluster.id);
+        this.status = "";
+        this.errorMsg = "";
+      }
+    },
+    uninstall: async function(){
+      this.status="PROCESSING";
+      let error = null;
+      try {
+        let result = await this.$store.dispatch("uninstallClusterFeature", {
+          name: this.feature,
+          clusterId: this.cluster.id,
+        })
+        console.log("uninstall result:", result);
+        this.$store.dispatch("refineCluster", this.cluster.id);
+        this.status="SUCCESS";
+        this.errorMsg = "";
+      } catch(error) {
+        this.status = "ERROR"
+        this.errorMsg = error
+        console.log("Error uninstalling:", error);
+      }
+
+      return true;
+
+    },
+    upgrade: async function(){
+      // todo
+      return true;
+
+    },
+  },
+  mounted: function(){
+    console.log(this.settings);
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>