bfg-common 1.4.655 → 1.4.656

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces.ts

@@ -15,6 +15,7 @@ export interface UI_I_AdvancedCounterItem {
 
 export interface I_HostMetrics {
   cpu: UI_I_AdvancedCounterItem[]
+  datastore: UI_I_AdvancedCounterItem[]
   memory: UI_I_AdvancedCounterItem[]
   network: UI_I_AdvancedCounterItem[]
   disk: UI_I_AdvancedCounterItem[]

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

@@ -1,3 +1,3 @@
-export type UI_T_ChartHost = 'cpu' | 'memory' | 'network' | 'disk'
+export type UI_T_ChartHost = 'cpu' | 'datastore' | 'memory' | 'network' | 'disk'
 
 export type UI_T_ChartVm = 'cpu' | 'memory' | 'network' | 'disk' | 'datastore'

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

@@ -85,11 +85,11 @@ export const metricsFunc = (
       //   value: 'cluster_services',
       //   disabled: true,
       // },
-      // {
-      //   text: localization.common.datastore,
-      //   value: 'datastore',
-      //   disabled: true,
-      // },
+      {
+        text: localization.common.datastore,
+        value: 'datastore',
+        testId: 'metric-item-datastore-button',
+      },
       {
         text: localization.common.disk,
         value: 'disk',

package/components/common/monitor/overview/filters/Filters.vue

@@ -63,7 +63,6 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_MonitorGraphPayload } from '~/components/common/monitor/lib/models/interfaces'
 import type { UI_T_OverviewViewType } from '~/components/common/monitor/overview/filters/lib/models/types'
 import {
@@ -82,7 +81,6 @@ const props = defineProps<{
   view: UI_T_OverviewViewType
   selectedPeriods: number[]
   formatDate: string
-  project: UI_T_Project
   currentLang: string
   formatTime?: string
 }>()
@@ -152,7 +150,7 @@ const disabledPeriodOptions = computed<boolean>(() => props.chartType === 'pie')
 
 const selectedView = ref<string>('')
 const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, props.view, props.project)
+  viewFunc(localization.value, props.view)
 )
 watch(
   () => viewOptions.value,

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

@@ -2,7 +2,6 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import type { UI_I_OverviewViewOptionData } from '~/components/common/monitor/overview/filters/lib/models/interfaces'
 import type { UI_T_OverviewViewType } from '~/components/common/monitor/overview/filters/lib/models/types'
-import type { UI_T_Project } from '~/lib/models/types'
 
 export const periodFunc = (
   localization: UI_I_Localization
@@ -35,21 +34,19 @@ export const periodFunc = (
 
 export const viewFunc = (
   localization: UI_I_Localization,
-  viewType: UI_T_OverviewViewType,
-  project: UI_T_Project
+  viewType: UI_T_OverviewViewType
 ): UI_I_OptionItem[] => {
   const host = [
     { text: localization.inventoryMonitor.overview, value: 'overview' },
     { text: localization.common.memory, value: 'memory' },
     { text: localization.common.network, value: 'network' },
     { text: localization.common.disks, value: 'disks' },
-    // { text: localization.common.virtual_machines, value: 'virtual_machines' },
-  ]
-  if (project === 'procurator')
-    host.push({
+    {
       text: localization.inventoryMonitor.spaceUtilization,
       value: 'spaceUtilization',
-    })
+    },
+    // { text: localization.common.virtual_machines, value: 'virtual_machines' },
+  ]
 
   const viewData: UI_I_OverviewViewOptionData = {
     zone: [{ text: localization.inventoryMonitor.overview, value: 'overview' }],
@@ -75,7 +72,28 @@ export const viewFunc = (
       { text: localization.common.network, value: 'network' },
       { text: localization.common.disks, value: 'disks' },
     ],
-    cluster: [{ text: localization.inventoryMonitor.overview, value: 'overview' }],
+    cluster: [
+      { text: localization.inventoryMonitor.overview, value: 'overview' },
+    ],
+    datastore: [
+      { text: localization.inventoryMonitor.overview, value: 'overview' },
+      {
+        text: localization.inventoryMonitor.spaceUtilization,
+        value: 'space_utilization',
+      },
+      {
+        text: localization.common.storageIo,
+        value: 'storage_io',
+      },
+      {
+        text: localization.common.hosts,
+        value: 'hosts',
+      },
+      {
+        text: localization.common.vms_amount,
+        value: 'vms_amount',
+      },
+    ],
   }
 
   return viewData[viewType]

package/components/common/monitor/overview/filters/lib/models/interfaces.ts

@@ -6,4 +6,5 @@ export interface UI_I_OverviewViewOptionData {
   host: UI_I_OptionItem[]
   vm: UI_I_OptionItem[]
   cluster: UI_I_OptionItem[]
+  datastore: UI_I_OptionItem[]
 }

package/components/common/monitor/overview/filters/lib/models/types.ts

@@ -4,6 +4,7 @@ export type UI_T_OverviewViewType =
   | 'vm'
   | 'datacenter'
   | 'cluster'
+  | 'datastore'
 
 export type UI_T_OverviewRequestType =
   | 'cluster'
@@ -11,3 +12,4 @@ export type UI_T_OverviewRequestType =
   | 'hosts'
   | 'vms'
   | 'datacenters'
+  | 'datastore'

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

@@ -0,0 +1,13 @@
+export interface UI_I_ResourceAllocationHeaderItem {
+    title: string
+    value: string
+    used?: boolean
+    available?: boolean
+}
+
+export interface UI_I_ResourceAllocationHeader {
+    used: number
+    from: string
+    to: string
+    items: UI_I_ResourceAllocationHeaderItem[]
+}

package/components/common/monitor/resourceAllocation/resourceAllocation.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="resource-allocation">
+    <div class="resource-allocation-header">
+      <common-headline :headline="props.title" />
+
+      <div class="resource-allocation-header-block">
+        <div class="resource-allocation-header-block-progress">
+          <div
+            title="70%"
+            class="resource-allocation-header-block-progress-used"
+            :style="{ width: props.headerData.used + '%' }"
+          ></div>
+          <div
+            title="30%"
+            class="resource-allocation-header-block-progress-available"
+            :style="{ width: 100 - props.headerData.used + '%' }"
+          ></div>
+        </div>
+        <div class="resource-allocation-header-block-progress-info">
+          <div>{{ props.headerData.from }}</div>
+          <div>{{ props.headerData.to }}</div>
+        </div>
+
+        <div class="resource-allocation-header-block-info">
+          <div
+            v-for="(item, key) in props.headerData.items"
+            :key="key"
+            class="resource-allocation-header-block-info-item"
+          >
+            <span>
+              <span
+                v-if="item.used"
+                class="resource-allocation-header-block-info-item-used"
+              ></span>
+              <span
+                v-if="item.available"
+                class="resource-allocation-header-block-info-item-available"
+              ></span>
+              <span>{{ item.title }}</span>
+            </span>
+            <span>{{ item.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--    <div class="resource-allocation-content">-->
+    <!--      <div class="data-table-view">-->
+    <!--        <div class="data-table-view__inner">-->
+    <!--          <atoms-table-data-grid-->
+    <!--            v-model:column-keys="columnKeys"-->
+    <!--            v-model:selected-row="selectedRow"-->
+    <!--            :head-items="headItems"-->
+    <!--            :body-items="bodyItems"-->
+    <!--            :total-items="props.totalItems"-->
+    <!--            :total-pages="props.totalPages"-->
+    <!--            :page-size="100"-->
+    <!--            :page="1"-->
+    <!--            :type="tableType"-->
+    <!--            class="data-table"-->
+    <!--            test-id="hardware-health-table"-->
+    <!--            :loading="props.loading"-->
+    <!--            hide-page-size-->
+    <!--            server-off-->
+    <!--          >-->
+    <!--            <template v-if="hasNonEmptySelEntries" #toggleBlock="{ item }">-->
+    <!--              <div class="row-details">-->
+    <!--                <div class="row-details__headline">-->
+    <!--                  {{ localization.common.eventLogEntries }}-->
+    <!--                </div>-->
+
+    <!--                <div-->
+    <!--                  v-for="(entries, key) in item[0].data.current.sel_entries"-->
+    <!--                  :key="key"-->
+    <!--                  class="row-details__content"-->
+    <!--                >-->
+    <!--                  <span>{{ entries.event }}</span>-->
+    <!--                  <span>{{ entries.time }}</span>-->
+    <!--                </div>-->
+    <!--              </div>-->
+    <!--            </template>-->
+
+    <!--            <template #icon="{ item }">-->
+    <!--              <atoms-the-icon-->
+    <!--                v-if="!item.data.isSprite"-->
+    <!--                :name="item.data.iconClassName"-->
+    <!--                class="icon"-->
+    <!--              />-->
+    <!--              <span v-else :class="['icon', item.data.iconClassName]"></span>-->
+    <!--              {{ item.text }}-->
+
+    <!--              <a-->
+    <!--                v-if="item.data.warning"-->
+    <!--                id="sensor-item-warning"-->
+    <!--                :data-id="item.data.testId"-->
+    <!--                href="javascript:void(0)"-->
+    <!--                class="row-details__text"-->
+    <!--                @click="onShowFieldWarning(item.data.warning)"-->
+    <!--                >{{ localization.common.details }}...-->
+    <!--              </a>-->
+    <!--            </template>-->
+    <!--          </atoms-table-data-grid>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ResourceAllocationHeader } from '~/components/common/monitor/resourceAllocation/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  headerData: UI_I_ResourceAllocationHeader
+}>()
+
+// const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.resource-allocation {
+  &-header {
+    &-block {
+      width: 100%;
+      max-width: 350px;
+      min-width: 250px;
+      position: relative;
+      padding-top: 11px;
+
+      &-progress {
+        height: 17px;
+        margin-bottom: 3px;
+        border: 1px solid #939fa7;
+        z-index: 1;
+        position: relative;
+        display: flex;
+
+        &-used {
+          background-color: #8fdaf9;
+          height: 100%;
+        }
+
+        &-available {
+          background-color: #ffffff;
+          height: 100%;
+        }
+
+        &-info {
+          display: flex;
+          justify-content: space-between;
+          height: 20px;
+
+          div {
+            font-size: smaller;
+            font-weight: 400;
+            line-height: 24px;
+          }
+        }
+      }
+
+      &-info {
+        flex: 1 1 auto;
+        width: 100%;
+        height: 110px;
+        padding: 10px 0;
+
+        &-item {
+          display: flex;
+          justify-content: space-between;
+          height: 18px;
+          line-height: 17px;
+
+          &-used {
+            width: 16px;
+            height: 12px;
+            border: 1px solid #aaa;
+            background-color: #8fdaf9;
+            display: inline-block;
+            margin-bottom: -2px;
+            margin-right: 4px;
+          }
+
+          &-available {
+            width: 16px;
+            height: 12px;
+            border: 1px solid #aaa;
+            background-color: #ffffff;
+            display: inline-block;
+            margin-bottom: -2px;
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>