bfg-common 1.4.393 → 1.4.395

package/components/common/layout/theHeader/feedback/new/New.vue

@@ -145,20 +145,10 @@ const onSubmit = (): void => {
 }
 </script>
 
-<style lang="scss">
-:root {
-  --description-color: #414b57;
-  --link-visited-color: #5659b8;
-}
-
-:root.dark-theme {
-  --description-color: #adbbc4;
-  --link-visited-color: #49afd9;
-}
-
+<style lang="scss" scoped>
 .feedback {
   &__visit-portal {
-    color: #4d5d69;
+    color: var(--feedback-text-color);
     font-size: 13px;
     font-weight: 400;
     line-height: 15.73px;
@@ -169,3 +159,13 @@ const onSubmit = (): void => {
   }
 }
 </style>
+<style lang="scss">
+:root {
+  --feedback-text-color: #4d5d69;
+  --feedback-tooltip-close-color: #213444;
+}
+:root.dark-theme {
+  --feedback-text-color: #e9eaec;
+  --feedback-tooltip-close-color: #e9eaec;
+}
+</style>

package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue

@@ -59,26 +59,29 @@ const isShowInfo = ref<boolean>(false)
     line-height: 19.36px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
     margin-right: 8px;
   }
   .common-widget-info {
     padding: 16px;
-
     .title {
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-left: 8px;
     }
 
     .common-widget-info-description {
       font-size: 13px;
       line-height: 15.73px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-top: 12px;
     }
+
+    svg {
+      color: var(--feedback-tooltip-close-color);
+    }
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/description/Description.vue

@@ -48,7 +48,7 @@ const descriptionErrorText = computed<boolean>(() => {
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
   }
   :deep(.ui-main-textarea) {
     resize: none;

package/components/common/layout/theHeader/feedback/new/email/Email.vue

@@ -37,7 +37,7 @@ const emailErrorText = computed<string>(() => {
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue

@@ -63,21 +63,24 @@ const isShowInfo = ref<boolean>(false)
   }
   .common-widget-info {
     padding: 16px;
-
     .title {
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-left: 8px;
     }
 
     .common-widget-info-description {
       font-size: 13px;
       line-height: 15.73px;
-      color: var(--zabbix-text-color);
+      color: var(--feedback-text-color);
       margin-top: 12px;
     }
+
+    svg {
+      color: var(--feedback-tooltip-close-color);
+    }
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/tabs/Tabs.vue

@@ -20,13 +20,12 @@
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
-// import type { I_Metric } from '~/components/layout/new/tabs/lib/models/interfaces'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
 import { tabsFunc } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedTab = defineModel<T_FeedbackTab>({ required: true })
+const selectedTab = defineModel<UI_T_FeedbackTab>({ required: true })
 const tabs = computed<any[]>(() =>
   tabsFunc(localization.value, selectedTab.value)
 )
@@ -40,7 +39,7 @@ const tabs = computed<any[]>(() =>
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
   }
   &__container {
     display: flex;
@@ -50,17 +49,21 @@ const tabs = computed<any[]>(() =>
   :deep(.block) {
     width: max-content;
     padding: 10px 12px;
-    color: #4d5d69;
+    color: var(--feedback-text-color);
+    background: var(--feedback-tab-bg-color);
+    border: 1px solid var(--feedback-tab-border-color);
+    box-shadow: none;
     cursor: pointer;
   }
+
   :deep(.block.selected) {
-    border: 1.5px solid #008fd6;
-    color: #008fd6;
+    border: 1.5px solid var(--feedback-tab-active-text-color);
+    color: var(--feedback-tab-active-text-color);
     cursor: default;
 
     .main-info,
     .main-info-label {
-      color: #008fd6;
+      color: var(--feedback-tab-active-text-color);
     }
   }
 
@@ -77,3 +80,16 @@ const tabs = computed<any[]>(() =>
   }
 }
 </style>
+<style lang="scss">
+:root {
+  --feedback-tab-bg-color: #ffffff;
+  --feedback-tab-border-color: #e9ebed;
+  --feedback-tab-active-text-color: #008fd6;
+}
+
+:root.dark-theme {
+  --feedback-tab-bg-color: #1b2a373d;
+  --feedback-tab-border-color: #e9ebed1f;
+  --feedback-tab-active-text-color: #2ba2de;
+}
+</style>

package/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs.ts

@@ -1,9 +1,9 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
 
 export const tabsFunc = (
   localization: UI_I_Localization,
-  selectedTab: T_FeedbackTab
+  selectedTab: UI_T_FeedbackTab
 ): any[] => {
   return [
     {

package/components/common/summary/notification/Notification.vue

@@ -0,0 +1,28 @@
+<template>
+  <common-summary-notification-new
+    v-if="isNewView"
+    :notifications="props.notifications"
+  />
+  <common-summary-notification-old
+    v-else
+    :notifications="notificationsOldView"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_AlertGroupItem } from '~/node_modules/bfg-uikit/components/ui/alertGroup/lib/models/interfaces'
+
+const props = defineProps<{
+  notifications: UI_I_AlertGroupItem[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const notificationsOldView = computed<string[]>(() =>
+  props.notifications.map((item) => item.message)
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/summary/notification/NotificationNew.vue

@@ -0,0 +1,135 @@
+<template>
+  <ui-alert-group
+    v-if="props.notifications.length"
+    :items="props.notifications"
+    hide-text="Hide"
+  >
+    <template #itemMessage="{ data }">
+      <span class="notification-item-text">{{ data.message }}</span>
+    </template>
+    <template #rightContent="{ data }">
+      <div class="dropdown-container">
+        <button
+          :id="`${data.item.testId}-actions-toggle`"
+          :data-id="`${data.item.testId}-actions-toggle`"
+          :class="[
+            'actions-toggle-button',
+            { active: actionsIsShow[data.key] },
+          ]"
+          @click="onToggleActionDropdown(data.key)"
+        >
+          {{ localization.common.actions }}
+          <span class="arrow-icon-content">
+            <ui-icon name="arrow" width="16" height="16" />
+          </span>
+        </button>
+        <ui-dropdown
+          :test-id="`${data.item.testId}-actions`"
+          :show="actionsIsShow[data.key]"
+          :items="data.item.actions"
+          :elem-id="`${data.item.testId}-actions-toggle`"
+          width="max-content"
+          @select="onSelectNotificationAction(data.key, $event)"
+          @hide="onHideActionsDropdown(data.key)"
+        />
+      </div>
+    </template>
+  </ui-alert-group>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_AlertGroupItem } from '~/node_modules/bfg-uikit/components/ui/alertGroup/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  notifications: UI_I_AlertGroupItem[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const actionsIsShow = ref<boolean[]>([])
+const resetActionsIsShow = (): void => {
+  actionsIsShow.value = []
+  props.notifications.forEach(() => {
+    actionsIsShow.value.push(false)
+  })
+}
+const onToggleActionDropdown = (key: number): void => {
+  resetActionsIsShow()
+  actionsIsShow.value[key] = !actionsIsShow.value[key]
+}
+const onHideActionsDropdown = (key: number): void => {
+  actionsIsShow.value[key] = false
+}
+const onSelectNotificationAction = (key: number, _value: string): void => {
+  onHideActionsDropdown(key)
+}
+watch(
+  () => props.notifications,
+  (newValue) => {
+    newValue.length && resetActionsIsShow()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style>
+:root {
+  --summary-notification-item-text: #4d5d69;
+  --summary-notification-action-toggle: #4d5d69;
+  --summary-notification-action-toggle-border: #e9ebed;
+  --summary-notification-action-active-toggle: #008fd6;
+}
+
+:root.dark-theme {
+  --summary-notification-item-text: #e9eaec;
+  --summary-notification-action-toggle: #e9eaec;
+  --summary-notification-action-toggle-border: rgba(233, 235, 237, 0.12);
+  --summary-notification-action-active-toggle: #2ba2de;
+}
+</style>
+
+<style scoped lang="scss">
+.notification-item-text {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--summary-notification-item-text);
+  line-height: 16.94px;
+  margin-right: 16px;
+}
+
+.dropdown-container {
+  height: inherit;
+  display: flex;
+
+  .actions-toggle-button {
+    width: 100%;
+    color: var(--summary-notification-action-toggle);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    grid-gap: 8px;
+    border: none;
+    outline: unset;
+    padding: 8px 0 8px 16px;
+    background: unset;
+    border-left: solid 1px var(--summary-notification-action-toggle-border);
+    cursor: pointer;
+    font-family: 'Inter';
+    font-size: 14px;
+
+    &.active {
+      color: var(--summary-notification-action-active-toggle);
+
+      .arrow-icon-content {
+        transform: rotateZ(0deg);
+      }
+    }
+    .arrow-icon-content {
+      display: flex;
+      transform: rotateZ(180deg);
+    }
+  }
+}
+</style>

package/components/common/summary/notification/NotificationOld.vue

@@ -0,0 +1,46 @@
+<template>
+  <atoms-alert
+    v-show="props.notifications.length"
+    test-id="summary-notification"
+    status="alert-warning"
+    :items="props.notifications"
+    hide-close-icon
+    class="notification"
+  >
+    <template #default="{ item }">
+      <div class="flex-space-between flex-1">
+        <div class="flex-align-center">
+          <span>{{ item }}</span>
+          <a href class="alert-action notification-link">{{
+            localization.common.learnMore
+          }}</a>
+        </div>
+        <div class="flex-align-center">
+          <a href class="alert-action notification-link">{{
+            localization.inventorySummary.acknowledge
+          }}</a>
+          <a href class="alert-action notification-link">{{
+            localization.common.resetGreen
+          }}</a>
+        </div>
+      </div>
+    </template>
+  </atoms-alert>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  notifications: string[]
+}>()
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.notification {
+  .notification-link {
+    margin-left: 4px;
+  }
+}
+</style>

package/components/common/vm/actions/common/_customizeHardware/CustomizeHardware.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="customize-hardware">
+    <atoms-nav-bar v-model="selectedNavItem" :items="navItems" />
+    <atoms-alert
+      v-show="errors.length"
+      status="alert-danger"
+      :items="errors"
+      test-id="customize-hardware-alert"
+      @remove="onRemoveValidationErrors"
+    />
+
+    <div v-show="selectedNavItem === 0">
+      <common-vm-actions-common-customize-hardware-virtual-hardware
+        :vm-name="vmNameLocal"
+        :storage="props.storage"
+        :max-cpus="props.maxCpus"
+        :max-memory="props.maxMemory"
+        :cpu-models="props.cpuModels"
+        :cpu="props.cpu"
+        :memory="props.memory"
+        :is-edit="props.isEdit"
+        :is-clone="props.isClone"
+        :state="props.state"
+        :hard-disks="props.hardDisks"
+        :cd-dvd-drives="props.cdDvdDrives"
+        :networks="props.networks"
+        :networks-table="props.networksTable"
+        :video-card="props.videoCard"
+        :usb-controller="props.usbController"
+        :pci-devices="props.pciDevices"
+        :nodes="props.nodes"
+        :files="props.files"
+        :error-validation-fields="props.errorValidationFields"
+        :get-datastore-table-func="props.getDatastoreTableFunc"
+        :datastore="props.datastore"
+        :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+        :passthrough-devices="props.passthroughDevices"
+        :project="props.project"
+        :guest-machine-type="guestMachineTypeLocal"
+        @send-data="onSendDataVirtualHardwareMethod"
+        @get-storage="emits('get-storage', $event)"
+        @get-folders-or-files="emits('get-folders-or-files', $event)"
+        @get-active-device-child="emits('get-active-device-child', $event)"
+        @show-datastore-child="emits('show-datastore-child', $event)"
+        @remove-error-by-title="emits('remove-error-by-title', $event)"
+        @invalid="virtualHardwareInvalid = $event"
+        @get-networks-table="emits('get-networks-table', $event)"
+        @get-pci-devices="emits('get-pci-devices')"
+      />
+    </div>
+    <div v-show="selectedNavItem === 1">
+      <common-vm-actions-common-customize-hardware-vmoptions
+        v-model:vm-name="vmNameLocal"
+        v-model:guest-machine-type="guestMachineTypeLocal"
+        v-model:guest-os-family="guestOsFamilyLocal"
+        v-model:guest-os-version="guestOsVersionLocal"
+        :hard-disks="props.hardDisksForBootOptions"
+        :cd-dvd-drives="props.cdDvdDrivesForBootOptions"
+        :networks="props.networksForBootOptions"
+        :options="props.options"
+        :is-edit="props.isEdit"
+        :is-clone="props.isClone"
+        :error-validation-fields="props.errorValidationFields"
+        :state="props.state"
+        @change-boot-order="onChangeBootOrder"
+        @send-data="onSendDataVmOptionsMethod"
+        @invalid="vmOptionsInvalid = $event"
+        @remove-error-by-title="emits('remove-error-by-title', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewPciDevice,
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+  UI_I_SendDataVideoCard,
+  UI_I_SendDataVirtualHardware,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/lib/models/interfaces'
+import type { UI_I_SendDataVmoptions } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/lib/models/interfaces'
+import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
+import type {
+  API_UI_I_VmEditCpu,
+  API_UI_I_VmEditMemory,
+  UI_I_PciDevice,
+} from '~/lib/models/store/vm/interfaces'
+import { navItemsFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
+
+const props = defineProps<{
+  vmName: string
+  errorValidationFields: UI_I_ErrorValidationField[]
+  storage: UI_I_DatastoreTableItem | null
+  guestMachineType: UI_I_OptionItem | null
+  guestOsFamily: UI_I_OptionItem | null
+  guestOsVersion: UI_I_OptionItem | null
+  cpuModels: UI_I_OptionItem[]
+  hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null
+  cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null
+  networksForBootOptions: UI_I_SendDataNewNetwork[] | null
+  customizeHardwareSubmit: null | Function
+  maxCpus: number
+  maxMemory: number
+  selectedNavItem: UI_T_SelectedNavItem
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  networksTable: UI_I_NetworkTableItem[]
+  cpu?: API_UI_I_VmEditCpu
+  memory?: API_UI_I_VmEditMemory
+  vmCpuHelpTextSecond?: string
+  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  hardDisks?: UI_I_SendDataNewHardDisk[] | null
+  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+  networks?: UI_I_SendDataNewNetwork[] | null
+  videoCard?: UI_I_SendDataVideoCard
+  pciDevices?: UI_I_SendDataNewPciDevice[]
+  usbController?: string
+  options?: UI_I_SendDataVmoptions
+  isEdit?: boolean
+  isClone?: boolean
+  state?: string | number
+  passthroughDevices?: UI_I_PciDevice[]
+  project?: UI_T_Project
+}>()
+const emits = defineEmits<{
+  (
+    event: 'change-boot-order',
+    value: [
+      UI_I_SendDataNewHardDisk[],
+      UI_I_SendDataNewCdDvdDrive[],
+      UI_I_SendDataNewNetwork[]
+    ]
+  ): void
+  (event: 'send-data', value: UI_I_SendDataCustomizeHardware): void
+  (event: 'next'): void
+  (event: 'update:vm-name', value: string): void
+  (event: 'update:guest-machine-type', value: UI_I_OptionItem | null): void
+  (event: 'update:guest-os-family', value: UI_I_OptionItem | null): void
+  (event: 'update:guest-os-version', value: UI_I_OptionItem | null): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+}>()
+
+const vmNameLocal = computed<string>({
+  get() {
+    return props.vmName
+  },
+  set(newValue) {
+    emits('update:vm-name', newValue)
+  },
+})
+const guestMachineTypeLocal = computed<UI_I_OptionItem | null>({
+  get() {
+    return props.guestMachineType
+  },
+  set(newValue) {
+    emits('update:guest-machine-type', newValue)
+  },
+})
+const guestOsFamilyLocal = computed<UI_I_OptionItem | null>({
+  get() {
+    return props.guestOsFamily
+  },
+  set(newValue) {
+    emits('update:guest-os-family', newValue)
+  },
+})
+const guestOsVersionLocal = computed<UI_I_OptionItem | null>({
+  get() {
+    return props.guestOsVersion
+  },
+  set(newValue) {
+    emits('update:guest-os-version', newValue)
+  },
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const navItems = computed<UI_I_CollapseNavItem[]>(() =>
+  navItemsFunc(localization.value)
+)
+const selectedNavItem = ref<number>(0)
+watch(
+  () => props.selectedNavItem,
+  (newValue) => {
+    selectedNavItem.value = newValue
+  }
+)
+
+const sendDataVirtualHardware = ref<UI_I_SendDataVirtualHardware | null>(null)
+const onSendDataVirtualHardwareMethod = (
+  data: UI_I_SendDataVirtualHardware
+): void => {
+  sendDataVirtualHardware.value = data
+  sendData()
+}
+const sendDataVmOptions = ref<UI_I_SendDataVmoptions | null>(null)
+const onSendDataVmOptionsMethod = (data: UI_I_SendDataVmoptions): void => {
+  sendDataVmOptions.value = data
+  sendData()
+}
+const sendData = (): void => {
+  emits('send-data', {
+    virtualHardware: sendDataVirtualHardware.value,
+    vmOptions: sendDataVmOptions.value,
+  })
+}
+
+const onChangeBootOrder = (data: UI_T_ChangeBootOrder): void => {
+  emits('change-boot-order', data)
+}
+
+watch(
+  () => props.customizeHardwareSubmit,
+  (newValue) => {
+    newValue && submit(newValue)
+  }
+)
+const virtualHardwareInvalid = ref<string[]>([])
+const vmOptionsInvalid = ref<string[]>([])
+const submit = (cb: Function): void => {
+  const invalidDevices = [
+    ...virtualHardwareInvalid.value,
+    ...vmOptionsInvalid.value,
+  ]
+    .filter((item: string) => !!item)
+    .join(', ')
+
+  if (invalidDevices) {
+    showValidationErrors([
+      localization.value.common.thereErrorsFollowingFields.replace(
+        '{0}',
+        invalidDevices
+      ),
+    ])
+    cb(false)
+    return
+  }
+  onRemoveValidationErrors()
+
+  // emits('next')
+  cb(true)
+}
+
+const errors = ref<string[]>([])
+const showValidationErrors = (arr: string[]): void => {
+  errors.value = arr
+}
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+</script>
+
+<style scoped lang="scss"></style>