bfg-common 1.1.65 → 1.1.66

package/assets/localization/local_be.json

@@ -1117,7 +1117,7 @@
   "offlineOps": "Пазасеткавыя аперацыі.",
   "ok": "добра",
   "okOrCancelToReviewYourChanges": "Націсніце ОК, каб працягнуць, або Адмена, каб праглядзець унесеныя змены.",
-  "oneOfSelectedDatesIsInTheFuture": "The specified time range is not valid. One of the selected dates is in the future.",
+  "oneOfSelectedDatesIsInTheFuture": "Ўказаны часовай дыяпазон недапушчальны. Адна з выбраных дат знаходзіцца ў будучыні.",
   "opaqueNetwork": "Непразрыстая сетка",
   "openId": "OpenID",
   "openidAddress": "Адрас OpenID",

package/assets/localization/local_hy.json

@@ -1117,7 +1117,7 @@
   "offlineOps": "Անցանց գործողություններ",
   "ok": "Լավ",
   "okOrCancelToReviewYourChanges": "Կտտացրեք OK՝ շարունակելու համար կամ չեղարկել՝ ձեր կատարած փոփոխությունները դիտելու համար:",
-  "oneOfSelectedDatesIsInTheFuture": "The specified time range is not valid. One of the selected dates is in the future.",
+  "oneOfSelectedDatesIsInTheFuture": "Նշված ժամանակային միջակայքն անընդունելի է: Ընտրված ամսաթվերից մեկը ապագայում է:",
   "opaqueNetwork": "Անթափանց ցանց",
   "openId": "OpenID",
   "openidAddress": "OpenID հասցե",

package/assets/localization/local_kk.json

@@ -1117,7 +1117,7 @@
   "offlineOps": "Офлайн операциялар",
   "ok": "ЖАРАЙДЫ МА",
   "okOrCancelToReviewYourChanges": "Жалғастыру үшін OK немесе енгізілген өзгерістерді көру үшін Болдырмау түймесін басыңыз.",
-  "oneOfSelectedDatesIsInTheFuture": "The specified time range is not valid. One of the selected dates is in the future.",
+  "oneOfSelectedDatesIsInTheFuture": "Көрсетілген уақыт диапазонына жол берілмейді. Таңдалған күндердің бірі болашақта.",
   "opaqueNetwork": "Мөлдір емес желі",
   "openId": "OpenID",
   "openidAddress": "OpenID мекенжайы",

package/assets/localization/local_ru.json

@@ -1117,7 +1117,7 @@
   "offlineOps": "Оффлайн операции",
   "ok": "ОК",
   "okOrCancelToReviewYourChanges": "Нажмите \"ОК\", чтобы продолжить, или \"Отмена\", чтобы просмотреть внесенные изменения.",
-  "oneOfSelectedDatesIsInTheFuture": "The specified time range is not valid. One of the selected dates is in the future.",
+  "oneOfSelectedDatesIsInTheFuture": "Указанный временной диапазон недопустим. Одна из выбранных дат находится в будущем.",
   "opaqueNetwork": "Непрозрачная сеть",
   "openId": "OpenID",
   "openidAddress": "OpenID-адрес",

package/components/common/graph/Graph.vue

@@ -26,27 +26,27 @@ const props = defineProps<{
   selectedRow?: number[]
 }>()
 
