bfg-common 1.5.228 → 1.5.229

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

@@ -49,10 +49,7 @@
       >
         <template #subTitle>
           <div ref="subTitleBlockName" class="subtitle-block">
-            <div
-              id="name-alert-wrapper"
-              :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
-            ></div>
+            <div id="name-alert-wrapper"></div>
             <ui-wizard-subtitle
               :sub-title="
                 localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
@@ -71,7 +68,6 @@
             :data-center="props.dataCenter"
             @submit="emits('change-name', $event)"
             @check-name="emits('check-name', $event)"
-            @has-errors="isNameAlertWrapperEmpty = $event"
           />
         </template>
       </ui-wizard-block>
@@ -83,19 +79,14 @@
         :sub-title-height="heightComputeResource"
       >
         <template #subTitle>
-          <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 ref="subTitleBlockComputeResource" class="subtitle-block">
+            <div id="compute-resource-alert-wrapper"></div>
+            <ui-wizard-subtitle
+              :sub-title="
+                localization.vmWizard
+                  .selectDestinationComputeResourceForThisOperation
+              "
+            />
           </div>
         </template>
         <template #content>
@@ -116,7 +107,6 @@
               emits('show-compute-resource-tree', $event)
             "
             @clear-compute-resource-tree="emits('clear-compute-resource-tree')"
-            @has-errors="isComputeResourceAlertWrapperEmpty = $event"
           />
         </template>
       </ui-wizard-block>
@@ -125,18 +115,13 @@
         :sub-title-height="heightStorage"
       >
         <template #subTitle>
-          <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 ref="subTitleBlockStorage" class="subtitle-block">
+            <div id="storage-alert-wrapper"></div>
+            <ui-wizard-subtitle
+              :sub-title="
+                localization.vmWizard.selectStorageForConfigurationDiskFiles
+              "
+            />
           </div>
         </template>
         <template #content>
@@ -146,7 +131,6 @@
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :storage="props.vmtSettings?.storage"
             @submit="emits('change-storage', $event)"
-            @has-errors="isStorageAlertWrapperEmpty = $event"
           />
         </template>
       </ui-wizard-block>
@@ -162,16 +146,11 @@
         :sub-title-height="heightCompatibility"
       >
         <template #subTitle>
-          <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 ref="subTitleBlockCompatibility" class="subtitle-block">
+            <div id="compatibility-alert-wrapper"></div>
+            <ui-wizard-subtitle
+              :sub-title="localization.vmWizard.compatibilitySubTitle"
+            />
           </div>
         </template>
         <template #content>
@@ -180,7 +159,6 @@
             :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>
@@ -192,19 +170,15 @@
         :sub-title-height="heightOs"
       >
         <template #subTitle>
-          <div ref="subTitleBlockOs">
-            <div class="subtitle-block">
-              <!--            <div id="compatibility-alert-wrapper"></div>-->
-              <ui-wizard-subtitle
-                :sub-title="localization.common.chooseGuestOSInstalledVM"
-              />
-            </div>
+          <div ref="subTitleBlockOs" class="subtitle-block">
+            <div id="compatibility-alert-wrapper"></div>
+            <ui-wizard-subtitle
+              :sub-title="localization.common.chooseGuestOSInstalledVM"
+            />
           </div>
         </template>
         <template #content>
-          <div
-            class="select-block-wrap overflow-auto h-full flex flex-col pb-4"
-          >
+          <div class="select-block-wrap overflow-auto h-full flex flex-col">
             <common-vm-actions-common-select-os
               v-model:machine-type="vmForm.guestMachineType"
               v-model:guest-os-family="vmForm.guestOsFamily"
@@ -227,7 +201,9 @@
         v-if="selectedStep.id === dynamicSteps.customizeHardware"
       >
         <template #content>
