diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/views/Operations/VirtualMedia/VirtualMedia.vue | 81 |
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 = {}; |