bfg-common 1.6.78 → 1.6.79

package/assets/localization/local_be.json

@@ -2813,7 +2813,20 @@
     "actionsSameInfoDesc": "Дзеянні такія ж, як і ў Правіле трывогі 1 з-за таго ж узроўню сур'ёзнасці",
     "systemStack": "Сістэмны стэк",
     "localSubnet": "Лакальная падсетка",
-    "renewCertificateConfirm": "Пацверджанне абнаўлення сертыфіката",
+    "renewCertificateConfirm": "Абнавіць сертыфікат",
+    "elapsed": "Прайшло",
+    "expiring": "Прайшло",
+    "expiringSoon": "Хутка скончыцца",
+    "certificateExpiration": "Да заканчэння тэрміну дзеяння засталося {0} дзён",
+    "locality": "Месцазнаходжанне",
+    "serialNumber": "Серыйны нумар",
+    "commonName": "Агульнае імя",
+    "organizationalUnit": "Арганізацыйнае падраздзяленне",
+    "organization": "Арганізацыя",
+    "state": "Дзяржава",
+    "country": "Краіна",
+    "validPeriod": "Тэрмін дзеяння",
+    "certificateActiveDates": "Даты дзеяння сертыфіката",
     "renewCertificateConfirmDesc": "Вы ўпэўнены, што хочаце абнавіць сертыфікат для хоста «{0}»?",
     "refreshCACertificatesConfirm": "Пацверджанне абнаўлення сертыфікатаў ЦС",
     "refreshCACertificatesConfirmDesc": "Вы ўпэўнены, што хочаце абнавіць сертыфікаты ЦС на хосце «{0}»?",

package/assets/localization/local_en.json

@@ -2817,7 +2817,20 @@
     "actionsSameInfoDesc": "Actions are same as Alarm Rule 1 due to same severity level",
     "systemStack": "System stack",
     "localSubnet": "Local Subnet",
-    "renewCertificateConfirm": "Renew Certificate Confirmation",
+    "renewCertificateConfirm": "Renew Certificate",
+    "elapsed": "Elapsed",
+    "expiring": "Expiring",
+    "expiringSoon": "Expiring soon",
+    "certificateExpiration": "{0} days remaining until expiration",
+    "locality": "Locality",
+    "serialNumber": "Serial Number",
+    "commonName": "Common Name",
+    "organizationalUnit": "Organizational Unit",
+    "organization": "Organization",
+    "state": "State",
+    "country": "Country",
+    "validPeriod": "Valid Period",
+    "certificateActiveDates": "Certificate Active Dates",
     "renewCertificateConfirmDesc": "Are you sure you want to renew the certificate for the host “{0}”?",
     "refreshCACertificatesConfirm": "Refresh CA Certificates Confirmation",
     "refreshCACertificatesConfirmDesc": "Are you sure you want to refresh the CA certificates on the host “{0}”?",

package/assets/localization/local_hy.json

@@ -2817,7 +2817,20 @@
     "actionsSameInfoDesc": "Գործողությունները նույնն են, ինչ Տագնապային կանոն 1-ը՝ նույն խստության մակարդակի պատճառով",
     "systemStack": "Համակարգի կույտ",
     "localSubnet": "Տեղային ենթացանց",
-    "renewCertificateConfirm": "Վկայագրի թարմացման հաստատում",
+    "renewCertificateConfirm": "Թարմացնել վկայականը",
+    "elapsed": "Անցել է",
+    "expiring": "Անցել է",
+    "expiringSoon": "Շուտով կլրանա",
+    "certificateExpiration": "Գործողության ժամկետի ավարտին մնացել է {0} օր",
+    "locality": "Տեղանք",
+    "serialNumber": "Սերիական համար",
+    "commonName": "Ընդհանուր անուն",
+    "organizationalUnit": "Կազմակերպական ստորաբաժանում",
+    "organization": "Կազմակերպություն",
+    "state": "Պետություն",
+    "country": "Երկիր",
+    "validPeriod": "Գործողության ժամկետ",
+    "certificateActiveDates": "Վկայականի գործողության ժամկետները",
     "renewCertificateConfirmDesc": "Վստա՞հ եք, որ ցանկանում եք թարմացնել «{0}» հոսթի վկայագիրը։",
     "refreshCACertificatesConfirm": "ՎԿ կենտրոնի վկայագրերի թարմացման հաստատում",
     "refreshCACertificatesConfirmDesc": "Վստա՞հ եք, որ ցանկանում եք թարմացնել ՎԿ կենտրոնի վկայագրերը «{0}» հոսթում։",

package/assets/localization/local_kk.json

@@ -2816,7 +2816,20 @@
     "actionsSameInfoDesc": "Бірдей ауырлық деңгейіне байланысты әрекеттер 1-ші Дабыл ережесімен бірдей",
     "systemStack": "Жүйелік стек",
     "localSubnet": "Жергілікті ішкі желі",
