bfg-common 1.6.76 → 1.6.78

package/components/common/monitor/advanced/table/tableOld/TableOld.vue

@@ -1,93 +1,93 @@
-<template>
-  <div class="chart-legend">
-    <span class="title">{{
-      localization.inventoryMonitor.performanceChartLegend
-    }}</span>
-    <client-only>
-      <atoms-table-data-grid
-        v-model:selected-row="selectedRow"
-        v-model:column-keys="columnKeys"
-        v-model:page-size="pageSize"
-        v-model:page="page"
-        :head-items="headAInfo"
-        :body-items="dataBody"
-        :total-items="dataBody.length"
-        :total-pages="1"
-        type="checkbox"
-        class="data-table"
-        test-id="advances-table"
-        hide-page-size
-      >
-        <template #col1="{ item }">
-          <div
-            :style="[{ backgroundColor: item.data.color }]"
-            class="datagrid-column-color-block"
-          ></div>
-        </template>
-      </atoms-table-data-grid>
-    </client-only>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  data: UI_I_PerformanceItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'select', value: number[]): void
-}>()
-
-const selectedRow = ref<number[]>([])
-const pageSize = ref<number>(100)
-const page = ref<number>(1)
-const headAInfo = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
-watch(localization, () => {
-  columnKeys.value = table.columnKeys(localization.value)
-})
-const dataBody = ref<UI_I_BodyItem[][]>([])
-
-watch(
-  () => props.data,
-  (newValue) => {
-    if (!newValue) return
-
-    dataBody.value = table.bodyItems(newValue)
-  },
-  { immediate: true }
-)
-watch(
-  selectedRow,
-  (newValue) => {
-    emits('select', newValue)
-  },
-  { deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-.chart-legend {
-  .title {
-    font-weight: 700;
-    height: 20px;
-  }
-
-  .datagrid-column-color-block {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
+<template>
+  <div class="chart-legend">
+    <span class="title">{{
+      localization.inventoryMonitor.performanceChartLegend
+    }}</span>
+    <client-only>
+      <atoms-table-data-grid
+        v-model:selected-row="selectedRow"
+        v-model:column-keys="columnKeys"
+        v-model:page-size="pageSize"
+        v-model:page="page"
+        :head-items="headAInfo"
+        :body-items="dataBody"
+        :total-items="dataBody.length"
+        :total-pages="1"
+        type="checkbox"
+        class="data-table"
+        test-id="advances-table"
+        hide-page-size
+      >
+        <template #col1="{ item }">
+          <div
+            :style="[{ backgroundColor: item.data.color }]"
+            class="datagrid-column-color-block"
+          ></div>
+        </template>
+      </atoms-table-data-grid>
+    </client-only>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  data: UI_I_PerformanceItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'select', value: number[]): void
+}>()
+
+const selectedRow = ref<number[]>([])
+const pageSize = ref<number>(100)
+const page = ref<number>(1)
+const headAInfo = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+watch(localization, () => {
+  columnKeys.value = table.columnKeys(localization.value)
+})
+const dataBody = ref<UI_I_BodyItem[][]>([])
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue) return
+
+    dataBody.value = table.bodyItems(newValue)
+  },
+  { immediate: true }
+)
+watch(
+  selectedRow,
+  (newValue) => {
+    emits('select', newValue)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.chart-legend {
+  .title {
+    font-weight: 700;
+    height: 20px;
+  }
+
+  .datagrid-column-color-block {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

package/components/common/monitor/utilization/lib/models/enums.ts

@@ -1,4 +1,4 @@
-export enum UI_E_UtilizationBlockCurrentKeys {
-  cpuUtilization = 'hostCpu',
-  hostMemoryUtilization = 'hostMem',
-}
+export enum UI_E_UtilizationBlockCurrentKeys {
+  cpuUtilization = 'hostCpu',
+  hostMemoryUtilization = 'hostMem',
+}

package/components/common/split/horizontal/New.vue

@@ -100,7 +100,7 @@ const rightPanelStyle = computed<any>(() => {
     width = `calc(${leftPanelWLocal.value}% - 1.5px)`
   }
   if (props.showToggleButton && leftPanelCollapsed.value) {
-    width = 'calc(100% - 20px)'
+    width = 'calc(100% - 16px)'
   }
 
   if (props.hideLeftPanel && leftPanelCollapsed.value)

package/components/common/split/horizontal/Old.vue

@@ -84,7 +84,7 @@ const rightPanelStyle = computed<any>(() => {
     width = `calc(${leftPanelW.value}% - 1.5px)`
   }
   if (props.showToggleButton && leftPanelCollapsed.value) {
-    width = 'calc(100% - 20px)'
+    width = 'calc(100% - 16px)'
   }
 
   if (props.hideLeftPanel && leftPanelCollapsed.value)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.6.76",
+  "version": "1.6.78",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -18,7 +18,7 @@
     "@vueuse/core": "10.1.2",
     "@vueuse/nuxt": "10.1.2",
     "bfg-nuxt-3-graph": "1.0.28",
-    "bfg-uikit": "1.1.33",
+    "bfg-uikit": "1.1.32",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-myrules": "file:./eslint",
     "nuxt": "3.11.2",

package/components/common/certificate/Info/Info.vue

@@ -1,61 +0,0 @@
-<template>
-  <component
-    :is="currentComponent"
-    :certificate-data="props.certificateData"
-    :valid-from="validFrom"
-    :valid-to="validTo"
-    :status-text="statusText"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
-
-const props = defineProps<{
-  certificateData: UI_I_Certificate | {}
-}>()
-
-const { $store, $formattedDatetime }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./new/New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const updateTimeFormatAndInterfaceLang = computed<number>(
-  () => $store.getters['main/getUpdateTimeFormatAndInterfaceLang']
-)
-
-const validFrom = computed<string>(() =>
-  updateTimeFormatAndInterfaceLang.value
-    ? $formattedDatetime(props.certificateData.valid_from, {
-        hasSeconds: true,
-      })
-    : ''
-)
-const validTo = computed<string>(() =>
-  updateTimeFormatAndInterfaceLang.value
-    ? $formattedDatetime(props.certificateData.valid_to, {
-        hasSeconds: true,
-      })
-    : ''
-)
-
-const statusText = computed<string>(() =>
-  props.certificateData.status === 'good'
-    ? localization.value.common.valid
-    : props.certificateData.status
-)
-
-onUnmounted(() => {
-  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', 'hostCertificate')
-})
-</script>
-
-<style lang="scss" scoped></style>

package/components/common/certificate/Info/new/New.vue

@@ -1,285 +0,0 @@
-<template>
-  <div class="certificate-info-page p-4 h-full">
-    <div class="certificate-info-item-box p-4">
-      <div class="flex justify-between items-center flex-wrap gap-4">
-        <div class="flex items-center gap-3">
-          <ui-icon
-            v-if="statusIconName"
-            :name="statusIconName"
-            width="38"
-            height="38"
-          />
-          <div>
-            <p class="status-text mb-1">
-              {{ localization.common.status }}: {{ statusText }}
-            </p>
-            <p class="status-subtext">
-              {{ currentExpirationText }}
-            </p>
-          </div>
-        </div>
-        <div class="elapsed-block">
-          <div class="flex justify-between items-center gap-2 mb-[10px]">
-            <p class="elapsed-text">
-              {{ localization.inventoryConfigure.elapsed }}
-            </p>
-            <p class="elapsed-value">{{ currentElapsedValue }}%</p>
-          </div>
-          <ui-progress-bar-linear
-            :percent="currentElapsedValue"
-            :color="elapsedProgressBarColor"
-            stroke-width="10"
-            border-radius="16"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="grid cols-2 mt-3 gap-3">
-      <div class="certificate-info-item-box p-4">
-        <div class="flex items-center gap-3">
-          <div class="icon-box">
-            <ui-icon name="file" width="20" height="20" />
-          </div>
-          <p class="title-info-block">{{ localization.common.subject }}</p>
-        </div>
-        <div class="grid gap-3 mt-4">
-          <div
-            v-for="(item, key) in subjectInfoItem"
-            :key="key"
-            class="flex justify-between items-center flex-wrap gap-2"
-          >
-            <p class="info-label">{{ localization.inventoryConfigure[key] }}</p>
-            <p class="info-value">{{ item }}</p>
-          </div>
-        </div>
-      </div>
-      <div class="certificate-info-item-box p-4">
-        <div class="flex items-center gap-3">
-          <div class="icon-box">
-            <ui-icon name="permission" width="20" height="20" />
-          </div>
-          <p class="title-info-block">{{ localization.common.issuer }}</p>
-        </div>
-        <div class="grid gap-3 mt-4">
-          <div
-            v-for="(item, key) in issuerInfoItem"
-            :key="key"
-            class="flex justify-between items-center flex-wrap gap-2"
-          >
-            <p class="info-label">{{ localization.inventoryConfigure[key] }}</p>
-            <p class="info-value">{{ item }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <p class="valid-period-title mt-5 mb-4">
-      {{ localization.inventoryConfigure.validPeriod }}
-    </p>
-    <div class="certificate-info-item-box p-4">
-      <p class="active-dates-title mb-4">
-        {{ localization.inventoryConfigure.certificateActiveDates }}
-      </p>
-      <div class="grid-container-dates grid cols-2">
-        <div class="flex items-center gap-3">
-          <div class="icon-box">
-            <ui-icon name="icon-events" width="20" height="20" />
-          </div>
-          <div>
-            <p class="date-title-info mb-1">
-              {{ localization.common.validFrom }}
-            </p>
-            <p class="date-value-info">{{ props.validFrom }}</p>
-          </div>
-        </div>
-        <div class="flex items-center gap-3">
-          <div class="icon-box">
-            <ui-icon name="icon-events" width="20" height="20" />
-          </div>
-          <div>
-            <p class="date-title-info mb-1">
-              {{ localization.common.validTo }}
-            </p>
-            <p class="date-value-info">{{ props.validTo }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
-import type { UI_I_CertificateInfoItem } from '~/components/common/certificate/Info/new/lib/models/interfaces'
-import {
-  statusIconNameFunc,
-  statusTextFunc,
-  expirationTextFunc,
-  expirationDaysFunc,
-  elapsedValueFunc,
-  elapsedProgressBarColorFunc,
-} from '~/components/common/certificate/Info/new/lib/config'
-import { certificateInfo } from '~/components/common/certificate/Info/new/lib/utils'
-
-const props = defineProps<{
-  certificateData: UI_I_Certificate | {}
-  validFrom: string
-  validTo: string
-  statusText: string
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const currentExpirationDays = computed<number>(() =>
-  expirationDaysFunc(props.certificateData)
-)
-const statusIconName = ref<string>(
-  statusIconNameFunc(currentExpirationDays.value)
-)
-const statusText = ref<string>(
-  statusTextFunc(currentExpirationDays.value, localization.value)
-)
-const currentExpirationText = computed<string>(() =>
-  expirationTextFunc(currentExpirationDays.value, localization.value)
-)
-const currentElapsedValue = computed<number>(() =>
-  elapsedValueFunc(props.certificateData)
-)
-const elapsedProgressBarColor = computed<string>(() =>
-  elapsedProgressBarColorFunc(currentExpirationDays.value)
-)
-
-const subjectInfoItem = computed<UI_I_CertificateInfoItem>(() =>
-  certificateInfo(props.certificateData, 'subject')
-)
-const issuerInfoItem = computed<UI_I_CertificateInfoItem>(() =>
-  certificateInfo(props.certificateData, 'issuer')
-)
-</script>
-
-<style>
-:root {
-  --certificate-info-page-bg: #ffffff;
-  --certificate-info-page-item-box-bg: #ffffff;
-  --certificate-info-page-item-box-border: #e9ebed;
-  --certificate-info-page-item-status-text: #4d5d69;
-  --certificate-info-page-item-status-subtext: #9da6ad;
-  --certificate-info-page-item-elapsed-value: #4d5d69;
-  --certificate-info-page-item-icon-box-bg: #008fd614;
-  --certificate-info-page-item-icon-box-icon: #008fd6;
-  --certificate-info-page-item-title-block: #4d5d69;
-  --certificate-info-page-item-label: #4d5d69;
-  --certificate-info-page-item-value: #182531;
-  --certificate-info-page-valid-period-title: #4d5d69;
-  --certificate-info-page-active-dates-title: #4d5d69;
-  --certificate-info-page-date-value-info: #182531;
-}
-:root.dark-theme {
-  --certificate-info-page-bg: #334453;
-  --certificate-info-page-item-box-bg: #1b2a371f;
-  --certificate-info-page-item-box-border: #e9ebed1f;
-  --certificate-info-page-item-status-text: #e9eaec;
-  --certificate-info-page-item-status-subtext: #9da6ad;
-  --certificate-info-page-item-elapsed-value: #e9eaec;
-  --certificate-info-page-item-icon-box-bg: #2ba2de29;
-  --certificate-info-page-item-icon-box-icon: #2ba2de;
-  --certificate-info-page-item-title-block: #e9eaec;
-  --certificate-info-page-item-label: #e9eaec;
-  --certificate-info-page-item-value: #e9eaec;
-  --certificate-info-page-valid-period-title: #e9eaec;
-  --certificate-info-page-active-dates-title: #e9eaec;
-  --certificate-info-page-date-value-info: #e9eaec;
-}
-</style>
-
-<style lang="scss" scoped>
-.certificate-info-page {
-  background-color: var(--certificate-info-page-bg);
-  box-shadow: 0 1px 4px 0 #00000014;
-  border-radius: 8px;
-
-  .certificate-info-item-box {
-    background-color: var(--certificate-info-page-item-box-bg);
-    border: 1px solid var(--certificate-info-page-item-box-border);
-    border-radius: 8px;
-
-    .status-text {
-      font-weight: 500;
-      font-size: 14px;
-      color: var(--certificate-info-page-item-status-text);
-    }
-    .status-subtext {
-      font-weight: 400;
-      font-size: 12px;
-      color: var(--certificate-info-page-item-status-subtext);
-    }
-    .elapsed-block {
-      min-width: 320px;
-
-      .elapsed-text {
-        font-weight: 400;
-        font-size: 13px;
-        color: #9da6ad;
-      }
-      .elapsed-value {
-        font-weight: 400;
-        font-size: 13px;
-        color: var(--certificate-info-page-item-elapsed-value);
-      }
-    }
-    .icon-box {
-      width: 40px;
-      height: 40px;
-      background: var(--certificate-info-page-item-icon-box-bg);
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--certificate-info-page-item-icon-box-icon);
-    }
-    .title-info-block {
-      font-weight: 500;
-      font-size: 14px;
-      color: var(--certificate-info-page-item-title-block);
-    }
-    .info-label {
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 18px;
-      color: var(--certificate-info-page-item-label);
-    }
-    .info-value {
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 18px;
-      color: var(--certificate-info-page-item-value);
-    }
-  }
-  .valid-period-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--certificate-info-page-valid-period-title);
-  }
-  .active-dates-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--certificate-info-page-active-dates-title);
-  }
-  .grid-container-dates {
-    grid-gap: 44px;
-
-    .date-title-info {
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 18px;
-      color: #9da6ad;
-    }
-    .date-value-info {
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 18px;
-      color: var(--certificate-info-page-date-value-info);
-    }
-  }
-}
-</style>

package/components/common/certificate/Info/new/lib/config/index.ts

@@ -1,59 +0,0 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
-
-export const statusIconNameFunc = (days: number): string => {
-  let result = ''
-
-  if (days === 0) result = 'error-circle'
-  else if (days >= 30) result = 'success-fill'
-  else if (days < 30) result = 'circle-warning'
-
-  return result
-}
-
-export const statusTextFunc = (
-  days: number,
-  localization: UI_I_Localization
-): string => {
-  let result = ''
-
-  if (days === 0) result = localization.inventoryConfigure.expiring
-  else if (days >= 30) result = localization.common.good
-  else if (days < 30) result = localization.inventoryConfigure.expiringSoon
-
-  return result
-}
-
-export const expirationDaysFunc = (value: UI_I_Certificate | {}): number => {
-  const validFrom = new Date(value.valid_from).getTime()
-  const validTo = new Date(value.valid_to).getTime()
-
-  const diffMs = validTo - validFrom
-  return diffMs / (1000 * 60 * 60 * 24)
-}
-
-export const expirationTextFunc = (
-  days: number,
-  localization: UI_I_Localization
-): string =>
-  localization.inventoryConfigure.certificateExpiration.replace('{0}', days)
-
-export const elapsedValueFunc = (value: UI_I_Certificate | {}): number => {
-  const start = new Date(value.valid_from).getTime()
-  const end = new Date(value.valid_to).getTime()
-  const now = new Date().getTime()
-
-  const percent = ((now - start) / (end - start)) * 100
-
-  return Math.round(percent)
-}
-
-export const elapsedProgressBarColorFunc = (days: number): string => {
-  let result = ''
-
-  if (days === 0) result = '--progress-bar-0-default'
-  else if (days >= 30) result = '--progress-bar-available'
-  else if (days < 30) result = '--progress-bar-2-default'
-
-  return result
-}

package/components/common/certificate/Info/new/lib/models/interfaces.ts

@@ -1,3 +0,0 @@
-export interface UI_I_CertificateInfoItem {
-  [key: string]: string
-}

package/components/common/certificate/Info/new/lib/utils/index.ts

@@ -1,10 +0,0 @@
-import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
-import type { UI_I_CertificateInfoItem } from '~/components/common/certificate/Info/new/lib/models/interfaces'
-
-export const certificateInfo = (
-  data: UI_I_Certificate | {},
-  type: string
-): UI_I_CertificateInfoItem =>
-  data?.[type]?.match(
-    /SERIALNUMBER=(?<serialNumber>[^,]+),CN=(?<commonName>[^,]+),OU=(?<organizationalUnit>[^,]+),O=(?<organization>[^,]+),L=(?<locality>[^,]+),ST=(?<state>[^,]+),C=(?<country>[^,]+)/
-  )?.groups

package/components/common/certificate/Old.vue

@@ -1,27 +0,0 @@
-<template>
-  <atoms-loader v-show="props.loading" test-id="certificate-spinner" />
-  <div class="certificate flex flex-col h-full">
-    <common-certificate-tools @renew-certificate="emits('renew-certificate')" />
-
-    <common-certificate-info :certificate-data="props.certificateData" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Certificate } from '~/components/common/certificate/lib/models/interfaces'
-
-const props = defineProps<{
-  loading: boolean
-  certificateData: UI_I_Certificate | {}
-}>()
-
-const emits = defineEmits<{
-  (event: 'renew-certificate'): void
-}>()
-</script>
-
-<style lang="scss" scoped>
-.certificate {
-  padding-left: 10px;
-}
-</style>