bfg-common 1.6.95 → 1.6.97

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

package/components/common/certificate/Old.vue

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

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

@@ -0,0 +1,30 @@
+<template>
+  <common-certificate-new-skeleton
+    v-if="props.loading"
+    test-id="certificate-spinner"
+  />
+  <div v-else 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>

package/components/common/certificate/new/Skeleton.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="certificate-skeleton-page grid h-full">
+    <div class="flex justify-between flex-wrap gap-4 mb-4">
+      <ui-skeleton-item width="160" height="22" />
+      <ui-skeleton-item width="106" height="36" border-radius="8" />
+    </div>
+
+    <div class="page-body p-4">
+      <div class="info-block-box flex justify-between flex-wrap gap-4 mb-3 p-4">
+        <div class="flex gap-3">
+          <ui-skeleton-item width="38" height="38" border-radius="50%" />
+          <div class="grid gap-1">
+            <ui-skeleton-item width="80" height="18" />
+            <ui-skeleton-item width="400" height="16" />
+          </div>
+        </div>
+        <div class="info-block-top-right-block">
+          <div class="flex justify-between gap-3 mb-[10px]">
+            <ui-skeleton-item width="64" height="18" />
+            <ui-skeleton-item width="64" height="18" />
+          </div>
+          <ui-skeleton-item width="100%" height="10" />
+        </div>
+      </div>
+      <div class="grid cols-2 gap-3">
+        <div class="info-block-box p-4">
+          <div class="flex items-center gap-3 mb-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="292" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="160" height="18" />
+            <ui-skeleton-item width="160" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="240" height="18" />
+            <ui-skeleton-item width="240" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="112" height="18" />
+            <ui-skeleton-item width="272" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="144" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="80" height="18" />
+            <ui-skeleton-item width="290" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="256" height="18" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+        </div>
+        <div class="info-block-box p-4">
+          <div class="flex items-center gap-3 mb-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="292" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="160" height="18" />
+            <ui-skeleton-item width="160" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="240" height="18" />
+            <ui-skeleton-item width="240" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="112" height="18" />
+            <ui-skeleton-item width="272" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="212" height="18" />
+            <ui-skeleton-item width="144" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="80" height="18" />
+            <ui-skeleton-item width="290" height="18" />
+          </div>
+          <div class="flex justify-between gap-4 mb-3">
+            <ui-skeleton-item width="256" height="18" />
+            <ui-skeleton-item width="80" height="18" />
+          </div>
+        </div>
+      </div>
+      <ui-skeleton-item width="80" height="20" class="mt-4 mb-4" />
+      <div class="info-block-box p-4">
+        <ui-skeleton-item width="80" height="18" />
+        <div class="grid cols-2">
+          <div class="flex mt-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <div class="ml-3">
+              <ui-skeleton-item width="80" height="18" class="mb-1" />
+              <ui-skeleton-item width="240" height="18" />
+            </div>
+          </div>
+          <div class="flex mt-4">
+            <ui-skeleton-item width="40" height="40" border-radius="8" />
+            <div class="ml-3">
+              <ui-skeleton-item width="80" height="18" class="mb-1" />
+              <ui-skeleton-item width="240" height="18" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+:root {
+  --certificate-page-skeleton-body-bg: #ffffff;
+  --certificate-page-skeleton-body-info-block-bg: #ffffff;
+  --certificate-page-skeleton-body-info-block-border: #e9ebed;
+}
+:root.dark-theme {
+  --certificate-page-skeleton-body-bg: #334453;
+  --certificate-page-skeleton-body-info-block-bg: #1b2a371f;
+  --certificate-page-skeleton-body-info-block-border: #e9ebed1f;
+}
+</style>
+
+<style scoped lang="scss">
+.certificate-skeleton-page {
+  grid-template-rows: max-content auto;
+  margin-top: 6px;
+
+  .page-body {
+    background-color: var(--certificate-page-skeleton-body-bg);
+    box-shadow: 0 1px 4px 0 #00000014;
+    border-radius: 8px;
+
+    .info-block-box {
+      background-color: var(--certificate-page-skeleton-body-info-block-bg);
+      border: 1px solid var(--certificate-page-skeleton-body-info-block-border);
+      border-radius: 8px;
+
+      .info-block-top-right-block {
+        min-width: 320px;
+      }
+    }
+  }
+}
+</style>

