bfg-common 1.5.92 → 1.5.94

package/components/common/wizards/vm/migrate/Migrate.vue

@@ -12,6 +12,17 @@
       @hide="onHideModal"
       @submit="onFinish"
     >
+      <template #description="{ selectedStep }">
+        <div class="flex items-center justify-between">
+          <h2 class="custom-sub-title">
+            {{ selectedStep.subTitle }}
+          </h2>
+          <common-wizards-vm-migrate-vm-origin
+            v-if="props.vmOrigin"
+            :vm-origin="props.vmOrigin"
+          />
+        </div>
+      </template>
       <template #modalBody="{ selectedStep }">
         <common-pages-scheduled-tasks-modals-common-new-task-form
           v-if="selectedStep.id === dynamicSteps.schedulingOptions"
@@ -100,6 +111,7 @@ import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models
 import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/configure/disk/table/lib/models/interfaces'
 import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
 import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import type { UI_I_VmOrigin } from '~/components/common/wizards/vm/migrate/vmOrigin/lib/models/interfaces'
 import { constructDataReadyViewFunc } from '~/components/common/wizards/vm/migrate/lib/config/constructDataReady'
 import * as validation from '~/components/common/wizards/vm/migrate/lib/validations'
 
@@ -120,9 +132,11 @@ const props = withDefaults(
     vmState?: number
     vmInfo?: any | null
     networks?: any
+    vmOrigin?: UI_I_VmOrigin | null
   }>(),
   {
     computeResourceTree: null,
+    vmOrigin: null,
   }
 )
 const emits = defineEmits<{
@@ -194,7 +208,13 @@ const validationFunc = async (
 ): Promise<UI_I_ValidationReturn> => {
   let stepHasError = false
 
-  if (wizard.isValidateForStep(dynamicSteps.selectComputeResource, currentStep.id, nextStep.id)) {
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.selectComputeResource,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
     const nameValidation = await validation.checkSelectedResourceSync(
       localization.value,
       form.value.resource,
@@ -207,7 +227,13 @@ const validationFunc = async (
     stepHasError = nameValidation.stepHasError
   }
 
-  if (wizard.isValidateForStep(dynamicSteps.selectStorage, currentStep.id, nextStep.id)) {
+  if (
+    wizard.isValidateForStep(
+      dynamicSteps.selectStorage,
+      currentStep.id,
+      nextStep.id
+    )
+  ) {
     const nameValidation = await validation.checkSelectedDatastoreSync(
       localization.value,
       form.value.storage,
@@ -295,9 +321,20 @@ const onHideAlert = (stepId: number): void => {
 <style scoped lang="scss">
 @import 'assets/scss/common/mixins.scss';
 .migrate-vm {
+  .custom-sub-title {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: inherit;
+    color: var(--add-vm-context-sub-title);
+  }
+
   :deep(.modal-body) {
     height: inherit;
     @include flex($dir: column);
+
+    .content-heading > div {
+      width: 100%;
+    }
   }
 }
 </style>

package/components/common/wizards/vm/migrate/vmOrigin/VmOrigin.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="vm-origin-info-tooltip">
+    <div
+      id="vm-origin-trigger"
+      class="tooltip-trigger-block flex items-center"
+      @click="isShowTooltip = !isShowTooltip"
+    >
+      <span>{{ localization.common.vmOrigin }}</span>
+      <atoms-the-icon
+        name="info-circle"
+        width="16px"
+        height="16px"
+        fill="#0072a3"
+      />
+    </div>
+
+    <atoms-tooltip-signpost
+      v-if="isShowTooltip"
+      elem-id="vm-origin-trigger"
+      @hide="isShowTooltip = false"
+    >
+      <slot name="content">
+        <div class="vm-origin-info-tooltip-block">
+          <div v-for="item in itemsArray" :key="item.key" class="item-row">
+            <span class="title-row">{{ item.key }}</span>
+            <div
+              v-for="item2 in item.value"
+              :key="item2.name"
+              class="flex items-center"
+            >
+              <span :class="item2.iconName"></span>
+              <span class="item-name">{{ item2.name }}</span>
+            </div>
+          </div>
+        </div>
+      </slot>
+    </atoms-tooltip-signpost>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_VmOrigin,
+  UI_I_VmOriginArrayItem,
+} from '~/components/common/wizards/vm/migrate/vmOrigin/lib/models/interfaces'
+import { constructOriginItems } from '~/components/common/wizards/vm/migrate/vmOrigin/lib/utils/constructItems'
+
+const props = withDefaults(
+  defineProps<{
+    vmOrigin?: UI_I_VmOrigin | null
+  }>(),
+  {
+    vmOrigin: null,
+  }
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const itemsArray = computed<UI_I_VmOriginArrayItem[]>(() =>
+  constructOriginItems(props.vmOrigin, localization.value)
+)
+
+const isShowTooltip = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+.vm-origin-info-tooltip {
+  :deep(.tooltip-content) {
+    background-color: #ffffff;
+  }
+  .tooltip-trigger-block {
+    cursor: pointer;
+    color: #0072a3;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .vm-origin-info-tooltip-block {
+    .title-row {
+      font-weight: 700;
+      color: #565656;
+      margin-bottom: 5px;
+    }
+    .item-name {
+      margin-left: 5px;
+    }
+  }
+}
+</style>

package/components/common/wizards/vm/migrate/vmOrigin/lib/models/interfaces.ts

@@ -0,0 +1,19 @@
+export interface API_UI_I_VmOriginItemItem {
+  name: string
+  state: number
+}
+export interface UI_I_VmOriginItemItem extends API_UI_I_VmOriginItemItem {}
+export interface API_UI_I_VmOrigin {
+  host: API_UI_I_VmOriginItemItem | null
+  network: API_UI_I_VmOriginItemItem | null
+  storage: API_UI_I_VmOriginItemItem | null
+}
+export interface UI_I_VmOrigin extends API_UI_I_VmOrigin {}
+
+export interface UI_I_VmOriginArrayItemValue extends UI_I_VmOriginItemItem {
+  iconName: string
+}
+export interface UI_I_VmOriginArrayItem {
+  key: string
+  value: UI_I_VmOriginArrayItemValue[]
+}

package/components/common/wizards/vm/migrate/vmOrigin/lib/utils/constructItems.ts

@@ -0,0 +1,62 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_VmOrigin,
+  UI_I_VmOriginArrayItem,
+} from '~/components/common/wizards/vm/migrate/vmOrigin/lib/models/interfaces'
+
+const getTitleRow = (
+  value: string,
+  localization: UI_I_Localization
+): string => {
+  switch (value) {
+    case 'cluster':
+      return localization.common.cluster
+    case 'host':
+      return localization.common.host
+    case 'network':
+      return localization.common.network
+    case 'storage':
+      return localization.common.storage
+    default:
+      return value
+  }
+}
+
+const getIconItem = (value: string): string => {
+  switch (value) {
+    case 'cluster':
+      return 'vsphere-icon-cluster'
+    case 'host':
+      return 'vsphere-icon-host'
+    case 'network':
+      return 'vsphere-icon-network'
+    case 'storage':
+      return 'vsphere-icon-datastore'
+    default:
+      return ''
+  }
+}
+
+export const constructOriginItems = (
+  data: UI_I_VmOrigin | null,
+  localization: UI_I_Localization
+): UI_I_VmOriginArrayItem[] =>
+  data
+    ? Object.entries(data).map(([key, value]) => {
+        const newValue = []
+
+        if (value) {
+          if (!value.length)
+            newValue.push({
+              name: value.name,
+              state: value.state,
+              iconName: getIconItem(key),
+            })
+          else newValue.push(...value)
+        }
+        return {
+          key: getTitleRow(key, localization),
+          value: newValue,
+        }
+      })
+    : []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.92",
+  "version": "1.5.94",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",