bfg-common 1.5.229 → 1.5.231

package/components/common/vm/actions/add/New.vue

@@ -49,7 +49,10 @@
       >
         <template #subTitle>
           <div ref="subTitleBlockName" class="subtitle-block">
-            <div id="name-alert-wrapper"></div>
+            <div
+              id="name-alert-wrapper"
+              :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
+            ></div>
             <ui-wizard-subtitle
               :sub-title="
                 localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
@@ -68,6 +71,7 @@
             :data-center="props.dataCenter"
             @submit="emits('change-name', $event)"
             @check-name="emits('check-name', $event)"
+            @has-errors="isNameAlertWrapperEmpty = $event"
           />
         </template>
       </ui-wizard-block>
@@ -79,14 +83,19 @@
         :sub-title-height="heightComputeResource"
       >
         <template #subTitle>
-          <div ref="subTitleBlockComputeResource" class="subtitle-block">
-            <div id="compute-resource-alert-wrapper"></div>
-            <ui-wizard-subtitle
-              :sub-title="
-                localization.vmWizard
-                  .selectDestinationComputeResourceForThisOperation
-              "
-            />
+          <div ref="subTitleBlockComputeResource">
+            <div class="subtitle-block">
+              <div
+                id="compute-resource-alert-wrapper"
+                :class="[{ 'mb-4': !isComputeResourceAlertWrapperEmpty }]"
+              ></div>
+              <ui-wizard-subtitle
+                :sub-title="
+                  localization.vmWizard
+                    .selectDestinationComputeResourceForThisOperation
+                "
+              />
+            </div>
           </div>
         </template>
         <template #content>
@@ -107,6 +116,7 @@
               emits('show-compute-resource-tree', $event)
             "
             @clear-compute-resource-tree="emits('clear-compute-resource-tree')"
+            @has-errors="isComputeResourceAlertWrapperEmpty = $event"
           />
         </template>
       </ui-wizard-block>
@@ -115,13 +125,18 @@
         :sub-title-height="heightStorage"
       >
         <template #subTitle>
-          <div ref="subTitleBlockStorage" class="subtitle-block">
-            <div id="storage-alert-wrapper"></div>
-            <ui-wizard-subtitle
-              :sub-title="
-                localization.vmWizard.selectStorageForConfigurationDiskFiles
-              "
-            />
+          <div ref="subTitleBlockStorage">
+            <div class="subtitle-block">
+              <div
+                id="storage-alert-wrapper"
+                :class="[{ 'mb-4': !isStorageAlertWrapperEmpty }]"
+              ></div>
+              <ui-wizard-subtitle
+                :sub-title="
+                  localization.vmWizard.selectStorageForConfigurationDiskFiles
+                "
+              />
+            </div>
           </div>
         </template>
         <template #content>
@@ -131,6 +146,7 @@
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :storage="props.vmtSettings?.storage"
             @submit="emits('change-storage', $event)"
+            @has-errors="isStorageAlertWrapperEmpty = $event"
           />
         </template>
       </ui-wizard-block>
@@ -146,11 +162,16 @@
         :sub-title-height="heightCompatibility"
       >
         <template #subTitle>
-          <div ref="subTitleBlockCompatibility" class="subtitle-block">
-            <div id="compatibility-alert-wrapper"></div>
-            <ui-wizard-subtitle
-              :sub-title="localization.vmWizard.compatibilitySubTitle"
-            />
+          <div ref="subTitleBlockCompatibility">
+            <div class="subtitle-block">
+              <div
+                id="compatibility-alert-wrapper"
+                :class="[{ 'mb-4': !isCompatibilityAlertWrapperEmpty }]"
+              ></div>
+              <ui-wizard-subtitle
+                :sub-title="localization.vmWizard.compatibilitySubTitle"
+              />
+            </div>
           </div>
         </template>
         <template #content>
@@ -159,6 +180,7 @@
             :error-validation-fields="props.errorValidationFields"
             @change="emits('change-compatibility', $event)"
             @remove-error-by-title="emits('remove-error-by-title', $event)"
+            @has-errors="isCompatibilityAlertWrapperEmpty = $event"
           />
         </template>
       </ui-wizard-block>
@@ -170,15 +192,19 @@
         :sub-title-height="heightOs"
       >
         <template #subTitle>
