bfg-common 1.6.84 → 1.6.86

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

@@ -0,0 +1,427 @@
+<template>
+  <div class="data-table-view">
+    <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 h-full"
+      type="any"
+      test-id="vm-kernel-adapters-table"
+      with-info
+      server-off
+      hide-page-size
+      hide-pagination
+      @filtering="onFiltering"
+    >
+      <template #type="{ item }">
+        <div class="data-table__action-icon">
+          <atoms-popover
+            :test-id="`${item[1].text}-${item[2].text}`"
+            @click="onShowTooltipToRemove(item)"
+          >
+            <template #elem>
+              <atoms-the-icon name="ellipsis-vertical" />
+            </template>
+            <template #content>
+              <div v-if="showTooltip && item[0].id === selectedGroupMember.id">
+                <div class="action-container">
+                  <div class="action-wrap relative">
+                    <button
+                      :data-id="`${item[1].text}-${item[2].text}-edit-button`"
+                      class="action"
+                      @click="onShowPortEditSettingsModal"
+                    >
+                      {{ localization.common.edit }}
+                    </button>
+                    <button
+                      :data-id="`${item[1].text}-${item[2].text}-remove-button`"
+                      class="action"
+                      @click="onShowRemoveModal"
+                    >
+                      {{ localization.common.remove }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </atoms-popover>
+        </div>
+      </template>
+
+      <template #icon="{ item }">
+        <span :class="['icon', item.data.iconClassName]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+
+      <template #hiddenInfo="{ item }">
+        <h3 class="hiddenInfo__head">
+          {{ localization.common.vmKernelNetworkAdapter }}: {{ item[1].text }}
+        </h3>
+        <div class="hiddenInfo__body">
+          <common-diagram-main-modals-view-settings-info
+            :selected-tab="1"
+            :modal-tabs="tabs"
+            :full-mode="false"
+            :view-settings-fields="viewSettingsFields"
+            height="10px"
+            show
+            with-collapse
+          />
+        </div>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+  <common-diagram-main-modals-remove-modal
+    v-if="isShowPortRemoveModal"
+    :id="vmKernelToAction?.sysx?.id || ''"
+    :title="localization.common.removeVMkernelAdapter"
+    :show="isShowPortRemoveModal"
+    :is-show-loader="props.isRemoveModalLoading"
+    modal-name="port-remove-modal"
+    view-name="port-remove"
+    width="872px"
+    height="558px"
+    type="port"
+    @remove="onRemove"
+    @hide="onHideRemoveModal"
+  />
+  <common-diagram-main-modals-edit-settings-modal
+    v-if="isShowPortEditSettingsModal"
+    :show="isShowPortEditSettingsModal"
+    :title="portEditInitialData.portName || ''"
+    :initial-data="portEditInitialData"
+    :items="portEditSettingsTabs"
+    :is-dark-mode="props.isDarkMode"
+    :is-edit-modal-loading="props.isEditModalLoading"
+    view-name="port-edit"
+    width="872px"
+    height="558px"
+    @send-edit-data="onSendEditData"
+    @change-edit-fields-data="onChangeEditFieldsData"
+    @hide="onHidePortEditSettingsModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Network,
+  UI_I_ModalsInitialData,
+  UI_I_EditFieldsData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_BodyItem,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { I_VmKernelAdapter } from '~/components/common/configure/vmkernelAdapters/tableView/lib/models/interfaces'
+import * as vmKernelAdaptersTable from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/vmKernelAdaptersTableConfig'
+import { constructNetworkTableFunc } from '~/components/common/configure/vmkernelAdapters/tableView/mappers/mappers'
+import {
+  portViewSettingsModalTabsFunc,
+  portViewSettingsFunc,
+  portEditSettingsTabsFunc,
+} from '~/components/common/configure/vmkernelAdapters/tableView/lib/config/settings'
+
+const props = withDefaults(
+  defineProps<{
+    networkData: UI_I_Network[]
+    isDarkMode: boolean
+    isRemoveModalLoading?: boolean
+    isEditModalLoading?: boolean
+  }>(),
+  {
+    isRemoveModalLoading: false,
+    isEditModalLoading: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'remove', id: string, type: string, hideModal: () => void): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    data: UI_I_EditFieldsData,
+    hideModal: () => void,
+    name?: string
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<number>()
+const actionOnRow = ref<string>('')
+
+const portEditInitialData = ref<UI_I_ModalsInitialData>({})
+
+const networkTableData = computed<I_VmKernelAdapter[]>(() => {
+  return constructNetworkTableFunc(props.networkData, localization.value)
+})
+
+const selectedGroupMember = ref<UI_I_BodyItem | null>(null)
+const showTooltip = ref<boolean>(false)
+const onShowTooltipToRemove = (group: UI_I_BodyItem[]): void => {
+  selectedGroupMember.value = group[0]
+  showTooltip.value = true
+  actionOnRow.value = group[1].text as string
+}
+
+const vmKernelToAction = computed<UI_I_Network | undefined>(() =>
+  props.networkData.find(
+    (network: UI_I_Network) => network.sysx?.id === actionOnRow.value
+  )
+)
+
+const onRemove = (id: string, type: string): void => {
+  emits('remove', id, type, onHideRemoveModal)
+}
+
+const tabs = computed(() => portViewSettingsModalTabsFunc(localization.value))
+const viewSettingsFields = computed(
+  () =>
+    typeof selectedRow.value === 'number' &&
+    portViewSettingsFunc(
+      localization.value,
+      props.networkData[selectedRow.value]
+    )
+)
+
+const hideActionsPopover = (): void => {
+  showTooltip.value = false
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    window.addEventListener('click', hideActionsPopover)
+  })
+})
+onUnmounted(() => {
+  window.removeEventListener('click', hideActionsPopover)
+})
+
+const onFiltering = (e: [string, string][]): void => {
+  console.log('F I L T E R I N G . . .', e)
+}
+
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  vmKernelAdaptersTable.headItems(localization.value)
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => networkTableData.value,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+    bodyItems.value = vmKernelAdaptersTable.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowPortRemoveModal = ref<boolean>(false)
+
+const onShowRemoveModal = (): void => {
+  isShowPortRemoveModal.value = true
+}
+const onHideRemoveModal = (): void => {
+  isShowPortRemoveModal.value = false
+}
+
+const isShowPortEditSettingsModal = ref<boolean>(false)
+const onShowPortEditSettingsModal = (): void => {
+  if (vmKernelToAction.value) {
+    portEditInitialData.value = {
+      portName: vmKernelToAction.value?.sysx?.id,
+      networkLabel: vmKernelToAction.value?.title,
+      vlanId: vmKernelToAction.value?.vlanId,
+      tcpIp: vmKernelToAction.value?.sysx?.tcp_stack,
+      mtu: vmKernelToAction.value?.sysx?.mtu,
+      services: {
+        vMotion: vmKernelToAction.value?.sysx?.services.VMotion,
+        provisioning: vmKernelToAction.value?.sysx?.services.Provisioning,
+        faultToleranceLogging:
+          vmKernelToAction.value?.sysx?.services.FaultToleranceLogging,
+        management: vmKernelToAction.value?.sysx?.services.Management,
+        replication: vmKernelToAction.value?.sysx?.services.VSphereReplication,
+        replicationNFC:
+          vmKernelToAction.value?.sysx?.services.VSphereReplicationNFC,
+        vSAN: vmKernelToAction.value?.sysx?.services.VSAN,
+        backupNFC: vmKernelToAction.value?.sysx?.services.VSphereBackupNFC,
+        nVMeOverTCP: vmKernelToAction.value?.sysx?.services.NVMeOverTCP,
+        nVMeOverRDMA: vmKernelToAction.value?.sysx?.services.NVMeOverRDMA,
+      },
+      tcpConfig: {
+        ipv4Settings: vmKernelToAction.value?.sysx?.ipv4_settings.auto
+          ? '0'
+          : '1',
+        ipv4Address: vmKernelToAction.value?.sysx?.ipv4_settings.ipv4,
+        subnetMask: vmKernelToAction.value?.sysx?.ipv4_settings.mask,
+        defaultGateway: {
+          checked: vmKernelToAction.value?.sysx?.ipv4_settings.gateway_override,
+          value: vmKernelToAction.value?.sysx?.ipv4_settings.gateway,
+        },
+      },
+    }
+    isShowPortEditSettingsModal.value = true
+  }
+}
+const onHidePortEditSettingsModal = (): void => {
+  isShowPortEditSettingsModal.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<any>(() =>
+  portEditSettingsTabsFunc(localization.value)
+)
+</script>
+
+<style scoped lang="scss">
+.data-table {
+  &__action-icon {
+    width: 16px;
+    height: 16px;
+    padding-top: 3px;
+    cursor: pointer;
+    position: relative;
+    fill: var(--ellipsis-vertical-icon-color);
+  }
+}
+:deep(.datagrid) {
+  margin-top: 0;
+}
+.data-table-view {
+  height: 100%;
+  overflow: hidden;
+
+  :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: var(--block-view-bg-color2);
+  border: 1px solid var(--block-border-color);
+  padding: 5px 6px;
+  border-radius: 3px;
+}
+.action-wrap {
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--block-view-bg-color2);
+    transform: rotate(45deg);
+    left: -11px;
+    bottom: calc(50% - 4px);
+    border-left: 0.5px solid var(--block-border-color);
+    border-bottom: 0.5px solid var(--block-border-color);
+    z-index: var(--z-dropdown);
+  }
+}
+.action {
+  border: none;
+  padding: 1px 20px;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  background: var(--block-view-bg-color2);
+  color: var(--global-font-color3);
+
+  &:hover {
+    background: var(--vertical-nav-hover-bg-color);
+  }
+}
+
+:deep(.table-fixed-height) {
+  all: unset;
+  .table-fixed-full-height {
+    all: unset;
+  }
+}
+</style>