bfg-common 1.0.83 → 1.0.84

package/assets/localization/local_be.json

@@ -2031,5 +2031,10 @@
   "stormSharedStorage": "Агульны шторм",
   "localStorageHelpDesc": "Дадзеныя захоўваюцца на лакальнай файлавай сістэме хаста.",
   "stormSharedStorageHelpDesc": "Падзялянае сховішча Шторм павінна быць загадзя разгорнута на выдзеленых серверах. Забяспечваецца падзяляны доступ хастоў да сховішча Шторм.",
-  "nfsHelpDesc": "Сховішча NFS з'яўляецца сеткавай файлавай сістэмай. Падтрымліваюцца версіі NFS 4.1 і 4.2"
+  "nfsHelpDesc": "Сховішча NFS з'яўляецца сеткавай файлавай сістэмай. Падтрымліваюцца версіі NFS 4.1 і 4.2",
+  "storageDrsAutomation": "Аўтаматызацыя DRS захоўвання",
+  "storageDrsRuntimeSettings": "Налады выканання DRS захоўвання",
+  "selectClustersAndHosts": "Выберыце Кластары і хасты",
+  "selectDatastores": "Выберыце Datastores",
+  "nameCannotBeBlank": "Імя не можа быць пустым"
 }

package/assets/localization/local_en.json

@@ -2031,5 +2031,13 @@
   "stormSharedStorage": "Shared Storm",
   "localStorageHelpDesc": "The data is stored on the local file system of the host.",
   "stormSharedStorageHelpDesc": "Storm shared storage must be pre-deployed on dedicated servers. Shared access of hosts to Storm storage is provided.",
-  "nfsHelpDesc": "NFS storage is a network file system. NFS versions 4.1 and 4.2 are supported"
+  "nfsHelpDesc": "NFS storage is a network file system. NFS versions 4.1 and 4.2 are supported",
+  "storageDrsAutomation": "Storage DRS Automation",
+  "storageDrsRuntimeSettings": "Storage DRS Runtime Settings",
+  "selectClustersAndHosts": "Select Clusters and Hosts",
+  "selectDatastores": "Select Datastores",
+  "nameCannotBeBlank": "Name cannot be blank",
+  "turnOnStorageDrs": "Turn ON Storage DRS",
+  "storageDrsEnableDesc1": "{trademark} Storage DRS enables vCenter Server to manage datastores as an aggregate pool of storage resources.",
+  "storageDrsEnableDesc2": "{trademark} Storage DRS also enables vCenter Server to manage the assignment of virtual machines to datastores, suggesting placement when virtual machines are created, migrated or cloned, and migrating running virtual machines to balance load and enforce placement rules."
 }

package/assets/localization/local_hy.json

@@ -2031,5 +2031,13 @@
   "stormSharedStorage": "Համօգտագործվող փոթորիկ",
   "localStorageHelpDesc": "Տվյալները պահվում են տեղական հյուրընկալող ֆայլային համակարգում:",
   "stormSharedStorageHelpDesc": "Համօգտագործվող Storm Storage-ը պետք է նախապես տեղակայվի նվիրված սերվերների վրա: Ապահովում է հյուրընկալողների համօգտագործվող մուտքը Storm պահեստ:",
