bfg-common 1.5.514 → 1.5.516

package/components/common/pages/backups/modals/createBackup/configuration/ConfigurationOld.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="configuration">
+    <div class="stack-view">
+      <common-pages-backups-modals-create-backup-configuration-strategy
+        v-model="model"
+      />
+      <!--      <common-pages-backups-modals-create-backup-configuration-backup-window-->
+      <!--        v-model="model"-->
+      <!--      />-->
+      <common-pages-backups-modals-create-backup-configuration-max-bandwidth
+        v-model="model"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+</script>
+
+<style lang="scss" scoped>
+.stack-view {
+  :deep(.select-input__inner) {
+    min-width: max-content;
+  }
+}
+</style>

package/components/common/pages/backups/modals/createBackup/configuration/backupWindow/BackupWindow.vue

@@ -1,29 +1,29 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-window-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.backupWindow }}</span>
-    </template>
-    <template #stackBlockContent>
-      <input
-        v-model="model.start_window_min"
-        data-id="hours-input"
-        type="number"
-        class="hrs"
-      />
-    </template>
-  </atoms-stack-block>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-window-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.backupWindow }}</span>
+    </template>
+    <template #stackBlockContent>
+      <input
+        v-model="model.start_window_min"
+        data-id="hours-input"
+        type="number"
+        class="hrs"
+      />
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/MaxBandwidth.vue

@@ -1,69 +1,69 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-max-bandwidth-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.maxBandwidth }}</span>
-    </template>
-    <template #stackBlockContent>
-      <div class="flex-align-center">
-        <input
-          v-model="maxBindwidthLocal"
-          data-id="mbps-input"
-          type="number"
-          class="mbps"
-        />
-
-        <common-select-input
-          v-model="selectedType"
-          :data="maxBandwidthOptionsLocal"
-          test-id="backup-max-bandwidth-type"
-          class="ml-1"
-        />
-      </div>
-    </template>
-  </atoms-stack-block>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import type { UI_T_BandwidthOption } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import { maxBandwidthOptions } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $binary }: any = useNuxtApp()
-
-const maxBandwidthOptionsLocal =
-  ref<UI_I_SelectInputItem[]>(maxBandwidthOptions)
-
-const maxBindwidthLocal = computed<number>({
-  get() {
-    return selectedType.value === 1
-      ? $binary.bToGb(model.value.bandwidth_limit)
-      : $binary.bToMb(model.value.bandwidth_limit)
-  },
-  set(newValue: number) {
-    model.value.bandwidth_limit =
-      selectedType.value === 1
-        ? $binary.gbToB(newValue)
-        : $binary.mbToB(newValue)
-  },
-})
-
-const selectedType = ref<UI_T_BandwidthOption>(0)
-watch(selectedType, (newValue) => {
-  if (newValue === 1) model.value.bandwidth_limit *= 1_024
-  else model.value.bandwidth_limit /= 1_024
-})
-</script>
-
-<style lang="scss" scoped>
-#backup-transaction-logs {
-  margin: 4px 4px 0 0;
-}
-</style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-max-bandwidth-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.maxBandwidth }}</span>
+    </template>
+    <template #stackBlockContent>
+      <div class="flex-align-center">
+        <input
+          v-model="maxBindwidthLocal"
+          data-id="mbps-input"
+          type="number"
+          class="mbps"
+        />
+
+        <common-select-input
+          v-model="selectedType"
+          :data="maxBandwidthOptionsLocal"
+          test-id="backup-max-bandwidth-type"
+          class="ml-1"
+        />
+      </div>
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_T_BandwidthOption } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import { maxBandwidthOptions } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary }: any = useNuxtApp()
+
+const maxBandwidthOptionsLocal =
+  ref<UI_I_SelectInputItem[]>(maxBandwidthOptions)
+
+const maxBindwidthLocal = computed<number>({
+  get() {
+    return selectedType.value === 1
+      ? $binary.bToGb(model.value.bandwidth_limit)
+      : $binary.bToMb(model.value.bandwidth_limit)
+  },
+  set(newValue: number) {
+    model.value.bandwidth_limit =
+      selectedType.value === 1
+        ? $binary.gbToB(newValue)
+        : $binary.mbToB(newValue)
+  },
+})
+
+const selectedType = ref<UI_T_BandwidthOption>(0)
+watch(selectedType, (newValue) => {
+  if (newValue === 1) model.value.bandwidth_limit *= 1_024
+  else model.value.bandwidth_limit /= 1_024
+})
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options.ts

