From c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Tue, 24 May 2022 10:04:19 +0300
Subject: Add global popovers. Add pages: pci, adapters, raid, drivers, virtual
 drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles

---
 .../SILA/AnalyticalPanel/AnalyticalPanelPage.vue   | 281 ++++++++++++++++-----
 src/views/SILA/AnalyticalPanel/PowerTable.vue      |  82 ++++++
 .../SILA/AnalyticalPanel/TemperatureTable.vue      | 115 +++++++++
 src/views/SILA/AnalyticalPanel/helpers.js          | 200 +++++++++++++++
 4 files changed, 615 insertions(+), 63 deletions(-)
 create mode 100644 src/views/SILA/AnalyticalPanel/PowerTable.vue
 create mode 100644 src/views/SILA/AnalyticalPanel/TemperatureTable.vue
 create mode 100644 src/views/SILA/AnalyticalPanel/helpers.js

(limited to 'src/views/SILA/AnalyticalPanel')

diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
index b736f026..ed4ee19c 100644
--- a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
+++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
@@ -4,16 +4,18 @@
     <div class="main-container">
       <div class="tables-container">
         <div class="server-table">
-          <span class="semi-bold-16px">Состояние сервера</span>
+          <span class="semi-bold-16px">{{
+            $t('global.status.serverStatus')
+          }}</span>
           <b-table
             show-empty
             responsive="md"
             class="bootstrap-analytical-table"
-            :items="server_items"
+            :items="serverItems"
             :fields="server_fields"
           >
             <template #cell(value)="{ value }">
-              <b-col v-if="value" col="1">
+              <b-col v-if="value">
                 <img
                   src="@/assets/images/icon-ok.svg"
                   class="system-network-table__icon"
@@ -29,37 +31,144 @@
           </b-table>
         </div>
         <div class="events-table">
-          <span class="semi-bold-16px">События</span>
-          <b-table
-            show-empty
-            responsive="md"
-            class="bootstrap-analytical-table"
-            :items="events_items"
-            :fields="events_fields"
-          >
-          </b-table>
+          <span class="semi-bold-16px">{{ $t('global.action.events') }}</span>
+          <div id="events-table-wrapper">
+            <b-table
+              show-empty
+              :sticky-header="stickyHeader"
+              responsive="md"
+              class="bootstrap-analytical-table"
+              :no-border-collapse="true"
+              :items="eventsItems"
+              :fields="events_fields"
+            >
+              <template #cell(date)="{ value }">
+                <img
+                  src="@/assets/images/event-logs/time.svg"
+                  class="sourse__img"
+                />
+                <span class="regular-12px quaternary"> {{ value }} </span>
+              </template>
+              <template #cell(type)="{ value }">
+                <span
+                  v-if="value === 'Критические'"
+                  class="bold-12px__caps errors"
+                  >{{ value }}</span
+                >
+                <span
+                  v-else-if="value === 'Предупреждения'"
+                  class="bold-12px__caps warning"
+                >
+                  {{ value }}
+                </span>
+                <span v-else class="bold-12px__caps information">{{
+                  value
+                }}</span>
+              </template>
+              <template #cell(description)="data">
+                <b-row class="semi-bold-16px tretiatry">
+                  {{ data.item.description.name }}
+                </b-row>
+                <b-row
+                  class="regular-12px tretiatry pointer"
+                  @click="toggleRowDetails(data)"
+                >
+                  {{ data.item.description.description }}</b-row
+                >
+              </template>
+              <template #row-details="{ index }">
+                <b-container fluid>
+                  <b-col class="mt-1 mb-2 regular-12px tretiatry">
+                    <span class="row-details">
+                      {{
+                        `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.
+                   Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.`
+                      }}
+                      {{ $t(eventsItems[index].description.description) }}
+                    </span>
+                  </b-col>
+                </b-container>
+              </template>
+            </b-table>
+          </div>
         </div>
       </div>
