bfg-common 1.0.0

package/components/common/diagramMain/modals/remove/RemoveModal.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <atoms-modal
+      width="576"
+      height="420"
+      :show="props.show"
+      :title="props.title"
+      class="diagram-action__remove"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <template v-if="props.viewName === 'vkernel-network-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-error" />
+            </div>
+            <p class="preserve-newlines">
+              {{ localization.vkernelNetworkRemoveWarningMessage }}
+            </p>
+          </div>
+        </template>
+        <template v-if="props.viewName === 'port-network-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-warning" />
+            </div>
+            <p class="preserve-newlines">
+              {{ removeModalTextNetwork }}
+            </p>
+          </div>
+        </template>
+        <!--        <template v-if="props.viewName === 'port-remove'">-->
+        <!--          <div class="modal-body-content modal-body-content__confirmation">-->
+        <!--            <div class="confirm-icon-container">-->
+        <!--              <atoms-diagram-icon name="is-error" />-->
+        <!--            </div>-->
+        <!--            <p class="preserve-newlines">-->
+        <!--              {{ removeModalTextPort }}-->
+        <!--            </p>-->
+        <!--          </div>-->
+        <!--        </template>-->
+        <template v-if="props.viewName === 'port-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-warning" />
+            </div>
+            <p class="preserve-newlines">
+              {{ removeModalTextPort }}
+            </p>
+          </div>
+        </template>
+        <template v-if="props.viewName === 'switch-remove'">
+          <div class="modal-body-content modal-body-content__confirmation">
+            <div class="confirm-icon-container">
+              <atoms-diagram-icon name="is-warning" />
+            </div>
+            <p class="preserve-newlines">
+              {{ `${localization.removingSwitchQuestion} ${props.id}?` }}
+            </p>
+          </div>
+        </template>
+      </template>
+      <template #modalFooter>
+        <template v-if="isOkButton">
+          <span>
+            <button
+              id="diagram-remove-modal-ok-button"
+              type="button"
+              class="btn btn-primary"
+              @click="onHideModal"
+            >
+              {{ localization.ok }}
+            </button>
+          </span>
+        </template>
+        <template v-if="isQuestionButton">
+          <span>
+            <button
+              id="diagram-remove-modal-no-button"
+              type="button"
+              class="btn btn-outline"
+              @click="onHideModal"
+            >
+              {{ localization.no }}
+            </button>
+            <button
+              id="diagram-remove-modal-yes-button"
+              type="button"
+              class="btn btn-primary"
+              @click="onRemove(props.id)"
+            >
+              {{ localization.yes }}
+            </button>
+          </span>
+        </template>
+        <template v-if="isRemoveButtons">
+          <span>
+            <button
+              id="diagram-remove-modal-cancel-button"
+              type="button"
+              class="btn btn-outline"
+              @click="onHideModal"
+            >
+              {{ localization.cancel }}
+            </button>
+            <button
+              id="diagram-remove-modal-remove-button"
+              type="button"
+              class="btn btn-primary"
+              @click="onRemove(props.id)"
+            >
+              {{ localization.remove }}
+            </button>
+          </span>
+        </template>
+        <div v-show="props.isShowLoader" class="loader">
+          <i class="fa clr-tree-node-caret-icon spinner spinner" />
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalName: string
+    viewName: string
+    title: string
+    id?: string
+    isShowLoader?: boolean
+  }>(),
+  {
+    id: '',
+    isShowLoader: false,
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Buttons depending on the selected item type
+const isOkButton = computed<boolean>(
+  () => props.viewName === 'vkernel-network-remove'
+)
+const isRemoveButtons = computed<boolean>(
+  () => props.viewName === 'port-remove'
+)
+const isQuestionButton = computed<boolean>(
+  () =>
+    props.viewName === 'port-network-remove' ||
+    props.viewName === 'switch-remove'
+)
+
+const removeModalTextNetwork = computed<string>(
+  () =>
+    `${localization.value.removeVMNetworkPortGroupQuestionPartOne} ${props.id} ${localization.value.removeVMNetworkPortGroupQuestionPartTwo}`
+)
+// const removeModalTextPortError = computed<string>(
+//   () =>
+//     `${localization.value.removingTheOnlyVMkernelAdapterWarningMessage1}
+//     ${ localization.value.removingTheOnlyVMkernelAdapterWarningMessage2}`
+// )
+const removeModalTextPort = computed<string>(
+  () =>
+    `${localization.value.portRemoveFirstLineText}
+
+    ${localization.value.portRemoveSecondLineText} ${props.id}?`
+)
+
+// Modal hiding
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'remove', id: string): void
+}>()
+
+const onRemove = (id: string) => {
+  emits('remove', id)
+}
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.diagram-action__remove) {
+  .modal-body-content {
+    display: flex;
+
+    .confirm-icon-container {
+      margin-right: 20px;
+    }
+
+    .preserve-newlines {
+      white-space: pre-line;
+      font-size: 15px;
+    }
+  }
+}
+.table-fixed-height {
+  min-height: 287px;
+  max-height: 287px;
+  overflow-y: auto;
+}
+
+.loader {
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .spinner {
+    left: unset;
+  }
+}
+</style>

