bfg-common 1.5.43 → 1.5.45

package/components/common/pages/home/widgets/vms/lib/config/items.ts

@@ -1,20 +1,20 @@
-import type {UI_I_Card, UI_I_Vms} from "~/components/common/pages/home/lib/models/interfaces";
-
-export const itemsFunc = (vms: UI_I_Vms): UI_I_Card[] => [
-  {
-    value: vms.powered_on,
-    text: 'powered_on',
-    icon: 'vsphere-icon-vm-on',
-  },
-  {
-    value: vms.powered_off,
-    text: 'powered_off',
-    icon: 'icon-vm-power-off',
-  },
-
-  {
-    value: vms.suspended,
-    text: 'suspended',
-    icon: 'vsphere-icon-vm-suspended',
-  },
+import type {UI_I_Card, UI_I_Vms} from "~/components/common/pages/home/lib/models/interfaces";
+
+export const itemsFunc = (vms: UI_I_Vms): UI_I_Card[] => [
+  {
+    value: vms.powered_on,
+    text: 'powered_on',
+    icon: 'vsphere-icon-vm-on',
+  },
+  {
+    value: vms.powered_off,
+    text: 'powered_off',
+    icon: 'icon-vm-power-off',
+  },
+
+  {
+    value: vms.suspended,
+    text: 'suspended',
+    icon: 'vsphere-icon-vm-suspended',
+  },
 ]

package/components/common/pages/licensing/Licensing.vue

@@ -0,0 +1,128 @@
+<template>
+  <atoms-loader v-show="props.isLoading" test-id="system-licensing-spinner" />
+  <div :class="['system-licensing', { expired: isLicenseExpired }]">
+    <h4 class="hardware-id word-break-all flex-align-center">
+      <span>{{ localization.license.hardwareId }}:</span>
+      <span>{{ props.hardwareId }}</span>
+      <span class="pointer" @click="onCopyToClipboard">
+        <ui-icon name="copy-to-clipboard" width="12" height="12" />
+      </span>
+    </h4>
+
+    <common-headline :headline="localization.license.licensing">
+      <template #action>
+        <button
+          id="assign-license-button"
+          class="btn btn-sm btn-secondary system-button"
+          @click="isShowAssignLicense = true"
+        >
+          {{ localization.license.assignLicense }}
+        </button>
+      </template>
+    </common-headline>
+
+    <common-pages-licensing-list-view :license="props.activeLicense" />
+
+    <!-- Modal -->
+    <common-pages-licensing-modals-assign
+      v-if="isShowAssignLicense"
+      v-model:selected-active-key="selectedActiveKey"
+      v-model:new-license-data="newLicenseData"
+      v-model:validation-error="validationError"
+      :host-name="props.hostName"
+      :system-licenses="props.systemLicenses"
+      @hide="isShowAssignLicense = false"
+      @refresh="emits('refresh')"
+      @change-active-license="emits('change-active-license', $event)"
+      @create-new-license="emits('create-new-license', $event)"
+      @check-validation="emits('check-validation', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_NewSystemLicense,
+  UI_I_SystemLicense,
+} from '~/components/common/pages/licensing/lib/models/interfaces'
+import type { API_UI_I_DataTable } from '~/lib/models/table/interfaces'
+
+const newLicenseData = defineModel<UI_I_NewSystemLicense>('newLicenseData', {
+  required: true,
+})
+const selectedActiveKey = defineModel<string>('selectedActiveKey', {
+  required: true,
+})
+const validationError = defineModel<string | number>('validationError', {
+  required: true,
+})
+
+const props = defineProps<{
+  isLoading: boolean
+  hardwareId: string
+  hostName: string
+  systemLicenses: API_UI_I_DataTable<UI_I_SystemLicense[]> | null
+  activeLicense: UI_I_SystemLicense | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'refresh'): void
+  (event: 'change-active-license', value: string): void
+  (event: 'create-new-license', value: string): void
+  (event: 'check-validation', value: string): void
+  (event: 'copy-to-clipboard'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowAssignLicense = ref<boolean>(false)
+
+const isLicenseExpired = computed<boolean>(
+  () => (props.activeLicense?.timeLeft || 1) <= 0
+)
+
+const onCopyToClipboard = (): void => {
+  navigator.clipboard.writeText(props.hardwareId)
+  emits('copy-to-clipboard')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins.scss';
+
+.system-licensing {
+  @include flex($dir: column);
+  height: 100%;
+  padding-left: 10px;
+
+  &.expired {
+    :deep(.heading-block .heading-block__title) {
+      color: #ea3223;
+    }
+  }
+
+  .hardware-id {
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+
+  &__wrapper {
+    @include flex($dir: column);
+    height: 100%;
+
+    .btn-group {
+      padding-top: 12px;
+    }
+  }
+
+  &__tabs {
+    margin-bottom: 12px;
+  }
+}
+
+.system-button:hover {
+  background-color: var(--btn-outline-hover-bg-color);
+  color: var(--btn-outline-hover-color);
+}
+</style>

package/components/common/pages/licensing/lib/models/interfaces.ts

@@ -0,0 +1,22 @@
+export interface UI_I_SystemLicense {
+    id: string
+    license: string
+    licenseIcon: string
+    key: string
+    product: string
+    usage: string
+    capacity: string
+    timeLeft: number
+    features: string[]
+    limits?: string[]
+    isActive?: boolean
+}
+
+export interface UI_I_NewSystemLicense {
+    name: string
+    productName: string
+    features: string[]
+    capacity: string
+    licenseExpires: string
+    limits: string[]
+}

package/components/common/pages/licensing/lib/utils/validation.ts

@@ -0,0 +1,29 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const getValidationInfo = (timeLeft: number, localization: UI_I_Localization): string => {
+  if (timeLeft <= 0) return localization.license.licenseHasExpired
+
+  const { $store, $timeToTimeLeft, $correctRuUnit }: any = useNuxtApp()
+
+  const language = $store.getters['main/getInterfaceLang']
+  const { 0: year, 1: month, 2: day, 3: hour, 4: minute, 5: second }: number[] = $timeToTimeLeft(timeLeft)
+  let expiration = ''
+
+  if (language === 'ru_RU') {
+    if (year) expiration += `${year} ${$correctRuUnit(year, 'year')}`
+    if (month) expiration += ` ${month} ${$correctRuUnit(month, 'month')}`
+    if (day) expiration += ` ${day} ${$correctRuUnit(day, 'day')}`
+    if (hour) expiration += ` ${hour} ${$correctRuUnit(hour, 'hour')}`
+    if (minute) expiration += ` ${minute} ${$correctRuUnit(minute, 'minute')}`
+    if (second) expiration += ` ${second} ${$correctRuUnit(second, 'second')}`
+  } else {
+    if (year) expiration += `${year} ${localization.common.years2}`
+    if (month) expiration += ` ${month} ${localization.common.months2}`
+    if (day) expiration += ` ${day} ${localization.common.days2}`
+    if (hour) expiration += ` ${hour} ${localization.common.hours2}`
+    if (minute) expiration += ` ${minute} ${localization.common.minutes2}`
+    if (second) expiration += ` ${second} ${localization.common.seconds2}`
+  }
+
+  return expiration
+}

package/components/common/pages/licensing/listView/ListView.vue

@@ -0,0 +1,50 @@
+<template>
+  <form id="system-licensing-list-view-form">
+    <section v-if="listItems.length" class="form-block">
+      <div v-for="(item, index) in listItems" :key="index" class="form-group">
+        <label>{{ item.label }}</label>
+        <span :class="['word-break-all form-value', { expired: item.data?.isExpired }]">
+          <atoms-the-icon v-if="item.icon" :name="item.icon" class="icon" />
+          {{ item.value }}
+        </span>
+      </div>
+    </section>
+    <div v-else>
+      {{ localization.license.noActiveLicense }}
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SystemLicense} from "~/components/common/pages/licensing/lib/models/interfaces";
+import type { UI_I_LicensingInfoView} from "~/components/common/pages/licensing/listView/lib/models/interfaces";
+import { systemLicenseViewFunc} from "~/components/common/pages/licensing/listView/lib/config/list";
+
+const props = defineProps<{
+  license: UI_I_SystemLicense | null
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const listItems = computed<UI_I_LicensingInfoView[]>(() =>
+  props.license ? systemLicenseViewFunc(localization.value, props.license) : []
+)
+</script>
+
+<style lang="scss" scoped>
+.form-group {
+  margin-bottom: 0;
+
+  .form-value {
+    white-space: pre-line;
+
+    &.expired {
+      color: #ea3223;
+    }
+  }
+  .icon {
+    height: 20px;
+  }
+}
+</style>

package/components/common/pages/licensing/listView/lib/config/list.ts

@@ -0,0 +1,57 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SystemLicense} from "~/components/common/pages/licensing/lib/models/interfaces";
+import type { UI_I_LicensingInfoView} from "~/components/common/pages/licensing/listView/lib/models/interfaces";
+import { getValidationInfo} from "~/components/common/pages/licensing/lib/utils/validation";
+
+export const systemLicenseViewFunc = (
+  localization: UI_I_Localization,
+  data: UI_I_SystemLicense
+): UI_I_LicensingInfoView[] => {
+  const expiration: string = getValidationInfo(data.timeLeft, localization)
+
+  return [
+    {
+      label: localization.license.license,
+      value: data.license,
+      icon: '',
+      items: [],
+    },
+    {
+      label: localization.license.licenseKey,
+      value: data.key,
+      icon: '',
+      items: [],
+    },
+    {
+      label: localization.common.product,
+      value: data.product,
+      icon: '',
+      items: [],
+    },
+    {
+      label: localization.common.usage,
+      value: data.usage,
+      icon: '',
+      items: [],
+    },
+    {
+      label: localization.license.licenseExpiration,
+      value: expiration,
+      icon: '',
+      items: [],
+      data: { isExpired: data.timeLeft <= 0 },
+    },
+    {
+      label: localization.license.limits,
+      value: data.limits?.join('\n') || '',
+      icon: '',
+      items: [],
+    },
+    {
+      label: localization.license.licensedFeatures,
+      value: data.features.join('\n'),
+      icon: '',
+      items: [],
+    },
+  ]
+}

package/components/common/pages/licensing/listView/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
+
+export interface UI_I_LicensingInfoView extends UI_I_DetailsItem {
+  icon: string
+}

package/components/common/pages/licensing/modals/assign/Assign.vue

@@ -0,0 +1,247 @@
+<template>
+  <atoms-modal
+    show
+    width="1150px"
+    class="assign-licenses"
+    :title="localization.license.assignLicense"
+    :second-title="props.hostName"
+    :disabled-submit="isDisabledSubmitButton"
+    test-id="assign-modal"
+    @hide="onHide"
+    @submit="onSubmit"
+  >
+    <template #modalBody>
+      <div class="assign-licenses-content">
+        <atoms-tabs
+          v-model="selectedTab"
+          :items="tabItems"
+          size="small"
+          class="w-100"
+        />
+
+        <div v-if="selectedTab === 0" class="main-height">
+          <div id="table-hidden-text">
+            <common-pages-licensing-modals-assign-table-view
+              v-model:selected-active-key="selectedActiveKey"
+              :data-table="props.systemLicenses?.items || []"
+              :total-items="props.systemLicenses?.total_items || 0"
+              :total-pages="props.systemLicenses?.total_pages || 1"
+              :pagination="pagination"
+              @pagination="onUpdatePagination"
+            />
+          </div>
+        </div>
+        <div v-else class="main-height">
+          <common-pages-licensing-modals-assign-new
+            v-model:license-key="licenseKey"
+            v-model:new-license-data="newLicenseData"
+            v-model:validation-error="validationErrorText"
+            @validate="onValidate"
+          />
+        </div>
+
+        <div class="validation-caption">
+          {{ validationBlock.caption }}
+          <div class="validation-message">
+            <div class="block">
+              <atoms-the-icon
+                :name="validationBlock.icon"
+                width="16"
+                height="16"
+                class="icon"
+              />
+              <atoms-the-icon2
+                :name="validationBlock.icon"
+                width="16"
+                height="16"
+                class="icon"
+              />
+              <span class="text">{{ validationBlock.message }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Pagination,
+  API_UI_I_DataTable,
+} from '~/lib/models/table/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type {
+  UI_I_NewSystemLicense,
+  UI_I_SystemLicense
+} from "~/components/common/pages/licensing/lib/models/interfaces";
+import type { UI_I_ValidationBlock} from "~/components/common/pages/licensing/modals/assign/lib/models/interfaces";
+import { tabsFunc} from "~/components/common/pages/licensing/modals/assign/lib/config/tabsPannel";
+import { getErrorInfo} from "~/components/common/pages/licensing/modals/assign/lib/utils/error";
+
+const newLicenseData = defineModel<UI_I_NewSystemLicense>('newLicenseData', { required: true })
+const selectedActiveKey = defineModel<string>('selectedActiveKey', { required: true })
+const validationError = defineModel<string | number>('validationError', { required: true })
+
+const props = defineProps<{
+  hostName: string
+  systemLicenses: API_UI_I_DataTable<UI_I_SystemLicense[]> | null
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'refresh'): void
+  (event: 'change-active-license', value: string): void
+  (event: 'create-new-license', value: string): void
+  (event: 'check-validation', value: string): void
+
+}>()
+
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedTab = ref<0 | 1>(0)
+const tabItems = computed<UI_I_CollapseNavItem[]>(() =>
+  tabsFunc(localization.value)
+)
+
+
+const onSubmit = (): void => {
+  if (selectedTab.value === 0) {
+    emits('change-active-license', selectedActiveKey.value)
+    emits('refresh')
+
+    onHide()
+  } else {
+    emits('create-new-license', licenseKey.value)
+
+    selectedTab.value = 0
+    licenseKey.value = ''
+  }
+}
+const onHide = (): void => {
+  selectedTab.value = 0
+  emits('hide')
+}
+
+const pagination = ref<UI_I_Pagination>({
+  page: 1,
+  pageSize: 35,
+})
+const onUpdatePagination = (event: UI_I_Pagination): void => {
+  pagination.value = event
+}
+
+const newLicenseValidationMessage = ref<string>('')
+const newLicenseValidationIcon = ref<string>('')
+const licenseKey = ref<string>('')
+const licenseExpires = ref<number>(-1)
+const onValidate = (licenseExpiresLocal: string): void => {
+  emits('check-validation', licenseExpiresLocal)
+}
+
+const validationErrorText = ref<string[]>([])
+watch(validationError, (newValue) => {
+  if(typeof newValue === 'number') {
+    licenseExpires.value = newValue
+    const [icon, text] = getErrorInfo(newValue, localization.value)
+    newLicenseValidationIcon.value = icon
+    newLicenseValidationMessage.value = text
+    validationErrorText.value = [text]
+    return
+  }
+
+  newLicenseValidationMessage.value = newValue
+  newLicenseValidationIcon.value = newValue ? 'error-outline' : ''
+  validationErrorText.value = [newValue]
+})
+
+const isDisabledSubmitButton = computed<boolean>(() => {
+  let result = false
+  if (selectedTab.value === 0) {
+    result = (selectedLicense.value?.timeLeft || 0) <= 0
+  } else {
+    result = !licenseKey.value || licenseExpires.value <= 0
+  }
+
+  return result
+})
+
+const selectedLicense = computed<UI_I_SystemLicense | null>(() => {
+  const item = props.systemLicenses?.items.find(
+    (license) => license.id === selectedActiveKey.value
+  )
+
+  return item || null
+})
+
+const validationBlock = computed<UI_I_ValidationBlock>(() => {
+  let caption = ''
+  let icon = ''
+  let message = ''
+
+  if (selectedTab.value === 0) {
+    caption = localization.value.common.assignmentValidationFor.replace(
+      '{0}',
+      selectedLicense.value?.license || ''
+    )
+    if (selectedLicense.value) {
+      const [iconLocal, messageLocal] = getErrorInfo(selectedLicense.value.timeLeft, localization.value)
+      icon = iconLocal
+      message = messageLocal
+    }
+  } else {
+    caption = localization.value.common.assignmentValidation
+    icon = newLicenseValidationIcon.value
+    message = newLicenseValidationMessage.value
+  }
+
+  return {
+    caption,
+    icon,
+    message,
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins.scss';
+.assign-licenses {
+  .assign-licenses-content {
+    .main-height {
+      height: 300px;
+    }
+    .validation-caption {
+      font-size: 18px;
+    }
+    .validation-message {
+      border: 1px solid var(--global-border-color);
+      flex: 1 1 auto;
+      padding: 5px;
+      overflow: auto;
+      min-height: 100px;
+      max-height: 200px;
+      .block {
+        display: flex;
+        align-items: center;
+        line-height: 1.2rem;
+
+        .text {
+          padding-left: 5px;
+        }
+      }
+    }
+  }
+  :deep(.secondary-title) {
+    font-size: 18px;
+    font-weight: 300;
+  }
+
+  :deep(.modal-footer) {
+    .btn:last-child {
+      margin-left: 5px;
+    }
+  }
+}
+</style>

package/components/common/pages/licensing/modals/assign/lib/config/tabsPannel.ts

@@ -0,0 +1,17 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+export const tabsFunc = (
+  localization: UI_I_Localization
+): UI_I_CollapseNavItem[] => {
+  return [
+    {
+      text: localization.license.existingLicense.toUpperCase(),
+      value: 0,
+    },
+    {
+      text: localization.license.newLicense.toUpperCase(),
+      value: 1,
+    },
+  ]
+}

package/components/common/pages/licensing/modals/assign/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_ValidationBlock {
+  caption: string
+  icon: string
+  message: string
+}

package/components/common/pages/licensing/modals/assign/lib/utils/error.ts

@@ -0,0 +1,25 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const getErrorInfo = (timeLeft: number, localization: UI_I_Localization): [string, string] => {
+  let result: [string, string] = [
+    'success-circle',
+    localization.license.theLicenseAssignmentIsValid,
+  ]
+  const days = Math.round(timeLeft / 60 / 60 / 24)
+  if (timeLeft < 0) {
+    result = [
+      'error-outline',
+      localization.license.invalidLicense
+    ]
+  } else if (days < 30) {
+    result = [
+      'warning-outline',
+      localization.license.theLicenseExpiresInDays.replace(
+        '{0}',
+        '' + days
+      ),
+    ]
+  }
+
+  return result
+}