bfg-common 1.5.708 → 1.5.709

package/components/common/certificate/CertificateInfo.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="stack-view">
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-subject-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-subject">{{
+            localization.common.subject
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-subject-value">{{
+          props.certificateData.subject
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-issuer-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-issuer">{{
+            localization.common.issuer
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-issuer-value">{{
+          props.certificateData.issuer
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-valid-from-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-valid-from">{{
+            localization.common.validFrom
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-valid-from-value">{{
+          validFrom
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-valid-to-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-valid-to">{{
+            localization.common.validTo
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-valid-to-value">{{
+          validTo
+        }}</span></template
+      >
+    </atoms-stack-block>
+    <atoms-stack-block
+      :has-children="false"
+      test-id="certificate-status-stack-block"
+    >
+      <template #stackBlockKey>
+        <div class="flex-align-center">
+          <span data-id="certificate-status">{{
+            localization.common.status
+          }}</span>
+        </div>
+      </template>
+      <template #stackBlockContent
+        ><span data-id="certificate-status-value">{{
+          props.certificateData.status
+        }}</span></template
+      >
+    </atoms-stack-block>
+  </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'
+
+const props = defineProps<{
+  certificateData: UI_I_Certificate | {}
+}>()
+
+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>
+:deep(.stack-block:hover) {
+  border-bottom: 1px solid #ddd;
+
+  &:last-child {
+    border-bottom: unset;
+  }
+
+  .stack-block-label {
+    background-color: unset;
+  }
+}
+</style>

package/components/common/certificate/Tools.vue