-  "nfsHelpDesc": "NFS պահեստը ցանցային ֆայլային համակարգ է: Աջակցվում են NFS 4.1 և 4.2 տարբերակները"
+  "nfsHelpDesc": "NFS պահեստը ցանցային ֆայլային համակարգ է: Աջակցվում են NFS 4.1 և 4.2 տարբերակները",
+  "storageDrsAutomation": "Պահպանման DRS ավտոմատացում",
+  "storageDrsRuntimeSettings": "Պահպանման DRS Գործարկման ժամանակի կարգավորումներ",
+  "selectClustersAndHosts": "Ընտրեք Կլաստերներ և հյուրընկալողներ",
+  "selectDatastores": "Ընտրեք տվյալների պահեստներ",
+  "nameCannotBeBlank": "Անունը չի կարող դատարկ լինել",
+  "turnOnStorageDrs": "Միացնել Storage DRS-ը",
+  "storageDrsEnableDesc1": "{trademark} Storage DRS-ը vCenter Server-ին հնարավորություն է տալիս կառավարել տվյալների պահեստները որպես պահեստային ռեսուրսների համախառն լողավազան:",
+  "storageDrsEnableDesc2": "{trademark} Storage DRS-ը նաև հնարավորություն է տալիս vCenter Server-ին կառավարել վիրտուալ մեքենաների վերագրումը տվյալների պահեստներին, առաջարկելով տեղադրում, երբ վիրտուալ մեքենաները ստեղծվում են, տեղափոխվում կամ կլոնավորվում են, ինչպես նաև տեղափոխում են գործող վիրտուալ մեքենաներ՝ բեռը հավասարակշռելու և տեղադրման կանոնները կիրառելու համար:"
 }

package/assets/localization/local_kk.json

@@ -2031,5 +2031,13 @@
   "stormSharedStorage": "Ортақ дауыл",
   "localStorageHelpDesc": "Деректер жергілікті хост файлдық жүйесінде сақталады.",
   "stormSharedStorageHelpDesc": "Ортақ сақтау дауыл арнайы серверлерде алдын ала орналастырылуы керек. Хосттардың дауыл қоймасына ортақ қол жетімділігі қамтамасыз етіледі.",
-  "nfsHelpDesc": "NFS жады-бұл желілік файлдық жүйе. NFS 4.1 және 4.2 нұсқаларына қолдау көрсетіледі"
+  "nfsHelpDesc": "NFS жады-бұл желілік файлдық жүйе. NFS 4.1 және 4.2 нұсқаларына қолдау көрсетіледі",
+  "storageDrsAutomation": "Storage DRS Automation",
+  "storageDrsRuntimeSettings": "Storage DRS Runtime параметрлері",
+  "selectClustersAndHosts": "Кластерлер мен хосттарды таңдаңыз",
+  "selectDatastores": "Деректер қоймаларын таңдаңыз",
+  "nameCannotBeBlank": "Аты бос болмауы керек",
+  "turnOnStorageDrs": "Storage DRS ҚОСУ",
+  "storageDrsEnableDesc1": "{trademark} Storage DRS vCenter серверіне деректер қоймаларын сақтау ресурстарының жиынтық пулы ретінде басқаруға мүмкіндік береді.",
+  "storageDrsEnableDesc2": "{trademark} Storage DRS сонымен қатар vCenter серверіне виртуалды машиналарды деректер қоймаларына тағайындауды басқаруға мүмкіндік береді, виртуалды машиналар жасалған, тасымалданған немесе клондалған кезде орналастыруды ұсынады және жүктемені теңестіру және орналастыру ережелерін орындау үшін іске қосылған виртуалды машиналарды тасымалдайды."
 }

package/assets/localization/local_ru.json

@@ -2031,5 +2031,13 @@
   "stormSharedStorage": "Разделяемое хранилище Шторм",
   "localStorageHelpDesc": "Данные хранятся на локальной файловой системе хоста.",
   "stormSharedStorageHelpDesc": "Разделяемое хранилище Шторм должно быть заранее развернуто на выделенных серверах. Обеспечивается разделяемый доступ хостов к хранилищу Шторм.",
-  "nfsHelpDesc": "Хранилище NFS является сетевой файловой системой. Поддерживаются версии NFS 4.1 и 4.2"
+  "nfsHelpDesc": "Хранилище NFS является сетевой файловой системой. Поддерживаются версии NFS 4.1 и 4.2",
+  "storageDrsAutomation": "Автоматизация хранения данных DRS",
+  "storageDrsRuntimeSettings": "Настройки выполнения Storage DRS",
+  "selectClustersAndHosts": "Выберите кластеры и хосты",
+  "selectDatastores": "Выберите хранилища данных",
+  "nameCannotBeBlank": "Имя не может быть пустым",
+  "turnOnStorageDrs": "ВКЛЮЧИТЬ Storage DRS",
+  "storageDrsEnableDesc1": "{trademark} Storage DRS позволяет vCenter Server управлять хранилищами данных как совокупным пулом ресурсов хранения.",
+  "storageDrsEnableDesc2": "{trademark} Storage DRS также позволяет vCenter Server управлять назначением виртуальных машин хранилищам данных, предлагая размещение при создании, переносе или клонировании виртуальных машин, а также миграцию работающих виртуальных машин для балансировки нагрузки и соблюдения правил размещения."
 }