@@ -1,6 +1,6 @@
-import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
-
-export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
-  { label: 'Mbps', value: 0 },
-  { label: 'Gbps', value: 1 },
-]
+import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
+
+export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
+  { label: 'Mbps', value: 0 },
+  { label: 'Gbps', value: 1 },
+]

package/components/common/pages/backups/modals/createBackup/configuration/strategy/Strategy.vue

@@ -1,38 +1,38 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-strategy-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.strategy }}</span>
-    </template>
-    <template #stackBlockContent>
-      <common-select-input
-        v-model="model.strategy"
-        :data="strategyOptions"
-        test-id="backup-strategy"
-      />
-    </template>
-  </atoms-stack-block>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const strategyOptions = ref<UI_I_SelectInputItem[]>(
-  strategyOptionsFunc(localization.value)
-)
-</script>
-
-<style lang="scss" scoped>
-#backup-transaction-logs {
-  margin: 4px 4px 0 0;
-}
-</style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-strategy-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.strategy }}</span>
+    </template>
+    <template #stackBlockContent>
+      <common-select-input
+        v-model="model.strategy"
+        :data="strategyOptions"
+        test-id="backup-strategy"
+      />
+    </template>
+  </atoms-stack-block>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const strategyOptions = ref<UI_I_SelectInputItem[]>(
+  strategyOptionsFunc(localization.value)
+)
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/datastores/Datastores.vue

