bfg-common 1.4.861 → 1.4.862

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

@@ -12,7 +12,6 @@
     :dark-mode="props.darkMode"
     :selected-counters-keys="props.selectedCountersKeys"
     :selected-metric="props.selectedMetric"
-    :selected-metric-local="props.selectedMetricLocal"
     :selected-chart-type="props.selectedChartType"
     :units-count="props.unitsCount"
     :period-type="props.periodType"
@@ -58,7 +57,6 @@
     :dark-mode="props.darkMode"
     :selected-counters-keys="props.selectedCountersKeys"
     :selected-metric="props.selectedMetric"
-    :selected-metric-local="props.selectedMetricLocal"
     :selected-chart-type="props.selectedChartType"
     :units-count="props.unitsCount"
     :period-type="props.periodType"
@@ -118,7 +116,6 @@ const props = defineProps<{
   darkMode: boolean
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number

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

@@ -23,7 +23,6 @@
         :language="props.language"
         :selected-counters-keys="props.selectedCountersKeys"
         :selected-metric="props.selectedMetric"
-        :selected-metric-local="props.selectedMetricLocal"
         :disabled-period="props.disabledPeriod"
         :disabled-view="props.disabledView"
         :selected-chart-type="props.selectedChartType"
@@ -102,7 +101,6 @@ const props = defineProps<{
   darkMode: boolean
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number

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

@@ -20,7 +20,6 @@
             :language="props.language"
             :selected-counters-keys="props.selectedCountersKeys"
             :selected-metric="props.selectedMetric"
-            :selected-metric-local="props.selectedMetricLocal"
             :disabled-period="props.disabledPeriod"
             :disabled-view="props.disabledView"
             :selected-chart-type="props.selectedChartType"
@@ -112,7 +111,6 @@ const props = defineProps<{
   darkMode: boolean
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number

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

@@ -89,26 +89,24 @@ const { width } = useElementSize(chartsView)
 const startChart = useDebounceFn(() => {
   if (!props.data || !width.value) return
 
-  chartData.value = graphDataFunc(
-    props.data,
-    props.darkMode,
-    localization.value,
+  chartData.value = graphDataFunc({
     fullScreenCallBack,
-    !isNewView.value,
-    isNewView.value,
-    false,
-    props.selectedChartType,
-    '',
-    Math.floor(width.value),
-    chartCallback,
-    $formattedDatetime,
     format,
-    dateFormat,
-    undefined,
-    isNewView.value,
-    true,
-    newTabCallback
-  )
+    graphData: props.data,
+    isDarkMode: props.darkMode,
+    localization: localization.value,
+    disabledTitle: !isNewView.value,
+    disabledExportButton: isNewView.value,
+    disabledLegends: false,
+    graphType: props.selectedChartType,
+    width: Math.floor(width.value),
+    chartCallBack: chartCallback,
+    formattedDatetime: $formattedDatetime,
+    formatDate: dateFormat,
+    isNewView: isNewView.value,
+    isShowLinkNewWindow: true,
+    newTabCallBack: newTabCallback,
+  })
 
   chartHelper.value++
 }, 1000)

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

@@ -10,7 +10,6 @@
     :language="props.language"
     :selected-counters-keys="props.selectedCountersKeys"
     :selected-metric="props.selectedMetric"
-    :selected-metric-local="props.selectedMetricLocal"
     :disabled-period="props.disabledPeriod"
     :disabled-view="props.disabledView"
     :selected-chart-type="props.selectedChartType"
@@ -57,7 +56,6 @@
     :language="props.language"
     :selected-counters-keys="props.selectedCountersKeys"
     :selected-metric="props.selectedMetric"
-    :selected-metric-local="props.selectedMetricLocal"
     :disabled-period="props.disabledPeriod"
     :disabled-view="props.disabledView"
     :selected-chart-type="props.selectedChartType"
@@ -126,7 +124,6 @@ const props = defineProps<{
   language: string
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number

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

@@ -53,7 +53,6 @@
     :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"
@@ -105,7 +104,6 @@ const props = defineProps<{
   language: string
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number

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

@@ -100,7 +100,6 @@
     :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"
@@ -155,7 +154,6 @@ const props = defineProps<{
   language: string
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number

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

@@ -1,73 +1,94 @@
 <template>
-  <div class="chart-options-modal">
-    <atoms-modal
-      width="1150px"
-      :show="true"
-      :title="localization.inventoryMonitor.chartOptions"
-      :disabled-submit="isDisabledSubmit"
-      @hide="onHide"
-      @submit="onSubmit"
-    >
-      <template #modalBody>
-        <common-monitor-advanced-tools-chart-options-modal-notification
-          v-show="isShowAlerts"
-          :alerts="alerts"
-          @remove="onRemoveAlerts"
-        />
-        <div>
-          <common-monitor-advanced-tools-chart-options-modal-actions
-            :is-disabled-save="!selectedRows.length"
-            :options-names="optionsNames"
-            :selected-chart-option-name="localSelectedChartOptionName"
-            @save="onSaveOptions"
-            @check-validation="checkValidations"
-            @select-local-option-name="onSelectLocalOptionName"
-            @delete-chart-name="onDeleteChartName"
-          />
-
-          <div class="horizontal-flex-container chart-options-content">
-            <common-monitor-advanced-tools-chart-options-modal-metrics
-              v-model:selected-metric="selectedMetric"
-              :metrics-items="metricsItems"
-            />
-            <common-monitor-advanced-tools-chart-options-modal-counters
-              :chart="selectedMetric"
-              :language="props.language"
-              :type="props.type"
-              :selected-keys="localSelectedCountersKeys"
-              :selected-chart-type="localSelectedChartType"
-              :selected-timespan-type="localSelectedTimespanType"
-              :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"
-              :selected-metrics-keys="selectedMetricsKeys"
-              :selected-objects="props.selectedObjects"
-              :objects-loading="props.objectsLoading"
-              :objects-data="props.objectsData"
-              :valid-date-end="props.validDateEnd"
-              @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"
-              @select-objects="localSelectedObjects = $event"
-            />
-          </div>
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
+  <common-monitor-advanced-tools-chart-options-modal-new
+    v-if="isNewView"
+    v-model:selected-rows="selectedRows"
+    v-model:selected-metric-local="selectedMetricLocal"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-custom-time="localCustomTime"
+    v-model:selected-chart-type-local="selectedChartTypeLocal"
+    v-model:timespan-type="timespanType"
+    v-model:unit-count="unitCount"
+    :type="props.type"
+    :language="props.language"
+    :options-names="optionsNames"
+    :local-selected-chart-option-name="localSelectedChartOptionName"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="props.totalCores"
+    :hostId="props.hostId"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :is-disabled-submit="isDisabledSubmit"
+    :is-show-alerts="isShowAlerts"
+    :alerts="alerts"
+    :metrics-items="metricsItems"
+    :local-selected-counters-keys="localSelectedCountersKeys"
+    :local-selected-chart-type="selectedChartTypeLocal"
+    :local-selected-timespan-type="localSelectedTimespanType"
+    :local-units-count="localUnitsCount"
+    :selected-metrics-keys="selectedMetricsKeys"
+    @hide-main-modal="onHideMainModal"
+    @submit-main-modal="onSubmitMainModal"
+    @remove-alerts="onRemoveAlerts"
+    @save-options="onSaveOptions"
+    @check-validations="onCheckValidations"
+    @select-local-option-name="onSelectLocalOptionName"
+    @delete-chart-name="onDeleteChartName"
+    @update-custom-date-from="onUpdateCustomDateFrom"
+    @update-custom-date-to="onUpdateCustomDateTo"
+    @update-custom-time-from="onUpdateCustomTimeFrom"
+    @update-custom-time-to="onUpdateCustomTimeTo"
+    @local-selected-objects="localSelectedObjects = $event"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-old
+    v-else
+    v-model:selected-rows="selectedRows"
+    v-model:selected-metric-local="selectedMetricLocal"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-custom-time="localCustomTime"
+    v-model:selected-chart-type-local="selectedChartTypeLocal"
+    v-model:timespan-type="timespanType"
+    v-model:unit-count="unitCount"
+    :type="props.type"
+    :language="props.language"
+    :options-names="optionsNames"
+    :local-selected-chart-option-name="localSelectedChartOptionName"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="props.totalCores"
+    :hostId="props.hostId"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :is-disabled-submit="isDisabledSubmit"
+    :is-show-alerts="isShowAlerts"
+    :alerts="alerts"
+    :metrics-items="metricsItems"
+    :local-selected-counters-keys="localSelectedCountersKeys"
+    :local-selected-chart-type="localSelectedChartType"
+    :local-selected-timespan-type="localSelectedTimespanType"
+    :local-units-count="localUnitsCount"
+    :selected-metrics-keys="selectedMetricsKeys"
+    @hide-main-modal="onHideMainModal"
+    @submit-main-modal="onSubmitMainModal"
+    @remove-alerts="onRemoveAlerts"
+    @save-options="onSaveOptions"
+    @check-validations="onCheckValidations"
+    @select-local-option-name="onSelectLocalOptionName"
+    @delete-chart-name="onDeleteChartName"
+    @update-custom-date-from="onUpdateCustomDateFrom"
+    @update-custom-date-to="onUpdateCustomDateTo"
+    @update-custom-time-from="onUpdateCustomTimeFrom"
+    @update-custom-time-to="onUpdateCustomTimeTo"
+    @local-selected-objects="localSelectedObjects = $event"
+  />
 </template>
 
 <script setup lang="ts">
@@ -93,7 +114,6 @@ const props = defineProps<{
   language: string
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
@@ -129,6 +149,10 @@ const emits = defineEmits<{
   (event: 'select-objects', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const routeType = '' + useRoute().params.type
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -153,8 +177,10 @@ const onUpdateCustomTimeTo = (value: string): void => {
 const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
   metricsFunc(localization.value, props.type)
 )
-const selectedMetric = ref<UI_T_ChartHost | UI_T_ChartVm>(
-  props.selectedMetric || '' + metricsItems.value[0]?.value
+const selectedMetricLocal = ref<UI_T_ChartHost | UI_T_ChartVm>(
+  (props.selectedMetric || '' + metricsItems.value[0]?.value) as
+    | UI_T_ChartHost
+    | UI_T_ChartVm
 )
 
 const localSelectedCountersKeys = ref<number[]>([])
@@ -219,7 +245,7 @@ const onRemoveAlerts = (): void => {
   alerts.value = []
 }
 
-const onHide = (): void => {
+const onHideMainModal = (): void => {
   emits('hide')
 }
 
@@ -229,7 +255,7 @@ const selectedMetricsKeys = computed<number[]>(() =>
 )
 const selectedChartTypeLocal = ref<string>('')
 
-const checkValidations = (): boolean => {
+const onCheckValidations = (): boolean => {
   const checkDateResult = checkDateFunc(
     localization.value,
     localCustomDateFrom.value,
@@ -275,7 +301,7 @@ const currentFieldsByArray = (data: UI_I_AdvancedCounterItem[]): string => {
   const result: string[] = []
 
   data.forEach((item) => {
-    if (props.type === 'vm' && selectedMetric.value === 'network') {
+    if (props.type === 'vm' && selectedMetricLocal.value === 'network') {
       const currentFields = []
       const objectArray = localSelectedObjects.value.split(', ')
       if (objectArray.length) {
@@ -291,8 +317,8 @@ const currentFieldsByArray = (data: UI_I_AdvancedCounterItem[]): string => {
   return result.join(',')
 }
 
-const onSubmit = (): void => {
-  if (!checkValidations()) return
+const onSubmitMainModal = (): void => {
+  if (!onCheckValidations()) return
 
   if (['select_options', 'default'].includes(selectedLocalOptionName.value))
     selectedLocalOptionName.value = 'custom'
@@ -333,7 +359,7 @@ const onSubmit = (): void => {
   const savedObject = {
     fields: currentFields,
     optionName: selectedLocalOptionName.value,
-    metric: selectedMetric.value,
+    metric: selectedMetricLocal.value,
     counters: selectedRows.value,
     timespanType: timespanType.value,
     periodType: localPeriodType.value,
@@ -349,7 +375,7 @@ const onSubmit = (): void => {
   }
 
   emits('submit-options', savedObject)
-  onHide()
+  onHideMainModal()
 }
 
 const timespanType = ref<string>('')
@@ -372,7 +398,7 @@ const onSaveOptions = (name: string): void => {
     routeType,
     chartType,
     counters,
-    metric: selectedMetric.value,
+    metric: selectedMetricLocal.value,
     timespan: {
       periodType: localPeriodType.value,
       units: localCustomTime.value,
@@ -388,7 +414,8 @@ const onSaveOptions = (name: string): void => {
 }
 
 const setSelectOptions = (): void => {
-  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
+  selectedMetricLocal.value =
+    props.selectedMetric || metricsItems.value[0]?.value
   localSelectedCountersKeys.value = props.selectedCountersKeys
   localSelectedChartType.value = props.selectedChartType
   localSelectedTimespanType.value = props.selectedTimespanType
@@ -398,7 +425,7 @@ const setSelectOptions = (): void => {
 }
 
 const setDefaultOptions = (): void => {
-  selectedMetric.value = metricsItems.value[0]?.value
+  selectedMetricLocal.value = metricsItems.value[0]?.value
   localSelectedCountersKeys.value = []
   localSelectedChartType.value = 'spline'
   localSelectedTimespanType.value = ''
@@ -422,7 +449,7 @@ const setCustomOptions = (name: string): void => {
   else if (selectedValue.chartType === 'stacked_graph')
     currentChartType = 'area'
 
-  selectedMetric.value = selectedValue.metric
+  selectedMetricLocal.value = selectedValue.metric
   localSelectedCountersKeys.value = selectedValue.counters.map(
     (item) => item.id
   )
@@ -461,14 +488,14 @@ const onDeleteChartName = (name: string): void => {
 const isDisabledSubmit = computed<boolean>(() =>
   checkIsDisabledSubmit(
     props.type,
-    selectedMetric.value,
+    selectedMetricLocal.value,
     selectedRows.value.length,
     localSelectedObjects.value
   )
 )
 
 watch(
-  selectedMetric,
+  selectedMetricLocal,
   (newValue) => {
     emits('select-metric-local', newValue)
   },
@@ -480,32 +507,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
-.chart-options-modal {
-  .loader-on :deep(.modal-body) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  :deep(.modal-title) {
-    text-transform: capitalize;
-  }
-
-  #loader {
-    min-height: 90px;
-    text-align: center;
-  }
-
-  .chart-options-content {
-    display: flex;
-    flex-direction: row;
-    flex-basis: 90%;
-    overflow-y: hidden;
-  }
-}
-@media (max-width: 1024px) {
-  .chart-options-content {
-    flex-direction: column !important;
-  }
-}
-</style>
+<style scoped lang="scss"></style>