bfg-common 1.4.815 → 1.4.817

package/assets/localization/local_be.json

@@ -1688,6 +1688,7 @@
     "vmStoragePoliciesCompliance": "Адпаведнасць палітыкам захоўвання ВМ",
     "vmStoragePolicy": "Палітыка захоўвання VM",
     "vmTemplates": "Шаблоны VM",
+    "inodeVmTemplates": "Шаблоны InodeVm",
     "vmVersion": "Версія віртуальнай машыны",
     "vMwareSharedVirtualGraphics": "Агульная віртуальная графіка {trademark}",
     "vSAN": "vSAN",
@@ -2311,7 +2312,8 @@
     "permissionDeleteMsg": "Вы ўпэўненыя, што хочаце выдаліць дазвол для \"{subject}\"?",
     "editPermission": "Дазвол на рэдагаванне",
     "userGroupNameIsInvalid": "Няправільнае імя карыстальніка ці групы!",
-    "submit": "Падпарадкоўвацца"
+    "submit": "Падпарадкоўвацца",
+    "up": "Наверсе"
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",
@@ -2962,6 +2964,7 @@
     "addNode": "Дадаць вузел",
     "hostHelp": "Хост дапамогі",
     "hostHelpTooltipContent": "Выберыце мэтавы вылічаны рэсурс для гэтай аперацыі. ",
-    "selectValidHostComputeResource": "Выберыце сапраўдны хост у якасці вылічальнага рэсурсу"
+    "selectValidHostComputeResource": "Выберыце сапраўдны хост у якасці вылічальнага рэсурсу",
+    "syncData": "Дадзеныя сінхранізацыі"
   }
 }

package/assets/localization/local_en.json

@@ -1687,6 +1687,7 @@
     "vmStoragePoliciesCompliance": "VM Storage Policies Compliance",
     "vmStoragePolicy": "VM Storage Policy",
     "vmTemplates": "VM Templates",
+    "inodeVmTemplates": "InodeVm Templates",
     "vmVersion": "VM version",
     "vMwareSharedVirtualGraphics": "{trademark} shared virtual graphics",
     "vSAN": "vSAN",
@@ -2315,7 +2316,8 @@
     "permissionDeleteMsg": "Are you sure you want to remove the permission for \"{subject}\"?",
     "editPermission": "Edit Permission",
     "userGroupNameIsInvalid": "User or group name is invalid!",
-    "submit": "Submit"
+    "submit": "Submit",
+    "up": "Up"
   },
   "auth": {
     "welcomeTo": "Welcome to",
@@ -2966,6 +2968,7 @@
     "addNode": "Add Node",
     "hostHelp": "Host Help",
     "hostHelpTooltipContent": "Select the target compute resource for this operation. Each node must have a unique host.",
-    "selectValidHostComputeResource": "Select a valid host as the compute resource"
+    "selectValidHostComputeResource": "Select a valid host as the compute resource",
+    "syncData": "Sync Data"
   }
 }

package/assets/localization/local_hy.json

@@ -1687,6 +1687,7 @@
     "vmStoragePoliciesCompliance": "Համապատասխանություն ՎՄ պահեստավորման քաղաքականությանը",
     "vmStoragePolicy": "ՎՄ-ի պահպանման քաղաքականություն",
     "vmTemplates": "ՎՄ կաղապարներ",
+    "inodeVmTemplates": "InodeVm կաղապարներ",
     "vmVersion": "Վիրտուալ մեքենայի տարբերակ",
     "vMwareSharedVirtualGraphics": "Ընդհանուր {trademark} վիրտուալ գրաֆիկա",
     "vSAN": "vSAN",
@@ -2315,7 +2316,8 @@
     "permissionDeleteMsg": "Համոզվա՞ծ եք, որ ցանկանում եք հեռացնել թույլտվությունը \"{subject}\"-ի համար:",
     "editPermission": "Խմբագրել թույլտվությունը",
     "userGroupNameIsInvalid": "Սխալ օգտվողի անուն կամ խումբ",