@@ -1,59 +1,34 @@
-<template>
-  <div class="datastores h-full">
-    <common-pages-backups-modals-create-backup-datastores-table-view
-      v-model:selected="model.backup_storage"
-      :data-table="props.datastoreTable?.items || []"
-      :total-items="props.datastoreTable?.total_items || 0"
-      :total-pages="props.datastoreTable?.total_pages || 1"
-      :loading="props.datastoreTableLoading"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type {
-  UI_I_BackupDatastoreTable,
-  UI_I_CreateBackupForm
-} from '~/components/common/pages/backups/modals/lib/models/interfaces'
-
-const props = defineProps<{
-  datastoreTable: UI_I_BackupDatastoreTable | null
-  datastoreTableLoading: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'change', value: string[]): void
-}>()
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const selectedKeys = ref<string[]>([])
-
-watch(
-  () => props.datastoreTable,
-  () => {
-    selectedKeys.value = []
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => model.value.backup_storage,
-  (newValue: string) => {
-    const selectedNames: string[] = []
-
-    props.datastoreTable?.items.forEach((item) => {
-      if (newValue === item.id) selectedNames.push(item.name)
-    })
-
-    emits('change', selectedNames)
-  },
-  { deep: true, immediate: true }
-)
-</script>
-
-<style lang="scss" scoped>
-.backups-table-content {
-  height: 100%;
-  padding: 0 10px 10px 10px;
-}
-</style>
+<template>
+  <common-pages-backups-modals-create-backup-datastores-new
+    v-if="isNewView"
+    v-model="model"
+    :datastore-table="props.datastoreTable"
+    :datastore-table-loading="props.datastoreTableLoading"
+  />
+  <common-pages-backups-modals-create-backup-datastores-old
+    v-else
+    v-model="model"
+    :datastore-table="props.datastoreTable"
+    :datastore-table-loading="props.datastoreTableLoading"
+  />
+</template>
+
+<script lang="ts" setup>
+
+import type { UI_I_BackupDatastoreTable } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const props = defineProps<{
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/common/pages/backups/modals/createBackup/datastores/DatastoresNew.vue

@@ -0,0 +1,23 @@
+<template>
+  <common-pages-backups-modals-create-backup-datastores-table-view-new-table-view
+    v-model="model.backup_storage"
+    :datastore-table="props.datastoreTable"
+    :datastore-table-loading="props.datastoreTableLoading"
+  />
+</template>
+<script setup lang="ts">
+import type {
+  UI_I_BackupDatastoreTable,
+  UI_I_CreateBackupForm
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const props = defineProps<{
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+}>()
+</script>
+<style scoped lang="scss">
+
+</style>

package/components/common/pages/backups/modals/createBackup/datastores/DatastoresOld.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="datastores h-full">
+    <common-pages-backups-modals-create-backup-datastores-table-view-old-table-view
+      v-model:selected="model.backup_storage"
+      :data-table="props.datastoreTable?.items || []"
+      :total-items="props.datastoreTable?.total_items || 0"
+      :total-pages="props.datastoreTable?.total_pages || 1"
+      :loading="props.datastoreTableLoading"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_BackupDatastoreTable,
+  UI_I_CreateBackupForm
+} from '~/components/common/pages/backups/modals/lib/models/interfaces'
+
+const props = defineProps<{
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+}>()
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+</script>
+
+<style lang="scss" scoped>
+.backups-table-content {
+  height: 100%;
+  padding: 0 10px 10px 10px;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/datastores/tableView/new/TableView.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="datastore-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :loading="props.datastoreTableLoading"
+      :total-pages="props.datastoreTable?.total_pages"
+      :total-items="props.datastoreTable?.total_items"
+      :texts="texts"
+      :default-layout="false"
+      :skeleton="skeletonData"
+      size="sm"
+      test-id="vm-backup-datastore-table"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <span :class="['icon', item.data.iconClassName]"></span>
+        <span :title="item.text" class="text-ellipsis ml-1 datastore-table-text">
+          {{ item.text }}
+        </span>
+      </template>
+
+      <template #status="{ item }">
+        <ui-chip
+          :test-id="item.data.testId"
+          :color="item.data.chipColor"
+          size="sm"
+          rounded
+        >
+          <ui-icon
+            :name="item.data.iconClassName"
+            width="14px"
+            height="14px"
+            class="chip-icon"
+          ></ui-icon>
+          {{ item.text }}
+        </ui-chip>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+<script setup lang="ts">
+
+import type { UI_I_TableTexts } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import {
+  getBodyDataFunc,
+  getHeaderDataFunc,
+  options
+} from '~/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/config/table'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_BackupDatastoreTable
+} from "~/components/common/pages/backups/modals/lib/models/interfaces";
+
+
+const selectedRow = defineModel<string>({ required: true })
+
+const props = defineProps<{
+  datastoreTable: UI_I_BackupDatastoreTable | null
+  datastoreTableLoading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+const skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 5,
+  headColumns: [],
+  bodyColumns: [],
+  withoutPagination: true,
+})
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'vm-backup-datastores-table',
+  header: headItems.value,
+  body: bodyItems.value,
+  title: `${localization.value.common.storages} (${props.datastoreTable?.total_items})`,
+}))
+
+
+const headItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+
+const bodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => props.datastoreTable?.items,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = getBodyDataFunc(newValue, localization.value, selectedRow.value)
+  },
+  { deep: true, immediate: true }
+)
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  selectedRow.value = value[0].data[0]?.data?.id
+}
+</script>
+<style scoped lang="scss">
+.datastore-table {
+  :deep(.title-container-top-info h6.title-container-top-selected-rows) {
+    font-size: 12px;
+  }
+  :deep(.ui-main-no-items-found span) {
+    font-size: 14px;
+  }
+
+  &-text {
+    font-size: 12px;
+  }
+}
+</style>