bfg-common 1.0.0

package/components/common/vm/actions/add/select/computeResource/TreeView.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="tree-view">
+    <atoms-loader-pre-loader
+      v-show="loading"
+      id="loader"
+      class="absolute-center tree-view__loading"
+      :show="true"
+    />
+    <common-recursion-tree
+      :nodes="props.computeResourceTree"
+      class="recursion-tree"
+      @get-nodes="onShowNodes($event)"
+      @select-node="onSelectNode"
+      @contextmenu.prevent
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_TreeNode } from '~/components/common/recursionTree/models/interfaces'
+
+const props = defineProps<{
+  dataCenter: UI_I_TreeNode | null
+  computeResource: UI_I_TreeNode
+  modelValue: UI_I_TreeNode | null
+  computeResourceTree: UI_I_TreeNode[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: UI_I_TreeNode): void
+  (event: 'get-compute-resource-tree', value: { id: string | number, cb: () => void }): void
+  (event: 'show-compute-resource-tree', value: UI_I_TreeNode): void
+  (event: 'select-compute-resource-tree', value: UI_I_TreeNode): void
+  (event: 'clear-compute-resource-tree'): void
+}>()
+
+const { $store } = useNuxtApp()
+
+const loading = ref<boolean>(false)
+watch(
+  () => props.dataCenter,
+  async () => {
+    if (!props.dataCenter) return
+
+    loading.value = true
+    emits('get-compute-resource-tree', {
+      id: props.dataCenter.id,
+      cb: () => {
+        let node = props.modelValue
+        let hasNode = checkHasNodeRecursion(
+          props.computeResourceTree[0].nodes,
+          node
+        )
+        if (!hasNode) {
+          node = props.computeResource
+          hasNode = checkHasNodeRecursion(
+            props.computeResourceTree[0].nodes,
+            node
+          )
+        }
+        if (!hasNode) {
+          node = props.computeResourceTree[0]
+        }
+        loading.value = false
+
+        if (!node) return
+        onSelectNode(node)
+      },
+    })
+  }
+)
+const checkHasNodeRecursion = (
+  nodes: UI_I_TreeNode[],
+  node: UI_I_TreeNode | null
+): boolean => {
+  if (!node) return false
+
+  let has = false
+  for (let i = 0; i < nodes.length; i++) {
+    const item = nodes[i]
+
+    if (item.id === node.id && item.type === node.type) {
+      has = true
+      break
+    }
+    if (has) break
+
+    has = checkHasNodeRecursion(item.nodes, node)
+  }
+  return has
+}
+
+const onShowNodes = ({
+  node,
+  cb,
+}: {
+  node: UI_I_TreeNode
+  cb: () => void
+}): void => {
+  emits('show-compute-resource-tree', node)
+  cb()
+}
+const onSelectNode = (node: UI_I_TreeNode): void => {
+  emits('select-compute-resource-tree', node)
+
+  emits('update:modelValue', node)
+}
+
+onUnmounted(() => {
+  emits('clear-compute-resource-tree')
+})
+</script>
+
+<style scoped lang="scss">
+.tree-view {
+  &__loading {
+    :deep(.spinner.spinner-inverse) {
+      position: static;
+      width: 45px;
+      height: 45px;
+      min-width: 45px;
+      min-height: 45px;
+    }
+  }
+}
+</style>

