bfg-common 1.6.95 → 1.6.97

package/components/common/configure/physicalAdapters/modals/edit/EditOld.vue

@@ -0,0 +1,170 @@
+<template>
+  <atoms-modal
+    :show="true"
+    :title="localization.common.editSettings"
+    :second-title="props.selectedAdapter.name"
+    :loading="false"
+    width="580px"
+    test-id="edit-modal"
+    @hide="emits('hide')"
+    @submit="emits('send-edit-data')"
+  >
+    <template #modalBody>
+      <form>
+        <section class="form-block">
+          <div class="form-group">
+            <label for="config-speed">
+              {{ localization.common.configuredSpeedDuplex }}
+            </label>
+            <div class="select">
+              <select
+                id="config-speed"
+                v-model="configSpeed"
+                data-id="config-speed-select"
+              >
+                <option
+                  v-for="option in props.configuredSpeedOptions"
+                  :key="option.value"
+                  :value="option.value"
+                  :label="option.text"
+                >
+                  {{ option.text }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </section>
+        <section v-if="props.hasSpeed" class="form-block">
+          <label>{{ localization.common.srIov }}</label>
+          <span>
+            {{ localization.common.srIovDescription }}
+          </span>
+          <div class="form-group">
+            <label for="sriov-status" class="form-group-subtitle">
+              {{ localization.common.status }}
+            </label>
+            <div class="select">
+              <select
+                id="sriov-status"
+                v-model="sriovStatus"
+                data-id="sriov-status-select"
+                class="status-input"
+              >
+                <option
+                  v-for="srOption in props.srOptions"
+                  :value="srOption.value"
+                  :label="srOption.text"
+                >
+                  {{ srOption.text }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="number-virtual-functions" class="form-group-subtitle">
+              {{ localization.inventoryConfigure.numberOfVirtualFunctions }}
+            </label>
+
+            <input
+              id="number-virtual-functions"
+              v-model.number="numberOfFunctions"
+              :class="[
+                'functions-input',
+                {
+                  disabled: !sriovStatus,
+                },
+              ]"
+              data-id="number-virtual-functions-input"
+              type="number"
+            />
+          </div>
+          <span v-if="hasChange" class="flex">
+            <span class="semi-circle-arrow">
+              <atoms-the-icon2 name="semi-circle-arrow" />
+            </span>
+            <span class="icon-text">
+              {{ localization.common.changesNotEffectUntilRestart }}
+            </span>
+          </span>
+        </section>
+      </form>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_ConfiguredSpeedOption,
+  UI_I_SrOption,
+} from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
+
+const props = defineProps<{
+  hasSpeed: boolean
+  selectedAdapter: UI_I_SwitchAdapterItem | null
+  configuredSpeedOptions: UI_I_ConfiguredSpeedOption
+  srOptions: UI_I_SrOption
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'send-edit-data'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const configSpeed = defineModel<string>('config-speed')
+const sriovStatus = defineModel<boolean>('status')
+const numberOfFunctions = defineModel<number>('number-of-functions')
+
+const initialValue = ref<string>('')
+
+const hasChange = computed<boolean>(
+  () =>
+    JSON.stringify({
+      status: sriovStatus.value,
+      numberOfFunctions: numberOfFunctions.value,
+    }) !== initialValue.value
+)
+
+onMounted(() => {
+  initialValue.value = JSON.stringify({
+    status: props.status,
+    numberOfFunctions: props.numberOfFunctions,
+  })
+})
+</script>
+
+<style scoped lang="scss">
+.form-group {
+  .functions-input,
+  .status-input {
+    width: 83px;
+
+    &.disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+
+  &-subtitle {
+    white-space: nowrap;
+  }
+}
+
+.semi-circle-arrow {
+  display: inline-block;
+  vertical-align: middle;
+  margin: -3px 7px 0 4px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.icon-text {
+  line-height: 10px;
+}
+</style>

package/components/common/configure/physicalAdapters/modals/edit/lib/config/config.ts

@@ -0,0 +1,59 @@
+import type { UI_I_OptionItem } from '~/node_modules/bfg-common/components/atoms/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_ConfiguredSpeedOption,
+  UI_I_SrOption,
+} from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
+
+export const configuredSpeedOptionsFunc = (
+  localization: UI_I_Localization,
+  auto: boolean
+): (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[] => {
+  return auto
+    ? [
+        {
+          value: '10000full',
+          text: `10000 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+      ]
+    : [
+        {
+          value: '1000full',
+          text: `1000 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+        {
+          value: '100half',
+          text: `100 ${localization.common.mbits}, ${localization.common.halfDuplex}`,
+        },
+        {
+          value: '100full',
+          text: `100 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+        {
+          value: '10full',
+          text: `10 ${localization.common.mbits}, ${localization.common.halfDuplex}`,
+        },
+        {
+          value: '10full',
+          text: `10 ${localization.common.mbits}, ${localization.common.fullDuplex}`,
+        },
+        {
+          value: 'auto',
+          text: localization.common.autoNegotiate,
+        },
+      ]
+}
+
+export const srOptionsFunc = (
+  localization: UI_I_Localization,
+  isNewView = false
+): (UI_I_SrOption | UI_I_OptionItem)[] => [
+  {
+    value: isNewView ? '0' : false,
+    text: localization.common.disabled,
+  },
+  {
+    value: isNewView ? '1' : true,
+    text: localization.common.enabled,
+  },
+]

package/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces.ts

@@ -0,0 +1,17 @@
+export interface UI_I_ConfiguredSpeedOption {
+  value: string
+  text: string
+  status?: boolean
+  number?: number
+  selected?: boolean
+}
+
+export interface UI_I_SrOption {
+  value: string
+  text: string
+}
+
+export interface UI_I_SrOptionError {
+  alert: string
+  field: string
+}

package/components/common/configure/physicalAdapters/modals/edit/lib/validations/validations.ts

@@ -0,0 +1,19 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const vfNumberValidationFunc = (
+  vfNumber: number,
+  localization: UI_I_Localization,
+  isAlert = false
+): string => {
+  if (vfNumber !== 0 && !vfNumber) {
+    return isAlert
+      ? localization.inventoryConfigure.vfRequiredMessage
+      : localization.common.fieldRequired
+  } else if (vfNumber < 1 || vfNumber > 63) {
+    return isAlert
+      ? localization.inventoryConfigure.vfNotNegativeMessage
+      : localization.inventoryConfigure.vfNotNegativeMessage
+  }
+
+  return ''
+}

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

@@ -0,0 +1,43 @@
+<template>
+  <component
+    :is="currentComponent"
+    v-model="selectedRow"
+    :adapters="props.adapters"
+    :is-loading="props.isLoading"
+    :has-selected-adapter="props.hasSelectedAdapter"
+    @add="emits('add')"
+    @refresh="emits('refresh')"
+    @edit="emits('edit', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ItemsWithTotalCounts } from '~/lib/models/interfaces'
+import type { UI_I_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+
+const props = defineProps<{
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  isLoading: boolean
+  hasSelectedAdapter: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'add'): void
+  (event: 'refresh'): void
+  (event: 'edit', id?: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./TableViewNew.vue'))
+    : defineAsyncComponent(() => import('./TableViewOld.vue'))
+)
+
+const selectedRow = defineModel<UI_T_SelectedRow>()
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,345 @@
+<template>
+  <div class="physical-adapters-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :total-items="props.adapters.total_items"
+      :total-pages="props.adapters.total_pages"
+      :texts="texts"
+      :skeleton="skeletonDataLocal"
+      :actions="actions"
+      :loading="props.isLoading"
+      test-id="physical-adapters-table"
+      class="physical-adapters-tables"
+      server-off
+      @action="onSelectAction"
+      @select-row="onSelectRow"
+    >
+      <template #insteadOfTitleActions>
+        <div class="title-actions">
+          <ui-button
+            test-id="refresh-physical-adapters-btn"
+            class="refresh-btn"
+            size="md"
+            variant="outline"
+            @click="emits('refresh')"
+          >
+            <template #icon> <ui-icon name="reset" width="24" /> </template>
+            {{ localization.common.refresh }}
+          </ui-button>
+          <ui-button
+            v-permission="
+              'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
+            "
+            test-id="add-physical-adapters-btn"
+            class="add-btn"
+            size="md"
+            @click="emits('add')"
+          >
+            <template #icon> <ui-icon name="plus" width="24" /> </template>
+            {{ localization.common.addNetworkingWithDots }}
+          </ui-button>
+        </div>
+      </template>
+
+      <template #icon="{ item }">
+        <div v-if="item.data.icon !== 'pill'" class="cell">
+          <div
+            :class="[
+              'cell-icon',
+              {
+                'cell-icon-device': item.col === 'col0',
+              },
+            ]"
+          >
+            <ui-icon
+              v-if="item.col === 'col0'"
+              :name="item.data.icon"
+              width="18"
+              height="18"
+            />
+            <span v-else class="network-lib-ui-icon-vswitch"></span>
+          </div>
+          <span class="cell-text">
+            {{ item.text }}
+          </span>
+        </div>
+        <div v-else>
+          <ui-status-pill
+            :type="item.data.value ? 'success' : 'error'"
+            :text="item.text"
+            size="md"
+          />
+        </div>
+      </template>
+
+      <template #default-actions="{ item }">
+        <div class="actions flex w-full">
+          <ui-tooltip
+            :id="`host-item-${item.data.id}-action`"
+            :test-id="`host-item-${item.data.id}-action-tooltip`"
+            size="md"
+            position="bottom"
+            position-by-tooltip="center"
+            show-type="variant-1"
+            timing="660"
+          >
+            <template #target>
+              <ui-button
+                :id="`host-item-${item.data.id}-action`"
+                :test-id="`host-item-${item.data.id}-action`"
+                variant="text"
+                is-without-height
+                is-without-sizes
+                @click.stop="onShowEditModal(item.data.id)"
+              >
+                <span class="action-icon">
+                  <ui-icon name="edit" width="20" height="20" />
+                </span>
+              </ui-button>
+            </template>
+            <template #content>
+              <div class="tooltip-text">
+                {{ localization.common.edit }}
+              </div>
+            </template>
+          </ui-tooltip>
+        </div>
+      </template>
+
+      <template #skeleton-header>
+        <div class="skeleton-header">
+          <div class="left-skeleton">
+            <ui-skeleton-item width="80" height="20" />
+          </div>
+          <div class="right-skeleton">
+            <ui-skeleton-item width="112" height="36" border-radius="8" />
+            <ui-skeleton-item width="160" height="36" border-radius="8" />
+          </div>
+        </div>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+  UI_I_DataTableSkeleton,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_ButtonsGroup } from '~/node_modules/bfg-uikit/components/ui/button/group/lib/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type { UI_I_SwitchAdapterItem } 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 { 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 {
+  getBodyDataFunc,
+  getHeaderDataFunc,
+  options,
+  skeletonData,
+} from '~/components/common/configure/physicalAdapters/tableView/lib/config/physicalAdaptersTableConfigNew'
+import { constructPhysicalAdaptersTableFunc } from '~/components/common/configure/physicalAdapters/tableView/mappers/mappers'
+
+const props = defineProps<{
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  isLoading: boolean
+  hasSelectedAdapter: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'add'): void
+  (event: 'refresh'): void
+  (event: 'edit', id?: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const actions = computed<UI_I_ButtonsGroup>(() => [
+  {
+    text: localization.value.common.edit,
+    value: 'edit',
+    testId: 'edit-physical-adapted',
+    id: 'edit-physical-adapted',
+    iconName: 'edit',
+    disabled: !props.hasSelectedAdapter,
+    development: true,
+  },
+])
+
+const onSelectAction = (action: string): void => {
+  emits(action)
+}
+
+const selectedRow = defineModel<UI_T_SelectedRow>()
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  if (typeof value[0].row !== 'number') return
+  selectedRow.value = value[0].row
+}
+
+const networkTableData = computed<UI_I_PhysicalAdapter[]>(() =>
+  constructPhysicalAdaptersTableFunc(props.adapters.items, localization.value)
+)
+
+const texts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'physical-adapters-table',
+  selectedRows: [],
+  isAllSelected: false,
+  header: headItems.value,
+  body: bodyItems.value,
+}))
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+
+watch(
+  () => networkTableData.value,
+  (newValue: UI_I_PhysicalAdapter[]) => {
+    console.log(!newValue?.length)
+    if (!newValue?.length) {
+      bodyItems.value = []
+    } else {
+      bodyItems.value = getBodyDataFunc(newValue, selectedRow.value)
+    }
+  },
+  { deep: true }
+)
+
+const skeletonDataLocal = ref<UI_I_DataTableSkeleton>(skeletonData)
+
+const actionsIsShow = ref<string>()
+
+const onShowEditModal = (id: string): void => {
+  emits('edit', id)
+}
+</script>
+
+<style scoped lang="scss">
+.physical-adapters-table {
+  height: calc(100% - 52px);
+}
+
+:deep(.table-container) {
+  height: 100%;
+  grid-template-rows: min-content auto min-content;
+
+  .title-container {
+    margin-right: 16px;
+  }
+
+  &.full-width-search {
+    grid-template-rows: min-content min-content auto min-content;
+  }
+}
+
+.actions {
+  justify-content: flex-end;
+  padding-right: 4px;
+
+  .action-icon {
+    height: 20px;
+    width: 20px;
+    color: var(--actions-icon-color);
+
+    &:hover {
+      color: var(--actions-icon-icative-color);
+    }
+  }
+}
+
+.title-actions {
+  display: flex;
+  column-gap: 16px;
+
+  :deep(.ui-btn) {
+    white-space: nowrap;
+  }
+}
+
+:deep(.ui-button-group) {
+  padding-left: 0;
+}
+
+:deep(.table-fixed-height) {
+  all: unset;
+  .table-fixed-full-height {
+    all: unset;
+  }
+}
+
+:deep(.data-table-skeleton) {
+  height: 100%;
+  grid-template-rows: min-content auto min-content;
+  &.full-width-search {
+    grid-template-rows: min-content min-content auto min-content;
+  }
+
+  .body.with-actions {
+    height: calc(100% - 92px);
+  }
+}
+
+.skeleton-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .right-skeleton {
+    display: flex;
+    column-gap: 16px;
+  }
+}
+
+.cell {
+  display: flex;
+  column-gap: 4px;
+
+  &-icon {
+    height: 18px;
+
+    &.cell-icon-device {
+      color: var(--text-green);
+    }
+  }
+  &-text {
+    line-height: 18px;
+  }
+}
+
+:deep(.status-container) {
+  span:not(.icon-container) {
+    white-space: nowrap;
+  }
+}
+
+:deep(.ui-button-group-dots-icon) {
+  padding-left: 0;
+}
+</style>