bfg-common 1.0.25 → 1.0.26

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/Metrics.vue

@@ -1,26 +1,36 @@
 <template>
   <div class="chart-option-groups-container">
     <span>{{ localization.chartMetrics }}</span>
-    <atoms-tabs-vertical-tabs v-model="selectedMetric" :items="metricsItems" />
+    <atoms-tabs-vertical-tabs
+      v-model="selectedMetricLocal"
+      :items="props.metricsItems"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
-import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
-import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 
 const props = defineProps<{
-  type: UI_T_AdvancedType
+  metricsItems: UI_I_VerticalTabs[]
+  selectedMetric: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:selected-metric', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
-  metricsFunc(localization.value, props.type)
-)
-const selectedMetric = ref<string>(metricsItems.value[0].value)
+const selectedMetricLocal = computed<string>({
+  get() {
+    return props.selectedMetric
+  },
+  set(newValue) {
+    emits('update:selected-metric', newValue)
+  },
+})
 </script>
 
 <style scoped lang="scss">

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics.ts

@@ -13,14 +13,16 @@ export const metricsFunc = (
         text: localization.cpu,
         value: 'cpu',
       },
-      {
-        text: currentRegister(localization.clusterServices, 'first'),
-        value: 'cluster_services',
-      },
-      {
-        text: localization.datastore,
-        value: 'datastore',
-      },
+      // {
+      //   text: currentRegister(localization.clusterServices, 'first'),
+      //   value: 'cluster_services',
+      //   disabled: true,
+      // },
+      // {
+      //   text: localization.datastore,
+      //   value: 'datastore',
+      //   disabled: true,
+      // },
       {
         text: localization.disk,
         value: 'disk',
@@ -33,72 +35,64 @@ export const metricsFunc = (
         text: localization.network,
         value: 'network',
       },
-      {
-        text: localization.power,
-        value: 'power',
-      },
-      {
-        text: currentRegister(localization.storageAdapter, 'first'),
-        value: 'storage_adapter',
-      },
-      {
-        text: localization.storagePath,
-        value: 'storage_path',
-      },
-      {
-        text: localization.system,
-        value: 'system',
-      },
-      {
-        text: currentRegister(localization.procuratorReplication, 'last'),
-        value: 'v_sphere_replication',
-      },
+      // {
+      //   text: localization.power,
+      //   value: 'power',
+      //   disabled: true,
+      // },
+      // {
+      //   text: currentRegister(localization.storageAdapter, 'first'),
+      //   value: 'storage_adapter',
+      //   disabled: true,
+      // },
+      // {
+      //   text: localization.storagePath,
+      //   value: 'storage_path',
+      //   disabled: true,
+      // },
+      // {
+      //   text: localization.system,
+      //   value: 'system',
+      //   disabled: true,
+      // },
+      // {
+      //   text: currentRegister(localization.procuratorReplication, 'last'),
+      //   value: 'v_sphere_replication',
+      //   disabled: true,
+      // },
     ],
     vm: [
-      {
-        text: localization.cpu,
-        value: 'cpu',
-      },
-      {
-        text: localization.datastore,
-        value: 'datastore',
-      },
       {
         text: localization.disk,
         value: 'disk',
       },
-      {
-        text: localization.memory,
-        value: 'memory',
-      },
       {
         text: localization.network,
         value: 'network',
       },
       {
-        text: localization.power,
-        value: 'power',
+        text: localization.cpu,
+        value: 'cpu',
+      },
+      {
+        text: localization.memory,
+        value: 'memory',
       },
       {
-        text: localization.system,
-        value: 'system',
+        text: localization.datastore,
+        value: 'datastore',
       },
-      { text: localization.virtualDisk, value: 'virtualDisk' },
+      // {
+      //   text: localization.power,
+      //   value: 'power',
+      // },
+      // {
+      //   text: localization.system,
+      //   value: 'system',
+      // },
+      // { text: localization.virtualDisk, value: 'virtualDisk' },
     ],
   }
 
   return metrics[type]
 }
-
-const currentRegister = (text: string, type: string): string => {
-  let result = ''
-  const { $text } = useNuxtApp()
-
-  if (type === 'first') {
-    result = $text.toCapitalize(text)
-  } else if (type === 'last') {
-    result = $text.toCapitalizeByIndex(text, [1])
-  }
-
-  return result
-}

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

@@ -0,0 +1,3 @@
+export type T_ChartHost = 'cpu' | 'memory' | 'network' | 'disk'
+
+export type T_ChartVm = 'cpu' | 'memory' | 'network' | 'disk' | 'datastore'

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

@@ -10,8 +10,10 @@ export interface UI_I_GraphDataSettingItem {
 export interface UI_I_MonitorGraphPayload {
   period: number[]
   view: string
+  periodType?: string
   id?: string
   requestType?: UI_T_OverviewRequestType
   storageId?: string
   hostName?: string
+  fields?: string
 }

package/components/common/perPage/PerPage.vue

@@ -1,51 +1,51 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-page-size-select`"
-        :value="props.pageSize"
-        class="clr-page-size-select"
-        @change="change"
-      >
-        <option
-          v-for="(item, key) in props.options"
-          :key="key"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId: string
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-  }>(),
-  {
-    label: 'itemsPerPage',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', num: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(() => localization.value[props.label])
-
-const change = (e: InputEvent): void => {
-  emits('change', +(e.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-page-size-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId: string
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+  }>(),
+  {
+    label: 'itemsPerPage',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(() => localization.value[props.label])
+
+const change = (e: InputEvent): void => {
+  emits('change', +(e.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>