bfg-common 1.5.771 → 1.5.774

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

@@ -0,0 +1,128 @@
+<template>
+  <div class="data-table-view">
+    <atoms-table-data-grid
+      v-model:column-keys="columnKeys"
+      v-model:page-size="paginationLocal.pageSize"
+      v-model:page="paginationLocal.page"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      class="data-table"
+      test-id="any-table"
+      server-off
+      hide-page-size
+      hide-pagination
+    >
+      <template #value="{ item }">
+        <div v-if="item.data.type === 'int'">
+          <input
+            type="number"
+            :value="item.data.value"
+            @change="onChangeSetting($event, item.data.key)"
+          />
+        </div>
+        <div v-if="item.data.type === 'string'">
+          <input
+            type="text"
+            :value="item.data.value"
+            @change="onChangeSetting($event, item.data.key)"
+          />
+        </div>
+        <div v-if="item.data.type === 'boolean'">
+          <select
+            @change="onChangeSetting($event, item.data.key)"
+            :value="item.data.value"
+          >
+            <option value="false">false</option>
+            <option value="true">true</option>
+          </select>
+        </div>
+        <div v-if="item.data.type === 'select'">
+          <select
+            @change="onChangeSetting($event, item.data.key)"
+            :value="item.data.value"
+          >
+            <option
+              v-for="item2 in item.data.options"
+              :key="item2.key"
+              :value="item2.key"
+            >
+              {{ item2.value }}
+            </option>
+          </select>
+        </div>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_ColumnKey,
+  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 * as table from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/config/table'
+
+const settings = defineModel<any>('settings', { required: true })
+
+const props = defineProps<{
+  dataTable: any[]
+  totalItems: number
+  totalPages: number
+  isEdit: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onChangeSetting = (event: any, key: string): void => {
+  let value = event.target.value
+  settings.value.items = settings.value.items.map((item) => {
+    if (item.key === key) {
+      if (item.type === 'boolean') value = !!value
+      if (item.type === 'int') value = +value
+      item.value = value
+    }
+    return item
+  })
+}
+
+const paginationLocal = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 100,
+})
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value, props.isEdit)
+)
+
+const columnKeys = computed<UI_I_ColumnKey[]>(() =>
+  table.columnKeys(localization.value, props.isEdit)
+)
+
+const bodyItems = computed<UI_I_BodyItem[][]>(() => {
+  return table.bodyItems(props.dataTable, localization.value, props.isEdit)
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.data-table-view {
+  @include flex($dir: column);
+  overflow: hidden;
+  height: inherit;
+  max-height: 250px;
+  .data-table {
+    @include flex($dir: column);
+    flex-direction: column;
+    overflow: hidden;
+    height: inherit;
+    :deep(.datagrid-outer-wrapper) {
+      height: inherit;
+    }
+  }
+}
+</style>

package/components/common/configure/advancedSystemSettings/tableView/old/lib/config/table.ts

@@ -0,0 +1,93 @@
+import type {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  constructColumnKey,
+  constructHeadItem,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import { tableItemKeys } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/config/tableKeys'
+
+const getItems = (
+  _localization: UI_I_Localization,
+  isEdit = false
+): [string, boolean, string, string][] => {
+  const items: [string, boolean, string, string][] = [
+    ['localization.common.key', true, '280px', tableItemKeys[0]],
+    ['localization.common.value', true, '280px', tableItemKeys[1]],
+  ]
+  if (!isEdit) {
+    items.push(['localization.common.summary', true, '280px', tableItemKeys[2]])
+  }
+  return items
+}
+
+export const columnKeys = (
+  localization: UI_I_Localization,
+  isEdit = false
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization, isEdit).forEach((item, i) => {
+    const col = isEdit && i === 1 ? 'value' : `col${i}`
+    result.push(constructColumnKey(col, item[0], item[1]))
+  })
+  return result
+}
+
+export const headItems = (
+  localization: UI_I_Localization,
+  isEdit = false
+): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization, isEdit).forEach((item, i) => {
+    const col = isEdit && i === 1 ? 'value' : `col${i}`
+    result.push(
+      constructHeadItem(col, item[0], item[3], false, item[2], '', 'any')
+    )
+  })
+  return result
+}
+
+export const bodyItems = (
+  data: any[],
+  _localization: UI_I_Localization,
+  isEdit = false
+): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((item, key) => {
+    const editData = {
+      key: item.key,
+      type: item.type,
+      value: item.value,
+      validation: item.validation,
+      options: item.options,
+    }
+    const cols = [
+      {
+        key: 'col0',
+        text: item[tableItemKeys[0]],
+        id: key,
+        testId: `any-table-item-${key}`,
+      },
+      {
+        key: isEdit ? 'value' : 'col1',
+        text: item[tableItemKeys[1]],
+        id: key,
+        testId: `any-table-item-${key}`,
+        data: isEdit ? editData : null
+      }
+    ]
+    if (!isEdit) {
+      cols.push({
+        key: 'col2',
+        text: item[tableItemKeys[2]],
+        id: key,
+        testId: `any-table-item-${key}`,
+      })
+    }
+    bodyItems.push(cols)
+  })
+  return bodyItems
+}

package/components/common/configure/advancedSystemSettings/tableView/old/lib/config/tableKeys.ts

@@ -0,0 +1,9 @@
+import type {
+  UI_T_TableTuple
+} from "~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/types";
+
+export const tableItemKeys: UI_T_TableTuple = [
+  'key',
+  'value',
+  'summary'
+]

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

@@ -0,0 +1,5 @@
+export type UI_T_TableTuple = [
+  'key',
+  'value',
+  'summary',
+]

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

@@ -0,0 +1,5 @@
+<template>New</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,28 @@
+<template>
+  <common-headline :headline="props.title" class="items-center">
+    <template #action>
+      <button
+        class="btn btn-sm btn-secondary ng-star-inserted"
+        @click="emits('show-edit')"
+      >
+        {{ localization.common.edit }}...
+      </button>
+    </template>
+  </common-headline>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-edit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,28 @@
+<template>
+  <component
+    :is="currentComponent"
+    :title="localization.common.advancedSystemSettings"
+    @show-edit="emits('show-edit')"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const emits = defineEmits<{
+  (event: 'show-edit'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+</script>
+
+<style scoped lang="scss"></style>