bfg-common 1.6.95 → 1.6.97

package/components/common/configure/physicalAdapters/tableView/TableViewOld.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="data-table-view overflow-hidden">
+    <!--      v-model:column-keys="columnKeys"-->
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      :page-size="100"
+      :page="1"
+      class="data-table"
+      test-id="physical-adapters-table"
+      server-off
+      hide-page-size
+      hide-pagination
+      @filtering="onFiltering"
+    >
+      <template #icon="{ item }">
+        <span :class="['icon', item.data.iconClassName]"></span>
+        <span :title="item.text" class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+
+    <!--      v-model:selected-row="selectedAdapter"-->
+    <!--      v-model:page-size="paginationLocal.pageSize"-->
+    <!--      v-model:page="paginationLocal.page"-->
+    <!--      :total-items="props.totalItems"-->
+    <!--      :total-pages="props.totalPages"-->
+    <!--      :items-per-page="itemsPerPage"-->
+    <!--      :loading="loading"-->
+  </div>
+  <!--  <common-diagram-main-modals-remove-modal-->
+  <!--    v-if="isShowPortRemoveModal"-->
+  <!--    :id="vmKernelToAction?.sysx?.name || ''"-->
+  <!--    modal-name="port-remove-modal"-->
+  <!--    view-name="port-remove"-->
+  <!--    width="872px"-->
+  <!--    height="558px"-->
+  <!--    :title="localization.removeVMkernelAdapter"-->
+  <!--    :show="isShowPortRemoveModal"-->
+  <!--    :is-show-loader="isShowRemoveModalLoader"-->
+  <!--    @remove="onRemovePort"-->
+  <!--    @hide="onHidePortRemoveModal"-->
+  <!--  />-->
+  <!--  <common-diagram-main-modals-edit-settings-modal-->
+  <!--    v-if="isShowPortEditSettingsModal"-->
+  <!--    view-name="port-edit"-->
+  <!--    width="872px"-->
+  <!--    height="558px"-->
+  <!--    :show="isShowPortEditSettingsModal"-->
+  <!--    :title="portEditInitialData.portName || ''"-->
+  <!--    :initial-data="portEditInitialData"-->
+  <!--    :items="portEditSettingsTabs"-->
+  <!--    @send-edit-data="onSendEditData"-->
+  <!--    @change-edit-fields-data="onChangeEditFieldsData"-->
+  <!--    @hide="onHidePortEditSettingsModal"-->
+  <!--  />-->
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  // UI_I_ModalsInitialData,
+  // UI_I_EditFieldsData,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_BodyItem,
+  // UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+import * as physicalAdaptersTable from '~/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfig'
+import { constructPhysicalAdaptersTableFunc } from '~/components/common/configure/physicalAdapters/tableView/mappers/mappers'
+// import {
+//   // adapterViewSettingsModalTabsFunc,
+//   adapterViewSettingsFunc,
+// } from '~/components/common/pages/configure/networking/physicalAdapters/tableView/lib/config/settings'
+
+const props = defineProps<{
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = defineModel<UI_T_SelectedRow>()
+
+const networkTableData = computed<UI_I_PhysicalAdapter[]>(() => {
+  return constructPhysicalAdaptersTableFunc(
+    props.adapters?.items,
+    localization.value
+  )
+})
+
+// const selectedVMKernel = computed<UI_I_NetworkFull | null>(() =>
+//   typeof selectedRow.value === 'number'
+//     ? props.networkData[selectedRow.value]
+//     : null
+// )
+
+// const tabs = computed(() =>
+//   adapterViewSettingsModalTabsFunc(localization.value)
+// )
+// const viewSettingsFields = computed(
+//   () =>
+//     typeof selectedRow.value === 'number' &&
+//     adapterViewSettingsFunc(
+//       localization.value,
+//       props.adaptersData[selectedRow.value]
+//     )
+// )
+
+// const emits = defineEmits<{
+//   (event: 'update:selected', value: number | null): void
+// //   (event: 'pagination', value: any): void
+// //   (event: 'sort', str: string): void
+// }>()
+
+// const selectedAdapter = computed<number[] | null>({
+//   get() {
+//     return props.selected
+//   },
+//   set(value) {
+//     emits('update:selected', value)
+//   },
+// })
+
+const onFiltering = (e: [string, string][]): void => {
+  console.log('F I L T E R I N G . . .', e)
+}
+// const onSorting = (e: [number, boolean]): void => {
+//   const [column, status] = e
+//   const direction = status ? 'desc' : 'asc'
+//
+//   const sort = `${column}.${direction}`
+//
+//   emits('sort', sort)
+// }
+
+// const paginationLocal = ref<UI_I_Pagination>()
+// watch(
+//   () => props.pagination,
+//   (newValue) => {
+//     paginationLocal.value = newValue
+//   },
+//   { immediate: true }
+// )
+// watch(
+//   paginationLocal,
+//   (newValue) => {
+//     emits('pagination', newValue)
+//   },
+//   { deep: true, immediate: true }
+// )
+
+// const columnKeys = ref<UI_I_ColumnKey[]>(
+//   vmKernelAdaptersTable.columnKeys(localization.value)
+// )
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  physicalAdaptersTable.headItems(localization.value)
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => networkTableData.value,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+    bodyItems.value = physicalAdaptersTable.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+// const isShowPhysicalAdapterEditSettingsModal = ref<boolean>(false)
+// const onHidePhysicalAdapterEditSettingsModal = (): void => {
+//   isShowPhysicalAdapterEditSettingsModal.value = false
+// }
+
+// const editFieldsData = ref<UI_I_EditFieldsData>({})
+
+// const onSendEditData = (
+//   type: string,
+//   hideModal: () => void,
+//   name?: string
+// ): void => {
+//   emits('send-edit-data', type, editFieldsData.value, hideModal, name)
+// }
+
+// const onChangeEditFieldsData = (
+//   newEditFieldsData: UI_I_EditFieldsData
+// ): void => {
+//   editFieldsData.value = newEditFieldsData
+// }
+
+// const portEditSettingsTabs = computed(() =>
+//   portEditSettingsTabsFunc(localization.value)
+// )
+</script>
+
+<style scoped lang="scss">
+.data-table {
+  height: 100%;
+
+  &__action-icon {
+    width: 16px;
+    height: 16px;
+    padding-top: 3px;
+    cursor: pointer;
+    position: relative;
+    fill: var(--ellipsis-vertical-icon-color);
+  }
+  &__popover {
+  }
+}
+:deep(.datagrid) {
+  margin-top: 0;
+}
+.data-table-view {
+  height: inherit;
+  :deep(.data-table) {
+    height: inherit;
+    .datagrid-outer-wrapper {
+      height: inherit;
+    }
+    .active .double-arrow {
+      margin: 2px 0;
+      height: 0.6rem;
+      transform: rotate(90deg);
+      width: 0.6rem;
+      fill: var(--modal-bg-color);
+    }
+    .double-arrow {
+      margin: 2px 0;
+      height: 0.6rem;
+      width: 0.6rem;
+      transform: rotate(90deg);
+      fill: var(--global-font-color);
+
+      &.arrow-selected {
+        fill: white;
+      }
+    }
+  }
+}
+.hiddenInfo {
+  &__head {
+    font-size: 0.8rem;
+    color: var(--global-font-color2) !important;
+    line-height: 1.6rem;
+  }
+  &__body {
+    div {
+      color: var(--global-font-color2) !important;
+      line-height: 1.2rem;
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
+.signpost {
+  :deep(h3) {
+    font-size: 1rem;
+    color: var(--global-font-color);
+    line-height: 1.7rem;
+  }
+  div {
+    line-height: 1.2rem;
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+.icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+}
+.vertical-divider {
+  width: 1px;
+  height: 22px;
+  background: #bbb;
+  margin: 2px 2px 0 -5px;
+}
+
+.action-container {
+  position: absolute;
+  top: -33px;
+  left: 5px;
+  background: white;
+  border: 1px solid silver;
+  padding: 5px 6px;
+  border-radius: 3px;
+}
+.action-wrap {
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: white;
+    transform: rotate(45deg);
+    left: -11px;
+    bottom: calc(50% - 4px);
+    border-left: 0.5px solid silver;
+    border-bottom: 0.5px solid silver;
+    z-index: var(--z-dropdown);
+  }
+}
+.action {
+  border: none;
+  padding: 1px 20px;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  background: white;
+  color: #666666;
+
+  &:hover {
+    background: #ededed;
+  }
+}
+</style>

package/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfig.ts

@@ -0,0 +1,177 @@
+import type {
+  UI_I_HeadItem,
+  UI_I_ColumnKey,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import {
+  constructHeadItem,
+  constructColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
+import type { UI_I_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+import { physicalAdaptersTableItemsTuple } from '~/components/common/configure/physicalAdapters/tableView/lib/config/tableKeys'
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string, boolean][] => {
+  return [
+    [
+      localization.common.device,
+      true,
+      '110px',
+      physicalAdaptersTableItemsTuple[0],
+      true,
+    ],
+    [
+      localization.common.actualSpeed,
+      true,
+      '140px',
+      physicalAdaptersTableItemsTuple[1],
+      true,
+    ],
+    [
+      localization.common.configuredSpeed,
+      true,
+      '170px',
+      physicalAdaptersTableItemsTuple[2],
+      true,
+    ],
+    [
+      localization.common.switch,
+      true,
+      '120px',
+      physicalAdaptersTableItemsTuple[3],
+      true,
+    ],
+    [
+      localization.common.macAddress,
+      true,
+      '140px',
+      physicalAdaptersTableItemsTuple[4],
+      true,
+    ],
+    [
+      localization.common.observedIpRanges,
+      true,
+      '180px',
+      physicalAdaptersTableItemsTuple[5],
+      true,
+    ],
+    [
+      localization.common.wakeOnLanSupported,
+      true,
+      '200px',
+      physicalAdaptersTableItemsTuple[6],
+      true,
+    ],
+    [
+      localization.common.srIovStatus,
+      true,
+      '145px',
+      physicalAdaptersTableItemsTuple[7],
+      true,
+    ],
+    [
+      localization.common.srIovVfs,
+      true,
+      '130px',
+      physicalAdaptersTableItemsTuple[8],
+      true,
+    ],
+  ]
+}
+export const columnKeys = (
+  localization: UI_I_Localization
+): UI_I_ColumnKey[] => {
+  const result: UI_I_ColumnKey[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i}`
+    result.push(
+      constructColumnKey(col, item[0], item[1], `show-column-${item[3]}`)
+    )
+  })
+  return result
+}
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = `col${i}`
+    result.push(
+      constructHeadItem(
+        col,
+        item[0],
+        item[3],
+        item[4],
+        item[2],
+        undefined,
+        `show-column-${item[3]}`
+      )
+    )
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_PhysicalAdapter[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((physicalAdapter: UI_I_PhysicalAdapter, key) => {
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[0]],
+        data: { iconClassName: 'network-lib-ui-icon-physicalAdapter' },
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'col1',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[1]],
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'col2',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[2]],
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'icon',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[3]],
+        data: { iconClassName: 'network-lib-ui-icon-vswitch' },
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'col4',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[4]],
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'col5',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[5]],
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'col6',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[6]],
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'col7',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[7]],
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+      {
+        key: 'col8',
+        text: physicalAdapter[physicalAdaptersTableItemsTuple[8]],
+        id: key,
+        testId: `physical-adapters-table-${key}-row-item`,
+      },
+    ])
+  })
+  return bodyItems
+}

package/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfigNew.ts

@@ -0,0 +1,191 @@
+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_PhysicalAdapter } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+import { physicalAdaptersTableItemsTuple } from '~/components/common/configure/physicalAdapters/tableView/lib/config/tableKeys'
+
+export const getHeaderDataFunc = (
+    localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: physicalAdaptersTableItemsTuple[0],
+    text: localization.common[physicalAdaptersTableItemsTuple[0]],
+    isSortable: true,
+    sort: 'asc',
+    sortColumn: true,
+    width: '160px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col1',
+    colName: physicalAdaptersTableItemsTuple[1],
+    text: localization.common[physicalAdaptersTableItemsTuple[1]],
+    isSortable: true,
+    sort: 'asc',
+    width: '200px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col2',
+    colName: physicalAdaptersTableItemsTuple[2],
+    text: localization.common[physicalAdaptersTableItemsTuple[2]],
+    isSortable: true,
+    sort: 'asc',
+    width: '240px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col3',
+    colName: physicalAdaptersTableItemsTuple[3],
+    text: localization.common[physicalAdaptersTableItemsTuple[3]],
+    isSortable: true,
+    sort: 'asc',
+    width: '140px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col4',
+    colName: physicalAdaptersTableItemsTuple[4],
+    text: localization.common[physicalAdaptersTableItemsTuple[4]],
+    isSortable: true,
+    sort: 'asc',
+    width: '176px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col5',
+    colName: physicalAdaptersTableItemsTuple[5],
+    text: localization.common[physicalAdaptersTableItemsTuple[5]],
+    isSortable: true,
+    sort: 'asc',
+    width: '174px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col6',
+    colName: physicalAdaptersTableItemsTuple[6],
+    text: localization.common[physicalAdaptersTableItemsTuple[6]],
+    isSortable: true,
+    sort: 'asc',
+    width: '200px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col7',
+    colName: physicalAdaptersTableItemsTuple[7],
+    text: localization.common[physicalAdaptersTableItemsTuple[7]],
+    isSortable: true,
+    sort: 'asc',
+    width: '200px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col8',
+    colName: physicalAdaptersTableItemsTuple[8],
+    text: localization.common[physicalAdaptersTableItemsTuple[8]],
+    isSortable: true,
+    sort: 'asc',
+    width: '140px',
+    show: true,
+    filter: true,
+  },
+  {
+    col: 'col9',
+    colName: 'default-actions',
+    text: '',
+    show: true,
+  },
+]
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10, default: true },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
+  isSelectable: true,
+  isFocusable: false,
+  selectType: 'radio',
+  showPagination: true,
+  showPageInfo: true,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showColumnManager: true,
+  withActions: true,
+  inBlock: true,
+}
+
+export const getBodyDataFunc = (
+    bodyData: UI_I_PhysicalAdapter[],
+    selectedRow: number
+): UI_I_DataTableBody[] => {
+  return bodyData.map((adapter: UI_I_PhysicalAdapter, index: number) => {
+    return {
+      row: index,
+      isSelected: index === selectedRow,
+      data: [
+        {
+          col: 'col0',
+          key: 'icon',
+          text: adapter[physicalAdaptersTableItemsTuple[0]],
+          data: {
+            icon: 'diagram-physical-adapter',
+          },
+        },
+        {
+          col: 'col1',
+          text: adapter[physicalAdaptersTableItemsTuple[1]],
+        },
+        { col: 'col2', text: adapter[physicalAdaptersTableItemsTuple[2]] },
+        {
+          col: 'col3',
+          key: 'icon',
+          text: adapter[physicalAdaptersTableItemsTuple[3]],
+          data: {
+            icon: 'network-lib-ui-icon-vswitch',
+          },
+        },
+        { col: 'col4', text: adapter[physicalAdaptersTableItemsTuple[4]] },
+        { col: 'col5', text: adapter[physicalAdaptersTableItemsTuple[5]] },
+        { col: 'col6', text: adapter[physicalAdaptersTableItemsTuple[6]] },
+        {
+          col: 'col7',
+          key: 'icon',
+          text: adapter[physicalAdaptersTableItemsTuple[7]],
+          data: {
+            icon: 'pill',
+            value: adapter.srIovStatusValue,
+          },
+        },
+        { col: 'col8', text: adapter[physicalAdaptersTableItemsTuple[8]] },
+        {
+          col: 'default-actions',
+          key: 'default-actions',
+          text: '',
+          data: { id: index },
+        },
+      ],
+    }
+  })
+}
+
+export const skeletonData = {
+  columnsCount: 6,
+  headColumns: [{ index: 3, width: '100' }],
+  bodyColumns: [{ index: 3, width: '100' }],
+}