-    "submit": "Ներկայացնել"
+    "submit": "Ներկայացնել",
+    "up": "Վեր"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",
@@ -2966,6 +2968,7 @@
     "addNode": "Ավելացնել հանգույց",
     "hostHelp": "Հյուրընկալող օգնություն",
     "hostHelpTooltipContent": "Ընտրեք թիրախային հաշվարկային ռեսուրսը այս գործողության համար: ",
-    "selectValidHostComputeResource": "Ընտրեք վավեր հյուրընկալող որպես հաշվարկային ռեսուրս"
+    "selectValidHostComputeResource": "Ընտրեք վավեր հյուրընկալող որպես հաշվարկային ռեսուրս",
+    "syncData": "Համաժամացման տվյալներ"
   }
 }

package/assets/localization/local_kk.json

@@ -1687,6 +1687,7 @@
     "vmStoragePoliciesCompliance": "В.М. өлімін қорғау",
     "vmStoragePolicy": "VM сақтау саясаты",
     "vmTemplates": "VM үлгілері",
+    "inodeVmTemplates": "InodeVm үлгілері",
     "vmVersion": "Виртуалды машина нұсқасы",
     "vMwareSharedVirtualGraphics": "{trademark} жалпы виртуалды графикасы",
     "vSAN": "vSAN",
@@ -2314,7 +2315,8 @@
     "permissionDeleteMsg": "\"{subject}\" рұқсатын алып тастағыңыз келетініне сенімдісіз бе?",
     "editPermission": "Рұқсатты Өңдеу",
     "userGroupNameIsInvalid": "Пайдаланушы немесе топ атауы жарамсыз!",
-    "submit": "Бағыну"
+    "submit": "Бағыну",
+    "up": "Бойымен"
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",
@@ -2965,6 +2967,7 @@
     "addNode": "Түйінді қосыңыз",
     "hostHelp": "Хосттық көмек",
     "hostHelpTooltipContent": "Осы жұмыс үшін мақсатты есептеу қорын таңдаңыз. ",
-    "selectValidHostComputeResource": "Жарамды хостты есептік ресурс ретінде таңдаңыз"
+    "selectValidHostComputeResource": "Жарамды хостты есептік ресурс ретінде таңдаңыз",
+    "syncData": "Деректерді синхрондау"
   }
 }

package/assets/localization/local_ru.json

@@ -1689,6 +1689,7 @@
     "vmStoragePoliciesCompliance": "Соответствие политикам хранения ВМ",
     "vmStoragePolicy": "Политика хранения ВМ",
     "vmTemplates": "Шаблоны ВМ",
+    "inodeVmTemplates": "Шаблоны InodeVm",
     "vmVersion": "Версия виртуальной машины",
     "vMwareSharedVirtualGraphics": "Общая виртуальная графика {trademark}",
     "vSAN": "vSAN",
@@ -2316,7 +2317,8 @@
     "permissionDeleteMsg": "Вы уверены, что хотите удалить разрешение для \"{subject}\"?",
     "editPermission": "Редактирование разрешения",
     "userGroupNameIsInvalid": "Неверное имя пользователя или группы!",
-    "submit": "Представлять на рассмотрение"
+    "submit": "Представлять на рассмотрение",
+    "up": "Вверх"
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",
@@ -2967,6 +2969,7 @@
     "addNode": "Добавить узел",
     "hostHelp": "Хозяева",
     "hostHelpTooltipContent": "Выберите целевой вычислительный ресурс для этой операции. ",
-    "selectValidHostComputeResource": "Выберите действительный хост в качестве ресурса вычисления"
+    "selectValidHostComputeResource": "Выберите действительный хост в качестве ресурса вычисления",
+    "syncData": "Синхронизированные данные"
   }
 }

package/assets/localization/local_zh.json

