bfg-common 1.4.861 → 1.4.862

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/ActionsNew.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="chart-options-actions">
+    <ui-select
+      v-model="localSelectedChartOptionLocal"
+      :items="props.chartOptions"
+      :label="localization.common.options"
+      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="md"
+      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.isDisabledDeleteAction"
+      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="isConfirmModalLocal"
+    :headline="localization.inventoryMonitor.deleteConfirmationChartOption"
+    :description="confirmModalDesc"
+    :modal-texts="modalTexts"
+    @hide-modal="isConfirmModalLocal = false"
+    @confirm="onApplyDelete"
+  />
+</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 localSelectedChartOptionLocal = defineModel<string>(
+  'localSelectedChartOption',
+  {
+    required: true,
+  }
+)
+const isConfirmModalLocal = defineModel<boolean>('isConfirmModal', {
+  required: true,
+})
+
+const props = defineProps<{
+  chartOptions: UI_I_OptionItem[]
+  isDisabledDeleteAction: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'save-options', value: string): void
+  (event: 'delete-action'): void
+  (event: 'apply-delete'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = computed<UI_I_ModalTexts>(() => {
+  return {
+    button1: localization.value.common.cancel,
+    button2: localization.value.common.delete,
+  }
+})
+
+const newChartName = ref<string>('')
+watch(
+  () => props.isDisabledDeleteAction,
+  (newValue) => {
+    newChartName.value = newValue ? localSelectedChartOptionLocal.value : ''
+  }
+)
+
+const newChartNameError = ref<string>('')
+
+const onSaveNewName = (): void => {
+  if (!newChartName.value) {
+    newChartNameError.value = localization.value.common.fieldRequired
+  } else {
+    newChartNameError.value = ''
+    emits('save-options', newChartName.value)
+  }
+}
+
+const onApplyDelete = (): void => {
+  emits('apply-delete')
+  newChartName.value = ''
+}
+
+const confirmModalDesc = computed<string>(() =>
+  localization.value.inventoryMonitor.deleteConfirmationChartOptionDesc.replace(
+    '{0}',
+    localSelectedChartOptionLocal.value
+  )
+)
+</script>
+
+<style>
+:root {
+  --chart-options-name-actions-seperate-border-color: #e9ebeda3;
+}
+:root.dark-theme {
+  --chart-options-name-actions-seperate-border-color: #e9ebed1f;
+}
+</style>
+<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;
+
+  & > :first-child {
+    margin-top: -16px;
+  }
+  & > :nth-child(2) {
+    height: 36px;
+  }
+  .seperator-name-actions {
+    border: 1px solid var(--chart-options-name-actions-seperate-border-color);
+    height: 24px;
+  }
+  #delete-option-name {
+    color: #ea3223;
+
+    &:disabled {
+      color: #bdc3c7;
+    }
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/ActionsOld.vue

@@ -0,0 +1,114 @@
+<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="localSelectedChartOptionLocal"
+          data-id="chart-options-select"
+        >
+          <option
+            v-for="item in props.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="emits('show-save-options-modal')"
+      >
+        {{ localization.inventoryMonitor.saveOptionsAs }}...
+      </button>
+      <common-monitor-advanced-tools-chart-options-modal-actions-save-options-modal
+        v-if="props.isShowSaveOptionsModal"
+        @hide="emits('hide-save-options-modal')"
+        @save="emits('save-options', $event)"
+      />
+      <button
+        class="btn chart-options-delete-button"
+        :disabled="!props.isDisabledDeleteAction"
+        data-id="chart-options-delete-button"
+        @click="emits('delete-action')"
+      >
+        {{ localization.inventoryMonitor.deleteOptions }}
+      </button>
+    </div>
+  </div>
+
+  <common-modals-confirmation
+    v-if="isConfirmModalLocal"
+    :headline="localization.inventoryMonitor.deletingSavedSettings"
+    :description="confirmModalDesc"
+    @hide-modal="isConfirmModalLocal = false"
+    @confirm="emits('apply-delete')"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const localSelectedChartOptionLocal = defineModel<string>(
+  'localSelectedChartOption',
+  {
+    required: true,
+  }
+)
+const isConfirmModalLocal = defineModel<boolean>('isConfirmModal', {
+  required: true,
+})
+
+const props = defineProps<{
+  chartOptions: UI_I_OptionItem[]
+  isShowSaveOptionsModal: boolean
+  isDisabledDeleteAction: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-save-options-modal'): void
+  (event: 'hide-save-options-modal'): void
+  (event: 'save-options', value: string): void
+  (event: 'delete-action'): void
+  (event: 'apply-delete'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const confirmModalDesc = computed<string>(() =>
+  localization.value.inventoryMonitor.deletingSavedSettingsDesc.replace(
+    '{0}',
+    localSelectedChartOptionLocal.value
+  )
+)
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .chart-options-save-button,
+  .chart-options-delete-button {
+    border: none;
+    background: unset;
+    margin: 0;
+    font-size: 11px;
+    color: var(--action-icon-color);
+    box-shadow: unset;
+  }
+
+  .chart-options-delete-button {
+    text-transform: uppercase;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue

@@ -1,46 +1,74 @@
 <template>
-  <div class="vertical-flex-container chart-option-counters-container">
-    <common-monitor-advanced-tools-chart-options-modal-counters-table
-      :chart="props.chart"
-      :type="props.type"
-      :selected-keys="props.selectedKeys"
-      :total-cores="props.totalCores"
-      @select-row="emits('select-row', $event)"
-      @total-items="totalMetricItems = $event"
-    />
-    <common-monitor-advanced-tools-chart-options-modal-counters-timespan
-      :type="props.type"
-      :chart="props.chart"
-      :language="props.language"
-      :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
-      :custom-date-from="props.customDateFrom"
-      :custom-date-to="props.customDateTo"
-      :custom-time-from="props.customTimeFrom"
-      :custom-time-to="props.customTimeTo"
-      :total-cores="props.totalCores"
-      :host-id="props.hostId"
-      :selected-metrics-keys="props.selectedMetricsKeys"
-      :total-metric-items="totalMetricItems"
-      :selected-objects="props.selectedObjects"
-      :objects-loading="props.objectsLoading"
-      :objects-data="props.objectsData"
-      :valid-date-end="props.validDateEnd"
-      @update-chart-type="emits('update-chart-type', $event)"
-      @update-custom-time="emits('update-custom-time', $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-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)"
-      @select-objects="emits('select-objects', $event)"
-    />
-  </div>
+  <common-monitor-advanced-tools-chart-options-modal-counters-new
+    v-if="isNewView"
+    v-model:total-metric-items="totalMetricItems"
+    :chart="props.chart"
+    :language="props.language"
+    :type="props.type"
+    :selected-keys="props.selectedKeys"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="props.totalCores"
+    :host-id="props.hostId"
+    :selected-metrics-keys="props.selectedMetricsKeys"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    @select-row="emits('select-row', $event)"
+    @update-chart-type="emits('update-chart-type', $event)"
+    @update-custom-time="emits('update-custom-time', $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-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)"
+    @select-objects="emits('select-objects', $event)"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-counters-old
+    v-else
+    v-model:total-metric-items="totalMetricItems"
+    :chart="props.chart"
+    :language="props.language"
+    :type="props.type"
+    :selected-keys="props.selectedKeys"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :total-cores="props.totalCores"
+    :host-id="props.hostId"
+    :selected-metrics-keys="props.selectedMetricsKeys"
+    :selected-objects="props.selectedObjects"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    @select-row="emits('select-row', $event)"
+    @update-chart-type="emits('update-chart-type', $event)"
+    @update-custom-time="emits('update-custom-time', $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-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)"
+    @select-objects="emits('select-objects', $event)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -89,20 +117,11 @@ const emits = defineEmits<{
   (event: 'select-objects', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const totalMetricItems = ref<number>(0)
 </script>
 
-<style scoped lang="scss">
-.chart-option-counters-container {
-  margin-top: 20px;
-  flex-basis: 80%;
-  padding-left: 15px;
-  max-width: 80%;
-}
-@media (max-width: 1024px) {
-  .chart-option-counters-container {
-    max-width: unset;
-    padding-left: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/CountersNew.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="chart-options-bottom-right-container">
+    <common-monitor-advanced-tools-chart-options-modal-counters-table
+      :chart="props.chart"
+      :type="props.type"
+      :selected-keys="props.selectedKeys"
+      :total-cores="props.totalCores"
+      @select-row="emits('select-row', $event)"
+      @total-items="totalMetricItemsLocal = $event"
+    />
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan
+      :type="props.type"
+      :chart="props.chart"
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="totalMetricItemsLocal"
+      :selected-objects="props.selectedObjects"
+      :objects-loading="props.objectsLoading"
+      :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $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-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)"
+      @select-objects="emits('select-objects', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+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'
+
+const totalMetricItemsLocal = defineModel<number>('totalMetricItems', {
+  required: true,
+})
+
+const props = defineProps<{
+  language: string
+  chart: UI_T_ChartHost | UI_T_ChartVm
+  type: UI_T_AdvancedType
+  selectedKeys: number[]
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedMetricsKeys: number[]
+  selectedObjects: string
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', 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-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
+  (event: 'select-objects', value: string): void
+}>()
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/CountersOld.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="vertical-flex-container chart-option-counters-container">
+    <common-monitor-advanced-tools-chart-options-modal-counters-table
+      :chart="props.chart"
+      :type="props.type"
+      :selected-keys="props.selectedKeys"
+      :total-cores="props.totalCores"
+      @select-row="emits('select-row', $event)"
+      @total-items="totalMetricItemsLocal = $event"
+    />
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan
+      :type="props.type"
+      :chart="props.chart"
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="totalMetricItemsLocal"
+      :selected-objects="props.selectedObjects"
+      :objects-loading="props.objectsLoading"
+      :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $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-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)"
+      @select-objects="emits('select-objects', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+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'
+
+const totalMetricItemsLocal = defineModel<number>('totalMetricItems', {
+  required: true,
+})
+
+const props = defineProps<{
+  language: string
+  chart: UI_T_ChartHost | UI_T_ChartVm
+  type: UI_T_AdvancedType
+  selectedKeys: number[]
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedMetricsKeys: number[]
+  selectedObjects: string
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', 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-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
+  (event: 'select-objects', value: string): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.chart-option-counters-container {
+  margin-top: 20px;
+  flex-basis: 80%;
+  padding-left: 15px;
+  max-width: 80%;
+}
+@media (max-width: 1024px) {
+  .chart-option-counters-container {
+    max-width: unset;
+    padding-left: 0;
+  }
+}
+</style>