bfg-common 1.3.392 → 1.3.393

package/components/common/context/Context.vue

@@ -1,99 +1,99 @@
-<template>
-  <div
-    :id="elementId"
-    class="context-popup"
-    :style="{
-      top: currentContextMenuY,
-      left: currentContextMenuX,
-    }"
-  >
-    <common-context-recursion
-      :action-loading="props.actionLoading"
-      :items="props.contextMenu.items"
-      @select-item="selectItem"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ContextMenuItem,
-  UI_I_ContextMenu,
-} from '~/components/common/context/lib/models/interfaces'
-
-const props = defineProps<{
-  contextMenu: UI_I_ContextMenu
-  actionLoading: string | null
-}>()
-const emits = defineEmits<{
-  (event: 'select-item', value: UI_I_ContextMenuItem): void
-  (event: 'hide'): void
-}>()
-const selectItem = (item: UI_I_ContextMenuItem): void => {
-  emits('select-item', item)
-}
-
-const elementId = ref<string>(`context-${useUniqueId()}`)
-
-const currentContextMenuY = ref<string>('')
-const currentContextMenuX = ref<string>('')
-const setCurrentPositionsPopup = (): void => {
-  const contextMenuY = props.contextMenu.y
-  const contextMenuX = props.contextMenu.x
-
-  const contextWrap: HTMLElement | null =
-    document.querySelector(`#${elementId.value} .context-wrap`)
-  const contextW = contextWrap?.offsetWidth || 0
-  const contextH = contextWrap?.offsetHeight || 0
-
-  const windowW = window.innerWidth
-  const windowH = window.innerHeight
-
-  if (contextMenuY + contextH >= windowH) {
-    currentContextMenuY.value = 'auto'
-  } else {
-    currentContextMenuY.value = `${contextMenuY}px`
-  }
-
-  if (contextMenuX + contextW >= windowW) {
-    const divisionW = windowW - contextW
-    currentContextMenuX.value = `${divisionW}px`
-  } else {
-    currentContextMenuX.value = `${contextMenuX}px`
-  }
-}
-
-const windowMousedown = (): void => {
-  emits('hide')
-}
-watch(
-  () => props.contextMenu.y,
-  (newValue: number) => {
-    if (!newValue) return
-
-    if (newValue < 0) {
-      window.removeEventListener('mousedown', windowMousedown)
-    } else {
-      window.addEventListener('mousedown', windowMousedown)
-    }
-
-    setTimeout(() => {
-      setCurrentPositionsPopup()
-    }, 0)
-  }
-)
-</script>
-
-<style scoped lang="scss">
-.context-popup {
-  top: -9999px;
-  left: -9999px;
-  bottom: 0;
-  border: none;
-  box-sizing: content-box;
-  overflow: visible;
-  display: block;
-  position: fixed;
-  z-index: 10002;
-}
-</style>
+<template>
+  <div
+    :id="elementId"
+    class="context-popup"
+    :style="{
+      top: currentContextMenuY,
+      left: currentContextMenuX,
+    }"
+  >
+    <common-context-recursion
+      :action-loading="props.actionLoading"
+      :items="props.contextMenu.items"
+      @select-item="selectItem"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ContextMenuItem,
+  UI_I_ContextMenu,
+} from '~/components/common/context/lib/models/interfaces'
+
+const props = defineProps<{
+  contextMenu: UI_I_ContextMenu
+  actionLoading: string | null
+}>()
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+  (event: 'hide'): void
+}>()
+const selectItem = (item: UI_I_ContextMenuItem): void => {
+  emits('select-item', item)
+}
+
+const elementId = ref<string>(`context-${useUniqueId()}`)
+
+const currentContextMenuY = ref<string>('')
+const currentContextMenuX = ref<string>('')
+const setCurrentPositionsPopup = (): void => {
+  const contextMenuY = props.contextMenu.y
+  const contextMenuX = props.contextMenu.x
+
+  const contextWrap: HTMLElement | null =
+    document.querySelector(`#${elementId.value} .context-wrap`)
+  const contextW = contextWrap?.offsetWidth || 0
+  const contextH = contextWrap?.offsetHeight || 0
+
+  const windowW = window.innerWidth
+  const windowH = window.innerHeight
+
+  if (contextMenuY + contextH >= windowH) {
+    currentContextMenuY.value = 'auto'
+  } else {
+    currentContextMenuY.value = `${contextMenuY}px`
+  }
+
+  if (contextMenuX + contextW >= windowW) {
+    const divisionW = windowW - contextW
+    currentContextMenuX.value = `${divisionW}px`
+  } else {
+    currentContextMenuX.value = `${contextMenuX}px`
+  }
+}
+
+const windowMousedown = (): void => {
+  emits('hide')
+}
+watch(
+  () => props.contextMenu.y,
+  (newValue: number) => {
+    if (!newValue) return
+
+    if (newValue < 0) {
+      window.removeEventListener('mousedown', windowMousedown)
+    } else {
+      window.addEventListener('mousedown', windowMousedown)
+    }
+
+    setTimeout(() => {
+      setCurrentPositionsPopup()
+    }, 0)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.context-popup {
+  top: -9999px;
+  left: -9999px;
+  bottom: 0;
+  border: none;
+  box-sizing: content-box;
+  overflow: visible;
+  display: block;
+  position: fixed;
+  z-index: 10002;
+}
+</style>

package/components/common/lib/config/states.ts

@@ -1,126 +1,126 @@
-export const clusterLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-]
-
-export const clusterIconByState = [
-  'cluster-error',
-  'cluster',
-  'cluster-warning',
-  'cluster-error',
-  // TODO Добавил на скорую руку нужно дополнить, если есть что добавить
-]
-
-export const hostLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-  'maintenance',
-  'notResponding',
-  'disconnected',
-]
-
-export const hostIconByState = [
-  'host-error',
-  'host',
-  'host-warning',
-  'host-error',
-  'host-maintenance',
-  'host-not-responding',
-  'host-disconnected',
-]
-
-export const vmLocalizationByState = [
-  'unknown',
-  'powerOff',
-  'poweredOn',
-  'suspended',
-  'error',
-  'warning',
-  'pending',
-  'paused',
-  'blocked',
-  'shuttingDown',
-  'shuttingOff',
-]
-
-export const vmIconByState = [
-  'vm-error',
-  'vm',
-  'vm-on',
-  'vm-suspended',
-  'vm-error',
-  'vm-warning',
-  'vm-warning',
-  'vm-suspended',
-  'vm-warning',
-  'vm-warning',
-  'vm-warning',
-]
-
-export const datastoreLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-  'maintenance',
-  'inaccessible',
-  'disconnected',
-]
-
-export const datastoreIconByState = [
-  'datastore-error',
-  'datastore',
-  'datastore-warning',
-  'datastore-error',
-  'datastore-maintenance',
-  'datastore-inaccessible',
-  'datastore-unmount', // 'datastore-disconnected',
-]
-
-export const networkLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-]
-
-export const networkIconByState = [
-  'network-error',
-  'network',
-  'network-warning',
-  'network-error',
-]
-
-export const switchLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-]
-
-export const switchIconByState = [
-  'switch-error',
-  'switch',
-  'switch-warning',
-  'switch-error',
-]
-
-export const resourcePoolLocalizationByState = [
-  'unknown',
-  'normal',
-  'warning',
-  'error',
-  'alert',
-]
-
-export const resourcePoolIconByState = [
-  'resourcePoolAlert',
-  'resource-pool',
-  'resourcePoolWarning',
-  'resourcePoolAlert',
-  'resourcePoolAlert',
-]
+export const clusterLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const clusterIconByState = [
+  'cluster-error',
+  'cluster',
+  'cluster-warning',
+  'cluster-error',
+  // TODO Добавил на скорую руку нужно дополнить, если есть что добавить
+]
+
+export const hostLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+  'maintenance',
+  'notResponding',
+  'disconnected',
+]
+
+export const hostIconByState = [
+  'host-error',
+  'host',
+  'host-warning',
+  'host-error',
+  'host-maintenance',
+  'host-not-responding',
+  'host-disconnected',
+]
+
+export const vmLocalizationByState = [
+  'unknown',
+  'powerOff',
+  'poweredOn',
+  'suspended',
+  'error',
+  'warning',
+  'pending',
+  'paused',
+  'blocked',
+  'shuttingDown',
+  'shuttingOff',
+]
+
+export const vmIconByState = [
+  'vm-error',
+  'vm',
+  'vm-on',
+  'vm-suspended',
+  'vm-error',
+  'vm-warning',
+  'vm-warning',
+  'vm-suspended',
+  'vm-warning',
+  'vm-warning',
+  'vm-warning',
+]
+
+export const datastoreLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+  'maintenance',
+  'inaccessible',
+  'disconnected',
+]
+
+export const datastoreIconByState = [
+  'datastore-error',
+  'datastore',
+  'datastore-warning',
+  'datastore-error',
+  'datastore-maintenance',
+  'datastore-inaccessible',
+  'datastore-unmount', // 'datastore-disconnected',
+]
+
+export const networkLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const networkIconByState = [
+  'network-error',
+  'network',
+  'network-warning',
+  'network-error',
+]
+
+export const switchLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const switchIconByState = [
+  'switch-error',
+  'switch',
+  'switch-warning',
+  'switch-error',
+]
+
+export const resourcePoolLocalizationByState = [
+  'unknown',
+  'normal',
+  'warning',
+  'error',
+  'alert',
+]
+
+export const resourcePoolIconByState = [
+  'resourcePoolAlert',
+  'resource-pool',
+  'resourcePoolWarning',
+  'resourcePoolAlert',
+  'resourcePoolAlert',
+]

