bfg-common 1.5.181 → 1.5.183

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

@@ -211,12 +211,81 @@ const themeMode = useLocalStorage('themeMode')
     margin-top: 12px;
   }
 }
-
+//
+//.light-theme {
+//  :deep(.stack-block-label .ui-main-select-toggle) {
+//    background-color: #ffffff;
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .ui-main-select-toggle) {
+//    background-color: #1b2a371f;
+//    border-color: #e9ebed3d;
+//
+//    .ui-arrow-icon {
+//      color: #e9eaec;
+//    }
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .combobox-input) {
+//    color: #e9eaec;
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .ui-selected-text) {
+//    color: #e9eaec;
+//  }
+//
+//  :deep(.stack-block-label .ui-main-input) {
+//    background-color: #ffffff;
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .ui-main-input) {
+//    background-color: #1b2a371f;
+//    border-color: #e9ebed3d;
+//    color: #e9eaec;
+//  }
+//}
+//
+//.dark-theme {
+//  :deep(.stack-block-label .ui-main-select-toggle) {
+//    background-color: #1b2a371f;
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .ui-main-select-toggle) {
+//    background-color: #ffffff;
+//    border-color: #d3d6da;
+//
+//    .ui-arrow-icon {
+//      color: #182531;
+//    }
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .combobox-input) {
+//    color: #182531;
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .ui-selected-text) {
+//    color: #182531;
+//  }
+//
+//  :deep(.stack-block-label .ui-main-input) {
+//    background-color: #1b2a371f;
+//  }
+//  :deep(.stack-block-expanded > .stack-block-label .ui-main-input) {
+//    background-color: #ffffff;
+//    border-color: #d3d6da;
+//    color: #182531;
+//  }
+//  :deep(.ui-select-toggle-button:disabled) {
+//    background-color: linear-gradient(
+//        0deg,
+//        rgba(189, 195, 199, 0.08) 0%,
+//        rgba(189, 195, 199, 0.08) 100%
+//      ),
+//      rgba(27, 42, 55, 0.12);
+//    border-color: #D3D6DA14;
+//    color: #BDC3C770;
+//  }
+//}
+</style>
+<style lang="scss">
 .light-theme {
-  :deep(.stack-block-label .ui-main-select-toggle) {
+  .stack-block-label .ui-main-select-toggle {
     background-color: #ffffff;
   }
-  :deep(.stack-block-expanded > .stack-block-label .ui-main-select-toggle) {
+  .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
     background-color: #1b2a371f;
     border-color: #e9ebed3d;
 
@@ -224,17 +293,17 @@ const themeMode = useLocalStorage('themeMode')
       color: #e9eaec;
     }
   }
-  :deep(.stack-block-expanded > .stack-block-label .combobox-input) {
+  .stack-block-expanded > .stack-block-label .combobox-input {
     color: #e9eaec;
   }
-  :deep(.stack-block-expanded > .stack-block-label .ui-selected-text) {
+  .stack-block-expanded > .stack-block-label .ui-selected-text {
     color: #e9eaec;
   }
 
-  :deep(.stack-block-label .ui-main-input) {
+  .stack-block-label .ui-main-input {
     background-color: #ffffff;
   }
-  :deep(.stack-block-expanded > .stack-block-label .ui-main-input) {
+  .stack-block-expanded > .stack-block-label .ui-main-input {
     background-color: #1b2a371f;
     border-color: #e9ebed3d;
     color: #e9eaec;
@@ -242,10 +311,17 @@ const themeMode = useLocalStorage('themeMode')
 }
 
 .dark-theme {
-  :deep(.stack-block-label .ui-main-select-toggle) {
-    background-color: #1b2a371f;
+  .stack-block-label {
+    .ui-main-select-toggle {
+      background-color: #1b2a371f;
+    }
+    .error {
+      .ui-main-select-toggle {
+        background-color: #d1312614;
+      }
+    }
   }
-  :deep(.stack-block-expanded > .stack-block-label .ui-main-select-toggle) {
+  .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
     background-color: #ffffff;
     border-color: #d3d6da;
 
@@ -253,20 +329,25 @@ const themeMode = useLocalStorage('themeMode')
       color: #182531;
     }
   }
-  :deep(.stack-block-expanded > .stack-block-label .combobox-input) {
+  .stack-block-expanded > .stack-block-label .combobox-input {
     color: #182531;
   }
-  :deep(.stack-block-expanded > .stack-block-label .ui-selected-text) {
+  .stack-block-expanded > .stack-block-label .ui-selected-text {
     color: #182531;
   }
 
-  :deep(.stack-block-label .ui-main-input) {
+  .stack-block-label .ui-main-input {
     background-color: #1b2a371f;
   }
-  :deep(.stack-block-expanded > .stack-block-label .ui-main-input) {
+  .stack-block-expanded > .stack-block-label .ui-main-input {
     background-color: #ffffff;
     border-color: #d3d6da;
     color: #182531;
   }
+  .ui-select-toggle-button:disabled {
+    background-color: #aab1b614;
+    border-color: #d3d6da14;
+    color: #bdc3c770;
+  }
 }
 </style>

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

@@ -376,12 +376,12 @@ const onAddDevice = (data: number): void => {
 }
 :root.dark-theme {
   --vm-wizard-block-view-bg-color: transparent;
-  --add-device-dropdown-bg-color: #1B2A373D;
-  --add-device-dropdown-bg-color-hover: linear-gradient(0deg, rgba(43, 162, 222, 0.08) 0%, rgba(43, 162, 222, 0.08) 100%), rgba(27, 42, 55, 0.24);
-  --add-device-dropdown-border-color: #E9EBED1F;
-  --add-device-dropdown-border-color-hover: #2BA2DE;
-  --add-device-dropdown-color: #E9EAEC;
-  --add-device-dropdown-color-hover: #2BA2DE;
+  --add-device-dropdown-bg-color: #1b2a373d;
+  --add-device-dropdown-bg-color-hover: #2585b614;
+  --add-device-dropdown-border-color: #e9ebed1f;
+  --add-device-dropdown-border-color-hover: #2ba2de;
+  --add-device-dropdown-color: #e9eaec;
+  --add-device-dropdown-color-hover: #2ba2de;
   --add-device-dropdown-item-title-color: #e9eaec;
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/StorageModalNew.vue

@@ -4,13 +4,21 @@
     show
     :title="localization.common.selectStorage"
     :texts="texts"
+    :is-disabled-accept="isDisabledAccept"
     test-id="storage-modal-new"
     size="md"
+    width="720px"
     @hide="emits('hide')"
     @submit="emits('submit')"
   >
     <template #content>
-      <div class="select-storage-modal-container">
+      <div
+        ref="selectStorageModalContainer"
+        :class="[
+          'select-storage-modal-container',
+          { 'has-scroll': isHasScroll },
+        ]"
+      >
         <span class="description-text">{{
           localization.common
             .followingDatastoresAccessibleDestinationResourceThatSelected
@@ -22,7 +30,12 @@
           hide-compatibility
           hide-alert
           @submit="emits('change-storage', $event)"
+          @is-selected-row="isDisabledAccept = !$event"
         />
+        <span class="count-text"
+          >{{ props.datastore.length }}
+          {{ localization.common.datastores }}</span
+        >
       </div>
     </template>
     <template #footerLeftContent>
@@ -32,6 +45,7 @@
 </template>
 
 <script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
 import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
 import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -52,18 +66,43 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const isDisabledAccept = ref<boolean>(false)
+
 const texts = ref<UI_I_ModalTexts>({
+  button1: localization.value.common.cancel,
   button2: localization.value.common.select,
 })
+
+const selectStorageModalContainer = ref<any>(null)
+const { width, height } = useElementSize(selectStorageModalContainer)
+const isHasScroll = ref<boolean>(false)
+const isScrollVisible = (element: HTMLElement): boolean =>
+  element.scrollHeight > element.clientHeight
+
+watch([width, height], () => {
+  if (!selectStorageModalContainer.value) return
+
+  isHasScroll.value = isScrollVisible(selectStorageModalContainer.value)
+})
 </script>
 
 <style scoped lang="scss">
 .select-storage-modal-container {
+  height: calc(100vh - 300px);
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  grid-gap: 12px;
+  //grid-gap: 12px;
   padding-left: 32px;
-  padding-bottom: 5px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  &:not(.has-scroll) {
+    padding-right: 32px;
+  }
+  &.has-scroll {
+    padding-right: 18px;
+  }
 
   .description-text {
     font-size: 12px;
@@ -71,5 +110,14 @@ const texts = ref<UI_I_ModalTexts>({
     line-height: 14.52px;
     color: #9da6ad;
   }
+  .count-text {
+    text-align: right;
+    font-size: 12px;
+    font-weight: 400;
+    color: #9da6ad;
+    margin-bottom: 8px;
+    margin-top: 8px;
+    text-transform: lowercase;
+  }
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/New.vue

@@ -25,6 +25,9 @@
               @select="emits('select', $event)"
             />
           </div>
+          <p class="count-text">
+            {{ props.networksTable.length }} {{ localization.common.networks }}
+          </p>
         </template>
         <template #footerLeftContent>
           <span></span>
@@ -60,4 +63,14 @@ const modalTexts = ref<UI_I_ModalTexts>({
 })
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.count-text {
+  text-align: right;
+  font-size: 12px;
+  font-weight: 400;
+  color: #9da6ad;
+  margin-bottom: 8px;
+  margin-top: 8px;
+  text-transform: lowercase;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/table/Table.vue

@@ -2,6 +2,7 @@
   <ui-data-table
     :data="data"
     :options="options"
+    size="sm"
     test-id="data-table-main"
     class="network-table"
     server-off

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

@@ -42,6 +42,7 @@ const props = defineProps<{
 }>()
 const emits = defineEmits<{
   (event: 'submit', value: UI_I_DatastoreTableItem): void
+  (event: 'is-selected-row', value: boolean): void
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -97,6 +98,13 @@ watch(
   },
   { immediate: true }
 )
+watch(
+  selectedRow,
+  (newValue) => {
+    emits('is-selected-row', typeof newValue === 'number')
+  },
+  { immediate: true }
+)
 
 watch(
   () => props.storageSubmit,

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

@@ -17,6 +17,7 @@
         :options="tableOptions"
         :loading="loading"
         :default-layout="false"
+        :texts="tableTexts"
         test-id="select-storage-data-table"
         server-off
         size="sm"
@@ -62,7 +63,10 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import {
@@ -70,6 +74,7 @@ import {
   tableDataFunc,
   tableOptions,
 } from '~/components/common/vm/actions/common/select/storage/new/lib/config/table'
+import { tableTextsFunc } from '~/lib/config/uiTable'
 
 const selectedRow = defineModel<number | null>('selectedRow')
 
@@ -87,6 +92,10 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const tableTexts = computed<UI_I_TableTexts>(() =>
+  tableTextsFunc(localization.value)
+)
+
 const storageCount = computed<string>(() =>
   localization.value.vmWizard.storageCount.replace(
     '{0}',

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

@@ -238,8 +238,16 @@ export const tableBodyFunc = (
             text: localization.common.supported,
           }
 
-    thinProvisioningData = getStatus(item.thin_provisioning)
-    storage_io_control = getStatus(item.storage_io_control)
+    thinProvisioningData = getStatus(
+      item.thin_provisioning,
+      localization.common.yes,
+      localization.common.no
+    )
+    storage_io_control = getStatus(
+      item.storage_io_control,
+      localization.common.yes,
+      localization.common.no
+    )
 
     result.push({
       row: key,
@@ -257,7 +265,7 @@ export const tableBodyFunc = (
           key: 'state',
           col: 1,
           text: stateData.text,
-          data: stateData
+          data: stateData,
         },
         { col: 2, text: $binary.round(item.capacity.capacity_mb) },
         {
@@ -282,7 +290,7 @@ export const tableBodyFunc = (
           text: item.thin_provisioning
             ? localization.common.yes
             : localization.common.no,
-          data: thinProvisioningData
+          data: thinProvisioningData,
         },
         {
           col: 8,
@@ -292,7 +300,7 @@ export const tableBodyFunc = (
           key: 'state',
           col: 9,
           text: item.hardware_acceleration,
-          data: hardwareAccelerationData
+          data: hardwareAccelerationData,
         },
         {
           col: 10,
@@ -306,7 +314,7 @@ export const tableBodyFunc = (
           key: 'state',
           col: 12,
           text: item.storage_io_control,
-          data: storage_io_control
+          data: storage_io_control,
         },
       ],
     })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.181",
+  "version": "1.5.183",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -34,7 +34,7 @@
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
-    "bfg-nuxt-3-graph": "1.0.24",
+    "bfg-nuxt-3-graph": "1.0.25",
     "bfg-uikit": "1.0.417",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"