bfg-common 1.4.839 → 1.4.841

package/components/common/monitor/advanced/tools/ToolsOld.vue

@@ -5,8 +5,8 @@
         <span v-if="props.chartTitle" class="chart-title"
           >{{ props.chartTitle }},</span
         >
-        <span v-if="chartTitleDate" class="chart-title uppercase">{{
-          chartTitleDate
+        <span v-if="props.chartTitleDate" class="chart-title uppercase">{{
+          props.chartTitleDate
         }}</span>
       </client-only>
     </div>
@@ -17,13 +17,13 @@
       <div class="select">
         <select
           id="periodSelect"
-          v-model="selectedPeriod"
+          v-model="selectedPeriodLocal"
           data-id="period-select"
           :disabled="props.disabledPeriod"
-          @change="onChangePeriod"
+          @change="emits('change-period')"
         >
           <option
-            v-for="(item, index) in periodOptions"
+            v-for="(item, index) in props.periodOptions"
             :key="index"
             :value="item.value"
           >
@@ -35,7 +35,7 @@
         id="chart-options-button"
         class="chart-options-button"
         data-id="show-chart-options-button"
-        @click="onShowChartOptions"
+        @click="isShowModalLocal = true"
         >{{ localization.inventoryMonitor.chartOptions }}</a
       >
     </div>
@@ -46,13 +46,13 @@
       <div class="select">
         <select
           id="viewSelect"
-          v-model="selectedView"
+          v-model="selectedViewLocal"
           data-id="view-select"
           :disabled="props.disabledView"
-          @change="onChangeView"
+          @change="emits('change-view')"
         >
           <option
-            v-for="(item, index) in viewOptions"
+            v-for="(item, index) in props.viewOptions"
             :key="index"
             :value="item.value"
           >
@@ -68,13 +68,16 @@
             id="advanced-page-link"
             data-id="advanced-page-button"
             class="item-link"
-            @click="onOpenAdvancedPage"
+            @click="emits('open-advanced-page')"
           >
             <span class="vx-icon-window-popout icon"></span>
           </a>
         </li>
         <li class="menu-item">
-          <atoms-dropdown :drop-menu="exportMenu" @select="onExportMenuItem">
+          <atoms-dropdown
+            :drop-menu="exportMenu"
+            @select="emits('exporting', $event.action)"
+          >
             <template #icon>
               <a
                 id="export-link"
@@ -92,7 +95,7 @@
   </div>
 
   <common-monitor-advanced-tools-chart-options-modal
-    v-if="isShowModal"
+    v-if="isShowModalLocal"
     :type="props.type"
     :language="props.language"
     :selected-counters-keys="props.selectedCountersKeys"
@@ -116,7 +119,7 @@
     :objects-data="props.objectsData"
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
-    @hide="isShowModal = false"
+    @hide="isShowModalLocal = false"
     @select-row="emits('select-row', $event)"
     @select-metric-local="emits('select-metric-local', $event)"
     @update-chart-type="emits('update-chart-type', $event)"
@@ -124,8 +127,8 @@
     @update-unit-count="emits('update-unit-count', $event)"
     @update-period-type="emits('update-period-type', $event)"
     @update-custom-time="emits('update-custom-time', $event)"
-    @delete-option="onDeleteOption"
-    @save-option-name="onSaveOptionName"
+    @delete-option="emits('delete-option')"
+    @save-option-name="emits('save-option-name')"
     @submit-options="emits('submit-options', $event)"
   />
 </template>
@@ -133,7 +136,6 @@
 <script setup lang="ts">
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_MonitorGraphPayload } from '~/components/common/monitor/lib/models/interfaces'
 import type { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/lib/models/interfaces'
 import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
 import type {
@@ -144,20 +146,12 @@ import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tool
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
 import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
-import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
-import {
-  periodFunc,
-  viewFunc,
-  exportFunc,
-  getCurrentOptionsStorageFunc,
-} from '~/components/common/monitor/advanced/tools/lib/config/advancedToolbar'
-import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
+import { exportFunc } from '~/components/common/monitor/advanced/tools/lib/config/advancedToolbar'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
-  startDate: number
-  endDate: number
   chartTitle: string
+  chartTitleDate: string
   language: string
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
@@ -180,12 +174,20 @@ const props = defineProps<{
   objectsData: UI_I_ObjectItem[]
   validDateEnd: number
   formatDate: string
+  viewOptions: UI_I_OptionItem[]
+  periodOptions: UI_I_OptionItem[]
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
 
+const selectedViewLocal = defineModel<string>('selected-view')
+const isShowModalLocal = defineModel<boolean>('is-show-modal-local')
+const selectedPeriodLocal = defineModel<string>('selected-period')
+
 const emits = defineEmits<{
-  (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
+  (event: 'save-option-name'): void
+  (event: 'change-period'): void
+  (event: 'change-view'): void
   (event: 'exporting', value: string): void
   (event: 'open-advanced-page'): void
   (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
@@ -197,149 +199,11 @@ const emits = defineEmits<{
   (event: 'update-custom-time', value: string): void
   (event: 'delete-option'): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
-  (event: 'update:selected-timespan-type', value: string): void
 }>()
 
-const routeType = '' + useRoute().params.type
-
 const localization = computed<UI_I_Localization>(() => useLocal())
-const { $formattedDatetime } = useNuxtApp()
-
-const selectedView = ref<string>('')
-const optionsNames = ref<string[]>([])
-const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, props.type, optionsNames.value)
-)
-
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    let currentValue = ''
-
-    if (newValue) currentValue = newValue
-    else if (
-      selectedView.value &&
-      optionsNames.value.includes(selectedView.value)
-    )
-      currentValue = selectedView.value
-    else currentValue = selectedView.value || viewOptions.value[0]?.value
-
-    selectedView.value = currentValue
-  },
-  { immediate: true }
-)
-
-const onDeleteOption = (): void => {
-  emits('delete-option')
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
-}
-
-const periodOptions = computed<UI_I_OptionItem[]>(() =>
-  periodFunc(localization.value, props.selectedTimespanType)
-)
-const selectedPeriod = computed<string>({
-  get() {
-    return props.selectedTimespanType || periodOptions.value[0].value
-  },
-  set(newValue) {
-    emits('update:selected-timespan-type', newValue)
-  },
-})
-
-const isShowModal = ref<boolean>(false)
-watch(isShowModal, (newValue) => {
-  if (!newValue && !selectedView.value)
-    selectedView.value = viewOptions.value[0].value
-})
-
-const updateTools = (): void => {
-  const periodValue = selectedPeriod.value
-  const viewValue = selectedView.value
-  const prefix = props.project === 'sphere'
-  const selectedValue = useLocalStorage(
-    viewValue + 'ChartOptions',
-    undefined,
-    prefix
-  )
-
-  const fields = selectedValue
-    ? selectedValue.counters.map((item) => item.name).join(', ')
-    : ''
-  const validPeriodData = getValidDateByOptionFunc(
-    periodValue,
-    selectedValue,
-    props.unitsCount,
-    props.selectedCustomTime
-  )
-
-  const period = [
-    Math.round(validPeriodData[0] / 1000),
-    Math.round(validPeriodData[1] / 1000),
-  ]
-
-  if (periodValue === 'custom_interval' && props.periodType === 'period') {
-    const checkDateResult = checkDateFunc(
-      localization.value,
-      props.customDateFrom,
-      props.customDateTo,
-      props.customTimeFrom,
-      props.customTimeTo,
-      props.validDateEnd,
-      props.formatDate
-    )
-    if (Array.isArray(checkDateResult)) {
-      period[0] = Math.round(checkDateResult[0] / 1000)
-      period[1] = Math.round(checkDateResult[1] / 1000)
-    }
-  }
-
-  const tools: UI_I_MonitorGraphPayload = {
-    fields,
-    period,
-    periodType: periodValue,
-    view: viewValue,
-  }
-  if (selectedValue.metric) tools.metricType = selectedValue.metric
-
-  emits('update-timespan-type', selectedPeriod.value)
-  emits('update-tools', tools)
-}
-
-const onChangePeriod = (): void => {
-  updateTools()
-}
-
-const onChangeView = (): void => {
-  updateTools()
-}
-
-const chartTitleDate = computed<string>(() => {
-  if (!props.startDate) return ''
-
-  const start = $formattedDatetime(props.startDate, '', true)
-  const end = $formattedDatetime(props.endDate, '', true)
-  return `${start} - ${end}`
-})
-
-const onOpenAdvancedPage = (): void => emits('open-advanced-page')
 
 const exportMenu = ref<UI_I_DropMenu<string>[]>(exportFunc(localization.value))
-
-const onExportMenuItem = (item: UI_I_DropMenu<any>): void =>
-  emits('exporting', item.action)
-
-const onShowChartOptions = (): void => {
-  isShowModal.value = true
-}
-
-const onSaveOptionName = (): void => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
-}
-
-onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
-  updateTools()
-})
 </script>
 
 <style scoped lang="scss">

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

