bfg-common 1.6.95 → 1.6.97

package/components/common/configure/physicalAdapters/buttons/Buttons.vue

@@ -0,0 +1,106 @@
+<template>
+  <ul class="btn-group">
+    <li>
+      <button
+        v-permission="
+          'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
+        "
+        data-id="show-add-networking-modal-button"
+        type="button"
+        class="btn btn-sm"
+        @click="emits('show-add-networking-modal')"
+      >
+        <span class="icon network-lib-ui-icon-networkAdd"></span>
+        <span>{{ localization.common.addNetworkingWithDots }}</span>
+      </button>
+    </li>
+    <li>
+      <button
+        data-id="global-refresh-adapters-button"
+        type="button"
+        class="btn btn-sm"
+        @click="emits('global-refresh-adapters')"
+      >
+        <span class="icon network-lib-ui-icon-refreshNetwork"></span>
+        <span>{{ localization.common.refresh }}</span>
+      </button>
+    </li>
+    <li>
+      <span class="vertical-separator"></span>
+    </li>
+    <li>
+      <button
+        v-development="true"
+        :class="[
+          'btn btn-sm',
+          {
+            disabled: !props.hasSelectedAdapter,
+          },
+        ]"
+        data-id="show-edit-modal-button"
+        type="button"
+        @click="emits('show-edit-modal')"
+      >
+        <span class="icon vsphere-icon-toolbar-edit"></span>
+        <span> {{ localization.common.edit }}... </span>
+      </button>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  hasSelectedAdapter: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-add-networking-modal'): void
+  (event: 'show-edit-modal'): void
+  (event: 'global-refresh-adapters'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+ul.btn-group {
+  padding-top: 12px;
+
+  li {
+    padding-right: 4px;
+
+    .vertical-separator {
+      border: 1px solid #999;
+      border-left: none;
+      margin: 0 3px 0 4px;
+    }
+
+    .btn {
+      all: unset;
+      border: 1px solid transparent;
+      padding: 4px;
+      line-height: 16px;
+      font-size: 13px;
+      display: inline-flex;
+      cursor: pointer;
+
+      &.disabled {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+
+      .icon {
+        margin-right: 4px;
+      }
+
+      &:hover:not(.disabled) {
+        text-decoration: none;
+        background-color: #e9f6fd;
+        border: 1px solid #c7e9ff;
+      }
+    }
+  }
+}
+</style>

package/components/common/configure/physicalAdapters/emptyBlock/EmptyBlock.vue

@@ -0,0 +1,17 @@
+<template>
+  <component :is="currentComponent" />
+</template>
+
+<script setup lang="ts">
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./EmptyBlockNew.vue'))
+    : defineAsyncComponent(() => import('./EmptyBlockOld.vue'))
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/configure/physicalAdapters/emptyBlock/EmptyBlockNew.vue

@@ -0,0 +1,37 @@
+<template>
+  <ui-not-found size="lg" text="">
+    <span class="no-items-found-title">{{
+      localization.common.noItemsSelected
+    }}</span>
+    <span class="no-items-found-description">{{
+      localization.inventoryConfigure.noSelectedAdaptersMessage
+    }}</span>
+  </ui-not-found>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.no-items-found-title {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  letter-spacing: 0;
+  text-align: center;
+  vertical-align: middle;
+  color: var(--title-form-first-color);
+}
+.no-items-found-description {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: 0;
+  text-align: center;
+  vertical-align: middle;
+  padding-top: 6px;
+}
+</style>

package/components/common/configure/physicalAdapters/emptyBlock/EmptyBlockOld.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="empty-block embedded-flex-panel-layout h-full flex items-center justify-center"
+  >
+    <span class="empty-block__text">
+      {{ localization.inventoryConfigure.noSelectedAdaptersMessage }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.empty-block {
+  min-height: 200px;
+  &__text {
+    font-size: 16px;
+    font-weight: 700;
+    color: #9a9a9a;
+  }
+}
+</style>

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

@@ -0,0 +1,124 @@
+<template>
+  <component
+    :is="currentComponent"
+    v-model:config-speed="configSpeed"
+    v-model:status="sriovStatus"
+    v-model:number-of-functions="numberOfFunctions"
+    v-model:errors="errors"
+    :selected-adapter="props.selectedAdapter"
+    :has-speed="props.hasSpeed"
+    :configured-speed-options="configuredSpeedOptions"
+    :sr-options="srOptions"
+    @hide="emits('hide')"
+    @send-edit-data="onSendData"
+  />
+</template>
+
+<script setup lang="ts">
+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_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_ConfiguredSpeedOption,
+  UI_I_SrOption,
+  UI_I_SrOptionError,
+} from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
+import {
+  configuredSpeedOptionsFunc,
+  srOptionsFunc,
+} from '~/components/common/configure/physicalAdapters/modals/edit/lib/config/config'
+import { vfNumberValidationFunc } from '~/components/common/configure/physicalAdapters/modals/edit/lib/validations/validations'
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./EditNew.vue'))
+    : defineAsyncComponent(() => import('./EditOld.vue'))
+)
+
+const props = defineProps<{
+  hasSpeed: boolean
+  selectedAdapter: UI_I_SwitchAdapterItem | null
+}>()
+
+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 configuredSpeedOptions = computed<
+  (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[]
+>(() => configuredSpeedOptionsFunc(localization.value, props.hasSpeed))
+
+const srOptions = computed<(UI_I_SrOption | UI_I_OptionItem)[]>(() =>
+  srOptionsFunc(localization.value, isNewView.value)
+)
+
+const errors = ref<UI_I_SrOptionError>({
+  alert: '',
+  field: '',
+})
+
+watch(
+  configuredSpeedOptions,
+  (newValue: (UI_I_ConfiguredSpeedOption | UI_I_OptionItem)[]) => {
+    configSpeed.value = newValue[newValue.length - 1].value
+  },
+  { deep: true, immediate: true }
+)
+
+const onSendData = (): void => {
+  const alertMessage = vfNumberValidationFunc(
+    numberOfFunctions.value,
+    localization.value,
+    true
+  )
+
+  if (alertMessage) {
+    errors.value.alert = alertMessage
+    return
+  }
+
+  errors.value.alert = ''
+
+  emits('send-edit-data')
+}
+</script>
+
+<style scoped lang="scss">
+.form-group {
+  .functions-input,
+  .status-input {
+    width: 83px;
+
+    &.disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+}
+
+.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/EditNew.vue

@@ -0,0 +1,232 @@
+<template>
+  <ui-modal
+    :title="localization.common.editSettings"
+    :subtitle="props.selectedAdapter.name"
+    :texts="modalTexts"
+    test-id="edit-modal"
+    size="sm"
+    width="560px"
+    show
+    @hide="emits('hide')"
+    @submit="emits('send-edit-data')"
+  >
+    <template #content>
+      <ui-alert
+        v-if="!!errors.alert"
+        :messages="[errors.alert]"
+        test-id="virtual-functions-alert"
+        size="md"
+        class="virtual-functions-alert"
+        @hide="onHideAlert"
+      />
+      <div class="form-group">
+        <div class="form-group-speed">
+          <label class="config-speed-title title">
+            {{ localization.common.configuredSpeedDuplex }}
+          </label>
+          <div class="config-speed-select">
+            <ui-select
+              v-model="configSpeed"
+              :items="props.configuredSpeedOptions"
+              test-id="config-speed-select"
+              :placeholder="localization.common.configuredSpeedDuplex"
+              size="md"
+              select-width="100%"
+            />
+          </div>
+        </div>
+        <div v-if="props.hasSpeed" class="form-group-sr">
+          <ui-line margin="24px 0 16px" />
+          <label class="sr-title title">
+            {{ localization.common.srIov }}
+          </label>
+          <p class="sr-description">
+            {{ localization.common.srIovDescription }}
+          </p>
+          <div class="sr-block">
+            <div class="status-select">
+              <label class="status-label">
+                {{ localization.common.status }}
+              </label>
+              <ui-select
+                v-model="status"
+                :items="props.srOptions"
+                test-id="status-select"
+                :placeholder="localization.common.status"
+                size="md"
+                select-width="100%"
+              />
+            </div>
+            <div class="virtual-functions-input">
+              <label class="virtual-functions-label">
+                {{ localization.common.virtualFunctions }}
+              </label>
+              <ui-input
+                v-model="numberOfFunctions"
+                test-id="virtual-functions-input"
+                :placeholder="localization.common.virtualFunctions"
+                size="md"
+                type="number"
+                :error="sriovStatus ? errors.field : ''"
+                :disabled="!sriovStatus"
+              />
+            </div>
+          </div>
+          <div v-if="sriovStatus" class="info">
+            <div class="info-icon">
+              <ui-icon name="info" width="16" height="16" />
+            </div>
+            <p class="info-description">
+              {{ localization.common.changesNotEffectUntilRestart }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footerLeftContent>
+      <span></span>
+    </template>
+  </ui-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+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_SwitchAdapterItem } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_I_SrOptionError } from '~/components/common/configure/physicalAdapters/modals/edit/lib/models/interfaces'
+import { vfNumberValidationFunc } from '~/components/common/configure/physicalAdapters/modals/edit/lib/validations/validations'
+
+const props = defineProps<{
+  hasSpeed: boolean
+  selectedAdapter: UI_I_SwitchAdapterItem | null
+  configuredSpeedOptions: UI_I_OptionItem
+  srOptions: UI_I_OptionItem
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'send-edit-data'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = ref<UI_I_ModalTexts>({
+  resetToDefault: '',
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.save,
+})
+
+const configSpeed = defineModel<string>('config-speed')
+const sriovStatus = defineModel<boolean>('status')
+const numberOfFunctions = defineModel<number>('number-of-functions')
+const errors = defineModel<UI_I_SrOptionError>('errors')
+
+const status = computed({
+  get() {
+    return sriovStatus.value ? '1' : '0'
+  },
+  set(newValue: string) {
+    sriovStatus.value = newValue === '1'
+  },
+})
+
+watch(
+  numberOfFunctions,
+  (newValue: number): void => {
+    errors.value.field = vfNumberValidationFunc(newValue, localization.value)
+    errors.value.alert = ''
+  },
+  { immediate: true }
+)
+
+const onHideAlert = (): void => {
+  errors.value.alert = ''
+}
+</script>
+
+<style scoped lang="scss">
+.form-group {
+  padding: 16px 32px;
+
+  .title {
+    display: block;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0;
+    color: var(--title-form-first-color);
+
+    &.config-speed-title {
+      margin-bottom: 16px;
+    }
+
+    &.sr-title {
+      margin-bottom: 12px;
+    }
+  }
+
+  p.sr-description {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    letter-spacing: 0;
+    color: var(--form-icon-color);
+    margin-bottom: 16px;
+  }
+
+  .sr-block {
+    display: flex;
+    column-gap: 16px;
+
+    & > div {
+      width: 50%;
+
+      label {
+        display: block;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: 0;
+        color: var(--title-form-first-color);
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  .info {
+    display: flex;
+    column-gap: 8px;
+    color: var(--form-icon-color);
+    padding-top: 16px;
+
+    .info-icon {
+      width: 16px;
+      height: 16px;
+    }
+    p.info-description {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 16px;
+      letter-spacing: 0;
+    }
+  }
+}
+
+@media (max-width: 400px) {
+  .form-group .sr-block {
+    flex-direction: column;
+    .virtual-functions-input {
+      padding-top: 16px;
+    }
+
+    & > div {
+      width: 100%;
+    }
+  }
+}
+
+.virtual-functions-alert {
+  margin: 8px 32px;
+}
+</style>