bfg-common 1.0.26 → 1.0.27

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

@@ -1,164 +1,149 @@
-<template>
-  <div id="advanced-page" class="fill-parent">
-    <div class="routed-view-panel-layout">
-      <div class="settingsViewHeader">
-        <h3 class="settingsBlockTitle m-0">
-          {{ localization.advancedPerformance }}
-        </h3>
-      </div>
-      <!--      <div v-show="props.advancedLoading || !props.data" class="empty-data">-->
-      <!--        {{ localization.emptyAdvancedGraphText }}-->
-      <!--      </div>-->
-      <div class="fill-parent flex-column">
-        <div class="vertical-flex-container fill-parent">
-          <common-monitor-advanced-tools
-            :type="props.type"
-            :start-date="props.data?.pointStart || 0"
-            :chart-title="props.data?.groupName || ''"
-            :language="props.language"
-            :selected-counters-keys="props.selectedCountersKeys"
-            :selected-metric="props.selectedMetric"
-            :disabled-period="props.disabledPeriod"
-            :disabled-view="props.disabledView"
-            @update-tools="onUpdateTools"
-            @exporting="onExporting"
-            @open-advanced-page="onGetEmptyPage"
-            @select-row="emits('select-row', $event)"
-            @select-metric="emits('select-metric', $event)"
-          />
-
-          <div v-show="!props.data" class="empty-container">
-            {{
-              localization.noPerformanceDataIsAvailableForTheCurrentlySelectedMetrics
-            }}
-          </div>
-
-          <div v-show="props.data">
-            <div class="main-graphs-loader relative">
-              <common-monitor-advanced-graph-view
-                :loading="props.advancedLoading"
-                :data="props.data"
-                :update="update"
-                :export="exportGraph"
-                :selected-row="selectedRow"
-                :dark-mode="props.darkMode"
-                :formatted-datetime="props.formattedDatetime"
-                :get-date-format="props.getDateFormat"
-                :language="props.language"
-              />
-              <div class="datatable">
-                <common-monitor-advanced-table
-                  :data="props.tableData"
-                  @select="onCheckSelectedRow"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
-import { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/models/interfaces'
-import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
-import { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/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'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  advancedLoading: boolean
-  data: I_SeriesLine | null
-  tableData: UI_I_PerformanceItem[] | []
-  language: string
-  darkMode: boolean
-  formattedDatetime: any
-  getDateFormat: any
-  selectedCountersKeys: number[]
-  selectedMetric: T_ChartHost | T_ChartVm
-  disabledPeriod?: boolean
-  disabledView?: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
-  (event: 'open-advanced-page'): void
-  (event: 'update-selected-row', value: number[]): void
-  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (event: 'select-metric', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onUpdateTools = (tools: UI_I_MonitorGraphPayload): void =>
-  emits('update-tools', tools)
-
-const exportGraph = ref<string>('')
-const onExporting = (key: string): void => {
-  exportGraph.value = key
-}
-
-const onGetEmptyPage = (): void => emits('open-advanced-page')
-
-const update = ref<number>(0)
-
-const selectedRow = ref<number[]>([])
-const onCheckSelectedRow = (data: number[]): void => {
-  selectedRow.value = data
-}
-</script>
-
-<style scoped lang="scss">
-#advanced-page {
-  overflow-x: hidden;
-}
-.fill-parent {
-  flex-direction: column;
-
-  .empty-data {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .empty-container {
-    min-height: 300px;
-    height: 100%;
-    background-color: var(--block-view-bg-color5);
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-  }
-
-  .routed-view-panel-layout {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-
-    .settingsViewHeader {
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-
-      .settingsBlockTitle {
-        font-size: 22px;
-        font-weight: 400;
-        color: var(--light-white-100);
-        padding: 4px 0 4px 2px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div id="advanced-page" class="fill-parent">
+    <div class="routed-view-panel-layout">
+      <div class="settingsViewHeader">
+        <h3 class="settingsBlockTitle m-0">
+          {{ localization.advancedPerformance }}
+        </h3>
+      </div>
+      <div v-show="props.advancedLoading || !props.data" class="empty-data">
+        {{ localization.emptyAdvancedGraphText }}
+      </div>
+      <div
+        v-show="!props.advancedLoading && props.data"
+        class="fill-parent flex-column"
+      >
+        <div class="vertical-flex-container fill-parent">
+          <common-monitor-advanced-tools
+            :type="props.type"
+            :start-date="props.data?.pointStart || 0"
+            :chart-title="props.data?.groupName || ''"
+            :counters="props.counters"
+            :counters-loading="props.countersLoading"
+            @update-tools="onUpdateTools"
+            @exporting="onExporting"
+            @open-advanced-page="onGetEmptyPage"
+            @get-options="onGetOptions"
+          />
+
+          <div v-show="!props.data" class="empty-container">
+            {{
+              localization.noPerformanceDataIsAvailableForTheCurrentlySelectedMetrics
+            }}
+          </div>
+
+          <div v-show="props.data">
+            <div class="main-graphs-loader relative">
+              <common-monitor-advanced-graph-view
+                :loading="props.advancedLoading"
+                :data="props.data"
+                :update="update"
+                :export="exportGraph"
+                :selected-row="selectedRow"
+              />
+              <div class="datatable">
+                <common-monitor-advanced-table
+                  :data="props.tableData"
+                  @select="onCheckSelectedRow"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+import { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/models/interfaces'
+import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
+import { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/models/interfaces'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  advancedLoading: boolean
+  data: I_SeriesLine | null
+  tableData: UI_I_PerformanceItem | []
+  counters: any
+  countersLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-tools', obj: UI_I_MonitorGraphPayload): void
+  (event: 'open-advanced-page'): void
+  (event: 'get-options'): void
+  (event: 'update-selected-row', data: number[]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onUpdateTools = (tools: UI_I_MonitorGraphPayload): void =>
+  emits('update-tools', tools)
+
+const exportGraph = ref<string>('')
+const onExporting = (key: string): void => {
+  exportGraph.value = key
+}
+
+const onGetEmptyPage = (): void => emits('open-advanced-page')
+
+const onGetOptions = (): void => emits('get-options')
+
+const update = ref<number>(0)
+
+const selectedRow = ref<number[]>([])
+const onCheckSelectedRow = (data: number[]): void => {
+  selectedRow.value = data
+}
+</script>
+
+<style scoped lang="scss">
+#advanced-page {
+  overflow-x: hidden;
+}
+.fill-parent {
+  flex-direction: column;
+
+  .empty-data {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .empty-container {
+    min-height: 300px;
+    height: 100%;
+    background-color: var(--block-view-bg-color5);
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  .routed-view-panel-layout {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    .settingsViewHeader {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+
+      .settingsBlockTitle {
+        font-size: 22px;
+        font-weight: 400;
+        color: var(--light-white-100);
+        padding: 4px 0 4px 2px;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,132 +1,200 @@
-<template>
-  <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 { 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,
-} from 'bfg-nuxt-3-graph/graph/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  loading: boolean
-  data: I_SeriesLine | null
-  export: string
-  selectedRow: number[]
-  darkMode: boolean
-  formattedDatetime: any
-  getDateFormat: any
-  language: string
-}>()
-
-const chartData = ref<I_LineGraph | null>(null)
-
-const isFullScreen = ref<boolean>(false)
-const chart = ref<any>(null)
-const chartHelper = ref<number>(0)
-
-const fullScreenCallBack = (newValue: any): void => {
-  typeof newValue === 'boolean' && (isFullScreen.value = newValue)
-}
-
-const chartCallback = (newValue: any): void => {
-  newValue && (chart.value = newValue)
-}
-
-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
-  )
-
-  chartHelper.value++
-}
-
-watch(
-  () => props.data,
-  (newValue) => {
-    if (!newValue) return
-
-    startChart()
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.darkMode,
-  () => {
-    startChart()
-  }
-)
-
-watch(
-  () => 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,
-  (val) => {
-    if (!val) return
-
-    exportType.value = val
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss"></style>
+<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>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/models/interfaces'
+import { graphDataFunc } from '~/components/common/graph/utils/renderGraph'
+import {
+  I_LineGraph,
+  I_SeriesLine,
+} from 'bfg-nuxt-3-graph/graph/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  loading: boolean
+  data: I_SeriesLine
+  update: number
+  export: string
+  selectedRow: number[]
+}>()
+
+onMounted(() => {
+  isReady = true
+  setResizeObserve()
+})
+
+const updateHelper = ref<number>(0)
+
+const graphData = ref<I_LineGraph[]>([])
+
+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
+
+  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
+    )
+  )
+}
+
+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 setResizeObserve = (): void => {
+  const el = document.getElementById('center-pane')
+
+  if (!el) {
+    setTimeout(setResizeObserve, 0)
+    return
+  }
+  timeInterval = true
+  new ResizeObserver(outputSize).observe(el)
+}
+
+const updateGraph = (): void => {
+  outputSize()
+  cacheElementWidth = 0
+
+  updateGraphsData()
+}
+watch(
+  () => props.data,
+  (val) => {
+    if (!val) return
+
+    updateGraph()
+  },
+  { immediate: true }
+)
+watch(
+  () => props.update,
+  () => updateGraph()
+)
+
+watch(
+  () => props.loading,
+  (val) => {
+    isReady = !val
+  }
+)
+
+const exportType = ref<string>('')
+watch(
+  () => props.export,
+  (val) => {
+    if (!val) return
+
+    exportType.value = val
+  },
+  { immediate: true }
+)
+</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>

package/components/common/monitor/advanced/models/interfaces.ts

@@ -1,6 +1,6 @@
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-export interface UI_I_OptionData {
-  host: UI_I_OptionItem[]
-  vm: UI_I_OptionItem[]
-}
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export interface UI_I_OptionData {
+  host: UI_I_OptionItem[]
+  vm: UI_I_OptionItem[]
+}

package/components/common/monitor/advanced/models/types.ts

@@ -1 +1 @@
-export type UI_T_AdvancedType = 'host' | 'vm'
+export type UI_T_AdvancedType = 'host' | 'vm'