bfg-common 1.0.0

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

@@ -0,0 +1,281 @@
+<template>
+  <div class="horizontal-flex-container overview-chart-title-bar">
+    <div class="chart-title-content">
+      <client-only>
+        <span class="chart-title">{{ props.chartTitle }},</span>
+        <span class="chart-title uppercase">{{ chartTitleDate }}</span>
+      </client-only>
+    </div>
+    <div class="horizontal-flex-container">
+      <label for="periodSelect" class="label-select"
+        >{{ localization.period }}:</label
+      >
+      <div class="select">
+        <select id="periodSelect" v-model="selectedPeriod">
+          <option
+            v-for="(item, index) in periodOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+      <a
+        id="chart-options-button"
+        href="#"
+        class="chart-options-button"
+        @click="onShowChartOptions"
+        >{{ localization.chartOptions }}</a
+      >
+    </div>
+    <div class="view-select-label horizontal-flex-container">
+      <label for="viewSelect" class="label-select"
+        >{{ localization.view }}:</label
+      >
+      <div class="select">
+        <select id="viewSelect" v-model="selectedView">
+          <option
+            v-for="(item, index) in viewOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div class="chart-action-bar vui-action-bar">
+      <ul>
+        <li class="menu-item">
+          <a
+            id="advanced-page-link"
+            class="item-link"
+            @click="onOpenAdvancedPage"
+          >
+            <span class="vx-icon-window-popout icon"></span>
+          </a>
+        </li>
+        <li class="menu-item">
+          <atoms-dropdown :drop-menu="exportMenu" @select="onExportMenuItem">
+            <template #icon>
+              <a id="export-link" href="#" class="item-link">
+                <span class="vx-icon-export icon"></span>
+              </a>
+            </template>
+          </atoms-dropdown>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <common-monitor-advanced-tools-chart-options-modal
+    v-if="isShowModal"
+    :type="props.type"
+    :loading="optionsLoading"
+    :counters="props.counters"
+    :counters-loading="props.countersLoading"
+    @hide="isShowModal = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
+import {
+  periodFunc,
+  viewFunc,
+  exportFunc,
+} from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
+import { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  startDate: number
+  chartTitle: string
+  counters: any
+  countersLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-tools', obj: UI_I_MonitorGraphPayload): void
+  (event: 'exporting', str: string): void
+  (event: 'open-advanced-page'): void
+  (event: 'get-options'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $formattedDatetime } = useNuxtApp()
+
+const selectedView = ref<string>('')
+const viewOptions = computed<UI_I_OptionItem[]>(() =>
+  viewFunc(localization.value, props.type)
+)
+watch(
+  () => viewOptions.value,
+  (val: UI_I_OptionItem[]) => {
+    if (val) selectedView.value = val[0].value
+  },
+  { immediate: true }
+)
+
+const selectedPeriod = ref<string>('')
+const periodOptions = computed<UI_I_OptionItem[]>(() =>
+  periodFunc(localization.value)
+)
+watch(
+  () => periodOptions.value,
+  (val: UI_I_OptionItem[]) => {
+    if (val) selectedPeriod.value = val[0].value
+  },
+  { immediate: true }
+)
+
+watch(
+  () => [selectedPeriod.value, selectedView.value],
+  (val: string[]) => {
+    const validPeriodData = getValidDateByOptionFunc(val[0])
+    const period = [
+      Math.round(validPeriodData[0] / 1000),
+      Math.round(validPeriodData[1] / 1000),
+    ]
+    const tools: UI_I_MonitorGraphPayload = {
+      period,
+      view: val[1],
+    }
+    emits('update-tools', tools)
+  },
+  { immediate: true }
+)
+
+const chartTitleDate = computed<string>(() => {
+  if (!props.startDate) return ''
+
+  const start = $formattedDatetime(props.startDate, '', true)
+  const end = $formattedDatetime(new Date(), '', true)
+  return `${start} - ${end}`
+})
+
+const onOpenAdvancedPage = (): void => emits('open-advanced-page')
+
+const exportMenu = ref<UI_I_DropMenu<string>[]>(exportFunc(localization.value))
+
+const onExportMenuItem = (item: UI_I_DropMenu<any>): void =>
+  emits('exporting', item.action)
+
+const isShowModal = ref<boolean>(false)
+const optionsLoading = ref<boolean>(false)
+const onShowChartOptions = async (): Promise<void> => {
+  isShowModal.value = true
+  optionsLoading.value = true
+  emits('get-options')
+  optionsLoading.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 20px;
+  flex-shrink: 0;
+
+  .chart-title-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .select select {
+    height: 20px;
+    margin: 5px;
+    color: var(--global-font-color);
+  }
+  .single-option {
+    margin-left: 5px;
+  }
+
+  .chart-title {
+    color: var(--global-font-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 6px;
+    font-weight: 700;
+    text-transform: capitalize;
+
+    &.uppercase {
+      text-transform: uppercase;
+    }
+  }
+
+  .view-select-label {
+    margin-left: auto;
+    padding-right: 7px;
+    padding-left: 7px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+
+  .chart-options-button {
+    margin-left: 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-transform: capitalize;
+    color: var(--dropdown-item-color);
+  }
+
+  .chart-action-bar {
+    white-space: nowrap;
+
+    .menu-item {
+      padding-right: 4px;
+      display: inline-block;
+      list-style: none;
+      vertical-align: middle;
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      .item-link {
+        padding: 4px;
+        line-height: 22px;
+        border: 1px solid transparent;
+        display: inline-block;
+
+        &:hover {
+          text-decoration: none;
+          background-color: #e9f6fd;
+          border: 1px solid #c7e9ff;
+        }
+
+        .icon {
+          width: 16px;
+          height: 16px;
+          display: block;
+          min-width: 16px;
+          min-height: 16px;
+          background-size: 100% auto;
+          display: block;
+        }
+      }
+
+      :deep(.dropdown-menu) {
+        min-width: auto;
+        padding: 0;
+      }
+      :deep(.user-menu-large) {
+        padding: 0;
+      }
+      :deep(.angle-icon) {
+        display: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div class="chart-options-modal">
+    <atoms-modal
+      :class="[{ 'loader-on': props.loading }]"
+      width="1150px"
+      :show="true"
+      :title="localization.chartOptions"
+      @hide="onHide"
+      @submit="onSave"
+    >
+      <template #modalBody>
+        <common-monitor-advanced-tools-chart-options-modal-notification
+          v-show="isShowAlerts"
+          :alerts="alerts"
+          @remove="onRemoveAlerts"
+        />
+
+        <atoms-loader-pre-loader
+          v-show="props.loading"
+          id="loader"
+          class="content-area__loading"
+          :show="true"
+        />
+        <div v-show="!props.loading">
+          <common-monitor-advanced-tools-chart-options-modal-actions />
+
+          <div class="horizontal-flex-container chart-options-content">
+            <common-monitor-advanced-tools-chart-options-modal-metrics
+              :type="props.type"
+            />
+            <common-monitor-advanced-tools-chart-options-modal-counters
+              v-model:selected-counters="selectedCounters"
+              :counters="props.counters"
+              :loading="props.countersLoading"
+            />
+          </div>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
+
+const props = defineProps<{
+  loading: boolean
+  type: UI_T_AdvancedType
+  counters: any
+  countersLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedCounters = ref<number[]>([])
+
+const isShowAlerts = ref<boolean>(false)
+const alerts = ref<string[]>([''])
+
+const onRemoveAlerts = (): void => {
+  isShowAlerts.value = false
+  alerts.value = []
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+
+const checkValidations = (): boolean => {
+  if (selectedCounters.value.length) return true
+
+  alerts.value = [localization.value.noCountersSelected]
+  isShowAlerts.value = true
+
+  return false
+}
+const onSave = (): void => {
+  checkValidations() && onHide()
+}
+</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%;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="horizontal-flex-container">
+    <div class="horizontal-flex-container">
+      <label for="chartOptionsSelect" class="label-select"
+        >{{ localization.chartOptions }}:</label
+      >
+      <div class="select">
+        <select id="chartOptionsSelect" v-model="selectedChartOption">
+          <option
+            v-for="item in chartOptions"
+            :key="item.value"
+            :value="item.value"
+            disabled
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div>
+      <button
+        class="btn chart-options-save-button"
+        @click="onShowSaveOptionsModal"
+      >
+        {{ localization.saveOptionsAs }}...
+      </button>
+      <common-monitor-advanced-tools-chart-options-modal-actions-save-options-modal
+        v-show="isShowSaveOptionsModal"
+        @hide="onHideSaveOptionsModal"
+        @save="onSaveOptions"
+      />
+      <button class="btn chart-options-delete-button" disabled="">
+        {{ localization.deleteOptions }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { chartOptionItemsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/actions/config/optionsActions'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedChartOption = ref<string>('select_options')
+const chartOptions = computed<UI_I_OptionItem[]>(() =>
+  chartOptionItemsFunc(localization.value)
+)
+
+const isShowSaveOptionsModal = ref<boolean>(false)
+const onShowSaveOptionsModal = (): boolean =>
+  (isShowSaveOptionsModal.value = true)
+const onHideSaveOptionsModal = (): boolean =>
+  (isShowSaveOptionsModal.value = false)
+const onSaveOptions = (): boolean => onHideSaveOptionsModal()
+</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/actions/config/optionsActions.ts

@@ -0,0 +1,13 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const chartOptionItemsFunc = (localization: UI_I_Localization): UI_I_OptionItem[] => [
+  {
+    text: `--${localization.selectOption}--`,
+    value: 'select_options',
+  },
+  {
+    text: localization.default,
+    value: 'default',
+  },
+]

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/saveOptionsModal/SaveOptionsModal.vue

@@ -0,0 +1,53 @@
+<template>
+  <atoms-modal
+    width="575px"
+    :show="true"
+    :title="localization.saveOptionsAs"
+    @hide="onHide"
+    @submit="onSave"
+  >
+    <template #modalBody>
+      <div class="form-control">
+        <label class="save-option-name-label" for="chartOptionsName"
+          >{{ localization.chartOptionsName }}:</label
+        >
+        <input id="chartOptionsName" type="text" />
+      </div>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'save'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHide = (): void => {
+  emits('hide')
+}
+const onSave = (): void => {
+  emits('save')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.modal-dialog) {
+  max-height: 220px;
+
+  .form-control {
+    display: flex;
+
+    .save-option-name-label {
+      white-space: nowrap;
+    }
+    #chartOptionsName {
+      width: 100%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="vertical-flex-container chart-option-counters-container">
+    <common-monitor-advanced-tools-chart-options-modal-counters-table
+      v-model:selected-counters="selectedCountersLocal"
+      :counters="props.counters"
+      :loading="props.loading"
+      @change="onUpdateSelectedOption"
+    />
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan
+      :selected="selectedOptions"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  counters: any
+  loading: boolean
+  selectedCounters: number[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:selected-counters', value: number[]): void
+}>()
+
+const selectedCountersLocal = computed<number[]>({
+  get() {
+    return props.selectedCounters
+  },
+  set(newValue) {
+    emits('update:selected-counters', newValue)
+  },
+})
+
+const selectedOptions = ref<number[]>([])
+const onUpdateSelectedOption = (val: number[]): void => {
+  selectedOptions.value = val
+}
+</script>
+
+<style scoped lang="scss">
+.chart-option-counters-container {
+  margin-top: 20px;
+  flex-basis: 80%;
+  padding-left: 15px;
+  max-width: 80%;
+}
+</style>