@@ -1687,6 +1687,7 @@
     "vmStoragePoliciesCompliance": "遵守 VM 保留策略",
     "vmStoragePolicy": "虚拟机保留策略",
     "vmTemplates": "虚拟机模板",
+    "inodeVmTemplates": "InodeVm模板",
     "vmVersion": "虚拟机版本",
     "vMwareSharedVirtualGraphics": "{trademark} 共享虚拟图形",
     "vSAN": "vSAN",
@@ -2313,7 +2314,8 @@
     "permissionDeleteMsg": "您确定要删除\"{subject}\"的权限吗？",
     "editPermission": "编辑权限",
     "userGroupNameIsInvalid": "用户或组名无效!",
-    "submit": "提交"
+    "submit": "提交",
+    "up": "向上"
   },
   "auth": {
     "welcomeTo": "欢迎来到",
@@ -2964,6 +2966,7 @@
     "addNode": "添加节点",
     "hostHelp": "主持人帮助",
     "hostHelpTooltipContent": "为此操作选择目标计算资源。",
-    "selectValidHostComputeResource": "选择有效主机作为计算资源"
+    "selectValidHostComputeResource": "选择有效主机作为计算资源",
+    "syncData": "同步数据"
   }
 }

package/components/common/monitor/overview/OverviewNew.vue

@@ -42,10 +42,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 <style>
 :root {
-  --loader-bg-color: #ffffff;
+  --overview-chart-loader-bg-color: #ffffff;
 }
 :root.dark-theme {
-  --loader-bg-color: #334453;
+  --overview-chart-loader-bg-color: #334453;
 }
 </style>
 
@@ -62,19 +62,21 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   padding: 0 16px;
 
   .graphic-loader-block {
-    background-color: var(--loader-bg-color);
+    background-color: var(--overview-chart-loader-bg-color);
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    border-radius: 8px;
   }
 
   .graph-empty-block {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: var(--loader-bg-color);
+    background-color: var(--overview-chart-loader-bg-color);
+    border-radius: 8px;
 
     .title {
       text-align: center;
@@ -112,16 +114,20 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       width: 50%;
       height: 100%;
     }
-  }
 
-  .content-global-loading {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--global-font-color);
+    :deep(svg > .skeleton-metric__line) {
+      display: none;
+    }
   }
