bfg-common 1.0.0

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/limitIops/LimitIops.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.limitIops }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!apiError"
+            :selector="`.vm-wizard-disk-device-io-field-${props.index}`"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <div class="select mr-1">
+                <select
+                  :id="`vm-wizard-disk-device-io-field-${props.index}`"
+                  v-model="limitIopsTypeLocal"
+                  :class="`vm-wizard-disk-device-io-field-${props.index}`"
+                  @click.stop
+                >
+                  <option
+                    v-for="(item, key) in limitIopsTypeOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ apiError }}</template>
+          </atoms-tooltip-error>
+
+          <atoms-combobox
+            v-show="limitIopsType !== 'unlimited'"
+            v-model.number="limitIopsLocal"
+            :items="limitIopsOptions"
+            @click.stop
+          />
+          <div v-show="limitIopsErrorText" class="flex-align-center">
+            <atoms-tooltip>
+              <template #elem>
+                <atoms-the-icon
+                  width="24px"
+                  height="24px"
+                  class="is-error tooltip-trigger"
+                  name="info"
+                />
+              </template>
+              <template #content>
+                {{ limitIopsErrorText }}
+              </template>
+            </atoms-tooltip>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  limitIopsOptionsFunc,
+  limitIopsTypeOptionsFunc,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/limitIops/config/options'
+import { UI_I_Localization } 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<{
+  limitIops: number
+  limitIopsType: string
+  index: number
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:limit-iops', value: number): void
+  (event: 'update:limit-iops-type', value: string): void
+  (event: 'valid', value: boolean): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const limitIopsTypeOptions = ref<UI_I_OptionItem[]>(
+  limitIopsTypeOptionsFunc(localization.value)
+)
+
+const minLimitIops = 16
+const maxLimitIops = 2_147_483_647
+const limitIopsOptions = ref<UI_I_OptionItem[]>(
+  limitIopsOptionsFunc(localization.value, minLimitIops, maxLimitIops)
+)
+
+const limitIopsLocal = computed<number>({
+  get() {
+    return props.limitIops
+  },
+  set(newValue) {
+    emits('update:limit-iops', newValue)
+  },
+})
+const limitIopsTypeLocal = computed<string>({
+  get() {
+    return props.limitIopsType
+  },
+  set(newValue) {
+    emits('update:limit-iops-type', newValue)
+  },
+})
+
+const limitIopsErrorText = computed<string>(() => {
+  if (limitIopsTypeLocal.value === 'unlimited') return ''
+
+  const validValue = /^\d+(\.\d+)?$/.test(props.limitIops + '')
+  if (!validValue) {
+    return localization.value.inputContainsInvalidCharacters
+  }
+
+  if (+props.limitIops < minLimitIops || +props.limitIops > maxLimitIops) {
+    return localization.value.enterValueBetween
+      .replace('{0}', '' + minLimitIops)
+      .replace('{1}', '' + maxLimitIops)
+  }
+  return ''
+})
+watch(limitIopsErrorText, (val) => {
+  emits('valid', !!val)
+})
+
+const typeError = computed<string>(() => `disk_devices[${props.index}].io`)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/limitIops/config/options.ts

@@ -0,0 +1,28 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const limitIopsTypeOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.unlimited, value: 'unlimited' },
+    { text: localization.custom, value: 'custom' },
+  ]
+}
+
+export const limitIopsOptionsFunc = (
+  localization: UI_I_Localization,
+  minLimitIops: number,
+  maxLimitIops: number
+): UI_I_OptionItem[] => {
+  return [
+    {
+      text: `${localization.minimum}: ${minLimitIops}`,
+      value: minLimitIops,
+    },
+    {
+      text: `${localization.maximum}: ${maxLimitIops}`,
+      value: maxLimitIops,
+    },
+  ]
+}

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/mode/Mode.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.diskMode }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          :selector="`.vm-wizard-disk-device-mode-field-${props.index}`"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-disk-device-mode-field-${props.index}`"
+                v-model="diskModeLocal"
+                :class="`vm-wizard-disk-device-mode-field-${props.index}`"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="item in diskModeOptions"
+                  :key="item.value"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ apiError }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { diskModeOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/mode/config/options'
+import { UI_I_Localization } 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<{
+  diskMode: string
+  index: number
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:disk-mode', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const diskModeOptions = ref<UI_I_OptionItem[]>(
+  diskModeOptionsFunc(localization.value)
+)
+
+const diskModeLocal = computed<string>({
+  get() {
+    return props.diskMode
+  },
+  set(newValue) {
+    emits('update:disk-mode', newValue)
+  },
+})
+
+const typeError = computed<string>(
+  () => `disk_devices[${props.index}].disk_mode`
+)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/mode/config/options.ts

@@ -0,0 +1,18 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const diskModeOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.dependent, value: 'dependent' },
+    {
+      text: localization.independentPersistent,
+      value: 'independent_persistent',
+    },
+    {
+      text: localization.independentNonPersistent,
+      value: 'independent_nonpersistent',
+    },
+  ]
+}

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/provisioning/Provisioning.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.diskProvisioning }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          :selector="`.vm-wizard-disk-device-provisioning-field-${props.index}`"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-disk-device-provisioning-field-${props.index}`"
+                v-model="diskProvisioningLocal"
+                :disabled="props.disabled"
+                :class="`vm-wizard-disk-device-provisioning-field-${props.index}`"
+              >
+                <option
+                  v-for="(item, key) in diskProvisioningOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ apiError }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { diskProvisioningOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/provisioning/config/options'
+import { UI_I_Localization } 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<{
+  diskProvisioning: string
+  index: number
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  disabled: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:disk-provisioning', str: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const diskProvisioningOptions = ref<UI_I_OptionItem[]>(
+  diskProvisioningOptionsFunc(localization.value)
+)
+
+const diskProvisioningLocal = computed<string>({
+  get() {
+    return props.diskProvisioning
+  },
+  set(newValue) {
+    emits('update:disk-provisioning', newValue)
+  },
+})
+
+const typeError = computed<string>(
+  () => `disk_devices[${props.index}].provision_type`
+)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/provisioning/config/options.ts