-    "renewCertificateConfirm": "Сертификатты жаңартуды растау",
+    "renewCertificateConfirm": "Сертификатты жаңарту",
+    "elapsed": "Өтті",
+    "expiring": "Өткен",
+    "expiringSoon": "Жақын арада аяқталады",
+    "certificateExpiration": "Қолданылу мерзімі аяқталғанша {0} күн қалды",
+    "locality": "Орналасқан жері",
+    "serialNumber": "Сериялық нөмір",
+    "commonName": "Жалпы атау",
+    "organizationalUnit": "Ұйымдық бөлімше",
+    "organization": "Ұйым",
+    "state": "Мемлекет",
+    "country": "Ел",
+    "validPeriod": "Қолданылу мерзімі",
+    "certificateActiveDates": "Сертификаттың қолданылу күндері",
     "renewCertificateConfirmDesc": "Сіз «{0}» хостының сертификатын жаңартқыңыз келетініне сенімдісіз бе?",
     "refreshCACertificatesConfirm": "CA сертификаттарын жаңартуды растау",
     "refreshCACertificatesConfirmDesc": "Сіз «{0}» хостындағы CA сертификаттарын жаңартқыңыз келетініне сенімдісіз бе?",

package/assets/localization/local_ru.json

@@ -2816,7 +2816,20 @@
     "actionsSameInfoDesc": "Действия такие же, как и в правиле тревоги 1, из-за того же уровня серьезности.",
     "systemStack": "Системный стек",
     "localSubnet": "Локальная подсеть",
-    "renewCertificateConfirm": "Подтверждение продления сертификата",
+    "renewCertificateConfirm": "Продлить сертификат",
+    "elapsed": "Прошло",
+    "expiring": "Прошло",
+    "expiringSoon": "Скоро истекает",
+    "certificateExpiration": "До истечения срока действия осталось {0} дней",
+    "locality": "Местоположение",
+    "serialNumber": "Серийный номер",
+    "commonName": "Общее имя",
+    "organizationalUnit": "Организационное подразделение",
+    "organization": "Организация",
+    "state": "Государство",
+    "country": "Страна",
+    "validPeriod": "Срок действия",
+    "certificateActiveDates": "Даты действия сертификата",
     "renewCertificateConfirmDesc": "Вы уверены, что хотите продлить сертификат для хоста “{0}”?",
     "refreshCACertificatesConfirm": "Подтверждение обновления сертификатов CA",
     "refreshCACertificatesConfirmDesc": "Вы уверены, что хотите обновить сертификаты CA на хосте “{0}”?",

package/assets/localization/local_zh.json

@@ -2814,7 +2814,20 @@
     "actionsSameInfoDesc": "由于严重程度相同，操作与警报规则 1 相同",
     "systemStack": "系统堆栈",
     "localSubnet": "本地子网",
-    "renewCertificateConfirm": "更新证书确认",
+    "renewCertificateConfirm": "续订证书",
+    "elapsed": "已过",
+    "expiring": "已过去",
+    "expiringSoon": "即将过期",
+    "certificateExpiration": "到期前还剩 {0} 天",
+    "locality": "地点",
+    "serialNumber": "序列号",
+    "commonName": "通用名称",
+    "organizationalUnit": "组织单位",
+    "organization": "组织",
+    "state": "州",
+    "country": "国家",
+    "validPeriod": "有效期",
+    "certificateActiveDates": "证书有效日期",
     "renewCertificateConfirmDesc": "您确定要为主机“{0}”更新证书吗？",
     "refreshCACertificatesConfirm": "刷新 CA 证书确认",
     "refreshCACertificatesConfirmDesc": "您确定要刷新主机“{0}”上的 CA 证书吗？",

package/components/common/adapterManager/AdapterManagerNew.vue

@@ -286,6 +286,7 @@ const onShowAddAdapterModal = (): void => {
     :deep(.table-fixed-height) {
       min-height: unset !important;
       max-height: unset !important;
+      height: unset !important;
 
       .info-block-container {
         padding-right: 19px !important;

package/components/common/certificate/Certificate.vue

@@ -1,10 +1,10 @@
 <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>
+  <component
+    :is="currentComponent"
+    :loading="props.loading"
+    :certificate-data="props.certificateData"
+    @renew-certificate="emits('renew-certificate')"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -18,6 +18,16 @@ const props = defineProps<{
 const emits = defineEmits<{
   (event: 'renew-certificate'): void
 }>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,61 @@
+<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/{CertificateInfo.vue → Info/Old.vue}

@@ -47,7 +47,7 @@
       </template>
       <template #stackBlockContent
         ><span data-id="certificate-valid-from-value">{{
-          validFrom
+          props.validFrom
         }}</span></template
       >
     </atoms-stack-block>
@@ -64,7 +64,7 @@
       </template>
       <template #stackBlockContent
         ><span data-id="certificate-valid-to-value">{{
-          validTo
+          props.validTo
         }}</span></template
       >
     </atoms-stack-block>
@@ -81,7 +81,7 @@
       </template>
       <template #stackBlockContent
         ><span data-id="certificate-status-value">{{
-          statusText
+          props.statusText
         }}</span></template
       >
     </atoms-stack-block>
@@ -94,40 +94,12 @@ import type { UI_I_Certificate } from '~/components/common/certificate/lib/model
 
 const props = defineProps<{
   certificateData: UI_I_Certificate | {}
+  validFrom: string
+  validTo: string
+  statusText: string
 }>()
 
-const { $store, $formattedDatetime }: any = useNuxtApp()
-
 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>

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

@@ -0,0 +1,285 @@
+<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

@@ -0,0 +1,59 @@
+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

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

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

@@ -0,0 +1,10 @@
+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