bfg-common 1.4.853 → 1.4.855

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -1,70 +1,40 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-new
-    v-if="isNewView"
-    :type="props.type"
-    :chart="props.chart"
-    :language="props.language"
-    :selected-chart-type="props.selectedChartType"
-    :selected-timespan-type="props.selectedTimespanType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :host-id="props.hostId"
-    :selected-metrics-keys="props.selectedMetricsKeys"
-    :total-metric-items="props.totalMetricItems"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    @update-chart-type="emits('update-chart-type', $event)"
-    @update-custom-time="emits('update-custom-time', $event)"
-    @update-timespan-type="emits('update-timespan-type', $event)"
-    @update-unit-count="emits('update-unit-count', $event)"
-    @update-period-type="emits('update-period-type', $event)"
-    @update-custom-date-from="emits('update-custom-date-from', $event)"
-    @update-custom-date-to="emits('update-custom-date-to', $event)"
-    @update-custom-time-from="emits('update-custom-time-from', $event)"
-    @update-custom-time-to="emits('update-custom-time-to', $event)"
-    @select-objects="emits('select-objects', $event)"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-old
-    v-else
-    :type="props.type"
-    :chart="props.chart"
-    :language="props.language"
-    :selected-chart-type="props.selectedChartType"
-    :selected-timespan-type="props.selectedTimespanType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="props.totalCores"
-    :host-id="props.hostId"
-    :selected-metrics-keys="props.selectedMetricsKeys"
-    :total-metric-items="props.totalMetricItems"
-    :selected-objects="props.selectedObjects"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    @update-chart-type="emits('update-chart-type', $event)"
-    @update-custom-time="emits('update-custom-time', $event)"
-    @update-timespan-type="emits('update-timespan-type', $event)"
-    @update-unit-count="emits('update-unit-count', $event)"
-    @update-period-type="emits('update-period-type', $event)"
-    @update-custom-date-from="emits('update-custom-date-from', $event)"
-    @update-custom-date-to="emits('update-custom-date-to', $event)"
-    @update-custom-time-from="emits('update-custom-time-from', $event)"
-    @update-custom-time-to="emits('update-custom-time-to', $event)"
-    @select-objects="emits('select-objects', $event)"
-  />
+  <div class="timespan-objects-section-direction">
+    <common-chart-options-modal-counters-timespan-form
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $event)"
+      @update-timespan-type="emits('update-timespan-type', $event)"
+      @update-unit-count="emits('update-unit-count', $event)"
+      @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object
+      :type="props.type"
+      :chart="props.chart"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="props.totalMetricItems"
+      :selected-objects="props.selectedObjects"
+      :loading="props.objectsLoading"
+      :current-items="props.objectsData"
+      @select-objects="emits('select-objects', $event)"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -110,10 +80,16 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'select-objects', value: string): void
 }>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.timespan-objects-section-direction {
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 1024px) {
+  .timespan-objects-section-direction {
+    flex-direction: column;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/Object.vue

@@ -1,21 +1,30 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-new
-    v-if="isNewView"
-    v-model:selected-row="selectedRow"
-    :table-type="tableType"
-    :loading="props.loading"
-    :body-items="bodyItems"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-old
-    v-else
-    v-model:selected-row="selectedRow"
-    v-model:column-items="columnItems"
-    v-model:pagination="pagination"
-    :table-type="tableType"
-    :loading="props.loading"
-    :head-items="headItems"
-    :body-items="bodyItems"
-  />
+  <div class="vertical-flex-container chart-option-objects-split">
+    <span class="chart-options-grid-title">
+      {{ localization.inventoryMonitor.selectObjectForChart }}:
+    </span>
+    <div class="flex-to-absolute-positioning-container">
+      <div class="flex-to-absolute-positioning-container-inner">
+        <atoms-table-data-grid
+          v-model:selected-row="selectedRow"
+          v-model:column-keys="columnItems"
+          v-model:page-size="pagination.pageSize"
+          v-model:page="pagination.page"
+          :type="tableType"
+          class="data-table"
+          test-id="object-table"
+          :loading="props.loading"
+          :head-items="headItems"
+          :body-items="bodyItems"
+          :total-items="bodyItems.length"
+          :total-pages="1"
+          hide-footer
+          server-off
+        >
+        </atoms-table-data-grid>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,10 +61,6 @@ const emits = defineEmits<{
   (event: 'select-objects', value: string): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const tableType = computed<UI_T_DataGridType>(() => {

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/Metrics.vue

@@ -1,30 +1,42 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-metrics-metrics-new
-    v-if="isNewView"
-    v-model:selected-metric="selectedMetricLocal"
-    :metrics-items="props.metricsItems"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-metrics-old
-    v-else
-    v-model:selected-metric="selectedMetricLocal"
-    :metrics-items="props.metricsItems"
-  />
+  <div class="chart-option-groups-container">
+    <span>{{ localization.inventoryMonitor.chartMetrics }}</span>
+    <atoms-tabs-vertical-tabs
+      v-model="selectedMetricLocal"
+      :items="props.metricsItems"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
 
-const selectedMetricLocal = defineModel<string>('selectedMetric', {
-  required: true,
-})
-
 const props = defineProps<{
   metricsItems: UI_I_VerticalTabs[]
+  selectedMetric: string
 }>()
 
-const { $store }: any = useNuxtApp()
+const emits = defineEmits<{
+  (event: 'update:selected-metric', value: string): void
+}>()
 
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedMetricLocal = computed<string>({
+  get() {
+    return props.selectedMetric
+  },
+  set(newValue) {
+    emits('update:selected-metric', newValue)
+  },
+})
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.chart-option-groups-container {
+  margin-top: 10px;
+  flex-basis: 20%;
+  //min-width: 20%;
+}
+</style>

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalNew.vue

@@ -30,8 +30,8 @@
           <ui-input-with-datepicker
             id="date-from"
             v-model="currentDateFromLocal"
-            :format="datepickerFormat"
             test-id="date-from"
+            format="mm-dd-yyyy"
             time-format="12"
           />
         </div>
@@ -43,8 +43,8 @@
           <ui-input-with-datepicker
             id="date-to"
             v-model="currentDateToLocal"
-            :format="datepickerFormat"
             test-id="date-to"
+            format="mm-dd-yyyy"
             time-format="12"
           />
         </div>
@@ -56,9 +56,8 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
+import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
 
 const alertShow = defineModel<boolean>('alert-show')
 const currentDateFrom = defineModel<string>('current-date-from')
@@ -87,10 +86,6 @@ const { $isDate, $getUnixByDate, $formattedDate, $formattedTime } = useNuxtApp()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const datepickerFormat = computed<string>(() =>
-  getUiDatepickerFormatByLanguage(props.currentLang)
-)
-
 const titleLocal = computed<string>(() =>
   props.titleIntervalModal.replace(':', '')
 )

package/components/common/pages/tasks/Tasks.vue

@@ -109,4 +109,18 @@ onUnmounted(() => {
     z-index: 1000 !important; // TODO надо удалить потом (clr style)
   }
 }
+
+:deep(.table-container) {
+  grid-template-rows: min-content auto min-content;
+}
+
+:deep(.data-table-skeleton) {
+  height: inherit;
+  display: flex;
+  flex-direction: column;
+
+  .footer-row {
+    margin-top: auto;
+  }
+}
 </style>

package/components/common/pages/tasks/table/Table.vue

@@ -7,6 +7,7 @@
     :total-pages="props.totalPages"
     :total-items="props.totalItems"
     :texts="texts"
+    :skeleton="skeletonData"
     class="task-table"
     @sort="onSorting"
     @pagination="onPagination"
@@ -90,6 +91,20 @@
     <template #expand="{ item }">
       <common-pages-tasks-table-expand-details :data="item.data" />
     </template>
+
+    <template #skeleton-header>
+      <div class="skeleton-header">
+        <div class="left-skeleton">
+          <ui-skeleton-item width="70" height="16" />
+          <div class="vertical-line"></div>
+          <ui-skeleton-item width="70" height="16" />
+          <ui-skeleton-item width="70" height="16" />
+        </div>
+        <div class="right-skeleton">
+          <ui-skeleton-item width="128" height="36" border-radius="8" />
+        </div>
+      </div>
+    </template>
   </ui-data-table>
 </template>
 
@@ -99,6 +114,7 @@ import type {
   UI_I_DataTable,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
+  UI_I_DataTableSkeleton,
   UI_I_Pagination,
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
@@ -144,6 +160,11 @@ const texts = computed<UI_I_TableTexts>(() => ({
   exportSelected: localization.value.common.exportSelected,
   all: localization.value.common.all,
 }))
+const skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 6,
+  headColumns: [],
+  bodyColumns: [],
+})
 
 const actionsShowId = ref<number>(-1)
 
@@ -306,4 +327,26 @@ const onSelectNodeOfTree = (
     }
   }
 }
+
+.skeleton-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .left-skeleton {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+    .vertical-line {
+      height: 32px;
+      border-right: 1px solid var(--table-line);
+    }
+  }
+
+  .right-skeleton {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+  }
+}
 </style>

package/components/common/pages/tasks/table/lib/config/config.ts

@@ -114,7 +114,7 @@ export const getHeaderDataFunc = (
     text: localization.common.server,
     isSortable: true,
     sort: 'asc',
-    width: '180px',
+    width: '400px',
     show: true,
     filter: true,
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.853",
+  "version": "1.4.855",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.20",
-    "bfg-uikit": "1.0.354",
+    "bfg-uikit": "1.0.356",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }

package/components/common/chartOptionsModal/counters/timespan/form/FormNew.vue

@@ -1,254 +0,0 @@
-<template>
-  <div class="timespan-form-container">
-    <p class="block-title">{{ localization.inventoryMonitor.timespan }}</p>
-    <ui-select
-      v-model="localSelectedTimespanLocal"
-      :items="constructedTimespanOptions"
-      test-id="timespan-local"
-      select-width="100%"
-      size="md"
-    />
-
-    <div class="radio-container">
-      <ui-radio
-        v-model="localPeriodTypeLocal"
-        :label="localization.common.last"
-        :disabled="isDisabledCustomForm"
-        test-id="last-from"
-        value="last"
-        size="sm"
-      />
-      <div class="row-container">
-        <ui-input
-          v-model="localLastLocal"
-          :disabled="isDisabledCustomFormLast"
-          test-id="local-last"
-        />
-        <ui-select
-          v-model="localSelectedCustomTimeLocal"
-          :items="constructedCustomTimeOptions"
-          :disabled="isDisabledCustomFormLast"
-          test-id="custom-time"
-          select-width="100%"
-          size="md"
-        />
-      </div>
-    </div>
-    <div class="radio-container">
-      <ui-radio
-        v-model="localPeriodTypeLocal"
-        :label="localization.common.timeRange"
-        :disabled="isDisabledCustomForm"
-        test-id="last-from"
-        value="period"
-        size="sm"
-      />
-
-      <div
-        :class="['disabled-content', { disabled: isDisabledCustomFormRange }]"
-      >
-        <ui-input-with-datepicker
-          id="date-from"
-          v-model="constructedDateFromLocal"
-          :format="datepickerFormat"
-          test-id="date-from"
-          time-format="12"
-          :disabled="isDisabledCustomFormRange"
-        />
-      </div>
-
-      <div
-        :class="['disabled-content', { disabled: isDisabledCustomFormRange }]"
-      >
-        <ui-input-with-datepicker
-          id="date-to"
-          v-model="constructedDateToLocal"
-          :format="datepickerFormat"
-          test-id="date-to"
-          time-format="12"
-          :disabled="isDisabledCustomFormRange"
-        />
-      </div>
-    </div>
-    <p class="date-time-info">
-      {{ localization.inventoryMonitor.dateTimeIsoFormat }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
-
-const localSelectedTimespanLocal = defineModel<string>(
-  'localSelectedTimespan',
-  { required: true }
-)
-const localPeriodTypeLocal = defineModel<string>('localPeriodType', {
-  required: true,
-})
-const localLastLocal = defineModel<number>('localLast', {
-  required: true,
-})
-const localSelectedCustomTimeLocal = defineModel<string>(
-  'localSelectedCustomTime',
-  {
-    required: true,
-  }
-)
-const localCurrentDateFromLocal = defineModel<string>('localCurrentDateFrom', {
-  required: true,
-})
-const currentTimeFromLocal = defineModel<string>('currentTimeFrom', {
-  required: true,
-})
-const currentTimeToLocal = defineModel<string>('currentTimeTo', {
-  required: true,
-})
-const currentDateToLocal = defineModel<string>('currentDateTo', {
-  required: true,
-})
-
-const props = defineProps<{
-  timespanOptions: UI_I_OptionItem[]
-  customTimeOptions: UI_I_OptionItem[]
-  language: string
-}>()
-
-const {
-  $isDate,
-  $getUnixByDate,
-  $formattedDate,
-  $formattedTime,
-  $getDateFormat,
-} = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isDisabledCustomForm = computed<boolean>(
-  () => localSelectedTimespanLocal.value !== 'custom_interval'
-)
-const isDisabledCustomFormLast = computed<boolean>(
-  () => isDisabledCustomForm.value || localPeriodTypeLocal.value !== 'last'
-)
-const isDisabledCustomFormRange = computed<boolean>(
-  () => isDisabledCustomForm.value || localPeriodTypeLocal.value !== 'period'
-)
-
-const constructedTimespanOptions = computed<UI_I_Dropdown[]>(() =>
-  props.timespanOptions.map((item) => {
-    return {
-      text: item.text,
-      value: item.value,
-    }
-  })
-)
-
-const constructedCustomTimeOptions = computed<UI_I_Dropdown[]>(() =>
-  props.customTimeOptions.map((item) => {
-    return {
-      text: item.text,
-      value: item.value,
-    }
-  })
-)
-
-const datepickerFormat = computed<string>(() =>
-  getUiDatepickerFormatByLanguage(props.language)
-)
-const dateFormatForUpdate = ref<string>($getDateFormat(props.language))
-const constructedDateFromLocal = computed<number>({
-  get() {
-    // TODO fix PM
-    return $isDate(localCurrentDateFromLocal.value)
-      ? $getUnixByDate(
-          localCurrentDateFromLocal.value + ' ' + currentTimeFromLocal.value
-        )
-      : 0
-  },
-  set(newValue) {
-    localCurrentDateFromLocal.value = $formattedDate(
-      new Date(newValue),
-      dateFormatForUpdate.value
-    )
-    currentTimeFromLocal.value = $formattedTime(newValue, '', true)
-  },
-})
-
-const constructedDateToLocal = computed<number>({
-  get() {
-    // TODO fix PM
-    return $isDate(currentDateToLocal.value)
-      ? $getUnixByDate(
-          currentDateToLocal.value + ' ' + currentTimeToLocal.value
-        )
-      : 0
-  },
-  set(newValue) {
-    currentDateToLocal.value = $formattedDate(
-      new Date(newValue),
-      dateFormatForUpdate.value
-    )
-    currentTimeToLocal.value = $formattedTime(newValue, '', true)
-  },
-})
-</script>
-
-<style>
-:root {
-  --chart-options-timespan-blocks-bg: #ffffff;
-  --chart-options-timespan-blocks-title-color: #4d5d69;
-}
-:root.dark-theme {
-  --chart-options-timespan-blocks-bg: #334453;
-  --chart-options-timespan-blocks-title-color: #e9eaec;
-}
-</style>
-<style scoped lang="scss">
-.timespan-form-container {
-  padding: 12px;
-  background: var(--chart-options-timespan-blocks-bg);
-  box-shadow: 0 1px 4px 0 #00000014;
-  border-radius: 8px;
-
-  .block-title {
-    color: var(--chart-options-timespan-blocks-title-color);
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 16px;
-  }
-  .disabled-content {
-    &.disabled {
-      pointer-events: none;
-    }
-  }
-  .radio-container {
-    display: flex;
-    flex-direction: column;
-    grid-gap: 12px;
-    margin-top: 16px;
-
-    .row-container {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 12px;
-
-      :deep(.ui-input-with-datepicker) {
-        grid-gap: 12px;
-      }
-    }
-    :deep(.ui-input-with-datepicker) {
-      grid-gap: 12px;
-    }
-  }
-
-  .date-time-info {
-    font-weight: 400;
-    font-size: 12px;
-    color: #9da6ad;
-    margin-top: 16px;
-  }
-}
-</style>