bfg-common 1.5.229 → 1.5.231

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="select-name">
+  <div :class="['select-name', { 'pb-6': props.project === 'sphere' }]">
     <Teleport to="#name-alert-wrapper">
       <ui-alert
         v-show="props.errors.length"
@@ -7,7 +7,8 @@
         status="alert-danger"
         test-id="name-alert"
         class="errors-alert"
-        @remove="emits('remove-validation-errors')"
+        size="md"
+        @hide="emits('remove-validation-errors')"
       />
     </Teleport>
 
@@ -31,9 +32,8 @@
           :show="isShowHelp"
           :items="[]"
           elem-id="virtual-machine-name-icon"
-          test-id=""
+          test-id="virtual-machine-name"
           width="320px"
-          top
           left
           @hide="isShowHelp = false"
         >
@@ -64,7 +64,7 @@
       <div class="flex-2">
         <ui-input
           v-model="vmName"
-          :placeholder="localization.common.name"
+          :placeholder="`${localization.common.name} (${localization.common.optional})`"
           type="text"
           maxlength="54"
           test-id="virtual-machine-name"
@@ -133,7 +133,7 @@ const onSelectNode = (node: UI_I_TreeNode) => {
   --select-name-help-icon-hover-color: #4d5d69;
   --select-name-help-icon-active-color: #008fd6;
   --select-name-help-hide-icon-color: #213444;
-  --select-name-border-color: #e9ebed;
+  --select-name-border-color: #e9ebeda3;
   --select-name-location-node-color: #182531;
   --select-name-location-bg-color: #ffffff;
 }
@@ -144,7 +144,7 @@ const onSelectNode = (node: UI_I_TreeNode) => {
   --select-name-help-hide-icon-color: #e9eaec;
   --select-name-border-color: #e9ebed1f;
   --select-name-location-node-color: #e9eaec;
-  --select-name-location-bg-color: transparent;
+  --select-name-location-bg-color: #1b2a371f;
 }
 </style>
 <style scoped lang="scss">