package/assets/localization/local_zh.json

@@ -2031,5 +2031,13 @@
   "stormSharedStorage": "共享风暴",
   "localStorageHelpDesc": "数据存储在主机的本地文件系统中。",
   "stormSharedStorageHelpDesc": "Storm共享存储必须预先部署在专用服务器上。 提供对 Storm 存储的共享主机访问。",
-  "nfsHelpDesc": "NFS 存储是一种网络文件系统。 支持 NFS 版本 4.1 和 4.2"
+  "nfsHelpDesc": "NFS 存储是一种网络文件系统。 支持 NFS 版本 4.1 和 4.2",
+  "storageDrsAutomation": "存储 DRS 自动化",
+  "storageDrsRuntimeSettings": "存储 DRS 运行时设置",
+  "selectClustersAndHosts": "选择集群和主机",
+  "selectDatastores": "选择数据存储",
+  "nameCannotBeBlank": "名称不能为空",
+  "turnOnStorageDrs": "打开存储 DRS",
+  "storageDrsEnableDesc1": "{trademark} Storage DRS 使 vCenter Server 能够将数据存储作为存储资源聚合池进行管理。",
+  "storageDrsEnableDesc2": "{trademark} Storage DRS 还使 vCenter Server 能够管理虚拟机到数据存储的分配，在创建、迁移或克隆虚拟机时提出放置建议，并迁移正在运行的虚拟机以平衡负载并强制执行放置规则。"
 }

package/components/atoms/TheIcon2.vue

@@ -307,6 +307,56 @@
       <path opacity="0" d="M0 0h36v36H0z" />
     </svg>
   </template>
