bfg-common 1.4.861 → 1.4.862

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/TimespanOld.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="timespan-objects-section-direction">
+    <common-chart-options-modal-counters-timespan-form
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $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-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)"
+    />
+    <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object
+      :type="props.type"
+      :chart="props.chart"
+      :total-cores="props.totalCores"
+      :host-id="props.hostId"
+      :selected-metrics-keys="props.selectedMetricsKeys"
+      :total-metric-items="props.totalMetricItems"
+      :selected-objects="props.selectedObjects"
+      :loading="props.objectsLoading"
+      :current-items="props.objectsData"
+      @select-objects="emits('select-objects', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+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_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
+
+const props = defineProps<{
+  type: UI_T_AdvancedType
+  chart: UI_T_ChartHost | UI_T_ChartVm
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  totalCores: number
+  hostId: string
+  selectedMetricsKeys: number[]
+  totalMetricItems: number
+  selectedObjects: string
+  objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', 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-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: 'select-objects', value: string): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.timespan-objects-section-direction {
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 1024px) {
+  .timespan-objects-section-direction {
+    flex-direction: column;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/Object.vue

@@ -1,30 +1,21 @@
 <template>
-  <div class="vertical-flex-container chart-option-objects-split">
-    <span class="chart-options-grid-title">
-      {{ localization.inventoryMonitor.selectObjectForChart }}:
-    </span>
-    <div class="flex-to-absolute-positioning-container">
-      <div class="flex-to-absolute-positioning-container-inner">
-        <atoms-table-data-grid
-          v-model:selected-row="selectedRow"
-          v-model:column-keys="columnItems"
-          v-model:page-size="pagination.pageSize"
-          v-model:page="pagination.page"
-          :type="tableType"
-          class="data-table"
-          test-id="object-table"
-          :loading="props.loading"
-          :head-items="headItems"
-          :body-items="bodyItems"
-          :total-items="bodyItems.length"
-          :total-pages="1"
-          hide-footer
-          server-off
-        >
-        </atoms-table-data-grid>
-      </div>
-    </div>
-  </div>
+  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-new
+    v-if="isNewView"
+    v-model:selected-row="selectedRow"
+    :table-type="tableType"
+    :loading="props.loading"
+    :body-items="bodyItems"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-counters-timespan-object-object-old
+    v-else
+    v-model:selected-row="selectedRow"
+    v-model:column-items="columnItems"
+    v-model:pagination="pagination"
+    :table-type="tableType"
+    :loading="props.loading"
+    :head-items="headItems"
+    :body-items="bodyItems"
+  />
 </template>
 
 <script setup lang="ts">
@@ -61,6 +52,10 @@ const emits = defineEmits<{
   (event: 'select-objects', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const tableType = computed<UI_T_DataGridType>(() => {

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/ObjectNew.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="object-table-container">
+    <ui-data-table
+      test-id="object-table"
+      :data="dataLocal"
+      :options="optionsData"
+      :loading="props.loading"
+      size="sm"
+      @select-row="onSelectRow"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_BodyItem } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import { options } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/config/options'
+import { tableDataFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/config/tableData'
+
+const selectedRowLocal = defineModel<number[] | number>('selectedRow', {
+  required: true,
+})
+
+const props = defineProps<{
+  tableType: UI_T_DataGridType
+  loading: boolean
+  bodyItems: UI_I_BodyItem[][]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const optionsData = computed<UI_I_DataTableOptions>(() =>
+  options(props.tableType)
+)
+const dataLocal = computed<UI_I_DataTable>(() =>
+  tableDataFunc(localization.value, props.bodyItems, selectedRowLocal.value)
+)
+
+const onSelectRow = (value: UI_I_DataTableBody[]): void => {
+  selectedRowLocal.value = value.map((item) => item.row)
+}
+</script>
+
+<style scoped lang="scss">
+.object-table-container {
+  :deep(.bottom-grid-content) {
+    height: 170px;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/config/options.ts

@@ -0,0 +1,25 @@
+import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_T_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
+
+export const options = (
+  selectType: UI_T_DataGridType
+): UI_I_DataTableOptions => {
+  return {
+    perPageOptions: [
+      { text: '10', value: 10 },
+      { text: '25', value: 25 },
+      { text: '50', value: 50 },
+      { text: '100', value: 100 },
+    ],
+    isSelectable: true,
+    selectType,
+    showPagination: false,
+    showPageInfo: false,
+    isSortable: true,
+    server: false,
+    isResizable: true,
+    showSearch: false,
+    showColumnManager: false,
+    inBlock: true,
+  }
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/config/tableData.ts

@@ -0,0 +1,47 @@
+import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_BodyItem } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import { constructTable } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/utils/constructTable'
+
+export const tableDataFunc = (
+  localization: UI_I_Localization,
+  items: UI_I_BodyItem[][],
+  selectedKeys: number[] | number
+): UI_I_DataTable => {
+  const currentBody = constructTable(items)
+  const selectedRows: number[] = []
+
+  currentBody.forEach((item) => {
+    if (Array.isArray(selectedKeys)) {
+      if (selectedKeys.includes(item.row)) {
+        selectedRows.push(item.row)
+      }
+    } else {
+      if (selectedKeys === item.row) {
+        selectedRows.push(item.row)
+      }
+    }
+  })
+
+  return {
+    id: 'object-table',
+    selectedRows,
+    isAllSelected: false,
+    title: `${localization.inventoryMonitor.targetObjects} (${items.length})`,
+    subTitle: '',
+    header: [
+      {
+        col: 'col0',
+        colName: 'targetObjects',
+        text: localization.inventoryMonitor.targetObjects,
+        isSortable: true,
+        sort: 'asc',
+        width: '100%',
+        show: true,
+        filter: true,
+      },
+    ],
+
+    body: currentBody,
+  }
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectNew/lib/utils/constructTable.ts

@@ -0,0 +1,22 @@
+import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_BodyItem } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+
+export const constructTable = (
+  items: UI_I_BodyItem[][]
+): UI_I_DataTableBody[] => {
+  const result: UI_I_DataTableBody[] = []
+
+  items.forEach((item) => {
+    result.push({
+      row: Number(item[0].id),
+      data: [
+        {
+          col: 'col0',
+          text: String(item[0].text),
+        },
+      ],
+    })
+  })
+
+  return result
+}

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/objectOld/ObjectOld.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="vertical-flex-container chart-option-objects-split">
+    <span class="chart-options-grid-title">
+      {{ localization.inventoryMonitor.selectObjectForChart }}:
+    </span>
+    <div class="flex-to-absolute-positioning-container">
+      <div class="flex-to-absolute-positioning-container-inner">
+        <atoms-table-data-grid
+          v-model:selected-row="selectedRowLocal"
+          v-model:column-keys="columnItemsLocal"
+          v-model:page-size="paginationLocal.pageSize"
+          v-model:page="paginationLocal.page"
+          :type="props.tableType"
+          class="data-table"
+          test-id="object-table"
+          :loading="props.loading"
+          :head-items="props.headItems"
+          :body-items="props.bodyItems"
+          :total-items="props.bodyItems.length"
+          :total-pages="1"
+          hide-footer
+          server-off
+        >
+        </atoms-table-data-grid>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+  UI_I_ColumnKey,
+} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
+import type { UI_T_DataGridType } from '~/components/atoms/table/dataGrid/lib/models/types'
+
+const selectedRowLocal = defineModel<number[] | number>('selectedRow', {
+  required: true,
+})
+const columnItemsLocal = defineModel<UI_I_ColumnKey[]>('columnItems', {
+  required: true,
+})
+const paginationLocal = defineModel<UI_I_Pagination>('pagination', {
+  required: true,
+})
+
+const props = defineProps<{
+  tableType: UI_T_DataGridType
+  loading: boolean
+  headItems: UI_I_HeadItem[]
+  bodyItems: UI_I_BodyItem[][]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.chart-option-objects-split {
+  flex: 1;
+
+  .chart-options-grid-title {
+    display: block;
+    margin-bottom: -20px;
+  }
+  .flex-to-absolute-positioning-container {
+    height: 100%;
+    max-height: 204px;
+    .flex-to-absolute-positioning-container-inner {
+      height: inherit;
+
+      .data-table {
+        height: inherit;
+
+        :deep(.datagrid-outer-wrapper) {
+          height: inherit;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/Metrics.vue

@@ -1,42 +1,30 @@
 <template>
-  <div class="chart-option-groups-container">
-    <span>{{ localization.inventoryMonitor.chartMetrics }}</span>
-    <atoms-tabs-vertical-tabs
-      v-model="selectedMetricLocal"
-      :items="props.metricsItems"
-    />
-  </div>
+  <common-monitor-advanced-tools-chart-options-modal-metrics-metrics-new
+    v-if="isNewView"
+    v-model:selected-metric="selectedMetricLocal"
+    :metrics-items="props.metricsItems"
+  />
+  <common-monitor-advanced-tools-chart-options-modal-metrics-old
+    v-else
+    v-model:selected-metric="selectedMetricLocal"
+    :metrics-items="props.metricsItems"
+  />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
 
+const selectedMetricLocal = defineModel<string>('selectedMetric', {
+  required: true,
+})
+
 const props = defineProps<{
   metricsItems: UI_I_VerticalTabs[]
-  selectedMetric: string
 }>()
 
-const emits = defineEmits<{
-  (event: 'update:selected-metric', value: string): void
-}>()
+const { $store }: any = useNuxtApp()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedMetricLocal = computed<string>({
-  get() {
-    return props.selectedMetric
-  },
-  set(newValue) {
-    emits('update:selected-metric', newValue)
-  },
-})
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 </script>
 
-<style scoped lang="scss">
-.chart-option-groups-container {
-  margin-top: 10px;
-  flex-basis: 20%;
-  //min-width: 20%;
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/MetricsOld.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="chart-option-groups-container">
+    <span>{{ localization.inventoryMonitor.chartMetrics }}</span>
+    <atoms-tabs-vertical-tabs
+      v-model="selectedMetricLocal"
+      :items="props.metricsItems"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+
+const selectedMetricLocal = defineModel<string>('selectedMetric', {
+  required: true,
+})
+
+const props = defineProps<{
+  metricsItems: UI_I_VerticalTabs[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.chart-option-groups-container {
+  margin-top: 10px;
+  flex-basis: 20%;
+  //min-width: 20%;
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/metricsNew/MetricsNew.vue

@@ -0,0 +1,101 @@
+<template>
+  <ui-accordion-recursion
+    v-for="(item, key) in accordionItems"
+    id="metrics-accordion-recursion"
+    :key="item.id"
+    :test-id="`${item.testId}-${key}`"
+    :accordion="item"
+  >
+    <template #header="{ data }">
+      <span class="main-headline">{{ data.headline }}</span>
+    </template>
+    <template #body="{ data }">
+      <div
+        v-for="(item2, key2) in data.children"
+        :key="key2"
+        class="accordion-main-text-content"
+        @click="selectedMetricLocal = item2.data.value"
+      >
+        <span
+          :class="[
+            'accordion-toggle-item',
+            { active: selectedMetricLocal === item2.data.value },
+          ]"
+        >
+          <span
+            :title="item2.headline"
+            class="accordion-toggle-item-text metrics-accordion-toggle-item-text text-ellipsis"
+            >{{ item2.headline }}</span
+          >
+        </span>
+        <div v-if="data.children.length - 1 > key2" class="divider"></div>
+      </div>
+    </template>
+  </ui-accordion-recursion>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Accordion } from '~/node_modules/bfg-uikit/components/ui/accordion/models/interfaces'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import { constructAccordion } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/metricsNew/lib/utils/constructAccordion'
+import { updateElementShowWithId } from 'bfg-uikit/components/ui/accordion/utils/recursion'
+
+const selectedMetricLocal = defineModel<string>('selectedMetric', {
+  required: true,
+})
+
+const props = defineProps<{
+  metricsItems: UI_I_VerticalTabs[]
+}>()
+
+const accordionItems = ref<UI_I_Accordion[]>(
+  constructAccordion(props.metricsItems)
+)
+
+const onToggle = (id: number): void => {
+  accordionItems.value = updateElementShowWithId(accordionItems.value, id)
+}
+
+onMounted(() => {
+  onToggle(0)
+})
+</script>
+
+<style>
+:root {
+  --metrics-accordion-bg-color: #ffffff;
+  --metrics-accordion-item-color: #4d5d69;
+}
+:root.dark-theme {
+  --metrics-accordion-bg-color: #334453;
+  --metrics-accordion-item-color: #e9eaec;
+}
+</style>
+<style scoped lang="scss">
+#metrics-accordion-recursion {
+  padding: 12px;
+  background: var(--metrics-accordion-bg-color);
+  box-shadow: 0 1px 4px 0 #00000014;
+  border-radius: 8px;
+
+  .main-headline {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--metrics-accordion-item-color);
+  }
+  :deep(.accordion-toggle-item-icon) {
+    display: none;
+  }
+  .accordion-toggle-item {
+    padding-left: 24px;
+
+    &:not(.active) {
+      color: var(--metrics-accordion-item-color);
+    }
+    .metrics-accordion-toggle-item-text {
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/metrics/metricsNew/lib/utils/constructAccordion.ts

@@ -0,0 +1,32 @@
+import type { UI_I_Accordion } from '~/node_modules/bfg-uikit/components/ui/accordion/models/interfaces'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+
+export const constructAccordion = (
+  items: UI_I_VerticalTabs[]
+): UI_I_Accordion[] => {
+  const localization = useLocal()
+  return [
+    {
+      id: 0,
+      testId: 'metrics-headline',
+      headline: `${localization.zabbix.metrics} (${items.length})`,
+      expended: false,
+      disabled: false,
+      hasChild: true,
+      children: items.map((item: UI_I_VerticalTabs, key) => {
+        return {
+          id: key + 1,
+          testId: `accordion-item-${item.value}`,
+          headline: item.text,
+          expended: false,
+          disabled: false,
+          hasChild: false,
+          children: [],
+          data: {
+            value: item.value,
+          },
+        }
+      }),
+    },
+  ]
+}