bfg-common 1.6.41 → 1.6.42

package/components/common/diagramMain/header/HeaderOld.vue

@@ -1,234 +1,234 @@
-<template>
-  <div class="diagram-header">
-    <div class="diagram-header-left">
-      <atoms-the-icon
-        :class="[
-          'diagram-header__arrow-icon',
-          {
-            open: props.isShowDiagram,
-          },
-        ]"
-        :data-id="`${props.testId}-toggle-icon`"
-        name="angle"
-        @click="emits('toggle-diagram')"
-      />
-      <a>
-        <span>
-          {{ localization.common.standardSwitch }}:
-          {{ props.diagramName }}
-        </span>
-      </a>
-    </div>
-    <div v-if="props.isShowDiagram" class="diagram-header__btn-container">
-      <span class="vertical-separator"></span>
-      <button
-        id="add-networking-button"
-        v-permission="
-          'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
-        "
-        :data-id="`${props.testId}-add-networking-button`"
-        type="button"
-        @click="onShowModal('add-networking', props.diagramName)"
-      >
-        {{ localization.common.addNetworking }}
-      </button>
-      <button
-        id="switch-edit-button"
-        v-permission="'Networks.UpdateSwitch'"
-        :data-id="`${props.testId}-edit-button`"
-        type="button"
-        @click="onShowModal('switch-edit')"
-      >
-        {{ localization.common.edit }}
-      </button>
-      <button
-        id="switch-manage-physical-adapters-button"
-        v-permission="'Networks.UpdateSwitch'"
-        :data-id="`${props.testId}-manage-physical-adapters-button`"
-        type="button"
-        @click="onShowModal('switch-manage-physical-adapters')"
-      >
-        {{ localization.common.managePhysicalAdapters }}
-      </button>
-      <div class="diagram-main-actions-dots">
-        <atoms-collapse-nav
-          :close-after-click="true"
-          :items="switchMainNavigation"
-          :test-id="`${props.testId}-actions`"
-          popup-class="diagram-main-actions__popup"
-          @change="onShowModal"
-        />
-      </div>
-    </div>
-  </div>
-  <hr class="horizontal-separator" />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_NavigationItem,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import { switchMainNavigationFunc } from '~/components/common/diagramMain/modals/lib/config'
-
-const props = withDefaults(
-  defineProps<{
-    isShowDiagram: boolean
-    diagramName: string
-    testId: string
-    project?: UI_T_Project
-  }>(),
-  {
-    project: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle-diagram'): void
-  (
-    event: 'show-modal',
-    modalName: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
-  switchMainNavigationFunc(localization.value, props.testId)
-)
-
-const onShowModal = (modalName: string, diagramName?: string) => {
-  diagramName
-    ? emits('show-modal', modalName, { switch_name: diagramName })
-    : emits('show-modal', modalName)
-}
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .diagram-header {
-    &-left {
-      a {
-        span {
-          color: #79c6e6;
-
-          &:hover {
-            color: #49afd9;
-          }
-        }
-      }
-    }
-
-    &__btn-container {
-      button {
-        color: #89cbdf;
-
-        &:hover {
-          color: #57c8ea;
-        }
-      }
-    }
-  }
-}
-
-.diagram-header {
-  display: flex;
-  justify-self: flex-start;
-  width: 100%;
-  padding: 24px 16px 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  a {
-    color: #0072a3;
-    cursor: pointer;
-    font-weight: 700;
-    user-select: none;
-    line-height: 20px;
-    span {
-      font-weight: 700;
-      white-space: nowrap;
-    }
-  }
-
-  &-left {
-    display: flex;
-    flex-wrap: nowrap;
-    color: #49afd9;
-  }
-
-  &__arrow-icon {
-    width: 16px;
-    min-width: 16px;
-    height: 16px;
-    min-height: 16px;
-    margin-right: 4px;
-    transform: rotate(90deg);
-    align-self: center;
-    fill: var(--triger-icon-color);
-    cursor: pointer;
-    &.open {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__btn-container {
-    display: flex;
-
-    button {
-      font-size: 11px;
-      height: 24px;
-      border: none;
-      background: none;
-      margin-right: 0;
-      cursor: pointer;
-      display: inline-block;
-      white-space: nowrap;
-      text-align: center;
-      text-transform: uppercase;
-      color: #49afd9;
-      line-height: 20px;
-      max-height: 16.8px;
-      padding: 0 14px;
-      font-weight: 500;
-      letter-spacing: 1px;
-
-      &:hover {
-        color: #004d8a;
-      }
-    }
-  }
-}
-
-.diagram-main-actions-dots {
-  position: relative;
-  transform: translate(62px, -11px);
-}
-
-.horizontal-separator {
-  margin: 5px 10px 10px;
-  border-left: 0;
-  border-right: 0;
-  border-color: #ddd;
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-  border-top: 0px solid #eee;
-  width: 100%;
-}
-
-.vertical-separator {
-  border: 1px solid #ddd;
-  border-left: none;
-  margin: 0 3px 0 14px;
-}
-</style>
+<template>
+  <div class="diagram-header">
+    <div class="diagram-header-left">
+      <atoms-the-icon
+        :class="[
+          'diagram-header__arrow-icon',
+          {
+            open: props.isShowDiagram,
+          },
+        ]"
+        :data-id="`${props.testId}-toggle-icon`"
+        name="angle"
+        @click="emits('toggle-diagram')"
+      />
+      <a>
+        <span>
+          {{ localization.common.standardSwitch }}:
+          {{ props.diagramName }}
+        </span>
+      </a>
+    </div>
+    <div v-if="props.isShowDiagram" class="diagram-header__btn-container">
+      <span class="vertical-separator"></span>
+      <button
+        id="add-networking-button"
+        v-permission="
+          'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
+        "
+        :data-id="`${props.testId}-add-networking-button`"
+        type="button"
+        @click="onShowModal('add-networking', props.diagramName)"
+      >
+        {{ localization.common.addNetworking }}
+      </button>
+      <button
+        id="switch-edit-button"
+        v-permission="'Networks.UpdateSwitch'"
+        :data-id="`${props.testId}-edit-button`"
+        type="button"
+        @click="onShowModal('switch-edit')"
+      >
+        {{ localization.common.edit }}
+      </button>
+      <button
+        id="switch-manage-physical-adapters-button"
+        v-permission="'Networks.UpdateSwitch'"
+        :data-id="`${props.testId}-manage-physical-adapters-button`"
+        type="button"
+        @click="onShowModal('switch-manage-physical-adapters')"
+      >
+        {{ localization.common.managePhysicalAdapters }}
+      </button>
+      <div class="diagram-main-actions-dots">
+        <atoms-collapse-nav
+          :close-after-click="true"
+          :items="switchMainNavigation"
+          :test-id="`${props.testId}-actions`"
+          popup-class="diagram-main-actions__popup"
+          @change="onShowModal"
+        />
+      </div>
+    </div>
+  </div>
+  <hr class="horizontal-separator" />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_NavigationItem,
+  UI_I_ModalsInitialData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { switchMainNavigationFunc } from '~/components/common/diagramMain/modals/lib/config'
+
+const props = withDefaults(
+  defineProps<{
+    isShowDiagram: boolean
+    diagramName: string
+    testId: string
+    project?: UI_T_Project
+  }>(),
+  {
+    project: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle-diagram'): void
+  (
+    event: 'show-modal',
+    modalName: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
+  switchMainNavigationFunc(localization.value, props.testId)
+)
+
+const onShowModal = (modalName: string, diagramName?: string) => {
+  diagramName
+    ? emits('show-modal', modalName, { switch_name: diagramName })
+    : emits('show-modal', modalName)
+}
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .diagram-header {
+    &-left {
+      a {
+        span {
+          color: #79c6e6;
+
+          &:hover {
+            color: #49afd9;
+          }
+        }
+      }
+    }
+
+    &__btn-container {
+      button {
+        color: #89cbdf;
+
+        &:hover {
+          color: #57c8ea;
+        }
+      }
+    }
+  }
+}
+
+.diagram-header {
+  display: flex;
+  justify-self: flex-start;
+  width: 100%;
+  padding: 24px 16px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  a {
+    color: #0072a3;
+    cursor: pointer;
+    font-weight: 700;
+    user-select: none;
+    line-height: 20px;
+    span {
+      font-weight: 700;
+      white-space: nowrap;
+    }
+  }
+
+  &-left {
+    display: flex;
+    flex-wrap: nowrap;
+    color: #49afd9;
+  }
+
+  &__arrow-icon {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    min-height: 16px;
+    margin-right: 4px;
+    transform: rotate(90deg);
+    align-self: center;
+    fill: var(--triger-icon-color);
+    cursor: pointer;
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__btn-container {
+    display: flex;
+
+    button {
+      font-size: 11px;
+      height: 24px;
+      border: none;
+      background: none;
+      margin-right: 0;
+      cursor: pointer;
+      display: inline-block;
+      white-space: nowrap;
+      text-align: center;
+      text-transform: uppercase;
+      color: #49afd9;
+      line-height: 20px;
+      max-height: 16.8px;
+      padding: 0 14px;
+      font-weight: 500;
+      letter-spacing: 1px;
+
+      &:hover {
+        color: #004d8a;
+      }
+    }
+  }
+}
+
+.diagram-main-actions-dots {
+  position: relative;
+  transform: translate(62px, -11px);
+}
+
+.horizontal-separator {
+  margin: 5px 10px 10px;
+  border-left: 0;
+  border-right: 0;
+  border-color: #ddd;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border-top: 0px solid #eee;
+  width: 100%;
+}
+
+.vertical-separator {
+  border: 1px solid #ddd;
+  border-left: none;
+  margin: 0 3px 0 14px;
+}
+</style>

package/components/common/monitor/advanced/table/tableOld/TableOld.vue

@@ -1,93 +1,93 @@
-<template>
-  <div class="chart-legend">
-    <span class="title">{{
-      localization.inventoryMonitor.performanceChartLegend
-    }}</span>
-    <client-only>
-      <atoms-table-data-grid
-        v-model:selected-row="selectedRow"
-        v-model:column-keys="columnKeys"
-        v-model:page-size="pageSize"
-        v-model:page="page"
-        :head-items="headAInfo"
-        :body-items="dataBody"
-        :total-items="dataBody.length"
-        :total-pages="1"
-        type="checkbox"
-        class="data-table"
-        test-id="advances-table"
-        hide-page-size
-      >
-        <template #col1="{ item }">
-          <div
-            :style="[{ backgroundColor: item.data.color }]"
-            class="datagrid-column-color-block"
-          ></div>
-        </template>
-      </atoms-table-data-grid>
-    </client-only>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  data: UI_I_PerformanceItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'select', value: number[]): void
-}>()
-
-const selectedRow = ref<number[]>([])
-const pageSize = ref<number>(100)
-const page = ref<number>(1)
-const headAInfo = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
-watch(localization, () => {
-  columnKeys.value = table.columnKeys(localization.value)
-})
-const dataBody = ref<UI_I_BodyItem[][]>([])
-
-watch(
-  () => props.data,
-  (newValue) => {
-    if (!newValue) return
-
-    dataBody.value = table.bodyItems(newValue)
-  },
-  { immediate: true }
-)
-watch(
-  selectedRow,
-  (newValue) => {
-    emits('select', newValue)
-  },
-  { deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-.chart-legend {
-  .title {
-    font-weight: 700;
-    height: 20px;
-  }
-
-  .datagrid-column-color-block {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
+<template>
+  <div class="chart-legend">
+    <span class="title">{{
+      localization.inventoryMonitor.performanceChartLegend
+    }}</span>
+    <client-only>
+      <atoms-table-data-grid
+        v-model:selected-row="selectedRow"
+        v-model:column-keys="columnKeys"
+        v-model:page-size="pageSize"
+        v-model:page="page"
+        :head-items="headAInfo"
+        :body-items="dataBody"
+        :total-items="dataBody.length"
+        :total-pages="1"
+        type="checkbox"
+        class="data-table"
+        test-id="advances-table"
+        hide-page-size
+      >
+        <template #col1="{ item }">
+          <div
+            :style="[{ backgroundColor: item.data.color }]"
+            class="datagrid-column-color-block"
+          ></div>
+        </template>
+      </atoms-table-data-grid>
+    </client-only>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
+import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  data: UI_I_PerformanceItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'select', value: number[]): void
+}>()
+
+const selectedRow = ref<number[]>([])
+const pageSize = ref<number>(100)
+const page = ref<number>(1)
+const headAInfo = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const columnKeys = ref<UI_I_ColumnKey[]>(table.columnKeys(localization.value))
+watch(localization, () => {
+  columnKeys.value = table.columnKeys(localization.value)
+})
+const dataBody = ref<UI_I_BodyItem[][]>([])
+
+watch(
+  () => props.data,
+  (newValue) => {
+    if (!newValue) return
+
+    dataBody.value = table.bodyItems(newValue)
+  },
+  { immediate: true }
+)
+watch(
+  selectedRow,
+  (newValue) => {
+    emits('select', newValue)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.chart-legend {
+  .title {
+    font-weight: 700;
+    height: 20px;
+  }
+
+  .datagrid-column-color-block {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/HardwareHealth.vue

@@ -19,6 +19,7 @@
     :selected-host-name="props.selectedHostName"
     :hardware-health-tabs="tabItems"
     :generated-alert-text="generateAlertTextWithLink"
+    :project="props.project"
     @update-history-testimony-tools="
       emits('update-history-testimony-tools', $event)
     "
@@ -43,6 +44,7 @@
     :selected-host-name="props.selectedHostName"
     :hardware-health-tabs="hardwareHealthTabs"
     :generated-alert-text="generateAlertTextWithLink"
+    :project="props.project"
     @update-history-testimony-tools="
       emits('update-history-testimony-tools', $event)
     "
@@ -58,6 +60,7 @@ import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardw
 import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
 import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 import {
   hardwareHealthTabsFunc,
   hardwareHealthTabsNewFunc,
@@ -77,6 +80,7 @@ const props = defineProps<{
   validDateEnd: number
   formatDate: string
   selectedHostName: string
+  project: UI_T_Project
 }>()
 
 const emits = defineEmits<{

package/components/common/pages/hardwareHealth/HardwareHealthNew.vue

@@ -78,10 +78,16 @@
         :main-selected-row="mainSelectedRow"
         :counters-table-data="props.data"
         :selected-host-name="props.selectedHostName"
+        :project="props.project"
         @update-tools="emits('update-history-testimony-tools', $event)"
       />
 
-      <div :class="['table-content pt-4 h-full overflow-hidden px-[6px]', activeTab ]">
+      <div
+        :class="[
+          'table-content pt-4 h-full overflow-hidden px-[6px]',
+          activeTab,
+        ]"
+      >
         <common-pages-hardware-health-table-view-new
           :table-data="tableData || []"
           :total-items="tableData?.length || 0"
@@ -104,6 +110,7 @@ import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardw
 import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
 import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
 import type { UI_I_IndicatorAlerts } from '~/components/common/pages/hardwareHealth/indicators/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 
 const activeTab = defineModel<UI_T_HardwareHealthTabMode>('activeTab', {
   required: true,
@@ -131,6 +138,7 @@ const props = defineProps<{
   selectedHostName: string
   hardwareHealthTabs: UI_I_TabItem[]
   generatedAlertText: UI_I_StorageSensorsAlert
+  project: UI_T_Project
 }>()
 const emits = defineEmits<{
   (
@@ -234,7 +242,8 @@ const statusCounts = computed<UI_I_IndicatorAlerts>(() => {
 }
 
 .table-content {
-  &.alert-warning, &.history-testimony {
+  &.alert-warning,
+  &.history-testimony {
     :deep(.data-table-header th:not(:last-child)) {
       min-width: max-content !important;
     }

package/components/common/pages/hardwareHealth/HardwareHealthOld.vue

@@ -54,6 +54,7 @@
         :valid-date-end="props.validDateEnd"
         :format-date="props.formatDate"
         :selected-host-name="props.selectedHostName"
+        :project="props.project"
         @update-tools="emits('update-history-testimony-tools', $event)"
       />
 
@@ -79,6 +80,7 @@ import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/model
 import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
 import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
 import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 
 const activeTab = defineModel<UI_T_HardwareHealthTabMode>('activeTab', {
   required: true,
@@ -106,6 +108,7 @@ const props = defineProps<{
   selectedHostName: string
   hardwareHealthTabs: UI_I_CollapseNavItem[]
   generatedAlertText: UI_I_StorageSensorsAlert
+  project: UI_T_Project
 }>()
 
 const emits = defineEmits<{

package/components/common/pages/hardwareHealth/historyTestimony/Graph.vue

@@ -40,6 +40,7 @@
     :timespan-period-type="timespanPeriodType"
     :selected-row-power="selectedRowPower"
     :selected-row-temperature="selectedRowTemperature"
+    :project="props.project"
     @show-chart-modal="isShowChartModal = true"
     @hide-chart-modal="isShowChartModal = false"
     @update-tools="onUpdateTools"
@@ -47,7 +48,6 @@
     @power-selected-rows-local="powerSelectedRowsLocal = $event"
     @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
     @update-period-type="timespanPeriodType = $event"
-    @delete-option="onDeleteOption"
     @submit-options="onSubmitOptions"
   />
   <common-pages-hardware-health-history-testimony-graph-old
@@ -91,6 +91,7 @@
     :timespan-period-type="timespanPeriodType"
     :selected-row-power="selectedRowPower"
     :selected-row-temperature="selectedRowTemperature"
+    :project="props.project"
     @show-chart-modal="isShowChartModal = true"
     @hide-chart-modal="isShowChartModal = false"
     @update-tools="onUpdateTools"
@@ -98,7 +99,6 @@
     @power-selected-rows-local="powerSelectedRowsLocal = $event"
     @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
     @update-period-type="timespanPeriodType = $event"
-    @delete-option="onDeleteOption"
     @submit-options="onSubmitOptions"
   />
 </template>
@@ -117,6 +117,7 @@ import type {
 import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
 import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
 import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 
 const selectedView = defineModel<string>('selectedView')
 
@@ -133,6 +134,7 @@ const props = defineProps<{
   mainSelectedRow: number[]
   validDateEnd: number
   formatDate: string
+  project: UI_T_Project
   selectedHostName?: string
 }>()
 const emits = defineEmits<{
@@ -403,7 +405,5 @@ const onSubmitOptions = (data: UI_I_OptionsForm): void => {
       data
     )
 }
-
-const onDeleteOption = (): void => {}
 </script>
 <style scoped lang="scss"></style>

package/components/common/pages/hardwareHealth/historyTestimony/GraphNew.vue

@@ -25,6 +25,7 @@
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
     :selected-host-name="props.selectedHostName"
+    :project="props.project"
     @show-chart-modal="emits('show-chart-modal')"
     @hide-chart-modal="emits('hide-chart-modal')"
     @update-tools="emits('update-tools', $event)"
@@ -34,7 +35,6 @@
       emits('temperature-selected-rows-local', $event)
     "
     @update-period-type="emits('update-period-type', $event)"
-    @delete-option="emits('delete-option')"
     @submit-options="emits('submit-options', $event)"
   />
 
@@ -88,6 +88,7 @@ import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardw
 import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
 import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
 import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 
 const selectedView = defineModel<string>('selectedView', { required: true })
 
@@ -130,6 +131,7 @@ const props = defineProps<{
   timespanPeriodType: string
   selectedRowPower: number[]
   selectedRowTemperature: number[]
+  project: UI_T_Project
 }>()
 const emits = defineEmits<{
   (event: 'show-chart-modal'): void
@@ -145,7 +147,6 @@ const emits = defineEmits<{
     value: UI_I_HardwareHealthSensorsGraph[]
   ): void
   (event: 'update-period-type', value: string): void
-  (event: 'delete-option'): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
 }>()
 </script>

package/components/common/pages/hardwareHealth/historyTestimony/GraphOld.vue

@@ -25,6 +25,7 @@
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
     :selected-host-name="props.selectedHostName"
+    :project="props.project"
     @show-chart-modal="emits('show-chart-modal')"
     @hide-chart-modal="emits('hide-chart-modal')"
     @update-tools="emits('update-tools', $event)"
@@ -34,7 +35,6 @@
       emits('temperature-selected-rows-local', $event)
     "
     @update-period-type="emits('update-period-type', $event)"
-    @delete-option="emits('delete-option')"
     @submit-options="emits('submit-options', $event)"
   />
   <div
@@ -88,6 +88,7 @@ import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardw
 import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
 import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
 import { containerMediumSize } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/config/containerSizes'
+import type { UI_T_Project } from '~/lib/models/types'
 
 const selectedView = defineModel<string>('selectedView', { required: true })
 
@@ -130,6 +131,7 @@ const props = defineProps<{
   timespanPeriodType: string
   selectedRowPower: number[]
   selectedRowTemperature: number[]
+  project: UI_T_Project
 }>()
 const emits = defineEmits<{
   (event: 'show-chart-modal'): void
@@ -145,7 +147,6 @@ const emits = defineEmits<{
     value: UI_I_HardwareHealthSensorsGraph[]
   ): void
   (event: 'update-period-type', value: string): void
-  (event: 'delete-option'): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
 }>()
 

package/components/common/pages/hardwareHealth/historyTestimony/tools/Tools.vue

@@ -27,6 +27,7 @@
     :period-options="periodOptions"
     :selected-timespan-type="props.selectedTimespanType"
     :selected-host-name="props.selectedHostName"
+    :options-names="optionsNames"
     @show-chart-modal="emits('show-chart-modal')"
     @hide-chart-modal="emits('hide-chart-modal')"
     @update-tools="onUpdateTools"
@@ -36,8 +37,9 @@
       emits('temperature-selected-rows-local', $event)
     "
     @update-period-type="emits('update-period-type', $event)"
-    @delete-option="emits('delete-option')"
     @submit-options="emits('submit-options', $event)"
+    @save-option-name="onSaveOptionName"
+    @delete-option="onDeleteOption"
   />
   <common-pages-hardware-health-history-testimony-tools-old
     v-else
@@ -67,6 +69,7 @@
     :period-options="periodOptions"
     :selected-timespan-type="props.selectedTimespanType"
     :selected-host-name="props.selectedHostName"
+    :options-names="optionsNames"
     @show-chart-modal="emits('show-chart-modal')"
     @hide-chart-modal="emits('hide-chart-modal')"
     @update-tools="onUpdateTools"
@@ -76,20 +79,23 @@
       emits('temperature-selected-rows-local', $event)
     "
     @update-period-type="emits('update-period-type', $event)"
-    @delete-option="emits('delete-option')"
     @submit-options="emits('submit-options', $event)"
+    @save-option-name="onSaveOptionName"
+    @delete-option="onDeleteOption"
   />
 </template>
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { periodFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
-import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
-import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
 import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
 import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
 import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
 import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { periodFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
+import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
 
 const selectedView = defineModel<string>('selectedView', { required: true })
 
@@ -118,6 +124,7 @@ const props = defineProps<{
   validDateEnd: number
   formatDate: string
   selectedHostName: string
+  project: UI_T_Project
 }>()
 const emits = defineEmits<{
   (event: 'show-chart-modal'): void
@@ -133,7 +140,6 @@ const emits = defineEmits<{
     value: UI_I_HardwareHealthSensorsGraph[]
   ): void
   (event: 'update-period-type', value: string): void
-  (event: 'delete-option'): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
 }>()
 
@@ -166,8 +172,9 @@ const onUpdateTools = (): void => {
   const periodValue = selectedPeriod.value
   const viewValue = selectedView.value
   const selectedValue = useLocalStorage(
-    viewValue + 'ChartOptionsSensors',
-    undefined
+    'ChartOptionsSensors' + viewValue,
+    undefined,
+    props.project === 'sphere'
   )
 
   const fields = selectedValue
@@ -214,5 +221,20 @@ const onUpdateTools = (): void => {
 
   emits('update-tools', tools)
 }
+
+const optionsNames = ref<string[]>([])
+
+const onSaveOptionName = (): void => {
+  optionsNames.value = getCurrentOptionsStorageFunc()
+}
+
+const onDeleteOption = (): void => {
+  optionsNames.value = getCurrentOptionsStorageFunc()
+}
+
+onMounted(() => {
+  optionsNames.value = getCurrentOptionsStorageFunc()
+  onUpdateTools()
+})
 </script>
 <style scoped lang="scss"></style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/ToolsNew.vue

@@ -78,13 +78,12 @@
     "
     @update-period-type="emits('update-period-type', $event)"
     @delete-option="emits('delete-option')"
-    @save-option-name="onSaveOptionName"
+    @save-option-name="emits('save-option-name')"
     @submit-options="emits('submit-options', $event)"
   />
 </template>
 <script setup lang="ts">
 import { viewFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
-import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
 import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
 import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
@@ -119,6 +118,7 @@ const props = defineProps<{
   chartTitleDate: string
   periodOptions: UI_I_OptionItem[]
   selectedHostName: string
+  optionsNames: string[]
 }>()
 const emits = defineEmits<{
   (event: 'show-chart-modal'): void
@@ -134,16 +134,15 @@ const emits = defineEmits<{
     value: UI_I_HardwareHealthSensorsGraph[]
   ): void
   (event: 'update-period-type', value: string): void
-  (event: 'delete-option'): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'save-option-name'): void
+  (event: 'delete-option'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const optionsNames = ref<string[]>([])
-
 const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, optionsNames.value)
+  viewFunc(localization.value, props.optionsNames)
 )
 
 watch(
@@ -154,7 +153,7 @@ watch(
     if (newValue) currentValue = newValue
     else if (
       selectedView.value &&
-      optionsNames.value.includes(selectedView.value)
+      props.optionsNames.includes(selectedView.value)
     )
       currentValue = selectedView.value
     else currentValue = selectedView.value || viewOptions.value[0]?.value
@@ -163,15 +162,6 @@ watch(
   },
   { immediate: true }
 )
-
-const onSaveOptionName = (): void => {
-  optionsNames.value = getCurrentOptionsStorageFunc()
-}
-
-onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc()
-  emits('update-tools')
-})
 </script>
 <style scoped lang="scss">
 .advanced-filters {

package/components/common/pages/hardwareHealth/historyTestimony/tools/ToolsOld.vue

@@ -91,7 +91,7 @@
     "
     @update-period-type="emits('update-period-type', $event)"
     @delete-option="emits('delete-option')"
-    @save-option-name="onSaveOptionName"
+    @save-option-name="emits('save-option-name')"
     @submit-options="emits('submit-options', $event)"
   />
 </template>
@@ -102,10 +102,7 @@ import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
 import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
-import {
-  getCurrentOptionsStorageFunc,
-  viewFunc,
-} from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+import { viewFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
 
 const selectedView = defineModel<string>('selectedView', { required: true })
 const selectedPeriod = defineModel<string>('selectedPeriod', { required: true })
@@ -135,6 +132,7 @@ const props = defineProps<{
   chartTitleDate: string
   periodOptions: UI_I_OptionItem[]
   selectedHostName: string
+  optionsNames: string[]
 }>()
 
 const emits = defineEmits<{
@@ -151,16 +149,15 @@ const emits = defineEmits<{
     value: UI_I_HardwareHealthSensorsGraph[]
   ): void
   (event: 'update-period-type', value: string): void
-  (event: 'delete-option'): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'save-option-name'): void
+  (event: 'delete-option'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const optionsNames = ref<string[]>([])
-
 const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, optionsNames.value)
+  viewFunc(localization.value, props.optionsNames)
 )
 
 watch(
@@ -170,7 +167,7 @@ watch(
     if (newValue) currentValue = newValue
     else if (
       selectedView.value &&
-      optionsNames.value.includes(selectedView.value)
+      props.optionsNames.includes(selectedView.value)
     )
       currentValue = selectedView.value
     else currentValue = selectedView.value || viewOptions.value[0]?.value
@@ -179,15 +176,6 @@ watch(
   },
   { immediate: true }
 )
-
-const onSaveOptionName = (): void => {
-  optionsNames.value = getCurrentOptionsStorageFunc()
-}
-
-onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc()
-  emits('update-tools')
-})
 </script>
 
 <style scoped lang="scss">

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -94,7 +94,11 @@ import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/
 import { metricsFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/config/optionsMetrics'
 import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
 import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
-import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+import {
+  getCurrentOptionsStorageFunc,
+  removeSelectedOptionsFromStorageFunc,
+  getSelectedOptionsValueFromStorageFunc,
+} from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
 
 const props = defineProps<{
   selectedChartOptionName: string
@@ -141,6 +145,7 @@ const { $store }: any = useNuxtApp()
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const routeType = '' + useRoute().params.type
+const routeId = '' + useRoute().params.id
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -389,6 +394,8 @@ const onSaveOptions = (name: string): void => {
     chartType,
     counters,
     metric: selectedMetric.value,
+    validShowName: name,
+    nodeId: routeId,
     timespan: {
       periodType: localTimespanPeriodType.value,
       units: localCustomTime.value,
@@ -396,7 +403,7 @@ const onSaveOptions = (name: string): void => {
       type: timespanType.value,
     },
   }
-  useLocalStorage(`${name}ChartOptionsSensors`, saveOptionsData)
+  useLocalStorage(`ChartOptionsSensors${name}`, saveOptionsData)
   optionsNames.value = getCurrentOptionsStorageFunc()
   localSelectedChartOptionName.value = name
   emits('save-option-name')
@@ -418,7 +425,7 @@ const setDefaultOptions = (): void => {
 }
 
 const setCustomOptions = (name: string): void => {
-  const selectedValue = useLocalStorage(name + 'ChartOptionsSensors', undefined)
+  const selectedValue = getSelectedOptionsValueFromStorageFunc(name, routeId)
 
   if (selectedValue.routeType !== routeType) return
 
@@ -462,7 +469,7 @@ watch(
 )
 
 const onDeleteChartName = (name: string): void => {
-  window.localStorage.removeItem(name + 'ChartOptionsSensors')
+  removeSelectedOptionsFromStorageFunc(name, routeId)
   optionsNames.value = getCurrentOptionsStorageFunc()
   setSelectOptions()
   emits('delete-option')

package/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar.ts

@@ -70,13 +70,56 @@ export const viewFunc = (
 }
 
 export const getCurrentOptionsStorageFunc = (): string[] => {
+  const routeId = useRoute().params.id
+  const routeType = useRoute().params.type
+
   const optionsNames = []
   for (const key of Object.entries(localStorage)) {
     if (key[0].includes('ChartOptionsSensors')) {
-      if (key[0].includes('ChartOptionsSensors')) {
-        optionsNames.push(key[0].replace('ChartOptionsSensors', ''))
-      }
+      const values = JSON.parse(key[1])
+
+      if (
+        values.value.routeType === routeType &&
+        values.value.nodeId === routeId
+      )
+        optionsNames.push(values.value.validShowName)
     }
   }
   return optionsNames
 }
+
+export const removeSelectedOptionsFromStorageFunc = (
+  selectedName: string,
+  routeId: string
+): void => {
+  for (const key of Object.entries(localStorage)) {
+    if (key[0].includes('ChartOptionsSensors')) {
+      let values = JSON.parse(key[1])
+
+      if (
+        values.value.validShowName === selectedName &&
+        values.value.nodeId === routeId
+      )
+        window.localStorage.removeItem(key[0])
+    }
+  }
+}
+
+export const getSelectedOptionsValueFromStorageFunc = (
+  selectedName: string,
+  routeId: string
+): string[] => {
+  let result = null
+  for (const key of Object.entries(localStorage)) {
+    if (key[0].includes('ChartOptionsSensors')) {
+      let values = JSON.parse(key[1])
+
+      if (
+        values.value.validShowName === selectedName &&
+        values.value.nodeId === routeId
+      )
+        result = values.value
+    }
+  }
+  return result
+}

package/package.json

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

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/SaveOptionsModal.vue

@@ -1,81 +0,0 @@
-<template>
-  <atoms-modal
-    :title="localization.inventoryMonitor.saveOptionsAs"
-    width="575px"
-    show
-    @hide="onHide"
-    @submit="onSave"
-  >
-    <template #modalBody>
-      <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions-save-options-modal
-        v-show="isShowAlerts"
-        :alerts="alerts"
-        @remove="onRemoveAlerts"
-      />
-      <div class="form-control">
-        <label class="save-option-name-label" for="chartOptionsName"
-          >{{ localization.common.chartOptionsName }}:</label
-        >
-        <input
-          id="chartOptionsName"
-          v-model="name"
-          data-id="chart-options-name"
-          type="text"
-        />
-      </div>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'save', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const name = ref<string>('')
-const isShowAlerts = ref<boolean>(false)
-const alerts = ref<string[]>([])
-
-const onHide = (): void => {
-  emits('hide')
-}
-const onSave = (): void => {
-  if (!name.value) {
-    alerts.value = [localization.value.common.settingsNameErrorDesc]
-    isShowAlerts.value = true
-
-    return
-  }
-
-  emits('save', name.value)
-}
-
-const onRemoveAlerts = (): void => {
-  isShowAlerts.value = false
-  alerts.value = []
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.modal-dialog) {
-  .alert {
-    margin-bottom: 20px;
-  }
-
-  .form-control {
-    display: flex;
-
-    .save-option-name-label {
-      white-space: nowrap;
-    }
-    #chartOptionsName {
-      width: 100%;
-    }
-  }
-}
-</style>