bfg-common 1.4.46 → 1.4.47

package/components/common/wizards/datastoreNew/add/sharedStorm/partitionConfiguration/sizeGraphic/sizeGraphic.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="graphic-size">
+    <svg
+      class="graphic-size__svg"
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100"
+      viewBox="0 0 782 100"
+    >
+      <defs aria-hidden="true">
+        <clipPath id="highcharts-zdne8nn-42-">
+          <rect x="0" y="0" width="802" height="80" fill="none"></rect>
+        </clipPath>
+      </defs>
+      <rect
+        fill="#ffffff"
+        class="highcharts-background"
+        x="0"
+        y="0"
+        width="782"
+        height="100"
+        rx="0"
+        ry="0"
+        aria-hidden="true"
+      ></rect>
+      <rect
+        fill="none"
+        class="highcharts-plot-background"
+        x="-10"
+        y="10"
+        width="802"
+        height="80"
+        aria-hidden="true"
+      ></rect>
+      <rect
+        fill="none"
+        class="highcharts-plot-border"
+        data-z-index="1"
+        x="-10"
+        y="10"
+        width="802"
+        height="80"
+        aria-hidden="true"
+      ></rect>
+      <g class="highcharts-series-group" data-z-index="3" aria-hidden="false">
+        <g
+          class="highcharts-series highcharts-series-0 highcharts-area-series"
+          data-z-index="0.1"
+          opacity="1"
+          transform="translate(-10,10) scale(1 1)"
+          clip-path="url(#highcharts-zdne8nn-42-)"
+          aria-hidden="false"
+        >
+          <path
+            fill="rgb(218,218,218)"
+            d="M 7.8627450980392 80 L 7.8627450980392 0 L 401 0 L 794.13725490196 0 L 794.13725490196 80 L 794.13725490196 80 L 794.13725490196 80 L 401 80 L 7.8627450980392 80 L 7.8627450980392 80 Z"
+            class="highcharts-area"
+            data-z-index="0"
+            aria-hidden="true"
+          ></path>
+          <path
+            fill="none"
+            d="M 7.8627450980392 80 L 7.8627450980392 0 L 401 0 L 794.13725490196 0 L 794.13725490196 80"
+            class="highcharts-graph"
+            data-z-index="1"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            aria-hidden="false"
+            role="region"
+            tabindex="-1"
+            aria-label="Empty, series 1 of 1 with 5 data points."
+            style="outline: 0"
+          ></path>
+          <path
+            fill="none"
+            d="M 7.8627450980392 80 L 7.8627450980392 0 L 401 0 L 794.13725490196 0 L 794.13725490196 80"
+            visibility="visible"
+            data-z-index="2"
+            class="highcharts-tracker-line"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke="rgba(192,192,192,0.0001)"
+            stroke-width="20"
+            aria-hidden="true"
+          ></path>
+        </g>
+        <g
+          class="highcharts-markers highcharts-series-0 highcharts-area-series highcharts-tracker"
+          data-z-index="0.1"
+          opacity="1"
+          transform="translate(-10,10) scale(1 1)"
+          clip-path="none"
+          aria-hidden="true"
+        ></g>
+      </g>
+      <rect
+        x="0"
+        y="10"
+        width="782"
+        height="80"
+        fill="rgba(255,255,255,0)"
+        stroke="rgb(15,172,201)"
+        stroke-width="6"
+        data-z-index="3"
+        class="storage-partition-layout-selection-mask"
+      ></rect>
+      <rect
+        x="0"
+        y="10"
+        :width="setProgress"
+        height="80"
+        fill="rgba(15,172,201, 0.6)"
+        data-z-index="3"
+        class="storage-partition-layout-selection-mask"
+      ></rect>
+      <text
+        x="391"
+        text-anchor="middle"
+        class="highcharts-title"
+        data-z-index="4"
+        style="color: #333333; font-size: 18px; fill: #333333"
+        y="14"
+        aria-hidden="true"
+      ></text>
+      <text
+        x="391"
+        text-anchor="middle"
+        class="highcharts-subtitle"
+        data-z-index="4"
+        style="color: #666666; fill: #666666"
+        y="14"
+        aria-hidden="true"
+      ></text>
+      <text
+        x="0"
+        text-anchor="start"
+        class="highcharts-caption"
+        data-z-index="4"
+        style="color: #666666; fill: #666666"
+        y="112"
+        aria-hidden="true"
+      ></text>
+      <g
+        class="highcharts-data-labels highcharts-series-0 highcharts-area-series highcharts-tracker"
+        data-z-index="6"
+        opacity="1"
+        transform="translate(-10,10) scale(1 1)"
+        aria-hidden="true"
+      >
+        <g
+          class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined"
+          data-z-index="1"
+          style="cursor: default; pointer-events: none; white-space: nowrap"
+          transform="translate(354,26)"
+        >
+          <text
+            x="5"
+            data-z-index="1"
+            y="17"
+            style="
+              color: #333;
+              font-family: 'ProximaNova', 'Avenir Next', 'Helvetica Neue', Arial,
+                sans-serif, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
+              font-size: 12px;
+              font-weight: bold;
+              fill: #333;
+            "
+          >
+            <tspan
+              class="highcharts-text-outline"
+              fill="#FFFFFF"
+              stroke="#FFFFFF"
+              stroke-width="2px"
+              stroke-linejoin="round"
+              style=""
+            >
+              {{ emptySizeText }}
+            </tspan>
+            <tspan x="5" y="17">{{ emptySizeText }}</tspan>
+          </text>
+        </g>
+      </g>
+
+      <common-wizards-datastore-add-shared-storm-partition-configuration-graphic-tooltip
+        :size="emptySizeText"
+      />
+    </svg>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  selectedSize: number | null
+  capacity: number
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const width = ref<number>(782)
+
+const setProgress = computed<number>(() => {
+  if (!props.selectedSize) return 0
+  return (width.value * props.selectedSize) / props.capacity
+})
+
+const emptySizeText = computed<string>(() => {
+  const { empty, gb } = localization.value
+
+  return `${empty}: ${props.capacity} ${gb}`
+})
+</script>
+
+<style lang="scss" scoped>
+.graphic-size {
+  margin-top: 24px;
+  &:hover {
+    .graphic-tooltip {
+      visibility: visible;
+      opacity: 1;
+      transform: translate(331px, 25px);
+    }
+  }
+}
+</style>