+  <template v-else-if="props.name === 'vsphere-icon-device'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#0091da"
+      width="38"
+      height="38"
+      viewBox="-1 -1 38 38"
+      y="380"
+    >
+      <path fill="none" d="M0 0h36v36H0z" />
+      <path d="M8 12h4v8H8zM16 12h4v8h-4zM24 12h4v8h-4z" />
+      <path
+        d="M8 28H4V16H2v12a2 2 0 002 2h6v-4h2v-2H8zM32 6H4a2 2 0 00-2 2v4h2V8h28v4h2V8a2 2 0 00-2-2zM32 28H12v2h20a2 2 0 002-2V16h-2z"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'vsphere-icon-network'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      width="38"
+      height="38"
+      viewBox="-1 -1 38 38"
+      y="152"
+    >
+      <path
+        d="M27 32H9a1 1 0 000 2h18a1 1 0 000-2zm-9-1.91a14 14 0 10-14-14 14 14 0 0014 14zm0-2a12 12 0 01-6.54-1.95 3 3 0 00.42 0A2.26 2.26 0 0014 24.8a18 18 0 007.67-3.63 2.22 2.22 0 00.82.16 2.26 2.26 0 001.75-.84 17.16 17.16 0 002.29.44 17.92 17.92 0 002.31.15h.1A12 12 0 0118 28.09zm-3.09-18a16.76 16.76 0 017.48-.77 17.27 17.27 0 013.93 1 15.66 15.66 0 01-2.9 6.71 2.23 2.23 0 00-1-.23 2.27 2.27 0 00-1.62.68 16 16 0 01-6.35-6 2.24 2.24 0 00.43-1.32zm14.24 1.59a11.87 11.87 0 01.85 4.41 12 12 0 01-.49 3.35 16.59 16.59 0 01-2.82-.1 18.39 18.39 0 01-2-.37 2.57 2.57 0 00-.16-.75 17.4 17.4 0 003.3-7.22q.68.33 1.32.72zM18 4.09a11.94 11.94 0 018.57 3.61v1a18.38 18.38 0 00-12.22-.07 2.28 2.28 0 00-1.35-.7 14.72 14.72 0 01-.47-2.5A12 12 0 0118 4.09zm-7 2.28a15.48 15.48 0 00.42 1.91 2.25 2.25 0 00-1 1.88 2.21 2.21 0 000 .37 17.92 17.92 0 00-4.3 3.9A12 12 0 0111 6.37zm.25 5.54a2.27 2.27 0 001.41.51 2.63 2.63 0 00.49-.06A17.74 17.74 0 0020.2 19v.1a2.32 2.32 0 00.25 1A16.52 16.52 0 0114 23.15a2.24 2.24 0 00-4.33.43c-.36 0-.71 0-1.07-.07a11.94 11.94 0 01-2.52-6.16 16 16 0 015.16-5.44z"
+      />
+      <path fill="none" d="M0 0h36v36H0z" />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'vsphere-icon-switch'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#565656"
+      width="38"
+      height="38"
+      viewBox="-1 -1 38 38"
+      y="722"
+    >
+      <g>
+        <path
+          d="M12 8h2v2h-2zM16 8h2v2h-2zM20 8h2v2h-2zM24 8h2v2h-2zM16 12h2v2h-2zM16 16h2v2h-2zM16 20h2v2h-2zM16 24h2v2h-2zM12 24h2v2h-2zM26 2H10a2 2 0 00-2 2v2h2V4h16v2h2V4a2 2 0 00-2-2zM8 12h2v10H8z"
+        />
+        <path
+          d="M26 12v20H10v-4H8v4a2 2 0 002 2h16a2 2 0 002-2V12zM8 8H3a1 1 0 000 2h5zM28 8h4.93a1 1 0 010 2H28zM8 24H3a1 1 0 000 2h5z"
+        />
+      </g>
+    </svg>
+  </template>
 </template>
 
 <script setup lang="ts">

package/components/atoms/modal/bySteps/BySteps.vue