@@ -94,7 +94,8 @@ onUnmounted(() => {
   flex-direction: column; // TODO надо удалить потом (clr style)
   height: inherit;
   background-color: var(--background-color);
-  padding: 10px 16px 30px;
+  padding: 10px 16px 16px;
+
   &__headline {
     font-family: Inter, sans-serif;
     font-weight: 400;
@@ -103,6 +104,7 @@ onUnmounted(() => {
     color: var(--title-form-first-color);
     margin-bottom: 22px;
   }
+
   :deep(.data-table-header) {
     z-index: 1000 !important; // TODO надо удалить потом (clr style)
   }

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

@@ -49,6 +49,7 @@
     <template #default-actions="{ item }">
       <div class="actions">
         <ui-button
+          :id="`data-table-task-action-${item.data.id}`"
           variant="text"
           :test-id="`data-table-task-action-${item.data.id}`"
           is-without-height

package/components/common/pages/tasks/table/errorInfo/ErrorInfo.vue

@@ -5,7 +5,10 @@
       name="info"
       width="16px"
       height="16px"
-      :class="['info-icon pointer', { show: isShowInfo }]"
+      :class="[
+        'info-icon pointer',
+        { show: isShowInfo, 'in-collapse-content': props.inCollapseContent },
+      ]"
       @click.stop="emits('toggle-error', props.id)"
     />
     <ui-popup-window
@@ -42,11 +45,17 @@
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const props = defineProps<{
-  id: string
-  error: string
-  openedError: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    id: string
+    error: string
+    openedError: string
+    inCollapseContent?: boolean
+  }>(),
+  {
+    inCollapseContent: false,
+  }
+)
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -77,7 +86,7 @@ const isShowInfo = computed<boolean>({
       color: var(--close-icon);
     }
     &.show {
-      color: var(--switch-bg-checked-reverse);
+      color: var(--btn-primary-fill-bg-color);
     }
   }
 
@@ -104,4 +113,11 @@ const isShowInfo = computed<boolean>({
     }
   }
 }
+
+:deep(.in-collapse-content) {
+  path,
+  circle {
+    stroke-width: 1.4 !important;
+  }
+}
 </style>

package/components/common/pages/tasks/table/expandDetails/ExpandDetails.vue

@@ -35,6 +35,7 @@
           :id="`${normalizedTaskDetails[2].data.testId}-expand-details`"
           :error="normalizedTaskDetails[2].data.error"
           :opened-error="openedError"
+          in-collapse-content
           @toggle-error="onToggleError"
         />
       </span>

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

@@ -175,7 +175,7 @@ export const options: UI_I_DataTableOptions = {
   withActions: true,
   inBlock: true,
   showExport: true,
-  withCollapse: true
+  withCollapse: true,
 }
 
 export const getBodyDataFunc = (
@@ -203,7 +203,7 @@ export const getBodyDataFunc = (
       icon: UI_E_RTaskStatusIcon[task.status],
       chipColor: UI_E_RTaskChipColor[task.status],
       error: task.error,
-      testId: `${task.taskName}-${index}-status`,
+      testId: `${task.taskName.replaceAll(/[\s.]/g, '-')}-${index}-status`,
     }
 
     const zoneNodeParams = taskConfig.zoneNodeFunc(task, nav)

package/components/common/portlets/customAttributes/Portlet.vue

@@ -8,9 +8,10 @@
       :dragged-any="props.draggedAny"
       :is-open="props.isOpen"
       :portlet-id="props.portletId"
+      :is-loading="props.isLoading"
       @toggle="onTogglePortlet"
     >
-      <template #portletBody>
+      <template #portletBody="{ isLoadingBody }">
         <ui-data-table
           test-id="attributes-portlet-table"
           :data="data"
@@ -18,6 +19,8 @@
           server-off
           :default-layout="false"
           size="sm"
+          :loading="isLoadingBody"
+          :skeleton="skeletonData"
         >
           <template #notFound>
             <div
@@ -149,9 +152,10 @@
           </template>
         </ui-data-table>
       </template>
-      <template #portletFooter>
+      <template #portletFooter="{ isLoadingFooter }">
         <div class="footer">
           <ui-button
+            v-if="!isLoadingFooter"
             test-id="add-new-attribute-button"
             variant="text"
             is-without-height
@@ -161,6 +165,7 @@
           >
             {{ localization.zabbix.addNew }}...
           </ui-button>
+          <ui-portlet-skeleton-footer v-else />
         </div>
       </template>
     </ui-portlet>
@@ -197,6 +202,7 @@ import {
   createRow,
   makeNewAttributeCreateActionRowFunc,
   availableTypesFunc,
+  skeletonData,
 } from '~/components/common/portlets/customAttributes/lib/config/config'
 
 const props = defineProps<{
@@ -207,6 +213,7 @@ const props = defineProps<{
   selectedItemName: string
   type: UI_I_Dropdown
   bodyItems: UI_I_DataTableBody[]
+  isLoading: boolean
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/portlets/customAttributes/lib/config/config.ts

@@ -2,6 +2,7 @@ import type {
   UI_I_DataTableOptions,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
+  UI_I_DataTableSkeleton,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -136,3 +137,9 @@ export const availableTypesFunc = (type: UI_I_Dropdown): UI_I_Dropdown[] => [
   },
   type,
 ]
+
+export const skeletonData: UI_I_DataTableSkeleton = {
+  columnsCount: 3,
+  withoutPagination: true,
+  withoutHeader: true,
+}

package/components/common/portlets/tag/Portlet.vue

@@ -8,9 +8,10 @@
       :dragged-any="props.draggedAny"
       :is-open="props.isOpen"
       :portlet-id="props.portletId"
+      :is-loading="props.isLoading"
       @toggle="onTogglePortlet"
     >
-      <template #portletBody>
+      <template #portletBody="{ isLoadingBody }">
         <ui-data-table
           test-id="tags-portlet-table"
           :data="data"
@@ -18,6 +19,8 @@
           server-off
           :default-layout="false"
           size="sm"
+          :loading="isLoadingBody"
+          :skeleton="skeletonData"
         >
           <!--          :loading="loading"-->
           <template #icon="{ item }">
@@ -64,9 +67,10 @@
           </template>
         </ui-data-table>
       </template>
-      <template #portletFooter>
+      <template #portletFooter="{ isLoadingFooter }">
         <div class="footer">
           <ui-button
+            v-if="!isLoadingFooter"
             test-id="show-assign-new-tag-modal"
             variant="text"
             is-without-height
@@ -75,6 +79,7 @@
           >
             {{ localization.common.assignNew }}...
           </ui-button>
+          <ui-portlet-skeleton-footer v-else />
         </div>
       </template>
     </ui-portlet>
@@ -120,6 +125,7 @@ import {
   tagTableHeaderOptions,
   tagTableHeaderDataFunc,
   tagsAssignBodyItemsTemporary,
+  skeletonData,
 } from '~/components/common/portlets/tag/lib/config/config'
 
 const props = defineProps<{
@@ -129,6 +135,7 @@ const props = defineProps<{
   draggedAny?: boolean
   selectedItemName: string
   bodyItems: UI_I_DataTableBody[]
+  isLoading: boolean
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/portlets/tag/lib/config/config.ts

@@ -2,6 +2,7 @@ import type {
   UI_I_DataTableOptions,
   UI_I_DataTableBody,
   UI_I_DataTableHeader,
+  UI_I_DataTableSkeleton,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -199,3 +200,9 @@ export const tagsAssignBodyItemsTemporary: UI_I_DataTableBody[] = [
     ],
   },
 ]
+
+export const skeletonData: UI_I_DataTableSkeleton = {
+  columnsCount: 3,
+  withoutPagination: true,
+  withoutHeader: true,
+}

package/components/common/tools/Actions.vue

@@ -20,7 +20,7 @@
           :disabled="button.disabled"
           :multiple="button?.multiple || false"
           class="btn-group__file"
-          @change="(event) => onSelectFiles(event, button.type)"
+          @change="(event) => onSelectFiles(event, button.type, key)"
         />
       </label>
 
@@ -69,8 +69,11 @@ const onClickButton = (type: string): void => {
   emits('click', type)
 }
 
-const onSelectFiles = (event: Event, type: string): void => {
+const onSelectFiles = (event: Event, type: string, key: number): void => {
   emits('click', type, event)
+
+  const input = document.getElementById(`select-file-button-${key}`) as HTMLInputElement | null
+  input && (input.value = '')
 }
 
 const visibleCount = ref<number>(props.actions.length)

package/lib/config/uiTable.ts

@@ -1,20 +1,20 @@
-import type { UI_I_TableTexts } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-// TODO поменять все :texts для таблицы нового дизайна
-export const tableTextsFunc = (
-  localization: UI_I_Localization
-): UI_I_TableTexts => {
-  return {
-    rowsPerPage: localization.common.rowsPerPage,
-    of: localization.common.of,
-    searchHere: localization.common.searchHere,
-    selected: localization.common.selected,
-    columns: localization.common.columns,
-    previous: localization.common.previous,
-    next: localization.common.next,
-    noItemsFound: localization.common.noItemsFound,
-    exportSelected: localization.common.exportSelected,
-    exportAll: localization.common.exportAll,
-  }
-}
+import type { UI_I_TableTexts } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+// TODO поменять все :texts для таблицы нового дизайна
+export const tableTextsFunc = (
+  localization: UI_I_Localization
+): UI_I_TableTexts => {
+  return {
+    rowsPerPage: localization.common.rowsPerPage,
+    of: localization.common.of,
+    searchHere: localization.common.searchHere,
+    selected: localization.common.selected,
+    columns: localization.common.columns,
+    previous: localization.common.previous,
+    next: localization.common.next,
+    noItemsFound: localization.common.noItemsFound,
+    exportSelected: localization.common.exportSelected,
+    exportAll: localization.common.exportAll,
+  }
+}

package/lib/models/store/interfaces.ts

@@ -8,6 +8,7 @@ export interface UI_I_ErrorValidationField<T = string> {
 export interface API_UI_I_Response<T> {
   response: {
     _data: T
+    status: number
   }
 }
 export interface API_UI_I_Error {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.839",
+  "version": "1.4.841",
   "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.347",
+    "bfg-uikit": "1.0.348",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }