bfg-common 1.5.375 → 1.5.377

package/assets/localization/local_be.json

@@ -3422,6 +3422,20 @@
     "configurationParameters": "Параметры канфігурацыі",
     "reservedFailoverCpuCapacity": "Зарэзерваваная ёмістасць CPU для аварыйнага пераключэння:",
     "reservedFailoverMemoryCapacity": "Зарэзерваваная ёмістасць памяці для аварыйнага пераключэння:",
-    "failoverCapacityDefinedReserving": "Ёмістасць аварыйнага пераключэння вызначаецца шляхам рэзервавання працэнта рэсурсаў кластара."
+    "failoverCapacityDefinedReserving": "Ёмістасць аварыйнага пераключэння вызначаецца шляхам рэзервавання працэнта рэсурсаў кластара.",
+    "datastoreForHeartBeating": "Сховішча даных для сардэчнага біцця",
+    "cpuSlotSize": "Памер слота працэсара",
+    "memorySlotSize": "Памер слота памяці",
+    "vmsRequiringMultipleSlots": "Віртуальныя машыны, якія патрабуюць некалькі слотаў",
+    "reservePersistentMemoryFailoverCapacity": "Рэзерваваць магутнасць для аварыйнага пераключэння пастаяннай памяці",
+    "reservePersistentMemoryFailoverCapacityTooltip": "Пэўная колькасць магутнасці пастаяннай памяці ў кластары будзе выдзелена для аварыйнага пераключэння, нават калі віртуальныя машыны ў кластары зараз не выкарыстоўваюць пастаянную памяць.",
+    "performanceDegradationVmsTolerate": "Дапушчальная дэградацыя прадукцыйнасці ВМ",
+    "performanceDegradationVmsTolerateDescription": "Працэнт зніжэння прадукцыйнасці, які віртуальныя машыны ў кластары могуць дапусціць падчас збою. 0% — выдаецца папярэджанне, калі няма дастатковай рэзервовай ёмістасці для забеспячэння той жа прадукцыйнасці пасля перазапуску ВМ. 100% — папярэджанне адключана.",
+    "overrideCalculatedFailoverCapacity": "Перавызначыць разлічаную рэзервовую ёмістасць.",
+    "overrideCalculatedPersistentMemoryCapacity": "Перавызначыць разлічаную рэзервовую ёмістасць пастаяннай памяці",
+    "reserve": "Рэзерваваць",
+    "persistentMemoryCapacity": "ёмістасці пастаяннай памяці",
+    "enabledProactiveHaOnCluster": "Каб уключыць Proactive HA, неабходна таксама ўключыць {0} у кластары.",
+    "drs": "DRS"
   }
 }

package/assets/localization/local_en.json

@@ -3426,6 +3426,20 @@
     "configurationParameters": "Configuration Parameters",
     "reservedFailoverCpuCapacity": "Reserved failover CPU capacity:",
     "reservedFailoverMemoryCapacity": "Reserved failover Memory capacity:",
-    "failoverCapacityDefinedReserving": "Failover capacity is defined by reserving a percentage of the cluster resources."
+    "failoverCapacityDefinedReserving": "Failover capacity is defined by reserving a percentage of the cluster resources.",
+    "datastoreForHeartBeating": "Datastore for Heartbeating",
+    "cpuSlotSize": "CPU slot size",
+    "memorySlotSize": "Memory slot size",
+    "vmsRequiringMultipleSlots": "VMs requiring multiple slots",
+    "reservePersistentMemoryFailoverCapacity": "Reserve Persistent Memory failover capacity",
+    "reservePersistentMemoryFailoverCapacityTooltip": "Some amount of persistent memory capacity in the cluster would be dedicated for failover purpose even if the virtual machines in the cluster are not using persistent memory currently.",
+    "performanceDegradationVmsTolerate": "Performance degradation VMs tolerate",
+    "performanceDegradationVmsTolerateDescription": "Percentage of performance degradation the VMs in the cluster are allowed to tolerate during a failure. 0% - Raises a warning if there is insufficient failover capacity to guarantee the same performance after VMs restart. 100% - Warning is disabled.",
+    "overrideCalculatedFailoverCapacity": "Override calculated failover capacity.",
+    "overrideCalculatedPersistentMemoryCapacity": "Override calculated Persistent Memory failover capacity",
+    "reserve": "Reserve",
+    "persistentMemoryCapacity": "of Persistent Memory capacity",
+    "enabledProactiveHaOnCluster": "To enable Proactive HA you must also enable {0} on the cluster.",
+    "drs": "DRS"
   }
 }

package/assets/localization/local_hy.json

@@ -3426,6 +3426,20 @@
     "configurationParameters": "Կոնֆիգուրացիայի պարամետրեր",
     "reservedFailoverCpuCapacity": "Ավարիայի դեպքում CPU-ի պահպանված հզորություն՝",
     "reservedFailoverMemoryCapacity": "Ավարիայի դեպքում հիշողության պահպանված հզորություն՝",
-    "failoverCapacityDefinedReserving": "Ավարիայի հզորությունը սահմանվում է՝ պահուստավորելով կլաստերի ռեսուրսների տոկոսը։"
+    "failoverCapacityDefinedReserving": "Ավարիայի հզորությունը սահմանվում է՝ պահուստավորելով կլաստերի ռեսուրսների տոկոսը։",
+    "datastoreForHeartBeating": "Տվյալների պահեստ սրտի բաբախի համար",
+    "cpuSlotSize": "Պրոցեսորի բնիկի չափը",
+    "memorySlotSize": "Հիշողության բնիկի չափը",
+    "vmsRequiringMultipleSlots": "Բազմաբնիկ պահանջող վիրտուալ մեքենաներ",
+    "reservePersistentMemoryFailoverCapacity": "Պահուստավորել մշտական հիշողության վթարային հզորությունը",
+    "reservePersistentMemoryFailoverCapacityTooltip": "Կլաստերում որոշ մշտական հիշողության հզորություն կտրամադրվի վթարային աշխատանքի համար, նույնիսկ եթե վիրտուալ մեքենաները ներկայումս չեն օգտագործում մշտական հիշողություն։",
+    "performanceDegradationVmsTolerate": "ՎՄ-ի թույլատրելի արտադրողականության նվազում",
+    "performanceDegradationVmsTolerateDescription": "Արտադրողականության նվազման տոկոսը, որը կլաստերի վիրտուալ մեքենաները կարող են հանդուրժել խափանման ժամանակ։ 0% — զգուշացում, եթե չկա բավարար պահուստային հզորություն նույն արտադրողականությունը ապահովելու համար ՎՄ վերագործարկումից հետո։ 100% — զգուշացումը անջատված է։",
+    "overrideCalculatedFailoverCapacity": "Վերագրանցել հաշվարկված պահուստային հզորությունը։",
+    "overrideCalculatedPersistentMemoryCapacity": "Վերագրանցել հաշվարկված մշտական հիշողության պահուստային հզորությունը",
+    "reserve": "Պահուստավորել",
+    "persistentMemoryCapacity": "մշտական հիշողության հզորությունից",
+    "enabledProactiveHaOnCluster": "Proactive HA միացնելու համար պետք է նաև միացնել {0} կլաստերում։",
+    "drs": "DRS"
   }
 }

package/assets/localization/local_kk.json

@@ -3425,6 +3425,20 @@
     "configurationParameters": "Конфигурация параметрлері",
     "reservedFailoverCpuCapacity": "Апаттық ауысу үшін сақталған CPU қуаты:",
     "reservedFailoverMemoryCapacity": "Апаттық ауысу үшін сақталған жад сыйымдылығы:",