+      <div class="indicators-container">
+        <span class="bold-16px">{{ $t('global.status.indicators') }}</span>
+        <span class="indicators-units regular-12px tretiatry">
+          {{ $t('global.units.unit') }}</span
+        >
+        <b-button id="popover-choice-1" variant="unstiled">
+          <span class="regular-12px units-label">
+            {{
+              $t(`global.units.${unit === 'Ампераж' ? 'amper' : 'volt'}`)
+            }}</span
+          >
+          <img class="units__icon" src="@/assets/images/icon-chevron-red.svg" />
+        </b-button>
+      </div>
+      <two-chioce-popover
+        :id="1"
+        fitst-option="Ампераж"
+        second-option="Вольтаж"
+        :chosen-option="unit"
+        :first-action="selectAmper"
+        :second-action="selectVolt"
+      />
+      <!-- <unit-popover
+        :select-amper="selectAmper"
+        :select-volt="selectVolt"
+        :unit="unit"
+      /> -->
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <accessory-table :records="accessoryData.power" />
+      <power-table :time-scale="timeScale" />
+      <div class="tables-container">
+        <span class="semi-bold-16px">Управление</span>
+      </div>
+      <control-system />
     </div>
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel';
+import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
 
+import PowerTable from './PowerTable';
+import { AccessoryData, ServerItems, EventsItems } from './helpers';
 export default {
   components: {
     PageTitle,
+    DateSwitch,
+    AccessoryTable,
+    PowerTable,
+    ControlSystem,
+    TwoChiocePopover,
   },
-
+  mixins: [TableRowExpandMixin],
   data() {
     return {
+      unit: 'Ампераж',
+      isActive: false,
+      timeScale: 'hour',
+      stickyHeader: '511px',
+      accessoryData: AccessoryData,
+      serverItems: ServerItems,
+      eventsItems: EventsItems,
       server_fields: [
         {
           key: 'param',
           label: 'Раздел',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class: 'bootstrap-analytical-table__column-first',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
@@ -67,33 +176,18 @@ export default {
           key: 'value',
           label: 'Статус',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class:
             'bootstrap-rounded-table__column-last analytical-table__status',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
       ],
-      server_items: [
-        { param: 'Сервер №1', value: true },
-        { param: 'ВМС', value: true },
-        { param: 'Аналитическая панель', value: true },
-        { param: 'RAID-контроллеры', value: false },
-        { param: 'Модули памяти', value: true },
-        { param: 'Процессоры', value: true },
-        { param: 'Источники питания', value: true },
-        { param: 'Вентиляторы', value: true },
-        { param: 'Физические накопители', value: true },
-        { param: 'Виртуальные накопители', value: true },
-        { param: 'Материнская плата', value: true },
-        { param: 'Сетевые адаптеры', value: true },
-        { param: 'PCI устройства', value: true },
-      ],
       events_fields: [
         {
-          key: 'time',
+          key: 'date',
           label: 'Время',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class: 'bootstrap-analytical-table__column-first',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
@@ -101,53 +195,59 @@ export default {
           key: 'type',
           label: 'Тип события',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
+          class: 'bootstrap-analytical-table__column-center',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
         {
-          key: 'info',
+          key: 'description',
           label: 'О событии',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
-          class: 'bootstrap-rounded-table__column-last',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
+          class: 'bootstrap-analytical-table__column-last',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
       ],
-      events_items: [
-        { time: 'Сервер №1', type: 'Критические', info: 'true' },
-        { time: 'ВМС', type: 'Критические', info: 'true' },
-        {
-          time: 'Аналитическая панель',
-          type: 'Критические',
-          info: 'true',
-        },
-        {
-          time: 'RAID-контроллеры',
-          type: 'Критические',
-          info: 'false',
-        },
-        {
-          time: 'Модули памяти',
-          type: 'Критические',
-          info: 'true',
-        },
-        { time: 'Процессоры', type: 'Критические', info: 'true' },
-        {
-          time: 'Источники питания',
-          type: 'Критические',
-          info: 'true',
-        },
-        { time: 'Вентиляторы', type: 'Критические', info: 'true' },
-        { time: 'Физические накопители', type: 'Критические', info: 'true' },
-      ],
     };
   },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    selectAmper() {
+      this.unit = 'Ампераж';
+    },
+    selectVolt() {
+      this.unit = 'Вольтаж';
+    },
+  },
 };
 </script>
 <style lang="scss">
 .analytical-table__status {
   width: 10%;
 }
+
+#popover-unit-ractive {
+  padding-left: 5px;
+}
+
+#popover-unit-ampere {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+#popover-unit-volt {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 12px;
+  // color: $red-brand-primary;
+}
 </style>
 <style lang="scss" scoped>
 .tables-container {
@@ -164,4 +264,59 @@ export default {
 .events-table {
   width: 65%;
 }
+
+#events-table-wrapper div {
+  overflow-y: overlay;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-top: 43px solid transparent;
+    background: $faint-secondary-primary-20;
+    border-radius: 16px;
+    background-clip: content-box;
+  }
+}
+
+.row-details {
+  display: block;
+  height: auto;
+  width: 30vw;
+}
+
+.errors {
+  color: $indicators-errors !important;
+}
+
+.warning {
+  color: $indicators-warning !important;
+}
+
+.information {
+  color: $indicators-complementary !important;
+}
+
+.indicators-container {
+  margin-left: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.indicators-units {
+  margin-left: auto;
+}
+
+.units__icon {
+  margin: 0 32px 0 5px;
+  cursor: pointer;
+}
+
+.units-label {
+  cursor: pointer;
+  color: $red-brand-primary;
+}
 </style>
diff --git a/src/views/SILA/AnalyticalPanel/PowerTable.vue b/src/views/SILA/AnalyticalPanel/PowerTable.vue
new file mode 100644
index 00000000..27bb4efa
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/PowerTable.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'areaspline',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(6, this.timeScale),
+            title: null,
+            labels: {
+              step: 1,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(2.5, 'A'),
+            min: 0,
+            max: 4,
+            title: null,
+            tickInterval: 1,
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          series: Series['power'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+            areaspline: {
+              fillOpacity: 0,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/AnalyticalPanel/TemperatureTable.vue b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
new file mode 100644
index 00000000..ae52062a
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'areaspline',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, 'С°'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            minorGridLineColor: '#1A3E5B1A',
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значение предупреждения, С°',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter, sans-serif',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+          },
+          series: Series['temperature'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+            areaspline: {
+              fillOpacity: 0,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/AnalyticalPanel/helpers.js b/src/views/SILA/AnalyticalPanel/helpers.js
new file mode 100644
index 00000000..8655afc3
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/helpers.js
@@ -0,0 +1,200 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  power: [
+    {
+      name: 'Sean',
+      data: [1, 1, 2.7, 0.5, 0.2, 1],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [0.4, 0.3, 1, 1.4, 2, 0.4],
+      color: '#F18638',
+    },
+    {
+      name: 'Brendan',
+      data: [0.5, 2.5, 1, 0.4, 1, 3],
+      color: '#139BB9',
+    },
+  ],
+};
+
+export const setTime = (count) => {
+  const arr = [...new Array(count)].map(() => '');
+  for (let i = 0; i < arr.length; i++) {
+    arr[i] = `15:${i}0`;
+  }
+  return arr;
+};
+
+export const setCategories = (count, desc) => {
+  const arr = [];
+  for (let i = 0; i < count; i += 0.5) {
+    arr.push(`${i} ${desc}`);
+  }
+  return arr;
+};
+
+export const AccessoryData = {
+  power: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Наименование',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'power',
+        label: 'Текущее значение тока, А',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Источникк питания 1',
+        power: '1,3 A',
+      },
+      {
+        name: 'Источникк питания 2',
+        power: '1,8 A',
+      },
+      {
+        name: 'Источникк питания 3',
+        power: '1,6 A',
+      },
+    ],
+  },
+};
+
+export const ServerItems = [
+  { param: 'Сервер №1', value: true },
+  { param: 'ВМС', value: true },
+  { param: 'Аналитическая панель', value: true },
+  { param: 'RAID-контроллеры', value: false },
+  { param: 'Модули памяти', value: true },
+  { param: 'Процессоры', value: true },
+  { param: 'Источники питания', value: true },
+  { param: 'Вентиляторы', value: true },
+  { param: 'Физические накопители', value: true },
+  { param: 'Виртуальные накопители', value: true },
+  { param: 'Материнская плата', value: true },
+  { param: 'Сетевые адаптеры', value: true },
+  { param: 'PCI устройства', value: true },
+];
+
+export const EventsItems = [
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+];
-- 
cgit v1.2.3