@@ -0,0 +1,15 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const diskProvisioningOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.thickProvisionLazyZeroed, value: 'thick' },
+    {
+      text: localization.thickProvisionEagerZeroed,
+      value: 'thickzero',
+    },
+    { text: localization.thinProvision, value: 'thin' },
+  ]
+}

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/sharing/Sharing.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.sharing }}
+      </template>
+      <template #stackBlockContent>
+        <atoms-tooltip-error
+          :has-error="!!apiError"
+          :selector="`.vm-wizard-disk-device-sharing-field-${props.index}`"
+          @remove="onRemoveValidationError"
+        >
+          <template #elem>
+            <div class="select">
+              <select
+                :id="`vm-wizard-disk-device-sharing-field-${props.index}`"
+                v-model="sharingLocal"
+                :class="`vm-wizard-disk-device-sharing-field-${props.index}`"
+                :disabled="props.disabled"
+              >
+                <option
+                  v-for="(item, key) in sharingOptions"
+                  :key="key"
+                  :value="item.value"
+                >
+                  {{ item.text }}
+                </option>
+              </select>
+            </div>
+          </template>
+          <template #content>{{ apiError }}</template>
+        </atoms-tooltip-error>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { sharingOptionsFunc } from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/sharing/config/options'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  sharing: string
+  index: number
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:sharing', value: string): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const sharingOptions = ref<UI_I_OptionItem[]>(
+  sharingOptionsFunc(localization.value)
+)
+
+const sharingLocal = computed<string>({
+  get() {
+    return props.sharing
+  },
+  set(newValue) {
+    emits('update:sharing', newValue)
+  },
+})
+
+const typeError = computed<string>(() => `disk_devices[${props.index}].sharing`)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/sharing/config/options.ts