-let chart: any = null
+let localChart: any = null
 const exportChart = (type: string): void => {
   if (type === 'png') {
-    chart.exportChart({
+    localChart.exportChart({
       type: 'image/png',
     })
   } else if (type === 'jpeg') {
-    chart.exportChart({
+    localChart.exportChart({
       type: 'image/jpeg',
     })
   } else if (type === 'svg') {
-    chart.exportChart({
+    localChart.exportChart({
       type: 'image/svg+xml',
     })
   } else if (type === 'csv') {
-    chart.downloadCSV()
+    localChart.downloadCSV()
   }
 }
 
 const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
-const initGraph = () => {
+const initGraph = (): void => {
   if (!props.data) return
   setTimeout(() => {
     chartOptions.value = props.data
@@ -55,42 +55,44 @@ const initGraph = () => {
 
 watch(
   () => props.update,
-  (val) => {
-    val && initGraph()
+  (newValue) => {
+    newValue && initGraph()
   },
   { immediate: true }
 )
 
 watch(
   () => props.exportType,
-  (val) => {
-    if (!val) return
+  (newValue) => {
+    if (!newValue) return
 
-    exportChart(val)
+    exportChart(newValue)
   }
 )
 
 watch(
   () => props.chart,
-  (val) => {
-    if (val.series) chart = val
+  (newValue) => {
+    if (newValue.series) localChart = newValue
   },
   { deep: true }
 )
 
 const updateSeriesStrokeWidth = (data: number[]): void => {
-  if (!chart) return
+  if (!localChart) return
 
-  chart.series.forEach((_: any, key: number) => {
-    chart.options.series[key].lineWidth = 1.5
+  localChart.series.forEach((_: any, key: number) => {
+    localChart.options.series[key].lineWidth = 1.5
 
-    if (data.includes(key)) chart.options.series[key].lineWidth = 3
+    if (data.includes(key)) localChart.options.series[key].lineWidth = 3
   })
+
+  localChart.update(localChart.options)
 }
 
 watch(
   () => props.selectedRow,
-  (val) => val && updateSeriesStrokeWidth(val)
+  (newValue) => newValue && updateSeriesStrokeWidth(newValue)
 )
 </script>
 

package/components/common/monitor/advanced/Advanced.vue

@@ -26,7 +26,13 @@
             :period-type="props.periodType"
             :selected-custom-time="props.selectedCustomTime"
             :selected-chart-option-name="props.selectedChartOptionName"
-            @update-tools="onUpdateTools"
+            :custom-date-from="props.customDateFrom"
+            :custom-date-to="props.customDateTo"
+            :custom-time-from="props.customTimeFrom"
+            :custom-time-to="props.customTimeTo"
+            :total-cores="totalCores"
+            :host-id="props.hostId"
+            @update-tools="emits('update-tools', $event)"
             @exporting="onExporting"
             @open-advanced-page="onGetEmptyPage"
             @select-row="emits('select-row', $event)"
@@ -38,6 +44,11 @@
             @update-custom-time="emits('update-custom-time', $event)"
             @select-chart-name="emits('select-chart-name', $event)"
             @delete-option="emits('delete-option')"
+            @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)"
+            @submit-options="emits('submit-options', $event)"
           />
 
           <div v-show="!props.data" class="empty-container">
@@ -85,6 +96,7 @@ import {
   T_ChartHost,
   T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
+import { getCountCores } from '~/components/common/monitor/advanced/tools/utils/countCores'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
@@ -103,6 +115,11 @@ const props = defineProps<{
   periodType: string
   selectedCustomTime: string
   selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  hostId: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -120,12 +137,25 @@ const emits = defineEmits<{
   (event: 'update-custom-time', value: string): void
   (event: 'select-chart-name', value: string): void
   (event: 'delete-option'): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'submit-options', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const onUpdateTools = (tools: UI_I_MonitorGraphPayload): void =>
-  emits('update-tools', tools)
+const totalCores = ref<number>(0)
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue) return
+
+    totalCores.value = getCountCores(newValue)
+  },
+  { immediate: true }
+)
 
 const exportGraph = ref<string>('')
 const onExporting = (key: string): void => {

package/components/common/monitor/advanced/GraphView.vue

@@ -6,7 +6,7 @@
         :data="chartData"
         :update="chartHelper"
         :export-type="exportType"
-        :selected-row="selectedRow"
+        :selected-row="props.selectedRow"
       />
     </template>
   </div>
@@ -129,10 +129,10 @@ watch(width, (newValue) => {
 const exportType = ref<string>('')
 watch(
   () => props.export,
-  (val) => {
-    if (!val) return
+  (newValue) => {
+    if (!newValue) return
 
-    exportType.value = val
+    exportType.value = newValue
   },
   { immediate: true }
 )

package/components/common/monitor/advanced/table/Table.vue

@@ -59,17 +59,17 @@ const dataBody = ref<UI_I_BodyItem[][]>([])
 
 watch(
   () => props.data,
-  (val) => {
-    if (!val) return
+  (newValue) => {
+    if (!newValue) return
 
-    dataBody.value = table.bodyItems(val)
+    dataBody.value = table.bodyItems(newValue)
   },
   { immediate: true }
 )
 watch(
   selectedRow,
-  (val) => {
-    emits('select', val)
+  (newValue) => {
+    emits('select', newValue)
   },
   { deep: true }
 )

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

@@ -19,6 +19,7 @@
           id="periodSelect"
           v-model="selectedPeriod"
           :disabled="props.disabledPeriod"
+          @change="onChangePeriod"
         >
           <option
             v-for="(item, index) in periodOptions"
@@ -46,6 +47,7 @@
           id="viewSelect"
           v-model="selectedView"
           :disabled="props.disabledView"
+          @change="onChangeView"
         >
           <option
             v-for="(item, index) in viewOptions"
@@ -93,6 +95,12 @@
     :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"
     @hide="isShowModal = false"
     @select-row="emits('select-row', $event)"
     @select-metric="emits('select-metric', $event)"
@@ -104,6 +112,11 @@
     @select-chart-name="onSelectChartName"
     @delete-option="onDeleteOption"
     @save-option-name="onSaveOptionName"
+    @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)"
+    @submit-options="emits('submit-options', $event)"
   />
 </template>
 
@@ -125,6 +138,7 @@ import {
   exportFunc,
   getCurrentOptionsStorageFunc,
 } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
@@ -139,6 +153,12 @@ const props = defineProps<{
   periodType: string
   selectedCustomTime: string
   selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -156,6 +176,11 @@ const emits = defineEmits<{
   (event: 'update-custom-time', value: string): void
   (event: 'select-chart-name', value: string): void
   (event: 'delete-option'): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'submit-options', value: string): void
 }>()
 
 const routeType = '' + useRoute().params.type
@@ -199,7 +224,7 @@ const onDeleteOption = (): void => {
 
 const selectedPeriod = ref<string>('')
 const periodOptions = computed<UI_I_OptionItem[]>(() =>
-  periodFunc(localization.value)
+  periodFunc(localization.value, props.selectedTimespanType)
 )
 watch(
   () => periodOptions.value,
@@ -208,6 +233,15 @@ watch(
   },
   { immediate: true }
 )
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    if (!newValue) return
+
+    selectedPeriod.value = newValue
+    updateTools()
+  }
+)
 
 const isShowModal = ref<boolean>(false)
 watch(isShowModal, (newValue) => {
@@ -215,34 +249,63 @@ watch(isShowModal, (newValue) => {
     selectedView.value = viewOptions.value[0].value
 })
 
-watch(
-  () => [selectedPeriod.value, selectedView.value],
-  (newValue: string[]) => {
-    const selectedValue = useLocalStorage(
-      newValue[1] + 'ChartOptions',
-      undefined,
-      false
+const selectedObjects = ref<string>('')
+
+const updateTools = (): void => {
+  const periodValue = selectedPeriod.value
+  const viewValue = selectedView.value
+  const selectedValue = useLocalStorage(
+    viewValue + 'ChartOptions',
+    undefined,
+    false
+  )
+
+  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
     )
-    const fields = selectedValue
-      ? selectedValue.counters.map((item) => item.name).join(', ')
-      : ''
-
-    const validPeriodData = getValidDateByOptionFunc(newValue[0])
-
-    const period = [
-      Math.round(validPeriodData[0] / 1000),
-      Math.round(validPeriodData[1] / 1000),
-    ]
-    const tools: UI_I_MonitorGraphPayload = {
-      fields,
-      period,
-      periodType: newValue[0],
-      view: newValue[1],
+    if (Array.isArray(checkDateResult)) {
+      period[0] = Math.round(checkDateResult[0] / 1000)
+      period[1] = Math.round(checkDateResult[1] / 1000)
     }
-    emits('update-tools', tools)
-  },
-  { immediate: true }
-)
+  }
+
+  const tools: UI_I_MonitorGraphPayload = {
+    fields,
+    period,
+    periodType: periodValue,
+    view: viewValue,
+  }
+  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 ''
@@ -269,6 +332,7 @@ const onSaveOptionName = (): void => {
 
 onMounted(() => {
   optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  updateTools()
 })
 </script>
 

package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -39,12 +39,22 @@
               :units-count="localUnitsCount"
               :period-type="localPeriodType"
               :selected-custom-time="localCustomTime"
+              :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"
               @select-row="selectedRows = $event"
               @update-chart-type="selectedChartTypeLocal = $event"
               @update-custom-time="localCustomTime = $event"
               @update-timespan-type="timespanType = $event"
               @update-unit-count="unitCount = $event"
               @update-period-type="localPeriodType = $event"
+              @update-custom-date-from="onUpdateCustomDateFrom"
+              @update-custom-date-to="onUpdateCustomDateTo"
+              @update-custom-time-from="onUpdateCustomTimeFrom"
+              @update-custom-time-to="onUpdateCustomTimeTo"
             />
           </div>
         </div>
@@ -64,6 +74,7 @@ import {
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
 import { getCurrentOptionsStorageFunc } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
@@ -76,6 +87,12 @@ const props = defineProps<{
   periodType: string
   selectedCustomTime: string
   selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
 }>()
 
 const emits = defineEmits<{
@@ -90,12 +107,35 @@ const emits = defineEmits<{
   (event: 'select-chart-name', value: string): void
   (event: 'delete-option'): void
   (event: 'save-option-name'): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'submit-options', value: string): void
+  (event: 'select-objects', value: string): void
 }>()
 
 const routeType = '' + useRoute().params.type
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const localCustomDateFrom = ref<string>('')
+const onUpdateCustomDateFrom = (value: string): void => {
+  localCustomDateFrom.value = value
+}
+const localCustomDateTo = ref<string>('')
+const onUpdateCustomDateTo = (value: string): void => {
+  localCustomDateTo.value = value
+}
+const localCustomTimeFrom = ref<string>('')
+const onUpdateCustomTimeFrom = (value: string): void => {
+  localCustomTimeFrom.value = value
+}
+const localCustomTimeTo = ref<string>('')
+const onUpdateCustomTimeTo = (value: string): void => {
+  localCustomTimeTo.value = value
+}
+
 const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
   metricsFunc(localization.value, props.type)
 )
@@ -173,17 +213,30 @@ const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
 const selectedChartTypeLocal = ref<string>('')
 
 const checkValidations = (): boolean => {
-  if (selectedRows.value.length) {
-    alerts.value = []
-    isShowAlerts.value = false
+  const checkDateResult = checkDateFunc(
+    localization.value,
+    localCustomDateFrom.value,
+    localCustomDateTo.value,
+    localCustomTimeFrom.value,
+    localCustomTimeTo.value
+  )
 
-    return true
+  if (!selectedRows.value.length) {
+    alerts.value = [localization.value.noCountersSelected]
+    isShowAlerts.value = true
+    return false
+  } else if (
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'period' &&
+    checkDateResult !== '' &&
+    typeof checkDateResult === 'string'
+  ) {
+    alerts.value = [checkDateResult]
+    isShowAlerts.value = true
+    return false
   }
 
-  alerts.value = [localization.value.noCountersSelected]
-  isShowAlerts.value = true
-
-  return false
+  return true
 }
 
 const localSelectedChartOptionName = ref<string>('')
@@ -197,6 +250,8 @@ watch(
 
 const selectedLocalOptionName = ref<string>('')
 
+const selectedObjects = ref<string>('')
+
 const onSubmit = (): void => {
   if (!checkValidations()) return
 
@@ -205,14 +260,37 @@ const onSubmit = (): void => {
 
   onSaveOptions(selectedLocalOptionName.value)
 
-  emits('select-metric', selectedMetric.value)
-  emits('select-row', selectedRows.value)
-  emits('update-chart-type', selectedChartTypeLocal.value)
-  emits('update-timespan-type', timespanType.value)
-  emits('update-unit-count', unitCount.value)
-  emits('update-period-type', localPeriodType.value)
-  emits('update-custom-time', localCustomTime.value)
-  emits('select-chart-name', selectedLocalOptionName.value)
+  // emits('select-chart-name', selectedLocalOptionName.value) +
+  // emits('select-metric', selectedMetric.value) +
+  // emits('select-row', selectedRows.value) +
+  // emits('update-timespan-type', timespanType.value) +
+  // emits('update-period-type', localPeriodType.value) +
+  // emits('update-unit-count', unitCount.value) +
+  // emits('update-custom-time', localCustomTime.value) +
+  // emits('update-custom-date-from', localCustomDateFrom.value) +
+  // emits('update-custom-date-to', localCustomDateTo.value) +
+  // emits('update-custom-time-from', localCustomTimeFrom.value) +
+  // emits('update-custom-time-to', localCustomTimeTo.value) +
+  // emits('update-chart-type', selectedChartTypeLocal.value) +
+  // emits('submit-options')
+
+  const savedObject = {
+    optionName: selectedLocalOptionName.value,
+    metric: selectedMetric.value,
+    counters: selectedRows.value,
+    timespanType: timespanType.value,
+    periodType: localPeriodType.value,
+    unitCount: unitCount.value,
+    localTimespanType: localCustomTime.value,
+    dateFrom: localCustomDateFrom.value,
+    timeFrom: localCustomTimeFrom.value,
+    dateTo: localCustomDateTo.value,
+    timeTo: localCustomTimeTo.value,
+    chartType: selectedChartTypeLocal.value,
+    objects: selectedObjects.value,
+  }
+
+  emits('submit-options', savedObject)
   onHide()
 }
 
@@ -251,7 +329,13 @@ const onSaveOptions = (name: string): void => {
 }
 
 const setSelectOptions = (): void => {
-  setDefaultOptions()
+  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
+  localSelectedCountersKeys.value = props.selectedCountersKeys
+  localSelectedChartType.value = props.selectedChartType
+  localSelectedTimespanType.value = props.selectedTimespanType
+  localUnitsCount.value = props.unitsCount
+  localPeriodType.value = props.periodType
+  localCustomTime.value = props.selectedCustomTime
 }
 
 const setDefaultOptions = (): void => {