@@ -0,0 +1,59 @@
+<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>
+
+  <common-certificate-modals-renew
+    v-if="isShowModal"
+    :mode="mode"
+    @hide="onHideModal"
+    @renew-certificate="emits('renew-certificate')"
+  />
+</template>
+
+<script lang="ts" setup>
+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'
+
+const emits = defineEmits<{
+  (event: 'renew-certificate'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tabs = computed<UI_I_CollapseNavItem[]>(() =>
+  certificateTabsFunc(localization.value)
+)
+
+const isShowModal = ref<boolean>(false)
+const mode = ref<UI_T_ModeModal>('renew')
+const onShowModal = (value: UI_T_ModeModal): void => {
+  mode.value = value
+  isShowModal.value = true
+}
+const onHideModal = (): void => {
+  isShowModal.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.certificate-headline {
+  :deep(.heading-block__actions) {
+    .nav {
+      margin-top: 0;
+      align-items: flex-start;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+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[] => {
+  return [
+    {
+      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/certificate/lib/models/interfaces.ts

@@ -0,0 +1,9 @@
+export interface UI_API_I_Certificate {
+  subject: string
+  issuer: string
+  valid_from: string
+  valid_to: string
+  status: string
+}
+
+export interface UI_I_Certificate extends UI_API_I_Certificate {}

package/components/common/certificate/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_ModeModal = 'renew' | 'refreshCaCertificates'

package/components/common/certificate/modals/renew/New.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="renew-refresh-certificate">
+    <common-modals-confirmation
+      :headline="title"
+      :description="description"
+      :test-id="props.testId"
+      :modal-texts="modalTexts"
+      :loading="props.loading"
+      @hide-modal="emits('hide')"
+      @confirm="emits('submit')"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  mode: UI_T_ModeModal
+  hostName: string
+  testId: string
+  loading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2:
+    localization.value.common[props.mode === 'renew' ? 'renew' : 'refresh'],
+}))
+
+const title = computed<string>(
+  () =>
+    localization.value.inventoryConfigure[
+      props.mode === 'renew'
+        ? 'renewCertificateConfirm'
+        : 'refreshCACertificatesConfirm'
+    ]
+)
+
+const description = computed<string>(() =>
+  localization.value.inventoryConfigure[
+    props.mode === 'renew'
+      ? 'renewCertificateConfirmDesc'
+      : 'refreshCACertificatesConfirmDesc'
+  ].replace('{0}', props.hostName)
+)
+</script>
+
+<style lang="scss" scoped>
+.renew-refresh-certificate {
+  :deep(.confirm-modal__content span:nth-child(2)) {
+    line-height: unset;
+  }
+}
+</style>

package/components/common/certificate/modals/renew/Old.vue

@@ -0,0 +1,122 @@
+<template>
+  <atoms-modal
+    :title="title"
+    :second-title="props.hostName"
+    :test-id="props.testId"
+    class="certificate-modal"
+    show
+    @hide="onHide"
+  >
+    <template #modalBody>
+      <form
+        id="certificate-renew-form"
+        data-id="certificate-renew-form"
+        class="pt-0"
+        @submit.prevent="onHide"
+      >
+        <section class="form-block flex-align-center m-0 flex">
+          <div class="icon-wrap">
+            <atoms-the-icon class="icon-warning" name="warning" />
+          </div>
+          <p>{{ description }}</p>
+        </section>
+      </form>
+    </template>
+    <template #modalFooter>
+      <button
+        id="certificate-renew-modal-close-button"
+        data-id="certificate-renew-modal-close-button"
+        class="btn btn-primary"
+        @click="onHide"
+      >
+        {{ localization.common.no }}
+      </button>
+      <button
+        id="certificate-renew-modal-apply-button"
+        :class="['btn btn-outline', props.loading && 'pending']"
+        data-id="certificate-renew-modal-apply-button"
+        @click="emits('submit')"
+      >
+        <atoms-loader-pre-loader
+          v-if="props.loading"
+          id="loader"
+          :show="props.loading"
+          class="absolute-center btn__loading flex"
+          test-id="certificate-renew-spinner"
+        />
+        <span v-else>
+          {{ localization.common.yes }}
+        </span>
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  mode: UI_T_ModeModal
+  hostName: string
+  testId: string
+  loading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(
+  () =>
+    localization.value.common[
+      props.mode === 'renew'
+        ? 'certificateRenewTitle'
+        : 'certificateRefreshTitle'
+    ]
+)
+
+const description = computed<string>(
+  () =>
+    localization.value.common[
+      props.mode === 'renew'
+        ? 'certificateRenewDescription'
+        : 'certificateRefreshDescription'
+    ]
+)
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped>
+.certificate-modal {
+  form {
+    .form-block {
+      .icon-warning {
+        width: 48px;
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+.btn {
+  &.pending {
+    position: relative;
+    pointer-events: none;
+  }
+  &__loading {
+    :deep(.spinner) {
+      width: 25px;
+      height: 25px;
+      min-width: 25px;
+      min-height: 25px;
+    }
+  }
+}
+</style>

package/components/common/certificate/modals/renew/Renew.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    :is="currentComponent"
+    :mode="props.mode"
+    :host-name="hostName"
+    :test-id="testId"
+    :loading="loading"
+    @hide="onHide"
+    @submit="onSubmit"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { UI_T_ModeModal } from '~/components/common/certificate/lib/models/types'
+
+const props = defineProps<{
+  mode: UI_T_ModeModal
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (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 hostName = location.hostname
+
+const loading = ref<boolean>(false)
+
+const testId = computed<string>(() =>
+  props.mode === 'renew'
+    ? 'certificate-renew-modal'
+    : 'certificate-refresh-modal'
+)
+
+const renewCertificate = (): void => {
+  emits('renew-certificate')
+}
+
+const refreshCertificate = (): void => {
+  console.log('It will be soon')
+}
+
+const onSubmit = (): void => {
+  loading.value = true
+
+  props.mode === 'renew' ? renewCertificate() : refreshCertificate()
+
+  loading.value = false
+
+  onHide()
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/diagramMain/modals/lib/config/vCenterModal.ts

@@ -1,48 +1,48 @@
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-export const vCenterViewSettingsFunc = (
-  localization: UI_I_Localization,
-  initialData: UI_I_ModalsInitialData
-) => [
-  {
-    title: 'Network adapter 1',
-    id: 1,
-    type: 1,
-    rows: [
-      {
-        name: localization.common.macAddress,
-        value: initialData.macAddress,
-      },
-      {
-        name: localization.common.adapterType,
-        value: initialData.adapter,
-      },
-    ],
-  },
-]
-
-export const vCenterPopupFieldsFunc = (
-  localization: UI_I_Localization,
-  testId: string
-): UI_I_CollapseNavItem[] => [
-  {
-    text: localization.common.viewSettings,
-    value: 'v-center-view-settings',
-    testId: `${testId}-view`,
-  },
-]
-
-export const vCenterPopupFieldsNewFunc = (
-  localization: UI_I_Localization,
-  testId: string
-): UI_I_Dropdown[] => [
-  {
-    text: localization.common.viewSettings,
-    value: 'v-center-view-settings',
-    iconName: 'password-hide',
-    testId: `${testId}-view`,
-  },
-]
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ModalsInitialData } from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+export const vCenterViewSettingsFunc = (
+  localization: UI_I_Localization,
+  initialData: UI_I_ModalsInitialData
+) => [
+  {
+    title: 'Network adapter 1',
+    id: 1,
+    type: 1,
+    rows: [
+      {
+        name: localization.common.macAddress,
+        value: initialData.macAddress,
+      },
+      {
+        name: localization.common.adapterType,
+        value: initialData.adapter,
+      },
+    ],
+  },
+]
+
+export const vCenterPopupFieldsFunc = (
+  localization: UI_I_Localization,
+  testId: string
+): UI_I_CollapseNavItem[] => [
+  {
+    text: localization.common.viewSettings,
+    value: 'v-center-view-settings',
+    testId: `${testId}-view`,
+  },
+]
+
+export const vCenterPopupFieldsNewFunc = (
+  localization: UI_I_Localization,
+  testId: string
+): UI_I_Dropdown[] => [
+  {
+    text: localization.common.viewSettings,
+    value: 'v-center-view-settings',
+    iconName: 'password-hide',
+    testId: `${testId}-view`,
+  },
+]