SILABMC-N206 add power supply page

7 files changed, 241 insertions, 1 deletions

diff --git a/src/env/components/AppNavigation/sila.js b/src/env/components/AppNavigation/sila.js
index 3319368b..68ff77e1 100644
--- a/src/env/components/AppNavigation/sila.js
+++ b/src/env/components/AppNavigation/sila.js
@@ -156,6 +156,17 @@ const AppNavigationMixin = {
           ],
         },
         {
+          id: 'power-sup',
+          label: this.$t('appNavigation.powerSup'),
+          children: [
+            {
+              id: 'power/static',
+              label: this.$t('appNavigation.staticInfo'),
+              route: '/power/static',
+            },
+          ],
+        },
+        {
           id: 'settings',
           label: this.$t('appNavigation.settings'),
           children: [
diff --git a/src/env/router/sila.js b/src/env/router/sila.js
index dbf4369f..a5495638 100644
--- a/src/env/router/sila.js
+++ b/src/env/router/sila.js
@@ -34,6 +34,7 @@ import ProcessorsDynamic from '@/views/_sila/Processors/Dynamic';
 import MemoryDynamic from '@/views/_sila/Memory/Dynamic';
 import FansDynamic from '@/views/_sila/Fans/Dynamic';
 import MotherboardDynamic from '@/views/_sila/Motherboard/Dynamic';
+import PowerStatic from '@/views/_sila/Power/Static';
 import i18n from '@/i18n';
 
 const routes = [
@@ -197,6 +198,14 @@ const routes = [
         },
       },
       {
+        path: 'power/static',
+        name: 'power-static',
+        component: PowerStatic,
+        meta: {
+          title: i18n.t('appPageTitle.powerSup'),
+        },
+      },
+      {
         path: '/security-and-access/sessions',
         name: 'sessions',
         component: Sessions,
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 8b801958..fb23abf7 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -136,6 +136,7 @@
     "certificates": "@:appPageTitle.certificates",
     "virtualMedia": "@:appPageTitle.virtualMedia",
     "power": "@:appPageTitle.power",
+    "powerSup": "@:appPageTitle.powerSup",
     "keyClear": "@:appPageTitle.keyClear",
     "staticInfo": "Статическая информация",
     "fans": "@:appPageTitle.fans",
@@ -146,6 +147,7 @@
   "appPageTitle": {
     "changePassword": "Изменить пароль",
     "power": "Питание",
+    "powerSup": "Источники питания",
     "sessions": "Сессии",
     "dateTime": "Дата и время",
     "dumps": "Дампы",
@@ -900,6 +902,21 @@
         "warning": "Значение предупреждения"
     }
   },
+  "pagePowerSup": {
+    "supplies": "Установленые источники питания",
+    "table": {
+      "param": "Параметр",
+      "value": "Значение",
+      "name": "Название",
+      "health": "Состояние",
+      "statusState": "Статус",
+      "serialNumber": "Серийный номер",
+      "manufacturer": "Производитель",
+      "model": "Модель",
+      "efficiencyPercent": "Процент эффективности",
+      "powerInputWatts": "Выходное напряжение, Вт"
+  }
+},
   "pageSerialOverLan": {
     "alert": {
       "disconnectedAlertMessage" : "Система должна быть включена для соединения"
diff --git a/src/views/_sila/Fans/Static/FansStaticPage.vue b/src/views/_sila/Fans/Static/FansStaticPage.vue
index 3ce9079e..dba6edb1 100644
--- a/src/views/_sila/Fans/Static/FansStaticPage.vue
+++ b/src/views/_sila/Fans/Static/FansStaticPage.vue
@@ -1,7 +1,7 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.specification')" />
-    <page-section :section-small-title="$t('pageFans.installedFans')">
+    <page-section :section-title="$t('pageFans.installedFans')">
       <b-table
         responsive="md"
         show-empty
diff --git a/src/views/_sila/Power/Static/PowerStaticPage.vue b/src/views/_sila/Power/Static/PowerStaticPage.vue
new file mode 100644
index 00000000..8021b1d8
--- /dev/null
+++ b/src/views/_sila/Power/Static/PowerStaticPage.vue
@@ -0,0 +1,131 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('appPageTitle.specification')" />
+    <supply-tabs
+      :slots="supplies"
+      :current-slot="currentSlot"
+      :switch-tab="switchTab"
+    ></supply-tabs>
+    <page-section :section-title="$t('pagePowerSup.supplies')" class="pt-3">
+      <b-table
+        responsive="md"
+        show-empty
+        hover
+        :items="items"
+        :busy="isBusy"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+      >
+        <template #cell(value)="{ index, value }">
+          <status-icon v-if="index === 1" :status="statusIcon(value)" />
+          {{ value }}
+        </template>
+      </b-table>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/_sila/Global/PageTitle';
+import PageSection from '@/components/_sila/Global/PageSection';
+import SupplyTabs from './SupplyTabs';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+
+import StatusIcon from '@/components/_sila//Global/StatusIcon';
+
+export default {
+  components: { PageTitle, PageSection, SupplyTabs, StatusIcon },
+  mixins: [DataFormatterMixin, LoadingBarMixin],
+  data() {
+    return {
+      currentSlot: null,
+      isBusy: true,
+      fields: [
+        {
+          key: 'param',
+          label: this.$t('pagePowerSup.table.param'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '50%' },
+        },
+        {
+          key: 'value',
+          label: this.$t('pagePowerSup.table.value'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '50%' },
+          tdClass: 'text-nowrap',
+        },
+      ],
+    };
+  },
+  computed: {
+    supplies() {
+      return this.$store.getters['powerSupply/powerSupplies'];
+    },
+    currentItem() {
+      return this.supplies?.find((el) => {
+        if (el.id === this.currentSlot) return el;
+      });
+    },
+    items() {
+      return [
+        {
+          param: this.$t('pagePowerSup.table.name'),
+          value: this.currentItem?.name,
+        },
+        {
+          param: this.$t('pagePowerSup.table.health'),
+          value: this.currentItem?.health,
+        },
+        {
+          param: this.$t('pagePowerSup.table.statusState'),
+          value: this.currentItem?.statusState,
+        },
+        {
+          param: this.$t('pagePowerSup.table.serialNumber'),
+          value: this.currentItem?.serialNumber,
+        },
+        {
+          param: this.$t('pagePowerSup.table.manufacturer'),
+          value: this.currentItem?.manufacturer,
+        },
+        {
+          param: this.$t('pagePowerSup.table.model'),
+          value: this.currentItem?.model,
+        },
+        {
+          param: this.$t('pagePowerSup.table.efficiencyPercent'),
+          value: this.currentItem?.efficiencyPercent,
+        },
+        {
+          param: this.$t('pagePowerSup.table.powerInputWatts'),
+          value: this.currentItem?.powerInputWatts,
+        },
+      ];
+    },
+  },
+
+  watch: {
+    supplies() {
+      if (this.currentSlot === null) {
+        this.currentSlot = this.supplies[0]?.id;
+      }
+    },
+  },
+
+  created() {
+    this.startLoader();
+    this.$store.dispatch('powerSupply/getAllPowerSupplies').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+
+  methods: {
+    switchTab(id) {
+      this.currentSlot = id;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Static/SupplyTabs.vue b/src/views/_sila/Power/Static/SupplyTabs.vue
new file mode 100644
index 00000000..7a1ea20d
--- /dev/null
+++ b/src/views/_sila/Power/Static/SupplyTabs.vue
@@ -0,0 +1,70 @@
+<template>
+  <b-col
+    ref="content"
+    class="d-flex align-items-center data-tab"
+    @wheel.prevent="wheelItBetter($event)"
+  >
+    <span
+      v-for="item in slots"
+      :key="item.id"
+      :class="{ 'tab-active': currentSlot === item.id }"
+      @click="switchTab(item.id)"
+      >{{ item.id }}</span
+    >
+  </b-col>
+</template>
+
+<script>
+export default {
+  props: {
+    slots: {
+      type: Array,
+      default: null,
+    },
+    currentSlot: {
+      type: String,
+      default: null,
+    },
+    switchTab: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      container: this.$refs.content,
+    };
+  },
+  methods: {
+    wheelItBetter(event) {
+      if (event.deltaY < 0) {
+        this.$refs.content.scrollLeft -= 25;
+      } else {
+        this.$refs.content.scrollLeft += 25;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.data-tab {
+  height: 48px;
+  max-width: 150%;
+  width: auto;
+  margin: -2rem -1.95rem 0px -2rem;
+  padding-left: 2rem;
+  overflow-x: auto;
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: -0.95rem;
+  }
+  border-bottom: 1px solid $gray-10;
+  gap: 24px;
+}
+
+.tab-active {
+  color: $primary;
+  transition: ease-in 0.15s;
+}
+</style>
diff --git a/src/views/_sila/Power/Static/index.js b/src/views/_sila/Power/Static/index.js
new file mode 100644
index 00000000..14c4ef64
--- /dev/null
+++ b/src/views/_sila/Power/Static/index.js
@@ -0,0 +1,2 @@
+import PowerStaticPage from './PowerStaticPage.vue';
+export default PowerStaticPage;