bfg-common 1.2.44 → 1.2.46

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

@@ -32,7 +32,6 @@
       </div>
       <a
         id="chart-options-button"
-        href="#"
         class="chart-options-button"
         @click="onShowChartOptions"
         >{{ localization.chartOptions }}</a
@@ -375,6 +374,7 @@ onMounted(() => {
     white-space: nowrap;
     text-transform: capitalize;
     color: var(--dropdown-item-color);
+    cursor: pointer;
   }
 
   .chart-action-bar {

package/components/common/monitor/overview/filters/Filters.vue

@@ -18,12 +18,9 @@
       <span v-else class="single-option">{{ periodOptions[0].text }}</span>
     </div>
     <div v-show="isShowCustomIntervalButton">
-      <a
-        id="show-interval-modal-button"
-        href="#"
-        @click="onShowIntervalModal"
-        >{{ localization.changeCustomInterval }}</a
-      >
+      <a id="show-interval-modal-button" @click="onShowIntervalModal">{{
+        localization.changeCustomInterval
+      }}</a>
     </div>
     <div v-if="!disabledPeriodOptions" class="chart-title">
       {{ chartTitleDate }}
@@ -47,7 +44,9 @@
   </div>
 
   <common-monitor-overview-filters-custom-interval-modal
-    v-show="isShowIntervalModal"
+    v-if="isShowIntervalModal"
+    :selected-periods="props.selectedPeriods"
+    :format-date="props.formatDate"
     @hide="onHideIntervalModal"
     @submit="onSubmitIntervalModal"
   />
@@ -72,12 +71,14 @@ const props = defineProps<{
   endDate: number
   chartType: 'spline' | 'pie'
   view: UI_T_OverviewViewType
-  formatDate?: 'string'
-  formatTime?: 'string'
+  selectedPeriods: number[]
+  formatDate: string
+  formatTime?: string
 }>()
 
 const emits = defineEmits<{
-  (event: 'update-filters', filters: UI_I_MonitorGraphPayload): void
+  (event: 'update-filters', value: UI_I_MonitorGraphPayload): void
+  (event: 'update-custom-date', value: number[]): void
 }>()
 
 const selectedPeriod = ref<string>('')
@@ -107,6 +108,7 @@ const onSubmitIntervalModal = (customDates: number[]): void => {
   customDatesData.value = customDates
   sendUpdatedFilters()
   onHideIntervalModal()
+  emits('update-custom-date', customDates)
 }
 
 const chartTitleDate = computed<string>(() => {
@@ -197,6 +199,11 @@ watch(
     text-transform: uppercase;
   }
 
+  #show-interval-modal-button {
+    cursor: pointer;
+    color: var(--dropdown-item-color);
+  }
+
   .view-select-label {
     margin-left: auto;
     padding-right: 7px;

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModal.vue

@@ -105,12 +105,18 @@ import { format } from 'date-fns'
 import { UI_I_Localization } from '~/models/interfaces'
 import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker'
 
+const props = defineProps<{
+  formatDate: string
+  selectedPeriods: number[]
+}>()
+
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'submit', arg1: number[]): void
 }>()
 
-const { $store, $formattedDate, $isDate, $getUnixByDate } = useNuxtApp()
+const { $store, $formattedDate, $formattedTime, $isDate, $getUnixByDate } =
+  useNuxtApp()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -132,12 +138,27 @@ const currentTimeFrom = ref<string>('')
 const currentTimeTo = ref<string>('')
 
 const getCurrentTime = (): void => {
-  currentDateFrom.value = $formattedDate(yesterday, '')
-  currentDateTo.value = $formattedDate(new Date(), '')
+  if (!props.selectedPeriods.length) {
+    currentDateFrom.value = $formattedDate(yesterday, props.formatDate)
+    currentDateTo.value = $formattedDate(new Date(), props.formatDate)
+
+    const currentTime = format(new Date(), 'H:mm:ss')
+    currentTimeFrom.value = currentTime
+    currentTimeTo.value = currentTime
+
+    return
+  }
 
-  const currentTime = format(new Date(), 'H:mm:ss')
-  currentTimeFrom.value = currentTime
-  currentTimeTo.value = currentTime
+  currentDateFrom.value = $formattedDate(
+    props.selectedPeriods[0],
+    props.formatDate
+  )
+  currentDateTo.value = $formattedDate(
+    props.selectedPeriods[1],
+    props.formatDate
+  )
+  currentTimeFrom.value = $formattedTime(props.selectedPeriods[0], '', true)
+  currentTimeTo.value = $formattedTime(props.selectedPeriods[1], '', true)
 }
 
 const timeFormatUpdater = computed<number>(
@@ -152,7 +173,7 @@ watch(timeFormatUpdater, () => {
 const onUpdateDateFrom = (val: number): void => {
   if (!val) return
 
-  currentDateFrom.value = $formattedDate(new Date(val), '')
+  currentDateFrom.value = $formattedDate(new Date(val), props.formatDate)
 }
 watch(currentDateFrom, (newValue) => {
   if (!newValue) return
@@ -163,7 +184,7 @@ watch(currentDateFrom, (newValue) => {
 const onUpdateDateTo = (val: number): void => {
   if (!val) return
 
-  currentDateTo.value = $formattedDate(new Date(val), '')
+  currentDateTo.value = $formattedDate(new Date(val), props.formatDate)
 }
 watch(currentDateTo, (newValue) => {
   if (!newValue) return

package/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker.ts

@@ -7,29 +7,31 @@ export const checkDateFunc = (
   timeFrom: string,
   timeTo: string
 ): string | number[] => {
-  const { $formattedDatetime, $isDate } = useNuxtApp()
+  const { $isDate, $getUnixByDate } = useNuxtApp()
 
   let result = ''
   const startDate = dateFrom + ' ' + timeFrom
+  const unixStartDate = $getUnixByDate(startDate)
   const endDate = dateTo + ' ' + timeTo
+  const unixEndDate = $getUnixByDate(endDate)
 
-  if (!$isDate(startDate) || !$isDate(endDate) || !timeFrom || !timeTo)
+  if (
+    !$isDate(unixStartDate) ||
+    !$isDate(unixEndDate) ||
+    !timeFrom ||
+    !timeTo
+  ) {
     result = localization.invalidTimeEntry
-  else {
-    const endDateFormatted = $formattedDatetime(endDate, '', true)
-    const endDateTime = new Date(endDateFormatted).getTime()
-
-    const startDateFormatted = $formattedDatetime(startDate, '', true)
-    const startDateTime = new Date(startDateFormatted).getTime()
-
-    if (endDateTime > new Date().getTime())
-      result = localization.oneOfSelectedDatesIsInTheFuture
-    else if (endDateTime === startDateTime)
-      result = localization.timeToShouldBeLaterTimeFrom
-    else if (endDateTime - startDateTime <= 3600000)
-      result = localization.timeRangeShouldNotBeSmallerThanHour
-    else return [startDateTime, endDateTime]
+    return result
   }
 
+  if (unixEndDate > new Date().getTime())
+    result = localization.oneOfSelectedDatesIsInTheFuture
+  else if (unixEndDate === unixStartDate)
+    result = localization.timeToShouldBeLaterTimeFrom
+  else if (unixEndDate - unixStartDate <= 3600000)
+    result = localization.timeRangeShouldNotBeSmallerThanHour
+  else return [unixStartDate, unixEndDate]
+
   return result
 }

package/components/common/vm/actions/add/select/models/types.ts

@@ -16,6 +16,8 @@ export type UI_T_ActionType =
   | 'takeSnapshot'
   | 'revertLatestSnapshot'
   | 'deleteAllSnapshots'
+  | 'manageSnapshots'
+  | 'addNetworking'
 
 export type UI_T_CustomizeHardwareField =
   | 'cpu.vcpus'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.2.44",
+  "version": "1.2.46",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",