bfg-common 1.6.95 → 1.6.97

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="chart-modal">
+    <ui-modal
+      :subtitle="props.selectedNodeName"
+      :texts="modalTexts"
+      test-id="chart-options-modal"
+      width="1120px"
+      show
+      @hide="emits('hide-main-modal')"
+      @submit="emits('submit-main-modal')"
+    >
+      <template #headerContent>
+        {{ localization.inventoryMonitor.chartOptions }}
+      </template>
+      <template #content>
+        <div class="chart-options-modal">
+          <common-pages-hardware-health-history-testimony-tools-chart-options-modal-notification-new
+            v-show="props.isShowAlerts"
+            :alerts="props.alerts"
+          />
+
+          <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions
+            :is-disabled-save="!props.currentSelectedRows.length"
+            :options-names="props.optionsNames"
+            :selected-chart-option-name="props.selectedChartOptionName"
+            :selected-node-name="props.selectedNodeName"
+            @save="emits('save-options', $event)"
+            @check-validation="emits('check-validations')"
+            @select-local-option-name="
+              emits('select-local-option-name', $event)
+            "
+            @delete-chart-name="emits('delete-chart-name', $event)"
+          />
+
+          <p class="title-details">{{ localization.common.details }}</p>
+          <div class="bottom-container">
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics
+              v-model:selected-metric="selectedMetric"
+              :metrics-items="props.metricsItems"
+            />
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters
+              :chart="selectedMetric"
+              :language="props.language"
+              :selected-power-keys="props.selectedPowerCountersKeys"
+              :selected-temperature-keys="props.selectedTemperatureCountersKeys"
+              :power-counters-table-data="props.powerCountersTableData"
+              :temperature-counters-table-data="
+                props.temperatureCountersTableData
+              "
+              :selected-chart-type="props.selectedChartType"
+              :selected-timespan-type="props.selectedTimespanType"
+              :units-count="props.unitsCount"
+              :period-type="props.timespanPeriodType"
+              :selected-custom-time="props.customTime"
+              :custom-date-from="props.customDateFrom"
+              :custom-date-to="props.customDateTo"
+              :custom-time-from="props.customTimeFrom"
+              :custom-time-to="props.customTimeTo"
+              :valid-date-end="props.validDateEnd"
+              @select-power-row="emits('select-power-row', $event)"
+              @select-temperature-row="emits('select-temperature-row', $event)"
+              @update-chart-type="emits('change-chart-type', $event)"
+              @update-custom-time="emits('change-custom-time', $event)"
+              @update-timespan-type="emits('change-timespan-type', $event)"
+              @update-unit-count="emits('change-unit-count', $event)"
+              @update-period-type="emits('change-period-type', $event)"
+              @update-custom-date-from="
+                emits('update-custom-date-from', $event)
+              "
+              @update-custom-date-to="emits('update-custom-date-to', $event)"
+              @update-custom-time-from="
+                emits('update-custom-time-from', $event)
+              "
+              @update-custom-time-to="emits('update-custom-time-to', $event)"
+            />
+          </div>
+        </div>
+      </template>
+      <template #footerLeftContent><span></span></template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+
+const selectedMetric = defineModel<UI_T_Chart>('selectedMetric', {
+  required: true,
+})
+
+const props = defineProps<{
+  isShowAlerts: boolean
+  alerts: string[]
+  currentSelectedRows: UI_I_HardwareHealthSensorsGraph[]
+  optionsNames: string[]
+  selectedChartOptionName: string
+  metricsItems: UI_I_VerticalTabs[]
+  selectedPowerCountersKeys: number[]
+  selectedTemperatureCountersKeys: number[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  timespanPeriodType: string
+  customTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+  selectedNodeName: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide-main-modal'): void
+  (event: 'submit-main-modal'): void
+  (event: 'save-options', value: string): void
+  (event: 'check-validations'): void
+  (event: 'select-local-option-name', value: string): void
+  (event: 'delete-chart-name', value: string): void
+  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (
+    event: 'select-temperature-row',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'change-chart-type', value: string): void
+  (event: 'change-custom-time', value: string): void
+  (event: 'change-timespan-type', value: string): void
+  (event: 'change-unit-count', value: number): void
+  (event: 'change-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = ref<UI_I_ModalTexts>({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.select,
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-body) {
+  max-height: 100%;
+}
+
+.chart-options-modal {
+  margin: 16px 2px 11px 32px;
+
+  .title-details {
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--chart-options-details-title-color);
+    margin-top: 24px;
+    margin-bottom: 10px;
+  }
+
+  .bottom-container {
+    display: grid;
+    grid-template-columns: 216px 1fr;
+    height: 320px;
+  }
+}
+</style>

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

@@ -0,0 +1,168 @@
+<template>
+  <div class="chart-options-modal">
+    <atoms-modal
+      :title="localization.inventoryMonitor.chartOptions"
+      :disabled-submit="props.isDisabledSubmit"
+      width="1150px"
+      show
+      @hide="emits('hide')"
+      @submit="emits('submit')"
+    >
+      <template #modalBody>
+        <common-pages-hardware-health-history-testimony-tools-chart-options-modal-notification-old
+          v-show="props.isShowAlerts"
+          :alerts="props.alerts"
+          @remove="emits('remove-alerts')"
+        />
+        <div>
+          <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions
+            :is-disabled-save="!props.currentSelectedRows.length"
+            :options-names="props.optionsNames"
+            :selected-chart-option-name="props.selectedChartOptionName"
+            :selected-node-name="props.selectedNodeName"
+            @save="emits('save-options', $event)"
+            @check-validation="emits('check-validation')"
+            @select-local-option-name="
+              emits('select-local-option-name', $event)
+            "
+            @delete-chart-name="emits('delete-chart-name', $event)"
+          />
+
+          <div class="horizontal-flex-container chart-options-content">
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics
+              v-model:selected-metric="selectedMetric"
+              :metrics-items="props.metricsItems"
+            />
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters
+              :chart="selectedMetric"
+              :selected-power-keys="props.selectedPowerCountersKeys"
+              :selected-temperature-keys="props.selectedTemperatureCountersKeys"
+              :power-counters-table-data="props.powerCountersTableData"
+              :temperature-counters-table-data="
+                props.temperatureCountersTableData
+              "
+              :language="props.language"
+              :selected-chart-type="props.selectedChartType"
+              :selected-timespan-type="props.selectedTimespanType"
+              :units-count="props.unitsCount"
+              :period-type="props.timespanPeriodType"
+              :selected-custom-time="props.customTime"
+              :custom-date-from="props.customDateFrom"
+              :custom-date-to="props.customDateTo"
+              :custom-time-from="props.customTimeFrom"
+              :custom-time-to="props.customTimeTo"
+              :valid-date-end="props.validDateEnd"
+              @select-power-row="emits('select-power-row', $event)"
+              @select-temperature-row="emits('select-temperature-row', $event)"
+              @update-chart-type="emits('change-chart-type', $event)"
+              @update-custom-time="emits('change-custom-time', $event)"
+              @update-timespan-type="emits('change-timespan-type', $event)"
+              @update-unit-count="emits('change-unit-count', $event)"
+              @update-period-type="emits('change-period-type', $event)"
+              @update-custom-date-from="
+                emits('change-custom-date-from', $event)
+              "
+              @update-custom-date-to="emits('change-custom-date-to', $event)"
+              @update-custom-time-from="
+                emits('change-custom-time-from', $event)
+              "
+              @update-custom-time-to="emits('change-custom-time-to', $event)"
+            />
+          </div>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+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_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+
+const selectedMetric = defineModel<UI_T_Chart>('selectedMetric', {
+  required: true,
+})
+const props = defineProps<{
+  isDisabledSubmit: boolean
+  isShowAlerts: boolean
+  alerts: string[]
+  currentSelectedRows: UI_I_HardwareHealthSensorsGraph[]
+  optionsNames: string[]
+  selectedChartOptionName: string
+  metricsItems: UI_I_VerticalTabs[]
+  selectedPowerCountersKeys: number[]
+  selectedTemperatureCountersKeys: number[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  timespanPeriodType: string
+  customTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+  selectedNodeName: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+  (event: 'remove-alerts'): void
+  (event: 'check-validation'): void
+  (event: 'save-options', value: string): void
+  (event: 'select-local-option-name', value: string): void
+  (event: 'delete-chart-name', value: string): void
+  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (
+    event: 'select-temperature-row',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'change-chart-type', value: string): void
+  (event: 'change-custom-time', value: string): void
+  (event: 'change-timespan-type', value: string): void
+  (event: 'change-unit-count', value: number): void
+  (event: 'change-period-type', value: string): void
+  (event: 'change-custom-date-from', value: string): void
+  (event: 'change-custom-date-to', value: string): void
+  (event: 'change-custom-time-from', value: string): void
+  (event: 'change-custom-time-to', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.chart-options-modal {
+  .loader-on :deep(.modal-body) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :deep(.modal-title) {
+    text-transform: capitalize;
+  }
+
+  #loader {
+    min-height: 90px;
+    text-align: center;
+  }
+
+  .chart-options-content {
+    display: flex;
+    flex-direction: row;
+    flex-basis: 90%;
+    overflow-y: hidden;
+  }
+}
+
+@media (max-width: 1024px) {
+  .chart-options-content {
+    flex-direction: column !important;
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+<template>
+  <ui-alert
+    :messages="props.alerts"
+    test-id="chart-options-alerts"
+    class="chart-options-alerts"
+    hide-close-button
+    size="md"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  alerts: string[]
+}>()
+</script>
+
+<style scoped lang="scss">
+.chart-options-alerts {
+  margin-bottom: 24px;
+  margin-right: 32px;
+}
+</style>

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

@@ -1,55 +1,30 @@
 <template>
-  <div class="horizontal-flex-container">
-    <div class="horizontal-flex-container">
-      <label for="chartOptionsSelect" class="label-select"
-        >{{ localization.inventoryMonitor.chartOptions }}:</label
-      >
-      <div class="select">
-        <select
-          id="chartOptionsSelect"
-          v-model="localSelectedChartOption"
-          data-id="chart-options-select"
-        >
-          <option
-            v-for="item in chartOptions"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.text }}
-          </option>
-        </select>
-      </div>
-    </div>
-    <div>
-      <button
-        class="btn chart-options-save-button"
-        data-id="chart-options-save-button"
-        @click="onShowSaveOptionsModal"
-      >
-        {{ localization.inventoryMonitor.saveOptionsAs }}...
-      </button>
-      <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions-save-options-modal
-        v-if="isShowSaveOptionsModal"
-        @hide="onHideSaveOptionsModal"
-        @save="onSaveOptions"
-      />
-      <button
-        :disabled="!disabledDeleteAction"
-        class="btn chart-options-delete-button"
-        data-id="chart-options-delete-button"
-        @click="onDeleteAction"
-      >
-        {{ localization.inventoryMonitor.deleteOptions }}
-      </button>
-    </div>
-  </div>
-
-  <common-modals-confirmation
-    v-if="isConfirmModal"
-    :headline="localization.inventoryMonitor.deletingSavedSettings"
-    :description="confirmModalDesc"
-    @hide-modal="isConfirmModal = false"
-    @confirm="onApplyDelete"
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions-new
+    v-if="isNewView"
+    v-model:selected-chart-option="localSelectedChartOption"
+    :chart-options="chartOptions"
+    :is-disabled-action="disabledDeleteAction"
+    :is-show-confirm-modal="isConfirmModal"
+    :confirm-modal-desc="confirmModalDesc"
+    @delete-action="onDeleteAction"
+    @save-options="onSaveOptions"
+    @hide-confirm-modal="isConfirmModal = false"
+    @apply-delete="onApplyDelete"
+  />
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions-old
+    v-else
+    v-model:selected-chart-option="localSelectedChartOption"
+    :chart-options="chartOptions"
+    :is-show-save-options-modal="isShowSaveOptionsModal"
+    :is-disabled-action="disabledDeleteAction"
+    :is-show-confirm-modal="isConfirmModal"
+    :confirm-modal-desc="confirmModalDesc"
+    @show-save-options-modal="onShowSaveOptionsModal"
+    @hide-save-options-modal="onHideSaveOptionsModal"
+    @delete-action="onDeleteAction"
+    @save-options="onSaveOptions"
+    @hide-confirm-modal="isConfirmModal = false"
+    @apply-delete="onApplyDelete"
   />
 </template>
 
@@ -62,6 +37,7 @@ const props = defineProps<{
   isDisabledSave: boolean
   optionsNames: string[]
   selectedChartOptionName: string
+  selectedNodeName: string
 }>()
 
 const emits = defineEmits<{
@@ -71,6 +47,10 @@ const emits = defineEmits<{
   (event: 'delete-chart-name', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const localSelectedChartOption = ref<string>('select_options')
@@ -120,10 +100,9 @@ const confirmModalDesc = ref<string>('')
 
 const onDeleteAction = (): void => {
   confirmModalDesc.value =
-    localization.value.inventoryMonitor.deletingSavedSettingsDesc.replace(
-      '{0}',
-      localSelectedChartOption.value
-    )
+    localization.value.inventoryMonitor.deleteChartOptionDesc
+      .replace('{0}', localSelectedChartOption.value)
+      .replace('{1}', props.selectedNodeName)
   isConfirmModal.value = true
 }
 

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="chart-options-actions">
+    <ui-select
+      v-model="selectedChartOption"
+      :items="props.chartOptions"
+      :label="localization.common.options"
+      :margin-between-trigger="4"
+      select-width="100%"
+      show-text
+      test-id="chart-options-select"
+    />
+    <ui-input
+      v-model="newChartName"
+      :placeholder="localization.common.name"
+      :label="localization.common.name"
+      :error="newChartNameError"
+      test-id="chart-name"
+      type="text"
+      input-style="rounded"
+    />
+    <ui-button
+      test-id="save-option-name"
+      type="primary"
+      variant="text"
+      size="sm"
+      is-without-sizes
+      @click="onSaveNewName"
+    >
+      <template #icon>
+        <ui-icon name="check" width="18" height="18"></ui-icon>
+      </template>
+      <span>{{ localization.common.save }}</span>
+    </ui-button>
+    <span class="seperator-name-actions"></span>
+    <ui-button
+      :disabled="!props.isDisabledAction"
+      test-id="delete-option-name"
+      type="primary"
+      variant="text"
+      size="md"
+      is-without-sizes
+      @click="emits('delete-action')"
+    >
+      <template #icon>
+        <ui-icon name="delete" width="18" height="18"></ui-icon>
+      </template>
+      <span>{{ localization.common.delete }}</span>
+    </ui-button>
+  </div>
+
+  <common-modals-confirmation
+    v-if="props.isShowConfirmModal"
+    :headline="localization.inventoryMonitor.deleteChartOption"
+    :description="confirmModalDesc"
+    :modal-texts="modalTexts"
+    @hide-modal="emits('hide-confirm-modal')"
+    @confirm="emits('apply-delete')"
+  />
+</template>
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedChartOption = defineModel<string>('selectedChartOption', {
+  required: true,
+})
+const props = defineProps<{
+  chartOptions: UI_I_OptionItem[]
+  isShowSaveOptionsModal: boolean
+  isDisabledAction: boolean
+  isShowConfirmModal: boolean
+  confirmModalDesc: string
+}>()
+const emits = defineEmits<{
+  (event: 'delete-action'): void
+  (event: 'save-options', value: string): void
+  (event: 'hide-confirm-modal'): void
+  (event: 'apply-delete'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const newChartName = ref<string>('')
+const newChartNameError = ref<string>('')
+
+const modalTexts = computed<UI_I_ModalTexts>(() => {
+  return {
+    button1: localization.value.common.cancel,
+    button2: localization.value.common.delete,
+  }
+})
+
+watch(selectedChartOption, (newValue) => {
+  newChartName.value = props.isDisabledAction ? newValue : ''
+  newChartNameError.value = ''
+})
+
+const onSaveNewName = (): void => {
+  const isNameRequired = selectedChartOption.value !== 'default'
+
+  if (isNameRequired && !newChartName.value) {
+    newChartNameError.value = localization.value.common.fieldRequired
+    return
+  }
+
+  if(newChartName.value) {
+    newChartNameError.value = ''
+    emits('save-options', newChartName.value)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.chart-options-actions {
+  display: grid;
+  grid-template-columns: 2fr 2fr max-content max-content max-content;
+  align-items: center;
+  grid-gap: 16px;
+  padding-right: 32px;
+
+  & > :nth-child(2) {
+    height: 36px;
+  }
+
+  .seperator-name-actions {
+    width: 1px;
+    background-color: var(--chart-options-name-actions-seperate-border-color);
+    height: 24px;
+  }
+
+  #delete-option-name {
+    color: #ea3223;
+
+    &:disabled {
+      color: var(--chart-options-name-actions-delete-disabled-text-color);
+
+      :deep(span) {
+        color: #bdc3c7;
+        opacity: 0.44;
+      }
+    }
+  }
+}
+</style>