package/components/common/pages/hardwareHealth/tableView/TableView.vue

@@ -40,10 +40,26 @@
           />
           <span v-else :class="['icon', item.data.iconClassName]"></span>
           {{ item.text }}
+
+          <a
+            v-if="false"
+            id="sensor-item-warning"
+            :data-id="item.data.testId"
+            href="javascript:void(0)"
+            class="row-details__text"
+            @click="onShowFieldWarning(item.data.error)"
+            >{{ localization.details }}...
+          </a>
         </template>
       </atoms-table-data-grid>
     </div>
   </div>
+
+  <common-pages-hardware-health-table-view-modal-sensor-warning
+    v-if="isShowSensorWarningDetails"
+    :error="sensorWarningError"
+    @close-modal="isShowSensorWarningDetails = false"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -92,10 +108,32 @@ const headItems = computed<UI_I_HeadItem[]>(() =>
 )
 
 const bodyItems = computed<UI_I_BodyItem[][]>(() => {
-  const tableData = ['sensor'].includes(props.tableMode) ? props.dataTable : [] // TODO временно так
+  // const tableData = ['sensor'].includes(props.tableMode) ? props.dataTable : [] // TODO временно так
+  let tableData = props.dataTable
+
+  switch (props.tableMode) {
+    case 'storage-sensor':
+      tableData = []
+      break
+    case 'alert-warning':
+      tableData = tableData.filter((sensor: UI_I_HardwareHealthSensors) =>
+        [2, 3].includes(sensor.status)
+      )
+      break
+    case 'system-log':
+      tableData = []
+      break
+  }
 
   return table[props.tableMode].bodyItems(tableData, localization.value)
 })
