bfg-common 1.1.5 → 1.1.6

package/components/common/home/Card.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="card">
+    <div class="header flex-align-center flex-space-between">
+      <div class="flex-align-center">
+        <i :class="['card-icon', props.iconName]" />
+        <p>{{ props.title }}</p>
+      </div>
+      <div class="pull-right">
+        {{ props.count }}
+      </div>
+    </div>
+    <div class="block">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title: string
+    count: number
+    iconName: string
+  }>(),
+  { count: 0 }
+)
+</script>
+<style scoped lang="scss">
+.card {
+  color: var(--global-font-color);
+  background-color: var(--global-bg-color);
+
+  .block {
+    color: inherit;
+    background-color: inherit;
+    padding: 12px 18px;
+  }
+  .header {
+    color: var(--global-font-color2);
+    background-color: inherit;
+    padding: 12px 18px;
+    height: auto;
+    border-bottom: 1px solid var(--global-border-color);
+
+    i {
+      margin: 1px 4px 0;
+    }
+    p {
+      font-size: 18px;
+      margin-left: 4px;
+    }
+    .pull-right {
+      font-size: 18px;
+    }
+
+    .card-icon {
+      width: 18px;
+      height: 18px;
+      fill: var(--global-font-color2);
+    }
+  }
+}
+</style>

package/components/common/home/ResourceBlock.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="card">
+    <div class="card-block">
+      <div class="clr-row vc-capacity-content">
+        <div
+          v-for="item in props.items"
+          :key="item.type"
+          class="clr-col-md clr-col-sm-12 clr-col-xs-12 capacity-entity"
+        >
+          <div class="capacity-entity-content">
+            <h3 class="capacity-entity-label">
+              {{ localization[item.type] }}
+            </h3>
+            <div class="capacity-entity-metrics-content">
+              <h4 class="capacity-entity-free">
+                {{ item.free.text }} {{ localization.free }}
+              </h4>
+              <progress
+                class="progress-block"
+                :max="item.capacity.value"
+                :value="item.used.value"
+              />
+              <div class="capacity-entity-used">
+                {{ item.used.text }} {{ localization.used?.toLowerCase() }} |
+                {{ item.capacity.text }} {{ localization.total?.toLowerCase() }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import type {
+  UI_I_ResourceMeter,
+  UI_I_MeterBlockItem,
+} from '~/components/common/home/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_ResourceMeter<UI_I_MeterBlockItem>[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+<style lang="scss" scoped>
+.card {
+  color: var(--global-font-color);
+  background-color: var(--global-bg-color);
+
+  &-block {
+    .capacity-entity {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0 10px;
+      border-left: 1px solid var(--global-border-color);
+
+      &:first-of-type {
+        border-left: none;
+      }
+
+      .capacity-entity-content {
+        min-height: 120px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+
+        h3 {
+          font-size: 18px;
+          font-weight: 200;
+          margin-bottom: 5px;
+        }
+
+        progress.progress-block {
+          width: 100%;
+          height: 0.6395rem;
+          line-height: 24px;
+          background-color: var(--progress-bg-color);
+        }
+        progress::-webkit-progress-value,
+        progress::-moz-progress-value {
+          background-color: var(--progress-value-bg-color);
+        }
+        progress::-webkit-progress-bar {
+          background-color: var(--progress-bg-color);
+        }
+        .capacity-entity-free {
+          font-size: 22px;
+          font-weight: 200;
+          margin-bottom: 10px;
+        }
+        .capacity-entity-used {
+          font-size: 12px;
+        }
+        .capacity-entity-label {
+          align-self: flex-start;
+          // font-size: 0.9rem;
+        }
+      }
+    }
+  }
+}
+.capacity-entity-content:nth-child(1) {
+  border-left: none;
+}
+.capacity-entity-metrics-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

package/components/common/home/StatusContent.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="entity-status-content">
+    <div v-for="(text, value) in props.items" :key="value" class="item">
+      <h3 class="entity-status-item-value">
+        {{ text }}
+      </h3>
+      <div class="entity-status-item-status">{{ localization[value] }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_Card } from '~/components/common/home/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_Card
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.entity-status-content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 100px;
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: inherit;
+    background-color: inherit;
+
+    .entity-status-item-value {
+      font-size: 22px;
+      font-weight: 200;
+    }
+    .entity-status-item-status {
+      font-size: 13px;
+      margin-top: 5px;
+    }
+  }
+}
+</style>

