From 1272456ab2cb77f29b27f3839563b09a709cbc06 Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Wed, 13 Jul 2022 15:46:06 +0300
Subject: move sila-dev to _sila

---
 .../Operations/ConsoleSettings/ConsoleSettings.vue | 154 ++++++++++++++++
 .../_sila/Operations/ConsoleSettings/index.js      |   2 +
 .../_sila/Operations/FactoryReset/FactoryReset.vue |  13 +-
 src/views/_sila/Operations/Firmware/Firmware.vue   |  13 +-
 .../Firmware/FirmwareAlertServerPower.vue          |   2 +-
 .../_sila/Operations/Firmware/FirmwareCardsBmc.vue |   8 +-
 .../Operations/Firmware/FirmwareCardsHost.vue      |   2 +-
 .../Operations/Firmware/FirmwareFormUpdate.vue     |  11 +-
 src/views/_sila/Operations/KeyClear/KeyClear.vue   |  17 +-
 src/views/_sila/Operations/Kvm/Kvm.vue             |   4 +-
 src/views/_sila/Operations/Kvm/KvmConsole.vue      |  26 ++-
 src/views/_sila/Operations/RebootBmc/RebootBmc.vue |  40 ++---
 .../SerialOverLan/SerialOverLanConsole.vue         |   2 +-
 .../ServerPowerOperations/BootSettings.vue         |  41 +++--
 .../ServerPowerOperations.vue                      | 193 +++++++++++----------
 .../VirtualMedia/ModalConfigureConnection.vue      |  25 ++-
 .../_sila/Operations/VirtualMedia/VirtualMedia.vue |  68 +++++---
 17 files changed, 430 insertions(+), 191 deletions(-)
 create mode 100644 src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue
 create mode 100644 src/views/_sila/Operations/ConsoleSettings/index.js

(limited to 'src/views/_sila/Operations')

