bfg-common 1.4.485 → 1.4.487

package/components/common/pages/home/widgets/Widgets.vue

@@ -2,9 +2,7 @@
   <common-pages-home-widgets-new
     v-if="isNewView"
     :vms="vms"
-    :vms-all="vmsAll"
     :hosts="hosts"
-    :hosts-all="hostsAll"
     :alerts="alerts || []"
     :services="services || []"
   ></common-pages-home-widgets-new>
@@ -12,9 +10,7 @@
   <common-pages-home-widgets-old
     v-else
     :vms="vms"
-    :vms-all="vmsAll"
     :hosts="hosts"
-    :hosts-all="hostsAll"
     :alerts="alerts || []"
     :services="services || []"
   ></common-pages-home-widgets-old>
@@ -38,17 +34,8 @@ const { $store }: any = useNuxtApp()
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const vms = computed<UI_I_Vms>(() => props.homeInfo.vms || {})
-
 const hosts = computed<UI_I_Hosts>(() => props.homeInfo.hosts || {})
-const vmsAll = computed<number>(
-  () => vms.value.powered_on + vms.value.powered_off + vms.value.suspended || 0
-)
-const hostsAll = computed<number>(
-  () =>
-    hosts.value.connected +
-      hosts.value.maintenance +
-      hosts.value.disconnected || 0
-)
+
 const alerts = computed<UI_I_Alert[]>(() => props.homeInfo.alerts || 0)
 const services = computed<UI_I_Service[]>(() => props.homeInfo.services || 0)
 </script>

package/components/common/pages/home/widgets/WidgetsNew.vue

@@ -5,9 +5,9 @@
     </h1>
 
     <div class="grid-container">
-      <common-pages-home-widgets-vms :vms="vms" :vms-all="vmsAll" />
+      <common-pages-home-widgets-vms :vms="vms" />
 
-      <common-pages-home-widgets-hosts :hosts="hosts" :hosts-all="hostsAll" />
+      <common-pages-home-widgets-hosts :hosts="hosts" />
     </div>
   </div>
 