-    "failoverCapacityDefinedReserving": "Апаттық қуат кластер ресурстарының пайызын резервтеу арқылы анықталады."
+    "failoverCapacityDefinedReserving": "Апаттық қуат кластер ресурстарының пайызын резервтеу арқылы анықталады.",
+    "datastoreForHeartBeating": "Жүрек соғысын бақылау үшін деректер қоймасы",
+    "cpuSlotSize": "Процессор ұясының өлшемі",
+    "memorySlotSize": "Жады ұясының өлшемі",
+    "vmsRequiringMultipleSlots": "Бірнеше ұя қажет ететін виртуалды машиналар",
+    "reservePersistentMemoryFailoverCapacity": "Тұрақты жадтың апаттық ауысу сыйымдылығын сақтау",
+    "reservePersistentMemoryFailoverCapacityTooltip": "Кластердегі белгілі бір тұрақты жад сыйымдылығы апаттық ауысу үшін бөлінеді, тіпті виртуалды машиналар қазір тұрақты жадты пайдаланбайтын болса да.",
+    "performanceDegradationVmsTolerate": "ВМ үшін рұқсат етілген өнімділіктің төмендеуі",
+    "performanceDegradationVmsTolerateDescription": "Ақау кезінде кластердегі виртуалды машиналарға рұқсат етілетін өнімділіктің төмендеу пайызы. 0% — ВМ қайта іске қосылғаннан кейін сол өнімділікті қамтамасыз ету үшін жеткілікті резервтік сыйымдылық болмаған жағдайда ескерту шығарылады. 100% — ескерту өшіріледі.",
+    "overrideCalculatedFailoverCapacity": "Есептелген резервтік сыйымдылықты қайта анықтау.",
+    "overrideCalculatedPersistentMemoryCapacity": "Есептелген тұрақты жадтың резервтік сыйымдылығын қайта анықтау",
+    "reserve": "Резервтеу",
+    "persistentMemoryCapacity": "тұрақты жад сыйымдылығының",
+    "enabledProactiveHaOnCluster": "Proactive HA қосу үшін кластерде {0} да қосу керек.",
+    "drs": "DRS"
   }
 }

package/assets/localization/local_ru.json

@@ -3425,6 +3425,20 @@
     "configurationParameters": "Параметры конфигурации",
     "reservedFailoverCpuCapacity": "Зарезервированная емкость CPU для аварийного переключения:",
     "reservedFailoverMemoryCapacity": "Зарезервированная емкость памяти для аварийного переключения:",
-    "failoverCapacityDefinedReserving": "Емкость аварийного переключения определяется резервированием процента ресурсов кластера."
+    "failoverCapacityDefinedReserving": "Емкость аварийного переключения определяется резервированием процента ресурсов кластера.",
+    "datastoreForHeartBeating": "Хранилище данных для Heartbeating",
+    "cpuSlotSize": "Размер слота процессора",
+    "memorySlotSize": "Размер слота памяти",
+    "vmsRequiringMultipleSlots": "Виртуальные машины, требующие несколько слотов",
+    "reservePersistentMemoryFailoverCapacity": "Резервировать мощность для аварийного переключения постоянной памяти",
+    "reservePersistentMemoryFailoverCapacityTooltip": "Часть мощности постоянной памяти в кластере будет выделена для аварийного переключения, даже если виртуальные машины в кластере в данный момент не используют постоянную память.",
+    "performanceDegradationVmsTolerate": "Допустимая деградация производительности ВМ",
+    "performanceDegradationVmsTolerateDescription": "Процент снижения производительности, который ВМ в кластере могут допустить во время сбоя. 0% — предупреждение, если недостаточно резервной емкости для гарантии той же производительности после перезапуска ВМ. 100% — предупреждение отключено.",
+    "overrideCalculatedFailoverCapacity": "Переопределить рассчитанную резервную емкость.",
+    "overrideCalculatedPersistentMemoryCapacity": "Переопределить рассчитанную резервную емкость постоянной памяти",
+    "reserve": "Резервировать",
+    "persistentMemoryCapacity": "емкости постоянной памяти",
+    "enabledProactiveHaOnCluster": "Чтобы включить Proactive HA, необходимо также включить {0} в кластере.",
+    "drs": "DRS"
   }
 }

package/assets/localization/local_zh.json

@@ -3423,6 +3423,20 @@
     "configurationParameters": "配置参数",
     "reservedFailoverCpuCapacity": "为故障切换保留的 CPU 容量：",
     "reservedFailoverMemoryCapacity": "为故障切换保留的内存容量：",