package/components/common/vm/actions/add/select/createType/CreateType.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="select-create-type">
+    <atoms-list-select-list
+      v-model="selectedItem"
+      class="select"
+      :items="items"
+    />
+    <p class="description">
+      {{ localization.newVmCreateDescription }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { itemsFunc } from '~/components/common/vm/actions/add/select/createType/config/items'
+
+const props = defineProps<{
+  importFromVMWarevSphere: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedItem = ref<string>('0')
+const items = computed<UI_I_OptionItem[]>(() =>
+  itemsFunc(localization.value, props.importFromVMWarevSphere)
+)
+</script>
+
+<style scoped lang="scss">
+.select-create-type {
+  display: flex;
+  padding-top: 12px;
+
+  .description {
+    color: #333333;
+    font-size: 13px;
+  }
+
+  .description,
+  .select {
+    flex: 1 1 100%;
+    margin-right: 5px;
+  }
+
+  :deep(select) {
+    background-color: transparent;
+    border-color: var(--type-list-border-color);
+  }
+}
+</style>
+
+<style>
+:root {
+  --type-list-border-color: #ccc;
+}
+:root.dark-theme {
+  --type-list-border-color: #000;
+}
+</style>

package/components/common/vm/actions/add/select/createType/config/items.ts

@@ -0,0 +1,26 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const itemsFunc = (
+  localization: UI_I_Localization,
+  importFromVMWarevSphere: string
+): UI_I_OptionItem[] => {
+  return [
+    {
+      text: localization.createNewVirtualMachine,
+      value: '0',
+      disabled: false,
+    },
+    { text: localization.deployVmFromOVF, value: '1', disabled: true },
+    {
+      text: importFromVMWarevSphere,
+      value: '2',
+      disabled: true,
+    },
+    {
+      text: localization.importFromGorizontVS,
+      value: '3',
+      disabled: true,
+    },
+  ]
+}

package/components/common/vm/actions/add/select/models/interfaces.ts

@@ -0,0 +1,32 @@
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_I_ArbitraryObject } from '~/models/interfaces'
+
+export interface UI_I_OsChange {
+  selectedMachineType: UI_I_OptionItem | null
+  selectedOS: UI_I_OptionItem | null
+  selectedVersion: UI_I_OptionItem | null
+  windowsVirtualization: boolean
+}
+
+export interface API_UI_I_CompatibilityCpu {
+  max_vcpus: number
+  models: UI_I_ArbitraryObject<string>
+}
+export interface API_UI_I_Compatibility {
+  compatibility: UI_I_ArbitraryObject<string>
+  guest_os_families: UI_I_ArbitraryObject<string>
+  guest_os_versions: UI_I_ArbitraryObject<UI_I_ArbitraryObject<string>>
+  machine_types: UI_I_ArbitraryObject<string>
+  cpu: API_UI_I_CompatibilityCpu
+  max_memory_mb: number
+}
+
+export interface UI_I_Compatibility {
+  compatibility: UI_I_OptionItem[]
+  guestOsFamilies: UI_I_OptionItem[]
+  guestOsVersions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
+  machineTypes: UI_I_OptionItem[]
+  cpuModels: UI_I_OptionItem[]
+  maxCpus: number
+  maxMemory: number
+}

package/components/common/vm/actions/add/select/models/types.ts

@@ -0,0 +1,44 @@
+export type UI_T_ActionType =
+  | 'newVirtualMachine'
+  | 'openRemoteConsole'
+  | 'deleteFromDisk'
+  | 'removeFromInventory'
+  | 'powerOn'
+  | 'powerOff'
+  | 'suspend'
+  | 'reset'
+  | 'hardStop'
+  | 'shutDownGuestOs'
+  | 'restartGuestOs'
+  | 'mountGuestTools'
+  | 'unmountGuestTools'
+  | 'deleteDatastore'
+  | 'takeSnapshot'
+  | 'revertLatestSnapshot'
+  | 'deleteAllSnapshots'
+
+export type UI_T_CustomizeHardwareField =
+  | 'cpu.vcpus'
+  | 'cpu.max_vcpus'
+  | 'cpu.shares'
+  | 'cpu.core_per_socket'
+  | 'cpu.model'
+  | 'memory.size_mb'
+  | 'memory.limit_mb'
+  | 'memory.reservation_mb'
+  | 'video_card.adapter'
+  | 'video_card.displays'
+  | 'video_card.memory_mb'
+  | 'options.remote_console.type'
+  | 'options.remote_console.spice.img_compression'
+  | 'options.remote_console.spice.jpeg_compression'
+  | 'options.remote_console.spice.zlib_glz_compression'
+  | 'options.remote_console.spice.streaming_mode'
+  | 'options.boot_options.firmware'
+
+export type UI_T_AllField =
+  | UI_T_CustomizeHardwareField
+  | 'compatibility'
+  | 'guest_os_family'
+  | 'guest_os_version'
+  | 'machine_type'

package/components/common/vm/actions/add/select/name/Name.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="select-name">
+    <atoms-alert
+      v-show="errors.length"
+      status="alert-danger"
+      :items="errors"
+      @remove="onRemoveValidationErrors"
+    />
+
+    <form id="virtual-machine-form" @submit.prevent>
+      <label for="virtual-machine-name"
+        >{{ localization.virtualMachineName }}:</label
+      >
+      <input id="virtual-machine-name" v-model.trim="vmName" type="text" />
+    </form>
+
+    <template v-if="props.project === 'sphere'">
+      <p class="new-vm-name-and-folder-instructions mt-1">
+        {{ localization.selectLocationVirtualMachine }}
+      </p>
+      <div class="tree-view-wrap">
+        <common-vm-actions-add-folder-tree-view
+          :data-center="props.dataCenter"
+          @select-node="onSelectNode"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import { API_UI_I_Error } from '~/models/store/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_T_Project } from '~/models/types'
+import { UI_I_TreeNode } from '~/components/common/recursionTree/models/interfaces'
+
+const props = defineProps<{
+  nameFormSubmit: number
+  show: boolean
+  project: UI_T_Project
+  dataCenter?: UI_I_TreeNode // для сферы
+}>()
+const emits = defineEmits<{
+  (event: 'submit', value: [string, UI_I_TreeNode | null]): void
+  (event: 'loading', value: boolean): void
+  (event: 'check-name', value: [[string, UI_I_TreeNode | null], (error: any) => void]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const vmName = ref<string>('')
+
+const selectedNode = ref<UI_I_TreeNode | null>(null)
+const onSelectNode = (node: UI_I_TreeNode): void => {
+  selectedNode.value = node
+}
+
+watch(
+  () => props.nameFormSubmit,
+  () => {
+    submit()
+  }
+)
+const submit = async (): Promise<void> => {
+  const name = vmName.value
+
+  if (name !== '') {
+    const isNameValid = await checkNameIsValid(name)
+    if (!isNameValid) return
+  }
+
+  if (props.project === 'sphere') {
+    if (selectedNode.value?.type !== 'datacenter') {
+      showValidationErrors([
+        localization.value.enterValidLocationVirtualMachine,
+      ])
+      return
+    }
+  }
+
+  onRemoveValidationErrors()
+  emits('submit', [name, selectedNode.value])
+}
+const checkNameIsValid = async (name: string): Promise<boolean> => {
+  emits('loading', true)
+
+  return new Promise((resolve) => {
+    emits('check-name', [
+      [name, selectedNode.value],
+      (error) => {
+        emits('loading', false)
+
+        const status = error?.statusCode || 200
+        switch (status) {
+          case 406: // Invalid name
+            showValidationErrors([
+              localization.value.vmNameValidationDescription,
+            ])
+            resolve(false)
+            break
+          case 409: // Name exist
+            showValidationErrors([
+              localization.value.vmNameExistInSelectedLocation,
+            ])
+            resolve(false)
+            break
+        }
+
+        resolve(true)
+      },
+    ])
+  })
+}
+
+const errors = ref<string[]>([])
+const showValidationErrors = (data: string[]): void => {
+  errors.value = data
+}
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+
+watch(
+  () => props.show,
+  (newValue) => {
+    if (!newValue) return
+
+    const input = document.getElementById('virtual-machine-name')
+    if (!input) return
+
+    setTimeout(() => {
+      input.focus()
+    }, 0)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.select-name {
+  form {
+    display: flex;
+    align-items: center;
+    padding-top: 20px;
+
+    label {
+      width: 216px;
+    }
+    input {
+      width: 345px;
+    }
+  }
+
+  .tree-view-wrap {
+    position: relative;
+    border: 1px solid #000;
+    padding: 5px;
+    max-height: 300px;
+    min-height: 200px;
+    overflow: auto;
+    margin-bottom: 10px;
+  }
+}
+</style>

package/components/common/vm/actions/add/select/os/os.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="select-os">
+    <p class="select-os-block">
+      {{ localization.identifyingGuestSystemInstallation }}
+    </p>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="machine-type-select" class="table-cell"
+        >{{ localization.machineType }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorMachineType"
+        selector="#vm-wizard-machine-type-select"
+        @remove="onRemoveValidationError('machine_type')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-machine-type-select"
+            v-model="selectedMachineType"
+            class="table-cell"
+          >
+            <option
+              v-for="item in machineTypeOptions"
+              :key="item.value"
+              :value="item"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorMachineType }}</template>
+      </atoms-tooltip-error>
+    </div>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="os-select" class="table-cell"
+        >{{ localization.guestOsFamily }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorGuestOsFamily"
+        selector="#vm-wizard-os-select"
+        @remove="onRemoveValidationError('guest_os_family')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-os-select"
+            v-model="selectedOS"
+            class="table-cell"
+            @change="onChangeOS"
+          >
+            <option v-for="item in osOptions" :key="item.value" :value="item">
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorGuestOsFamily }}</template>
+      </atoms-tooltip-error>
+    </div>
+    <div class="select-os-block os-select-wrap table-row">
+      <label for="os-version-select" class="table-cell"
+        >{{ localization.guestOsVersion }}:</label
+      >
+
+      <atoms-tooltip-error
+        :has-error="!!apiErrorGuestOsVersion"
+        selector="#vm-wizard-os-version-select"
+        @remove="onRemoveValidationError('guest_os_version')"
+      >
+        <template #elem>
+          <select
+            id="vm-wizard-os-version-select"
+            v-model="selectedVersion"
+            class="table-cell"
+          >
+            <option
+              v-for="item in versionsOptions"
+              :key="item.value"
+              :value="item"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </template>
+        <template #content>{{ apiErrorGuestOsVersion }}</template>
+      </atoms-tooltip-error>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OsChange } from '~/components/common/vm/actions/add/select/models/interfaces'
+import { UI_I_Localization, UI_I_ArbitraryObject } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = defineProps<{
+  familiesOptions: UI_I_OptionItem[]
+  machineTypesOptions: UI_I_OptionItem[]
+  versionsOptions: UI_I_ArbitraryObject<UI_I_OptionItem[]>
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_OsChange): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const machineTypeOptions = ref<UI_I_OptionItem[]>(props.machineTypesOptions)
+const selectedMachineType = ref<UI_I_OptionItem | null>(null)
+watch(
+  () => props.machineTypesOptions,
+  (val) => {
+    machineTypeOptions.value = [...val]
+    selectedMachineType.value = val[0]
+  },
+  { immediate: true }
+)
+
+const osOptions = ref<UI_I_OptionItem[]>(props.familiesOptions)
+const selectedOS = ref<UI_I_OptionItem | null>(null)
+watch(
+  () => props.familiesOptions,
+  (val) => {
+    osOptions.value = [...val]
+    selectedOS.value = val[0]
+  },
+  { immediate: true }
+)
+const onChangeOS = (): void => {
+  selectedVersion.value = versionsOptions.value[0]
+}
+
+const versionsOptions = computed<UI_I_OptionItem[]>(() => {
+  if (!selectedOS.value) return []
+
+  return props.versionsOptions[selectedOS.value.value] || []
+})
+const selectedVersion = ref<UI_I_OptionItem | null>(null)
+watch(
+  versionsOptions,
+  () => {
+    selectedVersion.value = versionsOptions.value[0]
+  },
+  { immediate: true }
+)
+
+const windowsVirtualization = ref<boolean>(false)
+
+// const isShowHelp = ref<boolean>(false)
+
+watch(
+  [selectedMachineType, selectedOS, selectedVersion, windowsVirtualization],
+  () => {
+    if (!selectedOS.value) return
+
+    emits('change', {
+      selectedMachineType: selectedMachineType.value,
+      selectedOS: selectedOS.value,
+      selectedVersion: selectedVersion.value,
+      windowsVirtualization: windowsVirtualization.value,
+    })
+  },
+  { immediate: true }
+)
+
+const apiErrorMachineType = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'machine_type'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsFamily = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_family'
+    )?.error_message || ''
+  )
+})
+
+const apiErrorGuestOsVersion = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'guest_os_version'
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (type: string): void => {
+  emits('remove-error-by-title', type)
+}
+</script>
+
+<style scoped lang="scss">
+.select-os {
+  .select-os-block {
+    label:not(.windows-virtualization-label) {
+      padding: 0 5px 5px 0;
+    }
+
+    .windows-virtualization-label {
+      padding: 0 4px;
+    }
+  }
+}
+
+#os-select-help-icon {
+  h3 {
+    margin-top: 7px;
+    font-size: 22px;
+    color: #565656;
+  }
+  p {
+    width: 310px;
+    margin-top: 24px;
+    font-size: 14px;
+    color: #565656;
+  }
+}
+</style>