@@ -0,0 +1,12 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const sharingOptionsFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => {
+  return [
+    { text: localization.unspecified, value: '' },
+    { text: localization.noSharing, value: 'no' },
+    { text: localization.multiWriter, value: 'yes' },
+  ]
+}

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newNetwork/Location.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <Teleport to="body">
+      <atoms-modal
+        class="network-modal"
+        :show="props.locationModalIsShow"
+        :title="localization.selectNetwork"
+        @submit="onSubmitLocationModal"
+        @hide="onHideLocationModal"
+      >
+        <template #modalBody>
+          <atoms-alert
+            v-show="errors.length"
+            status="alert-danger"
+            :items="errors"
+            @remove="onRemoveValidationErrors"
+          />
+          <div class="network-select-dialog-content">
+            <div class="k-header k-grid-toolbar flex-justify-end">
+              <div class="filter-input pull-right flex">
+                <button
+                  id="location-filter-button"
+                  class="nav-icon fa fa-filter filter-button"
+                >
+                  <atoms-the-icon
+                    class="filter-icon"
+                    fill="#4c5356"
+                    name="filter"
+                  />
+                </button>
+                <input
+                  id="location-filter"
+                  v-model="locationFilter"
+                  type="text"
+                  :placeholder="localization.filter"
+                />
+              </div>
+            </div>
+            <atoms-table-simple-table
+              :head-items="tagsHeadItems"
+              :body-items="tagsBodyItems"
+              editable
+              @select="onSelectLocation"
+            />
+          </div>
+        </template>
+      </atoms-modal>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_NetworkTableItem } from '~/models/store/network/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_TableHeadItem,
+  UI_I_TableBodyItem,
+} from '~/components/atoms/table/simpleTable/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  locationModalIsShow: boolean
+  networksTable: UI_I_NetworkTableItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select', value: UI_I_NetworkTableItem): void
+}>()
+
+const onSubmitLocationModal = (): void => {
+  if (selectedLocation.value === null) {
+    errors.value = [localization.value.noNetworkSelected]
+    return
+  }
+  emits('select', selectedLocation.value)
+}
+const onHideLocationModal = (): void => {
+  emits('hide')
+}
+
+const locationFilter = ref('')
+const tagsHeadItems = ref<UI_I_TableHeadItem[]>([
+  { text: localization.value.name },
+  { text: localization.value.nsxPortGroupId },
+  { text: localization.value.distributedSwitch },
+])
+const tagsBodyItemsDefault = ref<UI_I_TableBodyItem[][]>([])
+const tagsBodyItems = computed<UI_I_TableBodyItem[][]>(() => {
+  const term = locationFilter.value.trim().toLowerCase()
+  return tagsBodyItemsDefault.value.filter((row) => {
+    return row.some((item) => item.text.trim().toLowerCase().includes(term))
+  })
+})
+watch(
+  () => props.networksTable,
+  (networks) => {
+    tagsBodyItemsDefault.value = []
+    networks?.forEach((network) => {
+      tagsBodyItemsDefault.value.push([
+        { text: network.name, editable: false },
+        { text: '--', editable: false },
+        { text: '--', editable: false },
+      ])
+    })
+  },
+  { immediate: true }
+)
+
+const selectedLocation = ref<UI_I_NetworkTableItem | null>(null)
+const getNetworkByName = (name: string): UI_I_NetworkTableItem | null => {
+  return props.networksTable?.find((network) => network.name === name) || null
+}
+const onSelectLocation = (_key: number, value: UI_I_TableBodyItem[]): void => {
+  const networkName = value[0].text
+  selectedLocation.value = getNetworkByName(networkName)
+}
+
+const errors = ref<string[]>([])
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+</script>
+
+<style scoped lang="scss">
+.network-select-dialog-content {
+  min-height: 300px;
+  margin-top: 10px;
+
+  .filter-button {
+    border-style: none;
+    background-color: transparent;
+    padding: 0;
+
+    .filter-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+</style>