bfg-common 1.5.63 → 1.5.65

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

@@ -1,173 +1,326 @@
-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_Localization } from '~/lib/models/interfaces'
-
-export const tableDataFunc = (
-  localization: UI_I_Localization
-): UI_I_DataTable => ({
-  id: 'select-storage',
-  header: [
-    {
-      col: 0,
-      colName: localization.common.name,
-      text: localization.common.name,
-      isSortable: true,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 1,
-      colName: localization.inventorySummary.state,
-      text: localization.inventorySummary.state,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 2,
-      colName: localization.common.capacity,
-      text: localization.common.capacity,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 3,
-      colName: localization.common.provisioned,
-      text: localization.common.provisioned,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 4,
-      colName: localization.common.free,
-      text: localization.common.free,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 5,
-      colName: localization.common.used,
-      text: localization.common.used,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 6,
-      colName: localization.common.type,
-      text: localization.common.type,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 7,
-      colName: localization.common.thinProvisioning,
-      text: localization.common.thinProvisioning,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 8,
-      colName: localization.common.access,
-      text: localization.common.access,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 9,
-      colName: localization.common.hardwareAcceleration,
-      text: localization.common.hardwareAcceleration,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 10,
-      colName: localization.common.driverType,
-      text: localization.common.driverType,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 11,
-      colName: localization.common.device,
-      text: localization.common.device,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 12,
-      colName: localization.common.storageIoControl,
-      text: localization.common.storageIoControl,
-      isSortable: false,
-      sort: 'asc',
-      sortColumn: true,
-      width: '150px',
-      show: true,
-      filter: true,
-    },
-    {
-      col: 13,
-      colName: 'default-actions',
-      text: '',
-      show: true,
-    },
-  ],
-
-  body: [],
-})
-
-export const tableOptions: UI_I_DataTableOptions = {
-  isSelectable: true,
-  selectType: 'radio',
-  showPagination: true,
-  showPageInfo: false,
-  isSortable: true,
-  server: false,
-  isResizable: true,
-  showColumnManager: true,
-}
+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
+): UI_I_DataTable => ({
+  id: 'select-storage',
+  header: [
+    {
+      col: 0,
+      colName: localization.common.name,
+      text: localization.common.name,
+      isSortable: true,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 1,
+      colName: localization.inventorySummary.state,
+      text: localization.inventorySummary.state,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 2,
+      colName: localization.common.capacity,
+      text: localization.common.capacity,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 3,
+      colName: localization.common.provisioned,
+      text: localization.common.provisioned,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 4,
+      colName: localization.common.free,
+      text: localization.common.free,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 5,
+      colName: localization.common.used,
+      text: localization.common.used,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 6,
+      colName: localization.common.type,
+      text: localization.common.type,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 7,
+      colName: localization.common.thinProvisioning,
+      text: localization.common.thinProvisioning,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 8,
+      colName: localization.common.access,
+      text: localization.common.access,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 9,
+      colName: localization.common.hardwareAcceleration,
+      text: localization.common.hardwareAcceleration,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 10,
+      colName: localization.common.driverType,
+      text: localization.common.driverType,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 11,
+      colName: localization.common.device,
+      text: localization.common.device,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 12,
+      colName: localization.common.storageIoControl,
+      text: localization.common.storageIoControl,
+      isSortable: false,
+      sort: 'asc',
+      sortColumn: true,
+      width: '150px',
+      show: true,
+      filter: true,
+    },
+    {
+      col: 13,
+      colName: 'default-actions',
+      text: '',
+      show: true,
+    },
+  ],
+
+  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: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showColumnManager: true,
+}

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

@@ -1,64 +1,64 @@
-<template>
-  <div class="select-template">
-    <atoms-alert
-      v-show="errors.length"
-      status="alert-danger"
-      :items="errors"
-      test-id="template-alert"
-      @remove="onRemoveValidationErrors"
-    />
-
-    <div class="tree-view-wrap">
-      <common-vm-actions-common-select-template-tree-view
-        :templates-tree="props.templatesTree"
-        @select-node="onSelectNode"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-const props = defineProps<{
-  templateSubmit: null | Function
-  templatesTree: UI_I_TreeNode[]
-}>()
-const emits = defineEmits<{
-  (event: 'submit', value: UI_I_TreeNode): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedNode = ref<UI_I_TreeNode | null>(null)
-const onSelectNode = (node: UI_I_TreeNode): void => {
-  selectedNode.value = node
-}
-
-watch(
-  () => props.templateSubmit,
-  (newValue) => {
-    newValue && submit(newValue)
-  }
-)
-
-const submit = async (cb: Function): Promise<void> => {
-  if (!selectedNode.value || selectedNode.value.type !== 'vmt') {
-    errors.value = [localization.value.vmWizard.selectValidTemplate]
-    cb(false)
-    return
-  }
-
-  onRemoveValidationErrors()
-  emits('submit', selectedNode.value)
-  cb(true)
-}
-
-const errors = ref<string[]>([])
-const onRemoveValidationErrors = (): void => {
-  errors.value = []
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="select-template">
+    <atoms-alert
+      v-show="errors.length"
+      status="alert-danger"
+      :items="errors"
+      test-id="template-alert"
+      @remove="onRemoveValidationErrors"
+    />
+
+    <div class="tree-view-wrap">
+      <common-vm-actions-common-select-template-tree-view
+        :templates-tree="props.templatesTree"
+        @select-node="onSelectNode"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+const props = defineProps<{
+  templateSubmit: null | Function
+  templatesTree: UI_I_TreeNode[]
+}>()
+const emits = defineEmits<{
+  (event: 'submit', value: UI_I_TreeNode): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedNode = ref<UI_I_TreeNode | null>(null)
+const onSelectNode = (node: UI_I_TreeNode): void => {
+  selectedNode.value = node
+}
+
+watch(
+  () => props.templateSubmit,
+  (newValue) => {
+    newValue && submit(newValue)
+  }
+)
+
+const submit = async (cb: Function): Promise<void> => {
+  if (!selectedNode.value || selectedNode.value.type !== 'vmt') {
+    errors.value = [localization.value.vmWizard.selectValidTemplate]
+    cb(false)
+    return
+  }
+
+  onRemoveValidationErrors()
+  emits('submit', selectedNode.value)
+  cb(true)
+}
+
+const errors = ref<string[]>([])
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+</script>
+
+<style scoped lang="scss"></style>