bfg-common 1.4.838 → 1.4.839

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

@@ -0,0 +1,447 @@
+<template>
+  <div class="horizontal-flex-container overview-chart-title-bar">
+    <div class="chart-title-content">
+      <client-only>
+        <span v-if="props.chartTitle" class="chart-title"
+          >{{ props.chartTitle }},</span
+        >
+        <span v-if="chartTitleDate" class="chart-title uppercase">{{
+          chartTitleDate
+        }}</span>
+      </client-only>
+    </div>
+    <div class="horizontal-flex-container">
+      <label for="periodSelect" class="label-select"
+        >{{ localization.inventoryMonitor.period }}:</label
+      >
+      <div class="select">
+        <select
+          id="periodSelect"
+          v-model="selectedPeriod"
+          data-id="period-select"
+          :disabled="props.disabledPeriod"
+          @change="onChangePeriod"
+        >
+          <option
+            v-for="(item, index) in periodOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+      <a
+        id="chart-options-button"
+        class="chart-options-button"
+        data-id="show-chart-options-button"
+        @click="onShowChartOptions"
+        >{{ localization.inventoryMonitor.chartOptions }}</a
+      >
+    </div>
+    <div class="view-select-label horizontal-flex-container">
+      <label for="viewSelect" class="label-select"
+        >{{ localization.common.view }}:</label
+      >
+      <div class="select">
+        <select
+          id="viewSelect"
+          v-model="selectedView"
+          data-id="view-select"
+          :disabled="props.disabledView"
+          @change="onChangeView"
+        >
+          <option
+            v-for="(item, index) in viewOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div class="chart-action-bar vui-action-bar">
+      <ul>
+        <li class="menu-item">
+          <a
+            id="advanced-page-link"
+            data-id="advanced-page-button"
+            class="item-link"
+            @click="onOpenAdvancedPage"
+          >
+            <span class="vx-icon-window-popout icon"></span>
+          </a>
+        </li>
+        <li class="menu-item">
+          <atoms-dropdown :drop-menu="exportMenu" @select="onExportMenuItem">
+            <template #icon>
+              <a
+                id="export-link"
+                data-id="export-link"
+                href="#"
+                class="item-link"
+              >
+                <span class="vx-icon-export icon"></span>
+              </a>
+            </template>
+          </atoms-dropdown>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <common-monitor-advanced-tools-chart-options-modal
+    v-if="isShowModal"
+    :type="props.type"
+    :language="props.language"
+    :selected-counters-keys="props.selectedCountersKeys"
+    :selected-metric="props.selectedMetric"
+    :selected-metric-local="props.selectedMetricLocal"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :selected-chart-option-name="props.selectedChartOptionName"
+    :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-objects="props.selectedObjects"
+    :project="props.project"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    @hide="isShowModal = false"
+    @select-row="emits('select-row', $event)"
+    @select-metric-local="emits('select-metric-local', $event)"
+    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+    @delete-option="onDeleteOption"
+    @save-option-name="onSaveOptionName"
+    @submit-options="emits('submit-options', $event)"
+  />
+</template>
+
+<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 {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+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'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  startDate: number
+  endDate: number
+  chartTitle: string
+  language: string
+  selectedCountersKeys: number[]
+  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
+  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
+  disabledPeriod?: boolean
+  disabledView?: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
+  (event: 'exporting', value: string): void
+  (event: 'open-advanced-page'): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric-local', value: string): void
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (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">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 20px;
+  flex-shrink: 0;
+
+  .chart-title-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .select select {
+    height: 20px;
+    margin: 5px;
+    color: var(--global-font-color);
+  }
+  .single-option {
+    margin-left: 5px;
+  }
+
+  .chart-title {
+    color: var(--global-font-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 6px;
+    font-weight: 700;
+    text-transform: capitalize;
+
+    &.uppercase {
+      text-transform: uppercase;
+    }
+  }
+
+  .view-select-label {
+    margin-left: auto;
+    padding-right: 7px;
+    padding-left: 7px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+
+  .chart-options-button {
+    margin-left: 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-transform: capitalize;
+    color: var(--dropdown-item-color);
+    cursor: pointer;
+  }
+
+  .chart-action-bar {
+    white-space: nowrap;
+
+    .menu-item {
+      padding-right: 4px;
+      display: inline-block;
+      list-style: none;
+      vertical-align: middle;
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      .item-link {
+        padding: 4px;
+        line-height: 22px;
+        border: 1px solid transparent;
+        display: inline-block;
+
+        &:hover {
+          text-decoration: none;
+          background-color: #e9f6fd;
+          border: 1px solid #c7e9ff;
+        }
+
+        .icon {
+          width: 16px;
+          height: 16px;
+          display: block;
+          min-width: 16px;
+          min-height: 16px;
+          background-size: 100% auto;
+        }
+      }
+
+      :deep(.dropdown-menu) {
+        min-width: auto;
+        padding: 0;
+      }
+      :deep(.user-menu-large) {
+        padding: 0;
+      }
+      :deep(.angle-icon) {
+        display: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -94,8 +94,7 @@ onUnmounted(() => {
   flex-direction: column; // TODO надо удалить потом (clr style)
   height: inherit;
   background-color: var(--background-color);
-  padding: 10px 16px 16px;
-
+  padding: 10px 16px 30px;
   &__headline {
     font-family: Inter, sans-serif;
     font-weight: 400;
@@ -104,7 +103,6 @@ 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,7 +49,6 @@
     <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,10 +5,7 @@
       name="info"
       width="16px"
       height="16px"
-      :class="[
-        'info-icon pointer',
-        { show: isShowInfo, 'in-collapse-content': props.inCollapseContent },
-      ]"
+      :class="['info-icon pointer', { show: isShowInfo }]"
       @click.stop="emits('toggle-error', props.id)"
     />
     <ui-popup-window
@@ -45,17 +42,11 @@
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const props = withDefaults(
-  defineProps<{
-    id: string
-    error: string
-    openedError: string
-    inCollapseContent?: boolean
-  }>(),
-  {
-    inCollapseContent: false,
-  }
-)
+const props = defineProps<{
+  id: string
+  error: string
+  openedError: string
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -86,7 +77,7 @@ const isShowInfo = computed<boolean>({
       color: var(--close-icon);
     }
     &.show {
-      color: var(--btn-primary-fill-bg-color);
+      color: var(--switch-bg-checked-reverse);
     }
   }
 
@@ -113,11 +104,4 @@ 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,7 +35,6 @@
           :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.replaceAll(/[\s.]/g, '-')}-${index}-status`,
+      testId: `${task.taskName}-${index}-status`,
     }
 
     const zoneNodeParams = taskConfig.zoneNodeFunc(task, nav)

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

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