bfg-common 1.4.856 → 1.4.857

package/components/common/monitor/advanced/tools/ToolsNew.vue

@@ -1,220 +1,220 @@
-<template>
-  <div class="advanced-filters">
-    <div class="period-select-wrap">
-      <label for="period-select" class="label-select"
-        >{{ localization.inventoryMonitor.period }}:</label
-      >
-
-      <ui-select
-        v-model="selectedPeriodLocal"
-        :items="props.periodOptions"
-        :disabled="props.disabledPeriod"
-        test-id="period-select"
-        width="auto"
-        @change="emits('change-period')"
-      />
-      <!--      <span v-else class="single-option">{{-->
-      <!--          props.periodOptions[0].text-->
-      <!--        }}</span>-->
-      <span class="chart-text">
-        {{ props.chartTitleDate }}
-      </span>
-      <ui-skeleton-item v-if="!props.chartTitleDate" width="320" height="16" />
-      <div class="chart-options-button-content">
-        <div class="border-line"></div>
-        <span
-          class="chart-options-button"
-          data-id="show-chart-options-button"
-          @click="isShowModalLocal = true"
-          >{{ localization.inventoryMonitor.chartOptions }}</span
-        >
-      </div>
-    </div>
-
-    <div class="view-select-wrap">
-      <label for="view-select" class="label-select"
-        >{{ localization.common.view }}:</label
-      >
-      <ui-select
-        v-model="selectedViewLocal"
-        :items="props.viewOptions"
-        :disabled="disabledView"
-        test-id="view-select"
-        width="auto"
-        left
-        @change="emits('change-view')"
-      />
-    </div>
-  </div>
-
-  <common-monitor-advanced-tools-chart-options-modal
-    v-if="isShowModalLocal"
-    :type="props.type"
-    :language="props.language"
-    :selected-counters-keys="props.selectedCountersKeys"
-    :selected-metric="props.selectedMetric"
-    :selected-metric-local="props.selectedMetricLocal"
-    :selected-chart-type="props.selectedChartType"
-    :selected-timespan-type="props.selectedTimespanType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :selected-chart-option-name="props.selectedChartOptionName"
-    :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-objects="props.selectedObjects"
-    :project="props.project"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
-    @hide="isShowModalLocal = false"
-    @select-row="emits('select-row', $event)"
-    @select-metric-local="emits('select-metric-local', $event)"
-    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
-    @delete-option="emits('delete-option')"
-    @save-option-name="emits('save-option-name')"
-    @submit-options="emits('submit-options', $event)"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_OptionItem } from '~/components/atoms/lib/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_T_ChartHost,
-  UI_T_ChartVm,
-} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
-import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
-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'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const props = defineProps<{
-  type: UI_T_AdvancedType
-  chartTitleDate: string
-  language: string
-  selectedCountersKeys: number[]
-  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
-  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  selectedChartOptionName: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  totalCores: number
-  hostId: string
-  selectedObjects: string
-  project: UI_T_Project
-  objectsLoading: boolean
-  objectsData: UI_I_ObjectItem[]
-  validDateEnd: number
-  formatDate: string
-  viewOptions: UI_I_OptionItem[]
-  periodOptions: UI_I_OptionItem[]
-  disabledPeriod?: boolean
-  disabledView?: boolean
-}>()
-
-const selectedViewLocal = defineModel<string>('selected-view')
-const isShowModalLocal = defineModel<boolean>('is-show-modal-local')
-const selectedPeriodLocal = defineModel<string>('selected-period')
-
-const emits = defineEmits<{
-  (event: 'save-option-name'): void
-  (event: 'change-period'): void
-  (event: 'change-view'): void
-  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (event: 'select-metric-local', value: string): void
-  (event: 'update-chart-type', 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-time', value: string): void
-  (event: 'delete-option'): void
-  (event: 'submit-options', value: UI_I_OptionsForm): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style>
-:root {
-  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.64);
-  --advanced-chart-options-text-color: #008fd6;
-  --advanced-chart-options-text-hover-color: #0081c1;
-}
-:root.dark-theme {
-  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.12);
-  --advanced-chart-options-text-color: #2ba2de;
-  --advanced-chart-options-text-hover-color: #008fd6;
-}
-</style>
-<style scoped lang="scss">
-.advanced-filters {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 6px 16px 6px;
-
-  .period-select-wrap {
-    display: flex;
-    align-items: center;
-
-    .chart-text {
-      font-size: 13px;
-      color: var(--overview-filter-text-color);
-      margin-left: 12px;
-    }
-    .chart-options-button-content {
-      display: flex;
-      align-items: center;
-      padding-left: 12px;
-
-      .border-line {
-        border: 1px;
-        width: 1px;
-        height: 24px;
-        background-color: var(--advanced-chart-options-border-color);
-      }
-      .chart-options-button {
-        font-weight: 500;
-        font-size: 13px;
-        padding-left: 12px;
-        color: var(--advanced-chart-options-text-color);
-        cursor: pointer;
-
-        &:hover {
-          color: var(--advanced-chart-options-text-hover-color);
-        }
-      }
-    }
-  }
-
-  .view-select-wrap {
-    display: flex;
-    align-items: center;
-  }
-
-  .label-select {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--overview-filter-text-color);
-    margin-right: 12px;
-  }
-}
-</style>
+<template>
+  <div class="advanced-filters">
+    <div class="period-select-wrap">
+      <label for="period-select" class="label-select"
+        >{{ localization.inventoryMonitor.period }}:</label
+      >
+
+      <ui-select
+        v-model="selectedPeriodLocal"
+        :items="props.periodOptions"
+        :disabled="props.disabledPeriod"
+        test-id="period-select"
+        width="auto"
+        @change="emits('change-period')"
+      />
+      <!--      <span v-else class="single-option">{{-->
+      <!--          props.periodOptions[0].text-->
+      <!--        }}</span>-->
+      <span class="chart-text">
+        {{ props.chartTitleDate }}
+      </span>
+      <ui-skeleton-item v-if="!props.chartTitleDate" width="320" height="16" />
+      <div class="chart-options-button-content">
+        <div class="border-line"></div>
+        <span
+          class="chart-options-button"
+          data-id="show-chart-options-button"
+          @click="isShowModalLocal = true"
+          >{{ localization.inventoryMonitor.chartOptions }}</span
+        >
+      </div>
+    </div>
+
+    <div class="view-select-wrap">
+      <label for="view-select" class="label-select"
+        >{{ localization.common.view }}:</label
+      >
+      <ui-select
+        v-model="selectedViewLocal"
+        :items="props.viewOptions"
+        :disabled="disabledView"
+        test-id="view-select"
+        width="auto"
+        left
+        @change="emits('change-view')"
+      />
+    </div>
+  </div>
+
+  <common-monitor-advanced-tools-chart-options-modal
+    v-if="isShowModalLocal"
+    :type="props.type"
+    :language="props.language"
+    :selected-counters-keys="props.selectedCountersKeys"
+    :selected-metric="props.selectedMetric"
+    :selected-metric-local="props.selectedMetricLocal"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :selected-chart-option-name="props.selectedChartOptionName"
+    :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-objects="props.selectedObjects"
+    :project="props.project"
+    :objects-loading="props.objectsLoading"
+    :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    @hide="isShowModalLocal = false"
+    @select-row="emits('select-row', $event)"
+    @select-metric-local="emits('select-metric-local', $event)"
+    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
+    @delete-option="emits('delete-option')"
+    @save-option-name="emits('save-option-name')"
+    @submit-options="emits('submit-options', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/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_T_ChartHost,
+  UI_T_ChartVm,
+} from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+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'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  chartTitleDate: string
+  language: string
+  selectedCountersKeys: number[]
+  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
+  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  selectedChartOptionName: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
+  viewOptions: UI_I_OptionItem[]
+  periodOptions: UI_I_OptionItem[]
+  disabledPeriod?: boolean
+  disabledView?: boolean
+}>()
+
+const selectedViewLocal = defineModel<string>('selected-view')
+const isShowModalLocal = defineModel<boolean>('is-show-modal-local')
+const selectedPeriodLocal = defineModel<string>('selected-period')
+
+const emits = defineEmits<{
+  (event: 'save-option-name'): void
+  (event: 'change-period'): void
+  (event: 'change-view'): void
+  (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
+  (event: 'select-metric-local', value: string): void
+  (event: 'update-chart-type', 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-time', value: string): void
+  (event: 'delete-option'): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style>
+:root {
+  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.64);
+  --advanced-chart-options-text-color: #008fd6;
+  --advanced-chart-options-text-hover-color: #0081c1;
+}
+:root.dark-theme {
+  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.12);
+  --advanced-chart-options-text-color: #2ba2de;
+  --advanced-chart-options-text-hover-color: #008fd6;
+}
+</style>
+<style scoped lang="scss">
+.advanced-filters {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 6px 16px 6px;
+
+  .period-select-wrap {
+    display: flex;
+    align-items: center;
+
+    .chart-text {
+      font-size: 13px;
+      color: var(--overview-filter-text-color);
+      margin-left: 12px;
+    }
+    .chart-options-button-content {
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+
+      .border-line {
+        border: 1px;
+        width: 1px;
+        height: 24px;
+        background-color: var(--advanced-chart-options-border-color);
+      }
+      .chart-options-button {
+        font-weight: 500;
+        font-size: 13px;
+        padding-left: 12px;
+        color: var(--advanced-chart-options-text-color);
+        cursor: pointer;
+
+        &:hover {
+          color: var(--advanced-chart-options-text-hover-color);
+        }
+      }
+    }
+  }
+
+  .view-select-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .label-select {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--overview-filter-text-color);
+    margin-right: 12px;
+  }
+}
+</style>