bfg-common 1.4.861 → 1.4.862

package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModalNew.vue

@@ -0,0 +1,190 @@
+<template>
+  <ui-modal
+    :subtitle="localization.common.default"
+    :texts="modalTexts"
+    test-id="modal-main-small"
+    size="xl"
+    @hide="emits('hide-main-modal')"
+    @submit="emits('submit-main-modal')"
+  >
+    <template #headerContent>
+      {{ localization.inventoryMonitor.chartOptions }}
+    </template>
+    <template #content>
+      <div class="chart-options-modal">
+        <common-monitor-advanced-tools-chart-options-modal-notification
+          v-show="props.isShowAlerts"
+          :alerts="props.alerts"
+          @remove="emits('remove-alerts')"
+        />
+
+        <common-monitor-advanced-tools-chart-options-modal-actions
+          :is-disabled-save="!selectedRowsLocal.length"
+          :options-names="props.optionsNames"
+          :selected-chart-option-name="props.localSelectedChartOptionName"
+          @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-monitor-advanced-tools-chart-options-modal-metrics
+            v-model:selected-metric="localSelectedMetricLocal"
+            :metrics-items="props.metricsItems"
+          />
+          <common-monitor-advanced-tools-chart-options-modal-counters
+            :chart="localSelectedMetricLocal"
+            :language="props.language"
+            :type="props.type"
+            :selected-keys="props.localSelectedCountersKeys"
+            :selected-chart-type="props.localSelectedChartType"
+            :selected-timespan-type="props.localSelectedTimespanType"
+            :units-count="props.localUnitsCount"
+            :period-type="localPeriodTypeLocal"
+            :selected-custom-time="customTimeLocal"
+            :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="selectedRowsLocal = $event"
+            @update-chart-type="localSelectedChartTypeLocal = $event"
+            @update-custom-time="customTimeLocal = $event"
+            @update-timespan-type="timespanTypeLocal = $event"
+            @update-unit-count="unitCountLocal = $event"
+            @update-period-type="localPeriodTypeLocal = $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('local-selected-objects', $event)"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footerLeftContent><span></span></template>
+  </ui-modal>
+</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_T_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  language: string
+  optionsNames: string[]
+  localSelectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedObjects: string
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  isDisabledSubmit: boolean
+  isShowAlerts: boolean
+  alerts: string[]
+  metricsItems: UI_I_VerticalTabs[]
+  localSelectedCountersKeys: number[]
+  localSelectedChartType: string
+  localSelectedTimespanType: string
+  localUnitsCount: number
+  selectedMetricsKeys: number[]
+}>()
+
+const selectedRowsLocal = defineModel<UI_I_AdvancedCounterItem[]>(
+  'selectedRows',
+  { required: true }
+)
+const localSelectedMetricLocal = defineModel<UI_T_ChartHost | UI_T_ChartVm>(
+  'selectedMetricLocal',
+  { required: true }
+)
+const localPeriodTypeLocal = defineModel<string>('localPeriodType', {
+  required: true,
+})
+const customTimeLocal = defineModel<string>('localCustomTime', {
+  required: true,
+})
+const localSelectedChartTypeLocal = defineModel<string>(
+  'selectedChartTypeLocal',
+  {
+    required: true,
+  }
+)
+const timespanTypeLocal = defineModel<string>('timespanType', {
+  required: true,
+})
+const unitCountLocal = defineModel<number>('unitCount', {
+  required: true,
+})
+
+const emits = defineEmits<{
+  (event: 'hide-main-modal'): void
+  (event: 'submit-main-modal'): void
+  (event: 'remove-alerts'): 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: '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: 'local-selected-objects', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = ref<UI_I_ModalTexts>({
+  button1: localization.value.common.decline,
+  button2: localization.value.common.select,
+})
+</script>
+
+<style>
+:root {
+  --chart-options-details-title-color: #4d5d69;
+}
+:root.dark-theme {
+  --chart-options-details-title-color: #e9eaec;
+}
+</style>
+<style scoped lang="scss">
+.chart-options-modal {
+  margin: 16px 32px;
+
+  .title-details {
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--chart-options-details-title-color);
+    margin-top: 24px;
+    margin-bottom: 16px;
+  }
+  .bottom-container {
+    display: grid;
+    grid-template-columns: 216px 1fr;
+    grid-gap: 12px;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModalOld.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="chart-options-modal">
+    <atoms-modal
+      width="1150px"
+      :show="true"
+      :title="localization.inventoryMonitor.chartOptions"
+      :disabled-submit="props.isDisabledSubmit"
+      @hide="emits('hide-main-modal')"
+      @submit="emits('submit-main-modal')"
+    >
+      <template #modalBody>
+        <common-monitor-advanced-tools-chart-options-modal-notification
+          v-show="props.isShowAlerts"
+          :alerts="props.alerts"
+          @remove="emits('remove-alerts')"
+        />
+        <div>
+          <common-monitor-advanced-tools-chart-options-modal-actions
+            :is-disabled-save="!selectedRowsLocal.length"
+            :options-names="props.optionsNames"
+            :selected-chart-option-name="props.localSelectedChartOptionName"
+            @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)"
+          />
+
+          <div class="horizontal-flex-container chart-options-content">
+            <common-monitor-advanced-tools-chart-options-modal-metrics
+              v-model:selected-metric="localSelectedMetricLocal"
+              :metrics-items="props.metricsItems"
+            />
+            <common-monitor-advanced-tools-chart-options-modal-counters
+              :chart="localSelectedMetricLocal"
+              :language="props.language"
+              :type="props.type"
+              :selected-keys="props.localSelectedCountersKeys"
+              :selected-chart-type="props.localSelectedChartType"
+              :selected-timespan-type="props.localSelectedTimespanType"
+              :units-count="props.localUnitsCount"
+              :period-type="localPeriodTypeLocal"
+              :selected-custom-time="customTimeLocal"
+              :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="selectedRowsLocal = $event"
+              @update-chart-type="localSelectedChartTypeLocal = $event"
+              @update-custom-time="customTimeLocal = $event"
+              @update-timespan-type="timespanTypeLocal = $event"
+              @update-unit-count="unitCountLocal = $event"
+              @update-period-type="localPeriodTypeLocal = $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('local-selected-objects', $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_AdvancedType } from '~/components/common/monitor/advanced/lib/models/types'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import type {
+  UI_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  language: string
+  optionsNames: string[]
+  localSelectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedObjects: string
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  isDisabledSubmit: boolean
+  isShowAlerts: boolean
+  alerts: string[]
+  metricsItems: UI_I_VerticalTabs[]
+  localSelectedCountersKeys: number[]
+  localSelectedChartType: string
+  localSelectedTimespanType: string
+  localUnitsCount: number
+  selectedMetricsKeys: number[]
+}>()
+
+const selectedRowsLocal = defineModel<UI_I_AdvancedCounterItem[]>(
+  'selectedRows',
+  { required: true }
+)
+const localSelectedMetricLocal = defineModel<UI_T_ChartHost | UI_T_ChartVm>(
+  'selectedMetricLocal',
+  { required: true }
+)
+const localPeriodTypeLocal = defineModel<string>('localPeriodType', {
+  required: true,
+})
+const customTimeLocal = defineModel<string>('localCustomTime', {
+  required: true,
+})
+const localSelectedChartTypeLocal = defineModel<string>(
+  'selectedChartTypeLocal',
+  {
+    required: true,
+  }
+)
+const timespanTypeLocal = defineModel<string>('timespanType', {
+  required: true,
+})
+const unitCountLocal = defineModel<number>('unitCount', {
+  required: true,
+})
+
+const emits = defineEmits<{
+  (event: 'hide-main-modal'): void
+  (event: 'submit-main-modal'): void
+  (event: 'remove-alerts'): 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: '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: 'local-selected-objects', 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/monitor/advanced/tools/chartOptionsModal/Notification.vue

@@ -1,20 +1,13 @@
 <template>
-  <atoms-alert
-    v-show="props.alerts.length"
-    status="alert-danger"
-    :items="props.alerts"
-    class="notification"
-    test-id="notification-alert"
-    @remove="onRemove"
-  >
-<!--    <template #default="{ item }">-->
-<!--      <div class="flex-space-between flex-1">-->
-<!--        <div class="flex-align-center">-->
-<!--          <span>{{ item }}</span>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </template>-->
-  </atoms-alert>
+  <common-monitor-advanced-tools-chart-options-modal-notification-new
+    v-if="isNewView"
+    :alerts="props.alerts"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-notification-old
+    v-else
+    :alerts="props.alerts"
+    @remove="emits('remove-alerts')"
+  />
 </template>
 
 <script setup lang="ts">
@@ -23,12 +16,12 @@ const props = defineProps<{
 }>()
 
 const emits = defineEmits<{
-  (event: 'remove'): void
+  (event: 'remove-alerts'): void
 }>()
 
-const onRemove = (): void => {
-  emits('remove')
-}
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/monitor/advanced/tools/chartOptionsModal/NotificationNew.vue

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

package/components/common/monitor/advanced/tools/chartOptionsModal/NotificationOld.vue

@@ -0,0 +1,27 @@
+<template>
+  <atoms-alert
+    v-show="props.alerts.length"
+    status="alert-danger"
+    :items="props.alerts"
+    class="notification"
+    test-id="notification-alert"
+    @remove="onRemove"
+  >
+  </atoms-alert>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  alerts: string[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'remove-alerts'): void
+}>()
+
+const onRemove = (): void => {
+  emits('remove-alerts')
+}
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -1,55 +1,26 @@
 <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-monitor-advanced-tools-chart-options-modal-actions-save-options-modal