@@ -1,234 +1,236 @@
-<template>
-  <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div class="modal-dialog modal-xl relative">
-      <div class="modal-content-wrapper">
-        <nav class="modal-nav clr-wizard-stepnav-wrapper">
-          <h1 class="clr-wizard-title">
-            {{ props.title }}
-          </h1>
-          <atoms-step-vertical-step
-            :test-id="props.testId"
-            :items="props.stepItems"
-            :step-position="props.stepPosition"
-            @change="changeStep"
-          />
-        </nav>
-        <div class="modal-content">
-          <div class="modal-header--accessible">
-            <div class="modal-title-wrapper">
-              <h2 class="modal-title">
-                <span class="modal-title-text">{{ heading }}</span>
-              </h2>
-            </div>
-            <button
-              :id="`${props.testId}-close-icon`"
-              class="close"
-              @click="hide"
-            >
-              <atoms-the-icon class="close-icon" name="close" />
-            </button>
-          </div>
-          <div class="modal-body">
-            <slot name="modalBody" />
-          </div>
-          <div class="modal-footer">
-            <slot name="modalFooter">
-              <button
-                :id="`${props.testId}-cancel-button`"
-                class="btn btn-link"
-                @click="hide"
-              >
-                {{ localization.cancel }}
-              </button>
-              <button
-                v-show="props.stepPosition > 0"
-                :id="`${props.testId}-back-button`"
-                class="btn btn-outline"
-                @click="back"
-              >
-                {{ localization.back }}
-              </button>
-              <button
-                v-if="props.stepPosition === props.stepItems.length - 1"
-                :id="`${props.testId}-finish-button`"
-                class="btn btn-success"
-                @click="finish"
-              >
-                {{ localization.finish }}
-              </button>
-              <button
-                v-else
-                :id="`${props.testId}-next-button`"
-                class="btn btn-primary"
-                @click="next"
-              >
-                {{ localization.next }}
-              </button>
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <div v-show="props.loading" class="loader">
-        <i class="fa clr-tree-node-caret-icon spinner spinner" />
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    show: boolean
-    title: string
-    secondTitle?: string
-    stepItems: UI_I_VerticalStepItem[]
-    stepPosition: number
-    loading?: boolean
-  }>(),
-  { testId: 'ui-modal-by-steps' }
-)
-const emits = defineEmits<{
-  (event: 'finish'): void
-  (event: 'next'): void
-  (event: 'back'): void
-  (event: 'hide'): void
-  (event: 'change-step', num: number): void
-}>()
-
-const localization = computed(() => useLocal())
-
-const heading = ref<string | null>(null)
-
-const hide = (): void => {
-  emits('hide')
-}
-const finish = (): void => {
-  emits('finish')
-}
-const next = (): void => {
-  emits('next')
-}
-const back = (): void => {
-  emits('back')
-}
-const changeStep = (key: number): void => {
-  emits('change-step', key)
-}
-
-watch(
-  () => props.stepPosition,
-  (value) => {
-    const { stepItems, secondTitle } = props
-    if (secondTitle) {
-      heading.value = secondTitle
-      return
-    }
-
-    heading.value = stepItems[value].text
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  overflow-y: auto;
-
-  .modal-nav {
-    background-color: var(--block-view-bg-color4);
-    .clr-wizard-title {
-      color: var(--main-color-mode);
-      font-size: 22px;
-      padding: 24px 12px 24px 24px;
-      //line-height: 1.2rem;
-    }
-  }
-
-  .modal-content-wrapper {
-    position: relative;
-    -webkit-animation-name: animateTop;
-    -webkit-animation-duration: 0.4s;
-    animation-name: animateTop;
-    animation-duration: 0.4s;
-  }
-
-  .modal-content {
-    background-color: var(--modal-bg-color);
-
-    .modal-header--accessible {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      width: 100%;
-      padding: 24px 19px 6px 24px;
-
-      .modal-title-text {
-        color: var(--main-color-mode);
-        font-size: 22px;
-      }
-
-      .close-icon {
-        fill: var(--close-icon);
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    .modal-body {
-      padding: 0 3px;
-    }
-
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      padding: 24px;
-      flex: unset;
-      min-height: 0;
-      height: auto;
-    }
-  }
-
-  .loader {
-    position: absolute;
-    z-index: 1000;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.3);
-
-    .spinner {
-      left: unset;
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-}
-h1,
-h2 {
-  // просмотреть если нигде не ломается переместит глобально
-  line-height: inherit;
-}
-</style>
+<template>
+  <div v-if="props.show" class="modal clr-wizard wizard-xl">
+    <div class="modal-dialog modal-xl relative">
+      <div class="modal-content-wrapper">
+        <nav class="modal-nav clr-wizard-stepnav-wrapper">
+          <h1 class="clr-wizard-title">
+            {{ props.title }}
+          </h1>
+          <atoms-step-vertical-step
+            :test-id="props.testId"
+            :items="props.stepItems"
+            :step-position="props.stepPosition"
+            @change="changeStep"
+          />
+        </nav>
+        <div class="modal-content">
+          <div class="modal-header--accessible">
+            <slot name="contentHeading">
+              <div class="modal-title-wrapper">
+                <h2 class="modal-title">
+                  <span class="modal-title-text">{{ heading }}</span>
+                </h2>
+              </div>
+            </slot>
+            <button
+              :id="`${props.testId}-close-icon`"
+              class="close"
+              @click="hide"
+            >
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </div>
+          <div class="modal-body">
+            <slot name="modalBody" :title="heading" />
+          </div>
+          <div class="modal-footer">
+            <slot name="modalFooter">
+              <button
+                :id="`${props.testId}-cancel-button`"
+                class="btn btn-link"
+                @click="hide"
+              >
+                {{ localization.cancel }}
+              </button>
+              <button
+                v-show="props.stepPosition > 0"
+                :id="`${props.testId}-back-button`"
+                class="btn btn-outline"
+                @click="back"
+              >
+                {{ localization.back }}
+              </button>
+              <button
+                v-if="props.stepPosition === props.stepItems.length - 1"
+                :id="`${props.testId}-finish-button`"
+                class="btn btn-success"
+                @click="finish"
+              >
+                {{ localization.finish }}
+              </button>
+              <button
+                v-else
+                :id="`${props.testId}-next-button`"
+                class="btn btn-primary"
+                @click="next"
+              >
+                {{ localization.next }}
+              </button>
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="props.loading" class="loader">
+        <i class="fa clr-tree-node-caret-icon spinner spinner" />
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    show: boolean
+    title: string
+    secondTitle?: string
+    stepItems: UI_I_VerticalStepItem[]
+    stepPosition: number
+    loading?: boolean
+  }>(),
+  { testId: 'ui-modal-by-steps' }
+)
+const emits = defineEmits<{
+  (event: 'finish'): void
+  (event: 'next'): void
+  (event: 'back'): void
+  (event: 'hide'): void
+  (event: 'change-step', num: number): void
+}>()
+
+const localization = computed(() => useLocal())
+
+const heading = ref<string | null>(null)
+
+const hide = (): void => {
+  emits('hide')
+}
+const finish = (): void => {
+  emits('finish')
+}
+const next = (): void => {
+  emits('next')
+}
+const back = (): void => {
+  emits('back')
+}
+const changeStep = (key: number): void => {
+  emits('change-step', key)
+}
+
+watch(
+  () => props.stepPosition,
+  (value) => {
+    const { stepItems, secondTitle } = props
+    if (secondTitle) {
+      heading.value = secondTitle
+      return
+    }
+
+    heading.value = stepItems[value].text
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+
+  .modal-nav {
+    background-color: var(--block-view-bg-color4);
+    .clr-wizard-title {
+      color: var(--main-color-mode);
+      font-size: 22px;
+      padding: 24px 12px 24px 24px;
+      //line-height: 1.2rem;
+    }
+  }
+
+  .modal-content-wrapper {
+    position: relative;
+    -webkit-animation-name: animateTop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animateTop;
+    animation-duration: 0.4s;
+  }
+
+  .modal-content {
+    background-color: var(--modal-bg-color);
+
+    .modal-header--accessible {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+      padding: 24px 19px 6px 24px;
+
+      .modal-title-text {
+        color: var(--main-color-mode);
+        font-size: 22px;
+      }
+
+      .close-icon {
+        fill: var(--close-icon);
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .modal-body {
+      padding: 0 3px;
+    }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: 24px;
+      flex: unset;
+      min-height: 0;
+      height: auto;
+    }
+  }
+
+  .loader {
+    position: absolute;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.3);
+
+    .spinner {
+      left: unset;
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+h1,
+h2 {
+  // просмотреть если нигде не ломается переместит глобально
+  line-height: inherit;
+}
+</style>

package/components/atoms/table/dataGrid/DataGrid.vue

@@ -98,7 +98,7 @@
                               />
                             </span>
                           </button>
-                          <div class="relative">
+                          <div>
                             <button
                               v-if="item.hasFilter"
                               :id="`${props.testId}-filter-icon-${key}`"
@@ -136,7 +136,13 @@
                               !isShowHiddenInfo ||
                               (isShowHiddenInfo && key === 0)
                             "
-                            class="datagrid-column-separator"
+                            :class="[
+                              'datagrid-column-separator',
+                              {
+                                'double-arrow-separator':
+                                  key === 0 && props.withInfo,
+                              },
+                            ]"
                             @mousedown="setGrab(key, $event)"
                           >
                             <button
@@ -160,16 +166,19 @@
                   :class="[
                     'datagrid-body-row datagrid-row animation',
                     {
-                      'datagrid-selected active': checkIsSelectedRow(
-                        item[0].id
-                      ),
+                      'datagrid-selected active':
+                        !props.withInfo && checkIsSelectedRow(item[0].id),
+                      'datagrid-selected-info':
+                        props.withInfo &&
+                        isShowHiddenInfo &&
+                        checkIsSelectedRow(item[0].id),
                     },
                   ]"
                 >
                   <div>
                     <div
                       class="datagrid-row-master datagrid-row-flex"
-                      @click="selectRowById(item[0].id)"
+                      @click.prevent.stop="selectRowById(item[0].id)"
                     >
                       <div
                         v-if="props.type"
@@ -244,12 +253,10 @@
                             }"
                             :class="[
                               'datagrid-cell datagrid-fixed-width',
-                              `hidden-text-triangle-${item2.id}`,
                               {
                                 'hidden-text-triangle':
                                   isShowHiddenInfo &&
-                                  item2.key === 'col1' &&
-                                  item2.data?.iconClassName === 'info',
+                                  item2.data?.name === 'hidden-text-triangle',
                               },
                             ]"
                           >
@@ -270,6 +277,9 @@
                                     isShowHiddenInfo &&
                                     item2.id === selectedRow,
                                 }"
