bfg-common 1.4.838 → 1.4.839

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

@@ -0,0 +1,243 @@
+<template>
+  <div id="advanced-page" class="fill-parent">
+    <div class="routed-view-panel-layout">
+      <div class="settingsViewHeader">
+        <h3 class="settingsBlockTitle m-0">
+          {{ localization.inventoryMonitor.advancedPerformance }}
+        </h3>
+      </div>
+      <div v-if="props.isEmpty" class="empty-data">
+        {{ localization.inventoryMonitor.emptyAdvancedGraphText }}
+      </div>
+      <div v-else class="fill-parent flex-column">
+        <div class="vertical-flex-container fill-parent">
+          <common-monitor-advanced-tools
+            v-model:selected-timespan-type="localSelectedTimespanType"
+            :type="props.type"
+            :start-date="props.data?.pointStart || 0"
+            :end-date="props.data?.pointEnd || 0"
+            :chart-title="props.data?.groupName || ''"
+            :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"
+            :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="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"
+            @update-tools="emits('update-tools', $event)"
+            @exporting="onExporting"
+            @open-advanced-page="onGetEmptyPage"
+            @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="emits('delete-option')"
+            @submit-options="emits('submit-options', $event)"
+          />
+
+          <div v-show="!props.data" class="empty-container">
+            {{
+              localization.inventoryMonitor
+                .noPerformanceCurrentlySelectedMetrics
+            }}
+          </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"
+                :selected-chart-type="props.selectedChartType"
+              />
+              <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 type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_MonitorGraphPayload } from '~/components/common/monitor/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+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 { getCountCores } from '~/components/common/monitor/advanced/tools/lib/utils/countCores'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  advancedLoading: boolean
+  data: I_SeriesLine | null
+  cpuCoresDataData: I_SeriesLine | null
+  tableData: UI_I_PerformanceItem[] | []
+  language: string
+  darkMode: boolean
+  formattedDatetime: any
+  getDateFormat: any
+  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
+  hostId: string
+  selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
+  disabledPeriod?: boolean
+  disabledView?: boolean
+  isEmpty?: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:selected-timespan-type', value: string): void
+  (event: 'update-tools', value: UI_I_MonitorGraphPayload): 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
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localSelectedTimespanType = computed<string>({
+  get() {
+    return props.selectedTimespanType
+  },
+  set(newValue) {
+    emits('update:selected-timespan-type', newValue)
+  },
+})
+
+const totalCores = ref<number>(0)
+let isFirstUpdate = true
+watch(
+  () => props.cpuCoresDataData,
+  (newValue) => {
+    if (!newValue || !isFirstUpdate) return
+
+    totalCores.value = getCountCores(newValue)
+    isFirstUpdate = false
+  },
+  { immediate: true }
+)
+
+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>

package/components/common/monitor/advanced/{GraphView.vue → graphView/GraphView.vue}

