bfg-common 1.5.64 → 1.5.66

package/components/common/vm/actions/common/select/name/Old.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="select-name">
+    <atoms-alert
+      v-show="props.errors.length"
+      status="alert-danger"
+      :items="props.errors"
+      test-id="name-alert"
+      @remove="emits('remove-validation-errors')"
+    />
+
+    <form id="virtual-machine-form" @submit.prevent>
+      <label for="virtual-machine-name"
+        >{{ localization.common.virtualMachineName }}:</label
+      >
+      <input
+        id="virtual-machine-name"
+        v-model.trim="vmName"
+        data-id="virtual-machine-name-input"
+        type="text"
+        maxlength="54"
+      />
+      <div id="vm-name-help-icon" class="content-signpost relative">
+        <atoms-the-icon
+          data-id="show-vm-name-help-icon"
+          class="icon-show-help"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowHelp = !isShowHelp"
+        />
+        <atoms-tooltip-signpost
+          v-if="isShowHelp"
+          test-id="help-signpost"
+          elem-id="vm-name-help-icon"
+          @hide="isShowHelp = false"
+        >
+          <p>
+            {{ localization.common.vmNameValidationDescription }}
+          </p>
+        </atoms-tooltip-signpost>
+      </div>
+    </form>
+
+    <template v-if="props.project === 'sphere'">
+      <p class="new-vm-name-and-folder-instructions mt-1">
+        {{ localization.common.selectLocationVirtualMachine }}
+      </p>
+      <div class="tree-view-wrap">
+        <common-vm-actions-add-folder-tree-view
+          :data-center="props.dataCenter"
+          @select-node="emits('select-node', $event)"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import { API_UI_I_Error } from '~/lib/models/store/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+const vmName = defineModel<string>('vmName', { required: true })
+const isShowHelp = defineModel<boolean>('isShowHelp', { required: true })
+
+const props = defineProps<{
+  project: UI_T_Project
+  errors: string[]
+  dataCenter?: UI_I_TreeNode // для сферы
+}>()
+const emits = defineEmits<{
+  (event: 'remove-validation-errors'): void
+  (event: 'select-node', value: UI_I_TreeNode): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</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;
+  }
+}
+.content-signpost {
+  .icon-show-help {
+    cursor: pointer;
+  }
+
+  .help-title {
+    font-size: 22px;
+    margin-bottom: 24px;
+  }
+  .signpost {
+    max-width: 360px;
+  }
+}
+</style>

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="select-storage">
-    <ui-alert
-      v-show="props.errors.length"
-      status="alert-danger"
-      test-id="storage-alert"
-      :items="props.errors"
-      @remove="emits('remove-error')"
-    />
+    <Teleport to="#storage-alert-wrapper">
+      <ui-alert
+        v-show="props.errors.length"
+        status="alert-danger"
+        :messages="props.errors"
+        test-id="storage-alert"
+        :items="props.errors"
+        @remove="emits('remove-error')"
+      />
+    </Teleport>
+
     <div class="table-wrap">
       <ui-data-table
         test-id="select-storage-data-table"
@@ -15,8 +19,21 @@
         :loading="loading"
         server-off
         :default-layout="false"
+        size="sm"
         @select-row="onSelectRow"
-      />
+      >
+        <template #insteadOfTitleActions
+          ><h3 class="storage-count">
+            {{ storageCount }}
+          </h3></template
+        >
+        <template #state="{ item }">
+          <ui-chip :color="item.data.color" rounded>
+            <ui-icon :name="item.data.iconClassName" width="14" height="14" />
+            {{ item.data.text }}
+          </ui-chip>
+        </template>
+      </ui-data-table>
     </div>
 
     <div v-if="!props.hideCompatibility" class="compatibility-wrap">
@@ -24,13 +41,21 @@
         {{ localization.inventorySummary.compatibility }}
       </p>
       <div class="compatibility-message flex-align-center">