-    "failoverCapacityDefinedReserving": "故障切换容量通过保留集群资源的百分比来定义。"
+    "failoverCapacityDefinedReserving": "故障切换容量通过保留集群资源的百分比来定义。",
+    "datastoreForHeartBeating": "用于心跳的存储库",
+    "cpuSlotSize": "CPU 插槽大小",
+    "memorySlotSize": "内存插槽大小",
+    "vmsRequiringMultipleSlots": "需要多个插槽的虚拟机",
+    "reservePersistentMemoryFailoverCapacity": "预留持久内存故障切换容量",
+    "reservePersistentMemoryFailoverCapacityTooltip": "即使集群中的虚拟机当前未使用持久内存，也会为故障切换预留一定的持久内存容量。",
+    "performanceDegradationVmsTolerate": "虚拟机可容忍的性能下降",
+    "performanceDegradationVmsTolerateDescription": "集群中虚拟机在故障期间允许的性能下降百分比。0% — 如果没有足够的故障转移容量来确保虚拟机重启后保持相同性能，则会发出警告。100% — 警告已禁用。",
+    "overrideCalculatedFailoverCapacity": "覆盖计算的故障转移容量。",
+    "overrideCalculatedPersistentMemoryCapacity": "覆盖计算的持久内存故障转移容量",
+    "reserve": "保留",
+    "persistentMemoryCapacity": "持久内存容量",
+    "enabledProactiveHaOnCluster": "要启用 Proactive HA，还必须在集群中启用 {0}。",
+    "drs": "DRS"
   }
 }

package/components/atoms/TheIcon3.vue

