bfg-common 1.2.53 → 1.2.55

package/components/common/home/ResourceBlock.vue

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

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

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

@@ -1,61 +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
-}
+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
+}