-          <div ref="subTitleBlockOs" class="subtitle-block">
-            <div id="compatibility-alert-wrapper"></div>
-            <ui-wizard-subtitle
-              :sub-title="localization.common.chooseGuestOSInstalledVM"
-            />
+          <div ref="subTitleBlockOs">
+            <div class="subtitle-block">
+              <!--            <div id="compatibility-alert-wrapper"></div>-->
+              <ui-wizard-subtitle
+                :sub-title="localization.common.chooseGuestOSInstalledVM"
+              />
+            </div>
           </div>
         </template>
         <template #content>
-          <div class="select-block-wrap overflow-auto h-full flex flex-col">
+          <div
+            class="select-block-wrap overflow-auto h-full flex flex-col pb-4"
+          >
             <common-vm-actions-common-select-os
               v-model:machine-type="vmForm.guestMachineType"
               v-model:guest-os-family="vmForm.guestOsFamily"
@@ -201,9 +227,7 @@
         v-if="selectedStep.id === dynamicSteps.customizeHardware"
       >
         <template #content>
-          <div
-            class="select-block-wrap overflow-auto h-full flex flex-col pr-8"
-          >
+          <div class="select-block-wrap customize-hardware flex flex-col">
             <common-vm-actions-common-customize-hardware
               :project="props.project"
               :vm-name="vmForm.name"
@@ -244,7 +268,9 @@
               @get-networks-table="emits('get-networks-table', $event)"
               @get-pci-devices="emits('get-pci-devices')"
             />
-            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-4">
+            <div
+              class="vm-hardware-version-wrap justify-end flex flex-1 mt-4 mr-8"
+            >
               <span class="vm-hardware-version">{{
                 props.compatibilityInfo
               }}</span>
@@ -320,16 +346,29 @@
           </div>
         </template>
       </ui-wizard-block>
-      <ui-wizard-block v-if="selectedStep.id === dynamicSteps.readyComplete">
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.readyComplete"
+        :sub-title-height="heightReadyComplete"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlockReadyComplete">
+            <div class="subtitle-block">
+              <ui-wizard-subtitle
+                :sub-title="localization.vmWizard.lastCreateSubtitle"
+              />
+            </div>
+          </div>
+        </template>
         <template #content>
           <div
-            class="select-block-wrap overflow-auto h-full flex flex-col pr-8"
+            class="select-block-wrap h-full flex flex-col mt-3"
           >
             <div v-if="props.isShowPowerOn" class="power-on-by-default-wrap">
               <ui-checkbox
                 v-model="isPowerOnByDefault"
                 test-id="power-on-by-default"
                 :label-text="localization.common.powerOnByDefault"
+                size="md"
               />
             </div>
 
@@ -339,7 +378,7 @@
               v-if="selectedStep.id === dynamicSteps.readyComplete"
               :data="props.readyCompleteTableInfo"
             />
-            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-4">
+            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-4 pb-4">
               <span class="vm-hardware-version">{{
                 props.compatibilityInfo
               }}</span>
@@ -515,6 +554,15 @@ const { height: heightCompatibility } = useElementSize(
 )
 const subTitleBlockOs = ref<HTMLElement | null>(null)
 const { height: heightOs } = useElementSize(subTitleBlockOs)
+const subTitleBlockReadyComplete = ref<HTMLElement | null>(null)
+const { height: heightReadyComplete } = useElementSize(
+  subTitleBlockReadyComplete
+)
+
+const isNameAlertWrapperEmpty = ref<boolean>(false)
+const isComputeResourceAlertWrapperEmpty = ref<boolean>(false)
+const isStorageAlertWrapperEmpty = ref<boolean>(false)
+const isCompatibilityAlertWrapperEmpty = ref<boolean>(false)
 </script>
 
 <style>
