bfg-common 1.5.708 → 1.5.710

package/assets/localization/local_zh.json

@@ -201,6 +201,7 @@
     "changeComputeResourceOnly": "仅编辑计算资源",
     "changeIdentityProvider": "更改身份提供商",
     "changePassword": "更改密码",
+    "setYourPassword": "设置您的密码",
     "changePasswordError": "密码错误！",
     "changeProviderTooltipContent": "Sphere Zoneは、ユーザーとグループを管理するための外部idプロバイダをサポートしています。 組み込みのSphere Zone idプロバイダを使用してから外部idプロバイダに移行できます。 詳細については、vSphereのドキュメントを参照してください。",
     "changeRole": "改变角色",
@@ -2559,7 +2560,15 @@
     "networkDirectory": "网络目录",
     "hostAndClusterDirectory": "主机和群集目录",
     "vmAndTemplateDirectory": "VM和模板目录",
-    "backupStorageDirectory": "备份存储目录"
+    "backupStorageDirectory": "备份存储目录",
+    "sphereServerSettings": "Sphere 服务器设置",
+    "database": "数据库",
+    "eventCleanup": "事件清理",
+    "eventRetentionDays": "事件保留期限（天）",
+    "editSphereGeneralSettings": "编辑 Sphere 常规设置",
+    "eventRetentionDaysDecreaseAlertText": "减少保留天数不会触发立即清理。事件将在下一次计划的清理期间被删除（每 24 小时）。",
+    "enterDatabaseSettingsDesc": "输入数据库设置。使用任务和事件的保留设置来限制数据库增长。",
+    "lettersLengthError": "请输入不超过 {0} 个字母"
   },
   "auth": {
     "welcomeTo": "欢迎来到",
@@ -3133,6 +3142,8 @@
     "networkPackets": "网络数据包",
     "diskRate": "磁盘速率",
     "diskRequests": "磁盘请求",
+    "nfsRate": "NFS 速率",
+    "nfsRequests": "NFS 请求",
     "priority": "优先次序",
     "recommendation": "建议书",
     "recommendationId": "建议ID",
@@ -3456,6 +3467,7 @@
   },
   "vsphereHa": {
     "sphereHA": "球",
+    "sphereGhydra": "Sphere Ghydra",
     "setUpSphereNa": "设置球体HA",
     "setUpvSphereNaDesc": "为了确保最大程度的保护，请将节点放在单独的主机和数据存储上。",
     "spherePackageFile": "Sphere软件包文件",
@@ -3544,7 +3556,10 @@
     "noUsersSelectedYet": "尚未选择任何用户。",
     "thisGroupHasNoDescriptionYet": "该组尚无描述。",
     "members": "成员",
-    "noNewUsersSelected": "未选择新用户。"
+    "noNewUsersSelected": "未选择新用户。",
+    "isActive": "活跃",
+    "createdAt": "创建日期",
+    "expiresAt": "到期日期"
   },
   "vmt": {
     "newTemplate": "New Template",
@@ -3738,13 +3753,20 @@
   },
   "files": {
     "deleteFileDescription": "您确定要删除“{0}”吗？",
-    "deleteFilesDescription": "您确定要删除 {0} 个文件吗？"
+    "deleteFilesDescription": "您确定要删除 {0} 个文件吗？",
+    "fileManagement": "文件管理"
   },
   "myPreferences": {
     "twoFactorAuthentication": "双因素认证",
+    "twoFactorAuthentication2": "双重身份验证（2FA）",
     "securityLabel": "为您的账户添加额外的安全层",
     "enterOtpForDisabled": "输入6位代码并确认以禁用它：",
     "enterOtpForEnabled": "输入6位代码并确认：",
+    "enterOtpCode": "输入 6 位数代码",
+    "otpCode": "6 位数代码",
+    "otpCodeErrorLength": "代码必须是 6 位数字",
+    "enterOtpVerifyCode": "请输入 6 位数的验证码",
+    "backToLogin": "返回登录",
     "qrcodeDescription": "使用您的身份验证器应用程序扫描此QR码，或手动输入其中一个代码。然后，通过输入下面的一次性代码来确认操作。"
   },
   "ssoConfiguration": {
@@ -3766,5 +3788,27 @@
     "maxDurationSec": "最长持续时间（秒）",
     "idleTimeoutSec": "空闲超时（秒）",
     "maxConcurrentSessions": "最大并发会话数"
+  },
+  "cacheConfiguration": {
+    "cacheConfiguration": "缓存配置",
+    "ceph_detailed": "Ceph 详细信息",
+    "cpu": "CPU",
+    "memory": "内存",
+    "network": "网络",
+    "disk": "磁盘",
+    "lvm": "LVM",
+    "nfs": "NFS",
+    "hci": "HCI",
+    "vm_cpu": "VM CPU",
+    "vm_memory": "VM 内存",
+    "vm_network": "VM 网络",
+    "vm_disk": "VM 磁盘",
+    "sensors": "传感器",
+    "cpu_temp": "CPU 温度",
+    "power": "电源",
+    "services": "服务",
+    "activateAll": "全部激活",
+    "active": "积极的",
+    "inactive": "不活跃"
   }
 }

package/assets/scss/common/icons/icons-1.scss

