bfg-common 1.6.77 → 1.6.78

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>

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

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

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

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

@@ -1,39 +0,0 @@
-<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/lib/config/tabsPannel.ts

@@ -1,20 +0,0 @@
-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/diagramMain/modals/editSettings/tabs/SwitchProperties.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="wizard-content__container">
-    <div class="wizard-content">
-      <atoms-alert
-        v-if="isShowErrorMessage"
-        :items="validationMessagesArray"
-        status="alert-danger"
-        test-id="switch-properties-alert"
-        @remove="onHideErrorMessageAlert"
-      />
-      <form id="switch-properties-form">
-        <div class="horizontal-flex-container">
-          <label class="property-label-group" for="network-label">
-            {{ localization.common.numberOfPorts }}
-          </label>
-          <div class="margin-left-property-value-group">
-            <div class="property-value-group">
-              <fieldset>
-                {{ props.initialData.num_ports }}
-              </fieldset>
-            </div>
-          </div>
-        </div>
-        <div class="horizontal-flex-container">
-          <label class="property-label-group">
-            {{ localization.common.mtuBytes }}
-          </label>
-          <div class="margin-left-property-value-group">
-            <div class="property-value-group tooltip-field-container">
-              <fieldset>
-                <atoms-tooltip-error :has-error="!!props.errorMessages.mtu">
-                  <template #elem>
-                    <input
-                      id="mtu"
-                      v-model="fieldsValues.mtu"
-                      :class="[
-                        'tooltip-field',
-                        {
-                          'danger-not-valid': props.errorMessages.mtu,
-                        },
-                      ]"
-                      data-id="mtu-input"
-                      type="number"
-                      name="mtu"
-                      @click.stop
-                    />
-                  </template>
-                  <template #content>
-                    {{ props.errorMessages.mtu }}
-                  </template>
-                </atoms-tooltip-error>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_SwitchPropertiesFields,
-  UI_I_EditSettingsErrorMessage,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_PortPropertiesFieldName } from '~/components/common/diagramMain/lib/models/types'
-import { validationMessagesArrayFunc } from '~/components/common/diagramMain/modals/lib/utils'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    isShowErrorMessageAlert: boolean
-    errorMessages: UI_I_EditSettingsErrorMessage
-    initialData?: UI_I_ModalsInitialData
-    hasErrorMessages?: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    hasErrorMessages: undefined,
-  }
-)
-
-// Validation
-const emits = defineEmits<{
-  (
-    event: 'change-error-messages',
-    errorMessage: string,
-    fieldName: keyof UI_I_EditSettingsErrorMessage
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (
-    event: 'change-edit-properties-data',
-    switchPropertiesData: UI_I_SwitchPropertiesFields
-  ): void
-}>()
-
-const validationMessagesArray = computed(() =>
-  validationMessagesArrayFunc(['mtu'], props.errorMessages)
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// For showing component validation errors on the top of modal
-const isShowErrorMessage = computed<boolean>(
-  () => props.isShowErrorMessageAlert && props.hasErrorMessages
-)
-
-const fieldsValues = ref<UI_I_SwitchPropertiesFields>({
-  mtu: props.initialData.mtu || 0,
-  num_ports: props.initialData.num_ports || '',
-})
-
-const onHideErrorMessageAlert = () => emits('hide-error-message-alert')
-const onChangeData = (data: UI_I_SwitchPropertiesFields) =>
-  emits('change-edit-properties-data', data)
-
-const changeErrorMessage = (
-  errorMessage: string,
-  fieldName: keyof UI_I_EditSettingsErrorMessage
-) => emits('change-error-messages', errorMessage, fieldName)
-
-const messageTexts = (local: UI_I_Localization) => ({
-  mtu: local.common.mtuInvalidMessage,
-})
-
-const setMessageOnChangedField = (
-  values: number,
-  name: UI_T_PortPropertiesFieldName,
-  text: string
-) => {
-  if (values < 1280 || values > 65535) {
-    changeErrorMessage(text, name)
-    return
-  }
-  changeErrorMessage('', name)
-}
-
-watch(
-  fieldsValues,
-  (newValues: UI_I_SwitchPropertiesFields) => {
-    setMessageOnChangedField(
-      newValues.mtu,
-      'mtu',
-      messageTexts(localization.value).mtu
-    )
-    onChangeData(newValues)
-    !props.hasErrorMessages && onHideErrorMessageAlert()
-  },
-  {
-    deep: true,
-  }
-)
-
-onMounted(() => {
-  onChangeData(fieldsValues.value)
-})
-
-onUnmounted(() => {
-  onHideErrorMessageAlert()
-})
-</script>