bfg-common 1.0.0

package/components/common/addNetworking/modals/SelectStandardSwitch.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="select-table-modal">
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="props.title"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <atoms-alert
+          v-if="isShowErrorMessageAlert"
+          status="alert-danger"
+          :items="[localization.noSwitchIsSelectedSelectSwitchToContinue]"
+          @remove="onHideErrorMessageAlert"
+        />
+        <div class="table-top-margin-container">
+          <atoms-table-simple-table
+            :head-items="headItems"
+            :body-items="bodyItems"
+            editable
+            @select="onSelectRow"
+          />
+        </div>
+      </template>
+      <template #modalFooter>
+        <button class="btn btn-outline" @click="onHideModal">Cancel</button>
+        <button class="btn btn-primary" @click="onSelectSwitch">Ok</button>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+    UI_I_Switch,
+    UI_I_SelectedSwitch, UI_I_BodyItems,
+} from '~/components/common/addNetworking/models/interfaces'
+import {
+  selectStandardSwitchTableHeadFunc
+} from '~/components/common/addNetworking/config'
+
+interface I_SelectSwitchModalProps {
+  show: boolean
+  modalName: string
+  title?: string
+  width?: string
+  height?: string
+  withCollapse?: boolean
+  standardSwitchesInitial: UI_I_Switch[]
+}
+
+const props = withDefaults(defineProps<I_SelectSwitchModalProps>(), {
+  width: '576px',
+  height: '420px',
+  title: '--',
+})
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRowData = ref<UI_I_SelectedSwitch[]>()
+
+const standardSwitches = ref<UI_I_Switch[]>(props.standardSwitchesInitial)
+
+const headItems = selectStandardSwitchTableHeadFunc(localization.value)
+
+const bodyItems = computed<UI_I_BodyItems[][]>(() =>
+  standardSwitches.value.map((switchData: UI_I_Switch) => [
+    {
+      editable: false,
+      text: switchData.name,
+      id: switchData.id,
+    },
+  ])
+)
+
+watch(
+  () => props.standardSwitchesInitial,
+  (newStandardSwitches: UI_I_Switch[]) => {
+    standardSwitches.value = newStandardSwitches
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowErrorMessageAlert = ref<boolean>(false)
+const onHideErrorMessageAlert = (): void => {
+  selectedRowData.value = []
+  isShowErrorMessageAlert.value = false
+}
+
+const onSelectRow = (index: number): void => {
+  selectedRowData.value = bodyItems.value[index]
+}
+
+const onSelectSwitch = (): void => {
+  const selectedSwitchId =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+  if (!selectedSwitchId) {
+    isShowErrorMessageAlert.value = true
+    return
+  }
+  emits('select-standard-switch', selectedSwitchId)
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-standard-switch', switchId: string): void
+}>()
+const onHideModal = (): void => {
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.table-wrap) {
+  height: 100%;
+}
+</style>

package/components/common/addNetworking/modals/SelectSwitch.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="select-table-modal">
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="props.title"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <atoms-alert
+          v-if="isShowErrorMessageAlert"
+          status="alert-danger"
+          :items="[localization.noSwitchIsSelectedSelectSwitchToContinue]"
+          @remove="onHideErrorMessageAlert"
+        />
+        <div class="table-top-margin-container">
+          <atoms-table-simple-table
+            :head-items="headItems"
+            :body-items="bodyItems"
+            editable
+            @select="onSelectRow"
+          />
+        </div>
+      </template>
+      <template #modalFooter>
+        <button class="btn btn-outline" @click="onHideModal">Cancel</button>
+        <button class="btn btn-primary" @click="onSelectSwitch">Ok</button>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_Switch,
+  UI_I_SelectedSwitch,
+  UI_I_BodyItems,
+} from '~/components/common/addNetworking/models/interfaces'
+import { selectSwitchTableHeadFunc } from '~/components/common/addNetworking/config'
+
+interface I_SelectSwitchModalProps {
+  show: boolean
+  modalName: string
+  title?: string
+  width?: string
+  height?: string
+  withCollapse?: boolean
+  data: UI_I_Switch[]
+}
+
+const props = withDefaults(defineProps<I_SelectSwitchModalProps>(), {
+  width: '576px',
+  height: '420px',
+  title: '--',
+})
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRowData = ref<UI_I_SelectedSwitch[]>()
+
+const headItems = selectSwitchTableHeadFunc(localization.value)
+
+const bodyItems = computed<UI_I_BodyItems[][]>(() =>
+  props.data.map((switchData: UI_I_Switch) => [
+    {
+      editable: false,
+      text: switchData.name,
+      id: switchData.id,
+    },
+    {
+      editable: false,
+      text: '--',
+    },
+  ])
+)
+
+const isShowErrorMessageAlert = ref<boolean>(false)
+const onHideErrorMessageAlert = (): void => {
+  selectedRowData.value = []
+  isShowErrorMessageAlert.value = false
+}
+
+const onSelectRow = (index: number): void => {
+  selectedRowData.value = bodyItems.value[index]
+}
+
+const onSelectSwitch = (): void => {
+  const selectedSwitchId =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+  if (!selectedSwitchId) {
+    isShowErrorMessageAlert.value = true
+    return
+  }
+  emits('select-switch', selectedSwitchId)
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-switch', switchId: string): void
+}>()
+const onHideModal = (): void => {
+  onHideErrorMessageAlert()
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/addNetworking/models/enums.ts

@@ -0,0 +1,7 @@
+export const enum UI_E_StepStatus {
+    Disabled,
+    Selected,
+    Active,
+    Complete,
+    CompleteSelected
+}

package/components/common/addNetworking/models/interfaces.ts

@@ -0,0 +1,207 @@
+import { UI_E_StepStatus } from '~/components/common/addNetworking/models/enums'
+import { UI_T_TCP } from '~/components/common/addNetworking/models/types'
+import { addNetworkingSecondSchemeDataFunc } from '~/components/common/addNetworking/config/sendData'
+import { createSecondSchemeReadyCompleteFunc } from '~/components/common/addNetworking/config/addNetworkingSteps'
+
+export interface UI_I_Services {
+  vMotion: boolean
+  provisioning: boolean
+  faultToleranceLogging: boolean
+  management: boolean
+  replication: boolean
+  replicationNFC: boolean
+  vSAN: boolean
+  backupNFC: boolean
+  nVMeOverTCP: boolean
+  nVMeOverRDMA: boolean
+}
+export interface UI_I_PortProperties {
+  networkLabel: string
+  vlanId: string
+  mtu: {
+    option: string
+    size: number
+  }
+  tcp: UI_T_TCP
+  services: UI_I_Services
+}
+
+export interface UI_I_IpFourSettings {
+  ipSettings: string
+  static: {
+    ipFourAddress: string
+    subnetMask: string
+    defaultGateway: {
+      override: boolean
+      value: string
+    }
+  }
+}
+export interface UI_I_ConnectionSettings {
+  networkLabel: string
+  vlanId: string
+}
+export interface UI_I_TargetDevice {
+  selected: string
+  network?: string
+  switch?: string
+  standardSwitch?: string
+  mtu?: number
+}
+
+export interface UI_I_SelectVmkernelAdapter {
+  vm: string
+}
+
+export interface UI_I_Step {
+  id: number
+  name: string
+  status: UI_E_StepStatus
+}
+
+export interface UI_I_Network {
+  name: string
+  id: string
+}
+
+export interface UI_I_SelectedNetwork {
+  text: string
+  editable: boolean
+  id?: string
+}
+
+export interface UI_I_Switch {
+  name: string
+  id: string
+  mtu?: number
+}
+
+export interface UI_I_SelectedSwitch {
+  text: string
+  editable: boolean
+  id?: string
+}
+
+export interface UI_I_ReadyCompleteFields {
+  title?: string
+  id: number
+  type: number
+  rows: {
+    name: string
+    value?: string | string[]
+  }[]
+}
+
+export interface UI_I_ConnectionSettingsFieldsErrorMessages {
+  networkLabel: string
+  vlanId: string
+}
+
+export interface UI_I_IpFourSettingsFieldsErrorMessages {
+  ipFourAddress: string
+  subnetMask: string
+  defaultGateway: string
+}
+
+export interface UI_I_PortPropertiesFieldsErrorMessages {
+  networkLabel: string
+  vlanId: string
+  mtu: string
+}
+
+export interface UI_I_TargetDeviceFieldsErrorMessages {
+  network: string
+  switch: string
+  standardSwitch: string
+  mtu: string
+}
+
+export interface UI_I_PortPropertiesEnabledService {
+  label: string
+  modelValue: string
+}
+
+export interface UI_I_AddNetworkingSecondSchemeDataSend {
+  name: string
+  vlan: number
+  switch?: string
+}
+export interface UI_I_AddNetworkingZeroOrFirstSchemeDataSend {
+  switch?: string
+  new_switch?: {
+    mtu: number | undefined
+    nics: {
+      active: string[]
+      standby: string[]
+      unused: string[]
+    }
+  }
+  network_name: string
+  new_network?: {
+    vlan: number
+  }
+  tcp_stack: string
+  mtu: number
+  services: {
+    management: boolean
+    vmotion: boolean
+    provisioning: boolean
+    vsan: boolean
+    fault_tolerance_logging: boolean
+    vsphere_replication: boolean
+    vsphere_replication_nfc: boolean
+    vsphere_backup_nfc: boolean
+    nvme_over_tcp: boolean
+    nvme_over_rdma: boolean
+  }
+  tcp_config: {
+    auto: boolean
+    ipv4?: string
+    net_mask?: string
+    gateway_override?: boolean
+    gateway?: string
+  }
+}
+
+export interface UI_I_NetworkLabelCheckExisting {
+  valid: boolean
+  checked: boolean
+}
+
+export interface UI_I_TableHead {
+  text: string
+}
+
+export interface UI_I_BodyItems {
+  editable: boolean
+  text: string
+  id?: string
+}
+
+export interface UI_I_SecondSchemeData {
+  vlan: number
+  name: string
+  switch: string | undefined
+}
+
+export interface UI_I_VlanIdData {
+  text: string
+  value: string
+}
+
+export interface UI_I_NetworkValidation {
+  valid: boolean
+  checked: boolean
+}
+
+export interface UI_I_ReadyCompleteData {
+  id: number
+  type: number
+  title?: string
+  rows: { name: string; value: string | undefined }[]
+}
+
+export interface UI_I_ReadyCompleteFirstColumn {
+  name: string
+  value: string | undefined
+}

package/components/common/addNetworking/models/types.ts

@@ -0,0 +1,5 @@
+export type UI_T_ConnectionSettingsFieldName = 'networkLabel' | 'vlanId'
+export type UI_T_IpFourSettingsFieldName = 'ipFourAddress' | 'subnetMask' | 'defaultGateway'
+export type UI_T_PortPropertiesFieldName = 'networkLabel' | 'vlanId' | 'mtu'
+export type UI_T_TargetDeviceFieldName = 'network' | 'switch' | 'standardSwitch' | 'mtu'
+export type UI_T_TCP = 'default' | '1' | '2'