From 3f4094d08b873e17464a51c817ea7d41177f848d Mon Sep 17 00:00:00 2001
From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
Date: Mon, 4 Jul 2022 23:11:28 +0300
Subject: IBS: _ibs UI Theme

---
 src/views/_ibs/Overview/Overview.vue           | 100 +++++++++++++++++++++++++
 src/views/_ibs/Overview/OverviewCard.vue       |  81 ++++++++++++++++++++
 src/views/_ibs/Overview/OverviewDumps.vue      |  54 +++++++++++++
 src/views/_ibs/Overview/OverviewEvents.vue     |  85 +++++++++++++++++++++
 src/views/_ibs/Overview/OverviewFirmware.vue   |  49 ++++++++++++
 src/views/_ibs/Overview/OverviewInventory.vue  |  57 ++++++++++++++
 src/views/_ibs/Overview/OverviewNetwork.vue    |  71 ++++++++++++++++++
 src/views/_ibs/Overview/OverviewPower.vue      |  48 ++++++++++++
 src/views/_ibs/Overview/OverviewQuickLinks.vue |  56 ++++++++++++++
 src/views/_ibs/Overview/OverviewServer.vue     |  47 ++++++++++++
 src/views/_ibs/Overview/index.js               |   2 +
 11 files changed, 650 insertions(+)
 create mode 100644 src/views/_ibs/Overview/Overview.vue
 create mode 100644 src/views/_ibs/Overview/OverviewCard.vue
 create mode 100644 src/views/_ibs/Overview/OverviewDumps.vue
 create mode 100644 src/views/_ibs/Overview/OverviewEvents.vue
 create mode 100644 src/views/_ibs/Overview/OverviewFirmware.vue
 create mode 100644 src/views/_ibs/Overview/OverviewInventory.vue
 create mode 100644 src/views/_ibs/Overview/OverviewNetwork.vue
 create mode 100644 src/views/_ibs/Overview/OverviewPower.vue
 create mode 100644 src/views/_ibs/Overview/OverviewQuickLinks.vue
 create mode 100644 src/views/_ibs/Overview/OverviewServer.vue
 create mode 100644 src/views/_ibs/Overview/index.js

(limited to 'src/views/_ibs/Overview')