@@ -157,11 +157,16 @@ const onSelectNode = (node: UI_I_TreeNode) => {
   .name-field {
     display: flex;
     align-items: center;
+    column-gap: 16px;
 
     .name-label {
       font-size: 13px;
       color: var(--select-name-text-color);
       margin-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 204px;
     }
     #virtual-machine-name-icon {
       color: #9da6ad; // equal in dark and white modes
@@ -182,10 +187,15 @@ const onSelectNode = (node: UI_I_TreeNode) => {
     margin-top: 16px;
     padding: 16px 0;
     border-top: 1px solid var(--select-name-border-color);
+    column-gap: 16px;
 
     .location-label {
       font-size: 13px;
       color: var(--select-name-text-color);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 204px;
     }
 
     .selected-location {
@@ -193,6 +203,10 @@ const onSelectNode = (node: UI_I_TreeNode) => {
       align-items: center;
       gap: 8px;
 
+      .node-icon {
+        width: 20px;
+        height: 20px;
+      }
       .text {
         font-size: 13px;
         color: var(--select-name-location-node-color);
@@ -207,11 +221,25 @@ const onSelectNode = (node: UI_I_TreeNode) => {
     flex: 1;
     border-radius: 8px;
     border: 1px solid var(--select-name-border-color);
-    padding: 12px;
+    padding: 8px;
     background-color: var(--select-name-location-bg-color);
+    max-height: 240px;
+    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;
+        }
+      }
     }
   }
 }

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

@@ -5,9 +5,9 @@
     </p>
 
     <div class="select-wrap mb-4 pb-4">
-      <label for="machine-type-select" class="select-label"
-        >{{ localization.common.machineType }}:</label
-      >
+      <label for="machine-type-select" class="select-label">{{
+        localization.common.machineType
+      }}</label>
 
       <ui-select
         v-model="machineType"
@@ -18,9 +18,9 @@
       />
     </div>
     <div class="select-wrap mb-4 pb-4">
-      <label for="os-select" class="select-label"
-        >{{ localization.common.guestOsFamily }}:</label
-      >
+      <label for="os-select" class="select-label">{{
+        localization.common.guestOsFamily
+      }}</label>
 
       <ui-select
         v-model="guestOsFamily"
@@ -31,15 +31,16 @@
       />
     </div>
     <div class="select-wrap mb-4">
-      <label for="os-version-select" class="select-label"
-        >{{ localization.common.guestOsVersion }}:</label
-      >
+      <label for="os-version-select" class="select-label">{{
+        localization.common.guestOsVersion
+      }}</label>
 
       <ui-select
         v-model="guestOsVersion"
         :items="props.versionsOptions"
         :error-text="props.apiErrorGuestOsVersion"
         test-id="vm-wizard-os-version-select"
+        width="max-content"
         @change="emits('remove-error-by-title', 'guest_os_version')"
       />
     </div>
@@ -97,11 +98,12 @@ const onChangeOsFamily = (): void => {
   .select-os-description {
     font-size: 13px;
     color: var(--select-os-color);
+    line-height: 18px;
   }
 
   .select-wrap {
     display: grid;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 30% 67%;
     grid-gap: 16px;
     align-items: center;
 
@@ -112,6 +114,10 @@ const onChangeOsFamily = (): void => {
     .select-label {
       font-size: 13px;
       color: var(--select-os-color);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      min-width: 80px;
     }
 
     :deep(.ui-select-toggle-button) {

package/components/common/vm/actions/common/select/storage/Storage.vue

@@ -44,6 +44,7 @@ const emits = defineEmits<{
   (event: 'submit', value: UI_I_DatastoreTableItem): void
   (event: 'change-storage', value: UI_I_DatastoreTableItem): void
   (event: 'is-selected-row', value: boolean): void
+  (event: 'has-errors', value: boolean): void
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -134,6 +135,13 @@ const showValidationErrors = (arr: string[]): void => {
 const onRemoveValidationErrors = (): void => {
   errors.value = []
 }
+watch(
+  errors,
+  (newValue) => {
+    emits('has-errors', !newValue.length)
+  },
+  { immediate: true, deep: true }
+)
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -7,7 +7,8 @@
         :items="props.errors"
         status="alert-danger"
         test-id="storage-alert"
-        @remove="emits('remove-error')"
+        size="md"
+        @hide="emits('remove-error')"
       />
     </Teleport>
 
@@ -41,18 +42,23 @@
       <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="loading" width="160px" height="16px" />
         <template v-else>
           <template v-if="props.selectedStorage">
-            <ui-icon name="success-fill" width="16" height="16" />
+            <ui-icon
+              name="success-fill"
+              width="16"
+              height="16"
+              class="icon-compatibility-alert"
+            />
             <span class="compatibility-message-description">{{
               localization.common.compatibilityChecksSucceeded
             }}</span>
           </template>
           <template v-else>
             <!--            <ui-icon name="error" width="16" height="16" />-->
-            <span class="compatibility-message-description">{{
+            <span class="compatibility-message-description empty">{{
               localization.vmWizard.noStorageSelected
             }}</span>
           </template>
@@ -139,18 +145,23 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
   --select-storage-border-color: #e9ebed;
   --select-storage-bg-color: #ffffff;
   --select-storage-title-color: #4d5d69;
+  --select-storage-compatibility-bg-color: #ffffff;
   --select-storage-compatibility-description-color: #4d5d69;
+  --select-storage-compatibility-empty-description-color: #9da6ad;
 }
 :root.dark-theme {
   --select-storage-border-color: #e9ebed1f;
   --select-storage-bg-color: var(--wizard-right-bg);
   --select-storage-title-color: #e9eaec;
-  --select-storage-compatibility-description-color: #9da6ad;
+  --select-storage-compatibility-bg-color: #1b2a371f;
+  --select-storage-compatibility-description-color: #e9eaec;
+  --select-storage-compatibility-empty-description-color: #9da6ad;
 }
 </style>
 <style scoped lang="scss">
 .select-storage {
-  padding-top: 16px;
+  padding-top: 12px;
+  padding-bottom: 16px;
 
   .storage-count {
     font-size: 16px;
@@ -187,12 +198,20 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
       border-radius: 8px;
       border: 1px solid var(--select-storage-border-color);
       padding: 12px;
-      background-color: var(--select-storage-bg-color);
-      gap: 12px;
+      background-color: var(--select-storage-compatibility-bg-color);
+      gap: 10px;
 
+      .icon-compatibility-alert {
+        min-width: 16px;
+        min-height: 16px;
+      }
       .compatibility-message-description {
         font-size: 13px;
         color: var(--select-storage-compatibility-description-color);
+
+        &.empty {
+          color: var(--select-storage-compatibility-empty-description-color);
+        }
       }
     }
   }

package/components/common/vm/actions/common/select/storage/new/lib/config/table.ts

@@ -98,7 +98,7 @@ export const tableDataFunc = (
       isSortable: false,
       sort: 'asc',
       sortColumn: true,
-      width: '150px',
+      width: '190px',
       show: true,
       filter: true,
     },
@@ -120,7 +120,7 @@ export const tableDataFunc = (
       isSortable: false,
       sort: 'asc',
       sortColumn: true,
-      width: '150px',
+      width: '190px',
       show: true,
       filter: true,
     },
@@ -153,16 +153,16 @@ export const tableDataFunc = (
       isSortable: false,
       sort: 'asc',
       sortColumn: true,
-      width: '150px',
+      width: '190px',
       show: true,
       filter: true,
     },
-    {
-      col: 13,
-      colName: 'default-actions',
-      text: '',
-      show: true,
-    },
+    // {
+    //   col: 13,
+    //   colName: 'default-actions',
+    //   text: '',
+    //   show: true,
+    // },
   ],
 
   body: [],

package/components/common/vm/actions/editSettings/new/New.vue

@@ -18,7 +18,7 @@
           v-if="!vmSettings || props.loading"
         />
 
-        <div v-else class="vm-context">
+        <div v-else class="vm-context px-8">
           <common-vm-actions-common-customize-hardware
             v-model:vm-name="vmName"
             v-model:guest-machine-type="vmSettings.guestMachineType"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.229",
+  "version": "1.5.231",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",