Finished model view

src/components/ModelModalInfo.vue

@@ -1,7 +1,19 @@
 <template>
-  <b-modal id="modal-model-info" size="lg" scrollable centered :title="id" @show="updateInfo" @close="onClose" v-model="showModal">
+  <b-modal id="modal-model-info" size="lg" scrollable centered :title="modalTitle" @show="updateInfo" @close="onClose" v-model="showModal">
-    <div id="modal-model-info-content">
+    <div v-if="actionPending" class="text-center">
+      <b-spinner />
+    </div>
+    <div v-else id="modal-model-info-content">
+      <b-table stacked :items="[info]" :fields="infoFields">
 
+        <template #cell(default)="data">
+          <b-icon v-if="data.item.default" icon="check" variant="success"></b-icon>
+          <b-icon v-else icon="x-square" variant="danger"></b-icon>
+
+        </template>
+
+      </b-table>
+      <b-table stacked v-if="info.details" :items="[info.details]"></b-table>
     </div>
 
     <template #modal-footer>
@@ -10,7 +22,8 @@
           variant="success"
           class="float-right"
           size="sm"
-          @click="onClickDownloadModel"
+          :href="modelDownloadUrl"
+          :disabled="!modelDownloadUrl"
       >
         <b-icon icon="download"/>
         Download model
@@ -20,10 +33,11 @@
           variant="success"
           class="float-right"
           size="sm"
-          @click="onClickDownloadExtra"
+          :href="extraDownloadUrl"
+          :disabled="!extraDownloadUrl"
       >
         <b-icon icon="download"/>
-        Download weights
+        Download {{extraType}}
       </b-button>
 
       <b-button
@@ -34,7 +48,7 @@
           @click="onClickSetAsDefault"
       >
         <b-icon icon="pencil"/>
-        Set as default SVM model
+        Set as default {{info.type}} model
       </b-button>
 
       <b-button
@@ -83,12 +97,14 @@ export default {
   data() {
     return {
       actionPending: false,
-      info: {}
+      info: {},
+      infoFields: ['id', 'target_class_name', 'timestamp', 'default']
     }
   },
   methods: {
     updateInfo() {
       return new Promise((resolve, reject) => {
+        this.info = {}
         this.actionPending = true
         this.$api.get(`/model/${this.type}/${this.id}`).then(({data}) => {
           this.info = data
@@ -111,14 +127,32 @@ export default {
     },
     onClose() {
       this.showModal = false;
-    },
-    onClickDownloadModel() {
-
-    },
-    onClickDownloadExtra() {
-
     },
     onClickSetAsDefault() {
+      return new Promise((resolve, reject) => {
+        this.actionPending = true
+        this.$api.put(`/model/${this.type}/$default`, {id: this.id}).then(() => {
+
+          this.updateInfo().then(() => { // this resets actionPending
+            this.$emit("refresh")
+            resolve()
+          }, reject)
+        }).catch((error) => {
+
+          if (!error.response) {
+            // network error happened
+            this.$showToast("Some network error happened.\nCheck logs!")
+          } else {
+            // server returned bruh moment
+            this.$showToast(`The server returned error: ${error.response.status} ${error.response.statusText}\n${error.response.data}`)
+          }
+
+          this.actionPending = false
+          reject()
+        })
+      });
+
+
 
     },
     onClickDelete() {
@@ -134,6 +168,32 @@ export default {
       set(v) {
         this.$emit("change", v)
       }
+    },
+    modelDownloadUrl() {
+      if (("files" in this.info) && ("model" in this.info.files)) {
+        return process.env.VUE_APP_API_LOCATION + this.info.files.model
+      } else {
+        return ""
+      }
+    },
+    extraDownloadUrl() {
+      if (("files" in this.info) && (this.extraType in this.info.files)) {
+        return process.env.VUE_APP_API_LOCATION + this.info.files[this.extraType]
+      } else {
+        return ""
+      }
+    },
+    extraType() {
+      if (this.type === "svm") {
+        return "means"
+      } else if (this.type === "cnn") {
+        return "weights"
+      } else {
+        return ""
+      }
+    },
+    modalTitle() {
+      return `[${this.type.toUpperCase()}] ${this.id}`
     }
   }
 }