package/components/common/certificate/tools/New.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-wrap justify-between gap-4 mb-4">
+    <h3 class="certificate-title text-[18px] font-[500]">
+      {{ props.pageTitle }}
+    </h3>
+
+    <ui-button
+      test-id="certificate-renew-button"
+      size="md"
+      @click="emits('show-modal', 'renew')"
+    >
+      <template #icon> <ui-icon name="update" width="24" /> </template>
+      {{ localization.common.renew }}
+    </ui-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  pageTitle: string
+  tabs: UI_I_CollapseNavItem[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-modal', value: UI_T_ModeModal): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style>
+:root {
+  --certificate-page-title: #4d5d69;
+}
+:root.dark-theme {
+  --certificate-page-title: #e9eaec;
+}
+</style>
+
+<style lang="scss" scoped>
+.certificate-title {
+  color: var(--certificate-page-title);
+}
+</style>

package/components/common/certificate/tools/Old.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="certificate-headline">
+    <common-headline :headline="props.pageTitle">
+      <template #action>
+        <atoms-tabs
+          :items="props.tabs"
+          test-id="certificate-tabs"
+          size="small"
+          @change="emits('show-modal', $event)"
+        />
+      </template>
+    </common-headline>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  pageTitle: string
+  tabs: UI_I_CollapseNavItem[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-modal', value: UI_T_ModeModal): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.certificate-headline {
+  :deep(.heading-block__actions) {
+    .nav {
+      margin-top: 0;
+      align-items: flex-start;
+    }
+  }
+}
+</style>

package/components/common/certificate/{Tools.vue → tools/Tools.vue}

@@ -1,16 +1,10 @@
 <template>
-  <div class="certificate-headline">
-    <common-headline :headline="localization.common.certificate">
-      <template #action>
-        <atoms-tabs
-          :items="tabs"
-          test-id="certificate-tabs"
-          size="small"
-          @change="onShowModal"
-        />
-      </template>
-    </common-headline>
-  </div>
+  <component
+    :is="currentComponent"
+    :page-title="localization.common.certificate"
+    :tabs="tabs"
+    @show-modal="onShowModal"
+  />
 
   <common-certificate-modals-renew
     v-if="isShowModal"
@@ -24,12 +18,22 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
-import { certificateTabsFunc } from '~/components/common/certificate/lib/config/tabsPannel'
+import { certificateTabsFunc } from '~/components/common/certificate/tools/lib/config/tabsPannel'
 
 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.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const tabs = computed<UI_I_CollapseNavItem[]>(() =>
@@ -47,13 +51,4 @@ const onHideModal = (): void => {
 }
 </script>
 
-<style lang="scss" scoped>
-.certificate-headline {
-  :deep(.heading-block__actions) {
-    .nav {
-      margin-top: 0;
-      align-items: flex-start;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/certificate/tools/lib/config/tabsPannel.ts

@@ -0,0 +1,20 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+export const certificateTabsFunc = (
+  localization: UI_I_Localization
+): UI_I_CollapseNavItem[] => [
+  {
+    text: localization.common.renew,
+    value: 'renew',
+    disabled: false,
+    testId: 'certificate-renew',
+  },
+  {
+    text: localization.common.certificateRefreshTitle,
+    value: 'refreshCaCertificates',
+    disabled: true,
+    testId: 'certificate-refresh',
+    development: true,
+  },
+]

package/components/common/configure/physicalAdapters/PhysicalAdapters.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="h-full">
+    <component
+      :is="currentComponent"
+      v-model="selectedRow"
+      :host-name="props.hostName"
+      :project="props.project"
+      :is-dark-mode="props.isDarkMode"
+      :adapters="props.adapters"
+      :switch-adapters-loading="props.switchAdaptersLoading"
+      :is-networking-loading="props.isNetworkingLoading"
+      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
+      :tcp-stacks="props.tcpStacks"
+      :diagram-data="props.diagramData"
+      :standard-switches="props.standardSwitches"
+      :free-adapters="props.freeAdapters"
+      :tabs="tabs"
+      :has-selected-adapter="hasSelectedAdapter"
+      @get-tcp-stacks="emits('get-tcp-stacks')"
+      @global-refresh-adapters="emits('global-refresh-adapters')"
+      @get-virtual-switches="emits('get-virtual-switches')"
+      @get-existing-switches="emits('get-existing-switches')"
+      @get-switch-adapters="emits('get-switch-adapters')"
+      @check-network-label="onCheckNetworkLabel"
+      @get-free-adapters="onGetFreeAdapters"
+      @send-networking-data="onSendNetworkData"
+      @send-validation="onSendValidation"
+      @send-dit-data="emits('send-dit-data')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_SwitchAdapterItem,
+  UI_I_DiagramData,
+  API_UI_I_SwitchItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_Switch,
+  UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
+  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  UI_I_AddNetworkingFourthOrFifthSchemeDataSend,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type { UI_I_ViewSettingsModalTabs } from '~/components/common/configure/physicalAdapters/tableView/lib/models/interfaces'
+import {
+  adapterViewSettingsModalTabsFunc,
+  srOptionsFunc,
+} from '~/components/common/configure/physicalAdapters/tableView/lib/config/settings'
+
+const props = withDefaults(
+  defineProps<{
+    adapters?: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    project?: UI_T_Project
+    hostName?: string
+    hostId?: string
+    isDarkMode?: boolean
+    switchAdaptersLoading?: boolean
+    isNetworkingLoading?: boolean
+    tcpStacks?: UI_I_TCPStack[]
+    diagramData?: UI_I_DiagramData[]
+    standardSwitches?: UI_I_Switch[]
+    freeAdapters?: UI_I_Adapter[]
+    isGetExistingSwitchesLoading?: boolean
+    isGetTcpStackLoading?: boolean
+  }>(),
+  {
+    adapters: () => ({
+      total_items: 0,
+      total_pages: 0,
+      items: [],
+    }),
+    project: 'procurator',
+    hostName: '',
+    hostId: '',
+    isDarkMode: false,
+    switchAdaptersLoading: false,
+    isNetworkingLoading: false,
+    isGetExistingSwitchesLoading: false,
+    isGetTcpStackLoading: false,
+    tcpStacks: [],
+    diagramData: [],
+    standardSwitches: [],
+    freeAdapters: [],
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'get-tcp-stacks'): void
+  (event: 'global-refresh-adapters'): void
+  (event: 'get-virtual-switches'): void
+  (event: 'get-existing-switches'): void
+  (event: 'get-switch-adapters'): void
+  (event: 'send-dit-data'): void
+  (
+    event: 'check-network-label',
+    label: string,
+    sendMessage: (message: string) => void
+  ): void
+  (event: 'get-free-adapters', showModal: () => void): void
+  (
+    event: 'send-networking-data',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    hideModal: () => void
+  ): void
+  (
+    event: 'send-validation',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+  ): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./PhysicalAdaptersNew.vue'))
+    : defineAsyncComponent(() => import('./PhysicalAdaptersOld.vue'))
+)
+
+const selectedRow = ref<UI_T_SelectedRow>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tabs = computed<UI_I_ViewSettingsModalTabs[]>(() =>
+  adapterViewSettingsModalTabsFunc(localization.value)
+)
+
+const hasSelectedAdapter = computed<boolean>(
+  () => typeof selectedRow.value === 'number'
+)
+
+const onCheckNetworkLabel = (
+  label: string,
+  sendMessage: (message: string) => void
+): void => {
+  emits('check-network-label', label, sendMessage)
+}
+
+const onGetFreeAdapters = (showModal: () => void): void => {
+  emits('get-free-adapters', showModal)
+}
+
+const onSendNetworkData = (
+  data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem,
+  type: string,
+  hideModal: () => void
+): void => {
+  emits('send-networking-data', data, type, hideModal)
+}
+
+const onSendValidation = (
+  data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem,
+  type: string,
+  setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+): void => {
+  emits('send-validation', data, type, setValidation)
+}
+</script>
+
+<style scoped lang="scss"></style>