bfg-common 1.0.25 → 1.0.26

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

@@ -1,28 +1,22 @@
 <template>
-  <div class="charts-view">
-    <client-only>
-      <template v-if="!props.loading">
-        <div
-          v-for="item in graphData"
-          :key="item.title"
-          class="chart-container graph-advanced"
-        >
-          <common-graph
-            :chart="chart"
-            :data="item"
-            :update="updateHelper"
-            :export-type="exportType"
-            :selected-row="selectedRow"
-          />
-        </div>
-      </template>
-    </client-only>
+  <div ref="chartsView">
+    <template v-if="!props.loading && chartData">
+      <common-graph
+        :chart="chart"
+        :data="chartData"
+        :update="chartHelper"
+        :export-type="exportType"
+        :selected-row="selectedRow"
+      />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/models/interfaces'
-import { graphDataFunc } from '~/components/common/graph/utils/renderGraph'
+import { useElementSize } from '@vueuse/core'
+import { format } from 'date-fns'
+import { UI_I_Localization } from '~/models/interfaces'
+import { graphDataFunc } from 'bfg-nuxt-3-graph/graph/utils/renderGraph'
 import {
   I_LineGraph,
   I_SeriesLine,
@@ -32,118 +26,97 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 const props = defineProps<{
   loading: boolean
-  data: I_SeriesLine
-  update: number
+  data: I_SeriesLine | null
   export: string
   selectedRow: number[]
+  darkMode: boolean
+  formattedDatetime: any
+  getDateFormat: any
+  language: string
 }>()
 
-onMounted(() => {
-  isReady = true
-  setResizeObserve()
-})
-
-const updateHelper = ref<number>(0)
-
-const graphData = ref<I_LineGraph[]>([])
+const chartData = ref<I_LineGraph | null>(null)
 
 const isFullScreen = ref<boolean>(false)
 const chart = ref<any>(null)
-const updateGraphsData = (): void => {
-  if (!isReady) return
-
-  const resizeElementWidth = document
-    .getElementById('center-pane')
-    ?.getBoundingClientRect().width
-  if (
-    isFullScreen.value ||
-    !isReady ||
-    cacheElementWidth === resizeElementWidth
-  )
-    return
+const chartHelper = ref<number>(0)
 
-  cacheElementWidth = resizeElementWidth || 0
-  const themeMode = useLocalStorage('themeMode')
-  const isDarkMode = themeMode === 'dark-theme'
-
-  const element = document.querySelector('.chart-container.graph-advanced')
-  const elementWidth = element
-    ? Math.round(element.getBoundingClientRect().width)
-    : 1200
-
-  graphData.value = []
-  graphData.value.push(
-    graphDataFunc(
-      props.data,
-      isDarkMode,
-      localization.value,
-      isFullScreen,
-      true,
-      false,
-      false,
-      '',
-      '',
-      elementWidth,
-      chart
-    )
-  )
+const fullScreenCallBack = (newValue: any): void => {
+  typeof newValue === 'boolean' && (isFullScreen.value = newValue)
 }
 
-let timeInterval = true
-let cacheElementWidth = 0
-let isReady = false
-const outputSize = (): void => {
-  if (!timeInterval || !isReady) return
-
-  timeInterval = false
-  setTimeout(() => {
-    updateHelper.value++
-
-    timeInterval = true
-    if (!chart.value || !chart.value?.hasLoaded) return
-
-    chart.value.reflow()
-  }, 1000)
+const chartCallback = (newValue: any): void => {
+  newValue && (chart.value = newValue)
 }
 
-const setResizeObserve = (): void => {
-  const el = document.getElementById('center-pane')
+let dateFormat = ''
+
+const startChart = (): void => {
+  if (!props.data) return
+
+  chartData.value = graphDataFunc(
+    props.data,
+    props.darkMode,
+    localization.value,
+    fullScreenCallBack,
+    true,
+    false,
+    false,
+    '',
+    '',
+    0,
+    chartCallback,
+    props.formattedDatetime,
+    format,
+    dateFormat
+  )
 
-  if (!el) {
-    setTimeout(setResizeObserve, 0)
-    return
-  }
-  timeInterval = true
-  new ResizeObserver(outputSize).observe(el)
+  chartHelper.value++
 }
 
-const updateGraph = (): void => {
-  outputSize()
-  cacheElementWidth = 0
-
-  updateGraphsData()
-}
 watch(
   () => props.data,
-  (val) => {
-    if (!val) return
+  (newValue) => {
+    if (!newValue) return
 
-    updateGraph()
+    startChart()
   },
   { immediate: true }
 )
+
 watch(
-  () => props.update,
-  () => updateGraph()
+  () => props.darkMode,
+  () => {
+    startChart()
+  }
 )
 
 watch(
-  () => props.loading,
-  (val) => {
-    isReady = !val
+  () => props.language,
+  () => {
+    dateFormat = props.getDateFormat(props.language)
+    startChart()
   }
 )
 
+const chartsView = ref(null)
+const { width } = useElementSize(chartsView)
+
+watch(width, (newValue) => {
+  if (!chart.value?.isResizing) return
+
+  chart.value.setSize(1, chart.chartHeight)
+
+  if (isFullScreen.value) {
+    chart.value.setSize(window.innerWidth, chart.chartHeight)
+    return
+  }
+
+  setTimeout(() => {
+    chart.value.setSize(newValue, chart.chartHeight)
+  }, 1000)
+})
+
 const exportType = ref<string>('')
 watch(
   () => props.export,
@@ -156,45 +129,4 @@ watch(
 )
 </script>
 
-<style scoped lang="scss">
-.charts-view {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  overflow: auto;
-  height: 100%;
-
-  .chart-container {
-    box-sizing: border-box;
-    flex-grow: 1;
-    min-height: 300px;
-    height: 100%;
-    min-width: 300px;
-    width: 100%;
-    position: relative;
-
-    &:first-child:last-child {
-      height: 100%;
-      width: 100%;
-    }
-
-    &:first-child:nth-last-child(2),
-    &:nth-child(2):last-child {
-      width: 50%;
-      height: 100%;
-    }
-  }
-}
-@media (min-width: 1280px) {
-  .charts-view .chart-container {
-    width: 50%;
-  }
-}
-@media (min-height: 800px) {
-  .charts-view .chart-container {
-    height: 50%;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

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

@@ -2,8 +2,12 @@
   <div class="horizontal-flex-container overview-chart-title-bar">
     <div class="chart-title-content">
       <client-only>
-        <span class="chart-title">{{ props.chartTitle }},</span>
-        <span class="chart-title uppercase">{{ chartTitleDate }}</span>
+        <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">
@@ -11,7 +15,11 @@
         >{{ localization.period }}:</label
       >
       <div class="select">
-        <select id="periodSelect" v-model="selectedPeriod">
+        <select
+          id="periodSelect"
+          v-model="selectedPeriod"
+          :disabled="props.disabledPeriod"
+        >
           <option
             v-for="(item, index) in periodOptions"
             :key="index"
@@ -34,7 +42,11 @@
         >{{ localization.view }}:</label
       >
       <div class="select">
-        <select id="viewSelect" v-model="selectedView">
+        <select
+          id="viewSelect"
+          v-model="selectedView"
+          :disabled="props.disabledView"
+        >
           <option
             v-for="(item, index) in viewOptions"
             :key="index"
@@ -72,10 +84,12 @@
   <common-monitor-advanced-tools-chart-options-modal
     v-if="isShowModal"
     :type="props.type"
-    :loading="optionsLoading"
-    :counters="props.counters"
-    :counters-loading="props.countersLoading"
+    :language="props.language"
+    :selected-counters-keys="props.selectedCountersKeys"
+    :selected-metric="props.selectedMetric"
     @hide="isShowModal = false"
+    @select-row="emits('select-row', $event)"
+    @select-metric="emits('select-metric', $event)"
   />
 </template>
 
@@ -83,28 +97,37 @@
 import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
 import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
+import { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
 import {
   periodFunc,
   viewFunc,
   exportFunc,
 } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
-import { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/models/interfaces'
-import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
   startDate: number
   chartTitle: string
-  counters: any
-  countersLoading: boolean
+  language: string
+  selectedCountersKeys: number[]
+  selectedMetric: T_ChartHost | T_ChartVm
+  disabledPeriod?: boolean
+  disabledView?: boolean
 }>()
 
 const emits = defineEmits<{
   (event: 'update-tools', obj: UI_I_MonitorGraphPayload): void
   (event: 'exporting', str: string): void
   (event: 'open-advanced-page'): void
-  (event: 'get-options'): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -136,15 +159,17 @@ watch(
 
 watch(
   () => [selectedPeriod.value, selectedView.value],
-  (val: string[]) => {
-    const validPeriodData = getValidDateByOptionFunc(val[0])
+  (newValue: string[]) => {
+    const validPeriodData = getValidDateByOptionFunc(newValue[0])
+
     const period = [
       Math.round(validPeriodData[0] / 1000),
       Math.round(validPeriodData[1] / 1000),
     ]
     const tools: UI_I_MonitorGraphPayload = {
       period,
-      view: val[1],
+      periodType: newValue[0],
+      view: newValue[1],
     }
     emits('update-tools', tools)
   },
@@ -167,12 +192,8 @@ const onExportMenuItem = (item: UI_I_DropMenu<any>): void =>
   emits('exporting', item.action)
 
 const isShowModal = ref<boolean>(false)
-const optionsLoading = ref<boolean>(false)
-const onShowChartOptions = async (): Promise<void> => {
+const onShowChartOptions = (): void => {
   isShowModal.value = true
-  optionsLoading.value = true
-  emits('get-options')
-  optionsLoading.value = false
 }
 </script>
 

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

@@ -1,7 +1,6 @@
 <template>
   <div class="chart-options-modal">
     <atoms-modal
-      :class="[{ 'loader-on': props.loading }]"
       width="1150px"
       :show="true"
       :title="localization.chartOptions"
@@ -14,24 +13,20 @@
           :alerts="alerts"
           @remove="onRemoveAlerts"
         />
-
-        <atoms-loader-pre-loader
-          v-show="props.loading"
-          id="loader"
-          class="content-area__loading"
-          :show="true"
-        />
-        <div v-show="!props.loading">
+        <div>
           <common-monitor-advanced-tools-chart-options-modal-actions />
 
           <div class="horizontal-flex-container chart-options-content">
             <common-monitor-advanced-tools-chart-options-modal-metrics
-              :type="props.type"
+              v-model:selected-metric="selectedMetric"
+              :metrics-items="metricsItems"
             />
             <common-monitor-advanced-tools-chart-options-modal-counters
-              v-model:selected-counters="selectedCounters"
-              :counters="props.counters"
-              :loading="props.countersLoading"
+              :chart="selectedMetric"
+              :language="props.language"
+              :type="props.type"
+              :selected-keys="props.selectedCountersKeys"
+              @select-row="selectedRows = $event"
             />
           </div>
         </div>
@@ -43,21 +38,35 @@
 <script setup lang="ts">
 import { UI_I_Localization } from '~/models/interfaces'
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
+import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
+import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
 
 const props = defineProps<{
-  loading: boolean
   type: UI_T_AdvancedType
-  counters: any
-  countersLoading: boolean
+  language: string
+  selectedCountersKeys: number[]
+  selectedMetric: T_ChartHost | T_ChartVm
 }>()
 
 const emits = defineEmits<{
   (event: 'hide'): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedCounters = ref<number[]>([])
+const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
+  metricsFunc(localization.value, props.type)
+)
+const selectedMetric = ref<T_ChartHost | T_ChartVm>(
+  props.selectedMetric || '' + metricsItems.value[0]?.value
+)
 
 const isShowAlerts = ref<boolean>(false)
 const alerts = ref<string[]>([''])
@@ -71,16 +80,23 @@ const onHide = (): void => {
   emits('hide')
 }
 
+const selectedRows = ref<UI_I_AdvancedCounterItem[]>([])
+
 const checkValidations = (): boolean => {
-  if (selectedCounters.value.length) return true
+  if (selectedRows.value.length) return true
 
   alerts.value = [localization.value.noCountersSelected]
   isShowAlerts.value = true
 
   return false
 }
+
 const onSave = (): void => {
-  checkValidations() && onHide()
+  if (!checkValidations()) return
+
+  emits('select-metric', selectedMetric.value)
+  emits('select-row', selectedRows.value)
+  onHide()
 }
 </script>
 

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue

@@ -1,40 +1,41 @@
 <template>
   <div class="vertical-flex-container chart-option-counters-container">
     <common-monitor-advanced-tools-chart-options-modal-counters-table
-      v-model:selected-counters="selectedCountersLocal"
-      :counters="props.counters"
-      :loading="props.loading"
-      @change="onUpdateSelectedOption"
+      :chart="props.chart"
+      :type="props.type"
+      :selected-keys="props.selectedKeys"
+      @select-row="emits('select-row', $event)"
     />
     <common-monitor-advanced-tools-chart-options-modal-counters-timespan
+      :language="props.language"
       :selected="selectedOptions"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import {
+  T_ChartHost,
+  T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import {
+  UI_I_AdvancedCounterItem,
+  UI_I_AdvancedTargetObject,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+
 const props = defineProps<{
-  counters: any
-  loading: boolean
-  selectedCounters: number[]
+  language: string
+  chart: T_ChartHost | T_ChartVm
+  type: UI_T_AdvancedType
+  selectedKeys: number[]
 }>()
+
 const emits = defineEmits<{
-  (event: 'update:selected-counters', value: number[]): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
 }>()
 
-const selectedCountersLocal = computed<number[]>({
-  get() {
-    return props.selectedCounters
-  },
-  set(newValue) {
-    emits('update:selected-counters', newValue)
-  },
-})
-
-const selectedOptions = ref<number[]>([])
-const onUpdateSelectedOption = (val: number[]): void => {
-  selectedOptions.value = val
-}
+const selectedOptions = ref<UI_I_AdvancedTargetObject[][]>([])
 </script>
 
 <style scoped lang="scss">