package/components/common/home/alertsTable/AlertsTable.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="most-alert">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:page-size="pageSize"
+      v-model:page="page"
+      class="data-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      off-select-by-row
+      hide-page-size
+      show-page-info
+      server-off
+    >
+      <template #th="{ item }">
+        <atoms-the-icon
+          width="20px"
+          height="20px"
+          :name="item.iconName"
+          class="title-icon"
+        />
+        <span> {{ item.text }} </span>
+      </template>
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <a
+          v-if="item.data.isLink"
+          href="javascript:void(0)"
+          class="text-ellipsis"
+          :title="item.text"
+          @click="selectNodeOfTree(item.data)"
+          >{{ item.text }}</a
+        >
+        <span v-else class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/models/types'
+import type { UI_I_Alert } from '~/components/common/home/models/interfaces'
+import type { UI_I_AlertData } from '~/components/common/home/alertsTable/models/interfaces'
+import * as table from '~/components/common/home/alertsTable/config/config'
+
+const props = defineProps<{
+  dataTable: UI_I_Alert[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-node-of-tree', value: UI_I_AlertData): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<UI_T_SelectedRow>(null)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => props.dataTable,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = table.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+const page = ref<number>(1)
+const pageSize = ref<number>(1)
+
+const selectNodeOfTree = (item: UI_I_AlertData): void => {
+  emits('select-node-of-tree', item)
+}
+</script>
+
+<style lang="scss" scoped>
+.most-alert {
+  margin: 0;
+  border: none;
+
+  :deep(.datagrid-outer-wrapper) {
+    padding: 0;
+
+    .datagrid {
+      margin: 0;
+      border: unset;
+      min-height: 200px;
+    }
+  }
+}
+</style>

package/components/common/home/alertsTable/config/config.ts

@@ -0,0 +1,61 @@
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_T_AlertColumnKeys } from '~/components/common/home/models/types'
+import type { UI_I_Alert } from '~/components/common/home/models/interfaces'
+import type { UI_I_AlertData } from '~/components/common/home/alertsTable/models/interfaces'
+import { UI_E_TabsByTypeEnum } from '~/components/common/home/alertsTable/models/enums'
+import { constructHeadItem } from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+
+export const alertsTableKeys: UI_T_AlertColumnKeys[] = [
+  'item',
+  'alerts',
+  'warnings',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string, string][] => {
+  return [
+    [localization.item, true, '34%', alertsTableKeys[0], ''],
+    [localization.alerts, true, '33%', alertsTableKeys[1], 'error-outline'],
+    [localization.warnings, true, '33%', alertsTableKeys[2], 'warning-outline'],
+  ]
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 0 ? 'icon' : `col${i + 1}`
+    result.push(
+      constructHeadItem(col, item[0], item[3], true, item[2], item[4])
+    )
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_Alert[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((alert: UI_I_Alert, key) => {
+    const alertData: UI_I_AlertData = {
+      iconClassName: 'vsphere-icon-folder',
+      id: alert.id,
+      nav: UI_E_TabsByTypeEnum[alert.type],
+      type: alert.type,
+      isLink: true,
+    }
+    bodyItems.push([
+      {
+        key: 'icon',
+        text: alert[alertsTableKeys[0]].toString(),
+        data: alertData,
+        id: key,
+      },
+      { key: 'col2', text: alert[alertsTableKeys[1]].toString(), id: key },
+      { key: 'col3', text: alert[alertsTableKeys[2]].toString(), id: key },
+    ])
+  })
+  return bodyItems
+}

package/components/common/home/alertsTable/models/enums.ts

@@ -0,0 +1,11 @@
+export enum UI_E_TabsByTypeEnum {
+  'zone' = 'h',
+  'datacenter' = 'h',
+  'folder' = 'h',
+  'cluster' = 'h',
+  // для прокуратор
+  'host' = 'h',
+  'vm' = 'v',
+  'datastore' = 's',
+  'network' = 'n',
+}

package/components/common/home/alertsTable/models/interfaces.ts

@@ -0,0 +1,19 @@
+import type { UI_T_NavNodes } from '~/components/common/home/alertsTable/models/types'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/models/interfaces'
+import type { UI_T_InventoryAllTreeName } from '~/components/common/home/alertsTable/models/types'
+
+export interface UI_I_AlertData {
+  iconClassName: string
+  id: number
+  nav: UI_T_NavNodes
+  type: string
+  isLink: boolean
+}
+
+export interface UI_I_ShowNodePayload {
+  node: UI_I_TreeNode
+  treeName: UI_T_InventoryAllTreeName
+}
+export interface UI_I_SelectNodePayload extends UI_I_ShowNodePayload {
+  doSelect?: boolean
+}

package/components/common/home/alertsTable/models/types.ts

@@ -0,0 +1,18 @@
+export type UI_T_NavNodes =
+  | 'h'
+  // для прокуратор
+  | 'v'
+  | 's'
+  | 'n'
+
+export type UI_T_InventoryTreeName =
+  | 'hostsAndClustersTree'
+  // для прокуратор
+  | 'vmsTree'
+  | 'storagesTree'
+  | 'networksTree'
+
+export type UI_T_InventoryAllTreeName =
+  | UI_T_InventoryTreeName
+  | 'folderTree'
+  | 'computeResourceTree'

package/components/common/home/config/configResourceMeterBlock.ts

@@ -0,0 +1,25 @@
+import type {
+  UI_I_MeterBlockItem,
+  UI_I_ResourceMeter,
+} from '~/components/common/home/models/interfaces'
+
+export const optionsDefault: UI_I_ResourceMeter<UI_I_MeterBlockItem>[] = [
+  {
+    type: 'cpu',
+    free: { text: '0', value: 0 },
+    used: { text: '0', value: 0 },
+    capacity: { text: '0', value: 0 },
+  },
+  {
+    type: 'memory',
+    free: { text: '0', value: 0 },
+    used: { text: '0', value: 0 },
+    capacity: { text: '0', value: 0 },
+  },
+  {
+    type: 'storage',
+    free: { text: '0', value: 0 },
+    used: { text: '0', value: 0 },
+    capacity: { text: '0', value: 0 },
+  },
+]

package/components/common/home/models/interfaces.ts

@@ -0,0 +1,59 @@
+import type { UI_T_NodeType } from '~/components/common/home/models/types'
+
+export interface UI_I_ZoneList {
+  name: string
+  id: number
+}
+
+export interface UI_I_ResourceMeter<T> {
+  type: string
+  capacity?: T
+  free?: T
+  used?: T
+}
+
+export interface UI_I_MeterBlockItem {
+  value: number
+  text: string
+}
+
+export interface UI_I_Hosts {
+  connected: number
+  disconnected: number
+  maintenance: number
+}
+
+export interface UI_I_Vms {
+  powered_on: number
+  powered_off: number
+  suspended: number
+}
+
+export interface UI_I_Alert {
+  item: string
+  type: UI_T_NodeType
+  id: number
+  alerts: number
+  warnings: number
+}
+
+export interface UI_I_Service {
+  id: number
+  item: string
+  statusIcon: string
+  statusText: string
+  version: string
+}
+
+export interface UI_I_HomeInfo {
+  resource_meter: UI_I_ResourceMeter<UI_I_MeterBlockItem>[]
+  hosts: UI_I_Hosts
+  vms: UI_I_Vms
+  alerts: UI_I_Alert[]
+  services: UI_I_Service[]
+}
+
+export interface UI_I_Card {
+  text: string
+  value: number
+}

package/components/common/home/models/types.ts

@@ -0,0 +1,18 @@
+export type UI_T_NodeType =
+  | 'zone'
+  | 'folder'
+  | 'datacenter'
+  | 'cluster'
+  // для прокуратор
+  | 'host'
+  | 'vm'
+  | 'datastore'
+  | 'network'
+
+export type UI_T_AlertColumnKeys = 'item' | 'alerts' | 'warnings'
+
+export type UI_T_ServiceColumnKeys =
+  | 'item'
+  | 'statusText'
+  | 'statusIcon'
+  | 'version'

package/components/common/home/servicesTable/ServicesTable.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="most-alert">
+    <atoms-table-data-grid
+      v-model:selected-row="selectedRow"
+      v-model:page-size="pageSize"
+      v-model:page="page"
+      class="data-table"
+      :head-items="headItems"
+      :body-items="bodyItems"
+      :total-items="bodyItems.length"
+      :total-pages="1"
+      off-select-by-row
+      hide-page-size
+      show-page-info
+      server-off
+    >
+      <template #icon="{ item }">
+        <span :class="['datagrid-cell-icon', item.data.iconClassName]" />
+        <span class="text-ellipsis">
+          {{ item.text }}
+        </span>
+      </template>
+    </atoms-table-data-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/models/types'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_Service } from '~/components/common/home/models/interfaces'
+import * as table from '~/components/common/home/servicesTable/config/config'
+
+const props = defineProps<{
+  dataTable: UI_I_Service[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedRow = ref<UI_T_SelectedRow>(null)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  table.headItems(localization.value)
+)
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  () => props.dataTable,
+  (newValue) => {
+    if (!newValue?.length) {
+      bodyItems.value = []
+      return
+    }
+
+    bodyItems.value = table.bodyItems(newValue)
+  },
+  { deep: true, immediate: true }
+)
+const page = ref<number>(1)
+const pageSize = ref<number>(1)
+</script>
+
+<style lang="scss" scoped>
+.most-alert {
+  margin: 0;
+  border: none;
+
+  :deep(.datagrid-outer-wrapper) {
+    padding: 0;
+
+    .datagrid {
+      margin: 0;
+      border: unset;
+      min-height: 200px;
+    }
+  }
+}
+</style>

package/components/common/home/servicesTable/config/config.ts

@@ -0,0 +1,62 @@
+import type {
+  UI_I_BodyItem,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import { constructHeadItem } from '~/components/atoms/table/dataGrid/utils/constructDataTable'
+import type { UI_T_ServiceColumnKeys } from '~/components/common/home/models/types'
+import type { UI_I_Service } from '~/components/common/home/models/interfaces'
+
+export const servicesTableKeys: UI_T_ServiceColumnKeys[] = [
+  'item',
+  'statusText',
+  'statusIcon',
+  'version',
+]
+
+const getItems = (
+  localization: UI_I_Localization
+): [string, boolean, string, string][] => {
+  return [
+    [localization.item, true, '34%', servicesTableKeys[0]],
+    [localization.status, true, '33%', servicesTableKeys[1]],
+    [localization.version, true, '33%', servicesTableKeys[2]],
+  ]
+}
+
+export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
+  const result: UI_I_HeadItem[] = []
+  getItems(localization).forEach((item, i) => {
+    const col = i === 1 ? 'icon' : `col${i + 1}`
+    result.push(constructHeadItem(col, item[0], item[3], true, item[2]))
+  })
+  return result
+}
+
+export const bodyItems = (data: UI_I_Service[]): UI_I_BodyItem[][] => {
+  const bodyItems: UI_I_BodyItem[][] = []
+  data.forEach((service: UI_I_Service, key) => {
+    const statusData = {
+      iconClassName: `vsphere-icon-status-${service.statusIcon}`,
+    }
+    bodyItems.push([
+      {
+        key: 'col1',
+        text: service[servicesTableKeys[0]].toString(),
+        id: key,
+      },
+      {
+        key: 'icon',
+        text: service[servicesTableKeys[1]].toString(),
+        data: statusData,
+        id: key,
+      },
+      {
+        key: 'col3',
+        text: service[servicesTableKeys[2]].toString(),
+        id: key,
+      },
+    ])
+  })
+  return bodyItems
+}

package/package.json

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