package/components/common/wizards/datastoreNew/add/sharedStorm/version/Version.vue

@@ -0,0 +1,39 @@
+<template>
+  <section class="nfs-version">
+    <common-select-radio-group
+      v-model="selectedVersion"
+      :options="vmfsVersion"
+    />
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+import { UI_T_VmfsType } from '~/components/common/wizards/datastore/add/lib/models/types'
+import { vmfsVersionFunc } from '~/components/common/wizards/datastore/add/sharedStorm/version/lib/config/versionOptions'
+
+const props = defineProps<{
+  version: UI_T_VmfsType
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+const emits = defineEmits<{
+  (event: 'update:version', value: UI_T_VmfsType): void
+}>()
+
+const vmfsVersion = ref<UI_I_RadioOption[]>(vmfsVersionFunc(localization.value))
+
+const selectedVersion = computed<UI_T_VmfsType>({
+  get() {
+    return props.version
+  },
+  set(newValue) {
+    emits('update:version', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.nfs-version {
+}
+</style>

package/components/common/wizards/datastoreNew/add/sharedStorm/version/lib/config/versionOptions.ts

@@ -0,0 +1,21 @@
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+export const vmfsVersionFunc = (
+  localization: UI_I_Localization
+): UI_I_RadioOption[] => {
+  return [
+    {
+      label: 'VMFS 6',
+      value: 'vmfs-6',
+      disabled: false,
+      description: localization.vmfsVersionDesc1,
+    },
+    {
+      label: 'VMFS 5',
+      value: 'vmfs-5',
+      disabled: false,
+      description: localization.vmfsVersionDesc2,
+    },
+  ]
+}

package/components/common/wizards/datastoreNew/add/types/Types.vue

@@ -0,0 +1,78 @@
+<template>
+  <section class="datastore-types">
+    <div class="header-row">
+      <span class="datastore-types__subtitle">
+        {{ localization.specifyDatastoreType }}
+      </span>
+      <div id="type-select-help-icon" class="signpost-container relative">
+        <atoms-the-icon
+          data-id="toggle-type-select-help-icon"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowTypeHelp = !isShowTypeHelp"
+        />
+        <atoms-tooltip-signpost
+          v-if="isShowTypeHelp"
+          elem-id="type-select-help-icon"
+          test-id="select-datastore-type"
+          @hide="isShowTypeHelp = false"
+        >
+          <p class="help-desc">{{ localization.datastoreTypeHelpDesc }}</p>
+        </atoms-tooltip-signpost>
+      </div>
+    </div>
+
+    <common-select-radio-group
+      v-model="selectedDatastoreTypeLocal"
+      :options="datastoreTypes"
+      @change="onChangeType"
+    />
+  </section>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+import type { UI_T_DatastoreType } from '~/components/common/wizards/datastore/add/lib/models/types'
+import { E_DatastoreTypeKode } from '~/components/common/wizards/datastoreNew/add/lib/models/enums'
+import { datastoreTypesFunc } from '~/components/common/wizards/datastore/add/types/lib/config/typeOptions'
+
+const props = defineProps<{
+  project: UI_T_Project
+}>()
+const selectedDatastoreTypeLocal =
+  defineModel<UI_T_DatastoreType>('datastoreType')
+const typeCodeLocal = defineModel()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const datastoreTypes = ref<UI_I_RadioOption[]>(
+  datastoreTypesFunc(localization.value, props.project)
+)
+const onChangeType = (): void => {
+  typeCodeLocal.value = E_DatastoreTypeKode[selectedDatastoreTypeLocal.value]
+}
+
+const isShowTypeHelp = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+.datastore-types {
+  .signpost-container {
+    display: flex;
+    cursor: pointer;
+
+    .help-desc-container {
+      max-width: 350px;
+    }
+  }
+  .header-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+</style>

package/components/common/wizards/datastoreNew/add/types/lib/config/typeOptions.ts

@@ -0,0 +1,49 @@
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_T_Project } from '~/lib/models/types'
+import { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+export const datastoreTypesFunc = (
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): UI_I_RadioOption[] => {
+  const types = [
+    {
+      label: localization.stormSharedStorage,
+      value: 'shared-storm',
+      disabled: false,
+      description: localization.sharedStormDesc,
+      isTooltip: false,
+      tooltipContent: localization.stormSharedStorageHelpDesc,
+      testId: 'datastore-type-shared-storm',
+    },
+    {
+      label: localization.nfs,
+      value: 'nfs',
+      disabled: false,
+      description: localization.nfsDesc,
+      isTooltip: false,
+      tooltipContent: localization.nfsHelpDesc,
+      testId: 'datastore-type-nfs',
+    },
+    // {
+    //   label: localization.vVol,
+    //   value: 'vVol',
+    //   disabled: true,
+    //   desc: localization.vVolDesc,
+    // },
+  ]
+
+  if (project === 'procurator') {
+    types.unshift({
+      label: localization.localStorage,
+      value: 'local',
+      disabled: false,
+      description: localization.localDesc,
+      isTooltip: false,
+      tooltipContent: localization.localStorageHelpDesc,
+      testId: 'datastore-type-local',
+    })
+  }
+
+  return types
+}

package/lib/models/interfaces.ts

@@ -32,6 +32,7 @@ export interface UI_I_Localization {
   snapshots: UI_I_ArbitraryObject<string>
   importVms: UI_I_ArbitraryObject<string>
   storageDevice: UI_I_ArbitraryObject<string>
+  scheduledTasks: UI_I_ArbitraryObject<string>
 }
 export interface UI_I_SendTaskParams {
   method: string

package/package.json

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