package/components/common/diagramMain/modals/steps/ConnectionSettings.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="wizard-content-container add-networking-step">
+    <common-add-networking-steps-header
+      :title="props.title"
+      :text="props.text"
+    />
+    <div class="wizard-content wizard-content-port">
+      <atoms-alert
+        v-if="isShowErrorMessage"
+        status="alert-danger"
+        :items="props.errorMessages"
+        @remove="onHideErrorMessageAlert"
+      />
+      <form id-connection-settings-form>
+        <div class="horizontal-flex-container">
+          <label class="property-label-group" for="network-label">
+            {{ localization.networkLabel }}
+          </label>
+          <div class="margin-left-property-value-group">
+            <div class="property-value-group">
+              <fieldset>
+                <atoms-tooltip-error
+                  :has-error="!!fieldsErrorMessages.networkLabel"
+                >
+                  <template #elem>
+                    <input
+                      id="network-label"
+                      v-model="fields.networkLabel"
+                      name="network-label"
+                      type="text"
+                      :class="[
+                        'tooltip-field port-properties-network-label',
+                        {
+                          'danger-not-valid': fieldsErrorMessages.networkLabel,
+                        },
+                      ]"
+                      @click.stop
+                    />
+                  </template>
+                  <template #content>
+                    {{ fieldsErrorMessages.networkLabel }}
+                  </template>
+                </atoms-tooltip-error>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+
+        <div class="horizontal-flex-container port-properties-padding">
+          <label class="property-label-group" for="">
+            {{ localization.vlanId }}
+          </label>
+          <div class="margin-left-property-value-group">
+            <div class="property-value-group">
+              <fieldset>
+                <div class="flex-align-center">
+                  <atoms-combobox
+                    v-model.trim="fields.vlanId"
+                    :items="vlanIdSelectData"
+                    @click.stop
+                  />
+                  <div
+                    v-show="fieldsErrorMessages.vlanId"
+                    class="flex-align-center"
+                  >
+                    <div class="tooltip">
+                      <atoms-the-icon
+                        width="24px"
+                        height="24px"
+                        class="is-error tooltip-trigger"
+                        name="info"
+                      />
+                      <div class="tooltip-top-left tooltip-content error">
+                        {{ fieldsErrorMessages.vlanId }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_ConnectionSettings,
+  UI_I_ConnectionSettingsFieldsErrorMessages,
+} from '~/components/common/addNetworking/models/interfaces'
+import { UI_T_ConnectionSettingsFieldName } from '~/components/common/addNetworking/models/types'
+import {
+  connectionSettingsFieldsErrorMessages,
+  vlanIdSelectData,
+} from '~/components/common/addNetworking/config'
+
+// Props from up
+const props = defineProps<{
+  title: string
+  text: string
+  stepId: number
+  connectionSettings: UI_I_ConnectionSettings
+  isShowErrorMessageAlert: boolean
+  errorMessages: string[]
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Define emits for changing data and validation messages
+const emits = defineEmits<{
+  (
+    event: 'change-connection-settings',
+    connectionSettings: UI_I_ConnectionSettings
+  ): void
+  (
+    event: 'change-error-messages',
+    errorMessages: string[],
+    stepIndex: number
+  ): void
+  (event: 'hide-error-message-alert'): void
+}>()
+
+// Component binding data
+const fields = ref<UI_I_ConnectionSettings>({ ...props.connectionSettings })
+
+// Validation error check for this step
+const isShowErrorMessage = computed<boolean>(
+  () => props.isShowErrorMessageAlert && !!props.errorMessages.length
+)
+
+// Validation
+const fieldsErrorMessages = ref<UI_I_ConnectionSettingsFieldsErrorMessages>(
+  connectionSettingsFieldsErrorMessages
+)
+
+const messageTexts = (
+  local: UI_I_Localization
+): UI_I_ArbitraryObject<string> => ({
+  networkLabel: local.vlanIdInvalidMessage,
+  vlanId: local.networkLabelInvalidMessage,
+})
+
+const isNumberInRange = (
+  value: number | string,
+  down: number,
+  up: number
+): boolean => isNaN(Number(value)) || Number(value) < down || Number(value) > up
+
+const setMessageOnChangedField = (
+  values: string | number,
+  name: UI_T_ConnectionSettingsFieldName,
+  text: string
+): void => {
+  if (name === 'networkLabel' && !values) {
+    fieldsErrorMessages.value[name] = text
+    return
+  }
+  if (
+    name === 'vlanId' &&
+    values !== 'None (0)' &&
+    values !== 'All (4095)' &&
+    (isNumberInRange(values, 0, 4095) || values === '')
+  ) {
+    fieldsErrorMessages.value[name] = text
+    return
+  }
+  fieldsErrorMessages.value[name] = ''
+}
+
+// Changing data and validate they
+watch(
+  fields,
+  (newFields: UI_I_ConnectionSettings) => {
+    setMessageOnChangedField(
+      newFields.vlanId,
+      'vlanId',
+      messageTexts(localization.value).vlanId
+    )
+    setMessageOnChangedField(
+      newFields.networkLabel,
+      'networkLabel',
+      messageTexts(localization.value).networkLabel
+    )
+    const fieldsErrorMessagesFiltered = Object.values(
+      fieldsErrorMessages.value
+    ).filter((v) => v !== '')
+    fieldsErrorMessagesFiltered.length === 0 &&
+      emits('hide-error-message-alert')
+    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
+    emits('change-connection-settings', newFields)
+  },
+  { deep: true, immediate: true }
+)
+
+// Validation message show and hide
+const onHideErrorMessageAlert = (): void => {
+  emits('hide-error-message-alert')
+}
+onUnmounted(() => {
+  emits('hide-error-message-alert')
+})
+</script>

package/components/common/diagramMain/modals/steps/SelectVmkernelAdapter.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="wizard-content-container add-networking-step">
+    <common-add-networking-steps-header
+      :title="props.title"
+      :text="props.text"
+    />
+    <div class="wizard-content wizard-content-port">
+      <atoms-alert
+        v-if="isShowErrorMessage"
+        status="alert-danger"
+        :items="props.errorMessages"
+        @remove="onHideErrorMessageAlert"
+      />
+      <div class="table-top-margin-container">
+        <atoms-table-simple-table
+          :head-items="tableHeadItems"
+          :body-items="tableBodyItems"
+          editable
+          @select="onSelectRow"
+        />
+      </div>
+      <common-diagram-main-modals-view-settings-info
+        :show="selectedRowData.length"
+        :modal-tabs="modalTabs"
+        :view-settings-fields="viewSettingsFields"
+        :with-collapse="false"
+      />
+      <div
+        v-show="!selectedRowData.length"
+        class="table-fixed-height no-item-info"
+      >
+        <span>{{ localization.noItemSelected }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_BodyItems,
+  UI_I_ReadyCompleteFields,
+  UI_I_SelectVmkernelAdapter,
+  UI_I_TableHead,
+} from '~/components/common/addNetworking/models/interfaces'
+import {
+  UI_I_ModalTabs,
+  UI_I_SelectedVmkernelAdapterTableRaw,
+  UI_I_SelectVmKernelAdapterFieldsErrorMessages,
+  UI_I_VmkernelAdapterTableData,
+} from '~/components/common/diagramMain/models/interfaces'
+import {
+  vmKernelAdapterViewSettingsModalTabsFunc,
+  vmKernelAdapterViewSettingsTableHeadFunc,
+  vmKernelAdapterTableBodyMapperFunc,
+  vmKernelAdapterViewSettingsFunc,
+  selectVmKernelAdapterFieldsErrorMessages,
+} from '~/components/common/diagramMain/modals/config'
+import { UI_T_VmKernelAdapterFieldName } from '~/components/common/diagramMain/models/types'
+
+// Props from up
+const props = defineProps<{
+  title: string
+  text: string
+  stepId: number
+  tableData: UI_I_VmkernelAdapterTableData[]
+  vmkernelAdapter: UI_I_SelectVmkernelAdapter
+  isShowErrorMessageAlert: boolean
+  errorMessages: string[]
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// View settings modal tabs data
+const modalTabs = computed<UI_I_ModalTabs[]>(() =>
+  vmKernelAdapterViewSettingsModalTabsFunc(localization.value)
+)
+
+// View settings modal data
+const viewSettingsFields = computed<UI_I_ReadyCompleteFields[]>(() =>
+  vmKernelAdapterViewSettingsFunc(localization.value)
+)
+
+// Table head data
+const tableHeadItems = computed<UI_I_TableHead[]>(() =>
+  vmKernelAdapterViewSettingsTableHeadFunc(localization.value)
+)
+
+// Table body data
+const tableBodyItems = computed<UI_I_BodyItems[][]>(() =>
+  props.tableData.map(vmKernelAdapterTableBodyMapperFunc)
+)
+
+// Select the row
+const selectedRowData = ref<UI_I_SelectedVmkernelAdapterTableRaw[]>(
+  tableBodyItems.value.find(
+    (item) => item[0].id === props.vmkernelAdapter.vm
+  ) || []
+)
+
+// Component binding data
+const fields = ref<UI_I_SelectVmkernelAdapter>({ ...props.vmkernelAdapter })
+
+// Select row handler
+const onSelectRow = (index: number): void => {
+  selectedRowData.value = tableBodyItems.value[index]
+
+  const selectedVmkernelAdapter =
+    selectedRowData.value &&
+    selectedRowData.value[0] &&
+    selectedRowData.value[0].id
+
+  selectedVmkernelAdapter && (fields.value.vm = selectedVmkernelAdapter)
+}
+
+// Validation error check for this step
+const isShowErrorMessage = computed<boolean>(
+  () => props.isShowErrorMessageAlert && !!props.errorMessages.length
+)
+
+// Validation
+const emits = defineEmits<{
+  (
+    event: 'change-vmkernel-adapter',
+    vmkernelAdapter: UI_I_SelectVmkernelAdapter
+  ): void
+  (
+    event: 'change-error-messages',
+    errorMessages: string[],
+    stepIndex: number
+  ): void
+  (event: 'hide-error-message-alert'): void
+}>()
+
+const fieldsErrorMessages = ref<UI_I_SelectVmKernelAdapterFieldsErrorMessages>(
+  selectVmKernelAdapterFieldsErrorMessages
+)
+
+const messageTexts = (
+  local: UI_I_Localization
+): UI_I_ArbitraryObject<string> => ({
+  vm: local.noVmKernelNetworkAdapterSelectedForMigration,
+})
+
+const setMessageOnChangedField = (
+  values: string,
+  name: UI_T_VmKernelAdapterFieldName,
+  text: string
+): void => {
+  if (name === 'vm') {
+    if (values) {
+      fieldsErrorMessages.value[name] = ''
+    } else {
+      fieldsErrorMessages.value[name] = text
+    }
+  }
+}
+
+watch(
+  fields,
+  (newFields: UI_I_SelectVmkernelAdapter) => {
+    setMessageOnChangedField(
+      newFields.vm,
+      'vm',
+      messageTexts(localization.value).vm
+    )
+
+    const fieldsErrorMessagesFiltered = Object.values(
+      fieldsErrorMessages.value
+    ).filter((errorMessage: string) => errorMessage !== '')
+    fieldsErrorMessagesFiltered.length === 0 &&
+      emits('hide-error-message-alert')
+    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
+    emits('change-vmkernel-adapter', newFields)
+  },
+  { deep: true, immediate: true }
+)
+
+const onHideErrorMessageAlert = (): void => {
+  emits('hide-error-message-alert')
+}
+onUnmounted(() => {
+  selectedRowData.value = []
+  emits('hide-error-message-alert')
+})
+</script>
+
+<style scoped lang="scss">
+.wizard-content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1 1 100%;
+  box-sizing: border-box;
+  padding: 16px 15px 10px 10px;
+  overflow-y: auto;
+  background-color: #fff;
+  color: #333;
+  order: 2;
+  width: 100%;
+}
+.table-top-margin-container {
+  margin-top: 20px;
+}
+
+:deep(.table-fixed-height) {
+  max-height: 160px;
+  min-height: 160px;
+}
+.no-item-info {
+  span {
+    font-size: 16px;
+    font-weight: 700;
+    color: #a0a0a0;
+  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/components/common/diagramMain/modals/steps/VmkernelAdapterReadyComplete.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="wizard-content-container">
+    <common-add-networking-steps-header
+      :title="props.title"
+      :text="props.text"
+    />
+    <template
+      v-for="viewSettingsField in viewSettingsFields"
+      :key="viewSettingsField.id"
+    >
+      <common-diagram-main-modals-view-settings
+        :view-settings-field="viewSettingsField"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { createMigrateVmkernelAdapterSchemeReadyCompleteFunc } from '~/components/common/diagramMain/modals/config'
+
+// Props from up
+const props = defineProps<{
+  title: string
+  text: string
+  stepId: number
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// View settings fields data
+const viewSettingsFields = computed(() => createMigrateVmkernelAdapterSchemeReadyCompleteFunc(localization.value))
+</script>
+
+<style scoped lang="scss">
+.wizard-content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1 1 100%;
+  box-sizing: border-box;
+  padding: 16px 15px 10px 10px;
+  overflow-y: auto;
+  background-color: #fff;
+  color: #333;
+  order: 2;
+  width: 100%;
+}
+</style>