bfg-common 1.6.84 → 1.6.86

package/components/common/adapterManager/ui/table/header/HeaderNew.vue

@@ -1,81 +1,81 @@
-<template>
-  <ui-line v-if="!isActive" margin="8px 0" />
-  <div
-    :class="[
-      'manager-header',
-      {
-        'is-active': isActive,
-      },
-    ]"
-  >
-    <span class="manager-header-title">
-      {{ props.title }}
-    </span>
-    <span
-      v-if="isActive && props.fullMode"
-      class="manager-header-add"
-      @click="onShowAddAdapterModal"
-    >
-      <ui-icon name="plus" width="18" height="18" />
-    </span>
-    <span v-else class="empty-block"></span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_HeaderTitle } from '~/components/common/adapterManager/ui/table/lib/models/types'
-
-const props = defineProps<{
-  title: string
-  id: UI_T_HeaderTitle
-  fullMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'show-add-adapter-modal'): void
-}>()
-
-const isActive = computed<boolean>(() => props.id === 'header-active')
-
-const onShowAddAdapterModal = (): void => {
-  emits('show-add-adapter-modal')
-}
-</script>
-
-<style scoped lang="scss">
-.manager-header {
-  min-height: 20px;
-  display: flex;
-  justify-content: space-between;
-  column-gap: 8px;
-
-  &-title {
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 16px;
-    letter-spacing: 0;
-    vertical-align: middle;
-    margin-top: 2px;
-    color: var(--table-text-first);
-    word-wrap: break-word;
-    user-select: none;
-  }
-
-  &-add {
-    display: block;
-    width: 18px;
-    height: 18px;
-    margin-top: 1px;
-    color: var(--table-text-first);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--table-text-hover);
-    }
-  }
-  .empty-block {
-    width: 18px;
-    height: 18px;
-  }
-}
-</style>
+<template>
+  <ui-line v-if="!isActive" margin="8px 0" />
+  <div
+    :class="[
+      'manager-header',
+      {
+        'is-active': isActive,
+      },
+    ]"
+  >
+    <span class="manager-header-title">
+      {{ props.title }}
+    </span>
+    <span
+      v-if="isActive && props.fullMode"
+      class="manager-header-add"
+      @click="onShowAddAdapterModal"
+    >
+      <ui-icon name="plus" width="18" height="18" />
+    </span>
+    <span v-else class="empty-block"></span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_HeaderTitle } from '~/components/common/adapterManager/ui/table/lib/models/types'
+
+const props = defineProps<{
+  title: string
+  id: UI_T_HeaderTitle
+  fullMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-add-adapter-modal'): void
+}>()
+
+const isActive = computed<boolean>(() => props.id === 'header-active')
+
+const onShowAddAdapterModal = (): void => {
+  emits('show-add-adapter-modal')
+}
+</script>
+
+<style scoped lang="scss">
+.manager-header {
+  min-height: 20px;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 8px;
+
+  &-title {
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: 0;
+    vertical-align: middle;
+    margin-top: 2px;
+    color: var(--table-text-first);
+    word-wrap: break-word;
+    user-select: none;
+  }
+
+  &-add {
+    display: block;
+    width: 18px;
+    height: 18px;
+    margin-top: 1px;
+    color: var(--table-text-first);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--table-text-hover);
+    }
+  }
+  .empty-block {
+    width: 18px;
+    height: 18px;
+  }
+}
+</style>

package/components/common/adapterManager/ui/table/header/HeaderOld.vue

