bfg-common 1.0.0

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/CpuModel.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.cpuModel }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!apiError"
+            selector="#vm-wizard-cpu-model-field"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <div class="select">
+                <select
+                  id="vm-wizard-cpu-model-field"
+                  :value="props.cpuModel"
+                  :disabled="props.disabled"
+                  @change="changeCpuModel"
+                >
+                  <option
+                    v-for="(item, key) in cpuModelOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ apiError }}</template>
+          </atoms-tooltip-error>
+
+          <div class="passthrough-host-cpu-wrap flex-align-center">
+            <input
+              id="passthrough-host-cpu"
+              v-model="passthroughHostCpuLocal"
+              :disabled="props.disabled"
+              type="checkbox"
+              @change="changePassthroughHostCpu"
+            />
+            <label for="passthrough-host-cpu" class="label-text-normal">{{
+              localization.passthroughHostCpu
+            }}</label>
+            <div id="passthrough-help-icon" class="flex-align-center relative">
+              <atoms-the-icon
+                fill="#0072a3"
+                width="24px"
+                height="24px"
+                name="info-circle"
+                class="pointer"
+                @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
+              />
+              <Teleport to="body">
+                <atoms-tooltip-signpost
+                  v-if="isShowPassthroughHost"
+                  elem-id="passthrough-help-icon"
+                  @hide="isShowPassthroughHost = false"
+                >
+                  <h3 class="passthrough-help-title">
+                    {{ localization.help }}
+                  </h3>
+
+                  <p class="passthrough-help-text">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A
+                    cum eius expedita, fuga mollitia perferendis quod soluta
+                    vel? Dolor, illo, nam? A consequatur, consequuntur eos
+                    impedit iusto labore sunt tempora!
+                  </p>
+                </atoms-tooltip-signpost>
+              </Teleport>
+            </div>
+          </div>
+          <div class="divider"></div>
+          <div class="flex-align-center">
+            <input
+              id="host-model-cpu"
+              v-model="hostModelCpuLocal"
+              type="checkbox"
+              :disabled="props.disabled"
+              @change="changeHostModelCpu"
+            />
+            <label for="host-model-cpu" class="label-text-normal">{{
+              localization.hostModelCpu
+            }}</label>
+            <div id="host-model-help-icon" class="flex-align-center relative">
+              <atoms-the-icon
+                fill="#0072a3"
+                width="24px"
+                height="24px"
+                name="info-circle"
+                class="pointer"
+                @click.stop="isShowHostModel = !isShowHostModel"
+              />
+              <Teleport to="body">
+                <atoms-tooltip-signpost
+                  v-if="isShowHostModel"
+                  elem-id="host-model-help-icon"
+                  @hide="isShowHostModel = false"
+                >
+                  <h3 class="host-model-help-title">
+                    {{ localization.help }}
+                  </h3>
+
+                  <p class="host-model-help-text">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A
+                    cum eius expedita, fuga mollitia perferendis quod soluta
+                    vel? Dolor, illo, nam? A consequatur, consequuntur eos
+                    impedit iusto labore sunt tempora!
+                  </p>
+                </atoms-tooltip-signpost>
+              </Teleport>
+            </div>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  cpuModel: string
+  passthroughHostCpu: boolean
+  hostModelCpu: boolean
+  cpuModels: UI_I_OptionItem[]
+  isEdit: boolean
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:cpu-model', value: string): boolean
+  (event: 'update:passthrough-host-cpu', value: boolean): boolean
+  (event: 'update:host-model-cpu', value: boolean): boolean
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const cpuModelOptions = ref<UI_I_OptionItem[]>(props.cpuModels)
+watch(
+  () => props.cpuModels,
+  (newValue) => {
+    cpuModelOptions.value = [...newValue]
+  }
+)
+
+const passthroughHostCpuLocal = computed({
+  get() {
+    return props.passthroughHostCpu
+  },
+  set(newValue) {
+    emits('update:passthrough-host-cpu', newValue)
+  },
+})
+const hostModelCpuLocal = computed({
+  get() {
+    return props.hostModelCpu
+  },
+  set(newValue) {
+    emits('update:host-model-cpu', newValue)
+  },
+})
+
+const changeCpuModel = (event: UI_I_HTMLSelectElement): void => {
+  emits('update:cpu-model', event.target.value)
+  emits('update:passthrough-host-cpu', false)
+  emits('update:host-model-cpu', false)
+}
+const changePassthroughHostCpu = (event: Event): void => {
+  const target = event.target as HTMLInputElement
+  emits('update:cpu-model', target.checked ? '' : props.cpuModels?.[0].value)
+  emits('update:host-model-cpu', false)
+}
+const changeHostModelCpu = (event: Event): void => {
+  const target = event.target as HTMLInputElement
+  emits('update:cpu-model', target.checked ? '' : props.cpuModels?.[0].value)
+  emits('update:passthrough-host-cpu', false)
+}
+
+const isShowPassthroughHost = ref<false>(false)
+const isShowHostModel = ref<false>(false)
+
+const typeError = 'cpu.model'
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find((message) => message.field === typeError)
+      ?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError)
+}
+</script>
+
+<style scoped lang="scss">
+.passthrough-host-cpu-wrap {
+  margin-right: 8px;
+}
+#passthrough-host-cpu,
+#host-model-cpu {
+  margin: 0 4px 0 0;
+}
+
+.divider {
+  height: 16px;
+  width: 1px;
+  background-color: var(--global-border-color);
+  margin: 0 6px 0 0;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/Hv.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.hardwareVirtualization }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-space-between">
+          <div class="flex-align-center">
+            <input
+              id="expose-hardware-assisted-virtualization"
+              v-model="hardwareVirtualizationLocal"
+              type="checkbox"
+              disabled
+            />
+            <label
+              for="expose-hardware-assisted-virtualization"
+              :class="['label-text-normal', { 'div-disabled': true }]"
+              >{{
+                localization.exposeHardwareAssistedVirtualizationGuestOs
+              }}</label
+            >
+          </div>
+
+          <div id="hv-help-icon">
+            <atoms-the-icon
+              fill="#0072a3"
+              width="24px"
+              height="24px"
+              name="info-circle"
+              @click.stop="isShowHvHelp = !isShowHvHelp"
+            />
+            <Teleport to="body">
+              <atoms-tooltip-signpost
+                v-if="isShowHvHelp"
+                elem-id="hv-help-icon"
+                @hide="isShowHvHelp = false"
+              >
+                <h3 class="hv-help-title">
+                  {{ localization.help }}
+                </h3>
+
+                <p class="hv-help-text">
+                  {{ localization.hardwareVirtualizationHelpDescription }}
+                </p>
+              </atoms-tooltip-signpost>
+            </Teleport>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+const localization = computed(() => useLocal())
+
+const props = defineProps<{
+  hardwareVirtualization: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:hardware-virtualization', value: boolean): boolean
+}>()
+
+const hardwareVirtualizationLocal = computed<boolean>({
+  get() {
+    return props.hardwareVirtualization
+  },
+  set(newValue) {
+    emits('update:hardware-virtualization', newValue)
+  },
+})
+
+const isShowHvHelp = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+#expose-hardware-assisted-virtualization {
+  margin: 4px 4px 0 0;
+}
+
+h3.hv-help-title {
+  margin-top: 7px;
+  font-size: 22px;
+  color: #565656;
+}
+p.hv-help-text {
+  width: 310px;
+  margin-top: 24px;
+  font-size: 14px;
+  color: #565656;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/Iommu.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.iommu }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-space-between">
+          <div class="flex-align-center">
+            <input
+              id="enable-iommu"
+              v-model="iommuLocal"
+              type="checkbox"
+              disabled
+            />
+            <label
+              for="enable-iommu"
+              :class="['label-text-normal', { 'div-disabled': true }]"
+              >{{ localization.enabled }}</label
+            >
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+const localization = computed(() => useLocal())
+
+const props = defineProps<{
+  iommu: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:iommu', value: boolean): boolean
+}>()
+
+const iommuLocal = computed<boolean>({
+  get() {
+    return props.iommu
+  },
+  set(newValue) {
+    emits('update:iommu', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+#enable-iommu {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/MaxCpu.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.maxCpu }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!maxVcpusLocalAndApiErrorsTexts"
+            selector="#vm-wizard-max-vcpus-field input"
+            @remove="emits('remove-error-by-title', 'cpu.max_vcpus')"
+          >
+            <template #elem>
+              <atoms-combobox
+                id="vm-wizard-max-vcpus-field"
+                v-model.number="selectedMaxCpuLocal"
+                :items="cpuOptions"
+                :disabled="props.disabled"
+                @click.stop
+              />
+            </template>
+            <template #content>{{ maxVcpusLocalAndApiErrorsTexts }}</template>
+          </atoms-tooltip-error>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+const localization = computed(() => useLocal())
+
+const props = defineProps<{
+  cpuOptions: UI_I_OptionItem[]
+  selectedMaxCpu: number
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:selected-max-cpu', value: number): void
+  (event: 'invalid', value: boolean): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const selectedMaxCpuLocal = computed<number>({
+  get() {
+    return props.selectedMaxCpu
+  },
+  set(newValue) {
+    emits('update:selected-max-cpu', newValue)
+  },
+})
+
+const apiErrorLocal = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === 'cpu.max_vcpus'
+    )?.error_message || ''
+  )
+})
+
+const errorTextLocal = computed<string>(() => {
+  const validValue = /^\d+(\.\d+)?$/.test(selectedMaxCpuLocal.value + '')
+  if (!validValue) {
+    return localization.value.inputContainsInvalidCharacters
+  }
+
+  const min = props.cpuOptions[0].value
+  const max = props.cpuOptions[1].value
+  if (selectedMaxCpuLocal.value < min || selectedMaxCpuLocal.value > max) {
+    return localization.value.memoryMustBe
+      .replace('{0}', min)
+      .replace('{1}', max)
+  }
+
+  return ''
+})
+const maxVcpusLocalAndApiErrorsTexts = computed<string>(() => {
+  const localError = errorTextLocal.value
+  const apiError = apiErrorLocal.value
+
+  let result = ''
+  if (localError && !apiError) result = localError
+  if (!localError && !apiError) result = apiError
+  if (localError && apiError) result = localError + ', ' + apiError
+  if (!localError && apiError) result = apiError
+
+  return result
+})
+const isInvalid = computed<boolean>(() => !!errorTextLocal.value)
+watch(isInvalid, (val) => {
+  emits('invalid', val)
+})
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/Pc.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.performanceCounters }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-space-between">
+          <div class="flex-align-center">
+            <input
+              id="enable-performance-counters"
+              v-model="performanceCountersLocal"
+              type="checkbox"
+              disabled
+            />
+            <label
+              for="enable-performance-counters"
+              :class="['label-text-normal', { 'div-disabled': true }]"
+              >{{ localization.enableVirtualizedCpuPerformanceCounters }}</label
+            >
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  performanceCounters: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:performance-counters', value: boolean): void
+}>()
+
+const performanceCountersLocal = computed<boolean>({
+  get() {
+    return props.performanceCounters
+  },
+  set(newValue) {
+    emits('update:performance-counters', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+#enable-performance-counters {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/Sa.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.schedulingAffinity }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-space-between">
+          <div class="flex-align-center">
+            <input
+              id="sa-edit-setting-input"
+              v-model="schedulingAffinityLocal"
+              type="text"
+              class="edit-setting-input"
+              disabled
+            />
+          </div>
+
+          <div id="sa-help-icon">
+            <atoms-the-icon
+              fill="#0072a3"
+              width="24px"
+              height="24px"
+              name="info-circle"
+              @click.stop="isShowSaHelp = !isShowSaHelp"
+            />
+            <Teleport to="body">
+              <atoms-tooltip-signpost
+                v-if="isShowSaHelp"
+                elem-id="sa-help-icon"
+                @hide="isShowSaHelp = false"
+              >
+                <h3 class="sa-help-title">
+                  {{ localization.help }}
+                </h3>
+
+                <p class="sa-help-text">
+                  {{ localization.schedulingAffinityHelpDescription1 }}
+                </p>
+                <p class="sa-help-text">
+                  {{ localization.schedulingAffinityHelpDescription2 }}
+                </p>
+                <p class="sa-help-text">
+                  {{ localization.schedulingAffinityHelpDescription3 }}
+                </p>
+                <p class="sa-help-text">
+                  <strong>{{ localization.hyperthreadingStatus }}: </strong>
+                  {{ localization.inactive }}
+                </p>
+                <p class="sa-help-text">
+                  <strong>{{ localization.availableCpus }}: </strong>
+                  8({{ localization.physicalCpus }})
+                </p>
+              </atoms-tooltip-signpost>
+            </Teleport>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+const localization = computed(() => useLocal())
+
+const props = defineProps<{
+  schedulingAffinity: string
+}>()
+const emits = defineEmits<{
+  (event: 'update:scheduling-affinity', value: string): void
+}>()
+
+const schedulingAffinityLocal = computed<string>({
+  get() {
+    return props.schedulingAffinity
+  },
+  set(newValue) {
+    emits('update:scheduling-affinity', newValue)
+  },
+})
+
+const isShowSaHelp = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+h3.sa-help-title {
+  margin-top: 7px;
+  font-size: 22px;
+  color: #565656;
+}
+p.sa-help-text {
+  width: 310px;
+  margin-top: 24px;
+  font-size: 14px;
+  color: #565656;
+}
+p.sa-help-text strong {
+  font-size: 14px;
+  font-weight: bold;
+  color: #565656;
+}
+</style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/cpu/config/cpuOptions.ts

@@ -0,0 +1,19 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const cpuOptionsFunc = (
+  localization: UI_I_Localization,
+  min: number,
+  max: number
+): UI_I_OptionItem[] => {
+  return [
+    {
+      text: `${localization.minimum} ${min}`,
+      value: min,
+    },
+    {
+      text: `${localization.maximum} ${max}`,
+      value: max,
+    },
+  ]
+}