bfg-common 1.6.111 → 1.6.112

package/assets/localization/local_be.json

@@ -4648,8 +4648,7 @@
   "advancedSystemSettings": {
     "key": "Ключ",
     "value": "Значэнне",
-    "summary": "Зводка",
-    "keysCountText": "ключ(ы)"
+    "summary": "Зводка"
   },
   "tagsAndAttributes": {
     "attributeDeleteConfirmation": "Вы ўпэўненыя, што хочаце выдаліць карыстацкі атрыбут \"{attributeName}\"?",

package/assets/localization/local_en.json

@@ -4653,8 +4653,7 @@
   "advancedSystemSettings": {
     "key": "Key",
     "value": "Value",
-    "summary": "Summary",
-    "keysCountText": "key(s)"
+    "summary": "Summary"
   },
   "tagsAndAttributes": {
     "attributeDeleteConfirmation": "Are you sure you want to delete the custom attribute \"{attributeName}\"?",

package/assets/localization/local_hy.json

@@ -4652,8 +4652,7 @@
   "advancedSystemSettings": {
     "key": "Բանալի",
     "value": "Արժեք",
-    "summary": "Ամփոփում",
-    "keysCountText": "բանալի(ներ)"
+    "summary": "Ամփոփում"
   },
   "tagsAndAttributes": {
     "attributeDeleteConfirmation": "Համոզվա՞ծ եք, որ ցանկանում եք հեռացնել \"{attributeName}\" հատուկ ատրիբուտը?",

package/assets/localization/local_kk.json

@@ -4651,8 +4651,7 @@
   "advancedSystemSettings": {
     "key": "Кілт",
     "value": "Мән",
-    "summary": "Түйіндеме",
-    "keysCountText": "кілт(тер)"
+    "summary": "Түйіндеме"
   },
   "tagsAndAttributes": {
     "attributeDeleteConfirmation": "\"{attributeName}\" теңшелетін төлсипатын жойғыңыз келетініне сенімдісіз бе?",

package/assets/localization/local_ru.json

@@ -2578,12 +2578,12 @@
     "vmAndTemplateDirectories": "Папки ВМ и шаблонов",
     "vmApplications": "Приложения виртуальных машин",
     "resourcePools": "Пулы ресурсов",
-    "buckets": "Бакеты",
+    "buckets": "Контейнеры",
     "backupStorages": "Хранилища резервных копий",
     "backupStorage": "Хранилище резервной копии",
     "backupStorageDirectories": "Папки хранилищ резервных копий",
     "scope": "Область",
-    "bucket": "Бакет",
+    "bucket": "Контейнер",
     "namespace": "Неймспейс",
     "vmApplication": "Приложение виртуальной машины",
     "zoneDirectory": "Папка зон",
@@ -4163,7 +4163,7 @@
     "show_cluster": "Просмотр кластера",
     "show_templates": "Просмотр шаблонов",
     "show_network": "Просмотр сети",
-    "show_buckets": "Отобразить бакет",
+    "show_buckets": "Отобразить контейнер",
     "show_rbac": "Просмотр информации о RBAC",
     "show_zone": "Просмотр зоны",
     "show_ghydra": "Просмотр Sphere Ghydra",
@@ -4651,8 +4651,7 @@
   "advancedSystemSettings": {
     "key": "Ключ",
     "value": "Значение",
-    "summary": "Сводка",
-    "keysCountText": "ключ(и)"
+    "summary": "Сводка"
   },
   "tagsAndAttributes": {
     "attributeDeleteConfirmation": "Вы уверены, что хотите удалить пользовательский атрибут \"{attributeName}\"?",

package/assets/localization/local_zh.json

@@ -4649,8 +4649,7 @@
   "advancedSystemSettings": {
     "key": "键",
     "value": "值",
-    "summary": "摘要",
-    "keysCountText": "密钥"
+    "summary": "摘要"
   },
   "tagsAndAttributes": {
     "attributeDeleteConfirmation": "您确定要删除自定义属性\"{attributeName}\"吗？",

package/components/common/configure/advancedSystemSettings/AdvancedSystemSettings.vue

@@ -1,17 +1,20 @@
 <template>
-  <component
-    :is="currentComponent"
-    :is-loading="isLoading"
-    :settings="settings"
-    @show-edit-modal="isShowEdit = true"
-  />
-
-  <common-configure-advanced-system-settings-modals-edit
-    v-if="isShowEdit"
-    :host="props.host"
-    :settings="settings"
-    @hide="isShowEdit = false"
-  />
+  <atoms-loader v-show="loading" test-id="advanced-system-settings-spinner" />
+  <div class="advanced-system-settings flex flex-col h-full">
+    <common-configure-advanced-system-settings-tools
+      class="mb-1"
+      @show-edit="isShowEdit = true"
+    />
+
+    <common-configure-advanced-system-settings-table-view :data="settings" />
+
+    <common-configure-advanced-system-settings-modals-edit
+      v-if="isShowEdit"
+      :host="props.host"
+      :settings="settings"
+      @hide="isShowEdit = false"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -24,22 +27,11 @@ const props = defineProps<{
 
 const { $store }: any = useNuxtApp()
 
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const isLoading = computed<boolean>(() =>
-  $store.getters['advancedSystemSettings/getLoading']('settings')
-)
+const loading = computed<boolean>(() => $store.getters['advancedSystemSettings/getLoading']('settings'))
 
 const settings = computed<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>(
   () => $store.getters['advancedSystemSettings/getSettings']
 )
-
 const getSettings = async (): Promise<void> => {
   await $store.dispatch('advancedSystemSettings/A_GET_SETTINGS', props.host)
 }

package/components/common/configure/advancedSystemSettings/modals/edit/Edit.vue

@@ -5,7 +5,7 @@
     v-model:invalid-fields="invalidFields"
     :host="props.host"
     :settings="props.settings"
-    :is-loading="isLoading"
+    :loading="loading"
     :errors="errors"
     @hide="onHide"
     @submit="onSubmit"
@@ -39,7 +39,7 @@ const settingsLocal = ref<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>(
   useDeepCopy(props.settings)
 )
 
-const isLoading = ref<boolean>(false)
+const loading = ref<boolean>(false)
 
 const errors = ref<string[]>([])
 const invalidFields = ref<string[]>([])
@@ -50,7 +50,7 @@ const onSubmit = async (): Promise<void> => {
     return
   }
 
-  isLoading.value = true
+  loading.value = true
 
   const error = await $store.dispatch(
     'advancedSystemSettings/A_UPDATE_SETTINGS',
@@ -67,7 +67,7 @@ const onSubmit = async (): Promise<void> => {
   if (error) errors.value.push(error)
   else onHide()
 
-  isLoading.value = false
+  loading.value = false
 }
 
 const onHide = (): void => {

package/components/common/configure/advancedSystemSettings/modals/edit/New.vue

@@ -1,52 +1,42 @@
 <template>
-  <ui-modal
-    :title="localization.common.editSettings"
-    :subtitle="props.host"
-    :texts="modalTextsLocal"
-    :is-loading="props.isLoading"
+  <atoms-modal
+    :title="localization.common.edit"
+    :second-title="props.host"
+    :loading="props.loading"
     test-id="advanced-system-settings-edit"
-    width="720px"
+    class="advanced-system-settings"
     show
     @hide="onHide"
   >
-    <template #content>
-      <div class="advanced-system-settings-edit-modal-body grid gap-4 mx-8">
-        <ui-alert
-          v-if="props.errors.length"
-          :messages="props.errors"
-          test-id="advanced-system-settings-edit-alert"
-          type="error"
-        />
-
-        <common-configure-advanced-system-settings-table-view
-          v-model:settings="model"
-          v-model:invalid-fields="invalidFields"
-          :data="props.settings"
-          is-edit
-        />
-      </div>
+    <template #modalBody>
+      <atoms-alert
+        v-show="props.errors.length"
+        :items="props.errors"
+        status="alert-danger"
+        test-id="advanced-system-service-alert"
+        class="mb-1"
+        @remove="emits('remove-validation-errors')"
+      />
+
+      <common-configure-advanced-system-settings-table-view
+        v-model:invalid-fields="invalidFields"
+        :data="props.settings"
+      />
     </template>
-    <template #footerLeftContent><span></span></template>
-  </ui-modal>
+  </atoms-modal>
 </template>
 
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { API_UI_I_DataTable } from '~/lib/models/table/interfaces'
 import type { UI_I_AdvancedSystemSetting } from '~/store/inventory/modules/configure/advancedSystemSettings/lib/models/interfaces'
-import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
 
-const model = defineModel<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>({
-  required: true,
-})
-const invalidFields = defineModel<string[]>('invalid-fields', {
-  required: true,
-})
+const invalidFields = defineModel<string[]>('invalid-fields', {required: true})
 
 const props = defineProps<{
   host: string
   settings: API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>
-  isLoading: boolean
+  loading: boolean
   errors: string[]
 }>()
 
@@ -58,18 +48,9 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const modalTextsLocal = computed<UI_I_ModalTexts>(() => ({
-  button2: localization.value.common.save,
-}))
-
 const onHide = (): void => {
   emits('hide')
 }
 </script>
 
-<style lang="scss" scoped>
-.advanced-system-settings-edit-modal-body {
-  height: 400px;
-  overflow: auto;
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/configure/advancedSystemSettings/modals/edit/Old.vue

@@ -2,7 +2,7 @@
   <atoms-modal
     :title="localization.common.edit"
     :second-title="props.host"
-    :loading="props.isLoading"
+    :loading="props.loading"
     test-id="advanced-system-settings-edit"
     class="advanced-system-settings"
     width="863px"
@@ -38,14 +38,12 @@ import type { UI_I_AdvancedSystemSetting } from '~/store/inventory/modules/confi
 const model = defineModel<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>({
   required: true,
 })
-const invalidFields = defineModel<string[]>('invalid-fields', {
-  required: true,
-})
+const invalidFields = defineModel<string[]>('invalid-fields', {required: true})
 
 const props = defineProps<{
   host: string
   settings: API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>
-  isLoading: boolean
+  loading: boolean
   errors: string[]
 }>()
 

package/components/common/configure/advancedSystemSettings/tableView/TableView.vue

@@ -1,21 +1,18 @@
 <template>
   <component
     :is="currentComponent"
+    v-model:settings="settings"
+    v-model:invalid-fields="invalidFields"
     :data-table="props.data?.items || []"
     :total-items="props.data?.total_items || 0"
     :total-pages="props.data?.total_pages || 1"
     :is-edit="props.isEdit"
-    :is-loading="props.isLoading"
-    @change-setting="onChangeSetting"
-    @update-invalid-fields="onUpdateInvalidFields"
   />
 </template>
 
 <script lang="ts" setup>
 import type { API_UI_I_DataTable } from '~/lib/models/table/interfaces'
 import type { UI_I_AdvancedSystemSetting } from '~/store/inventory/modules/configure/advancedSystemSettings/lib/models/interfaces'
-import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
-import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
 
 const settings = defineModel<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>(
   'settings',
@@ -27,7 +24,6 @@ const invalidFields = defineModel<string[]>('invalid-fields', {
 const props = withDefaults(
   defineProps<{
     data: API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>
-    isLoading: boolean
     isEdit?: boolean
   }>(),
   { isEdit: false }
@@ -41,25 +37,4 @@ const currentComponent = computed(() =>
     ? defineAsyncComponent(() => import('./new/New.vue'))
     : defineAsyncComponent(() => import('./old/Old.vue'))
 )
-
-const onChangeSetting = (
-  value: UI_I_AdvancedSystemSettingsEditData['value'],
-  key: string
-): void => {
-  settings.value.items = settings.value.items.map((item) => {
-    if (item.key === key) {
-      item.value = value
-    }
-    return item
-  })
-}
-
-const invalidFieldsLocal = ref<UI_I_ArbitraryObject<string>>({})
-const onUpdateInvalidFields = (value: string, key: string): void => {
-  invalidFieldsLocal.value[key] = value
-  if (invalidFields.value)
-    invalidFields.value = Object.values(invalidFieldsLocal.value).filter(
-      (error) => error
-    )
-}
 </script>

package/components/common/configure/advancedSystemSettings/tableView/new/New.vue

@@ -1,29 +1,72 @@
 <template>
-  <ui-data-table
-    :data="data"
-    :options="options"
-    :total-pages="props.totalPages"
-    :total-items="props.totalItems"
-    :texts="texts"
-    :skeleton="tableSkeleton"
-    :loading="props.isLoading"
-    :size="tableSize"
-    test-id="advanced-system-settings-table"
-  >
-    <template #value="{ item }">
-      <common-configure-advanced-system-settings-table-view-field
-        :data="item.data"
-        @change="emits('change-setting', $event, item.data.key)"
-        @error-message="emits('update-invalid-fields', $event, item.data.key)"
-      />
-    </template>
-    <template v-if="props.isEdit" #footerActions>
-      <p class="table-items-count-text">
-        {{ tableBodyItems.length }}
-        {{ localization.advancedSystemSettings.keysCountText }}
-      </p>
-    </template>
-  </ui-data-table>
+  <div class="device-table-container">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :total-pages="props.totalPages"
+      :total-items="props.totalItems"
+      :texts="texts"
+      :default-layout="false"
+      :skeleton="tableSkeleton"
+      test-id="compute-resource-table"
+      class="device-table"
+      size="sm"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <span :class="['device-table__icon', item.data.iconClassName]" />
+        <span class="device-table__text text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+
+      <template #progress="{ item }">
+        <div class="progress flex items-center justify-between w-full">
+          <div class="progress-line">
+            <div
+              v-if="item.data"
+              :style="`width: ${item.data}%`"
+              class="progress-line-fill"
+            ></div>
+          </div>
+          <div
+            :class="[
+              'progress-text',
+              {
+                'progress-full': item.data === 100,
+              },
+            ]"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </template>
+
+      <template #status="{ item }">
+        <ui-chip
+          :test-id="item.data.testId"
+          :color="item.data.chipColor"
+          size="sm"
+          rounded
+        >
+          <ui-icon
+            :name="item.data.icon"
+            width="14px"
+            height="14px"
+            class="chip-icon"
+          ></ui-icon>
+          {{ item.text }}
+        </ui-chip>
+      </template>
+
+      <template #skeleton-header>
+        <div class="flex justify-between items-center">
+          <ui-skeleton-item width="80" height="20" />
+          <ui-skeleton-item width="88" height="28" border-radius="6" />
+        </div>
+      </template>
+    </ui-data-table>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -33,34 +76,22 @@ import type {
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
   UI_I_TableTexts,
-  UI_I_DataTableSkeleton,
-  UI_I_DataTableOptions,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_AdvancedSystemSetting } from '~/store/inventory/modules/configure/advancedSystemSettings/lib/models/interfaces'
-import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
+import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import {
-  optionsFunc,
+  options,
   getHeaderDataFunc,
   getBodyDataFunc,
-} from '~/components/common/configure/advancedSystemSettings/tableView/new/lib/config'
+} from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
 
+const selectedDataLocal = defineModel<number | null>({ required: true })
 const props = defineProps<{
-  dataTable: UI_I_AdvancedSystemSetting[]
+  dataTable: any[]
   totalItems: number
   totalPages: number
-  isLoading: boolean
   isEdit: boolean
 }>()
 
-const emits = defineEmits<{
-  (
-    event: 'change-setting',
-    value1: UI_I_AdvancedSystemSettingsEditData['value'],
-    value2: string
-  ): void
-  (event: 'update-invalid-fields', value1: string, value2: string): void
-}>()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const texts = computed<UI_I_TableTexts>(() => ({
@@ -79,45 +110,84 @@ const texts = computed<UI_I_TableTexts>(() => ({
 }))
 
 const tableSkeleton = ref<UI_I_DataTableSkeleton>({
-  columnsCount: 3,
+  columnsCount: 4,
   headColumns: [],
   bodyColumns: [],
   withoutPagination: true,
 })
 
 const data = computed<UI_I_DataTable>(() => ({
-  id: 'advanced-system-settings-table',
-  header: tableHeadItems.value,
-  body: tableBodyItems.value,
+  id: 'compute-resource-host-table',
+  title: `${localization.value.common.hosts} (${props.totalItems})`,
+  header: deviceHeadItems.value,
+  body: deviceBodyItems.value,
 }))
 
-const tableSize = computed<string>(() => (props.isEdit ? 'sm' : 'md'))
-
-const options = computed<UI_I_DataTableOptions>(() => optionsFunc(props.isEdit))
-
-const tableHeadItems = computed<UI_I_DataTableHeader[]>(() =>
-  getHeaderDataFunc(localization.value, props.isEdit)
+const deviceHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
 )
 
-const tableBodyItems = ref<UI_I_DataTableBody[]>([])
+const deviceBodyItems = ref<UI_I_DataTableBody[]>([])
 watch(
   () => props.dataTable,
-  (newValue: UI_I_AdvancedSystemSetting[]) => {
+  (newValue: UI_T_ComputeResourceTableItem[]) => {
     if (!newValue?.length) {
-      tableBodyItems.value = []
+      deviceBodyItems.value = []
       return
     }
 
-    tableBodyItems.value = getBodyDataFunc(newValue, props.isEdit)
+    deviceBodyItems.value = getBodyDataFunc(newValue, localization.value)
   },
   { deep: true, immediate: true }
 )
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  selectedDataLocal.value = value?.[0].row
+}
 </script>
 
 <style lang="scss" scoped>
-.table-items-count-text {
-  margin-left: auto;
-  font-size: 12px;
-  color: #9da6ad;
+.device-table-container {
+  margin: 20px 0 24px;
+  :deep(.column-manager-button.sm span) {
+    font-weight: 500;
+  }
+  :deep(.table-title .title-container h6) {
+    font-size: 12px;
+  }
+  .device-table {
+    &__icon {
+      margin-right: 4px;
+    }
+    &__text {
+      font-size: 12px;
+    }
+  }
+  .progress {
+    &-line {
+      height: 12px;
+      width: 100%;
+      background: #e9ebed8f;
+      border-radius: 6px;
+
+      &-fill {
+        height: 12px;
+        min-width: 12px;
+        background: #008fd6;
+        border-radius: 6px;
+      }
+    }
+
+    &-text {
+      width: 53px;
+      min-width: 53px;
+      margin-left: 8px;
+      text-align: right;
+
+      &.progress-full {
+        color: #ea3223;
+      }
+    }
+  }
 }
 </style>