bfg-common 1.6.111 → 1.6.113

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>

package/components/common/configure/advancedSystemSettings/tableView/new/lib/config/hostTable.ts

@@ -0,0 +1,308 @@
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_HostTableItem } from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/lib/models/interfaces'
+import {
+  UI_E_DeviceStatus,
+  UI_E_DeviceStatusChipColor,
+  UI_E_DeviceStatusIcon,
+} from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/models/enums'
+import {
+  hostIconByState,
+  hostLocalizationByState,
+} from '~/components/common/lib/config/states'
+
+// Маппинг для статусов
+const STATUS_MAPPING = {
+  [UI_E_DeviceStatus.Unknown]: {
+    icon: UI_E_DeviceStatusIcon.HelpIcon,
+    chipColor: UI_E_DeviceStatusChipColor.Primary,
+  },
+  [UI_E_DeviceStatus.Supported]: {
+    icon: UI_E_DeviceStatusIcon.StatusCheck,
+    chipColor: UI_E_DeviceStatusChipColor.Green,
+  },
+  [UI_E_DeviceStatus.NotSupported]: {
+    icon: UI_E_DeviceStatusIcon.Close,
+    chipColor: UI_E_DeviceStatusChipColor.Red,
+  },
+}
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'name',
+    text: localization.common.name,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col1',
+    colName: 'state',
+    text: localization.inventorySummary.state,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col2',
+    colName: 'cluster',
+    text: localization.common.cluster,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col3',
+    colName: 'fault_domain',
+    text: localization.common.faultDomain,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col4',
+    colName: 'consumed_cpu',
+    text: `${localization.common.consumedCpu} %`,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col5',
+    colName: 'consumed_mem',
+    text: `${localization.common.consumedMemory} %`,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col6',
+    colName: 'ha_state',
+    text: localization.common.haState,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col7',
+    colName: 'uptime',
+    text: localization.inventorySummary.uptime,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col8',
+    colName: 'cert_valid_to',
+    text: localization.common.certificateValidTo,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col9',
+    colName: 'mem_size',
+    text: `${localization.common.memorySize} (${localization.common.mb})`,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col10',
+    colName: 'cpus',
+    text: localization.common.cpus,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col11',
+    colName: 'nics',
+    text: localization.inventorySummary.nics,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col12',
+    colName: 'version',
+    text: localization.common.version,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col13',
+    colName: 'alarm_action',
+    text: localization.common.alarmActions,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+]
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [{ text: '10', value: 100, default: true }],
+  isSelectable: true,
+  selectType: 'radio',
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: true,
+  isResizable: true,
+  showSelectedRows: false,
+  showColumnManager: true,
+  inModal: true,
+  inBlock: false,
+  // isFocusable: false,
+  // showPaginationOnTop: false,
+  // showSearch: false,
+  // withActions: false,
+  // showExport: false,
+  // withCollapse: false,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_HostTableItem[],
+  localization: UI_I_Localization
+): UI_I_DataTableBody[] => {
+  const { $number } = useNuxtApp() as any
+
+  return bodyData.map((host, index: number) => {
+    const statusKey = host.state
+      ? UI_E_DeviceStatus.Unknown
+      : UI_E_DeviceStatus.Supported
+    const statusData = {
+      ...STATUS_MAPPING[statusKey],
+      testId: `${host.name}-${index}-status`,
+    }
+
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+
+      data: [
+        {
+          key: 'icon',
+          col: 'col0',
+          text: host.name,
+          data: `vsphere-icon-${hostIconByState[host.state]}`,
+          testId: `migrate-host-table-item-${index}`,
+        },
+
+        {
+          key: 'status',
+          col: 'col1',
+          text: localization.common[hostLocalizationByState[host.state]],
+          testId: `migrate-host-table-item-${index}`,
+          data: statusData,
+        },
+        {
+          col: 'col2',
+          text: host.cluster,
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          col: 'col3',
+          text: host.fault_domain,
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          key: 'progress',
+          col: 'col4',
+          text: `${host.consumed_cpu.toFixed(2)}%`,
+          data: host.consumed_cpu,
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          key: 'progress',
+          col: 'col5',
+          text: `${host.consumed_mem.toFixed(2)}%`,
+          data: host.consumed_mem,
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          col: 'col6',
+          text: host.ha_state,
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          col: 'col7',
+          text: host.uptime + '',
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          col: 'col8',
+          text: host.cert_valid_to,
+          testId: `migrate-host-table-item-${index}`,
+        },
+
+        {
+          col: 'col9',
+          text: `${$number.format(host.mem_size, 'en')} ${
+            localization.common.mb
+          }`,
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          col: 'col10',
+          text: host.cpus + '',
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          col: 'col11',
+          text: host.nics + '',
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          col: 'col12',
+          text: host.version,
+          testId: `migrate-host-table-item-${index}`,
+        },
+        {
+          key: 'status',
+          col: 'col13',
+          text: host.alarm_action,
+          data: statusData,
+          testId: `migrate-host-table-item-${index}`,
+        },
+      ],
+    }
+  })
+}

package/components/common/configure/advancedSystemSettings/tableView/old/Old.vue

@@ -13,10 +13,10 @@
       server-off
     >
       <template #value="{ item }">
-        <common-configure-advanced-system-settings-table-view-field
+        <common-configure-advanced-system-settings-table-view-old-field
           :data="item.data"
-          @change="emits('change-setting', $event, item.data.key)"
-          @error-message="emits('update-invalid-fields', $event, item.data.key)"
+          @change="onChangeSetting($event, item.data.key)"
+          @error-message="onUpdateInvalidFields($event, item.data.key)"
         />
       </template>
     </atoms-table-data-grid>
@@ -29,12 +29,26 @@ import type {
   UI_I_HeadItem,
   UI_I_BodyItem,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type {
+  API_UI_I_DataTable,
+  UI_I_Pagination,
+} from '~/lib/models/table/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 * as table from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/config/table'
 
+const settings = defineModel<API_UI_I_DataTable<UI_I_AdvancedSystemSetting[]>>(
+  'settings',
+  { required: true }
+)
+const invalidFields = defineModel<string[]>('invalid-fields', {
+  required: false,
+})
+
 const props = defineProps<{
   dataTable: UI_I_AdvancedSystemSetting[]
   totalItems: number
@@ -42,17 +56,29 @@ const props = defineProps<{
   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 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
+    )
+}
+
 const paginationLocal = ref<UI_I_Pagination>({
   page: 1,
   pageSize: 100,
@@ -82,6 +108,7 @@ watch(
   @include flex($dir: column);
   overflow: hidden;
   height: inherit;
+  max-height: 250px;
   .data-table {
     @include flex($dir: column);
     flex-direction: column;