-          <div class="select-block-wrap customize-hardware flex flex-col">
+          <div
+            class="select-block-wrap overflow-auto h-full flex flex-col pr-8"
+          >
             <common-vm-actions-common-customize-hardware
               :project="props.project"
               :vm-name="vmForm.name"
@@ -268,9 +244,7 @@
               @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 mr-8"
-            >
+            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-4">
               <span class="vm-hardware-version">{{
                 props.compatibilityInfo
               }}</span>
@@ -346,29 +320,16 @@
           </div>
         </template>
       </ui-wizard-block>
-      <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>
+      <ui-wizard-block v-if="selectedStep.id === dynamicSteps.readyComplete">
         <template #content>
           <div
-            class="select-block-wrap h-full flex flex-col mt-3"
+            class="select-block-wrap overflow-auto h-full flex flex-col pr-8"
           >
             <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>
 
@@ -378,7 +339,7 @@
               v-if="selectedStep.id === dynamicSteps.readyComplete"
               :data="props.readyCompleteTableInfo"
             />
-            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-4 pb-4">
+            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-4">
               <span class="vm-hardware-version">{{
                 props.compatibilityInfo
               }}</span>
@@ -554,15 +515,6 @@ 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>
@@ -579,28 +531,14 @@ const isCompatibilityAlertWrapperEmpty = ref<boolean>(false)
 .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.vmWizard.lastCreateSubtitle,
+      subTitle: localization.common.clickFinishStartCreation,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       testId: 'vm-ready-complete',

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

@@ -1,17 +1,11 @@
 <template>
-  <div
-    :class="[
-      'customize-hardware',
-      themeMode,
-      { 'alert-show': props.errors.length },
-    ]"
-  >
+  <div :class="['customize-hardware', themeMode]">
     <ui-tabs
       v-model="selectedNavItem"
       :tabs="navItemsLocal"
       test-id="vm-wizard-tabs"
       type="underline"
-      class="navigation"
+      class="navigation mx-8"
     />
     <ui-alert
       v-show="props.errors.length"
@@ -19,8 +13,7 @@
       status="alert-danger"
       test-id="customize-hardware-alert"
       class="errors-alert"
-      size="md"
-      @hide="emits('remove-validation-errors')"
+      @remove="emits('remove-validation-errors')"
     />
 
     <div v-show="selectedNavItem === 0">
@@ -214,10 +207,6 @@ 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">
+    <div class="action-wrap py-3 px-8">
       <span class="device-count">{{ deviceCountText }}</span>
 
       <div class="add-device-dropdown-wrap">
@@ -31,7 +31,7 @@
       </div>
     </div>
 
-    <div class="overflow-auto virtual-hardware-content-block">
+    <div class="overflow-auto px-8">
       <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 0 12px;
+  padding: 0 32px 12px;
   overflow: auto;
 }
 </style>

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

@@ -30,7 +30,6 @@ 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()
@@ -91,13 +90,6 @@ 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">
+    <div class="version-select-wrap flex">
       <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: #1b2a371f;
+  --select-compatibility-bg-color: transparent;
   --select-compatibility-border-color: #e9ebed1f;
   --select-compatibility-border-hover-color: #e9ebed3d;
   --select-compatibility-selected-bg-color: #2ba2de14;
