bfg-common 1.0.27 → 1.0.28

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

@@ -1,281 +1,302 @@
-<template>
-  <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>
-      </client-only>
-    </div>
-    <div class="horizontal-flex-container">
-      <label for="periodSelect" class="label-select"
-        >{{ localization.period }}:</label
-      >
-      <div 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>
-      <a
-        id="chart-options-button"
-        href="#"
-        class="chart-options-button"
-        @click="onShowChartOptions"
-        >{{ localization.chartOptions }}</a
-      >
-    </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"
-          >
-            {{ item.text }}
-          </option>
-        </select>
-      </div>
-    </div>
-    <div class="chart-action-bar vui-action-bar">
-      <ul>
-        <li class="menu-item">
-          <a
-            id="advanced-page-link"
-            class="item-link"
-            @click="onOpenAdvancedPage"
-          >
-            <span class="vx-icon-window-popout icon"></span>
-          </a>
-        </li>
-        <li class="menu-item">
-          <atoms-dropdown :drop-menu="exportMenu" @select="onExportMenuItem">
-            <template #icon>
-              <a id="export-link" href="#" class="item-link">
-                <span class="vx-icon-export icon"></span>
-              </a>
-            </template>
-          </atoms-dropdown>
-        </li>
-      </ul>
-    </div>
-  </div>
-
-  <common-monitor-advanced-tools-chart-options-modal
-    v-if="isShowModal"
-    :type="props.type"
-    :loading="optionsLoading"
-    :counters="props.counters"
-    :counters-loading="props.countersLoading"
-    @hide="isShowModal = false"
-  />
-</template>
-
-<script setup lang="ts">
-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 { 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
-}>()
-
-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
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $formattedDatetime } = useNuxtApp()
-
-const selectedView = ref<string>('')
-const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, props.type)
-)
-watch(
-  () => viewOptions.value,
-  (val: UI_I_OptionItem[]) => {
-    if (val) selectedView.value = val[0].value
-  },
-  { immediate: true }
-)
-
-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 }
-)
-
-watch(
-  () => [selectedPeriod.value, selectedView.value],
-  (val: string[]) => {
-    const validPeriodData = getValidDateByOptionFunc(val[0])
-    const period = [
-      Math.round(validPeriodData[0] / 1000),
-      Math.round(validPeriodData[1] / 1000),
-    ]
-    const tools: UI_I_MonitorGraphPayload = {
-      period,
-      view: val[1],
-    }
-    emits('update-tools', tools)
-  },
-  { immediate: true }
-)
-
-const chartTitleDate = computed<string>(() => {
-  if (!props.startDate) return ''
-
-  const start = $formattedDatetime(props.startDate, '', true)
-  const end = $formattedDatetime(new Date(), '', true)
-  return `${start} - ${end}`
-})
-
-const onOpenAdvancedPage = (): void => emits('open-advanced-page')
-
-const exportMenu = ref<UI_I_DropMenu<string>[]>(exportFunc(localization.value))
-
-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> => {
-  isShowModal.value = true
-  optionsLoading.value = true
-  emits('get-options')
-  optionsLoading.value = false
-}
-</script>
-
-<style scoped lang="scss">
-.horizontal-flex-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  line-height: 20px;
-  flex-shrink: 0;
-
-  .chart-title-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .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: capitalize;
-
-    &.uppercase {
-      text-transform: uppercase;
-    }
-  }
-
-  .view-select-label {
-    margin-left: auto;
-    padding-right: 7px;
-    padding-left: 7px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    align-items: center;
-  }
-
-  .chart-options-button {
-    margin-left: 5px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-transform: capitalize;
-    color: var(--dropdown-item-color);
-  }
-
-  .chart-action-bar {
-    white-space: nowrap;
-
-    .menu-item {
-      padding-right: 4px;
-      display: inline-block;
-      list-style: none;
-      vertical-align: middle;
-
-      &:last-child {
-        padding-right: 0;
-      }
-
-      .item-link {
-        padding: 4px;
-        line-height: 22px;
-        border: 1px solid transparent;
-        display: inline-block;
-
-        &:hover {
-          text-decoration: none;
-          background-color: #e9f6fd;
-          border: 1px solid #c7e9ff;
-        }
-
-        .icon {
-          width: 16px;
-          height: 16px;
-          display: block;
-          min-width: 16px;
-          min-height: 16px;
-          background-size: 100% auto;
-          display: block;
-        }
-      }
-
-      :deep(.dropdown-menu) {
-        min-width: auto;
-        padding: 0;
-      }
-      :deep(.user-menu-large) {
-        padding: 0;
-      }
-      :deep(.angle-icon) {
-        display: none;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="horizontal-flex-container overview-chart-title-bar">
+    <div class="chart-title-content">
+      <client-only>
+        <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">
+      <label for="periodSelect" class="label-select"
+        >{{ localization.period }}:</label
+      >
+      <div class="select">
+        <select
+          id="periodSelect"
+          v-model="selectedPeriod"
+          :disabled="props.disabledPeriod"
+        >
+          <option
+            v-for="(item, index) in periodOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+      <a
+        id="chart-options-button"
+        href="#"
+        class="chart-options-button"
+        @click="onShowChartOptions"
+        >{{ localization.chartOptions }}</a
+      >
+    </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"
+          :disabled="props.disabledView"
+        >
+          <option
+            v-for="(item, index) in viewOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div class="chart-action-bar vui-action-bar">
+      <ul>
+        <li class="menu-item">
+          <a
+            id="advanced-page-link"
+            class="item-link"
+            @click="onOpenAdvancedPage"
+          >
+            <span class="vx-icon-window-popout icon"></span>
+          </a>
+        </li>
+        <li class="menu-item">
+          <atoms-dropdown :drop-menu="exportMenu" @select="onExportMenuItem">
+            <template #icon>
+              <a id="export-link" href="#" class="item-link">
+                <span class="vx-icon-export icon"></span>
+              </a>
+            </template>
+          </atoms-dropdown>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <common-monitor-advanced-tools-chart-options-modal
+    v-if="isShowModal"
+    :type="props.type"
+    :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>
+
+<script setup lang="ts">
+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'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  startDate: number
+  chartTitle: string
+  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: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $formattedDatetime } = useNuxtApp()
+
+const selectedView = ref<string>('')
+const viewOptions = computed<UI_I_OptionItem[]>(() =>
+  viewFunc(localization.value, props.type)
+)
+watch(
+  () => viewOptions.value,
+  (val: UI_I_OptionItem[]) => {
+    if (val) selectedView.value = val[0].value
+  },
+  { immediate: true }
+)
+
+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 }
+)
+
+watch(
+  () => [selectedPeriod.value, selectedView.value],
+  (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,
+      periodType: newValue[0],
+      view: newValue[1],
+    }
+    emits('update-tools', tools)
+  },
+  { immediate: true }
+)
+
+const chartTitleDate = computed<string>(() => {
+  if (!props.startDate) return ''
+
+  const start = $formattedDatetime(props.startDate, '', true)
+  const end = $formattedDatetime(new Date(), '', true)
+  return `${start} - ${end}`
+})
+
+const onOpenAdvancedPage = (): void => emits('open-advanced-page')
+
+const exportMenu = ref<UI_I_DropMenu<string>[]>(exportFunc(localization.value))
+
+const onExportMenuItem = (item: UI_I_DropMenu<any>): void =>
+  emits('exporting', item.action)
+
+const isShowModal = ref<boolean>(false)
+const onShowChartOptions = (): void => {
+  isShowModal.value = true
+}
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 20px;
+  flex-shrink: 0;
+
+  .chart-title-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .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: capitalize;
+
+    &.uppercase {
+      text-transform: uppercase;
+    }
+  }
+
+  .view-select-label {
+    margin-left: auto;
+    padding-right: 7px;
+    padding-left: 7px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+
+  .chart-options-button {
+    margin-left: 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-transform: capitalize;
+    color: var(--dropdown-item-color);
+  }
+
+  .chart-action-bar {
+    white-space: nowrap;
+
+    .menu-item {
+      padding-right: 4px;
+      display: inline-block;
+      list-style: none;
+      vertical-align: middle;
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      .item-link {
+        padding: 4px;
+        line-height: 22px;
+        border: 1px solid transparent;
+        display: inline-block;
+
+        &:hover {
+          text-decoration: none;
+          background-color: #e9f6fd;
+          border: 1px solid #c7e9ff;
+        }
+
+        .icon {
+          width: 16px;
+          height: 16px;
+          display: block;
+          min-width: 16px;
+          min-height: 16px;
+          background-size: 100% auto;
+          display: block;
+        }
+      }
+
+      :deep(.dropdown-menu) {
+        min-width: auto;
+        padding: 0;
+      }
+      :deep(.user-menu-large) {
+        padding: 0;
+      }
+      :deep(.angle-icon) {
+        display: none;
+      }
+    }
+  }
+}
+</style>