bfg-common 1.4.799 → 1.4.801

package/components/common/pages/tasks/table/expandDetails/ExpandDetails.vue

@@ -18,12 +18,13 @@
         <ui-chip
           :test-id="normalizedTaskDetails[2].data.testId"
           :color="normalizedTaskDetails[2].data.chipColor"
+          size="sm"
           rounded
         >
           <ui-icon
             :name="normalizedTaskDetails[2].data.icon"
-            width="14px"
-            height="14px"
+            width="12px"
+            height="12px"
             class="chip-icon"
           ></ui-icon>
           {{ normalizedTaskDetails[2].text }}
@@ -31,8 +32,10 @@
 
         <common-pages-tasks-table-error-info
           v-if="normalizedTaskDetails[2].data.error"
-          :id="normalizedTaskDetails[2].testId"
+          :id="`${normalizedTaskDetails[2].data.testId}-expand-details`"
           :error="normalizedTaskDetails[2].data.error"
+          :opened-error="openedError"
+          @toggle-error="onToggleError"
         />
       </span>
     </div>
@@ -72,7 +75,7 @@
     </div>
 
     <div class="expand-details__row">
-      <span class="expand-details__label">
+      <span class="expand-details__label events">
         {{ localization.common.relatedEvents }}:
       </span>
       <span class="expand-details__value disabled">
@@ -99,6 +102,16 @@ const normalizedTaskDetails = computed<UI_I_DataTableBodyData[]>(() => {
   ) // Фильтр по номерам колонок
 })
 