diff --git a/src/views/_ibs/Overview/Overview.vue b/src/views/_ibs/Overview/Overview.vue
new file mode 100644
index 00000000..9960f373
--- /dev/null
+++ b/src/views/_ibs/Overview/Overview.vue
@@ -0,0 +1,100 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <overview-quick-links class="mb-4" />
+    <page-section
+      :section-title="$t('pageOverview.systemInformation')"
+      class="mb-1"
+    >
+      <b-card-group deck>
+        <overview-server />
+        <overview-firmware />
+      </b-card-group>
+      <b-card-group deck>
+        <overview-network />
+        <overview-power />
+      </b-card-group>
+    </page-section>
+    <page-section :section-title="$t('pageOverview.statusInformation')">
+      <b-card-group deck>
+        <overview-events />
+        <overview-inventory />
+        <overview-dumps v-if="showDumps" />
+      </b-card-group>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import OverviewDumps from './OverviewDumps.vue';
+import OverviewEvents from './OverviewEvents.vue';
+import OverviewFirmware from './OverviewFirmware.vue';
+import OverviewInventory from './OverviewInventory.vue';
+import OverviewNetwork from './OverviewNetwork';
+import OverviewPower from './OverviewPower';
+import OverviewQuickLinks from './OverviewQuickLinks';
+import OverviewServer from './OverviewServer';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+
+export default {
+  name: 'Overview',
+  components: {
+    OverviewDumps,
+    OverviewEvents,
+    OverviewFirmware,
+    OverviewInventory,
+    OverviewNetwork,
+    OverviewPower,
+    OverviewQuickLinks,
+    OverviewServer,
+    PageSection,
+    PageTitle,
+  },
+  mixins: [LoadingBarMixin],
+  data() {
+    return {
+      showDumps: process.env.VUE_APP_ENV_NAME === 'ibm',
+    };
+  },
+  created() {
+    this.startLoader();
+    const dumpsPromise = new Promise((resolve) => {
+      this.$root.$on('overview-dumps-complete', () => resolve());
+    });
+    const eventsPromise = new Promise((resolve) => {
+      this.$root.$on('overview-events-complete', () => resolve());
+    });
+    const firmwarePromise = new Promise((resolve) => {
+      this.$root.$on('overview-firmware-complete', () => resolve());
+    });
+    const inventoryPromise = new Promise((resolve) => {
+      this.$root.$on('overview-inventory-complete', () => resolve());
+    });
+    const networkPromise = new Promise((resolve) => {
+      this.$root.$on('overview-network-complete', () => resolve());
+    });
+    const powerPromise = new Promise((resolve) => {
+      this.$root.$on('overview-power-complete', () => resolve());
+    });
+    const quicklinksPromise = new Promise((resolve) => {
+      this.$root.$on('overview-quicklinks-complete', () => resolve());
+    });
+    const serverPromise = new Promise((resolve) => {
+      this.$root.$on('overview-server-complete', () => resolve());
+    });
+
+    Promise.all([
+      dumpsPromise,
+      eventsPromise,
+      firmwarePromise,
+      inventoryPromise,
+      networkPromise,
+      powerPromise,
+      quicklinksPromise,
+      serverPromise,
+    ]).finally(() => this.endLoader());
+  },
+};
+</script>
diff --git a/src/views/_ibs/Overview/OverviewCard.vue b/src/views/_ibs/Overview/OverviewCard.vue
new file mode 100644
index 00000000..4fc0a031
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewCard.vue
@@ -0,0 +1,81 @@
+<template>
+  <b-card bg-variant="light" border-variant="light" class="mb-4">
+    <div class="justify-content-between align-items-center d-flex flex-wrap">
+      <h3 class="h5 mb-0">{{ title }}</h3>
+      <div class="card-buttons">
+        <b-button
+          v-if="exportButton || downloadButton"
+          :disabled="disabled"
+          :download="download"
+          :href="href"
+          class="p-0"
+          variant="link"
+        >
+          <span v-if="downloadButton">{{ $t('global.action.download') }}</span>
+          <span v-if="exportButton">{{ $t('global.action.exportAll') }}</span>
+        </b-button>
+        <span v-if="exportButton || downloadButton" class="pl-2 pr-2">|</span>
+        <b-link :to="to">{{ $t('pageOverview.viewMore') }}</b-link>
+      </div>
+    </div>
+    <slot></slot>
+  </b-card>
+</template>
+
+<script>
+export default {
+  name: 'OverviewCard',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+    downloadButton: {
+      type: Boolean,
+      default: false,
+    },
+    exportButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    fileName: {
+      type: String,
+      default: 'data',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    to: {
+      type: String,
+      default: '/',
+    },
+  },
+  computed: {
+    dataForExport() {
+      return JSON.stringify(this.data);
+    },
+    download() {
+      return `${this.fileName}.json`;
+    },
+    href() {
+      return `data:text/json;charset=utf-8,${this.dataForExport}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+a {
+  vertical-align: middle;
+  font-size: 14px;
+}
+.card {
+  min-width: 310px;
+}
+</style>
diff --git a/src/views/_ibs/Overview/OverviewDumps.vue b/src/views/_ibs/Overview/OverviewDumps.vue
new file mode 100644
index 00000000..a2ae4e4e
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewDumps.vue
@@ -0,0 +1,54 @@
+<template>
+  <overview-card
+    :data="dumps"
+    :disabled="dumps.length === 0"
+    :download-button="true"
+    :file-name="exportFileNameByDate()"
+    :title="$t('pageOverview.dumps')"
+    :to="`/logs/dumps`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.total') }}</dt>
+          <dd class="h3">{{ dataFormatter(dumps.length) }}</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Dumps',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    dumps() {
+      return this.$store.getters['dumps/allDumps'];
+    },
+  },
+  created() {
+    this.$store.dispatch('dumps/getBmcDumpEntries').finally(() => {
+      this.$root.$emit('overview-dumps-complete');
+    });
+  },
+  methods: {
+    exportFileNameByDate() {
+      // Create export file name based on date
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName = 'all_dumps_';
+      return fileName + date;
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Overview/OverviewEvents.vue b/src/views/_ibs/Overview/OverviewEvents.vue
new file mode 100644
index 00000000..b73c0b48
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewEvents.vue
@@ -0,0 +1,85 @@
+<template>
+  <overview-card
+    :data="eventLogData"
+    :disabled="eventLogData.length === 0"
+    :export-button="true"
+    :file-name="exportFileNameByDate()"
+    :title="$t('pageOverview.eventLogs')"
+    :to="`/logs/event-logs`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.criticalEvents') }}</dt>
+          <dd class="h3">
+            {{ dataFormatter(criticalEvents.length) }}
+            <status-icon status="danger" />
+          </dd>
+        </dl>
+      </b-col>
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.warningEvents') }}</dt>
+          <dd class="h3">
+            {{ dataFormatter(warningEvents.length) }}
+            <status-icon status="warning" />
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import StatusIcon from '@/components/Global/StatusIcon';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Events',
+  components: { OverviewCard, StatusIcon },
+  mixins: [DataFormatterMixin],
+  computed: {
+    eventLogData() {
+      return this.$store.getters['eventLog/allEvents'];
+    },
+    criticalEvents() {
+      return this.eventLogData
+        .filter((log) => log.severity === 'Critical')
+        .map((log) => {
+          return log;
+        });
+    },
+    warningEvents() {
+      return this.eventLogData
+        .filter((log) => log.severity === 'Warning')
+        .map((log) => {
+          return log;
+        });
+    },
+  },
+  created() {
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.$root.$emit('overview-events-complete');
+    });
+  },
+  methods: {
+    exportFileNameByDate() {
+      // Create export file name based on date
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName = 'all_event_logs_';
+      return fileName + date;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.status-icon {
+  vertical-align: text-top;
+}
+</style>
diff --git a/src/views/_ibs/Overview/OverviewFirmware.vue b/src/views/_ibs/Overview/OverviewFirmware.vue
new file mode 100644
index 00000000..f1f9ce53
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewFirmware.vue
@@ -0,0 +1,49 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.firmwareInformation')"
+    :to="`/operations/firmware`"
+  >
+    <b-row class="mt-3">
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.runningVersion') }}</dt>
+          <dd>{{ dataFormatter(runningVersion) }}</dd>
+          <dt>{{ $t('pageOverview.backupVersion') }}</dt>
+          <dd>{{ dataFormatter(backupVersion) }}</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Firmware',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    backupBmcFirmware() {
+      return this.$store.getters['firmware/backupBmcFirmware'];
+    },
+    backupVersion() {
+      return this.backupBmcFirmware?.version;
+    },
+    activeBmcFirmware() {
+      return this.$store.getters[`firmware/activeBmcFirmware`];
+    },
+    runningVersion() {
+      return this.activeBmcFirmware?.version;
+    },
+  },
+  created() {
+    this.$store.dispatch('firmware/getFirmwareInformation').finally(() => {
+      this.$root.$emit('overview-firmware-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_ibs/Overview/OverviewInventory.vue b/src/views/_ibs/Overview/OverviewInventory.vue
new file mode 100644
index 00000000..575cb7b7
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewInventory.vue
@@ -0,0 +1,57 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.inventory')"
+    :to="`/hardware-status/inventory`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl sm="6">
+          <dt>{{ $t('pageOverview.systemIdentifyLed') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="identifyLedSwitch"
+              v-model="systems.locationIndicatorActive"
+              data-test-id="overviewInventory-checkbox-identifyLed"
+              switch
+              @change="toggleIdentifyLedSwitch"
+            >
+              <span v-if="systems.locationIndicatorActive">
+                {{ $t('global.status.on') }}
+              </span>
+              <span v-else>{{ $t('global.status.off') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+
+export default {
+  name: 'Inventory',
+  components: {
+    OverviewCard,
+  },
+  computed: {
+    systems() {
+      let systemData = this.$store.getters['system/systems'][0];
+      return systemData ? systemData : {};
+    },
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      this.$root.$emit('overview-inventory-complete');
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Overview/OverviewNetwork.vue b/src/views/_ibs/Overview/OverviewNetwork.vue
new file mode 100644
index 00000000..b81e5c73
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewNetwork.vue
@@ -0,0 +1,71 @@
+<template>
+  <overview-card
+    v-if="network"
+    :title="$t('pageOverview.networkInformation')"
+    :to="`/settings/network`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.hostName') }}</dt>
+          <dd>{{ dataFormatter(network.hostname) }}</dd>
+        </dl>
+      </b-col>
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.linkStatus') }}</dt>
+          <dd>
+            {{ dataFormatter(network.linkStatus) }}
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.ipv4') }}</dt>
+          <dd>
+            {{ dataFormatter(network.staticAddress) }}
+          </dd>
+        </dl>
+      </b-col>
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.dhcp') }}</dt>
+          <dd>
+            {{
+              dataFormatter(
+                network.dhcpAddress.length !== 0
+                  ? network.dhcpAddress[0].Address
+                  : null
+              )
+            }}
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Network',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    network() {
+      return this.$store.getters['network/globalNetworkSettings'][0];
+    },
+  },
+  created() {
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      this.$root.$emit('overview-network-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_ibs/Overview/OverviewPower.vue b/src/views/_ibs/Overview/OverviewPower.vue
new file mode 100644
index 00000000..0d84c76c
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewPower.vue
@@ -0,0 +1,48 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.powerInformation')"
+    :to="`/resource-management/power`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.powerConsumption') }}</dt>
+          <dd v-if="powerConsumptionValue == null">
+            {{ $t('global.status.notAvailable') }}
+          </dd>
+          <dd v-else>{{ powerConsumptionValue }} W</dd>
+          <dt>{{ $t('pageOverview.powerCap') }}</dt>
+          <dd v-if="powerCapValue == null">
+            {{ $t('global.status.disabled') }}
+          </dd>
+          <dd v-else>{{ powerCapValue }} W</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'Power',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    ...mapGetters({
+      powerCapValue: 'powerControl/powerCapValue',
+      powerConsumptionValue: 'powerControl/powerConsumptionValue',
+    }),
+  },
+  created() {
+    this.$store.dispatch('powerControl/getPowerControl').finally(() => {
+      this.$root.$emit('overview-power-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_ibs/Overview/OverviewQuickLinks.vue b/src/views/_ibs/Overview/OverviewQuickLinks.vue
new file mode 100644
index 00000000..bc579b03
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewQuickLinks.vue
@@ -0,0 +1,56 @@
+<template>
+  <b-card bg-variant="light" border-variant="light">
+    <b-row class="d-flex justify-content-between align-items-center">
+      <b-col sm="6" lg="9" class="mb-2 mt-2">
+        <dl>
+          <dt>{{ $t('pageOverview.bmcTime') }}</dt>
+          <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
+            {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+          </dd>
+          <dd v-else>--</dd>
+        </dl>
+      </b-col>
+      <b-col sm="6" lg="3" class="mb-2 mt-2">
+        <b-button
+          to="/operations/serial-over-lan"
+          variant="secondary"
+          data-test-id="overviewQuickLinks-button-solConsole"
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{ $t('pageOverview.solConsole') }}
+          <icon-arrow-right />
+        </b-button>
+      </b-col>
+    </b-row>
+  </b-card>
+</template>
+
+<script>
+import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  name: 'QuickLinks',
+  components: {
+    IconArrowRight: ArrowRight16,
+  },
+  mixins: [BVToastMixin],
+  computed: {
+    bmcTime() {
+      return this.$store.getters['global/bmcTime'];
+    },
+  },
+  created() {
+    Promise.all([this.$store.dispatch('global/getBmcTime')]).finally(() => {
+      this.$root.$emit('overview-quicklinks-complete');
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+dd,
+dl {
+  margin: 0;
+}
+</style>
diff --git a/src/views/_ibs/Overview/OverviewServer.vue b/src/views/_ibs/Overview/OverviewServer.vue
new file mode 100644
index 00000000..d066d391
--- /dev/null
+++ b/src/views/_ibs/Overview/OverviewServer.vue
@@ -0,0 +1,47 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.serverInformation')"
+    :to="`/hardware-status/inventory`"
+  >
+    <b-row class="mt-3">
+      <b-col lg="6">
+        <dl>
+          <dt>{{ $t('pageOverview.model') }}</dt>
+          <dd>{{ dataFormatter(serverModel) }}</dd>
+          <dt>{{ $t('pageOverview.serialNumber') }}</dt>
+          <dd>{{ dataFormatter(serverSerialNumber) }}</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Server',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    ...mapState({
+      server: (state) => state.system.systems[0],
+      serverModel() {
+        return this.server?.model;
+      },
+      serverSerialNumber() {
+        return this.server?.serialNumber;
+      },
+    }),
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      this.$root.$emit('overview-server-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_ibs/Overview/index.js b/src/views/_ibs/Overview/index.js
new file mode 100644
index 00000000..8553ef3d
--- /dev/null
+++ b/src/views/_ibs/Overview/index.js
@@ -0,0 +1,2 @@
+import Overview from './Overview.vue';
+export default Overview;
-- 
cgit v1.2.3