bfg-common 1.6.111 → 1.6.112

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;

package/components/common/configure/advancedSystemSettings/tableView/{field → old/field}/Field.vue

@@ -1,37 +1,67 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model:value="valueLocal"
-    :data="props.data"
-    :invalid="invalid"
-    :error-message="errorMessage"
-    @change="onChangeSetting"
-  />
+  <atoms-tooltip-error :has-error="invalid">
+    <template #elem>
+      <div v-if="props.data.type === 'number'">
+        <input
+          v-model="valueLocal"
+          type="number"
+          :class="{ 'has-error': invalid }"
+          @input="onChangeSetting($event)"
+        />
+      </div>
+      <div v-if="props.data.type === 'string'">
+        <input
+          v-model="valueLocal"
+          type="text"
+          :class="{ 'has-error': invalid }"
+          @input="onChangeSetting($event)"
+        />
+      </div>
+      <div v-if="props.data.type === 'boolean'" class="select">
+        <select
+          v-model="valueLocal"
+          @change="onChangeSetting($event)"
+          :class="{ 'has-error': invalid }"
+        >
+          <option value="false">false</option>
+          <option value="true">true</option>
+        </select>
+      </div>
+      <!--      <div v-if="props.data.type === 'select'" class="select">-->
+      <!--        <select-->
+      <!--          v-model="valueLocal"-->
+      <!--          @change="onChangeSetting($event)"-->
+      <!--          :class="{ 'has-error': invalid }"-->
+      <!--        >-->
+      <!--          <option-->
+      <!--            v-for="item2 in props.data.options"-->
+      <!--            :key="item2.key"-->
+      <!--            :value="item2.key"-->
+      <!--          >-->
+      <!--            {{ item2.value }}-->
+      <!--          </option>-->
+      <!--        </select>-->
+      <!--      </div>-->
+    </template>
+    <template #content>
+      {{ errorMessage }}
+    </template>
+  </atoms-tooltip-error>
 </template>
 
 <script setup lang="ts">
 import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
-import { UI_E_Format } from '~/components/common/configure/advancedSystemSettings/tableView/field/lib/models/enums'
+import { E_Format } from '~/components/common/configure/advancedSystemSettings/tableView/old/field/lib/models/enums'
 import { allRegExp } from '~/lib/config/regExp'
 
 const props = defineProps<{
   data: UI_I_AdvancedSystemSettingsEditData
 }>()
-
 const emits = defineEmits<{
   (event: 'change', value: UI_I_AdvancedSystemSettingsEditData['value']): void
   (event: 'error-message', value: string): void
 }>()
 
-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 valueLocal = ref<UI_I_AdvancedSystemSettingsEditData['value']>(
   props.data.value
 )
@@ -88,7 +118,7 @@ const onChangeSetting = (event: Event): void => {
   if (invalid.value) return
 
   if (validation.Format) {
-    const format = UI_E_Format[validation.Format]
+    const format = E_Format[validation.Format]
     invalid.value = !allRegExp[format].test(value)
     errorMessage.value = invalid.value ? `Value must be ${format}` : ''
   }

package/components/common/configure/advancedSystemSettings/tableView/old/field/lib/models/enums.ts

@@ -0,0 +1,14 @@
+export enum E_Format {
+    'unix path' = 'unixPath',
+    'win path' = 'winPath',
+    'mac' = 'mac',
+    'ip4' = 'ip4',
+    'ip6' = 'ip6',
+    'url' = 'url',
+    'uuid' = 'uuid',
+    'semver' = 'semver',
+    'domain' = 'domain',
+    'base64' = 'base64',
+    'regex' = 'regex',
+    'hex color' = 'hexColor',
+}

package/components/common/configure/advancedSystemSettings/tools/New.vue

@@ -1,66 +1,5 @@
-<template>
-  <div class="flex flex-wrap justify-between gap-4 mb-4">
-    <h3 class="advanced-system-settings-title text-[18px] font-[500]">
-      {{ props.title }}
-    </h3>
+<template>New</template>
 
-    <ui-button
-      test-id="advanced-system-settings-edit-toggle"
-      variant="text"
-      is-without-sizes
-      is-without-height
-      @click="emits('show-edit-modal')"
-    >
-      <ui-icon name="settings" width="18px" height="18px" />
-    </ui-button>
-  </div>
-</template>
+<script setup lang="ts"></script>
 
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'show-edit-modal'): void
-}>()
-</script>
-
-<style>
-:root {
-  --advanced-system-settings-title: #4d5d69;
-  --advanced-system-settings-edit-border: #e9ebed;
-  --advanced-system-settings-edit-bg: #ffffff;
-  --advanced-system-settings-edit-color: #213444;
-  --advanced-system-settings-edit-hover-bg: #f6f7f8;
-  --advanced-system-settings-edit-hover-color: #1b2a37;
-}
-:root.dark-theme {
-  --advanced-system-settings-title: #e9eaec;
-  --advanced-system-settings-edit-border: #e9ebed1f;
-  --advanced-system-settings-edit-bg: #1b2a373d;
-  --advanced-system-settings-edit-color: #e9eaec;
-  --advanced-system-settings-edit-hover-bg: #283948;
-  --advanced-system-settings-edit-hover-color: #ffffff;
-}
-</style>
-
-<style scoped lang="scss">
-.advanced-system-settings-title {
-  color: var(--advanced-system-settings-title);
-}
-
-#advanced-system-settings-edit-toggle {
-  padding: 8px;
-  width: 34px;
-  height: 34px;
-  border: 1px solid var(--advanced-system-settings-edit-border);
-  color: var(--advanced-system-settings-edit-color);
-  background-color: var(--advanced-system-settings-edit-bg);
-
-  &:hover {
-    background-color: var(--advanced-system-settings-edit-hover-bg);
-    color: var(--advanced-system-settings-edit-hover-color);
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/configure/advancedSystemSettings/tools/Old.vue

@@ -3,7 +3,7 @@
     <template #action>
       <button
         class="btn btn-sm btn-secondary ng-star-inserted"
-        @click="emits('show-edit-modal')"
+        @click="emits('show-edit')"
       >
         {{ localization.common.edit }}...
       </button>
@@ -19,7 +19,7 @@ const props = defineProps<{
 }>()
 
 const emits = defineEmits<{
-  (event: 'show-edit-modal'): void
+  (event: 'show-edit'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/configure/advancedSystemSettings/tools/Tools.vue

@@ -2,7 +2,7 @@
   <component
     :is="currentComponent"
     :title="localization.common.advancedSystemSettings"
-    @show-edit-modal="emits('show-edit-modal')"
+    @show-edit="emits('show-edit')"
   />
 </template>
 
@@ -10,7 +10,7 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const emits = defineEmits<{
-  (event: 'show-edit-modal'): void
+  (event: 'show-edit'): void
 }>()
 
 const { $store }: any = useNuxtApp()