diff --git a/src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue b/src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue
new file mode 100644
index 00000000..ecc2150f
--- /dev/null
+++ b/src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue
@@ -0,0 +1,154 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <page-section class="bootstrap-table__section">
+      <b-table
+        responsive="md"
+        show-empty
+        class="table-rounded"
+        no-border-collapse
+        :items="systems"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+      >
+        <template #cell(value)="data">
+          <b-row v-if="typeof data.value === 'boolean'">
+            <b-col>
+              <span v-if="systems[data.index].value">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>
+                {{ $t('global.status.disabled') }}
+              </span>
+            </b-col>
+            <b-col>
+              <b-form-checkbox v-model="systems[data.index].value" switch>
+              </b-form-checkbox>
+            </b-col>
+          </b-row>
+          <b-row
+            v-else-if="data.index === 1 || data.index === 6 || data.index === 8"
+          >
+            <b-col>
+              <span>
+                {{ data.value }}
+              </span>
+            </b-col>
+            <b-col>
+              <img :is="iconChevron" class="icon-chevron" />
+            </b-col>
+          </b-row>
+          <b-row v-else-if="data.index === 3">
+            <b-col>
+              <span>
+                {{ data.value }}
+              </span>
+            </b-col>
+            <b-col>
+              <img src="@/assets/images/icon-edit.svg" class="icon-chevron" />
+            </b-col>
+          </b-row>
+          <b-row v-else>
+            <span>{{ data.value }}</span></b-row
+          >
+        </template>
+      </b-table>
+      <div class="save-button">
+        <b-button variant="primary" class="console-settings__save-button">
+          {{ $t('global.action.saveChanges') }}
+        </b-button>
+      </div>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+  },
+  mixins: [BVToastMixin, TableRowExpandMixin],
+  data() {
+    return {
+      text: '',
+      isBusy: true,
+      fields: [
+        {
+          key: 'attributes',
+          label: 'Атрибуты',
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thStyle: { width: '30%' },
+        },
+      ],
+      iconChevron,
+      expandRowLabel: expandRowLabel,
+      systems: [
+        { attributes: 'Состояние', value: true },
+        { attributes: 'Максимальное количество сеансов', value: '6' },
+        { attributes: 'Активные сеансы', value: '0' },
+        { attributes: 'Порт удаленного доступа', value: '5900' },
+        { attributes: 'Статус шифрования видео', value: true },
+        { attributes: 'Видео с локального сервера', value: true },
+        {
+          attributes:
+            'Действие по умолчанию при истечении времени ожидания запроса на общий доступ к сеансу',
+          value: 'Полный доступ',
+        },
+        {
+          attributes: 'Автоматическая блокировка системы',
+          value: false,
+        },
+        {
+          attributes: 'Состояние подключения клавиатуры/мыши',
+          value: 'Автоматическое',
+        },
+      ],
+      // iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.row {
+  margin: 0px;
+  height: 15px;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.col {
+  padding: 0;
+}
+
+.icon-chevron {
+  margin: 0 0 0 85%;
+  cursor: pointer;
+}
+
+.save-button {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.console-settings__save-button {
+  width: 241px;
+  height: 36px;
+  margin-right: 0.5rem;
+}
+</style>
diff --git a/src/views/_sila/Operations/ConsoleSettings/index.js b/src/views/_sila/Operations/ConsoleSettings/index.js
new file mode 100644
index 00000000..860ee595
--- /dev/null
+++ b/src/views/_sila/Operations/ConsoleSettings/index.js
@@ -0,0 +1,2 @@
+import ConsoleSettings from './ConsoleSettings.vue';
+export default ConsoleSettings;
diff --git a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
index 4e315619..d1ab187e 100644
--- a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
@@ -1,12 +1,19 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid class="m-0 p-0">
     <page-title :description="$t('pageFactoryReset.description')" />
 
     <!-- Reset Form -->
-    <b-form id="factory-reset" @submit.prevent="onResetSubmit">
+    <b-form
+      id="factory-reset"
+      class="bootstrap-table__section"
+      @submit.prevent="onResetSubmit"
+    >
       <b-row>
         <b-col md="8">
-          <b-form-group :label="$t('pageFactoryReset.form.resetOptionsLabel')">
+          <b-form-group
+            :label="$t('pageFactoryReset.form.resetOptionsLabel')"
+            label-class="semi-bold-16px"
+          >
             <b-form-radio-group
               id="factory-reset-options"
               v-model="resetOption"
diff --git a/src/views/_sila/Operations/Firmware/Firmware.vue b/src/views/_sila/Operations/Firmware/Firmware.vue
index 0497376d..c4006b7f 100644
--- a/src/views/_sila/Operations/Firmware/Firmware.vue
+++ b/src/views/_sila/Operations/Firmware/Firmware.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid class="m-0 p-0">
     <page-title />
     <alerts-server-power
       v-if="isServerPowerOffRequired"
@@ -7,7 +7,7 @@
     />
 
     <!-- Firmware cards -->
-    <b-row>
+    <b-row class="bootstrap-table__section">
       <b-col xl="10">
         <!-- BMC Firmware -->
         <bmc-cards :is-page-disabled="isPageDisabled" />
@@ -19,6 +19,7 @@
 
     <!-- Update firmware-->
     <page-section
+      class="bootstrap-table__section"
       :section-title="$t('pageFirmware.sectionTitleUpdateFirmware')"
     >
       <b-row>
@@ -39,12 +40,10 @@ import AlertsServerPower from './FirmwareAlertServerPower';
 import BmcCards from './FirmwareCardsBmc';
 import FormUpdate from './FirmwareFormUpdate';
 import HostCards from './FirmwareCardsHost';
-import PageSection from '@/components/_sila/Global/PageSection';
-import PageTitle from '@/components/_sila/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
 
-import LoadingBarMixin, {
-  loading,
-} from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
 
 export default {
   name: 'FirmwareSingleImage',
diff --git a/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue b/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue
index 471ccfac..24aa1d69 100644
--- a/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue
+++ b/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import Alert from '@/components/_sila/Global/Alert';
+import Alert from '@/components/Global/Alert';
 
 export default {
   components: { Alert },
diff --git a/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue
index 23c263d9..d79a8769 100644
--- a/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue
+++ b/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue
@@ -53,11 +53,9 @@
 
 <script>
 import IconSwitch from '@carbon/icons-vue/es/arrows--horizontal/20';
-import PageSection from '@/components/_sila/Global/PageSection';
-import LoadingBarMixin, {
-  loading,
-} from '@/components/_sila/Mixins/LoadingBarMixin';
-import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 import ModalSwitchToRunning from './FirmwareModalSwitchToRunning';
 
diff --git a/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue b/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue
index 03a25ee5..b4a8e90d 100644
--- a/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import PageSection from '@/components/_sila/Global/PageSection';
+import PageSection from '@/components/Global/PageSection';
 
 export default {
   components: { PageSection },
diff --git a/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
index 23fe90f2..a5e5ba97 100644
--- a/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
@@ -59,6 +59,7 @@
         <b-btn
           data-test-id="firmware-button-startUpdate"
           type="submit"
+          size="md"
           variant="primary"
           :disabled="isPageDisabled"
         >
@@ -75,13 +76,11 @@
 <script>
 import { requiredIf } from 'vuelidate/lib/validators';
 
-import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
-import LoadingBarMixin, {
-  loading,
-} from '@/components/_sila/Mixins/LoadingBarMixin';
-import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 
-import FormFile from '@/components/_sila/Global/FormFile';
+import FormFile from '@/components/Global/FormFile';
 import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
 
 export default {
diff --git a/src/views/_sila/Operations/KeyClear/KeyClear.vue b/src/views/_sila/Operations/KeyClear/KeyClear.vue
index 8955f6cd..fd6468fa 100644
--- a/src/views/_sila/Operations/KeyClear/KeyClear.vue
+++ b/src/views/_sila/Operations/KeyClear/KeyClear.vue
@@ -1,9 +1,9 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid class="m-0 p-0">
     <page-title :description="$t('pageKeyClear.description')" />
-    <b-row>
+    <b-row class="bootstrap-table__section">
       <b-col md="8" xl="6">
-        <alert variant="info" class="mb-4">
+        <alert variant="info" class="mb-0">
           <div class="font-weight-bold">
             {{ $t('pageKeyClear.alert.title') }}
           </div>
@@ -14,10 +14,17 @@
       </b-col>
     </b-row>
     <!-- Reset Form -->
-    <b-form id="key-clear" @submit.prevent="onKeyClearSubmit(keyOption)">
+    <b-form
+      id="key-clear"
+      class="bootstrap-table__section"
+      @submit.prevent="onKeyClearSubmit(keyOption)"
+    >
       <b-row>
         <b-col md="8">
-          <b-form-group :label="$t('pageKeyClear.form.keyClearOptionsLabel')">
+          <b-form-group
+            :label="$t('pageKeyClear.form.keyClearOptionsLabel')"
+            label-class="semi-bold-16px"
+          >
             <b-form-radio-group
               id="key-clear-options"
               v-model="keyOption"
diff --git a/src/views/_sila/Operations/Kvm/Kvm.vue b/src/views/_sila/Operations/Kvm/Kvm.vue
index ede24608..a3103453 100644
--- a/src/views/_sila/Operations/Kvm/Kvm.vue
+++ b/src/views/_sila/Operations/Kvm/Kvm.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid>
     <page-title />
     <div class="terminal-container">
       <kvm-console :is-full-window="false" />
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import PageTitle from '@/components/_sila/Global/PageTitle';
+import PageTitle from '@/components/Global/PageTitle';
 import KvmConsole from './KvmConsole';
 
 export default {
diff --git a/src/views/_sila/Operations/Kvm/KvmConsole.vue b/src/views/_sila/Operations/Kvm/KvmConsole.vue
index 50cbff7f..d06e2824 100644
--- a/src/views/_sila/Operations/Kvm/KvmConsole.vue
+++ b/src/views/_sila/Operations/Kvm/KvmConsole.vue
@@ -1,8 +1,12 @@
 <template>
   <div :class="marginClass">
     <div ref="toolbar" class="kvm-toolbar">
-      <b-row class="d-flex">
-        <b-col class="d-flex flex-column justify-content-end" cols="4">
+      <b-row class="d-flex flex-column flex-sm-row">
+        <b-col
+          class="d-flex flex-column justify-content-end console-title"
+          style="min-width: 105px"
+          cols="3"
+        >
           <dl class="mb-2" sm="2" md="2">
             <dt class="d-inline font-weight-bold mr-1">
               {{ $t('pageKvm.status') }}:
@@ -14,9 +18,10 @@
           </dl>
         </b-col>
 
-        <b-col class="d-flex justify-content-end pr-1">
+        <b-col class="d-flex justify-content-end pr-1 flex-column flex-sm-row">
           <b-button
             v-if="isConnected"
+            class="console-title console-button"
             variant="link"
             type="button"
             @click="sendCtrlAltDel"
@@ -26,6 +31,7 @@
           </b-button>
           <b-button
             v-if="!isFullWindow"
+            class="console-title console-button"
             variant="link"
             type="button"
             @click="openConsoleWindow()"
@@ -42,7 +48,7 @@
 
 <script>
 import RFB from '@novnc/novnc/core/rfb';
-import StatusIcon from '@/components/_sila/Global/StatusIcon';
+import StatusIcon from '@/components/Global/StatusIcon';
 import IconLaunch from '@carbon/icons-vue/es/launch/20';
 import IconArrowDown from '@carbon/icons-vue/es/arrow--down/16';
 import { throttle } from 'lodash';
@@ -167,4 +173,16 @@ export default {
 .margin-left-full-window {
   margin-left: 5px;
 }
+
+@media (max-width: 1200px) {
+  .console-title {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .console-button {
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/src/views/_sila/Operations/RebootBmc/RebootBmc.vue b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
index fa16f55e..71b9b123 100644
--- a/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
@@ -1,7 +1,7 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid class="m-0 p-0">
     <page-title />
-    <b-row>
+    <b-row class="bootstrap-table__section">
       <b-col md="8" lg="8" xl="6">
         <page-section>
           <b-row>
@@ -19,14 +19,22 @@
             </b-col>
           </b-row>
           {{ $t('pageRebootBmc.rebootInformation') }}
-          <b-button
-            variant="primary"
-            class="d-block mt-5"
-            data-test-id="rebootBmc-button-reboot"
-            @click="onClick"
+          <popover-with-slot
+            id="popover-reboot"
+            :button-label="$t('global.action.reload')"
+            :popup-label="$t('BMC.ReloadBmc_popup')"
+            placement="left"
+            :action="rebootBmc"
           >
-            {{ $t('pageRebootBmc.rebootBmc') }}
-          </b-button>
+            <b-button
+              id="popover-reboot"
+              variant="primary"
+              class="d-block mt-5"
+              data-test-id="rebootBmc-button-reboot"
+            >
+              {{ $t('pageRebootBmc.rebootBmc') }}
+            </b-button>
+          </popover-with-slot>
         </page-section>
       </b-col>
     </b-row>
@@ -38,10 +46,11 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 import PageSection from '@/components/_sila/Global/PageSection';
 import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import PopoverWithSlot from '@/components/_sila/Global/SilaComponents/PopoverWithSlot';
 
 export default {
   name: 'RebootBmc',
-  components: { PageTitle, PageSection },
+  components: { PageTitle, PageSection, PopoverWithSlot },
   mixins: [BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
@@ -59,17 +68,6 @@ export default {
       .finally(() => this.endLoader());
   },
   methods: {
-    onClick() {
-      this.$bvModal
-        .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), {
-          title: this.$t('pageRebootBmc.modal.confirmTitle'),
-          okTitle: this.$t('global.action.confirm'),
-          cancelTitle: this.$t('global.action.cancel'),
-        })
-        .then((confirmed) => {
-          if (confirmed) this.rebootBmc();
-        });
-    },
     rebootBmc() {
       this.$store
         .dispatch('controls/rebootBmc')
diff --git a/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue
index bf974b51..2a9a2f4a 100644
--- a/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -9,7 +9,7 @@
           class="mt-4"
         >
           <p class="col-form-label">
-            {{ $t('pageSerialOverLan.alert.disconnectedAlertMessage') }}
+            {{ $t('pageSerialOverLan.disconnectedAlertMessage') }}
           </p>
         </alert>
       </b-col>
diff --git a/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
index 8d74e381..7f56c36a 100644
--- a/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
@@ -1,16 +1,14 @@
 <template>
-  <div class="form-background p-3">
+  <page-section class="m-0">
     <b-form novalidate @submit.prevent="handleSubmit">
-      <b-form-group
-        :label="
+      <b-form-group label-for="boot-option" class="mb-3 regular-12px">
+        <label class="semi-bold-12px">{{
           $t('pageServerPowerOperations.bootSettings.bootSettingsOverride')
-        "
-        label-for="boot-option"
-        class="mb-3"
-      >
+        }}</label>
         <b-form-select
           id="boot-option"
           v-model="form.bootOption"
+          class="boot-select regular-14px"
           :disabled="bootSourceOptions.length === 0"
           :options="bootSourceOptions"
           @change="onChangeSelect"
@@ -19,43 +17,47 @@
       </b-form-group>
       <b-form-checkbox
         v-model="form.oneTimeBoot"
-        class="mb-4"
+        class="mb-4 regular-12px cb"
         :disabled="form.bootOption === 'None'"
         @change="$v.form.oneTimeBoot.$touch()"
       >
         {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }}
       </b-form-checkbox>
-      <b-form-group
-        :label="$t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')"
-      >
-        <b-form-text id="tpm-required-policy-help-block">
+      <b-form-group>
+        <label class="semi-bold-12px">{{
+          $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')
+        }}</label>
+        <label id="tpm-required-policy-help-block" class="regular-12px">
           {{
             $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicyHelper')
           }}
-        </b-form-text>
+        </label>
         <b-form-checkbox
           id="tpm-required-policy"
           v-model="form.tpmPolicyOn"
+          class="regular-12px cb"
           aria-describedby="tpm-required-policy-help-block"
           @change="$v.form.tpmPolicyOn.$touch()"
         >
           {{ $t('global.status.enabled') }}
         </b-form-checkbox>
       </b-form-group>
-      <b-button variant="primary" type="submit" class="mb-3">
+      <b-button variant="primary" size="md" type="submit" class="mb-3">
         {{ $t('global.action.save') }}
       </b-button>
     </b-form>
-  </div>
+  </page-section>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import PageSection from '@/components/_sila/Global/PageSection';
 
 export default {
   name: 'BootSettings',
+  components: { PageSection },
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
@@ -130,3 +132,12 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.boot-select {
+  height: 40px;
+  max-width: 270px;
+  border: none;
+  border-radius: 8px;
+  background-image: url('../../../../assets/images/_sila/icon-chevron.svg');
+}
+</style>
diff --git a/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
index e848215f..1ba90b83 100644
--- a/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -1,28 +1,40 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-0">
     <page-title />
-    <b-row class="mb-4">
+    <page-section
+      :section-title="$t('pageServerPowerOperations.serverStatus')"
+      class="m-4"
+    >
       <b-col md="8" xl="6">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.currentStatus')"
-        >
+        <page-section class="pt-2 mb-0">
           <b-row>
             <b-col>
               <dl>
-                <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt>
                 <dd
                   v-if="serverStatus === 'on'"
+                  style="margin-top: 10px"
+                  class="regular-12px"
                   data-test-id="powerServerOps-text-hostStatus"
                 >
-                  {{ $t('global.status.on') }}
+                  <img
+                    style="margin-right: 5px"
+                    src="@/assets/images/_sila/status/on.svg"
+                  />
+                  {{ $t('global.status.on_full') }}
                 </dd>
                 <dd
                   v-else-if="serverStatus === 'off'"
+                  style="margin-top: 10px"
+                  class="regular-12px"
                   data-test-id="powerServerOps-text-hostStatus"
                 >
-                  {{ $t('global.status.off') }}
+                  <img
+                    style="margin-right: 5px"
+                    src="@/assets/images/_sila/status/off.svg"
+                  />
+                  {{ $t('global.status.off_full') }}
                 </dd>
-                <dd v-else>
+                <dd v-else class="regular-12px">
                   {{ $t('global.status.notAvailable') }}
                 </dd>
               </dl>
@@ -31,11 +43,12 @@
           <b-row>
             <b-col>
               <dl>
-                <dt>
+                <dt class="semi-bold-12px">
                   {{ $t('pageServerPowerOperations.lastPowerOperation') }}
                 </dt>
                 <dd
                   v-if="lastPowerOperationTime"
+                  class="regular-12px"
                   data-test-id="powerServerOps-text-lastPowerOp"
                 >
                   {{ lastPowerOperationTime | formatDate }}
@@ -47,19 +60,13 @@
           </b-row>
         </page-section>
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.serverBootSettings')"
-        >
-          <boot-settings />
-        </page-section>
-      </b-col>
+    </page-section>
+    <page-section
+      :section-title="$t('SystemDescription.title.Control')"
+      class="ml-4 mb-0"
+    >
       <b-col sm="8" md="6" xl="7">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.operations')"
-        >
+        <page-section>
           <alert :show="oneTimeBootEnabled" variant="warning">
             {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
           </alert>
@@ -69,20 +76,30 @@
             </alert>
           </template>
           <template v-else-if="serverStatus === 'off'">
-            <b-button
-              variant="primary"
-              data-test-id="serverPowerOperations-button-powerOn"
-              @click="powerOn"
+            <popover-with-slot
+              id="popover-powerOn"
+              :button-label="$t('pageServerPowerOperations.powerOn')"
+              :popup-label="$t('pageServerPowerOperations.powerOnServer')"
+              placement="right"
+              :action="powerOn"
             >
-              {{ $t('pageServerPowerOperations.powerOn') }}
-            </b-button>
+              <b-button
+                id="popover-powerOn"
+                ref="button"
+                size="md"
+                variant="primary"
+              >
+                {{ $t('pageServerPowerOperations.powerOn') }}
+              </b-button>
+            </popover-with-slot>
           </template>
           <template v-else>
             <!-- Reboot server options -->
-            <b-form novalidate class="mb-5" @submit.prevent="rebootServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.rebootServer')"
-              >
+            <b-form novalidate class="mb-2">
+              <b-form-group class="regular-12px cb">
+                <label class="semi-bold-12px">{{
+                  $t('pageServerPowerOperations.rebootServer')
+                }}</label>
                 <b-form-radio
                   v-model="form.rebootOption"
                   name="reboot-option"
@@ -100,19 +117,29 @@
                   {{ $t('pageServerPowerOperations.immediateReboot') }}
                 </b-form-radio>
               </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-reboot"
+              <popover-with-slot
+                id="popover-reboot"
+                :button-label="$t('pageServerPowerOperations.reboot')"
+                :popup-label="$t('pageServerPowerOperations.rebootServer')"
+                placement="right"
+                :action="rebootServer"
               >
-                {{ $t('pageServerPowerOperations.reboot') }}
-              </b-button>
+                <b-button
+                  id="popover-reboot"
+                  ref="button"
+                  size="md"
+                  variant="primary"
+                >
+                  {{ $t('pageServerPowerOperations.reboot') }}
+                </b-button>
+              </popover-with-slot>
             </b-form>
             <!-- Shutdown server options -->
-            <b-form novalidate @submit.prevent="shutdownServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.shutdownServer')"
-              >
+            <b-form>
+              <b-form-group class="regular-12px cb">
+                <label class="semi-bold-12px">{{
+                  $t('pageServerPowerOperations.shutdownServer')
+                }}</label>
                 <b-form-radio
                   v-model="form.shutdownOption"
                   name="shutdown-option"
@@ -130,18 +157,35 @@
                   {{ $t('pageServerPowerOperations.immediateShutdown') }}
                 </b-form-radio>
               </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-shutDown"
+              <popover-with-slot
+                id="popover-shutDown"
+                :button-label="$t('pageServerPowerOperations.shutDown')"
+                :popup-label="$t('pageServerPowerOperations.shutdownServer')"
+                placement="right"
+                :action="shutdownServer"
               >
-                {{ $t('pageServerPowerOperations.shutDown') }}
-              </b-button>
+                <b-button
+                  id="popover-shutDown"
+                  ref="button"
+                  size="md"
+                  variant="secondary"
+                >
+                  {{ $t('pageServerPowerOperations.shutDown') }}
+                </b-button>
+              </popover-with-slot>
             </b-form>
           </template>
         </page-section>
       </b-col>
-    </b-row>
+    </page-section>
+    <page-section
+      :section-title="$t('pageServerPowerOperations.serverBootSettings')"
+      class="m-4"
+    >
+      <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
+        <boot-settings />
+      </b-col>
+    </page-section>
   </b-container>
 </template>
 
@@ -152,10 +196,17 @@ import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
 import BootSettings from './BootSettings';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import Alert from '@/components/_sila/Global/Alert';
+import PopoverWithSlot from '@/components/_sila/Global/SilaComponents/PopoverWithSlot';
 
 export default {
   name: 'ServerPowerOperations',
-  components: { PageTitle, PageSection, BootSettings, Alert },
+  components: {
+    PageTitle,
+    PageSection,
+    BootSettings,
+    Alert,
+    PopoverWithSlot,
+  },
   mixins: [BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
@@ -207,52 +258,18 @@ export default {
       this.$store.dispatch('controls/serverPowerOn');
     },
     rebootServer() {
-      const modalMessage = this.$t(
-        'pageServerPowerOperations.modal.confirmRebootMessage'
-      );
-      const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
-      };
-
       if (this.form.rebootOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftReboot');
-          });
+        this.$store.dispatch('controls/serverSoftReboot');
       } else if (this.form.rebootOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardReboot');
-          });
+        this.$store.dispatch('controls/serverHardReboot');
       }
     },
     shutdownServer() {
-      const modalMessage = this.$t(
-        'pageServerPowerOperations.modal.confirmShutdownMessage'
-      );
-      const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
-      };
-
       if (this.form.shutdownOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftPowerOff');
-          });
+        this.$store.dispatch('controls/serverSoftPowerOff');
       }
       if (this.form.shutdownOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardPowerOff');
-          });
+        this.$store.dispatch('controls/serverHardPowerOff');
       }
     },
   },
diff --git a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
index 9886eff5..9ba90d57 100644
--- a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -9,14 +9,17 @@
     <template #modal-title>
       {{ $t('pageVirtualMedia.modal.title') }}
     </template>
-    <b-form>
+    <b-form style="width: 100%">
       <b-form-group
-        :label="$t('pageVirtualMedia.modal.serverUri')"
+        :label="
+          $t('pageVirtualMedia.modal.serverUri') + ' (http, ftp, smb, nfs)'
+        "
         label-for="serverUri"
       >
         <b-form-input
           id="serverUri"
           v-model="form.serverUri"
+          placeholder="https://"
           type="text"
           :state="getValidationState($v.form.serverUri)"
           data-test-id="configureConnection-input-serverUri"
@@ -43,12 +46,14 @@
         :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"
-        />
+        <input-password-toggle>
+          <b-form-input
+            id="password"
+            v-model="form.password"
+            type="password"
+            data-test-id="configureConnection-input-password"
+          />
+        </input-password-toggle>
       </b-form-group>
       <b-form-group>
         <b-form-checkbox
@@ -72,8 +77,12 @@
 <script>
 import { required } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
+import InputPasswordToggle from '@/components/_sila/Global/InputPasswordToggle';
 
 export default {
+  components: {
+    InputPasswordToggle,
+  },
   mixins: [VuelidateMixin],
   props: {
     connection: {
diff --git a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
index 0f75bbd7..e508e06f 100644
--- a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
@@ -1,14 +1,18 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid class="m-0 p-0">
     <page-title />
-    <b-row class="mb-4">
+    <b-row class="bootstrap-table__section">
       <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">
+              <b-form-group
+                :label="dev.id"
+                label-class="regular-14px"
+                :style="{ 'margin-bottom': dev.isActive ? '0' : '1rem' }"
+              >
                 <form-file
                   v-if="!dev.isActive"
                   :id="concatId(dev.id)"
@@ -21,8 +25,18 @@
                   </template>
                 </form-file>
               </b-form-group>
+
+              <div
+                v-if="dev.isActive && dev.file && dev.file.name"
+                class="clear-selected-file px-3"
+                :style="{ 'margin-bottom': '1rem' }"
+              >
+                {{ dev.file.name }}
+              </div>
+
               <b-button
                 v-if="!dev.isActive"
+                size="md"
                 variant="primary"
                 :disabled="!dev.file"
                 @click="startVM(dev)"
@@ -42,7 +56,7 @@
         </page-section>
       </b-col>
     </b-row>
-    <b-row v-if="loadImageFromExternalServer" class="mb-4">
+    <b-row v-if="loadImageFromExternalServer" class="bootstrap-table__section">
       <b-col md="12">
         <page-section
           :section-title="$t('pageVirtualMedia.virtualMediaSubTitleSecond')"
@@ -56,34 +70,35 @@
               <b-form-group
                 :label="device.id"
                 :label-for="device.id"
-                label-class="bold"
+                label-class="regular-14px"
               >
                 <b-button
                   variant="primary"
+                  size="lg"
                   :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-button
+                v-if="!device.isActive"
+                variant="primary"
+                size="md"
+                :disabled="!device.serverUri"
+                @click="startLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.start') }}
+              </b-button>
+              <b-button
+                v-if="device.isActive"
+                size="md"
+                variant="primary"
+                @click="stopLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.stop') }}
+              </b-button>
             </b-col>
           </b-row>
         </page-section>
@@ -107,7 +122,12 @@ import FormFile from '@/components/_sila/Global/FormFile';
 
 export default {
   name: 'VirtualMedia',
-  components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
+  components: {
+    PageTitle,
+    PageSection,
+    ModalConfigureConnection,
+    FormFile,
+  },
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
-- 
cgit v1.2.3