@@ -531,14 +579,28 @@ const { height: heightOs } = useElementSize(subTitleBlockOs)
 .subtitle-block {
   display: flex;
   flex-direction: column;
-  row-gap: 16px;
   border-bottom: 1px solid var(--wizard-line);
   padding-bottom: 12px;
-  //margin-bottom: 16px;
 }
 .select-block-wrap {
+  &.customize-hardware {
+    height: inherit;
+    max-height: 100%;
+    padding-bottom: 40px;
+
+    :deep(.tabs-wrapper),
+    :deep(.errors-alert),
+    :deep(.action-wrap) {
+      margin-right: 32px;
+    }
+    :deep(.virtual-hardware-content-block),
+    :deep(.vm-options) {
+      padding-right: 18px;
+    }
+  }
   .vm-hardware-version-wrap {
     align-items: flex-end;
+    text-align: right;
 
     .vm-hardware-version {
       font-size: 13px;

package/components/common/vm/actions/add/lib/config/steps.ts

@@ -189,7 +189,7 @@ export const stepsFunc = (
       id: dynamicSteps.readyComplete,
       stepName: '',
       title: localization.common.readyComplete,
-      subTitle: localization.common.clickFinishStartCreation,
+      subTitle: localization.vmWizard.lastCreateSubtitle,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       testId: 'vm-ready-complete',

package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareNew.vue

@@ -1,11 +1,17 @@
 <template>
-  <div :class="['customize-hardware', themeMode]">
+  <div
+    :class="[
+      'customize-hardware',
+      themeMode,
+      { 'alert-show': props.errors.length },
+    ]"
+  >
     <ui-tabs
       v-model="selectedNavItem"
       :tabs="navItemsLocal"
       test-id="vm-wizard-tabs"
       type="underline"
-      class="navigation mx-8"
+      class="navigation"
     />
     <ui-alert
       v-show="props.errors.length"
@@ -13,7 +19,8 @@
       status="alert-danger"
       test-id="customize-hardware-alert"
       class="errors-alert"
-      @remove="emits('remove-validation-errors')"
+      size="md"
+      @hide="emits('remove-validation-errors')"
     />
 
     <div v-show="selectedNavItem === 0">
@@ -207,6 +214,10 @@ const themeMode = useLocalStorage('themeMode')
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
 
+  &.alert-show {
+    grid-template-rows: auto auto minmax(0, 1fr);
+  }
+
   .errors-alert {
     margin-top: 12px;
   }

package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardwareNew.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="virtual-hardware">
-    <div class="action-wrap py-3 px-8">
+    <div class="action-wrap py-3">
       <span class="device-count">{{ deviceCountText }}</span>
 
       <div class="add-device-dropdown-wrap">
@@ -31,7 +31,7 @@
       </div>
     </div>
 
-    <div class="overflow-auto px-8">
+    <div class="overflow-auto virtual-hardware-content-block">
       <div class="stack-view">
         <common-vm-actions-common-customize-hardware-virtual-hardware-cpu
           :max-cpus="props.maxCpus"

package/components/common/vm/actions/common/customizeHardware/vmoptions/VmoptionsNew.vue

@@ -100,7 +100,7 @@ const emits = defineEmits<{
   flex-direction: column;
   gap: 12px;
   margin-top: 20px;
-  padding: 0 32px 12px;
+  padding: 0 0 12px;
   overflow: auto;
 }
 </style>

package/components/common/vm/actions/common/select/compatibility/Compatibility.vue

@@ -30,6 +30,7 @@ const props = defineProps<{
 const emits = defineEmits<{
   (event: 'change', value: UI_I_OptionItem): void
   (event: 'remove-error-by-title', value: string): void
+  (event: 'has-errors', value: boolean): void
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -90,6 +91,13 @@ const apiError = computed<string>(() => {
     )?.error_message || ''
   )
 })
+watch(
+  apiError,
+  (newValue) => {
+    emits('has-errors', !newValue.length)
+  },
+  { immediate: true, deep: true }
+)
 
 const onRemoveValidationError = (): void => {
   emits('remove-error-by-title', 'compatibility')

package/components/common/vm/actions/common/select/compatibility/New.vue

@@ -13,7 +13,7 @@
     <h3 class="select-compatibility-description pb-4">
       {{ props.description }}
     </h3>
-    <div class="version-select-wrap flex">
+    <div class="version-select-wrap">
       <div
         v-for="item in versionsLocal"
         :key="item.value"
@@ -106,7 +106,7 @@ const versionsLocal = computed(() => {
   --select-compatibility-description-color: #4d5d69;
 }
 :root.dark-theme {
-  --select-compatibility-bg-color: transparent;
+  --select-compatibility-bg-color: #1b2a371f;
   --select-compatibility-border-color: #e9ebed1f;
   --select-compatibility-border-hover-color: #e9ebed3d;
   --select-compatibility-selected-bg-color: #2ba2de14;
@@ -121,33 +121,39 @@ const versionsLocal = computed(() => {
   .select-compatibility-description {
     font-size: 13px;
     color: var(--select-compatibility-description-color);
+    line-height: 18px;
   }
 
   .version-select-wrap {
+    display: grid;
+    grid-template-columns: repeat(3, 32.3%);
     gap: 12px;
 
     .version-select {
       background-color: var(--select-compatibility-bg-color);
-      border: 1px solid var(--select-compatibility-border-color);
+      box-shadow: inset 0 0 0 1px var(--select-compatibility-border-color);
       padding: 12px;
       border-radius: 8px;
 
       &:not(.selected):not(.disabled) {
         cursor: pointer;
         &:hover {
-          border-color: var(--select-compatibility-border-hover-color);
+          box-shadow: inset 0 0 0 1px
+            var(--select-compatibility-border-hover-color);
         }
       }
 
       &.selected {
         background-color: var(--select-compatibility-selected-bg-color);
-        border: 1.5px solid var(--select-compatibility-selected-border-color);
+        box-shadow: inset 0 0 0 1.5px
+          var(--select-compatibility-selected-border-color);
       }
 
       .description {
         font-size: 13px;
-        color: #9da6ad;
+        color: #9da6ad !important;
         margin: 8px 0 0 28px;
+        line-height: 18px;
       }
 
       :deep(.radio-label) {
@@ -158,7 +164,8 @@ const versionsLocal = computed(() => {
 
   @container (max-width: 600px) {
     .version-select-wrap {
-      flex-direction: column;
+      grid-template-columns: 1fr;
+      padding-bottom: 22px;
     }
   }
 }

package/components/common/vm/actions/common/select/computeResource/ComputeResource.vue

@@ -53,6 +53,7 @@ const emits = defineEmits<{
   (event: 'show-compute-resource-tree', value: UI_I_TreeNode): void
   (event: 'select-compute-resource-tree', value: UI_I_TreeNode): void
   (event: 'clear-compute-resource-tree'): void
+  (event: 'has-errors', value: boolean): void
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -94,6 +95,13 @@ const showValidationErrors = (text: string): void => {
 const onRemoveValidationErrors = (): void => {
   errors.value = []
 }
+watch(
+  errors,
+  (newValue) => {
+    emits('has-errors', !newValue.length)
+  },
+  { immediate: true, deep: true }
+)
 
 const selectedNode = defineModel<UI_I_TreeNode | null>('modelValue')
 

package/components/common/vm/actions/common/select/computeResource/New.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="select-compute-resource">
+  <div class="select-compute-resource pb-4">
     <Teleport to="#compute-resource-alert-wrapper">
       <ui-alert
         v-show="props.errors.length"
@@ -7,7 +7,8 @@
         status="alert-danger"
         test-id="computed-resource-alert"
         class="errors-alert"
-        @remove="emits('remove-validation-errors')"
+        size="md"
+        @hide="emits('remove-validation-errors')"
       />
     </Teleport>
 
@@ -32,7 +33,7 @@
       <p class="compatibility">
         {{ localization.inventorySummary.compatibility }}
       </p>
-      <div class="compatibility-message flex-align-center">
+      <div class="compatibility-message flex-align-start">
         <ui-skeleton-item v-if="!selectedNode" width="160px" height="16px" />
         <template v-else-if="props.compatibilityText[1]">
           <ui-icon
@@ -40,6 +41,7 @@
             name="error"
             width="16"
             height="16"
+            class="icon-compatibility-alert"
           />
 
           <ui-icon
@@ -47,6 +49,7 @@
             name="success-fill"
             width="16"
             height="16"
+            class="icon-compatibility-alert"
           />
           <span class="compatibility-message-description">{{
             props.compatibilityText[1]
@@ -92,28 +95,43 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   --select-compute-resource-border-color: #e9ebed;
   --select-compute-resource-location-bg-color: #ffffff;
   --select-compute-resource-compatibility-title-color: #4d5d69;
+  --select-compute-resource-compatibilityd-empty-escription-color: #4d5d69;
   --select-compute-resource-compatibility-description-color: #4d5d69;
 }
 :root.dark-theme {
   --select-compute-resource-border-color: #e9ebed1f;
-  --select-compute-resource-location-bg-color: transparent;
+  --select-compute-resource-location-bg-color: #1b2a371f;
   --select-compute-resource-compatibility-title-color: #e9eaec;
-  --select-compute-resource-compatibility-description-color: #9da6ad;
+  --select-compute-resource-compatibilityd-empty-escription-color: #9da6ad;
+  --select-compute-resource-compatibility-description-color: #e9eaec;
 }
 </style>
 <style scoped lang="scss">
 .select-compute-resource {
   .tree-view-wrap {
     height: 170px;
+    max-height: 240px;
     border-radius: 8px;
     border: 1px solid var(--select-compute-resource-border-color);
-    padding: 12px;
+    padding: 8px;
     background-color: var(--select-compute-resource-location-bg-color);
     margin: 16px 0 24px;
     overflow: auto;
 
     :deep(.tree-content) {
       padding: 0 !important;
+
+      .node-wrapper {
+        border-radius: 4px;
+
+        .node-name {
+          font-size: 12px;
+          margin-left: 8px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
     }
   }
 
@@ -129,8 +147,12 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       border: 1px solid var(--select-compute-resource-border-color);
       padding: 12px;
       background-color: var(--select-compute-resource-location-bg-color);
-      gap: 12px;
+      gap: 10px;
 
+      .icon-compatibility-alert {
+        min-width: 16px;
+        min-height: 16px;
+      }
       .compatibility-message-description {
         font-size: 13px;
         color: var(--select-compute-resource-compatibility-description-color);

package/components/common/vm/actions/common/select/createType/New.vue

@@ -17,11 +17,13 @@
         :test-id="item.testId"
         :disabled="item.disabled"
         size="md"
-      />
-
-      <p class="description">
-        {{ item.description }}
-      </p>
+      >
+        <template #description
+          ><p class="description">
+            {{ item.description }}
+          </p></template
+        >
+      </ui-radio>
     </div>
   </div>
 </template>
@@ -55,20 +57,25 @@ const props = defineProps<{
 <style scoped lang="scss">
 .select-create-type-block {
   background-color: var(--select-create-type-block-bg-color);
-  border: 1px solid var(--select-create-type-block-border-color);
+  //border: 1px solid var(--select-create-type-block-border-color);
+  box-shadow: inset 0 0 0 1px var(--select-create-type-block-border-color);
   padding: 12px;
   border-radius: 8px;
 
   &:not(.selected):not(.disabled) {
     cursor: pointer;
     &:hover {
-      border-color: var(--select-create-type-block-border-hover-color);
+      //border-color: var(--select-create-type-block-border-hover-color);
+      box-shadow: inset 0 0 0 1px
+        var(--select-create-type-block-border-hover-color);
     }
   }
 
   &.selected {
     background-color: var(--select-create-type-block-selected-bg-color);
-    border: 1.5px solid var(--select-create-type-block-selected-border-color);
+    //border: 1.5px solid var(--select-create-type-block-selected-border-color);
+    box-shadow: inset 0 0 0 1.5px
+      var(--select-create-type-block-selected-border-color);
   }
 
   &:not(:last-child) {
@@ -77,8 +84,9 @@ const props = defineProps<{
 
   .description {
     font-size: 13px;
-    color: #9da6ad;
-    margin: 8px 0 0 28px;
+    color: #9da6ad !important;
+    //margin: 8px 0 0 28px;
+    line-height: 18px;
   }
 }
 </style>

package/components/common/vm/actions/common/select/name/Name.vue

@@ -40,6 +40,7 @@ const emits = defineEmits<{
     event: 'check-name',
     value: [[string, UI_I_TreeNode | null], (error: any) => void]
   ): void
+  (event: 'has-errors', value: boolean): void
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -145,6 +146,13 @@ const showValidationErrors = (data: string[]): void => {
 const onRemoveValidationErrors = (): void => {
   errors.value = []
 }
+watch(
+  errors,
+  (newValue) => {
+    emits('has-errors', !newValue.length)
+  },
+  { immediate: true, deep: true }
+)
 
 watch(
   () => props.show,
@@ -163,5 +171,4 @@ watch(
 const isShowHelp = ref<boolean>(false)
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>