-        <template v-if="props.selectedStorage">
-          <div class="icon-status-ok" />
-          <span>{{ localization.common.compatibilityChecksSucceeded }}</span>
+        <ui-skeleton-item v-if="loading" width="160px" height="16px" />
+        <template v-else>
+          <template v-if="props.selectedStorage">
+            <ui-icon name="success-fill" width="16" height="16" />
+            <span class="compatibility-message-description">{{
+              localization.common.compatibilityChecksSucceeded
+            }}</span>
+          </template>
+          <template v-else>
+            <!--            <ui-icon name="error" width="16" height="16" />-->
+            <span class="compatibility-message-description">{{
+              localization.vmWizard.noStorageSelected
+            }}</span>
+          </template>
         </template>
-        <div v-else>
-          <br />
-        </div>
       </div>
     </div>
   </div>
@@ -41,8 +66,8 @@ import type { UI_I_DataTable } from 'bfg-uikit/components/ui/dataTable/models/in
 import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
 import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { datastoreLocalizationByState } from '~/components/common/lib/config/states'
 import {
+  tableBodyFunc,
   tableDataFunc,
   tableOptions,
 } from '~/components/common/vm/actions/common/select/storage/new/lib/config/table'
@@ -63,8 +88,13 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const storageCount = computed<string>(() =>
+  localization.value.vmWizard.storageCount.replace(
+    '{0}',
+    data.value.body.length.toString()
+  )
+)
 const loading = ref<boolean>(true)
-
 const data = ref<UI_I_DataTable>(tableDataFunc(localization.value))
 
 watch(
@@ -72,75 +102,12 @@ watch(
   (newValue: UI_I_DatastoreTableItem[]) => {
     if (!newValue.length || data.value.body.length) return
 
-    const { $binary } = useNuxtApp()
-
-    newValue.forEach((item, key) => {
-      const state =
-        localization.value.inventorySummary[
-          datastoreLocalizationByState[item.state]
-        ]
-      data.value.body.push({
-        row: key,
-        collapse: false,
-        isHiddenCollapse: false,
-        collapseToggle: false,
-        isSelected: key === selectedRow.value,
-        data: [
-          {
-            key: item.id,
-            col: 0,
-            text: item.name,
-          },
-          {
-            col: 1,
-            text: state,
-          },
-          { col: 2, text: $binary.round(item.capacity.capacity_mb) },
-          {
-            col: 3,
-            text: $binary.round(item.capacity.provisioned_mb.toString()),
-          },
-          {
-            col: 4,
-            text: $binary.round(item.capacity.free_mb.toString()),
-          },
-          {
-            col: 5,
-            text: $binary.round(item.capacity.used_mb.toString()),
-          },
-          {
-            col: 6,
-            text: item.type_text,
-          },
-          {
-            col: 7,
-            text: item.thin_provisioning
-              ? localization.value.common.yes
-              : localization.value.common.no,
-          },
-          {
-            col: 8,
-            text: item.access_mode,
-          },
-          {
-            col: 9,
-            text: item.hardware_acceleration,
-          },
-          {
-            col: 10,
-            text: item.drive_type,
-          },
-          {
-            col: 11,
-            text: item.device,
-          },
-          {
-            col: 12,
-            text: item.storage_io_control,
-          },
-        ],
-      })
-    })
+    data.value.body = tableBodyFunc(
+      newValue,
+      localization.value,
+      selectedRow.value
+    )
+
     loading.value = false
   },
   { immediate: true, deep: true }
@@ -156,4 +123,67 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style>
+:root {
+  --select-storage-border-color: #e9ebed;
+  --select-storage-bg-color: #ffffff;
+  --select-storage-title-color: #4d5d69;
+  --select-storage-compatibility-description-color: #4d5d69;
+}
+:root.dark-theme {
+  --select-storage-border-color: #e9ebed1f;
+  --select-storage-bg-color: var(--wizard-right-bg);
+  --select-storage-title-color: #e9eaec;
+  --select-storage-compatibility-description-color: #9da6ad;
+}
+</style>
+<style scoped lang="scss">
+.select-storage {
+  padding-top: 16px;
+
+  .storage-count {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--select-storage-title-color);
+  }
+
+  :deep(.bottom-grid-content) {
+    border: 1px solid var(--select-storage-border-color);
+    border-radius: 8px;
+    padding: 12px;
+    background-color: var(--select-storage-bg-color);
+  }
+  :deep(.select-row-item) {
+    background-color: var(--select-storage-bg-color);
+  }
+  :deep(.table-title-actions-container) {
+    justify-content: flex-start;
+  }
+  :deep(.table-container .table-title) {
+    margin-bottom: 12px;
+  }
+
+  .compatibility-wrap {
+    margin-top: 24px;
+
+    .compatibility {
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--select-storage-title-color);
+      margin-bottom: 16px;
+    }
+    .compatibility-message {
+      border-radius: 8px;
+      border: 1px solid var(--select-storage-border-color);
+      padding: 12px;
+      background-color: var(--select-storage-bg-color);
+      gap: 12px;
+
+      .compatibility-message-description {
+        font-size: 13px;
+        color: var(--select-storage-compatibility-description-color);
+      }
+    }
+  }
+}
+</style>