@@ -1,180 +1,170 @@
-<template>
-  <div ref="chartsView" class="advanced-graph-container">
-    <div v-if="isLoading" class="graphic-loader-block">
-      <div class="spinner"></div>
-      <p>{{ localization.inventoryMonitor.retrievingData }}...</p>
-    </div>
-    <template v-if="!props.loading && chartData">
-      <common-graph
-        :chart="chart"
-        :data="chartData"
-        :update="chartHelper"
-        :export-type="exportType"
-        :selected-row="props.selectedRow"
-      />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDebounceFn, useElementSize } from '@vueuse/core'
-import { format } from 'date-fns'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { graphDataFunc } from 'bfg-nuxt-3-graph/graph/lib/utils/renderGraph'
-import type {
-  I_LineGraph,
-  I_SeriesLine,
-} from 'bfg-nuxt-3-graph/graph/lib/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
-  selectedChartType: string
-}>()
-
-const isLoading = ref<boolean>(true)
-
-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: boolean): void => {
-  isFullScreen.value = newValue
-}
-
-const chartCallback = (newValue: any): void => {
-  newValue && (chart.value = newValue)
-}
-
-watch(
-  chart,
-  (newValue) => {
-    isLoading.value = !newValue?.hasLoaded
-  },
-  { immediate: true, deep: true }
-)
-
-let dateFormat = ''
-
-const chartsView = ref(null)
-const { width } = useElementSize(chartsView)
-
-const startChart = useDebounceFn(() => {
-  if (!props.data || !width.value) return
-
-  chartData.value = graphDataFunc(
-    props.data,
-    props.darkMode,
-    localization.value,
-    fullScreenCallBack,
-    true,
-    false,
-    false,
-    props.selectedChartType,
-    '',
-    Math.floor(width.value),
-    chartCallback,
-    props.formattedDatetime,
-    format,
-    dateFormat
-  )
-
-  chartHelper.value++
-}, 1000)
-
-watch(
-  () => props.data,
-  (newValue) => {
-    if (!newValue) {
-      isLoading.value = true
-      return
-    }
-
-    startChart()
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.darkMode,
-  () => {
-    startChart()
-  }
-)
-
-watch(
-  () => props.language,
-  () => {
-    dateFormat = props.getDateFormat(props.language)
-    startChart()
-  }
-)
-
-watch(
-  () => props.selectedChartType,
-  () => {
-    startChart()
-  },
-  { immediate: true }
-)
-
-watch(width, (newValue) => {
-  if (newValue) startChart()
-
-  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,
-  (newValue) => {
-    if (!newValue) return
-
-    exportType.value = newValue
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss">
-.advanced-graph-container {
-  position: relative;
-  min-height: 400px;
-
-  .graphic-loader-block {
-    background-color: var(--loader-bg-color);
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-  }
-}
-</style>
+<template>
+  <common-monitor-advanced-graph-view-new
+    v-if="isNewView"
+    :loading="props.loading"
+    :is-loading="isLoading"
+    :chart-data="chartData"
+    :chart="chart"
+    :chart-helper="chartHelper"
+    :export-type="props.export"
+    :selected-row="props.selectedRow"
+    :group-name="props.data?.groupName || ''"
+  />
+  <common-monitor-advanced-graph-view-old
+    v-else
+    :loading="props.loading"
+    :is-loading="isLoading"
+    :chart-data="chartData"
+    :chart="chart"
+    :chart-helper="chartHelper"
+    :export-type="props.export"
+    :selected-row="props.selectedRow"
+  />
+</template>
+
+<script setup lang="ts">
+import type {
+  I_LineGraph,
+  I_SeriesLine,
+} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import { useDebounceFn, useElementSize } from '@vueuse/core'
+import { graphDataFunc } from 'bfg-nuxt-3-graph/graph/lib/utils/renderGraph'
+import { format } from 'date-fns'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  data: I_SeriesLine | null
+  export: string
+  selectedRow: number[]
+  darkMode: boolean
+  formattedDatetime: any
+  getDateFormat: any
+  language: string
+  selectedChartType: string
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const isLoading = ref<boolean>(true)
+
+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: boolean): void => {
+  isFullScreen.value = newValue
+}
+
+const chartCallback = (newValue: any): void => {
+  newValue && (chart.value = newValue)
+}
+
+watch(
+  chart,
+  (newValue) => {
+    isLoading.value = !newValue?.hasLoaded
+  },
+  { immediate: true, deep: true }
+)
+
+let dateFormat = ''
+
+const chartsView = ref(null)
+const { width } = useElementSize(chartsView)
+
+const startChart = useDebounceFn(() => {
+  if (!props.data || !width.value) return
+
+  chartData.value = graphDataFunc(
+    props.data,
+    props.darkMode,
+    localization.value,
+    fullScreenCallBack,
+    true,
+    false,
+    false,
+    props.selectedChartType,
+    '',
+    Math.floor(width.value),
+    chartCallback,
+    props.formattedDatetime,
+    format,
+    dateFormat
+  )
+
+  chartHelper.value++
+}, 1000)
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue) {
+      isLoading.value = true
+      return
+    }
+
+    startChart()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.darkMode,
+  () => {
+    startChart()
+  }
+)
+
+watch(
+  () => props.language,
+  () => {
+    dateFormat = props.getDateFormat(props.language)
+    startChart()
+  }
+)
+
+watch(
+  () => props.selectedChartType,
+  () => {
+    startChart()
+  },
+  { immediate: true }
+)
+
+watch(width, (newValue) => {
+  if (newValue) startChart()
+
+  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,
+  (newValue) => {
+    if (!newValue) return
+
+    exportType.value = newValue
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div ref="chartsView" class="advanced-graph-container">
+    <ui-skeleton-long-metric v-if="props.isLoading" :title="props.groupName" />
+    <template v-if="!props.loading && props.chartData">
+      <common-graph
+        :chart="props.chart"
+        :data="props.chartData"
+        :update="props.chartHelper"
+        :export-type="props.exportType"
+        :selected-row="props.selectedRow"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { I_LineGraph } from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  isLoading: boolean
+  chartData: I_LineGraph | null
+  chart: any
+  chartHelper: number
+  exportType: string
+  selectedRow: number[]
+  groupName: string
+}>()
+</script>
+
+<style scoped lang="scss">
+.advanced-graph-container {
+  min-height: 400px;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <div ref="chartsView" class="advanced-graph-container">
+    <div v-if="props.isLoading" class="graphic-loader-block">
+      <div class="spinner"></div>
+      <p>{{ localization.inventoryMonitor.retrievingData }}...</p>
+    </div>
+    <template v-if="!props.loading && props.chartData">
+      <common-graph
+        :chart="props.chart"
+        :data="props.chartData"
+        :update="props.chartHelper"
+        :export-type="props.exportType"
+        :selected-row="props.selectedRow"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { I_LineGraph } from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  loading: boolean
+  isLoading: boolean
+  chartData: I_LineGraph | null
+  chart: any
+  chartHelper: number
+  exportType: string
+  selectedRow: number[]
+}>()
+</script>
+
+<style scoped lang="scss">
+.advanced-graph-container {
+  position: relative;
+  min-height: 400px;
+
+  .graphic-loader-block {
+    background-color: var(--loader-bg-color);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+}
+</style>