bfg-common 1.6.30 → 1.6.31

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/TimeFormat.vue

@@ -12,12 +12,13 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 import { formatOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions'
+import type { UI_T_Project } from '~/lib/models/types'
 
 const timeFormat = defineModel<UI_T_TimeValue>('timeFormat')
 const props = defineProps<{
+  project: UI_T_Project
   newView: boolean
 }>()
-
 const currentComponent = computed(() =>
   props.newView
     ? defineAsyncComponent(() => import('./New.vue'))
@@ -28,11 +29,14 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 const config = useRuntimeConfig()
 
+/* TODO SC-2104 */
 const description = computed<string>(() =>
-  localization.value.common.timeFormatDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
+  props.project === 'sphere'
+    ? localization.value.common.timeFormatDesc1
+    : localization.value.common.timeFormatDesc.replaceAll(
+        '{trademark}',
+        String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+      )
 )
 
 const formatOptions = readonly<UI_I_RadioItem[]>(

package/components/common/layout/theHeader/userMenu/modals/preferences/view/Old.vue

@@ -15,13 +15,9 @@
       />
     </div>
 
-    <div class="description second-description">
-      {{ localization.myPreferences.showNotificationDescription }}
-    </div>
-
-    <div class="flex-align-center">
+    <div class="flex-align-center second-description">
       <label for="show-notification">{{
-        localization.myPreferences.showNotification
+        localization.myPreferences.showNotificationDescription
       }}</label>
       <input
         id="show-notification"
@@ -63,10 +59,10 @@ window.tools = new Proxy(
 <style lang="scss" scoped>
 .description {
   margin-bottom: 10px;
+}
 
-  &.second-description {
-    margin-top: 20px;
-  }
+.second-description {
+  margin-top: 20px;
 }
 
 label {

package/components/common/layout/theHeader/userMenu/modals/preferences/view/View.vue

@@ -30,10 +30,13 @@ const currentComponent = computed(() =>
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const description = computed<string>(() => {
-  return localization.value.common.viewDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
-})
+/* TODO SC-2104 */
+const description = computed<string>(() =>
+  props.project === 'sphere'
+    ? localization.value.common.viewDesc1
+    : localization.value.common.viewDesc.replaceAll(
+        '{trademark}',
+        String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+      )
+)
 </script>

package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue

@@ -143,7 +143,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   &.pinned {
     .nav-context {
       position: relative;
-      z-index: calc(var(--z-default) + 1);
+      z-index: calc(var(--z-fixed) + 2);
     }
   }
   &:not(.pinned) {
@@ -177,6 +177,8 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       }
     }
     &:not(.collapsed) {
+      min-width: 240px;
+
       :deep(.tooltip-container-hover) {
         display: none;
       }

package/components/common/monitor/advanced/table/lib/models/interfaces.ts

@@ -1,13 +1,13 @@
-export interface UI_I_PerformanceItem {
-  id: number
-  key: string
-  measurement: string
-  units: string
-  latest: number
-  maximum: number
-  minimum: number
-  average: number
-  relatedDeviceName: string
-  rollupType: string
-  description: string
-}
+export interface UI_I_PerformanceItem {
+  id: number
+  key: string
+  measurement: string
+  units: string
+  latest: number
+  maximum: number
+  minimum: number
+  average: number
+  relatedDeviceName: string
+  rollupType: string
+  description: string
+}

package/components/common/monitor/advanced/table/lib/models/types.ts

@@ -1,7 +1,7 @@
-export type UI_T_PerformanceColumnKey =
-  | 'key'
-  | 'relatedDeviceName'
-  | 'description'
-  | 'units'
-  | 'maximum'
-  | 'minimum'
+export type UI_T_PerformanceColumnKey =
+  | 'key'
+  | 'relatedDeviceName'
+  | 'description'
+  | 'units'
+  | 'maximum'
+  | 'minimum'

package/components/common/monitor/advanced/table/tableNew/TableNew.vue

@@ -1,93 +1,93 @@
-<template>
-  <div class="advanced-main-table">
-    <ui-data-table
-      :data="data"
-      :options="options"
-      :loading="props.loading"
-      :texts="tableTexts"
-      test-id="advanced-table"
-      @select-row="onSelectRow"
-    >
-      <template #icon="{ item }">
-        <div
-          :style="{ backgroundColor: item.data.color }"
-          class="color-circle"
-        ></div>
-      </template>
-      <template #zone="{ item }">
-        <span class="zone-item-block">
-          <span class="icon vsphere-icon-vcenter"></span>
-          <span>{{ item.text }}</span>
-        </span>
-      </template>
-      <template #default-actions></template>
-    </ui-data-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_DataTable,
-  UI_I_DataTableOptions,
-  UI_I_DataTableBody,
-  UI_I_TableTexts,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import {
-  bodyOptions,
-  headOptions,
-} from '~/components/common/monitor/advanced/table/tableNew/lib/config/options'
-import { tableTextsFunc } from '~/lib/config/uiTable'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  loading: boolean
-  items: UI_I_PerformanceItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'select', value: number[]): void
-}>()
-
-const data = computed<UI_I_DataTable>(() =>
-  bodyOptions(localization.value, props.items)
-)
-
-const options = computed<UI_I_DataTableOptions>(() => headOptions())
-
-const onSelectRow = (data: UI_I_DataTableBody[]): void => {
-  emits(
-    'select',
-    data.map((item) => item.row)
-  )
-}
-
-const tableTexts = computed<UI_I_TableTexts>(() =>
-  tableTextsFunc(localization.value)
-)
-</script>
-
-<style scoped lang="scss">
-.advanced-main-table {
-  margin: 12px 6px 16px 6px;
-
-  :deep(.title-container) {
-    height: 20px;
-
-    h5 {
-      margin-bottom: 0;
-    }
-  }
-  .color-circle {
-    width: 18px;
-    height: 18px;
-    border-radius: 32px;
-  }
-  .zone-item-block {
-    display: flex;
-    align-items: center;
-    column-gap: 4px;
-  }
-}
-</style>
+<template>
+  <div class="advanced-main-table">
+    <ui-data-table
+      :data="data"
+      :options="options"
+      :loading="props.loading"
+      :texts="tableTexts"
+      test-id="advanced-table"
+      @select-row="onSelectRow"
+    >
+      <template #icon="{ item }">
+        <div
+          :style="{ backgroundColor: item.data.color }"
+          class="color-circle"
+        ></div>
+      </template>
+      <template #zone="{ item }">
+        <span class="zone-item-block">
+          <span class="icon vsphere-icon-vcenter"></span>
+          <span>{{ item.text }}</span>
+        </span>
+      </template>
+      <template #default-actions></template>
+    </ui-data-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableOptions,
+  UI_I_DataTableBody,
+  UI_I_TableTexts,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import {
+  bodyOptions,
+  headOptions,
+} from '~/components/common/monitor/advanced/table/tableNew/lib/config/options'
+import { tableTextsFunc } from '~/lib/config/uiTable'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  loading: boolean
+  items: UI_I_PerformanceItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'select', value: number[]): void
+}>()
+
+const data = computed<UI_I_DataTable>(() =>
+  bodyOptions(localization.value, props.items)
+)
+
+const options = computed<UI_I_DataTableOptions>(() => headOptions())
+
+const onSelectRow = (data: UI_I_DataTableBody[]): void => {
+  emits(
+    'select',
+    data.map((item) => item.row)
+  )
+}
+
+const tableTexts = computed<UI_I_TableTexts>(() =>
+  tableTextsFunc(localization.value)
+)
+</script>
+
+<style scoped lang="scss">
+.advanced-main-table {
+  margin: 12px 6px 16px 6px;
+
+  :deep(.title-container) {
+    height: 20px;
+
+    h5 {
+      margin-bottom: 0;
+    }
+  }
+  .color-circle {
+    width: 18px;
+    height: 18px;
+    border-radius: 32px;
+  }
+  .zone-item-block {
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+  }
+}
+</style>

package/components/common/monitor/advanced/table/tableNew/lib/config/options.ts

@@ -1,109 +1,109 @@
-import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import { constructUsersAndGroupsTableItems } from '~/components/common/monitor/advanced/table/tableNew/lib/utils/constructBody'
-
-export const bodyOptions = (
-  localization: UI_I_Localization,
-  items: UI_I_PerformanceItem[]
-): UI_I_DataTable => {
-  const currentBody = constructUsersAndGroupsTableItems(items)
-
-  return {
-    id: 'advanced-main-table-config',
-    title: `${localization.inventoryMonitor.performanceChartLegend} (${items.length})`,
-    selectedRows: [],
-    isAllSelected: false,
-    header: [
-      {
-        col: 'col0',
-        colName: 'key',
-        text: localization.inventoryMonitor.chartColor,
-        width: '96px',
-        isSortable: false,
-        sort: 'asc',
-        show: true,
-        filter: false,
-      },
-      {
-        col: 'col1',
-        colName: 'object',
-        text: localization.inventoryMonitor.metricName,
-        width: '150px',
-        isSortable: true,
-        sort: 'asc',
-        show: true,
-        filter: true,
-      },
-      {
-        col: 'col2',
-        colName: 'measurement',
-        text: localization.inventoryMonitor.metricDescription,
-        width: '192px',
-        isSortable: true,
-        sort: 'asc',
-        show: true,
-        filter: true,
-      },
-      {
-        col: 'col3',
-        colName: 'units',
-        text: localization.inventoryMonitor.unitOfMeasurement,
-        width: '150px',
-        isSortable: true,
-        sort: 'asc',
-        show: true,
-        filter: true,
-      },
-      {
-        col: 'col4',
-        colName: 'maximum',
-        text: localization.common.maximum,
-        width: '150px',
-        isSortable: true,
-        sort: 'asc',
-        show: true,
-        filter: true,
-      },
-      {
-        col: 'col5',
-        colName: 'minimum',
-        text: localization.common.minimum,
-        width: '150px',
-        isSortable: true,
-        sort: 'asc',
-        show: true,
-        filter: true,
-      },
-      {
-        col: 'default-actions',
-        colName: 'default-actions',
-        text: '',
-        show: true,
-      },
-    ],
-
-    body: currentBody,
-  }
-}
-
-export const headOptions = (): UI_I_DataTableOptions => {
-  return {
-    selectType: 'checkbox',
-    perPageOptions: [
-      { text: '20', value: 20, default: true },
-      { text: '50', value: 50 },
-      { text: '100', value: 100 },
-    ],
-    inBlock: true,
-    isSelectable: true,
-    showPagination: false,
-    showPageInfo: false,
-    isSortable: true,
-    server: false,
-    isResizable: true,
-    showSearch: false,
-    showColumnManager: true,
-  }
-}
+import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import { constructUsersAndGroupsTableItems } from '~/components/common/monitor/advanced/table/tableNew/lib/utils/constructBody'
+
+export const bodyOptions = (
+  localization: UI_I_Localization,
+  items: UI_I_PerformanceItem[]
+): UI_I_DataTable => {
+  const currentBody = constructUsersAndGroupsTableItems(items)
+
+  return {
+    id: 'advanced-main-table-config',
+    title: `${localization.inventoryMonitor.performanceChartLegend} (${items.length})`,
+    selectedRows: [],
+    isAllSelected: false,
+    header: [
+      {
+        col: 'col0',
+        colName: 'key',
+        text: localization.inventoryMonitor.chartColor,
+        width: '96px',
+        isSortable: false,
+        sort: 'asc',
+        show: true,
+        filter: false,
+      },
+      {
+        col: 'col1',
+        colName: 'object',
+        text: localization.inventoryMonitor.metricName,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col2',
+        colName: 'measurement',
+        text: localization.inventoryMonitor.metricDescription,
+        width: '192px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col3',
+        colName: 'units',
+        text: localization.inventoryMonitor.unitOfMeasurement,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col4',
+        colName: 'maximum',
+        text: localization.common.maximum,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'col5',
+        colName: 'minimum',
+        text: localization.common.minimum,
+        width: '150px',
+        isSortable: true,
+        sort: 'asc',
+        show: true,
+        filter: true,
+      },
+      {
+        col: 'default-actions',
+        colName: 'default-actions',
+        text: '',
+        show: true,
+      },
+    ],
+
+    body: currentBody,
+  }
+}
+
+export const headOptions = (): UI_I_DataTableOptions => {
+  return {
+    selectType: 'checkbox',
+    perPageOptions: [
+      { text: '20', value: 20, default: true },
+      { text: '50', value: 50 },
+      { text: '100', value: 100 },
+    ],
+    inBlock: true,
+    isSelectable: true,
+    showPagination: false,
+    showPageInfo: false,
+    isSortable: true,
+    server: false,
+    isResizable: true,
+    showSearch: false,
+    showColumnManager: true,
+  }
+}

package/components/common/monitor/advanced/table/tableNew/lib/utils/constructBody.ts

@@ -1,25 +1,25 @@
-import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-
-export const constructUsersAndGroupsTableItems = (
-  items: UI_I_PerformanceItem[]
-): UI_I_DataTableBody[] => {
-  const result: UI_I_DataTableBody[] = []
-
-  items.forEach((item: UI_I_PerformanceItem, key: number) => {
-    result.push({
-      row: key,
-      data: [
-        { col: 'col0', key: 'icon', text: '', data: { color: item.key } },
-        { col: 'col1', key: 'zone', text: item.relatedDeviceName },
-        { col: 'col2', text: item.description },
-        { col: 'col3', text: item.units },
-        { col: 'col4', text: String(item.maximum) },
-        { col: 'col5', text: String(item.minimum) },
-        { col: 'default-actions', key: 'default-actions', text: '', data: {} },
-      ],
-    })
-  })
-
-  return result
-}
+import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+
+export const constructUsersAndGroupsTableItems = (
+  items: UI_I_PerformanceItem[]
+): UI_I_DataTableBody[] => {
+  const result: UI_I_DataTableBody[] = []
+
+  items.forEach((item: UI_I_PerformanceItem, key: number) => {
+    result.push({
+      row: key,
+      data: [
+        { col: 'col0', key: 'icon', text: '', data: { color: item.key } },
+        { col: 'col1', key: 'zone', text: item.relatedDeviceName },
+        { col: 'col2', text: item.description },
+        { col: 'col3', text: item.units },
+        { col: 'col4', text: String(item.maximum) },
+        { col: 'col5', text: String(item.minimum) },
+        { col: 'default-actions', key: 'default-actions', text: '', data: {} },
+      ],
+    })
+  })
+
+  return result
+}