@@ -78,7 +78,7 @@
   background-position: 0 68.3544303797%;
 }
 .icon-Host_Policy-32x {
-  background-position: 0 7.5%;
+  background-position: 0 7.6%;
 }
 .icon-certificate-32x {
   background-position: 0 35.4430379747%;

package/assets/scss/common/icons/icons-2.scss

@@ -112,6 +112,15 @@
 .icon-ds-iso-image {
   background-position: 0 77.2%;
 }
+.network-lib-ui-icon-ingressEgressTraffic {
+  background-position: 0 81%;
+}
+.network-lib-ui-icon-ingressTraffic {
+  background-position: 0 82.25%;
+}
+.network-lib-ui-icon-egressTraffic {
+  background-position: 0 27.8%;
+}
 
 /* _____BACKGROUND IMAGE_____ */
 .icon-vSphere-dsVmNvram,
@@ -154,6 +163,9 @@
 .icon-help,
 .icon-add-folder,
 .icon-ds-iso-image,
+.network-lib-ui-icon-ingressEgressTraffic,
+.network-lib-ui-icon-ingressTraffic,
+.network-lib-ui-icon-egressTraffic,
 .vsphere-icon-snapshot-here {
   background-image: url('assets/img/icons/icons-sprite-light-2.svg');
 
@@ -199,6 +211,9 @@
 .active .icon-help,
 .active .icon-add-folder,
 .active .icon-ds-iso-image,
+.active .network-lib-ui-icon-ingressEgressTraffic,
+.active .network-lib-ui-icon-ingressTraffic,
+.active .network-lib-ui-icon-egressTraffic,
 .active .vsphere-icon-snapshot-here {
   background-image: url('assets/img/icons/icons-sprite-dark-2.svg');
 
@@ -254,6 +269,9 @@
 .icon-help,
 .icon-add-folder,
 .icon-ds-iso-image,
+.network-lib-ui-icon-ingressEgressTraffic,
+.network-lib-ui-icon-ingressTraffic,
+.network-lib-ui-icon-egressTraffic,
 .vx-icon-memory {
   display: inline-block;
   width: 18px;

package/assets/scss/common/theme.scss

@@ -304,6 +304,7 @@
 
   //--gutter-bg-color: #eee; // for old
   --gutter-bg-color: #e9ebed; // for new
+  --new-gutter-bg-color: #e9ebed;
   //--gutter-hover-bg-color: #0079b8; // for old
   --gutter-hover-bg-color: #008fb6; // for new
   //--gutter-active-bg-color: #a6d8e7; // for old
@@ -710,6 +711,7 @@
 
   //--gutter-bg-color: #25333d; // for old
   --gutter-bg-color: #e9ebed1f; // for new
+  --new-gutter-bg-color: #394a58;
   --gutter-hover-bg-color: #495a67;
   --gutter-active-bg-color: #495a67;
   --gutter-before-bg: rgba(157, 166, 173, 0.32);

package/assets/scss/components/auth.scss

@@ -169,19 +169,46 @@
     color: #000000;
     font-size: 32px;
     font-weight: 400;
-    line-height: 38px;
+    line-height: 44px;
     margin-bottom: 48px;
     span {
       font-size: 32px;
       color: #008fd6;
     }
   }
+  &__otp-text-block {
+    .title-block {
+      font-size: 16px;
+      font-weight: 400;
+      color: #4d5d69;
+      line-height: 22px;
+    }
+    .subtitle-block {
+      font-size: 14px;
+      font-weight: 400;
+      color: #9da6ad;
+      line-height: 20px;
+    }
+  }
+  :deep(input.otp-input) {
+    height: 44px;
+  }
   &__alert {
     margin-bottom: 48px;
   }
   &__input {
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--input-bg);
+      border-radius: 8px;
+    }
     :deep(.ui-main-input) {
-      background-color: #fafafa;
+      background-color: var(--input-bg);
     }
     :deep(input.ui-main-input:-internal-autofill-selected),
     :deep(input.ui-main-input:-internal-autofill-selected:hover),
@@ -189,7 +216,7 @@
     :deep(input.ui-main-input:-internal-autofill-selected:focus) {
       appearance: menulist-button;
       background-image: none !important;
-      background-color: #fafafa !important;
+      background-color: var(--input-bg) !important;
       color: fieldtext !important;
       -webkit-background-clip: text;
     }
@@ -210,11 +237,11 @@
     }
   }
   &__checkbox {
-    margin-top: 18px;
+    margin-top: 16px;
   }
   &__button {
     @include flex($just: center, $align: center);
-    margin-top: 72px;
+    margin-top: 32px;
     height: 44px;
     border-radius: 8px;
     :deep(svg) {

package/components/atoms/dropdown/tree/Tree.vue

@@ -119,6 +119,7 @@ onUnmounted(() => {
   .dropdown-menu {
     position: fixed;
     transform: translateX(-100%);
+    background-color: var(--dropdown-bg-color);
 
     h4 {
       font-size: 12px;
@@ -130,6 +131,7 @@ onUnmounted(() => {
     button {
       &:hover {
         border-bottom: 1px solid #666;
+        color: #565656;
       }
     }
   }

package/components/atoms/switch/Switch.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="flex-align-center">
     <div class="switch-body">
-      <input :id="props.testId" v-model="value" type="checkbox" />
+      <input
+        :id="props.testId"
+        v-model="value"
+        type="checkbox"
+        @change="emits('change', value)"
+      />
       <label :for="props.testId" class="switch-label"></label>
     </div>
     <label :for="props.testId"><slot></slot></label>
@@ -19,6 +24,7 @@ const props = withDefaults(
 
 const emits = defineEmits<{
   (event: 'update:model-value', value: boolean): void
+  (event: 'change', value: boolean): void
 }>()
 
 const value = computed<boolean>({

package/components/atoms/wizard/Wizard.vue

@@ -21,7 +21,7 @@
             <slot name="contentHeading">
               <div class="modal-title-wrapper">
                 <h2 class="modal-title">
-                  <span class="modal-title-text">
+                  <span class="modal-title-text" :data-id="`${props.testId}-modal-title`">
                     {{ props.wizard.selectedStepCom.value.title }}
                   </span>
                 </h2>

package/components/common/certificate/Certificate.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/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>