bfg-common 1.5.771 → 1.5.774

package/components/common/configure/advancedSystemSettings/AdvancedSystemSettings.vue

@@ -0,0 +1,49 @@
+<template>
+  <atoms-loader v-show="loading" test-id="advanced-system-settings-spinner" />
+  <div class="advanced-system-settings flex flex-col h-full">
+    <common-configure-advanced-system-settings-tools
+      class="mb-1"
+      @show-edit="isShowEdit = true"
+    />
+
+    <common-configure-advanced-system-settings-table-view :data="settings" />
+
+    <common-configure-advanced-system-settings-modals-edit
+      v-if="isShowEdit"
+      :host="props.host"
+      :settings="settings"
+      @hide="isShowEdit = false"
+      @submit="isShowEdit = false"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  host: string
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const loading = ref<boolean>(false)
+
+const settings = computed<any>(
+  () => $store.getters['advancedSystemSettings/getSettings']
+)
+const getSettings = async (): Promise<void> => {
+  loading.value = true
+
+  await $store.dispatch('advancedSystemSettings/A_GET_SETTINGS', props.host)
+
+  loading.value = false
+}
+getSettings()
+
+const isShowEdit = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+.advanced-system-settings {
+  padding-left: 10px;
+}
+</style>

package/components/common/configure/advancedSystemSettings/modals/edit/Edit.vue