@@ -1,79 +1,79 @@
-<template>
-  <tr
-    :class="{
-      'k-state-selected': props.isSelected,
-    }"
-    :data-id="props.testId"
-    @click="onSelectAdapter"
-  >
-    <td>
-      <span class="assigned-pnic-sections">
-        {{ props.title }}
-      </span>
-    </td>
-  </tr>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  isSelected: boolean
-  title: string
-  testId: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-header', value: string): void
-}>()
-
-const onSelectAdapter = (): void => emits('select-header')
-</script>
-
-<style scoped lang="scss">
-tr {
-  background-color: #fff;
-  height: 24px;
-  color: #565656;
-  cursor: default;
-  user-select: none;
-
-  &.k-state-selected {
-    background-color: #29414e;
-    color: #ffffff;
-    border-bottom: 1px solid;
-    border-bottom-color: transparent;
-  }
-
-  &:not(.k-state-selected):hover {
-    background-color: #e8e8e8;
-    color: #454545;
-
-    td {
-      border-bottom: 1px solid #666666;
-    }
-  }
-
-  td {
-    border-width: 0 0 1px;
-    border-color: #ddd;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 24px;
-    padding: 0 12px;
-    border-style: solid;
-
-    * {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  span {
-    //TODO set font size to 13px when will add font
-    //font-family: ProximaNova;
-    font-size: 95%;
-    font-weight: 700;
-    margin: 0 3px;
-  }
-}
-</style>
+<template>
+  <tr
+    :class="{
+      'k-state-selected': props.isSelected,
+    }"
+    :data-id="props.testId"
+    @click="onSelectAdapter"
+  >
+    <td>
+      <span class="assigned-pnic-sections">
+        {{ props.title }}
+      </span>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  isSelected: boolean
+  title: string
+  testId: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-header', value: string): void
+}>()
+
+const onSelectAdapter = (): void => emits('select-header')
+</script>
+
+<style scoped lang="scss">
+tr {
+  background-color: #fff;
+  height: 24px;
+  color: #565656;
+  cursor: default;
+  user-select: none;
+
+  &.k-state-selected {
+    background-color: #29414e;
+    color: #ffffff;
+    border-bottom: 1px solid;
+    border-bottom-color: transparent;
+  }
+
+  &:not(.k-state-selected):hover {
+    background-color: #e8e8e8;
+    color: #454545;
+
+    td {
+      border-bottom: 1px solid #666666;
+    }
+  }
+
+  td {
+    border-width: 0 0 1px;
+    border-color: #ddd;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 12px;
+    border-style: solid;
+
+    * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  span {
+    //TODO set font size to 13px when will add font
+    //font-family: ProximaNova;
+    font-size: 95%;
+    font-weight: 700;
+    margin: 0 3px;
+  }
+}
+</style>

package/components/common/adapterManager/ui/table/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_HeaderTitle = 'header-active' | 'header-stand-by' | 'header-unused'
+export type UI_T_HeaderTitle = 'header-active' | 'header-stand-by' | 'header-unused'

package/components/common/configure/vmkernelAdapters/VmkernelAdapters.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="height-fix flex flex-col h-full">
+    <common-headline
+      :headline="localization.common.vMkernelAdapters"
+      class="virtual-switches__headline"
+    />
+    <div v-show="!props.isLoading" style="height: calc(100% - 78px)">
+      <div class="main-actions">
+        <button
+          id="add-virtual-switch-button"
+          v-permission="
+            'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
+          "
+          data-id="add-virtual-switch-button"
+          type="button"
+          class="btn btn-sm"
+          @click="emits('show-add-networking-modal')"
+        >
+          {{ localization.common.addNetworkingWithDots }}
+        </button>
+        <button
+          id="refresh-virtual-switch-button"
+          data-id="refresh-virtual-switch-button"
+          type="button"
+          class="btn btn-sm"
+          @click="emits('global-refresh')"
+        >
+          {{ localization.common.refresh }}
+        </button>
+      </div>
+      <common-configure-vmkernel-adapters-table-view
+        :network-data="props.networkData"
+        :is-dark-mode="props.isDarkMode"
+        :is-remove-modal-loading="props.isRemoveModalLoading"
+        :is-edit-modal-loading="props.isEditModalLoading"
+        @send-edit-data="onSendEditData"
+        @remove="onRemove"
+      />
+      <common-wizards-network-add
+        v-if="props.isShowAddNetworkingModal"
+        :show="props.isShowAddNetworkingModal"
+        :adapters="props.adapters"
+        :standard-switches-initial="props.standardSwitches"
+        :free-adapters="props.freeAdapters"
+        :is-dark-mode="props.isDarkMode"
+        :tcp-stacks="props.tcpStacks"
+        :is-networking-loading="props.isNetworkingLoading"
+        :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+        :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
+        :diagrams-data="props.diagramData"
+        :host-name="props.hostName"
+        project="sphere"
+        @check-network-label="onCheckNetworkLabel"
+        @get-existing-standard-switches="
+          emits('get-existing-standard-switches')
+        "
+        @get-tcp-stacks="emits('get-tcp-stacks')"
+        @get-free-adapters="onGetFreeAdapters"
+        @send-add-networking-data="onSendNetworkData"
+        @add-networking-data-validate="onValidateBeforeSending"
+        @hide="emits('hide-add-networking-modal')"
+      />
+    </div>
+    <atoms-loader
+      v-show="props.isLoading"
+      test-id="vmkernel-adapters-spinner"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
+  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  UI_I_AddNetworkingFourthOrFifthSchemeDataSend,
+  UI_I_Switch,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type {
+  UI_I_Network,
+  UI_I_Adapter,
+  UI_I_SwitchAdapterItem,
+  UI_I_EditFieldsData,
+  UI_I_DiagramData,
+  API_UI_I_SwitchItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    isLoading: boolean
+    isDarkMode: boolean
+    networkData: UI_I_Network[]
+    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    diagramData: UI_I_DiagramData[]
+    standardSwitches: UI_I_Switch[]
+    tcpStacks: UI_I_TCPStack[]
+    freeAdapters: UI_I_Adapter[]
+    project?: UI_T_Project
+    isRemoveModalLoading: boolean
+    isNetworkingLoading: boolean
+    isGetExistingSwitchesLoading: boolean
+    isGetTcpStackLoading: boolean
+    isEditModalLoading: boolean
+    isShowAddNetworkingModal: boolean
+    hostName?: string
+  }>(),
+  {
+    hostName: '',
+    project: 'procurator',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'global-refresh'): void
+  (event: 'remove', id: string, type: string, hideModal: () => void): void
+  (event: 'show-add-networking-modal'): void
+  (event: 'hide-add-networking-modal'): void
+  (event: 'get-existing-standard-switches'): void
+  (
+    event: 'check-network-label',
+    label: string,
+    sendMessage: (message: string) => void
+  ): void
+  (event: 'get-free-adapters', showModal: () => void): void
+  (
+    event: 'send-network-data',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    hideModal: () => void
+  ): void
+  (
+    event: 'add-networking-data-validate',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+  ): void
+  (event: 'get-tcp-stacks'): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    editFieldsData: UI_I_EditFieldsData,
+    hideModal: () => void,
+    id: string
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onRemove = (id: string, type: string, hideModal: () => void): void => {
+  emits('remove', id, type, hideModal)
+}
+
+const onCheckNetworkLabel = (
+  label: string,
+  sendMessage: (message: string) => void
+): void => {
+  emits('check-network-label', label, sendMessage)
+}
+
+const onGetFreeAdapters = (showModal: () => void): void => {
+  emits('get-free-adapters', showModal)
+}
+
+const onSendNetworkData = (
+  data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem,
+  type: string,
+  hideModal: () => void
+): void => {
+  emits('send-network-data', data, type, hideModal)
+}
+
+// TODO Удалить после изменения запросов и на прокураторе
+const onValidateBeforeSending = (
+  data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem,
+  type: string,
+  setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+): void => {
+  emits('add-networking-data-validate', data, type, setValidation)
+}
+
+const onSendEditData = (
+  type: string,
+  editFieldsData: UI_I_EditFieldsData,
+  hideModal: () => void,
+  id = ''
+): void => {
+  emits('send-edit-data', type, editFieldsData, hideModal, id)
+}
+</script>
+
+<style scoped lang="scss">
+@import 'assets/scss/common/mixins.scss';
+
+.content-area {
+  &__loading {
+    height: 100%;
+    @include flex($align: center, $just: center);
+    :deep(.spinner) {
+      width: 45px;
+      height: 45px;
+      min-width: 45px;
+      min-height: 45px;
+    }
+  }
+}
+
+:deep(.datagrid-outer-wrapper) {
+  padding-top: 0;
+}
+
+.main-actions {
+  padding: 20px 0 5px;
+
+  #refresh-virtual-switch-button,
+  #add-virtual-switch-button {
+    outline: none;
+    border: none;
+    background: none;
+    letter-spacing: 2px;
+    margin: 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:active {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+}
+</style>