@@ -36,8 +36,6 @@ import type {
 const props = defineProps<{
   vms: UI_I_Vms
   hosts: UI_I_Hosts
-  vmsAll: number
-  hostsAll: number
   alerts: UI_I_Alert[]
   services: UI_I_Service[]
 }>()

package/components/common/pages/home/widgets/WidgetsOld.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="clr-row">
-    <common-pages-home-widgets-vms :vms="props.vms" :vms-all="props.vmsAll" />
+    <common-pages-home-widgets-vms :vms="props.vms" />
 
-    <common-pages-home-widgets-hosts
-      :hosts="props.hosts"
-      :hosts-all="props.hostsAll"
-    />
+    <common-pages-home-widgets-hosts :hosts="props.hosts" />
 
     <common-pages-home-widgets-warnings :alerts="props.alerts" />
 
@@ -24,8 +21,6 @@ import type {
 const props = defineProps<{
   vms: UI_I_Vms
   hosts: UI_I_Hosts
-  vmsAll: number
-  hostsAll: number
   alerts: UI_I_Alert[]
   services: UI_I_Service[]
 }>()

package/components/common/pages/home/widgets/hosts/Hosts.vue

@@ -7,7 +7,7 @@
   <common-pages-home-widgets-hosts-old
     v-else
     :hosts="props.hosts"
-    :hosts-all="props.hostsAll"
+    :total-hosts="totalHosts"
   ></common-pages-home-widgets-hosts-old>
 </template>
 
@@ -16,12 +16,18 @@ import type { UI_I_Hosts } from '~/components/common/home/lib/models/interfaces'
 
 const props = defineProps<{
   hosts: UI_I_Hosts
-  hostsAll: number
 }>()
 
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const totalHosts = computed<number>(
+  () =>
+    props.hosts.connected +
+      props.hosts.maintenance +
+      props.hosts.disconnected || 0
+)
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/pages/home/widgets/hosts/HostsOld.vue

@@ -3,7 +3,7 @@
     <div class="entity-status">
       <common-pages-home-card
         :title="localization.common.hosts"
-        :count="props.hostsAll"
+        :count="props.totalHosts"
         icon-name="vsphere-icon-host"
       >
         <common-home-status-content :items="props.hosts" />
@@ -17,7 +17,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Hosts } from '~/components/common/home/lib/models/interfaces'
 const props = defineProps<{
   hosts: UI_I_Hosts
-  hostsAll: number
+  totalHosts: number
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/pages/home/widgets/services/Services.vue

@@ -1,6 +1,7 @@
 <template>
   <common-pages-home-widgets-services-new
     v-if="isNewView"
+    :services="props.services"
     :loading="false"
   ></common-pages-home-widgets-services-new>
 

package/components/common/pages/home/widgets/services/ServicesNew.vue

@@ -3,14 +3,19 @@
     <template v-if="props.loading">
       <!--   skeleton   -->
     </template>
-    <div v-else>
+    <div v-else class="services-table">
+      <div class="services-table__title">
+        <h1>{{ localization.home.services }}</h1>
+        <span>({{ props.services.length }})</span>
+      </div>
+
       <ui-data-table
-        test-id="data-table-main"
+        test-id="home-services-table-main"
         :data="data"
         :options="options"
         :loading="props.loading"
+        size="sm"
         server-off
-        class="resent-task-table"
       >
         <template #icon="{ item }">
           <span class="flex-align-center">
@@ -36,6 +41,7 @@ import type {
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Service } from '~/components/common/home/lib/models/interfaces'
 import {
   options,
   getHeaderDataFunc,
@@ -43,7 +49,7 @@ import {
 } from '~/components/common/pages/home/widgets/services/lib/config/config'
 
 const props = defineProps<{
-  tableData: any
+  services: UI_I_Service[]
   loading: boolean
 }>()
 
@@ -61,8 +67,8 @@ const resentTaskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
 
 const resentTaskBodyItems = ref<UI_I_DataTableBody[]>([])
 watch(
-  () => props.tableData,
-  (newValue) => {
+  () => props.services,
+  (newValue: UI_I_Service[]) => {
     if (!newValue?.length) return
 
     resentTaskBodyItems.value = getBodyDataFunc(newValue, localization.value)
@@ -72,6 +78,26 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.services-table {
+  :deep(.default-layout) {
+    box-shadow: none;
+    padding: 0;
+  }
+
+  &__title {
+    @include flex($align: center);
+    color: var(--widget-text-first);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 19.36px;
+    & > span {
+      margin-left: 5px;
+      font-size: 16px;
+    }
+  }
+}
+
 .target-link {
   font-family: Inter, serif;
   font-size: 13px;

package/components/common/pages/home/widgets/services/lib/config/config.ts

@@ -5,8 +5,7 @@ import type {
   UI_I_DataTableHeader,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import { UI_E_RecentTaskStatus } from '~/lib/models/store/tasks/enums'
-import { E_NodeIconsByState } from '~/lib/models/enums'
-// import { E_TabsByType } from '~/components/templates/inventory/lib/models/enums'
+import type { UI_I_Service } from '~/components/common/home/lib/models/interfaces'
 import {
   E_RTaskChipColor,
   E_RTaskStatusIcon,
@@ -62,26 +61,24 @@ export const options: UI_I_DataTableOptions = {
 }
 
 export const getBodyDataFunc = (
-  bodyData: any,
+  bodyData: UI_I_Service[],
   localization: UI_I_Localization
 ): UI_I_DataTableBody[] => {
-  return bodyData.map((task, index: number) => {
-    const iconClassName = E_NodeIconsByState[`${task.targetType}_Normal`]
-    const id = task.extra?.created_id || task.target
+  return bodyData.map((service, index: number) => {
     const targetData = {
-      id,
-      icon: iconClassName,
-      // nav: E_TabsByType[task.targetType],
-      type: task.targetType,
+      icon: `vsphere-icon-status-${service.statusIcon}`,
       isLink: true,
-      testId: `${task.targetType}-item`,
+      testId: `${service.item}-item`,
+      // id,
+      // nav: E_TabsByType[task.targetType],
+      // type,
     }
 
     const statusData = {
-      icon: E_RTaskStatusIcon[task.status],
-      chipColor: E_RTaskChipColor[task.status],
-      error: task.error,
-      testId: `${task.taskName}-progress`,
+      icon: E_RTaskStatusIcon[service.statusText],
+      chipColor: E_RTaskChipColor[service.statusText],
+      error: service.statusText,
+      testId: `${service.statusText}-progress`,
     }
 
     return {
@@ -93,16 +90,16 @@ export const getBodyDataFunc = (
         {
           key: 'icon',
           col: 0,
-          text: task.target,
+          text: service.item,
           data: targetData,
         },
         {
           key: 'status',
           col: 1,
-          text: localization.common[UI_E_RecentTaskStatus[task.status]],
+          text: localization.common[UI_E_RecentTaskStatus[service.statusText]],
           data: statusData,
         },
-        { col: 2, text: task.taskName },
+        { col: 2, text: service.version },
       ],
     }
   })

package/components/common/pages/home/widgets/vms/Vms.vue

@@ -7,7 +7,7 @@
   <common-pages-home-widgets-vms-old
     v-else
     :vms="props.vms"
-    :vms-all="props.vmsAll"
+    :total-vms="totalVms"
   ></common-pages-home-widgets-vms-old>
 </template>
 
@@ -16,12 +16,15 @@ import type { UI_I_Vms } from '~/components/common/home/lib/models/interfaces'
 
 const props = defineProps<{
   vms: UI_I_Vms
-  vmsAll: number
 }>()
 
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const totalVms = computed<number>(
+  () => props.vms.powered_on + props.vms.powered_off + props.vms.suspended || 0
+)
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/pages/home/widgets/vms/VmsOld.vue

@@ -3,7 +3,7 @@
     <div class="entity-status">
       <common-pages-home-card
         :title="localization.common.vms"
-        :count="props.vmsAll"
+        :count="props.totalVms"
         icon-name="vsphere-icon-vm"
       >
         <common-home-status-content :items="props.vms" />
@@ -17,7 +17,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Vms } from '~/components/common/home/lib/models/interfaces'
 const props = defineProps<{
   vms: UI_I_Vms
-  vmsAll: number
+  totalVms: number
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/pages/home/widgets/warnings/Warnings.vue

@@ -1,6 +1,7 @@
 <template>
   <common-pages-home-widgets-warnings-new
     v-if="isNewView"
+    :alerts="props.alerts"
     :loading="false"
   ></common-pages-home-widgets-warnings-new>
 

package/components/common/pages/home/widgets/warnings/WarningsNew.vue

@@ -3,14 +3,19 @@
     <template v-if="props.loading">
       <!--   skeleton   -->
     </template>
-    <div v-else>
+    <div v-else class="warnings-table">
+      <div class="warnings-table__title">
+        <h1>{{ localization.home.objectsWithMostAlerts }}</h1>
+        <span>({{ props.alerts.length }})</span>
+      </div>
+
       <ui-data-table
-        test-id="data-table-main"
+        test-id="home-warnings-table-main"
         :data="data"
         :options="options"
         :loading="props.loading"
+        size="sm"
         server-off
-        class="resent-task-table"
       >
         <template #icon="{ item }">
           <span class="flex-align-center">
@@ -36,6 +41,7 @@ import type {
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Alert } from '~/components/common/home/lib/models/interfaces'
 import {
   options,
   getHeaderDataFunc,
@@ -43,6 +49,7 @@ import {
 } from '~/components/common/pages/home/widgets/warnings/lib/config/config'
 
 const props = defineProps<{
+  alerts: UI_I_Alert[]
   loading: boolean
 }>()
 
@@ -60,8 +67,8 @@ const resentTaskHeadItems = computed<UI_I_DataTableHeader[]>(() =>
 
 const resentTaskBodyItems = ref<UI_I_DataTableBody[]>([])
 watch(
-  () => props.tableData,
-  (newValue) => {
+  () => props.alerts,
+  (newValue: UI_I_Alert[]) => {
     if (!newValue?.length) return
 
     resentTaskBodyItems.value = getBodyDataFunc(newValue, localization.value)
@@ -70,4 +77,24 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.warnings-table {
+  :deep(.default-layout) {
+    box-shadow: none;
+    padding: 0;
+  }
+
+  &__title {
+    @include flex($align: center);
+    color: var(--widget-text-first);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 19.36px;
+    & > span {
+      margin-left: 5px;
+      font-size: 16px;
+    }
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.485",
+  "version": "1.4.487",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",