bfg-common 1.0.0

package/components/common/monitor/overview/Overview.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="charts-view">
+    <template v-if="oneSettingsLocal && !isMountedLoader">
+      <div :class="['chart-container', `graph-${oneSettingsLocal.title}`]">
+        <div v-if="oneSettingsLocal.loader" class="graphic-loader-block">
+          <div class="spinner"></div>
+          <p>{{ localization.retrievingData }}...</p>
+        </div>
+        <common-graph
+          v-else-if="oneGraphData"
+          :data="oneGraphData"
+          :chart="chartOne"
+          :update="oneUpdateHelper"
+        />
+        <div v-else class="graph-empty-block">
+          <div class="title">{{ oneSettingsLocal.title }}</div>
+          <div class="body-block">
+            {{ localization.emptyGraphText }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="twoSettingsLocal && !isMountedLoader">
+      <div :class="['chart-container', `graph-${twoSettingsLocal.title}`]">
+        <div v-if="twoSettingsLocal.loader" class="graphic-loader-block">
+          <div class="spinner"></div>
+          <p>{{ localization.retrievingData }}...</p>
+        </div>
+        <common-graph
+          v-else-if="twoGraphData"
+          :data="twoGraphData"
+          :chart="chartTwo"
+          :update="twoUpdateHelper"
+        />
+        <div v-else class="graph-empty-block">
+          <div class="title">{{ twoSettingsLocal.title }}</div>
+          <div class="body-block">
+            {{ localization.emptyGraphText }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="threeSettingsLocal && !isMountedLoader">
+      <div :class="['chart-container', `graph-${threeSettingsLocal.title}`]">
+        <div v-if="threeSettingsLocal.loader" class="graphic-loader-block">
+          <div class="spinner"></div>
+          <p>{{ localization.retrievingData }}...</p>
+        </div>
+        <common-graph
+          v-else-if="threeGraphData"
+          :data="threeGraphData"
+          :chart="chartThree"
+          :update="threeUpdateHelper"
+        />
+        <div v-else class="graph-empty-block">
+          <div class="title">{{ threeSettingsLocal.title }}</div>
+          <div class="body-block">
+            {{ localization.emptyGraphText }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="fourSettingsLocal && !isMountedLoader">
+      <div :class="['chart-container', `graph-${fourSettingsLocal.title}`]">
+        <div v-if="fourSettingsLocal.loader" class="graphic-loader-block">
+          <div class="spinner"></div>
+          <p>{{ localization.retrievingData }}...</p>
+        </div>
+        <common-graph
+          v-else-if="fourGraphData"
+          :data="fourGraphData"
+          :chart="chartFour"
+          :update="fourUpdateHelper"
+        />
+        <div v-else class="graph-empty-block">
+          <div class="title">{{ fourSettingsLocal.title }}</div>
+          <div class="body-block">
+            {{ localization.emptyGraphText }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <div v-if="isMountedLoader" class="content-global-loading">
+      {{ localization.loading }}...
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_GraphDataSettingItem } from '~/components/common/monitor/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 props = defineProps<{
+  oneChart?: UI_I_GraphDataSettingItem | null
+  twoChart?: UI_I_GraphDataSettingItem | null
+  threeChart?: UI_I_GraphDataSettingItem | null
+  fourChart?: UI_I_GraphDataSettingItem | null
+  themeMode?: 'string'
+  formatDate?: 'string'
+  formatTime?: 'string'
+}>()
+
+const { $formattedDatetime } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isFullScreen = ref<boolean>(false)
+
+const fullScreenCallBack = (newValue: boolean): void => {
+  newValue && (isFullScreen.value = newValue)
+}
+
+const oneUpdateHelper = ref<number>(0)
+const twoUpdateHelper = ref<number>(0)
+const threeUpdateHelper = ref<number>(0)
+const fourUpdateHelper = ref<number>(0)
+
+const chartOne = ref<any>(null)
+const chartTwo = ref<any>(null)
+const chartThree = ref<any>(null)
+const chartFour = ref<any>(null)
+
+const currentChartName = ref<string>('')
+
+const getCurrentChart = (chart: any): any => {
+  if (currentChartName.value === 'cpu' || currentChartName.value === 'space')
+    return (chartOne.value = chart)
+  if (currentChartName.value === 'memory') return (chartTwo.value = chart)
+  if (currentChartName.value === 'disk') return (chartThree.value = chart)
+  if (currentChartName.value === 'network') return (chartFour.value = chart)
+}
+
+const oneSettingsLocal = ref<UI_I_GraphDataSettingItem | null>(null)
+const twoSettingsLocal = ref<UI_I_GraphDataSettingItem | null>(null)
+const threeSettingsLocal = ref<UI_I_GraphDataSettingItem | null>(null)
+const fourSettingsLocal = ref<UI_I_GraphDataSettingItem | null>(null)
+
+const isMountedLoader = ref<boolean>()
+
+const oneGraphData = ref<I_LineGraph | null>(null)
+const twoGraphData = ref<I_LineGraph | null>(null)
+const threeGraphData = ref<I_LineGraph | null>(null)
+const fourGraphData = ref<I_LineGraph | null>(null)
+
+const setCurrentGraphData = (
+  name: string,
+  data: I_SeriesLine,
+  isDarkMode: boolean,
+  width: number
+): void => {
+  currentChartName.value = name
+
+  const graphData = graphDataFunc(
+    data,
+    isDarkMode,
+    localization.value,
+    fullScreenCallBack,
+    false,
+    true,
+    true,
+    '',
+    '',
+    width,
+    getCurrentChart,
+    $formattedDatetime,
+    format,
+    props.formatDate,
+    props.formatTime
+  )
+  if (name === 'cpu' || name === 'space') oneGraphData.value = graphData
+  if (name === 'memory') twoGraphData.value = graphData
+  if (name === 'disk') threeGraphData.value = graphData
+  if (name === 'network') fourGraphData.value = graphData
+}
+
+const outputSize = (): void => {
+  setTimeout(() => {
+    if (oneGraphData.value) oneUpdateHelper.value++
+    if (twoGraphData.value) twoUpdateHelper.value++
+    if (threeGraphData.value) threeUpdateHelper.value++
+    if (fourGraphData.value) fourUpdateHelper.value++
+
+    if (chartOne.value && chartOne.value?.hasLoaded) chartOne.value.reflow()
+
+    if (chartTwo.value && chartTwo.value?.hasLoaded) chartTwo.value.reflow()
+
+    if (chartThree.value && chartThree.value?.hasLoaded)
+      chartThree.value.reflow()
+
+    if (chartFour.value && chartFour.value?.hasLoaded) chartFour.value.reflow()
+  }, 1000)
+}
+const updateGraph = (
+  graphSetting: UI_I_GraphDataSettingItem,
+  name: string
+): void => {
+  outputSize()
+  updateGraphsData(graphSetting, name)
+}
+
+const updateGraphsData = (
+  data: UI_I_GraphDataSettingItem,
+  name: string
+): void => {
+  if (!data.data) return
+
+  const themeMode = useLocalStorage('themeMode') || props.themeMode
+  const isDarkMode = themeMode === 'dark-theme'
+
+  const width =
+    document
+      .querySelector(`.graph-${name} .graph-content`)
+      ?.getBoundingClientRect().width || 700
+
+  setCurrentGraphData(name, data.data, isDarkMode, width)
+}
+
+const checkIsMountedError = (): void => {
+  if (
+    oneSettingsLocal.value ||
+    twoSettingsLocal.value ||
+    threeSettingsLocal.value ||
+    fourSettingsLocal.value
+  )
+    isMountedLoader.value = false
+}
+
+watch(
+  () => props.oneChart,
+  (value) => {
+    if (!value) return
+
+    oneSettingsLocal.value = value
+    updateGraph(oneSettingsLocal.value, value.title)
+
+    isMountedLoader.value && checkIsMountedError()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.twoChart,
+  (value) => {
+    if (!value) return
+
+    twoSettingsLocal.value = value
+    updateGraph(twoSettingsLocal.value, value.title)
+
+    isMountedLoader.value && checkIsMountedError()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.threeChart,
+  (value) => {
+    if (!value) return
+
+    threeSettingsLocal.value = value
+    updateGraph(threeSettingsLocal.value, value.title)
+
+    isMountedLoader.value && checkIsMountedError()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(chartOne, (newValue) => {
+  if (!newValue) return
+
+  newValue.exportingGroup?.element?.children[0].children[0].remove()
+})
+watch(chartTwo, (newValue) => {
+  if (!newValue) return
+  newValue.exportingGroup?.element?.children[0].children[0].remove()
+})
+watch(chartFour, (newValue) => {
+  if (!newValue) return
+  newValue.exportingGroup?.element?.children[0].children[0].remove()
+})
+watch(chartThree, (newValue) => {
+  if (!newValue) return
+  newValue.exportingGroup?.element?.children[0].children[0].remove()
+})
+
+watch(
+  () => props.fourChart,
+  (value) => {
+    if (!value) return
+
+    fourSettingsLocal.value = value
+    updateGraph(fourSettingsLocal.value, value.title)
+
+    isMountedLoader.value && checkIsMountedError()
+  },
+  { deep: true, immediate: true }
+)
+
+const setResizeObserve = (): void => {
+  const el = document.getElementById('center-pane')
+
+  if (!el) {
+    setTimeout(setResizeObserve, 0)
+    return
+  }
+  new ResizeObserver(outputSize).observe(el)
+}
+
+onMounted(() => {
+  isMountedLoader.value = true
+  setResizeObserve()
+})
+</script>
+
+<style>
+:root {
+  --loader-bg-color: #ffffff;
+}
+:root.dark-theme {
+  --loader-bg-color: #22343c;
+}
+</style>
+
+<style scoped lang="scss">
+.charts-view {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  overflow: auto;
+  height: 100%;
+
+  .graphic-loader-block {
+    background-color: var(--loader-bg-color);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .graph-empty-block {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--loader-bg-color);
+
+    .title {
+      text-align: center;
+      font-size: 18px;
+      margin-top: 10px;
+      color: var(--global-font-color);
+    }
+
+    .body-block {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      align-items: center;
+      color: var(--global-font-color);
+    }
+  }
+
+  .chart-container {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 5px;
+    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%;
+    }
+  }
+
+  .content-global-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--global-font-color);
+  }
+}
+@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/overview/filters/Filters.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="horizontal-flex-container overview-chart-title-bar">
+    <div class="horizontal-flex-container">
+      <label for="periodSelect" class="label-select"
+        >{{ localization.period }}:</label
+      >
+      <div v-if="!disabledPeriodOptions" class="select">
+        <select id="periodSelect" v-model="selectedPeriod">
+          <option
+            v-for="(item, index) in periodOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+      <span v-else class="single-option">{{ periodOptions[0].text }}</span>
+    </div>
+    <div v-show="isShowCustomIntervalButton">
+      <a
+        id="show-interval-modal-button"
+        href="#"
+        @click="onShowIntervalModal"
+        >{{ localization.changeCustomInterval }}</a
+      >
+    </div>
+    <div v-if="!disabledPeriodOptions" class="chart-title">
+      {{ chartTitleDate }}
+    </div>
+    <div class="view-select-label horizontal-flex-container">
+      <label for="viewSelect" class="label-select"
+        >{{ localization.view }}:</label
+      >
+      <div class="select">
+        <select id="viewSelect" v-model="selectedView">
+          <option
+            v-for="(item, index) in viewOptions"
+            :key="index"
+            :value="item.value"
+            disabled
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <common-monitor-overview-filters-custom-interval-modal
+    v-show="isShowIntervalModal"
+    @hide="onHideIntervalModal"
+    @submit="onSubmitIntervalModal"
+  />
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import {
+  periodFunc,
+  viewFunc,
+} from '~/components/common/monitor/overview/filters/config/filterOptions'
+import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
+import { UI_T_OverviewViewType } from '~/components/common/monitor/overview/filters/models/types'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $formattedDatetime } = useNuxtApp()
+
+const props = defineProps<{
+  startDate: number
+  endDate: number
+  chartType: 'spline' | 'pie'
+  view: UI_T_OverviewViewType
+  formatDate?: 'string'
+  formatTime?: 'string'
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-filters', filters: UI_I_MonitorGraphPayload): void
+}>()
+
+const selectedPeriod = ref<string>('')
+const periodOptions = computed<UI_I_OptionItem[]>(() =>
+  periodFunc(localization.value)
+)
+watch(
+  () => periodOptions.value,
+  (val: UI_I_OptionItem[]) => {
+    if (val) selectedPeriod.value = val[0].value
+  },
+  { immediate: true }
+)
+
+const isShowCustomIntervalButton = computed<boolean>(
+  () => selectedPeriod.value === 'custom_interval'
+)
+
+const isShowIntervalModal = ref<boolean>(false)
+const onShowIntervalModal = (): void => {
+  isShowIntervalModal.value = true
+}
+const onHideIntervalModal = (): void => {
+  isShowIntervalModal.value = false
+}
+const onSubmitIntervalModal = (customDates: number[]): void => {
+  customDatesData.value = customDates
+  sendUpdatedFilters()
+  onHideIntervalModal()
+}
+
+const chartTitleDate = computed<string>(() => {
+  const startValue = props.startDate
+  const endValue = props.endDate
+  if (!startValue && !endValue) return ''
+
+  const start = $formattedDatetime(
+    startValue,
+    props.formatDate,
+    true,
+    '',
+    props.formatTime
+  )
+  const end = $formattedDatetime(
+    endValue,
+    props.formatDate,
+    true,
+    '',
+    props.formatTime
+  )
+  return `${start} - ${end}`
+})
+
+const disabledPeriodOptions = computed<boolean>(
+  () => props.chartType === 'pie' || !chartTitleDate.value
+)
+
+const selectedView = ref<string>('')
+const viewOptions = computed<UI_I_OptionItem[]>(() =>
+  viewFunc(localization.value, props.view)
+)
+watch(
+  () => viewOptions.value,
+  (val: UI_I_OptionItem[]) => {
+    if (val) selectedView.value = val[0].value
+  },
+  { immediate: true }
+)
+
+const customDatesData = ref<number[]>([])
+const sendUpdatedFilters = (): void => {
+  const currentPeriod =
+    selectedPeriod.value === 'custom_interval'
+      ? customDatesData.value
+      : getValidDateByOptionFunc(selectedPeriod.value)
+  const filters: UI_I_MonitorGraphPayload = {
+    period: currentPeriod,
+    view: selectedView.value,
+  }
+
+  emits('update-filters', filters)
+}
+watch(
+  () => [selectedPeriod.value, selectedView.value],
+  (value: string[]) => {
+    value[0] !== 'custom_interval' && sendUpdatedFilters()
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 20px;
+  flex-shrink: 0;
+  padding-top: 5px;
+
+  .select select {
+    height: 20px;
+    margin: 5px;
+    color: var(--global-font-color);
+  }
+  .single-option {
+    margin-left: 5px;
+  }
+
+  .chart-title {
+    color: var(--global-font-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 6px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .view-select-label {
+    margin-left: auto;
+    padding-right: 7px;
+    padding-left: 7px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+}
+</style>

package/components/common/monitor/overview/filters/config/filterOptions.ts

@@ -0,0 +1,56 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_I_OverviewViewOptionData } from '~/components/common/monitor/overview/filters/models/interfaces'
+import { UI_T_OverviewViewType } from '~/components/common/monitor/overview/filters/models/types'
+
+export const periodFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => [
+  {
+    text: localization.realTime,
+    value: 'real_time',
+  },
+  {
+    text: localization.lastDay,
+    value: 'last_day',
+  },
+  {
+    text: localization.lastWeek,
+    value: 'last_week',
+  },
+  {
+    text: localization.lastMonth,
+    value: 'last_month',
+  },
+  // {
+  //   text: localization.lastYear,
+  //   value: 'last_year',
+  // },
+  {
+    text: localization.customInterval,
+    value: 'custom_interval',
+  },
+]
+
+export const viewFunc = (
+  localization: UI_I_Localization,
+  viewType: UI_T_OverviewViewType
+): UI_I_OptionItem[] => {
+  const viewData: UI_I_OverviewViewOptionData = {
+    host: [
+      { text: localization.overview, value: 'overview' },
+      { text: localization.networkAdapters, value: 'network_adapters' },
+      { text: localization.disks, value: 'disks' },
+      { text: localization.virtual_machines, value: 'virtual_machines' },
+    ],
+    vm: [
+      { text: localization.overview, value: 'overview' },
+      { text: localization.space, value: 'space' },
+      { text: localization.spaceUtilization, value: 'space_utilization' },
+      { text: localization.networkAdapters, value: 'network_adapters' },
+      { text: localization.disks, value: 'disks' },
+    ],
+  }
+
+  return viewData[viewType]
+}