bfg-common 1.4.723 → 1.4.725

package/assets/scss/common/normalize.scss

@@ -26,6 +26,12 @@ html:not(.is-new-view) {
   }
 }
 
+[dir="rtl"] {
+  .tree-node-text {
+    text-align: right;
+  }
+}
+
 * button:focus {
   outline: none;
 }

package/components/common/browse/blocks/contents/Files.vue

@@ -4,7 +4,7 @@
     :selected-folder-files="props.selectedFolderFiles"
     :selected-file="props.selectedFile"
     :browse-loading="props.browseLoading"
-    @select-file="emits('select-file', $events)"
+    @select-file="onSelectFile"
   />
   <common-browse-blocks-contents-files-old
     v-else

package/components/common/layout/theHeader/lib/models/enums.ts

@@ -1,4 +1,5 @@
 export enum UI_E_Languages {
+  'ar_SA' = 'ar',
   'en_US' = 'en',
   'ru_RU' = 'ru',
   'hy_AM' = 'hy',

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/ChangeLanguage.vue

@@ -5,7 +5,7 @@
     :description="description"
     :radio-options="radioOptions"
     :language-mode="languageMode"
-    :locales="locales"
+    :locales="localsLocal"
     @update-language="onSelectLang"
     @update-is-browser="onUpdateIsBrowser"
   />
@@ -15,7 +15,7 @@
     :description="description"
     :radio-options="radioOptions"
     :language-mode="languageMode"
-    :locales="locales"
+    :locales="localsLocal"
     @update-language="onSelectLang"
     @update-is-browser="onUpdateIsBrowser"
   />
@@ -107,4 +107,7 @@ watch(
   },
   { immediate: true }
 )
+
+// TODO remove
+const localsLocal = ref<any>(locales.filter((_, i) => i > 0))
 </script>

package/components/common/mainNavigationPanel/MainNavigationPanelOld.vue

@@ -62,7 +62,9 @@
             :disabled="props.disabledPin"
             @change="emits('change-menu-pin')"
           />
-          <label for="pin-menu-control">{{ localization.common.pinMenu }}</label>
+          <label for="pin-menu-control">{{
+            localization.common.pinMenu
+          }}</label>
         </div>
       </div>
     </div>
