Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add reload BMC.

4 files changed, 225 insertions, 209 deletions

diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue
index 8c51ace4..324d50d0 100644
--- a/src/views/Operations/Kvm/Kvm.vue
+++ b/src/views/Operations/Kvm/Kvm.vue
@@ -29,8 +29,7 @@
         </div>
       </div>
     </div>
-    <div class="console"></div>
-    <!-- <kvm-console :is-full-window="false" /> -->
+    <kvm-console :is-full-window="false" />
     <images-modal />
   </b-container>
 </template>
@@ -38,14 +37,14 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import ImagesModal from './ImagesModal';
-// import KvmConsole from './KvmConsole';
+import KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
   components: {
     PageTitle,
     ImagesModal,
-    // KvmConsole
+    KvmConsole,
   },
 };
 </script>
@@ -112,10 +111,4 @@ export default {
 .semi-bold-12px {
   color: $text-primary;
 }
-
-.console {
-  background-color: black;
-  width: 100%;
-  height: 70vh;
-}
 </style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 6f6852cf..33533bf9 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -39,8 +39,7 @@
           </div>
         </div>
       </div>
-      <div class="console"></div>
-      <!-- <serial-over-lan-console :is-full-window="false" /> -->
+      <serial-over-lan-console :is-full-window="false" />
     </page-section>
     <images-modal />
   </b-container>
@@ -49,7 +48,7 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-// import SerialOverLanConsole from './SerialOverLanConsole';
+import SerialOverLanConsole from './SerialOverLanConsole';
 import ImagesModal from '../Kvm/ImagesModal';
 
 export default {
@@ -58,7 +57,7 @@ export default {
     PageSection,
     PageTitle,
     ImagesModal,
-    // SerialOverLanConsole,
+    SerialOverLanConsole,
   },
 };
 </script>
@@ -124,10 +123,4 @@ export default {
 .semi-bold-12px {
   color: $text-primary;
 }
-
-.console {
-  background-color: black;
-  width: 100%;
-  height: 70vh;
-}
 </style>
diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue
index 4896286b..ab3c22b9 100644
--- a/src/views/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="form-background p-3">
+    <label class="semi-bold-16px">{{
+      $t('pageServerPowerOperations.serverBootSettings')
+    }}</label>
     <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,30 +20,32 @@
       </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>
@@ -130,3 +133,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/icon-chevron.svg');
+}
+</style>
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 9e030837..f2fb62e2 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -1,147 +1,192 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-0">
     <page-title />
-    <b-row class="mb-4">
-      <b-col md="8" xl="6">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.currentStatus')"
-        >
-          <b-row>
-            <b-col>
-              <dl>
-                <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt>
-                <dd
-                  v-if="serverStatus === 'on'"
-                  data-test-id="powerServerOps-text-hostStatus"
-                >
-                  {{ $t('global.status.on') }}
-                </dd>
-                <dd
-                  v-else-if="serverStatus === 'off'"
-                  data-test-id="powerServerOps-text-hostStatus"
-                >
-                  {{ $t('global.status.off') }}
-                </dd>
-                <dd v-else>
-                  {{ $t('global.status.notAvailable') }}
-                </dd>
-              </dl>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <dl>
-                <dt>
-                  {{ $t('pageServerPowerOperations.lastPowerOperation') }}
-                </dt>
-                <dd
-                  v-if="lastPowerOperationTime"
-                  data-test-id="powerServerOps-text-lastPowerOp"
-                >
-                  {{ lastPowerOperationTime | formatDate }}
-                  {{ lastPowerOperationTime | formatTime }}
-                </dd>
-                <dd v-else>--</dd>
-              </dl>
-            </b-col>
-          </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>
-      <b-col sm="8" md="6" xl="7">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.operations')"
-        >
-          <alert :show="oneTimeBootEnabled" variant="warning">
-            {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
-          </alert>
-          <template v-if="isOperationInProgress">
-            <alert variant="info">
-              {{ $t('pageServerPowerOperations.operationInProgress') }}
+    <div class="main-container">
+      <b-row class="m-2">
+        <b-col md="8" xl="6">
+          <page-section class="m-2 pt-2 pb-2">
+            <b-row>
+              <b-col>
+                <dl>
+                  <dt class="semi-bold-16px">
+                    {{ $t('pageServerPowerOperations.serverStatus') }}
+                  </dt>
+                  <dd
+                    v-if="serverStatus === 'on'"
+                    style="margin-top: 10px"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-hostStatus"
+                  >
+                    <img
+                      style="margin-right: 5px"
+                      src="@/assets/images/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"
+                  >
+                    <img
+                      style="margin-right: 5px"
+                      src="@/assets/images/status/off.svg"
+                    />
+                    {{ $t('global.status.off_full') }}
+                  </dd>
+                  <dd v-else class="regular-12px">
+                    {{ $t('global.status.notAvailable') }}
+                  </dd>
+                </dl>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <dl>
+                  <dt class="semi-bold-12px">
+                    {{ $t('pageServerPowerOperations.lastPowerOperation') }}
+                  </dt>
+                  <dd
+                    v-if="lastPowerOperationTime"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-lastPowerOp"
+                  >
+                    {{ lastPowerOperationTime | formatDate }}
+                    {{ lastPowerOperationTime | formatTime }}
+                  </dd>
+                  <dd v-else>--</dd>
+                </dl>
+              </b-col>
+            </b-row>
+          </page-section>
+        </b-col>
+      </b-row>
+      <b-row class="m-2">
+        <b-col sm="8" md="6" xl="7">
+          <page-section class="m-2">
+            <b-row class="ml-0 mb-3">
+              <span class="semi-bold-16px">{{ 'Управление' }}</span>
+            </b-row>
+            <alert :show="oneTimeBootEnabled" variant="warning">
+              {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
             </alert>
-          </template>
-          <template v-else-if="serverStatus === 'off'">
-            <b-button
-              variant="primary"
-              data-test-id="serverPowerOperations-button-powerOn"
-              @click="powerOn"
-            >
-              {{ $t('pageServerPowerOperations.powerOn') }}
-            </b-button>
-          </template>
-          <template v-else>
-            <!-- Reboot server options -->
-            <b-form novalidate class="mb-5" @submit.prevent="rebootServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.rebootServer')"
+            <template v-if="isOperationInProgress">
+              <alert variant="info">
+                {{ $t('pageServerPowerOperations.operationInProgress') }}
+              </alert>
+            </template>
+            <template v-else-if="serverStatus === 'off'">
+              <popover-with-slot
+                id="popover-powerOn"
+                :button-label="$t('pageServerPowerOperations.powerOn')"
+                :popup-label="$t('pageServerPowerOperations.powerOnServer')"
+                placement="right"
+                :action="powerOn"
               >
-                <b-form-radio
-                  v-model="form.rebootOption"
-                  name="reboot-option"
-                  data-test-id="serverPowerOperations-radio-rebootOrderly"
-                  value="orderly"
+                <b-button
+                  id="popover-powerOn"
+                  ref="button"
+                  size="md"
+                  variant="primary"
                 >
-                  {{ $t('pageServerPowerOperations.orderlyReboot') }}
-                </b-form-radio>
-                <b-form-radio
-                  v-model="form.rebootOption"
-                  name="reboot-option"
-                  data-test-id="serverPowerOperations-radio-rebootImmediate"
-                  value="immediate"
-                >
-                  {{ $t('pageServerPowerOperations.immediateReboot') }}
-                </b-form-radio>
-              </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-reboot"
-              >
-                {{ $t('pageServerPowerOperations.reboot') }}
-              </b-button>
-            </b-form>
-            <!-- Shutdown server options -->
-            <b-form novalidate @submit.prevent="shutdownServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.shutdownServer')"
-              >
-                <b-form-radio
-                  v-model="form.shutdownOption"
-                  name="shutdown-option"
-                  data-test-id="serverPowerOperations-radio-shutdownOrderly"
-                  value="orderly"
+                  {{ $t('pageServerPowerOperations.powerOn') }}
+                </b-button>
+              </popover-with-slot>
+            </template>
+            <template v-else>
+              <!-- Reboot server options -->
+              <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"
+                    data-test-id="serverPowerOperations-radio-rebootOrderly"
+                    value="orderly"
+                  >
+                    {{ $t('pageServerPowerOperations.orderlyReboot') }}
+                  </b-form-radio>
+                  <b-form-radio
+                    v-model="form.rebootOption"
+                    name="reboot-option"
+                    data-test-id="serverPowerOperations-radio-rebootImmediate"
+                    value="immediate"
+                  >
+                    {{ $t('pageServerPowerOperations.immediateReboot') }}
+                  </b-form-radio>
+                </b-form-group>
+                <popover-with-slot
+                  id="popover-reboot"
+                  :button-label="$t('pageServerPowerOperations.reboot')"
+                  :popup-label="$t('pageServerPowerOperations.rebootServer')"
+                  placement="right"
+                  :action="rebootServer"
                 >
-                  {{ $t('pageServerPowerOperations.orderlyShutdown') }}
-                </b-form-radio>
-                <b-form-radio
-                  v-model="form.shutdownOption"
-                  name="shutdown-option"
-                  data-test-id="serverPowerOperations-radio-shutdownImmediate"
-                  value="immediate"
+                  <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>
+                <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"
+                    data-test-id="serverPowerOperations-radio-shutdownOrderly"
+                    value="orderly"
+                  >
+                    {{ $t('pageServerPowerOperations.orderlyShutdown') }}
+                  </b-form-radio>
+                  <b-form-radio
+                    v-model="form.shutdownOption"
+                    name="shutdown-option"
+                    data-test-id="serverPowerOperations-radio-shutdownImmediate"
+                    value="immediate"
+                  >
+                    {{ $t('pageServerPowerOperations.immediateShutdown') }}
+                  </b-form-radio>
+                </b-form-group>
+                <popover-with-slot
+                  id="popover-shutDown"
+                  :button-label="$t('pageServerPowerOperations.shutDown')"
+                  :popup-label="$t('pageServerPowerOperations.shutdownServer')"
+                  placement="right"
+                  :action="shutdownServer"
                 >
-                  {{ $t('pageServerPowerOperations.immediateShutdown') }}
-                </b-form-radio>
-              </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-shutDown"
-              >
-                {{ $t('pageServerPowerOperations.shutDown') }}
-              </b-button>
-            </b-form>
-          </template>
-        </page-section>
-      </b-col>
-    </b-row>
+                  <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>
+      <b-row>
+        <b-col v-if="hasBootSourceOptions" class="m-2" sm="8" md="6" xl="4">
+          <page-section class="m-2">
+            <boot-settings />
+          </page-section>
+        </b-col>
+      </b-row>
+    </div>
   </b-container>
 </template>
 
@@ -152,10 +197,17 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import BootSettings from './BootSettings';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import Alert from '@/components/Global/Alert';
+import PopoverWithSlot from '@/components/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 +259,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');
       }
     },
   },