+const openedError = ref<string>('')
+
+const onToggleError = (value: string): void => {
+  if (!value || value === openedError.value) {
+    openedError.value = ''
+  } else {
+    openedError.value = value
+  }
+}
+
 const onSelectNodeOfTree = (data: any): void => {
   if (!data.isLink) return
 
@@ -126,15 +139,22 @@ const onSelectNodeOfTree = (data: any): void => {
   line-height: 14.52px;
 }
 .expand-details {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 24px;
+  row-gap: 12px;
   &__row {
-    display: grid;
-    grid-template-columns: 110px 1fr;
-    column-gap: 12px;
-    margin-bottom: 8px;
+    display: contents;
+    height: 18px;
   }
   &__label {
     @extend %properties;
     color: #9da6ad;
+    text-transform: capitalize;
+
+    &.events {
+      height: 18px;
+    }
   }
   &__value {
     @extend %properties;
@@ -158,10 +178,6 @@ const onSelectNodeOfTree = (data: any): void => {
     @include flex($align: center);
     .ui-chip {
       width: max-content;
-      :deep(.ui-chip__label) {
-        // TODO надо удалить потом (clr style)
-        grid-gap: 4px;
-      }
     }
   }
 }

package/components/common/pages/tasks/table/lib/config/config.ts

@@ -24,8 +24,7 @@ export const getHeaderDataFunc = (
     text: localization.tasks.taskName,
     isSortable: true,
     sort: 'asc',
-    sortColumn: true,
-    width: '180px',
+    width: '248px',
     show: true,
     filter: true,
   },
@@ -73,7 +72,7 @@ export const getHeaderDataFunc = (
     col: 'col5',
     colName: 'queued_for',
     text: localization.common.queuedFor,
-    isSortable: true,
+    isSortable: false,
     sort: 'asc',
     width: '180px',
     show: true,
@@ -83,19 +82,19 @@ export const getHeaderDataFunc = (
     col: 'col6',
     colName: 'start_time',
     text: localization.common.startTime,
-    isSortable: true,
+    isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '208px',
     show: true,
     filter: true,
   },
   {
     col: 'col7',
-    colName: 'completion_time',
+    colName: 'completion',
     text: localization.common.completionTime,
     isSortable: true,
     sort: 'asc',
-    width: '180px',
+    width: '208px',
     show: true,
     filter: true,
   },
@@ -103,7 +102,7 @@ export const getHeaderDataFunc = (
     col: 'col8',
     colName: 'execution_time',
     text: localization.common.executionTime,
-    isSortable: true,
+    isSortable: false,
     sort: 'asc',
     width: '180px',
     show: true,
@@ -125,7 +124,7 @@ export const getHeaderDataFunc = (
     text: localization.common.zone,
     isSortable: true,
     sort: 'asc',
-    width: '180px',
+    width: '144px',
     show: true,
     filter: true,
   },
@@ -175,7 +174,8 @@ export const options: UI_I_DataTableOptions = {
   showColumnManager: true,
   withActions: true,
   inBlock: true,
-  showExport: true
+  showExport: true,
+  withCollapse: true
 }
 
 export const getBodyDataFunc = (
@@ -203,7 +203,7 @@ export const getBodyDataFunc = (
       icon: UI_E_RTaskStatusIcon[task.status],
       chipColor: UI_E_RTaskChipColor[task.status],
       error: task.error,
-      testId: `${task.taskName}-progress`,
+      testId: `${task.taskName}-${index}-status`,
     }
 
     const zoneNodeParams = taskConfig.zoneNodeFunc(task, nav)

package/components/common/portlets/customAttributes/Portlet.vue

@@ -455,7 +455,7 @@ const onTogglePortlet = (id: string): void => {
   --input-border: #d3d6da;
   --input-color: #4d5d69;
   --input-caret-color: #000000;
-  --input-bg: #ffffff;
+  --input-bg-common: #ffffff;
   --hide-row-icon: #4d5d69;
   --hide-row-icon-hover: #213444;
   --create-row-icon: #008fd6;
@@ -466,7 +466,7 @@ const onTogglePortlet = (id: string): void => {
   --input-border: #e9ebed3d;
   --input-color: #d3d6da;
   --input-caret-color: #ffffff;
-  --input-bg: transparent;
+  --input-bg-common: transparent;
   --hide-row-icon: #e9eaec;
   --hide-row-icon-hover: #ffffff;
   --create-row-icon: #2ba2de;
@@ -549,7 +549,7 @@ const onTogglePortlet = (id: string): void => {
 
 .table-input {
   height: 28px;
-  background-color: var(--input-bg);
+  background-color: var(--input-bg-common);
   border: 1px solid var(--input-border);
   font-size: 12px;
   font-weight: 500;
@@ -580,7 +580,7 @@ const onTogglePortlet = (id: string): void => {
 
   :deep(.ui-select-toggle-button) {
     height: 28px;
-    background-color: var(--input-bg);
+    background-color: var(--input-bg-common);
 
     &:disabled {
       background: var(--select-bg-disabled);

package/components/common/portlets/tag/TagAddNew.vue

@@ -412,7 +412,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
   --input-border: #d3d6da;
   --input-color: #4d5d69;
   --input-caret-color: #000000;
-  --input-bg: #ffffff;
+  --input-bg-common: #ffffff;
   --hide-row-icon: #4d5d69;
   --hide-row-icon-hover: #213444;
   --create-row-icon: #008fd6;
@@ -423,7 +423,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
   --input-border: #e9ebed3d;
   --input-color: #d3d6da;
   --input-caret-color: #ffffff;
-  --input-bg: transparent;
+  --input-bg-common: transparent;
   --hide-row-icon: #e9eaec;
   --hide-row-icon-hover: #ffffff;
   --create-row-icon: #2ba2de;
@@ -512,7 +512,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
 
 .table-input {
   height: 28px;
-  background-color: var(--input-bg);
+  background-color: var(--input-bg-common);
   border: 1px solid var(--input-border);
   font-size: 12px;
   font-weight: 500;
@@ -543,7 +543,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
 
   :deep(.ui-select-toggle-button) {
     height: 28px;
-    background-color: var(--input-bg);
+    background-color: var(--input-bg-common);
   }
 
   :deep(.ui-placeholder) {

package/components/common/select/radio/RadioGroup.vue

@@ -112,9 +112,9 @@ const selectedType = computed<string | number>({
 }
 .radio {
   margin-bottom: 5px;
-  &:nth-child(2) {
-    margin-top: 10px;
-  }
+  //&:nth-child(2) {
+    //margin-top: 10px; // ?
+  //}
   &.disabled {
     opacity: 0.7;
   }

package/components/common/selectLanguage/SelectLanguage.vue

@@ -1,31 +1,31 @@
 <template>
   <div :class="['language-dropdown', props.size]">
     <ui-select
-      v-model="selectedLang"
-      test-id="select-language"
-      :items="props.normalizeLang"
-      :width="props.size === 'md' ? '114px' : '97px'"
-      arrow-stroke-width="2.4"
-      :disabled="props.disabled"
-      :size="props.size"
-      max-height="inherit"
+        v-model="selectedLang"
+        test-id="select-language"
+        :items="itemsLocal"
+        :width="props.size === 'md' ? '114px' : '97px'"
+        arrow-stroke-width="2.4"
+        :disabled="props.disabled"
+        :size="props.size"
+        max-height="inherit"
     >
       <template #toggleContent>
         <span class="language-dropdown__icon content-icon"
-          ><ui-icon-icon2
+        ><ui-icon-icon2
             :name="selectedLang?.iconName"
             :height="props.size === 'md' ? '16' : '13'"
             :width="props.size === 'md' ? '24' : '19'"
-          ></ui-icon-icon2
+        ></ui-icon-icon2
         ></span>
         {{ selectedLang?.text }}
       </template>
       <template #row="{ item }">
         <span class="language-dropdown__icon dropdown-icon">
           <ui-icon-icon2
-            :name="item.iconName"
-            :height="props.size === 'md' ? '16' : '13'"
-            :width="props.size === 'md' ? '24' : '19'"
+              :name="item.iconName"
+              :height="props.size === 'md' ? '16' : '13'"
+              :width="props.size === 'md' ? '24' : '19'"
           ></ui-icon-icon2>
         </span>
         <span class="ui-item-text">{{ item.text }}</span>
@@ -39,18 +39,18 @@ import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropd
 import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
 
 const props = withDefaults(
-  defineProps<{
-    normalizeLang: UI_I_Dropdown[]
-    modelValue: UI_I_Dropdown
-    disabled?: boolean
-    width?: string
-    size?: 'sm' | 'md'
-  }>(),
-  {
-    disabled: false,
-    width: '114px',
-    size: 'md',
-  }
+    defineProps<{
+      normalizeLang: UI_I_Dropdown[]
+      modelValue: UI_I_Dropdown
+      disabled?: boolean
+      width?: string
+      size?: 'sm' | 'md'
+    }>(),
+    {
+      disabled: false,
+      width: '114px',
+      size: 'md',
+    }
 )
 
 const emits = defineEmits<{
@@ -65,6 +65,10 @@ const selectedLang = computed<UI_I_Dropdown>({
     emits('update:model-value', newValue)
   },
 })
+
+const itemsLocal = computed(() => {
+  return props.normalizeLang.filter(lang => !lang.disabled)
+})
 </script>
 
 <style lang="scss" scoped>

package/components/common/selectLanguage/lib/config/config.ts

@@ -5,6 +5,7 @@ export const locales: UI_I_Dropdown[] = [
     text: 'AR',
     value: 'ar_SA',
     iconName: 'ar-flag',
+    disabled: true
   },
   {
     text: 'RU',

package/components/common/split/horizontal/HorizontalNew.vue

@@ -47,6 +47,8 @@
 </template>
 
 <script setup lang="ts">
+import { isRtl } from 'bfg-uikit/lib/config/trl'
+
 const props = withDefaults(
   defineProps<{
     parentElementSelector: string
@@ -70,6 +72,9 @@ const emits = defineEmits<{
 
 const leftPanelStyle = computed(() => {
   let width = `calc(${leftPanelWLocal.value}% - 1.5px)`
+  if (isRtl.value) {
+    width = `calc(${100 - leftPanelWLocal.value}% - 1.5px)`
+  }
   if (props.showToggleButton && leftPanelCollapsed.value) {
     width = '20px'
   }
@@ -77,8 +82,12 @@ const leftPanelStyle = computed(() => {
 
   return { width }
 })
+
 const rightPanelStyle = computed(() => {
   let width = `calc(${100 - leftPanelWLocal.value}% - 1.5px)`
+  if (isRtl.value) {
+    width = `calc(${leftPanelWLocal.value}% - 1.5px)`
+  }
   if (props.showToggleButton && leftPanelCollapsed.value) {
     width = 'calc(100% - 20px)'
   }
@@ -195,11 +204,35 @@ onUnmounted(() => {
 </script>
 
 <style>
-:root {
+:root.is-new-view {
   --split-horizontal-border-color: #e9ebed;
+  --horizontal-panel-bg-color: #fff;
+  --trigger-bg-color: #e9ebed;
+  --trigger-color: #213444;
+  --new-gutter-bg-color: #e9ebed;
+  --new-gutter-hover-bg-color: #008fd6;
+  --new-gutter-before-bg-color: rgba(255, 255, 255, 0.8);
+
+  /*rtl*/
+  --horizontal-split-button-border-radius: 4px 0 0 4px;
+  --horizontal-split-button-border-radius-collapsed: 0 4px 4px 0;
+  --horizontal-split-button-rotate: 90deg;
+  --horizontal-split-button-rotate-collapsed: -90deg;
 }
 :root.dark-theme {
   --split-horizontal-border-color: #e9ebed1f;
+  --horizontal-panel-bg-color: #213444;
+  --trigger-bg-color: #314352;
+  --trigger-color: #e9ebed;
+  --new-gutter-bg-color: #394a58;
+  --new-gutter-hover-bg-color: #2ba2de;
+  --new-gutter-before-bg-color: rgba(33, 52, 68, 0.8);
+}
+:root.is-new-view[dir='rtl'] {
+  --horizontal-split-button-border-radius: 0 4px 4px 0;
+  --horizontal-split-button-border-radius-collapsed: 4px 0 0 4px;
+  --horizontal-split-button-rotate: -90deg;
+  --horizontal-split-button-rotate-collapsed: 90deg;
 }
 </style>
 
@@ -236,10 +269,14 @@ onUnmounted(() => {
           border: none;
 
           .btn-trigger {
-            border-radius: 0 4px 4px 0;
+            border-radius: var(
+              --horizontal-split-button-border-radius-collapsed
+            );
 
             :deep(svg) {
-              transform: rotate(-90deg);
+              transform: rotate(
+                var(--horizontal-split-button-rotate-collapsed)
+              );
             }
           }
         }
@@ -256,10 +293,10 @@ onUnmounted(() => {
           color: var(--trigger-color);
           outline: none;
           cursor: pointer;
-          border-radius: 4px 0 0 4px;
+          border-radius: var(--horizontal-split-button-border-radius);
 
           :deep(svg) {
-            transform: rotate(90deg);
+            transform: rotate(var(--horizontal-split-button-rotate));
           }
         }
       }
@@ -337,22 +374,3 @@ onUnmounted(() => {
   }
 }
 </style>
-
-<style>
-:root.is-new-view {
-  --horizontal-panel-bg-color: #fff;
-  --trigger-bg-color: #e9ebed;
-  --trigger-color: #213444;
-  --new-gutter-bg-color: #e9ebed;
-  --new-gutter-hover-bg-color: #008fd6;
-  --new-gutter-before-bg-color: rgba(255, 255, 255, 0.8);
-}
-:root.is-new-view.dark-theme {
-  --horizontal-panel-bg-color: #213444;
-  --trigger-bg-color: #314352;
-  --trigger-color: #e9ebed;
-  --new-gutter-bg-color: #394a58;
-  --new-gutter-hover-bg-color: #2ba2de;
-  --new-gutter-before-bg-color: rgba(33, 52, 68, 0.8);
-}
-</style>

package/components/common/split/horizontal/HorizontalOld.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script setup lang="ts">
+import { isRtl } from 'bfg-uikit/lib/config/trl'
+
 const props = withDefaults(
   defineProps<{
     parentElementSelector: string
@@ -66,6 +68,9 @@ const emits = defineEmits<{
 
 const leftPanelStyle = computed(() => {
   let width = `calc(${leftPanelW.value}% - 1.5px)`
+  if (isRtl.value) {
+    width = `calc(${100 - leftPanelW.value}% - 1.5px)`
+  }
   if (props.showToggleButton && leftPanelCollapsed.value) {
     width = '20px'
   }
@@ -75,6 +80,9 @@ const leftPanelStyle = computed(() => {
 })
 const rightPanelStyle = computed(() => {
   let width = `calc(${100 - leftPanelW.value}% - 1.5px)`
+  if (isRtl.value) {
+    width = `calc(${leftPanelW.value}% - 1.5px)`
+  }
   if (props.showToggleButton && leftPanelCollapsed.value) {
     width = 'calc(100% - 20px)'
   }
@@ -176,6 +184,32 @@ onUnmounted(() => {
 })
 </script>
 
+<style>
+:root:not(.is-new-view) {
+  --horizontal-panel-bg-color: #fff;
+}
+:root:not(.is-new-view).dark-theme {
+  --horizontal-panel-bg-color: #1b2a32;
+}
+
+:root {
+  --horizontal-split-button-border-right: 1px solid var(--global-border-color);
+  --horizontal-split-button-border-left: none;
+  --horizontal-split-button-icon-margin-left: auto;
+  --horizontal-split-button-icon-margin-right: 0;
+  --horizontal-split-button-icon-rotate: -90deg;
+  --horizontal-split-button-icon-rotate-collapsed: 90deg;
+}
+:root[dir='rtl'] {
+  --horizontal-split-button-border-right: none;
+  --horizontal-split-button-border-left: 1px solid var(--global-border-color);
+  --horizontal-split-button-icon-margin-left: 0;
+  --horizontal-split-button-icon-margin-right: auto;
+  --horizontal-split-button-icon-rotate: 90deg;
+  --horizontal-split-button-icon-rotate-collapsed: -90deg;
+}
+</style>
+
 <style scoped lang="scss">
 @import '@/assets/scss/common/mixins';
 .horizontal {
@@ -196,11 +230,14 @@ onUnmounted(() => {
         border-bottom: 1px solid var(--global-border-color);
 
         &.collapsed {
-          border-right: 1px solid var(--global-border-color);
+          border-right: var(--horizontal-split-button-border-right);
+          border-left: var(--horizontal-split-button-border-left);
 
           .btn-trigger {
             .trigger-icon {
-              transform: rotate(90deg);
+              transform: rotate(
+                var(--horizontal-split-button-icon-rotate-collapsed)
+              );
             }
           }
         }
@@ -212,6 +249,7 @@ onUnmounted(() => {
           flex: 0 0 36px;
           border: 0;
           padding: 0;
+          margin-right: 0;
           background-color: transparent;
           outline: none;
           cursor: pointer;
@@ -219,8 +257,9 @@ onUnmounted(() => {
           .trigger-icon {
             width: 16px;
             height: 16px;
-            transform: rotate(-90deg);
-            margin-left: auto;
+            transform: rotate(var(--horizontal-split-button-icon-rotate));
+            margin-left: var(--horizontal-split-button-icon-margin-left);
+            margin-right: var(--horizontal-split-button-icon-margin-right);
             fill: var(--triger-icon-color);
           }
         }
@@ -296,12 +335,3 @@ onUnmounted(() => {
   }
 }
 </style>
-
-<style>
-:root:not(.is-new-view) {
-  --horizontal-panel-bg-color: #fff;
-}
-:root:not(.is-new-view).dark-theme {
-  --horizontal-panel-bg-color: #1b2a32;
-}
-</style>

package/components/common/vm/actions/add/Add.vue

@@ -94,6 +94,7 @@
             :datastore="props.datastore"
             :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
             :passthrough-devices="props.passthroughDevices"
+            :mediated-devices="props.mediatedDevices"
             @change-boot-order="onChangeBootOrder"
             @send-data="onChangeCustomizeHardware"
             @get-storage="emits('get-storage', $event)"
@@ -174,7 +175,10 @@ import type {
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
-import type { UI_I_PciDevice } from '~/lib/models/store/vm/interfaces'
+import type {
+  UI_I_MediatedDevice,
+  UI_I_PciDevice,
+} from '~/lib/models/store/vm/interfaces'
 import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
 import {
   stepsSchemeInitial,
@@ -199,6 +203,7 @@ const props = defineProps<{
     [UI_T_SelectedNavItem, null | number] | null
   >
   passthroughDevices: UI_I_PciDevice[]
+  mediatedDevices: UI_I_MediatedDevice[]
   vmNameInWizard: string
   capabilities?: UI_I_Capabilities
   dataCenter?: UI_I_TreeNode // для сферы

package/components/common/vm/actions/clone/Clone.vue

@@ -71,6 +71,7 @@
             :error-validation-fields="props.errorValidationFields"
             :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
             :passthrough-devices="props.passthroughDevices"
+            :mediated-devices="props.mediatedDevices"
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :datastore="props.datastore"
             :project="props.project"
@@ -115,10 +116,13 @@ import type {
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
 import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
 import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
-import type { UI_I_ConfigurePciDevicesTable } from '~/lib/models/store/host/interfaces'
 import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
 import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_VmSettings } from '~/lib/models/store/vm/interfaces'
+import type {
+  UI_I_MediatedDevice,
+  UI_I_PciDevice,
+  UI_I_VmSettings,
+} from '~/lib/models/store/vm/interfaces'
 import type {
   I_DynamicSteps,
   UI_I_VmForm,
@@ -151,7 +155,8 @@ const props = defineProps<{
   finishFunc: any
   getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
   validateSendDataFunc: any
-  passthroughDevices: UI_I_ConfigurePciDevicesTable | null
+  passthroughDevices: UI_I_PciDevice[]
+  mediatedDevices: UI_I_MediatedDevice[]
   vmNameInWizard: string
   capabilities?: UI_I_Capabilities
   schedulerTask?: any // TODO  надо interface переместить глобално

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

@@ -35,6 +35,7 @@
     :is-clone="props.isClone"
     :state="props.state"
     :passthrough-devices="props.passthroughDevices"
+    :mediated-devices="props.mediatedDevices"
     :project="props.project"
     :nav-items="navItems"
     :errors="errors"
@@ -88,6 +89,7 @@
     :is-clone="props.isClone"
     :state="props.state"
     :passthrough-devices="props.passthroughDevices"
+    :mediated-devices="props.mediatedDevices"
     :project="props.project"
     :nav-items="navItems"
     :errors="errors"
@@ -132,6 +134,7 @@ import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/mo
 import type {
   API_UI_I_VmEditCpu,
   API_UI_I_VmEditMemory,
+  UI_I_MediatedDevice,
   UI_I_PciDevice,
 } from '~/lib/models/store/vm/interfaces'
 import { navItemsFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
@@ -173,6 +176,7 @@ const props = defineProps<{
   isClone?: boolean
   state?: string | number
   passthroughDevices?: UI_I_PciDevice[]
+  mediatedDevices?: UI_I_MediatedDevice[]
   project?: UI_T_Project
 }>()
 const emits = defineEmits<{