@@ -1,50 +1,50 @@
-<template>
-  <template v-if="props.name === 'zabbix'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="80"
-      height="22"
-      viewBox="0 0 80 22"
-      fill="none"
-    >
-      <g clip-path="url(#clip0_2691_29714)">
-        <path d="M0 0.522461H80V21.477H0V0.522461Z" fill="#D40000" />
-        <path
-          d="M3.42089 3.71582H14.9889V5.2187L5.6782 16.625H15.2164V18.2836H3.19336V16.7807L12.504 5.37438H3.42089V3.71582ZM23.0402 5.65779L20.3378 12.9087H25.7526L23.0402 5.65779ZM21.9145 3.71582H24.1738L29.7862 18.2836H27.7145L26.3753 14.5473H19.735L18.3938 18.2836H16.2922L21.9145 3.71582ZM33.9176 11.326V16.663H37.113C38.1848 16.663 38.9791 16.4434 39.496 16.0043C40.013 15.5652 40.2704 14.8926 40.2704 13.9905C40.2704 13.0804 40.013 12.4078 39.496 11.9747C38.9791 11.5436 38.1848 11.326 37.113 11.326H33.9176ZM33.9176 5.33446V9.72535H36.8675C37.8415 9.72535 38.566 9.54373 39.043 9.18447C39.52 8.82322 39.7575 8.27237 39.7575 7.5319C39.7575 6.79743 39.518 6.24657 39.043 5.88332C38.566 5.52008 37.8415 5.33646 36.8675 5.33646H33.9176V5.33446ZM31.9257 3.71582H37.0152C38.534 3.71582 39.7056 4.02717 40.5259 4.65188C41.3482 5.27658 41.7573 6.16474 41.7573 7.31635C41.7573 8.2065 41.5478 8.91703 41.1266 9.44393C40.7055 9.97084 40.0868 10.3002 39.2725 10.4299C40.2525 10.6375 41.0129 11.0706 41.5558 11.7312C42.0986 12.3918 42.3701 13.2161 42.3701 14.2041C42.3701 15.5054 41.923 16.5093 41.0289 17.2198C40.1347 17.9283 38.8614 18.2836 37.2128 18.2836H31.9257V3.71582ZM47.5573 11.326V16.663H50.7547C51.8265 16.663 52.6208 16.4434 53.1357 16.0043C53.6527 15.5652 53.9101 14.8926 53.9101 13.9905C53.9101 13.0804 53.6527 12.4078 53.1357 11.9747C52.6188 11.5436 51.8245 11.326 50.7547 11.326H47.5573ZM47.5573 5.33446V9.72535H50.5072C51.4812 9.72535 52.2057 9.54373 52.6827 9.18447C53.1597 8.82322 53.3972 8.27237 53.3972 7.5319C53.3972 6.79743 53.1597 6.24657 52.6827 5.88332C52.2057 5.52008 51.4812 5.33646 50.5072 5.33646H47.5573V5.33446ZM45.5654 3.71582H50.6549C52.1737 3.71582 53.3453 4.02717 54.1656 4.65188C54.9879 5.27658 55.399 6.16474 55.399 7.31635C55.399 8.2065 55.1895 8.91703 54.7683 9.44393C54.3472 9.97084 53.7285 10.3002 52.9142 10.4299C53.8942 10.6375 54.6546 11.0706 55.1975 11.7312C55.7403 12.3918 56.0118 13.2161 56.0118 14.2041C56.0118 15.5054 55.5647 16.5093 54.6706 17.2198C53.7764 17.9283 52.503 18.2836 50.8545 18.2836H45.5654V3.71582ZM64.9732 3.71582H67.1646L70.6274 8.94697L74.1242 3.71582H76.2418L71.6833 10.5397L76.8086 18.2836H74.6172L70.5835 12.1882L66.51 18.2836H64.3924L69.5297 10.5955L64.9732 3.71582ZM59.2031 3.71582H61.195V18.2836H59.2031V3.71582Z"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2691_29714">
-          <rect
-            width="80"
-            height="20.96"
-            fill="white"
-            transform="translate(0 0.519531)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  </template>
-  <template v-else><span></span></template>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    name: string
-    type?: string
-    color?: string
-    width?: string
-    height?: string
-  }>(),
-  {
-    type: '',
-    color: 'currentColor',
-    width: '24',
-    height: '24',
-  }
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <template v-if="props.name === 'zabbix'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="80"
+      height="22"
+      viewBox="0 0 80 22"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_2691_29714)">
+        <path d="M0 0.522461H80V21.477H0V0.522461Z" fill="#D40000" />
+        <path
+          d="M3.42089 3.71582H14.9889V5.2187L5.6782 16.625H15.2164V18.2836H3.19336V16.7807L12.504 5.37438H3.42089V3.71582ZM23.0402 5.65779L20.3378 12.9087H25.7526L23.0402 5.65779ZM21.9145 3.71582H24.1738L29.7862 18.2836H27.7145L26.3753 14.5473H19.735L18.3938 18.2836H16.2922L21.9145 3.71582ZM33.9176 11.326V16.663H37.113C38.1848 16.663 38.9791 16.4434 39.496 16.0043C40.013 15.5652 40.2704 14.8926 40.2704 13.9905C40.2704 13.0804 40.013 12.4078 39.496 11.9747C38.9791 11.5436 38.1848 11.326 37.113 11.326H33.9176ZM33.9176 5.33446V9.72535H36.8675C37.8415 9.72535 38.566 9.54373 39.043 9.18447C39.52 8.82322 39.7575 8.27237 39.7575 7.5319C39.7575 6.79743 39.518 6.24657 39.043 5.88332C38.566 5.52008 37.8415 5.33646 36.8675 5.33646H33.9176V5.33446ZM31.9257 3.71582H37.0152C38.534 3.71582 39.7056 4.02717 40.5259 4.65188C41.3482 5.27658 41.7573 6.16474 41.7573 7.31635C41.7573 8.2065 41.5478 8.91703 41.1266 9.44393C40.7055 9.97084 40.0868 10.3002 39.2725 10.4299C40.2525 10.6375 41.0129 11.0706 41.5558 11.7312C42.0986 12.3918 42.3701 13.2161 42.3701 14.2041C42.3701 15.5054 41.923 16.5093 41.0289 17.2198C40.1347 17.9283 38.8614 18.2836 37.2128 18.2836H31.9257V3.71582ZM47.5573 11.326V16.663H50.7547C51.8265 16.663 52.6208 16.4434 53.1357 16.0043C53.6527 15.5652 53.9101 14.8926 53.9101 13.9905C53.9101 13.0804 53.6527 12.4078 53.1357 11.9747C52.6188 11.5436 51.8245 11.326 50.7547 11.326H47.5573ZM47.5573 5.33446V9.72535H50.5072C51.4812 9.72535 52.2057 9.54373 52.6827 9.18447C53.1597 8.82322 53.3972 8.27237 53.3972 7.5319C53.3972 6.79743 53.1597 6.24657 52.6827 5.88332C52.2057 5.52008 51.4812 5.33646 50.5072 5.33646H47.5573V5.33446ZM45.5654 3.71582H50.6549C52.1737 3.71582 53.3453 4.02717 54.1656 4.65188C54.9879 5.27658 55.399 6.16474 55.399 7.31635C55.399 8.2065 55.1895 8.91703 54.7683 9.44393C54.3472 9.97084 53.7285 10.3002 52.9142 10.4299C53.8942 10.6375 54.6546 11.0706 55.1975 11.7312C55.7403 12.3918 56.0118 13.2161 56.0118 14.2041C56.0118 15.5054 55.5647 16.5093 54.6706 17.2198C53.7764 17.9283 52.503 18.2836 50.8545 18.2836H45.5654V3.71582ZM64.9732 3.71582H67.1646L70.6274 8.94697L74.1242 3.71582H76.2418L71.6833 10.5397L76.8086 18.2836H74.6172L70.5835 12.1882L66.51 18.2836H64.3924L69.5297 10.5955L64.9732 3.71582ZM59.2031 3.71582H61.195V18.2836H59.2031V3.71582Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2691_29714">
+          <rect
+            width="80"
+            height="20.96"
+            fill="white"
+            transform="translate(0 0.519531)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  </template>
+  <template v-else><span></span></template>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    name: string
+    type?: string
+    color?: string
+    width?: string
+    height?: string
+  }>(),
+  {
+    type: '',
+    color: 'currentColor',
+    width: '24',
+    height: '24',
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/atoms/collapse/CollapseNav.vue

@@ -1,170 +1,170 @@
-<template>
-  <div class="tabs-overflow bottom-right">
-    <button
-      :id="collapsedBtnId"
-      :class="[
-        'btn btn-link nav-link dropdown-toggle',
-        { active: collapsedBtnActive },
-      ]"
-      :data-id="`${props.testId}-toggle-button`"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-      @mousedown="showMenu"
-    >
-      <atoms-the-icon
-        :class="['collapse-icon', { active: open }]"
-        name="ellipsis-horizontal"
-        width="16px"
-        height="16px"
-      />
-    </button>
-
-    <Teleport to="body">
-      <ul
-        v-show="open"
-        :class="['navbar-dropdown-menu', props.popupClass]"
-        :style="dropdownMenuStyles"
-      >
-        <li
-          v-for="(item, key) in props.items"
-          :key="key"
-          v-permission="item.permission"
-          :title="item.title"
-          class="navbar-dropdown-menu-item"
-          @mousedown.stop
-        >
-          <div
-            v-if="item.separate"
-            class="navbar-dropdown-menu-separator"
-          ></div>
-          <atoms-collapse-nav-item
-            v-else
-            :is-link="props.isLink"
-            :item="item"
-            :value="value"
-            btn-class="btn"
-            @change="change"
-            @select-file="onSelectFile($event, key)"
-          />
-        </li>
-      </ul>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_CollapseNavItem[]
-    isLink?: boolean
-    value?: number | string
-    popupClass?: string
-    closeAfterClick?: boolean
-    testId?: string
-  }>(),
-  {
-    isLink: undefined,
-    value: undefined,
-    popupClass: undefined,
-    closeAfterClick: undefined,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-  (event: 'select-file', value1: Event, value2: string, value3: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('change', value)
-  props.closeAfterClick && (open.value = false)
-}
-const onSelectFile = (event: Event, type: string, key: number): void => {
-  emits('select-file', event, type, key)
-}
-
-const collapsedBtnId = ref<string>('')
-
-const route = useRoute()
-const collapsedBtnActive = computed<boolean>(() => {
-  if (props.isLink)
-    return props.items.some((item) => route.path.includes(item.path || ''))
-
-  return props.items.some((item) => item.value === props.value)
-})
-
-const open = ref<boolean>(false)
-const hover = ref<boolean>(false)
-const dropdownMenuStyles = ref<any>({})
-const showMenu = (): void => {
-  if (open.value) {
-    hideMenu(true)
-    return
-  }
-
-  open.value = true
-
-  const btn = document.querySelector(`#${collapsedBtnId.value}`)
-  const { top, height, right } = btn!.getBoundingClientRect()
-  dropdownMenuStyles.value = {
-    top: `${top + height}px`,
-    left: `${right}px`,
-  }
-}
-const hideMenu = (force?: boolean): void => {
-  if (hover.value && !force) return
-
-  open.value = false
-}
-
-const windowClick = (): void => {
-  hideMenu()
-}
-const windowResize = (): void => {
-  hideMenu(true)
-}
-onMounted(() => {
-  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
-  window.addEventListener('mousedown', windowClick)
-  window.addEventListener('resize', windowResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('mousedown', windowClick)
-  window.removeEventListener('resize', windowResize)
-})
-</script>
-
-<style scoped lang="scss">
-.tabs-overflow {
-  position: absolute;
-  top: 0;
-  right: 24px;
-
-  .dropdown-toggle {
-    .collapse-icon {
-      fill: var(--main-color-mode);
-
-      &.active {
-        fill: #0077b8;
-      }
-    }
-  }
-}
-
-.navbar-dropdown-menu {
-  position: fixed;
-  z-index: var(--z-dropdown);
-  transform: translateX(-100%);
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  margin-top: 2px;
-  background-color: var(--global-bg-color);
-  padding: 12px 0;
-}
-.navbar-dropdown-menu-separator {
-  margin: 6px 0;
-  border-bottom: 0.8px solid #e8e8e8;
-}
-</style>
+<template>
+  <div class="tabs-overflow bottom-right">
+    <button
+      :id="collapsedBtnId"
+      :class="[
+        'btn btn-link nav-link dropdown-toggle',
+        { active: collapsedBtnActive },
+      ]"
+      :data-id="`${props.testId}-toggle-button`"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <atoms-the-icon
+        :class="['collapse-icon', { active: open }]"
+        name="ellipsis-horizontal"
+        width="16px"
+        height="16px"
+      />
+    </button>
+
+    <Teleport to="body">
+      <ul
+        v-show="open"
+        :class="['navbar-dropdown-menu', props.popupClass]"
+        :style="dropdownMenuStyles"
+      >
+        <li
+          v-for="(item, key) in props.items"
+          :key="key"
+          v-permission="item.permission"
+          :title="item.title"
+          class="navbar-dropdown-menu-item"
+          @mousedown.stop
+        >
+          <div
+            v-if="item.separate"
+            class="navbar-dropdown-menu-separator"
+          ></div>
+          <atoms-collapse-nav-item
+            v-else
+            :is-link="props.isLink"
+            :item="item"
+            :value="value"
+            btn-class="btn"
+            @change="change"
+            @select-file="onSelectFile($event, key)"
+          />
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_CollapseNavItem[]
+    isLink?: boolean
+    value?: number | string
+    popupClass?: string
+    closeAfterClick?: boolean
+    testId?: string
+  }>(),
+  {
+    isLink: undefined,
+    value: undefined,
+    popupClass: undefined,
+    closeAfterClick: undefined,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+  (event: 'select-file', value1: Event, value2: string, value3: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('change', value)
+  props.closeAfterClick && (open.value = false)
+}
+const onSelectFile = (event: Event, type: string, key: number): void => {
+  emits('select-file', event, type, key)
+}
+
+const collapsedBtnId = ref<string>('')
+
+const route = useRoute()
+const collapsedBtnActive = computed<boolean>(() => {
+  if (props.isLink)
+    return props.items.some((item) => route.path.includes(item.path || ''))
+
+  return props.items.some((item) => item.value === props.value)
+})
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const dropdownMenuStyles = ref<any>({})
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${collapsedBtnId.value}`)
+  const { top, height, right } = btn!.getBoundingClientRect()
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = (): void => {
+  hideMenu()
+}
+const windowResize = (): void => {
+  hideMenu(true)
+}
+onMounted(() => {
+  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
+  window.addEventListener('mousedown', windowClick)
+  window.addEventListener('resize', windowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowClick)
+  window.removeEventListener('resize', windowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-overflow {
+  position: absolute;
+  top: 0;
+  right: 24px;
+
+  .dropdown-toggle {
+    .collapse-icon {
+      fill: var(--main-color-mode);
+
+      &.active {
+        fill: #0077b8;
+      }
+    }
+  }
+}
+
+.navbar-dropdown-menu {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+}
+.navbar-dropdown-menu-separator {
+  margin: 6px 0;
+  border-bottom: 0.8px solid #e8e8e8;
+}
+</style>