bfg-common 1.6.95 → 1.6.97

package/components/common/adapterManager/ui/secondTitle/SecondTitleNew.vue

@@ -27,10 +27,25 @@ const secondaryTitle = computed<string>(() =>
   margin-bottom: 16px;
   font-weight: 500;
   font-size: 16px;
-  line-height: 19px;
+  line-height: 20px;
   letter-spacing: 0;
   color: var(--table-text-first);
   word-wrap: break-word;
   max-width: 214px;
+  position: sticky;
+  top: 0;
+  background: var(--table-container-in-modal);
+  height: 20px;
+  z-index: 100;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -19px;
+    left: 0;
+    width: 100%;
+    height: 19px;
+    background: var(--table-container-in-modal);
+  }
 }
 </style>

package/components/common/adapterManager/ui/table/TableNew.vue

@@ -124,12 +124,13 @@ const onRemove = (id: string) => {
   background: var(--table-container-in-modal);
   border: 1px solid var(--table-container-in-modal-border);
   border-radius: 8px;
-  padding: 8px 12px;
+  padding: 8px 0px 8px 12px;
+  scrollbar-gutter: stable;
 
   &.add-adapter-modal {
     height: 100%;
     margin-top: 0;
-    padding: 12px;
+    padding: 12px 0px 12px 12px;
     max-width: 240px;
   }
 }

package/components/common/adapterManager/ui/table/adapters/AdaptersNew.vue

@@ -1,38 +1,57 @@
 <template>
   <template v-for="(adapter, index) in adapters" :key="adapter.id">
-    <div
-      :class="[
-        'adapter',
-        {
-          selected: props.selectedAdapterId === adapter.id,
-          'first-item': index === 0,
-          'last-item': props.adapters.length === index + 1,
-          'is-add-modal': props.isAddModal,
-        },
-      ]"
-      :data-id="`adapter-${adapter.id}`"
-      @click="onSelectAdapter(adapter.id)"
+    <ui-tooltip
+      :id="`adapter-${adapter.id}`"
+      :test-id="`adapter-tooltip-${adapter.id}`"
+      size="md"
+      position="bottom"
+      position-by-tooltip="center"
+      show-type="variant-1"
+      timing="660"
+      width="214"
     >
-      <div class="adapter-info">
-        <span class="adapter-info-icon">
-          <ui-icon name="diagram-physical-adapter" width="20" height="20" />
-        </span>
-        <span class="adapter-info-title">{{ adapter.id }}</span>
-      </div>
-      <span
-        v-if="!props.isAddModal && props.fullMode"
-        :class="[
-          'adapter-remove',
-          {
-            show: props.selectedAdapterId === adapter.id,
-            disabled: adapter.isCore,
-          },
-        ]"
-        @click.prevent.stop="onRemove(adapter.id)"
-      >
-        <ui-icon name="close" width="16" height="16" />
-      </span>
-    </div>
+      <template #target>
+        <div
+          :id="`adapter-${adapter.id}`"
+          :class="[
+            'adapter',
+            {
+              selected: props.selectedAdapterId === adapter.id,
+              'first-item': index === 0,
+              'last-item': props.adapters.length === index + 1,
+              'is-add-modal': props.isAddModal,
+            },
+          ]"
+          :data-id="`adapter-${adapter.id}`"
+          @click="onSelectAdapter(adapter.id)"
+        >
+          <div class="adapter-info">
+            <span class="adapter-info-icon">
+              <ui-icon name="diagram-physical-adapter" width="20" height="20" />
+            </span>
+            <span class="adapter-info-title">{{ adapter.id }}</span>
+          </div>
+          <span
+            v-if="!props.isAddModal && props.fullMode"
+            :class="[
+              'adapter-remove',
+              {
+                show: props.selectedAdapterId === adapter.id,
+                disabled: adapter.isCore,
+              },
+            ]"
+            @click.prevent.stop="onRemove(adapter.id)"
+          >
+            <ui-icon name="close" width="16" height="16" />
+          </span>
+        </div>
+      </template>
+      <template #content>
+        <div class="tooltip-text">
+          {{ adapter.id }}
+        </div>
+      </template>
+    </ui-tooltip>
   </template>
 </template>
 
@@ -69,9 +88,11 @@ const adapters = computed(() =>
   display: flex;
   align-items: center;
   justify-content: space-between;
+  column-gap: 8px;
   padding: 6px 8px;
   border-radius: 6px;
   color: var(--table-text-first);
+  cursor: pointer;
 
   &:not(.last-item) {
     margin-bottom: 4px;
@@ -83,7 +104,8 @@ const adapters = computed(() =>
 
   &.is-add-modal {
     margin-top: 0;
-    width: 214px;
+    width: 100%;
+    cursor: pointer;
   }
 
   &:hover {
@@ -107,6 +129,9 @@ const adapters = computed(() =>
     display: flex;
     align-items: center;
     column-gap: 8px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 
     &-icon {
       color: var(--text-green);
@@ -121,6 +146,9 @@ const adapters = computed(() =>
       letter-spacing: 0;
       vertical-align: middle;
       user-select: none;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
   }
 
@@ -132,9 +160,11 @@ const adapters = computed(() =>
     display: none;
 
     &.disabled {
-      color: #bdc3c7;
-      user-select: none;
-      pointer-events: none;
+      //opacity: 64%;
+      display: none !important;
+      //color: var(--btn-text-disabled-color);
+      //user-select: none;
+      //pointer-events: none;
     }
 
     &.show {
@@ -150,4 +180,8 @@ const adapters = computed(() =>
     }
   }
 }
+
+.tooltip-text {
+  word-wrap: break-word;
+}
 </style>

package/components/common/adapterManager/ui/table/header/HeaderNew.vue

@@ -18,6 +18,7 @@
     >
       <ui-icon name="plus" width="18" height="18" />
     </span>
+    <span v-else class="empty-block"></span>
   </div>
 </template>
 
@@ -56,7 +57,6 @@ const onShowAddAdapterModal = (): void => {
     vertical-align: middle;
     margin-top: 2px;
     color: var(--table-text-first);
-    max-width: 172px;
     word-wrap: break-word;
     user-select: none;
   }
@@ -73,5 +73,9 @@ const onShowAddAdapterModal = (): void => {
       color: var(--table-text-hover);
     }
   }
+  .empty-block {
+    width: 18px;
+    height: 18px;
+  }
 }
 </style>

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">{{
-          props.certificateData.status
+          props.statusText
         }}</span></template
       >
     </atoms-stack-block>
@@ -94,34 +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,
-      })
-    : ''
-)
-
-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>