+
+const isShowSensorWarningDetails = ref<boolean>(false)
+const sensorWarningError = ref<string | null>(null)
+const onShowFieldWarning = (error: string): void => {
+  isShowSensorWarningDetails.value = true
+  sensorWarningError.value = error
+}
 </script>
 
 <style lang="scss" scoped>
@@ -126,6 +164,9 @@ const bodyItems = computed<UI_I_BodyItem[][]>(() => {
           margin-top: 5px;
         }
       }
+      &__text {
+        margin-left: 8px;
+      }
     }
     .icon {
       width: 18px;

package/components/common/pages/hardwareHealth/tableView/lib/config/alertWarningTable.ts

@@ -9,8 +9,11 @@ import {
   constructColumnKey,
 } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
 import type { UI_I_HardwareHealthAlertWarnings } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
-// import { E_HostStatusIcon } from '~/components/templates/inventory/treeView/lib/models/enums'
 import { hardwareHealthAlertWarningTableKeys } from '~/components/common/pages/hardwareHealth/tableView/lib/config/tableKeys'
+import {
+  sensorsLocalizationByStatus,
+  sensorsIconByStatus,
+} from '~/components/common/pages/hardwareHealth/lib/config/status'
 
 const getItems = (
   localization: UI_I_Localization
@@ -68,7 +71,8 @@ export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
 }
 
 export const bodyItems = (
-  data: UI_I_HardwareHealthAlertWarnings[]
+  data: UI_I_HardwareHealthAlertWarnings[],
+  localization: UI_I_Localization
 ): UI_I_BodyItem[][] => {
   const bodyItems: UI_I_BodyItem[][] = []
   data.forEach((sensor: UI_I_HardwareHealthAlertWarnings, key) => {
@@ -81,13 +85,16 @@ export const bodyItems = (
       },
       {
         key: 'icon',
-        text: sensor[hardwareHealthAlertWarningTableKeys[1]],
+        text: localization[
+          sensorsLocalizationByStatus[
+            sensor[hardwareHealthAlertWarningTableKeys[1]]
+          ]
+        ],
         id: key,
-        // data: {
-        //   iconClassName:
-        //     E_HostStatusIcon[sensor[hardwareHealthAlertWarningTableKeys[1]]],
-        // },
-        data: {},
+        data: {
+          iconClassName: sensorsIconByStatus[sensor.status],
+          isSprite: false,
+        },
         testId: `table-item-${key}`,
       },
       {

package/components/common/pages/hardwareHealth/tableView/lib/config/sensorTable.ts

@@ -21,7 +21,7 @@ const getItems = (
 ): [string, boolean, string, string][] => {
   return [
     [localization.sensors, true, '330px', hardwareHealthSensorTableKeys[0]],
-    [localization.status, true, '110px', hardwareHealthSensorTableKeys[1]],
+    [localization.status, true, '140px', hardwareHealthSensorTableKeys[1]],
     [localization.reading, true, '115px', hardwareHealthSensorTableKeys[2]],
     [localization.categories, true, '130px', hardwareHealthSensorTableKeys[3]],
     [localization.lastUpdated, true, '195px', hardwareHealthSensorTableKeys[4]],

package/components/common/pages/hardwareHealth/tableView/modal/sensorWarning.vue

@@ -0,0 +1,63 @@
+<template>
+  <atoms-modal
+    show
+    width="580px"
+    class="feedback-field"
+    :title="localization.theOperationFailed"
+    test-id="feedback-filed-modal"
+    @hide="onCloseModal"
+  >
+    <template #modalBody>
+      <div class="feedback-field__body">
+        <atoms-the-icon name="info" class="feedback-field__icon" />
+
+        <p class="feedback-field__text">
+          {{ props.error }}
+        </p>
+      </div>
+    </template>
+
+    <template #modalFooter>
+      <button
+        id="sensor-feedback-field-apply-button"
+        data-id="sensor-feedback-field-apply-button"
+        class="btn btn-primary"
+        @click="onCloseModal"
+      >
+        {{ localization.ok }}
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  error: string
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+const emits = defineEmits<{
+  (event: 'close-modal'): void
+}>()
+const onCloseModal = (): void => {
+  emits('close-modal')
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.feedback-field {
+  &__body {
+    @include flex($align: center);
+  }
+  &__icon {
+    min-width: 40px;
+    height: 40px;
+    margin-right: 20px;
+  }
+  &__text {
+    @include text($fs: 14px, $fw: 300);
+  }
+}
+</style>