@@ -95,6 +97,34 @@ const menuPined = defineModel<boolean>('menuPined', {
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
+<style>
+:root:not(.is-new-view) {
+  --vertical-nav-bg-color-old: rgba(232, 232, 232, 0.85);
+  --vertical-nav-item-color-old: #565656;
+  --vertical-nav-active-item-color-old: #fff;
+  --vertical-nav-divider-border-color-old: #ccc;
+  --vertical-border-color-old: tranparent;
+
+  /*rtl*/
+  --main-menu-trigger-icon-rotate: rotate(-90deg);
+  --main-menu-trigger-icon-rotate-closed: rotate(90deg);
+  --main-menu-trigger-icon-margin: 0 0.416666rem 0 auto;
+}
+:root:not(.is-new-view).dark-theme {
+  --vertical-nav-bg-color-old: #17242b;
+  --vertical-nav-item-color-old: #e9ecef;
+  --vertical-nav-active-item-color-old: #000;
+  --vertical-nav-divider-border-color-old: #495865;
+  --vertical-border-color-old: #495865;
+}
+
+:root:not(.is-new-view)[dir='rtl'] {
+  --main-menu-trigger-icon-rotate: rotate(90deg);
+  --main-menu-trigger-icon-rotate-closed: rotate(-90deg);
+  --main-menu-trigger-icon-margin: 0 auto 0 0.416666rem;
+}
+</style>
+
 <style scoped lang="scss">
 .main-navigation-panel {
   display: flex;
@@ -117,7 +147,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
         width: 48px;
         .nav-trigger {
           svg {
-            transform: rotate(90deg);
+            transform: var(--main-menu-trigger-icon-rotate-closed);
           }
         }
         .nav-content {
@@ -140,13 +170,16 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     .nav-trigger {
       margin-top: 0;
       outline: none;
+
       .nav-trigger-icon {
         height: 16px;
+        margin: var(--main-menu-trigger-icon-margin);
+
         svg {
           fill: var(--arrows-icon);
           width: 16px;
           height: 16px;
-          transform: rotate(-90deg);
+          transform: var(--main-menu-trigger-icon-rotate);
         }
       }
     }
@@ -265,20 +298,3 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   }
 }
 </style>
-
-<style>
-:root:not(.is-new-view) {
-  --vertical-nav-bg-color-old: rgba(232, 232, 232, 0.85);
-  --vertical-nav-item-color-old: #565656;
-  --vertical-nav-active-item-color-old: #fff;
-  --vertical-nav-divider-border-color-old: #ccc;
-  --vertical-border-color-old: tranparent;
-}
-:root:not(.is-new-view).dark-theme {
-  --vertical-nav-bg-color-old: #17242b;
-  --vertical-nav-item-color-old: #e9ecef;
-  --vertical-nav-active-item-color-old: #000;
-  --vertical-nav-divider-border-color-old: #495865;
-  --vertical-border-color-old: #495865;
-}
-</style>

package/components/common/monitor/advanced/Advanced.vue

@@ -1,244 +1,244 @@
-<template>
-  <div id="advanced-page" class="fill-parent">
-    <div class="routed-view-panel-layout">
-      <div class="settingsViewHeader">
-        <h3 class="settingsBlockTitle m-0">
-          {{ localization.inventoryMonitor.advancedPerformance }}
-        </h3>
-      </div>
-      <div v-if="props.isEmpty" class="empty-data">
-        {{ localization.inventoryMonitor.emptyAdvancedGraphText }}
-      </div>
-      <div v-else class="fill-parent flex-column">
-        <div class="vertical-flex-container fill-parent">
-          <common-monitor-advanced-tools
-            v-model:selected-timespan-type="localSelectedTimespanType"
-            :type="props.type"
-            :start-date="props.data?.pointStart || 0"
-            :end-date="props.data?.pointEnd || 0"
-            :chart-title="props.data?.groupName || ''"
-            :language="props.language"
-            :selected-counters-keys="props.selectedCountersKeys"
-            :selected-metric="props.selectedMetric"
-            :selected-metric-local="props.selectedMetricLocal"
-            :disabled-period="props.disabledPeriod"
-            :disabled-view="props.disabledView"
-            :selected-chart-type="props.selectedChartType"
-            :units-count="props.unitsCount"
-            :period-type="props.periodType"
-            :selected-custom-time="props.selectedCustomTime"
-            :selected-chart-option-name="props.selectedChartOptionName"
-            :custom-date-from="props.customDateFrom"
-            :custom-date-to="props.customDateTo"
-            :custom-time-from="props.customTimeFrom"
-            :custom-time-to="props.customTimeTo"
-            :total-cores="totalCores"
-            :host-id="props.hostId"
-            :selected-objects="props.selectedObjects"
-            :project="props.project"
-            :objects-loading="props.objectsLoading"
-            :objects-data="props.objectsData"
-            :valid-date-end="props.validDateEnd"
-            :format-date="props.formatDate"
-            @update-tools="emits('update-tools', $event)"
-            @exporting="onExporting"
-            @open-advanced-page="onGetEmptyPage"
-            @select-row="emits('select-row', $event)"
-            @select-metric-local="emits('select-metric-local', $event)"
-            @update-chart-type="emits('update-chart-type', $event)"
-            @update-timespan-type="emits('update-timespan-type', $event)"
-            @update-unit-count="emits('update-unit-count', $event)"
-            @update-period-type="emits('update-period-type', $event)"
-            @update-custom-time="emits('update-custom-time', $event)"
-            @delete-option="emits('delete-option')"
-            @submit-options="emits('submit-options', $event)"
-          />
-
-          <div v-show="!props.data" class="empty-container">
-            {{
-              localization.inventoryMonitor
-                .noPerformanceCurrentlySelectedMetrics
-            }}
-          </div>
-
-          <div v-show="props.data">
-            <div class="main-graphs-loader relative">
-              <common-monitor-advanced-graph-view
-                :loading="props.advancedLoading"
-                :data="props.data"
-                :update="update"
-                :export="exportGraph"
-                :selected-row="selectedRow"
-                :dark-mode="props.darkMode"
-                :formatted-datetime="props.formattedDatetime"
-                :get-date-format="props.getDateFormat"
-                :language="props.language"
-                :selected-chart-type="props.selectedChartType"
-              />
-              <div class="datatable">
-                <common-monitor-advanced-table
-                  :data="props.tableData"
-                  @select="onCheckSelectedRow"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
-import type { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
-import type { UI_I_MonitorGraphPayload } from '~/components/common/monitor/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import type {
-  UI_T_ChartHost,
-  UI_T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
-import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
-import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
-import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import { getCountCores } from '~/components/common/monitor/advanced/tools/lib/utils/countCores'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  advancedLoading: boolean
-  data: I_SeriesLine | null
-  cpuCoresDataData: I_SeriesLine | null
-  tableData: UI_I_PerformanceItem[] | []
-  language: string
-  darkMode: boolean
-  formattedDatetime: any
-  getDateFormat: any
-  selectedCountersKeys: number[]
-  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  selectedChartOptionName: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  hostId: string
-  selectedObjects: string
-  project: UI_T_Project
-  objectsLoading: boolean
-  objectsData: UI_I_ObjectItem[]
-  validDateEnd: number
-  formatDate: string
-  disabledPeriod?: boolean
-  disabledView?: boolean
-  isEmpty?: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
-  (event: 'open-advanced-page'): void
-  (event: 'update-selected-row', value: number[]): void
-  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (event: 'select-metric-local', value: string): void
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'delete-option'): void
-  (event: 'submit-options', value: UI_I_OptionsForm): void
-  (event: 'update:selected-timespan-type', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const localSelectedTimespanType = computed<string>({
-  get() {
-    return props.selectedTimespanType
-  },
-  set(newValue) {
-    emits('update:selected-timespan-type', newValue)
-  },
-})
-
-const totalCores = ref<number>(0)
-let isFirstUpdate = true
-watch(
-  () => props.cpuCoresDataData,
-  (newValue) => {
-    if (!newValue || !isFirstUpdate) return
-
-    totalCores.value = getCountCores(newValue)
-    isFirstUpdate = false
-  },
-  { immediate: true }
-)
-
-const exportGraph = ref<string>('')
-const onExporting = (key: string): void => {
-  exportGraph.value = key
-}
-
-const onGetEmptyPage = (): void => emits('open-advanced-page')
-
-const update = ref<number>(0)
-
-const selectedRow = ref<number[]>([])
-const onCheckSelectedRow = (data: number[]): void => {
-  selectedRow.value = data
-}
-</script>
-
-<style scoped lang="scss">
-#advanced-page {
-  overflow-x: hidden;
-}
-.fill-parent {
-  flex-direction: column;
-
-  .empty-data {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .empty-container {
-    min-height: 300px;
-    height: 100%;
-    background-color: var(--block-view-bg-color5);
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-  }
-
-  .routed-view-panel-layout {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-
-    .settingsViewHeader {
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-
-      .settingsBlockTitle {
-        font-size: 22px;
-        font-weight: 400;
-        color: var(--light-white-100);
-        padding: 4px 0 4px 2px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div id="advanced-page" class="fill-parent">
+    <div class="routed-view-panel-layout">
+      <div class="settingsViewHeader">
+        <h3 class="settingsBlockTitle m-0">
+          {{ localization.inventoryMonitor.advancedPerformance }}
+        </h3>
+      </div>
+      <div v-if="props.isEmpty" class="empty-data">
+        {{ localization.inventoryMonitor.emptyAdvancedGraphText }}
+      </div>
+      <div v-else class="fill-parent flex-column">
+        <div class="vertical-flex-container fill-parent">
+          <common-monitor-advanced-tools
+            v-model:selected-timespan-type="localSelectedTimespanType"
+            :type="props.type"
+            :start-date="props.data?.pointStart || 0"
+            :end-date="props.data?.pointEnd || 0"
+            :chart-title="props.data?.groupName || ''"
+            :language="props.language"
+            :selected-counters-keys="props.selectedCountersKeys"
+            :selected-metric="props.selectedMetric"
+            :selected-metric-local="props.selectedMetricLocal"
+            :disabled-period="props.disabledPeriod"
+            :disabled-view="props.disabledView"
+            :selected-chart-type="props.selectedChartType"
+            :units-count="props.unitsCount"
+            :period-type="props.periodType"
+            :selected-custom-time="props.selectedCustomTime"
+            :selected-chart-option-name="props.selectedChartOptionName"
+            :custom-date-from="props.customDateFrom"
+            :custom-date-to="props.customDateTo"
+            :custom-time-from="props.customTimeFrom"
+            :custom-time-to="props.customTimeTo"
+            :total-cores="totalCores"
+            :host-id="props.hostId"
+            :selected-objects="props.selectedObjects"
+            :project="props.project"
+            :objects-loading="props.objectsLoading"
+            :objects-data="props.objectsData"
+            :valid-date-end="props.validDateEnd"
+            :format-date="props.formatDate"
+            @update-tools="emits('update-tools', $event)"
+            @exporting="onExporting"
+            @open-advanced-page="onGetEmptyPage"
+            @select-row="emits('select-row', $event)"
+            @select-metric-local="emits('select-metric-local', $event)"
+            @update-chart-type="emits('update-chart-type', $event)"
+            @update-timespan-type="emits('update-timespan-type', $event)"
+            @update-unit-count="emits('update-unit-count', $event)"
+            @update-period-type="emits('update-period-type', $event)"
+            @update-custom-time="emits('update-custom-time', $event)"
+            @delete-option="emits('delete-option')"
+            @submit-options="emits('submit-options', $event)"
+          />
+
+          <div v-show="!props.data" class="empty-container">
+            {{
+              localization.inventoryMonitor
+                .noPerformanceCurrentlySelectedMetrics
+            }}
+          </div>
+
+          <div v-show="props.data">
+            <div class="main-graphs-loader relative">
+              <common-monitor-advanced-graph-view
+                :loading="props.advancedLoading"
+                :data="props.data"
+                :update="update"
+                :export="exportGraph"
+                :selected-row="selectedRow"
+                :dark-mode="props.darkMode"
+                :formatted-datetime="props.formattedDatetime"
+                :get-date-format="props.getDateFormat"
+                :language="props.language"
+                :selected-chart-type="props.selectedChartType"
+              />
+              <div class="datatable">
+                <common-monitor-advanced-table
+                  :data="props.tableData"
+                  @select="onCheckSelectedRow"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_MonitorGraphPayload } from '~/components/common/monitor/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { getCountCores } from '~/components/common/monitor/advanced/tools/lib/utils/countCores'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  advancedLoading: boolean
+  data: I_SeriesLine | null
+  cpuCoresDataData: I_SeriesLine | null
+  tableData: UI_I_PerformanceItem[] | []
+  language: string
+  darkMode: boolean
+  formattedDatetime: any
+  getDateFormat: any
+  selectedCountersKeys: number[]
+  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
+  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  hostId: string
+  selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
+  disabledPeriod?: boolean
+  disabledView?: boolean
+  isEmpty?: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-tools', value: UI_I_MonitorGraphPayload): void
+  (event: 'open-advanced-page'): void
+  (event: 'update-selected-row', value: number[]): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric-local', value: string): void
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'delete-option'): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'update:selected-timespan-type', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localSelectedTimespanType = computed<string>({
+  get() {
+    return props.selectedTimespanType
+  },
+  set(newValue) {
+    emits('update:selected-timespan-type', newValue)
+  },
+})
+
+const totalCores = ref<number>(0)
+let isFirstUpdate = true
+watch(
+  () => props.cpuCoresDataData,
+  (newValue) => {
+    if (!newValue || !isFirstUpdate) return
+
+    totalCores.value = getCountCores(newValue)
+    isFirstUpdate = false
+  },
+  { immediate: true }
+)
+
+const exportGraph = ref<string>('')
+const onExporting = (key: string): void => {
+  exportGraph.value = key
+}
+
+const onGetEmptyPage = (): void => emits('open-advanced-page')
+
+const update = ref<number>(0)
+
+const selectedRow = ref<number[]>([])
+const onCheckSelectedRow = (data: number[]): void => {
+  selectedRow.value = data
+}
+</script>
+
+<style scoped lang="scss">
+#advanced-page {
+  overflow-x: hidden;
+}
+.fill-parent {
+  flex-direction: column;
+
+  .empty-data {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .empty-container {
+    min-height: 300px;
+    height: 100%;
+    background-color: var(--block-view-bg-color5);
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  .routed-view-panel-layout {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    .settingsViewHeader {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+
+      .settingsBlockTitle {
+        font-size: 22px;
+        font-weight: 400;
+        color: var(--light-white-100);
+        padding: 4px 0 4px 2px;
+      }
+    }
+  }
+}
+</style>