-        v-if="isShowSaveOptionsModal"
-        @hide="onHideSaveOptionsModal"
-        @save="onSaveOptions"
-      />
-      <button
-        class="btn chart-options-delete-button"
-        :disabled="!disabledDeleteAction"
-        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-monitor-advanced-tools-chart-options-modal-actions-new
+    v-if="isNewView"
+    v-model:is-confirm-modal="isConfirmModal"
+    v-model:local-selected-chart-option="localSelectedChartOption"
+    :chart-options="chartOptions"
+    :is-disabled-delete-action="isDisabledDeleteAction"
+    @save-options="onSaveOptions"
+    @delete-action="onDeleteAction"
+    @apply-delete="onApplyDelete"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-actions-old
+    v-else
+    v-model:is-confirm-modal="isConfirmModal"
+    v-model:local-selected-chart-option="localSelectedChartOption"
+    :chart-options="chartOptions"
+    :is-show-save-options-modal="isShowSaveOptionsModal"
+    :is-disabled-delete-action="isDisabledDeleteAction"
+    @show-save-options-modal="onShowSaveOptionsModal"
+    @hide-save-options-modal="onHideSaveOptionsModal"
+    @save-options="onSaveOptions"
+    @delete-action="onDeleteAction"
+    @apply-delete="onApplyDelete"
   />
 </template>
 
@@ -71,10 +42,14 @@ 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')
-const disabledDeleteAction = computed<boolean>(() => {
+const isDisabledDeleteAction = computed<boolean>(() => {
   const chartOptionName = localSelectedChartOption.value
   let result = false
 
@@ -116,14 +91,8 @@ const onSaveOptions = (name: string): void => {
 }
 
 const isConfirmModal = ref<boolean>(false)
-const confirmModalDesc = ref<string>('')
 
 const onDeleteAction = (): void => {
-  confirmModalDesc.value =
-    localization.value.inventoryMonitor.deletingSavedSettingsDesc.replace(
-      '{0}',
-      localSelectedChartOption.value
-    )
   isConfirmModal.value = true
 }
 
@@ -134,24 +103,4 @@ const onApplyDelete = (): void => {
 }
 </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>
+<style scoped lang="scss"></style>