summaryrefslogtreecommitdiff
path: root/src/views/Control/VirtualMedia
diff options
context:
space:
mode:
authorSandeepa Singh <sandeepa.singh@ibm.com>2021-07-14 13:32:22 +0300
committerDerick Montague <derick.montague@ibm.com>2021-08-10 22:20:42 +0300
commit68cbbe9014cbdcf7229a878f564d38f6d6199f25 (patch)
treecd7138959f405cb44b5d62000da9d364ed238b91 /src/views/Control/VirtualMedia
parent7affc529b7fba41193c4d48764707e9961cdd22d (diff)
downloadwebui-vue-68cbbe9014cbdcf7229a878f564d38f6d6199f25.tar.xz
IA update: Update control section to operations
This is the third update to the information architecture changes and has the following changes: - The control section has been updated to operations - The server led page has been removed - The firmware page is moved to operations section Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com> Change-Id: I2e23da447890d7bee51892e1f782d5f2db6dded4
Diffstat (limited to 'src/views/Control/VirtualMedia')
-rw-r--r--src/views/Control/VirtualMedia/ModalConfigureConnection.vue145
-rw-r--r--src/views/Control/VirtualMedia/VirtualMedia.vue221
-rw-r--r--src/views/Control/VirtualMedia/index.js2
3 files changed, 0 insertions, 368 deletions
diff --git a/src/views/Control/VirtualMedia/ModalConfigureConnection.vue b/src/views/Control/VirtualMedia/ModalConfigureConnection.vue
deleted file mode 100644
index b0bcfb2b..00000000
--- a/src/views/Control/VirtualMedia/ModalConfigureConnection.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
- <b-modal
- id="configure-connection"
- ref="modal"
- @ok="onOk"
- @hidden="resetForm"
- @show="initModal"
- >
- <template #modal-title>
- {{ $t('pageVirtualMedia.modal.title') }}
- </template>
- <b-form>
- <b-form-group
- :label="$t('pageVirtualMedia.modal.serverUri')"
- label-for="serverUri"
- >
- <b-form-input
- id="serverUri"
- v-model="form.serverUri"
- type="text"
- :state="getValidationState($v.form.serverUri)"
- data-test-id="configureConnection-input-serverUri"
- @input="$v.form.serverUri.$touch()"
- />
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.serverUri.required">
- {{ $t('global.form.fieldRequired') }}
- </template>
- </b-form-invalid-feedback>
- </b-form-group>
- <b-form-group
- :label="$t('pageVirtualMedia.modal.username')"
- label-for="username"
- >
- <b-form-input
- id="username"
- v-model="form.username"
- type="text"
- data-test-id="configureConnection-input-username"
- />
- </b-form-group>
- <b-form-group
- :label="$t('pageVirtualMedia.modal.password')"
- label-for="password"
- >
- <b-form-input
- id="password"
- v-model="form.password"
- type="password"
- data-test-id="configureConnection-input-password"
- />
- </b-form-group>
- <b-form-group>
- <b-form-checkbox
- v-model="form.isRW"
- data-test-id="configureConnection-input-isRW"
- name="check-button"
- >
- RW
- </b-form-checkbox>
- </b-form-group>
- </b-form>
- <template #modal-ok>
- {{ $t('global.action.save') }}
- </template>
- <template #modal-cancel>
- {{ $t('global.action.cancel') }}
- </template>
- </b-modal>
-</template>
-
-<script>
-import { required } from 'vuelidate/lib/validators';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-
-export default {
- mixins: [VuelidateMixin],
- props: {
- connection: {
- type: Object,
- default: null,
- validator: (prop) => {
- console.log(prop);
- return true;
- },
- },
- },
- data() {
- return {
- form: {
- serverUri: null,
- username: null,
- password: null,
- isRW: false,
- },
- };
- },
- watch: {
- connection: function (value) {
- if (value === null) return;
- Object.assign(this.form, value);
- },
- },
- validations() {
- return {
- form: {
- serverUri: {
- required,
- },
- },
- };
- },
- methods: {
- handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
- let connectionData = {};
- Object.assign(connectionData, this.form);
- this.$emit('ok', connectionData);
- this.closeModal();
- },
- initModal() {
- if (this.connection) {
- Object.assign(this.form, this.connection);
- }
- },
- closeModal() {
- this.$nextTick(() => {
- this.$refs.modal.hide();
- });
- },
- resetForm() {
- this.form.serverUri = null;
- this.form.username = null;
- this.form.password = null;
- this.form.isRW = false;
- this.$v.$reset();
- },
- onOk(bvModalEvt) {
- bvModalEvt.preventDefault();
- this.handleSubmit();
- },
- },
-};
-</script>
diff --git a/src/views/Control/VirtualMedia/VirtualMedia.vue b/src/views/Control/VirtualMedia/VirtualMedia.vue
deleted file mode 100644
index 8a3d5add..00000000
--- a/src/views/Control/VirtualMedia/VirtualMedia.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
- <b-container fluid="xl">
- <page-title />
- <b-row class="mb-4">
- <b-col md="12">
- <page-section
- :section-title="$t('pageVirtualMedia.virtualMediaSubTitleFirst')"
- >
- <b-row>
- <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6">
- <b-form-group :label="dev.id" label-class="bold">
- <form-file
- v-if="!dev.isActive"
- :id="concatId(dev.id)"
- v-model="dev.file"
- >
- <template #invalid>
- <b-form-invalid-feedback role="alert">
- {{ $t('global.form.required') }}
- </b-form-invalid-feedback>
- </template>
- </form-file>
- </b-form-group>
- <b-button
- v-if="!dev.isActive"
- variant="primary"
- :disabled="!dev.file"
- @click="startVM(dev)"
- >
- {{ $t('pageVirtualMedia.start') }}
- </b-button>
- <b-button
- v-if="dev.isActive"
- variant="primary"
- :disabled="!dev.file"
- @click="stopVM(dev)"
- >
- {{ $t('pageVirtualMedia.stop') }}
- </b-button>
- </b-col>
- </b-row>
- </page-section>
- </b-col>
- </b-row>
- <b-row v-if="loadImageFromExternalServer" class="mb-4">
- <b-col md="12">
- <page-section
- :section-title="$t('pageVirtualMedia.virtualMediaSubTitleSecond')"
- >
- <b-row>
- <b-col
- v-for="(device, $index) in legacyDevices"
- :key="$index"
- md="6"
- >
- <b-form-group
- :label="device.id"
- :label-for="device.id"
- label-class="bold"
- >
- <b-button
- variant="primary"
- :disabled="device.isActive"
- @click="configureConnection(device)"
- >
- {{ $t('pageVirtualMedia.configureConnection') }}
- </b-button>
-
- <b-button
- v-if="!device.isActive"
- variant="primary"
- class="float-right"
- :disabled="!device.serverUri"
- @click="startLegacy(device)"
- >
- {{ $t('pageVirtualMedia.start') }}
- </b-button>
- <b-button
- v-if="device.isActive"
- variant="primary"
- class="float-right"
- @click="stopLegacy(device)"
- >
- {{ $t('pageVirtualMedia.stop') }}
- </b-button>
- </b-form-group>
- </b-col>
- </b-row>
- </page-section>
- </b-col>
- </b-row>
- <modal-configure-connection
- :connection="modalConfigureConnection"
- @ok="saveConnection"
- />
- </b-container>
-</template>
-
-<script>
-import PageTitle from '@/components/Global/PageTitle';
-import PageSection from '@/components/Global/PageSection';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import ModalConfigureConnection from './ModalConfigureConnection';
-import NbdServer from '@/utilities/NBDServer';
-import FormFile from '@/components/Global/FormFile';
-
-export default {
- name: 'VirtualMedia',
- components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
- mixins: [BVToastMixin, LoadingBarMixin],
- data() {
- return {
- modalConfigureConnection: null,
- loadImageFromExternalServer:
- process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true'
- ? true
- : false,
- };
- },
- computed: {
- proxyDevices() {
- return this.$store.getters['virtualMedia/proxyDevices'];
- },
- legacyDevices() {
- return this.$store.getters['virtualMedia/legacyDevices'];
- },
- },
- created() {
- if (this.proxyDevices.length > 0 || this.legacyDevices.length > 0) return;
- this.startLoader();
- this.$store
- .dispatch('virtualMedia/getData')
- .finally(() => this.endLoader());
- },
- methods: {
- startVM(device) {
- const token = this.$store.getters['authentication/token'];
- device.nbd = new NbdServer(
- `wss://${window.location.host}${device.websocket}`,
- device.file,
- device.id,
- token
- );
- device.nbd.socketStarted = () =>
- this.successToast(this.$t('pageVirtualMedia.toast.serverRunning'));
- device.nbd.errorReadingFile = () =>
- this.errorToast(this.$t('pageVirtualMedia.toast.errorReadingFile'));
- device.nbd.socketClosed = (code) => {
- if (code === 1000)
- this.successToast(
- this.$t('pageVirtualMedia.toast.serverClosedSuccessfully')
- );
- else
- this.errorToast(
- this.$t('pageVirtualMedia.toast.serverClosedWithErrors')
- );
- device.file = null;
- device.isActive = false;
- };
-
- device.nbd.start();
- device.isActive = true;
- },
- stopVM(device) {
- device.nbd.stop();
- },
- startLegacy(connectionData) {
- var data = {};
- data.Image = connectionData.serverUri;
- data.UserName = connectionData.username;
- data.Password = connectionData.password;
- data.WriteProtected = !connectionData.isRW;
- this.startLoader();
- this.$store
- .dispatch('virtualMedia/mountImage', {
- id: connectionData.id,
- data: data,
- })
- .then(() => {
- this.successToast(
- this.$t('pageVirtualMedia.toast.serverConnectionEstablished')
- );
- connectionData.isActive = true;
- })
- .catch(() => {
- this.errorToast(this.$t('pageVirtualMedia.toast.errorMounting'));
- this.isActive = false;
- })
- .finally(() => this.endLoader());
- },
- stopLegacy(connectionData) {
- this.$store
- .dispatch('virtualMedia/unmountImage', connectionData.id)
- .then(() => {
- this.successToast(
- this.$t('pageVirtualMedia.toast.serverClosedSuccessfully')
- );
- connectionData.isActive = false;
- })
- .catch(() =>
- this.errorToast(this.$t('pageVirtualMedia.toast.errorUnmounting'))
- )
- .finally(() => this.endLoader());
- },
- saveConnection(connectionData) {
- this.modalConfigureConnection.serverUri = connectionData.serverUri;
- this.modalConfigureConnection.username = connectionData.username;
- this.modalConfigureConnection.password = connectionData.password;
- this.modalConfigureConnection.isRW = connectionData.isRW;
- },
- configureConnection(connectionData) {
- this.modalConfigureConnection = connectionData;
- this.$bvModal.show('configure-connection');
- },
- concatId(val) {
- return val.split(' ').join('_').toLowerCase();
- },
- },
-};
-</script>
diff --git a/src/views/Control/VirtualMedia/index.js b/src/views/Control/VirtualMedia/index.js
deleted file mode 100644
index 4573e865..00000000
--- a/src/views/Control/VirtualMedia/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import VirtualMedia from './VirtualMedia.vue';
-export default VirtualMedia;