+                                @click.prevent.stop="
+                                  doubleArrowClick(item2, item)
+                                "
                               >
                                 <atoms-the-icon
                                   v-if="item2.data?.name === 'doubleArrows'"
@@ -280,7 +290,6 @@
                                       isShowHiddenInfo &&
                                       item2.id === selectedRow,
                                   }"
-                                  @click="doubleArrowClick(item2, item)"
                                 />
                               </div>
                               <span
@@ -510,22 +519,36 @@ const isShowInfo = computed(
     !showedInfoRow.value.data?.text &&
     isShowHiddenInfo.value
 )
-const doubleArrowClick = (item: UI_I_BodyItem, items: UI_I_BodyItem[]) => {
-  // if (!isShowHiddenInfo.value) {
-  //   memoryWidth = columnsWidth.value[1][0]
-  //   // columnsWidth.value[1][0] = 'calc(100% - 48px)'
-  //   // min width of 1st column
-  //   // columnsWidth.value[1][1]
-  // } else {
-  //   columnsWidth.value[1][0] = memoryWidth
-  // }
+
+const setShowedInfoData = (
+  item: UI_I_BodyItem | null,
+  items: UI_I_BodyItem[] | null,
+  reset: boolean
+): void => {
+  showedInfoRow.value = item
+  showedInfoCol.value = items
+
+  reset && (isShowHiddenInfo.value = false)
+  item && selectRowById(item.id)
+  reset && (isShowHiddenInfo.value = true)
+}
+
+const doubleArrowClick = (
+  item: UI_I_BodyItem,
+  items: UI_I_BodyItem[]
+): void => {
   if (!isShowHiddenInfo.value) {
-    showedInfoRow.value = item
-    showedInfoCol.value = items
+    setShowedInfoData(item, items)
   } else {
-    showedInfoRow.value = null
-    showedInfoCol.value = null
+    if (showedInfoRow.value.id !== item.id) {
+      setShowedInfoData(item, items, true)
+
+      return
+    } else {
+      setShowedInfoData(null, null)
+    }
   }
+
   isShowHiddenInfo.value = !isShowHiddenInfo.value
 }
 
@@ -539,7 +562,7 @@ watch(
   { immediate: true }
 )
 const selectRowById = (id: number | string): void => {
-  if (props.offSelectByRow) return
+  if (props.offSelectByRow || isShowHiddenInfo.value) return
 
   if (props.type === 'checkbox' && Array.isArray(selectedRowLocal.value)) {
     const has = selectedRowLocal.value.includes(id)
@@ -791,6 +814,8 @@ watch(
 const grabColumn = ref<number>(-1)
 const grabStartX = ref<number>(0)
 const setGrab = (key: number, e: MouseEvent): void => {
+  if (props.withInfo && key === 0) return
+
   if (!isShowHiddenInfo.value) {
     grabColumn.value = key
     const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
@@ -939,6 +964,12 @@ onUnmounted(() => {
                 &::after {
                   cursor: col-resize;
                 }
+                &.double-arrow-separator .datagrid-column-handle {
+                  cursor: unset;
+                }
+                &.double-arrow-separator::after {
+                  cursor: unset;
+                }
               }
             }
 
@@ -959,6 +990,7 @@ onUnmounted(() => {
                 background-color: var(--block-view-bg-color);
                 border-bottom: 1px solid var(--global-border-color);
                 padding: 6px 12px 5px;
+                position: relative;
                 //flex: 1 1 auto;
 
                 &:last-child {
@@ -1020,6 +1052,9 @@ onUnmounted(() => {
 
               .datagrid-filter-toggle {
                 background: unset;
+                position: absolute;
+                right: 2px;
+                top: calc(50% - 8px);
 
                 .filter-icon {
                   width: 16px;
@@ -1057,27 +1092,6 @@ onUnmounted(() => {
                 border-bottom: 1px solid var(--global-border-color);
                 position: relative;
                 line-height: 1rem;
-
-                &.hidden-text-triangle::after {
-                  content: '';
-                  position: absolute;
-                  transform: rotate(225deg);
-                  border-bottom: 15px solid transparent;
-                  border-right: 15px solid var(--global-bg-color);
-                  bottom: 26%;
-                  right: -10px;
-                  z-index: 1000;
-                }
-                &.hidden-text-triangle::before {
-                  content: '';
-                  transform: rotate(-135deg);
-                  position: absolute;
-                  border-bottom: 16px solid transparent;
-                  border-right: 16px solid var(--global-border-color);
-                  bottom: 23%;
-                  right: -10px;
-                  z-index: 999;
-                }
               }
 
               .datagrid-row-detail {
@@ -1090,6 +1104,21 @@ onUnmounted(() => {
               min-width: 38px;
               min-height: 28px;
               padding: 2px 12px 3px 12px;
+              position: relative;
+
+              &:has(.double-arrow-wrap) {
+                padding-left: 4px;
+              }
+
+              &:has(.double-arrow-wrap)::after {
+                content: '';
+                width: 0.5px;
+                height: calc(100% - 6px);
+                position: absolute;
+                right: 2px;
+                top: 3px;
+                background-color: var(--global-border-color);
+              }
 
               &:last-child {
                 flex: 1 1 auto;
@@ -1128,6 +1157,40 @@ onUnmounted(() => {
                 }
               }
             }
+
+            &.datagrid-selected-info {
+              width: 100%;
+              min-width: max-content;
+              border-top: none;
+              color: var(--table-color);
+              background-color: var(--block-view-bg-color);
+
+              .datagrid-cell {
+                position: relative;
+
+                &.hidden-text-triangle::after {
+                  content: '';
+                  position: absolute;
+                  transform: rotate(225deg);
+                  border-bottom: 15px solid transparent;
+                  border-right: 15px solid var(--global-bg-color);
+                  bottom: 26%;
+                  right: -16px;
+                  z-index: 1000;
+                }
+
+                &.hidden-text-triangle::before {
+                  content: '';
+                  transform: rotate(-135deg);
+                  position: absolute;
+                  border-bottom: 16px solid transparent;
+                  border-right: 16px solid var(--global-border-color);
+                  bottom: 23%;
+                  right: -17px;
+                  z-index: 999;
+                }
+              }
+            }
           }
 
           .datagrid-row-sticky {
@@ -1351,7 +1414,7 @@ onUnmounted(() => {
   }
 }
 .double-arrow-width {
-  width: 47px;
+  width: 25px;
 }
 .double-arrow-wrap {
   width: 30px;

package/components/common/content/navbar/left/models/interfaces.ts

@@ -1,5 +1,6 @@
 export interface UI_I_ContentNavigation {
   title: string
   children: UI_I_ContentNavigation[]
+  weight: number
   _path: string
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.0.83",
+  "version": "1.0.84",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",