@@ -0,0 +1,55 @@
+<template>
+  <component
+    :is="currentComponent"
+    v-model="settingsLocal"
+    :host="props.host"
+    :settings="props.settings"
+    @hide="onHide"
+    @submit="onSubmit"
+  />
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+  host: string
+  settings: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const settingsLocal = ref<any>(useDeepCopy(props.settings))
+
+
+const loading = ref<boolean>(false)
+
+const onSubmit = (): void => {
+  loading.value = true
+
+  $store.dispatch('advancedSystemSettings/A_UPDATE_SETTINGS', {
+    host: props.host,
+    settings: settingsLocal.value
+  })
+
+  loading.value = false
+
+  onHide()
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/configure/advancedSystemSettings/modals/edit/New.vue

@@ -0,0 +1,37 @@
+<template>
+  <atoms-modal
+      :title="localization.common.edit"
+      :second-title="props.host"
+      test-id="advanced-system-settings-edit"
+      class="advanced-system-settings"
+      show
+      @hide="onHide"
+  >
+    <template #modalBody>
+      <common-configure-advanced-system-settings-table-view :data="props.settings" />
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  host: string
+  settings: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  // (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/common/configure/advancedSystemSettings/modals/edit/Old.vue

@@ -0,0 +1,46 @@
+<template>
+  <atoms-modal
+    :title="localization.common.edit"
+    :second-title="props.host"
+    test-id="advanced-system-settings-edit"
+    class="advanced-system-settings"
+    width="863px"
+    show
+    @hide="onHide"
+    @submit="onSubmit"
+  >
+    <template #modalBody>
+      <common-configure-advanced-system-settings-table-view
+        v-model:settings="model"
+        :data="props.settings"
+        is-edit
+      />
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const model = defineModel<any>({required: true})
+const props = defineProps<{
+  host: string
+  settings: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHide = (): void => {
+  emits('hide')
+}
+const onSubmit = (): void => {
+  emits('submit')
+}
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/configure/advancedSystemSettings/tableView/TableView.vue

@@ -0,0 +1,30 @@
+<template>
+  <component
+    :is="currentComponent"
+    v-model:settings="settings"
+    :data-table="props.data?.items || []"
+    :total-items="props.data?.total_items || 0"
+    :total-pages="props.data?.total_pages || 1"
+    :is-edit="props.isEdit"
+  />
+</template>
+
+<script lang="ts" setup>
+const settings = defineModel<any>('settings', {required: true})
+const props = withDefaults(
+  defineProps<{
+    data: any
+    isEdit?: boolean
+  }>(),
+  { isEdit: false }
+)
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/New.vue'))
+    : defineAsyncComponent(() => import('./old/Old.vue'))
+)
+</script>

package/components/common/configure/advancedSystemSettings/tableView/new/New.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="device-table-container">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :total-pages="props.totalPages"
+      :total-items="props.totalItems"
+      :texts="texts"
+      :default-layout="false"
+      :skeleton="tableSkeleton"
+      test-id="compute-resource-table"
+      class="device-table"
+      size="sm"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <span :class="['device-table__icon', item.data.iconClassName]" />
+        <span class="device-table__text text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+
+      <template #progress="{ item }">
+        <div class="progress flex items-center justify-between w-full">
+          <div class="progress-line">
+            <div
+              v-if="item.data"
+              :style="`width: ${item.data}%`"
+              class="progress-line-fill"
+            ></div>
+          </div>
+          <div
+            :class="[
+              'progress-text',
+              {
+                'progress-full': item.data === 100,
+              },
+            ]"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </template>
+
+      <template #status="{ item }">
+        <ui-chip
+          :test-id="item.data.testId"
+          :color="item.data.chipColor"
+          size="sm"
+          rounded
+        >
+          <ui-icon
+            :name="item.data.icon"
+            width="14px"
+            height="14px"
+            class="chip-icon"
+          ></ui-icon>
+          {{ item.text }}
+        </ui-chip>
+      </template>
+
+      <template #skeleton-header>
+        <div class="flex justify-between items-center">
+          <ui-skeleton-item width="80" height="20" />
+          <ui-skeleton-item width="88" height="28" border-radius="6" />
+        </div>
+      </template>
+    </ui-data-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+  UI_I_TableTexts,
+} 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 {
+  options,
+  getHeaderDataFunc,
+  getBodyDataFunc,
+} from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
+
+const selectedDataLocal = defineModel<number | null>({ required: true })
+const props = defineProps<{
+  dataTable: any[]
+  totalItems: number
+  totalPages: number
+  isEdit: 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.selected2,
+  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 tableSkeleton = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 4,
+  headColumns: [],
+  bodyColumns: [],
+  withoutPagination: true,
+})
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'compute-resource-host-table',
+  title: `${localization.value.common.hosts} (${props.totalItems})`,
+  header: deviceHeadItems.value,
+  body: deviceBodyItems.value,
+}))
+
+const deviceHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  getHeaderDataFunc(localization.value)
+)
+
+const deviceBodyItems = ref<UI_I_DataTableBody[]>([])
+watch(
+  () => props.dataTable,
+  (newValue: UI_T_ComputeResourceTableItem[]) => {
+    if (!newValue?.length) {
+      deviceBodyItems.value = []
+      return
+    }
+
+    deviceBodyItems.value = getBodyDataFunc(newValue, localization.value)
+  },
+  { deep: true, immediate: true }
+)
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  selectedDataLocal.value = value?.[0].row
+}
+</script>
+
+<style lang="scss" scoped>
+.device-table-container {
+  margin: 20px 0 24px;
+  :deep(.column-manager-button.sm span) {
+    font-weight: 500;
+  }
+  :deep(.table-title .title-container h6) {
+    font-size: 12px;
+  }
+  .device-table {
+    &__icon {
+      margin-right: 4px;
+    }
+    &__text {
+      font-size: 12px;
+    }
+  }
+  .progress {
+    &-line {
+      height: 12px;
+      width: 100%;
+      background: #e9ebed8f;
+      border-radius: 6px;
+
+      &-fill {
+        height: 12px;
+        min-width: 12px;
+        background: #008fd6;
+        border-radius: 6px;
+      }
+    }
+
+    &-text {
+      width: 53px;
+      min-width: 53px;
+      margin-left: 8px;
+      text-align: right;
+
+      &.progress-full {
+        color: #ea3223;
+      }
+    }
+  }
+}
+</style>