@@ -121,39 +121,33 @@ 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);
-      box-shadow: inset 0 0 0 1px var(--select-compatibility-border-color);
+      border: 1px solid var(--select-compatibility-border-color);
       padding: 12px;
       border-radius: 8px;
 
       &:not(.selected):not(.disabled) {
         cursor: pointer;
         &:hover {
-          box-shadow: inset 0 0 0 1px
-            var(--select-compatibility-border-hover-color);
+          border-color: var(--select-compatibility-border-hover-color);
         }
       }
 
       &.selected {
         background-color: var(--select-compatibility-selected-bg-color);
-        box-shadow: inset 0 0 0 1.5px
-          var(--select-compatibility-selected-border-color);
+        border: 1.5px solid var(--select-compatibility-selected-border-color);
       }
 
       .description {
         font-size: 13px;
-        color: #9da6ad !important;
+        color: #9da6ad;
         margin: 8px 0 0 28px;
-        line-height: 18px;
       }
 
       :deep(.radio-label) {
@@ -164,8 +158,7 @@ const versionsLocal = computed(() => {
 
   @container (max-width: 600px) {
     .version-select-wrap {
-      grid-template-columns: 1fr;
-      padding-bottom: 22px;
+      flex-direction: column;
     }
   }
 }

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

@@ -53,7 +53,6 @@ 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()
@@ -95,13 +94,6 @@ 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 pb-4">
+  <div class="select-compute-resource">
     <Teleport to="#compute-resource-alert-wrapper">
       <ui-alert
         v-show="props.errors.length"
@@ -7,8 +7,7 @@
         status="alert-danger"
         test-id="computed-resource-alert"
         class="errors-alert"
-        size="md"
-        @hide="emits('remove-validation-errors')"
+        @remove="emits('remove-validation-errors')"
       />
     </Teleport>
 
@@ -33,7 +32,7 @@
       <p class="compatibility">
         {{ localization.inventorySummary.compatibility }}
       </p>
-      <div class="compatibility-message flex-align-start">
+      <div class="compatibility-message flex-align-center">
         <ui-skeleton-item v-if="!selectedNode" width="160px" height="16px" />
         <template v-else-if="props.compatibilityText[1]">
           <ui-icon
@@ -41,7 +40,6 @@
             name="error"
             width="16"
             height="16"
-            class="icon-compatibility-alert"
           />
 
           <ui-icon
@@ -49,7 +47,6 @@
             name="success-fill"
             width="16"
             height="16"
-            class="icon-compatibility-alert"
           />
           <span class="compatibility-message-description">{{
             props.compatibilityText[1]
@@ -95,43 +92,28 @@ 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: #1b2a371f;
+  --select-compute-resource-location-bg-color: transparent;
   --select-compute-resource-compatibility-title-color: #e9eaec;
-  --select-compute-resource-compatibilityd-empty-escription-color: #9da6ad;
-  --select-compute-resource-compatibility-description-color: #e9eaec;
+  --select-compute-resource-compatibility-description-color: #9da6ad;
 }
 </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: 8px;
+    padding: 12px;
     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;
-        }
-      }
     }
   }
 
@@ -147,12 +129,8 @@ 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: 10px;
+      gap: 12px;
 
-      .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,13 +17,11 @@
         :test-id="item.testId"
         :disabled="item.disabled"
         size="md"
-      >
-        <template #description
-          ><p class="description">
-            {{ item.description }}
-          </p></template
-        >
-      </ui-radio>
+      />
+
+      <p class="description">
+        {{ item.description }}
+      </p>
     </div>
   </div>
 </template>
@@ -57,25 +55,20 @@ 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);
-  box-shadow: inset 0 0 0 1px var(--select-create-type-block-border-color);
+  border: 1px solid 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);
-      box-shadow: inset 0 0 0 1px
-        var(--select-create-type-block-border-hover-color);
+      border-color: 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);
-    box-shadow: inset 0 0 0 1.5px
-      var(--select-create-type-block-selected-border-color);
+    border: 1.5px solid var(--select-create-type-block-selected-border-color);
   }
 
   &:not(:last-child) {
@@ -84,9 +77,8 @@ const props = defineProps<{
 
   .description {
     font-size: 13px;
-    color: #9da6ad !important;
-    //margin: 8px 0 0 28px;
-    line-height: 18px;
+    color: #9da6ad;
+    margin: 8px 0 0 28px;
   }
 }
 </style>

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

@@ -40,7 +40,6 @@ 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()
@@ -146,13 +145,6 @@ 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,
@@ -171,4 +163,5 @@ watch(
 const isShowHelp = ref<boolean>(false)
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+</style>