bfg-common 1.4.853 → 1.4.855

package/components/common/chartOptionsModal/counters/timespan/form/FormOld.vue

@@ -1,372 +0,0 @@
-<template>
-  <div class="chart-option-timespan-split">
-    <div class="vertical-flex-container">
-      <div class="timespan-objects-section-direction">
-        <label for="chart-timespan-type-select"
-          >{{ localization.inventoryMonitor.timespan }}:</label
-        >
-        <div class="vertical-flex-container chart-option-timespan-settings">
-          <div class="timespan-select chart-option-setting-row">
-            <div class="view-select-label horizontal-flex-container">
-              <div class="select">
-                <select
-                  id="chart-timespan-type-select"
-                  v-model="localSelectedTimespanLocal"
-                  data-id="chart-timespan-type-select"
-                >
-                  <option
-                    v-for="(item, index) in props.timespanOptions"
-                    :key="index"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div
-            :class="[
-              'custom-timespan-settings-container',
-              { active: localSelectedTimespanLocal === 'custom_interval' },
-            ]"
-          >
-            <table>
-              <tbody>
-                <tr>
-                  <td class="relative">
-                    <input
-                      id="custom-time-lastInput"
-                      v-model="localPeriodTypeLocal"
-                      data-id="custom-time-lastInput"
-                      type="radio"
-                      value="last"
-                      class="custom-radio-button"
-                      name="lastFrom"
-                    />
-                    <label
-                      for="custom-time-lastInput"
-                      class="custom-radio-label"
-                    >
-                      {{ props.periodTypeText }}:
-                    </label>
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'custom-timespan-type-last-container',
-                        { active: localPeriodTypeLocal === 'last' },
-                      ]"
-                    >
-                      <input
-                        id="chart-option-setting-row"
-                        v-model="localLastLocal"
-                        data-id="chart-option-setting-row"
-                        type="number"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                      <div
-                        class="chart-option-setting-row custom-time-input inline-block"
-                      >
-                        <div
-                          class="view-select-label horizontal-flex-container"
-                        >
-                          <div class="select">
-                            <select
-                              id="chart-timespan-type-select"
-                              v-model="localSelectedCustomTimeLocal"
-                              data-id="chart-timespan-type-select"
-                            >
-                              <option
-                                v-for="(item, index) in props.customTimeOptions"
-                                :key="index"
-                                :value="item.value"
-                              >
-                                {{ item.text }}
-                              </option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="relative">
-                    <input
-                      id="custom-time-fromInput"
-                      v-model="localPeriodTypeLocal"
-                      data-id="custom-time-from-input"
-                      type="radio"
-                      value="period"
-                      class="custom-radio-button"
-                      name="lastFrom"
-                    />
-                    <label
-                      for="custom-time-fromInput"
-                      class="custom-radio-label text-capitalize text-right"
-                      >{{ localization.common.from2 }}:
-                    </label>
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'date-container-row disabled-container calendar-date-row',
-                        { active: localPeriodTypeLocal === 'period' },
-                      ]"
-                    >
-                      <input
-                        id="current-date-from"
-                        v-model.lazy="localCurrentDateFromLocal"
-                        data-id="current-date-from-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input first-from"
-                      />
-                      <div class="section-datepicker">
-                        <atoms-datepicker
-                          v-model="dateFromLocal"
-                          :lang="props.language"
-                          class="calendar-from calendar-popup btn-show-hide-calendar"
-                          @update="emits('update-date-from', $event)"
-                        />
-                      </div>
-                      <input
-                        id="current-time-from"
-                        v-model="currentTimeFromLocal"
-                        data-id="current-time-from-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="custom-time-label-text text-right">
-                    {{ localization.common.to2 }}:
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'date-container-row disabled-container calendar-date-row',
-                        { active: localPeriodTypeLocal === 'period' },
-                      ]"
-                    >
-                      <input
-                        id="current-date-to"
-                        v-model.lazy="currentDateToLocal"
-                        data-id="current-date-to-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input first-to"
-                      />
-                      <div class="section-datepicker">
-                        <atoms-datepicker
-                          v-model="dateToLocal"
-                          :lang="props.language"
-                          class="calendar-from calendar-popup btn-show-hide-calendar"
-                          @update="emits('update-date-to', $event)"
-                        />
-                      </div>
-                      <input
-                        id="current-time-to"
-                        v-model="currentTimeToLocal"
-                        data-id="current-time-to-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td></td>
-                  <td
-                    :class="[
-                      'disabled-container',
-                      { active: localPeriodTypeLocal === 'period' },
-                    ]"
-                  >
-                    <span>
-                      ({{ localization.inventoryMonitor.isoTimeFormat }})
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div class="horizontal-flex-container chart-type-container">
-        <div class="view-select-label horizontal-flex-container">
-          <label for="chart-type-select" class="label-select"
-            >{{ localization.inventoryMonitor.chartType }}:</label
-          >
-          <div class="select">
-            <select
-              id="chart-type-select"
-              v-model="chartTypeLocal"
-              data-id="chart-type-select"
-            >
-              <option
-                v-for="(item, index) in props.chartTypeOptions"
-                :key="index"
-                :value="item.value"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</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 localSelectedTimespanLocal = defineModel<string>(
-  'localSelectedTimespan',
-  { required: true }
-)
-const localPeriodTypeLocal = defineModel<string>('localPeriodType', {
-  required: true,
-})
-const localLastLocal = defineModel<number>('localLast', {
-  required: true,
-})
-const localSelectedCustomTimeLocal = defineModel<string>(
-  'localSelectedCustomTime',
-  {
-    required: true,
-  }
-)
-const localCurrentDateFromLocal = defineModel<string>('localCurrentDateFrom', {
-  required: true,
-})
-const dateFromLocal = defineModel<number>('dateFrom', {
-  required: true,
-})
-const currentDateToLocal = defineModel<string>('currentDateTo', {
-  required: true,
-})
-const dateToLocal = defineModel<number>('dateTo', {
-  required: true,
-})
-const currentTimeToLocal = defineModel<string>('currentTimeTo', {
-  required: true,
-})
-const currentTimeFromLocal = defineModel<string>('currentTimeFrom', {
-  required: true,
-})
-const chartTypeLocal = defineModel<string>('chartType', {
-  required: true,
-})
-
-const props = defineProps<{
-  timespanOptions: UI_I_OptionItem[]
-  periodTypeText: string
-  customTimeOptions: UI_I_OptionItem[]
-  language: string
-  chartTypeOptions: UI_I_OptionItem[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'update-date-from', value: number): void
-  (event: 'update-date-to', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-.chart-option-timespan-split {
-  overflow-x: auto;
-  padding: 5px;
-
-  .timespan-objects-section-direction {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    .chart-option-timespan-settings {
-      margin-left: 15px;
-
-      .chart-option-setting-row {
-        width: 150px;
-        margin-bottom: 5px;
-      }
-
-      .custom-radio-button {
-        position: absolute;
-        opacity: 0;
-
-        &:checked + .custom-radio-label:before {
-          box-shadow: inset 0 0 0 6px #0079b8;
-          border: none;
-        }
-      }
-      .custom-radio-label {
-        display: block;
-        position: relative;
-        min-height: 19.2px;
-        padding-left: 23px;
-        cursor: pointer;
-        line-height: 19.2px;
-        //color: #454545;
-
-        &:before {
-          position: absolute;
-          top: 3px;
-          left: 0;
-          content: '';
-          display: inline-block;
-          height: 16px;
-          width: 16px;
-          border: 0.8px solid #565656;
-          border-radius: 50%;
-        }
-      }
-
-      .calendar-date-row {
-        display: flex;
-        align-items: center;
-
-        .custom-time-input.first-from,
-        .custom-time-input.first-to {
-          max-width: 114px;
-        }
-        .btn-show-hide-calendar {
-          margin: 0 9px;
-          cursor: pointer;
-        }
-      }
-
-      .custom-time-input {
-        margin-left: 8px;
-        margin-right: 8px;
-        max-width: 140px;
-      }
-    }
-
-    .custom-timespan-settings-container:not(.active),
-    .custom-timespan-type-last-container:not(.active),
-    .disabled-container:not(.active) {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-  }
-
-  .chart-type-container {
-    margin-top: 15px;
-
-    .horizontal-flex-container {
-      display: flex;
-      flex-direction: row;
-
-      .select {
-        margin-left: 15px;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,190 +0,0 @@
-<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>