+
+  //.content-global-loading {
+  //  width: 100%;
+  //  height: 100%;
+  //  display: flex;
+  //  align-items: center;
+  //  justify-content: center;
+  //  color: var(--global-font-color);
+  //}
 }
 @media (min-width: 1280px) {
   .charts-view .chart-container {

package/components/common/monitor/overview/OverviewOld.vue

@@ -4,17 +4,20 @@
       {{ localization.common.loading }}...
     </div>
     <template v-else>
-      <template v-for="(chartData, key) in props.allData" :key="chartData.title">
+      <template
+        v-for="(chartData, key) in props.allData"
+        :key="chartData.title"
+      >
         <div :class="['chart-container', `graph-${chartData.title}`]">
           <div v-if="chartData.loader" class="graphic-loader-block">
             <div class="spinner"></div>
             <p>{{ localization.inventoryMonitor.retrievingData }}...</p>
           </div>
           <common-graph
-              v-else-if="chartData.data"
-              :data="chartData.data"
-              :chart="props.charts[key]"
-              :update="props.updateHelper"
+            v-else-if="chartData.data"
+            :data="chartData.data"
+            :chart="props.charts[key]"
+            :update="props.updateHelper"
           />
           <div v-else class="graph-empty-block">
             <div class="title">{{ chartData.title }}</div>
@@ -39,7 +42,6 @@ const props = defineProps<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-
 </script>
 
 <style>

package/components/common/monitor/overview/filters/FiltersNew.vue

@@ -24,6 +24,7 @@
       />
 
       <ui-tooltip
+        v-show="props.isShowCustomIntervalButton"
         id="tooltip-interval-modal-button"
         test-id="tooltip-interval-modal-button"
         size="sm"

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModal.vue

@@ -1,40 +1,43 @@
 <template>
-  <common-monitor-overview-filters-custom-interval-modal-new
-    v-if="isNewView"
-    v-model:alert-show="alertShow"
-    v-model:current-date-from="currentDateFrom"
-    v-model:date-from="dateFrom"
-    v-model:current-time-from="currentTimeFrom"
-    v-model:current-date-to="currentDateTo"
-    v-model:date-to="dateTo"
-    v-model:current-time-to="currentTimeTo"
-    :title-interval-modal="titleIntervalModal"
-    :selected-item-name="selectedItemName"
-    :current-lang="currentLang"
-    :alert-items="alertItems"
-    @update-date-from="onUpdateDateFrom"
-    @update-date-to="onUpdateDateTo"
-    @submit="onSubmit"
-    @hide="onHide"
-  />
-  <common-monitor-overview-filters-custom-interval-modal-old
-    v-else
-    v-model:alert-show="alertShow"
-    v-model:current-date-from="currentDateFrom"
-    v-model:date-from="dateFrom"
-    v-model:current-time-from="currentTimeFrom"
-    v-model:current-date-to="currentDateTo"
-    v-model:date-to="dateTo"
-    v-model:current-time-to="currentTimeTo"
-    :title-interval-modal="titleIntervalModal"
-    :selected-item-name="selectedItemName"
-    :current-lang="currentLang"
-    :alert-items="alertItems"
-    @update-date-from="onUpdateDateFrom"
-    @update-date-to="onUpdateDateTo"
-    @submit="onSubmit"
-    @hide="onHide"
-  />
+  <div>
+    <common-monitor-overview-filters-custom-interval-modal-new
+      v-if="isNewView"
+      v-model:alert-show="alertShow"
+      v-model:current-date-from="currentDateFrom"
+      v-model:date-from="dateFrom"
+      v-model:current-time-from="currentTimeFrom"
+      v-model:current-date-to="currentDateTo"
+      v-model:date-to="dateTo"
+      v-model:current-time-to="currentTimeTo"
+      :title-interval-modal="titleIntervalModal"
+      :selected-item-name="selectedItemName"
+      :current-lang="currentLang"
+      :alert-items="alertItems"
+      :format-date="props.formatDate"
+      @update-date-from="onUpdateDateFrom"
+      @update-date-to="onUpdateDateTo"
+      @submit="onSubmit"
+      @hide="onHide"
+    />
+    <common-monitor-overview-filters-custom-interval-modal-old
+      v-else
+      v-model:alert-show="alertShow"
+      v-model:current-date-from="currentDateFrom"
+      v-model:date-from="dateFrom"
+      v-model:current-time-from="currentTimeFrom"
+      v-model:current-date-to="currentDateTo"
+      v-model:date-to="dateTo"
+      v-model:current-time-to="currentTimeTo"
+      :title-interval-modal="titleIntervalModal"
+      :selected-item-name="selectedItemName"
+      :current-lang="currentLang"
+      :alert-items="alertItems"
+      @update-date-from="onUpdateDateFrom"
+      @update-date-to="onUpdateDateTo"
+      @submit="onSubmit"
+      @hide="onHide"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -169,5 +172,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalNew.vue

@@ -1,155 +1,181 @@
 <template>
-  <atoms-modal
-    width="580px"
-    class="add-permission"
-    :show="true"
-    :title="props.titleIntervalModal"
-    :second-title="props.selectedItemName"
+  <ui-modal
+    show
+    :title="titleLocal"
+    :subtitle="props.selectedItemName"
+    :texts="modalTexts"
     test-id="overview-custom-interval-modal"
     @hide="onHide"
     @submit="onSubmit"
   >
-    <template #modalBody>
-      <atoms-alert
-        v-show="alertShow"
-        status="alert-danger"
-        :items="props.alertItems"
-        test-id="overview-alert"
-        @remove="alertShow = false"
-      />
-
-      <table>
-        <tbody>
-          <tr>
-            <td class="text-right">
-              <label class="custom-time-label">
-                <span class="custom-time-label-text text-capitalize">
-                  {{ localization.common.from }}:
-                </span>
-              </label>
-            </td>
-            <td>
-              <div class="flex-align-center input-row-container">
-                <input
-                  id="current-date-from"
-                  v-model.lazy="currentDateFrom"
-                  data-id="current-date-from-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input first-from"
-                />
-                <div class="section-datepicker">
-                  <atoms-datepicker
-                    v-model="dateFrom"
-                    :lang="props.currentLang"
-                    class="chart-option-setting-row custom-time-input"
-                    test-id="overview-first-date-datepicker"
-                    @update="onUpdateDateFrom"
-                  />
-                </div>
-                <input
-                  id="current-time-from"
-                  v-model="currentTimeFrom"
-                  data-id="current-time-from-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input"
-                />
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td class="text-right">
-              <label class="custom-time-label">
-                <span class="custom-time-label-text text-capitalize">
-                  {{ localization.common.to }}:
-                </span>
-              </label>
-            </td>
-            <td>
-              <div class="flex-align-center input-row-container">
-                <input
-                  id="current-date-to"
-                  v-model.lazy="currentDateTo"
-                  data-id="current-date-to-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input first-from"
-                />
-                <div class="section-datepicker">
-                  <atoms-datepicker
-                    v-model="dateTo"
-                    :lang="props.currentLang"
-                    class="chart-option-setting-row custom-time-input"
-                    test-id="overview-first-date-to-datepicker"
-                    @update="onUpdateDateTo"
-                  />
-                </div>
-                <input
-                  id="current-time-to"
-                  v-model="currentTimeTo"
-                  data-id="current-time-to-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input"
-                />
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td></td>
-            <td class="text-format-date">
-              ({{ localization.inventoryMonitor.dateTimeIsoFormat }})
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <template #content>
+      <div class="time-range">
+        <ui-alert
+          v-show="alertShow"
+          status="alert-danger"
+          :messages="props.alertItems"
+          class="overview-alert"
+          test-id="overview-alert"
+          @remove="alertShow = false"
+        />
+
+        <p class="date-time-format-description">
+          {{ localization.inventoryMonitor.dateTimeIsoFormat }}
+        </p>
+
+        <div class="filed-wrap from">
+          <lable for="date-from" class="filed-lable">{{
+            localization.common.from
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-from"
+            v-model="currentDateFromLocal"
+            test-id="date-from"
+            format="mm-dd-yyyy"
+            time-format="12"
+          />
+        </div>
+
+        <div class="filed-wrap">
+          <lable for="date-to" class="filed-lable">{{
+            localization.common.to
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-to"
+            v-model="currentDateToLocal"
+            test-id="date-to"
+            format="mm-dd-yyyy"
+            time-format="12"
+          />
+        </div>
+      </div>
     </template>
-  </atoms-modal>
+
+    <template #footerLeftContent><span></span></template>
+  </ui-modal>
 </template>
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
 
 const alertShow = defineModel<boolean>('alert-show')
-const currentDateFrom = defineModel<boolean>('current-date-from')
-const dateFrom = defineModel<boolean>('date-from')
-const currentTimeFrom = defineModel<boolean>('current-time-from')
-const currentDateTo = defineModel<boolean>('current-date-to')
-const dateTo = defineModel<boolean>('date-to')
-const currentTimeTo = defineModel<boolean>('current-time-to')
+const currentDateFrom = defineModel<string>('current-date-from')
+// const dateFrom = defineModel<string>('date-from')
+const currentTimeFrom = defineModel<string>('current-time-from')
+const currentDateTo = defineModel<string>('current-date-to')
+// const dateTo = defineModel<string>('date-to')
+const currentTimeTo = defineModel<string>('current-time-to')
 
 const props = defineProps<{
   titleIntervalModal: string
   selectedItemName: string
   currentLang: string
   alertItems: any[]
+  formatDate: string
 }>()
 
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'submit', value: number[]): void
+  (event: 'submit'): void
   (event: 'update-date-from', value: any): void
   (event: 'update-date-to', value: any): void
 }>()
 
+const { $isDate, $getUnixByDate, $formattedDate, $formattedTime } = useNuxtApp()
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const onUpdateDateFrom = (event: any): void => {
-  emits('update-date-from', event)
+const titleLocal = computed<string>(() =>
+  props.titleIntervalModal.replace(':', '')
+)
+const modalTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.save,
+}))
+
+const currentDateFromLocal = computed<number>({
+  get() {
+    // console.log(currentDateFrom.value, 11111, currentTimeFrom.value)
+    // TODO fix PM
+    return $isDate(currentDateFrom.value)
+      ? $getUnixByDate(currentDateFrom.value + ' ' + currentTimeFrom.value)
+      : 0
+  },
+  set(newValue) {
+    // console.log($formattedDate(new Date(newValue), props.formatDate), 22222)
+    // console.log($formattedTime(newValue, '', true), 33333)
+    currentDateFrom.value = $formattedDate(new Date(newValue), props.formatDate)
+    currentTimeFrom.value = $formattedTime(newValue, '', true)
+  },
+})
+const currentDateToLocal = computed<number>({
+  get() {
+    // TODO fix PM
+    return $isDate(currentDateTo.value)
+      ? $getUnixByDate(currentDateTo.value + ' ' + currentTimeTo.value)
+      : 0
+  },
+  set(newValue) {
+    currentDateTo.value = $formattedDate(new Date(newValue), props.formatDate)
+    currentTimeTo.value = $formattedTime(newValue, '', true)
+  },
+})
+
+// const onUpdateDateFrom = (event: any): void => {
+//   emits('update-date-from', event)
+// }
+// const onUpdateDateTo = (event: any): void => {
+//   emits('update-date-to', event)
+// }
+
+const onSubmit = (): void => {
+  emits('submit')
 }
-const onUpdateDateTo = (event: any): void => {
-  emits('update-date-to', event)
+const onHide = (): void => {
+  emits('hide')
 }
 </script>
 
+<style>
+:root {
+  --overview-time-range-lable-color: #4d5d69;
+  --overview-time-range-border-color: #e9ebed;
+}
+:root.dark-theme {
+  --overview-time-range-lable-color: #e9eaec;
+  --overview-time-range-border-color: #e9ebed1f;
+}
+</style>
 <style scoped lang="scss">
-.input-row-container {
-  padding-left: 5px;
+.time-range {
+  padding: 0 32px;
 
-  .custom-time-input {
-    max-width: 120px;
-    margin-right: 15px;
+  .overview-alert {
+    margin-bottom: 16px;
+  }
+
+  .date-time-format-description {
+    font-size: 12px;
+    color: #9da6ad;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--overview-time-range-border-color);
+  }
+
+  .filed-wrap {
+    margin-bottom: 16px;
+
+    &.from {
+      margin-bottom: 24px;
+    }
+    .filed-lable {
+      display: block;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--overview-time-range-lable-color);
+      margin: 16px 0;
+      text-transform: capitalize;
+    }
   }
-}
-.text-format-date {
-  display: inline-block;
-  margin-top: 5px;
 }
 </style>

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalOld.vue

@@ -1,103 +1,102 @@
 <template>
   <atoms-modal
-      width="580px"
-      class="add-permission"
-      :show="true"
-      :title="props.titleIntervalModal"
-      :second-title="props.selectedItemName"
-      test-id="overview-custom-interval-modal"
-      @hide="onHide"
-      @submit="onSubmit"
+    show
+    width="580px"
+    :title="props.titleIntervalModal"
+    :second-title="props.selectedItemName"
+    test-id="overview-custom-interval-modal"
+    @hide="onHide"
+    @submit="onSubmit"
   >
     <template #modalBody>
       <atoms-alert
-          v-show="alertShow"
-          status="alert-danger"
-          :items="props.alertItems"
-          test-id="overview-alert"
-          @remove="alertShow = false"
+        v-show="alertShow"
+        status="alert-danger"
+        :items="props.alertItems"
+        test-id="overview-alert"
+        @remove="alertShow = false"
       />
 
       <table>
         <tbody>
-        <tr>
-          <td class="text-right">
-            <label class="custom-time-label">
+          <tr>
+            <td class="text-right">
+              <label class="custom-time-label">
                 <span class="custom-time-label-text text-capitalize">
                   {{ localization.common.from }}:
                 </span>
-            </label>
-          </td>
-          <td>
-            <div class="flex-align-center input-row-container">
-              <input
+              </label>
+            </td>
+            <td>
+              <div class="flex-align-center input-row-container">
+                <input
                   id="current-date-from"
                   v-model.lazy="currentDateFrom"
                   data-id="current-date-from-input"
                   type="text"
                   class="chart-option-setting-row custom-time-input first-from"
-              />
-              <div class="section-datepicker">
-                <atoms-datepicker
+                />
+                <div class="section-datepicker">
+                  <atoms-datepicker
                     v-model="dateFrom"
                     :lang="props.currentLang"
                     class="chart-option-setting-row custom-time-input"
                     test-id="overview-first-date-datepicker"
                     @update="onUpdateDateFrom"
-                />
-              </div>
-              <input
+                  />
+                </div>
+                <input
                   id="current-time-from"
                   v-model="currentTimeFrom"
                   data-id="current-time-from-input"
                   type="text"
                   class="chart-option-setting-row custom-time-input"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td class="text-right">
-            <label class="custom-time-label">
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td class="text-right">
+              <label class="custom-time-label">
                 <span class="custom-time-label-text text-capitalize">
                   {{ localization.common.to }}:
                 </span>
-            </label>
-          </td>
-          <td>
-            <div class="flex-align-center input-row-container">
-              <input
+              </label>
+            </td>
+            <td>
+              <div class="flex-align-center input-row-container">
+                <input
                   id="current-date-to"
                   v-model.lazy="currentDateTo"
                   data-id="current-date-to-input"
                   type="text"
                   class="chart-option-setting-row custom-time-input first-from"
-              />
-              <div class="section-datepicker">
-                <atoms-datepicker
+                />
+                <div class="section-datepicker">
+                  <atoms-datepicker
                     v-model="dateTo"
                     :lang="props.currentLang"
                     class="chart-option-setting-row custom-time-input"
                     test-id="overview-first-date-to-datepicker"
                     @update="onUpdateDateTo"
-                />
-              </div>
-              <input
+                  />
+                </div>
+                <input
                   id="current-time-to"
                   v-model="currentTimeTo"
                   data-id="current-time-to-input"
                   type="text"
                   class="chart-option-setting-row custom-time-input"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td></td>
-          <td class="text-format-date">
-            ({{ localization.inventoryMonitor.dateTimeIsoFormat }})
-          </td>
-        </tr>
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td class="text-format-date">
+              ({{ localization.inventoryMonitor.dateTimeIsoFormat }})
+            </td>
+          </tr>
         </tbody>
       </table>
     </template>
@@ -124,7 +123,7 @@ const props = defineProps<{
 
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'submit', value: number[]): void
+  (event: 'submit'): void
   (event: 'update-date-from', value: any): void
   (event: 'update-date-to', value: any): void
 }>()
@@ -137,6 +136,13 @@ const onUpdateDateFrom = (event: any): void => {
 const onUpdateDateTo = (event: any): void => {
   emits('update-date-to', event)
 }
+
+const onSubmit = (): void => {
+  emits('submit')
+}
+const onHide = (): void => {
+  emits('hide')
+}
 </script>
 
 <style scoped lang="scss">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.815",
+  "version": "1.4.817",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.17",
-    "bfg-uikit": "1.0.334",
+    "bfg-uikit": "1.0.338",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }