add file name to localStorage

1 files changed, 70 insertions, 11 deletions

diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue
index ef4f27b8..189f93c1 100644
--- a/src/views/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue
@@ -11,10 +11,10 @@
               <b-form-group
                 :label="dev.id"
                 label-class="regular-14px"
-                :style="{ 'margin-bottom': dev.isActive ? '0' : '1rem' }"
+                :style="{ 'margin-bottom': isDeviceActive(dev) ? '0' : '1rem' }"
               >
                 <form-file
-                  v-if="!dev.isActive"
+                  v-if="!isDeviceActive(dev)"
                   :id="concatId(dev.id)"
                   v-model="dev.file"
                 >
@@ -27,7 +27,11 @@
               </b-form-group>
 
               <div
-                v-if="dev.isActive && dev.file && dev.file.name"
+                v-if="
+                  dev.file &&
+                  dev.file.name &&
+                  (dev.isActive || dev.file.recovered)
+                "
                 class="clear-selected-file px-3"
                 :style="{ 'margin-bottom': '1rem' }"
               >
@@ -35,7 +39,7 @@
               </div>
 
               <b-button
-                v-if="!dev.isActive"
+                v-if="!isDeviceActive(dev)"
                 size="md"
                 variant="primary"
                 :disabled="!dev.file"
@@ -44,7 +48,7 @@
                 {{ $t('pageVirtualMedia.start') }}
               </b-button>
               <b-button
-                v-if="dev.isActive"
+                v-if="isDeviceActive(dev)"
                 variant="primary"
                 :disabled="!dev.file"
                 @click="stopVM(dev)"
@@ -131,6 +135,7 @@ export default {
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
+      proxyDevices: [],
       modalConfigureConnection: null,
       loadImageFromExternalServer:
         process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true'
@@ -139,9 +144,6 @@ export default {
     };
   },
   computed: {
-    proxyDevices() {
-      return this.$store.getters['virtualMedia/proxyDevices'];
-    },
     legacyDevices() {
       return this.$store.getters['virtualMedia/legacyDevices'];
     },
@@ -149,11 +151,66 @@ export default {
   created() {
     if (this.proxyDevices.length > 0 || this.legacyDevices.length > 0) return;
     this.startLoader();
-    this.$store
-      .dispatch('virtualMedia/getData')
-      .finally(() => this.endLoader());
+    this.$store.dispatch('virtualMedia/getData').finally(() => {
+      this.proxyDevices = this.$store.getters['virtualMedia/proxyDevices'];
+      this.recoverFromStorage();
+      this.endLoader();
+    });
   },
   methods: {
+    isDeviceActive(device) {
+      return device.isActive || (device.file && device.file.recovered);
+    },
+    recoverFromStorage() {
+      const storedVirtualMedia =
+        JSON.parse(localStorage.getItem('storedVirtualMedia')) || [];
+
+      storedVirtualMedia.forEach((storedDevice) => {
+        this.proxyDevices = this.proxyDevices.map((device) => {
+          if (device.id === storedDevice.id) {
+            return {
+              ...device,
+              file: { name: storedDevice.name, recovered: true },
+            };
+          }
+
+          return device;
+        });
+      });
+    },
+
+    addToStorage(device) {
+      const storedVirtualMedia =
+        JSON.parse(localStorage.getItem('storedVirtualMedia')) || [];
+
+      storedVirtualMedia.push({ id: device.id, name: device.file.name });
+
+      localStorage.setItem(
+        'storedVirtualMedia',
+        JSON.stringify(storedVirtualMedia)
+      );
+    },
+
+    removeFromStorage(id) {
+      const storedVirtualMedia = JSON.parse(
+        localStorage.getItem('storedVirtualMedia')
+      );
+
+      const indexOfDevice = storedVirtualMedia.findIndex((device) => {
+        return device.id === id;
+      });
+
+      storedVirtualMedia.splice(indexOfDevice, 1);
+
+      if (storedVirtualMedia.length > 0) {
+        localStorage.setItem(
+          'storedVirtualMedia',
+          JSON.stringify(storedVirtualMedia)
+        );
+      } else {
+        localStorage.removeItem('storedVirtualMedia');
+      }
+    },
     startVM(device) {
       const token = this.$store.getters['authentication/token'];
       device.nbd = new NbdServer(
@@ -180,10 +237,12 @@ export default {
       };
 
       device.nbd.start();
+      this.addToStorage(device);
       device.isActive = true;
     },
     stopVM(device) {
       device.nbd.stop();
+      this.removeFromStorage(device.id);
     },
     startLegacy(connectionData) {
       var data = {};