package/components/common/vm/actions/common/select/storage/new/lib/config/table.ts

@@ -1,6 +1,13 @@
-import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableOptions,
+  UI_I_DataTableBody,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_StatusData } from '~/components/common/vm/actions/common/select/storage/new/lib/models/interfaces'
+import { datastoreLocalizationByState } from '~/components/common/lib/config/states'
+import { getStatus } from '~/components/common/vm/actions/common/select/storage/new/lib/utils/utils'
 
 export const tableDataFunc = (
   localization: UI_I_Localization
@@ -161,10 +168,156 @@ export const tableDataFunc = (
   body: [],
 })
 
+export const tableBodyFunc = (
+  data: UI_I_DatastoreTableItem[],
+  localization: UI_I_Localization,
+  selectedRow: any
+): any => {
+  const result: UI_I_DataTableBody[] = []
+  const { $binary } = useNuxtApp()
+
+  data.forEach((item, key) => {
+    const stateData = {
+      iconClassName: '',
+      color: '',
+      isState: true,
+      text: localization.inventorySummary[
+        datastoreLocalizationByState[item.state]
+      ],
+    }
+
+    let thinProvisioningData: UI_I_StatusData | {} = {}
+    let hardwareAccelerationData: UI_I_StatusData | {} = {}
+    let storage_io_control: UI_I_StatusData | {} = {}
+    switch (item.state) {
+      case 0:
+        stateData.iconClassName = 'icon-help'
+        stateData.color = 'primary'
+        break
+      case 1:
+        stateData.iconClassName = 'status-check'
+        stateData.color = 'green'
+        break
+      case 2:
+        stateData.iconClassName = 'warning-outline'
+        stateData.color = 'yellow'
+        break
+      case 3:
+        stateData.iconClassName = 'error-outline'
+        stateData.color = 'red'
+        break
+      case 4:
+        stateData.iconClassName = 'maintenance'
+        stateData.color = 'yellow'
+        break
+      case 5:
+        stateData.iconClassName = 'close'
+        stateData.color = 'red'
+        break
+      case 6:
+        stateData.iconClassName = 'close'
+        stateData.color = 'red'
+        break
+      default:
+        stateData.iconClassName = ''
+        stateData.color = 'default'
+    }
+
+    hardwareAccelerationData =
+      item.hardware_acceleration === 'Unknown'
+        ? {
+            iconClassName: 'icon-help',
+            color: 'primary',
+            isState: true,
+            text: localization.common.unknown,
+          }
+        : {
+            iconClassName: 'status-check',
+            color: 'green',
+            isState: true,
+            text: localization.common.supported,
+          }
+
+    thinProvisioningData = getStatus(item.thin_provisioning)
+    storage_io_control = getStatus(item.storage_io_control)
+
+    result.push({
+      row: key,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+      isSelected: key === selectedRow,
+      data: [
+        {
+          key: item.id,
+          col: 0,
+          text: item.name,
+        },
+        {
+          key: 'state',
+          col: 1,
+          text: stateData.text,
+          data: stateData
+        },
+        { col: 2, text: $binary.round(item.capacity.capacity_mb) },
+        {
+          col: 3,
+          text: $binary.round(item.capacity.provisioned_mb.toString()),
+        },
+        {
+          col: 4,
+          text: $binary.round(item.capacity.free_mb.toString()),
+        },
+        {
+          col: 5,
+          text: $binary.round(item.capacity.used_mb.toString()),
+        },
+        {
+          col: 6,
+          text: item.type_text,
+        },
+        {
+          key: 'state',
+          col: 7,
+          text: item.thin_provisioning
+            ? localization.common.yes
+            : localization.common.no,
+          data: thinProvisioningData
+        },
+        {
+          col: 8,
+          text: item.access_mode,
+        },
+        {
+          key: 'state',
+          col: 9,
+          text: item.hardware_acceleration,
+          data: hardwareAccelerationData
+        },
+        {
+          col: 10,
+          text: item.drive_type,
+        },
+        {
+          col: 11,
+          text: item.device,
+        },
+        {
+          key: 'state',
+          col: 12,
+          text: item.storage_io_control,
+          data: storage_io_control
+        },
+      ],
+    })
+  })
+  return result
+}
+
 export const tableOptions: UI_I_DataTableOptions = {
   isSelectable: true,
   selectType: 'radio',
-  showPagination: true,
+  showPagination: false,
   showPageInfo: false,
   isSortable: true,
   server: false,

package/components/common/vm/actions/common/select/storage/new/lib/models/interfaces.ts

@@ -0,0 +1,6 @@
+export interface UI_I_StatusData {
+  iconClassName: string
+  color: string
+  isState: boolean
+  text: string
+}

package/components/common/vm/actions/common/select/storage/new/lib/utils/utils.ts

@@ -0,0 +1,21 @@
+import type { UI_I_StatusData } from '~/components/common/vm/actions/common/select/storage/new/lib/models/interfaces'
+
+export const getStatus = (
+  status: boolean,
+  text1?: string,
+  text2?: string
+): UI_I_StatusData => {
+  return status
+    ? {
+        iconClassName: 'status-check',
+        color: 'green',
+        isState: true,
+        text: text1 || 'True',
+      }
+    : {
+        iconClassName: 'close',
+        color: 'red',
+        isState: true,
+        text: text2 || 'False',
+      }
+}

package/components/common/vm/actions/common/select/template/Template.vue

@@ -26,7 +26,7 @@ const props = defineProps<{
   templatesTree: UI_I_TreeNode[]
 }>()
 const emits = defineEmits<{
-  (event: 'submit', value: UI_I_TreeNode | null): void
+  (event: 'submit', value: UI_I_TreeNode): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -44,8 +44,7 @@ watch(
 )
 
 const submit = async (cb: Function): Promise<void> => {
-  if (!selectedNode.value || selectedNode.value.type !== 'vm') {
-    // TODO change vm to vmTemplate
+  if (!selectedNode.value || selectedNode.value.type !== 'vmt') {
     errors.value = [localization.value.vmWizard.selectValidTemplate]
     cb(false)
     return

package/components/common/vm/actions/common/select/template/TemplateTreeView.vue

@@ -34,7 +34,7 @@ watch(
   (newValue) => {
     nodes.value = useDeepCopy(newValue)
   },
-  { deep: true, once: true }
+  { deep: true }
 )
 
 const loading = ref<boolean>(false)

package/package.json

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