From 97d86b33d78c3b92b29915d6afba125b67bc6714 Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsiew@gmail.com>
Date: Mon, 2 Dec 2019 05:07:57 -0600
Subject: Add system overview view

- Sets up system overview layout with out of the box Bootstrap
- Creates overview quick links and overview events
- Add Date-FNS

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Id0a3d4d3b82ef2e1a4f838b3c7e725558e602504
---
 package-lock.json                          |  11 ++-
 package.json                               |   1 +
 src/components/AppOverview/AppOverview.vue |  12 ---
 src/components/AppOverview/index.js        |   2 -
 src/main.js                                |  14 ++-
 src/router/index.js                        |   2 +-
 src/views/Home.vue                         |  15 ---
 src/views/Overview/Events.vue              |  43 +++++++++
 src/views/Overview/Home.vue                | 147 +++++++++++++++++++++++++++++
 src/views/Overview/OverviewQuickLinks.vue  |  64 +++++++++++++
 10 files changed, 275 insertions(+), 36 deletions(-)
 delete mode 100644 src/components/AppOverview/AppOverview.vue
 delete mode 100644 src/components/AppOverview/index.js
 delete mode 100644 src/views/Home.vue
 create mode 100644 src/views/Overview/Events.vue
 create mode 100644 src/views/Overview/Home.vue
 create mode 100644 src/views/Overview/OverviewQuickLinks.vue

diff --git a/package-lock.json b/package-lock.json
index 120eab4b..b059a6cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4846,8 +4846,7 @@
     "date-fns": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
-      "dev": true
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
     "de-indent": {
       "version": "1.0.2",
@@ -14886,6 +14885,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-date-fns": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-date-fns/-/vue-date-fns-1.1.0.tgz",
+      "integrity": "sha512-9xgVtDtK97C5ztLAelecfd+lfUpYn6nGRVxuD6SCk/FiN9pr7C81qP83STcsFw4hz0MfcOinfqd8ctBarMsmpA==",
+      "requires": {
+        "date-fns": "^1.29.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-4.0.3.tgz",
diff --git a/package.json b/package.json
index 6cbc0944..cb44ebc7 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "bootstrap-vue": "2.1.0",
     "core-js": "3.3.2",
     "vue": "2.6.10",
+    "vue-date-fns": "^1.1.0",
     "vue-router": "3.1.3",
     "vuex": "3.0.1"
   },
diff --git a/src/components/AppOverview/AppOverview.vue b/src/components/AppOverview/AppOverview.vue
deleted file mode 100644
index 055c9111..00000000
--- a/src/components/AppOverview/AppOverview.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <h1>Overview</h1>
-</template>
-
-<script>
-export default {
-  name: "AppOverview",
-  data() {
-    return {};
-  }
-};
-</script>
diff --git a/src/components/AppOverview/index.js b/src/components/AppOverview/index.js
deleted file mode 100644
index 3f1a43b2..00000000
--- a/src/components/AppOverview/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import AppOverview from "./AppOverview";
-export default AppOverview;
diff --git a/src/main.js b/src/main.js
index 4db1b2bf..e18ce89e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,29 +2,35 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import Axios from "axios";
+import { dateFilter } from "vue-date-fns";
 import {
+  BadgePlugin,
   ButtonPlugin,
   CollapsePlugin,
+  FormCheckboxPlugin,
   LayoutPlugin,
   LinkPlugin,
+  ListGroupPlugin,
   ModalPlugin,
   NavbarPlugin,
   NavPlugin,
   TablePlugin
 } from "bootstrap-vue";
 
-Vue.use(LayoutPlugin);
+Vue.filter("date", dateFilter);
+
+Vue.use(BadgePlugin);
 Vue.use(ButtonPlugin);
 Vue.use(CollapsePlugin);
+Vue.use(FormCheckboxPlugin);
+Vue.use(LayoutPlugin);
 Vue.use(LinkPlugin);
+Vue.use(ListGroupPlugin);
 Vue.use(ModalPlugin);
 Vue.use(NavbarPlugin);
 Vue.use(NavPlugin);
 Vue.use(TablePlugin);
 
-Vue.prototype.$http = Axios;
-
 new Vue({
   router,
   store,
diff --git a/src/router/index.js b/src/router/index.js
index dfa1e58b..03b94c4c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import Home from "../views/Overview/Home.vue";
 
 Vue.use(VueRouter);
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index f6cbd4eb..00000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <AppOverview />
-</template>
-
-<script>
-// @ is an alias to /src
-import AppOverview from "@/components/AppOverview";
-
-export default {
-  name: "app-overview",
-  components: {
-    AppOverview
-  }
-};
-</script>
diff --git a/src/views/Overview/Events.vue b/src/views/Overview/Events.vue
new file mode 100644
index 00000000..b49ed6e4
--- /dev/null
+++ b/src/views/Overview/Events.vue
@@ -0,0 +1,43 @@
+<template>
+  <b-list-group>
+    <b-list-group-item href="#" class="flex-column align-items-start">
+      #{{ logging.entry.Id }}
+      <b-badge variant="danger">{{ logging.entry.Severity }}</b-badge>
+      <div class="d-flex w-100 justify-content-between">
+        <small>{{
+          logging.entry.Timestamp | date("MMM, DD YYYY HH:MM:SS A ZZ")
+        }}</small>
+        <ChevronRight16 />
+      </div>
+      <p class="mb-1">
+        {{ logging.entry.EventID }}: {{ logging.entry.Description }}
+      </p>
+    </b-list-group-item>
+  </b-list-group>
+</template>
+
+<script>
+import ChevronRight16 from "@carbon/icons-vue/es/chevron--right/16";
+
+export default {
+  name: "events",
+  components: {
+    ChevronRight16
+  },
+  data() {
+    return {
+      logging: {
+        entry: {
+          Description:
+            "An internal failure has occurred while performing an operation.",
+          EventID: "ABCDEF123",
+          Id: 1,
+          Resolved: false,
+          Severity: "Error",
+          Timestamp: 1574782085071
+        }
+      }
+    };
+  }
+};
+</script>
diff --git a/src/views/Overview/Home.vue b/src/views/Overview/Home.vue
new file mode 100644
index 00000000..1dbda47e
--- /dev/null
+++ b/src/views/Overview/Home.vue
@@ -0,0 +1,147 @@
+<template>
+  <b-container fluid>
+    <h1>Overview</h1>
+    <b-row>
+      <b-col lg="8" sm="12">
+        <section>
+          <h2>Server Information</h2>
+          <b-row>
+            <b-col sm="6">
+              <dl>
+                <dt>MODEL</dt>
+                <dd>{{ system.Model || "N/A" }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <dl>
+                <dt>MANUFACTURER</dt>
+                <dd>{{ system.Manufacturer || "N/A" }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <dl>
+                <dt>SERIAL NUMBER</dt>
+                <dd>{{ system.SerialNumber || "N/A" }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <dl>
+                <dt>FIRMWARE VERSION</dt>
+                <dd>{{ software.Version || "N/A" }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </section>
+        <section>
+          <h2>BMC information</h2>
+          <b-row>
+            <b-col sm="6">
+              <dl>
+                <dt>HOSTNAME</dt>
+                <dd>{{ network.config.HostName || "N/A" }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <dl>
+                <dt>MAC ADDRESS</dt>
+                <dd>{{ network.eth0.MACAddress || "N/A" }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <dl>
+                <dt>IP ADDRESS</dt>
+                <dd>{{ network.ipv4.Address || "N/A" }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <dl>
+                <dt>FIRMWARE VERSION</dt>
+                <dd>{{ logging.entry.Version || "N/A" }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </section>
+        <section>
+          <h2>Power consumption</h2>
+          <b-row>
+            <b-col sm="6">
+              <dl>
+                <dt>POWER CONSUMPTION</dt>
+                <dd>{{ total_power.description || "N/A" }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <dl>
+                <dt>POWER CAP</dt>
+                <dd v-if="!power_cap.PowerCapEnable">Not enabled</dd>
+                <dd v-else>{{ power_cap.PowerCap }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </section>
+      </b-col>
+      <b-col lg="4" sm="12">
+        <quickLinks />
+      </b-col>
+    </b-row>
+    <section>
+      <h2>High priority events</h2>
+      <events />
+    </section>
+  </b-container>
+</template>
+
+<script>
+import OverviewQuickLinks from "./OverviewQuickLinks";
+import Events from "./Events";
+
+export default {
+  name: "Overview",
+  components: {
+    quickLinks: OverviewQuickLinks,
+    events: Events
+  },
+  data() {
+    return {
+      logging: {
+        entry: {
+          Description:
+            "An internal failure has occurred while performing an operation.",
+          EventID: "ABCDEF123",
+          Id: 1,
+          Resolved: false,
+          Severity: "CRITICAL",
+          Timestamp: 1574782085071,
+          Version: "openbmc-v1.0.0"
+        }
+      },
+      network: {
+        config: {
+          HostName: "Name of the Host"
+        },
+        eth0: {
+          MACAddress: "00:00:00:00:00:00"
+        },
+        ipv4: {
+          Address: "00.00.00.00"
+        }
+      },
+      power_cap: {
+        PowerCap: 0,
+        PowerCapEnable: false
+      },
+      software: {
+        Version: "OPENBMC-v1"
+      },
+      system: {
+        Manufacturer: "",
+        Model: "0000000000000000",
+        SerialNumber: "0000000000000000"
+      },
+      total_power: {
+        description: "0"
+      }
+    };
+  }
+};
+</script>
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
new file mode 100644
index 00000000..f8806b27
--- /dev/null
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -0,0 +1,64 @@
+<template>
+  <b-list-group>
+    <b-list-group-item
+      href="#"
+      variant="danger"
+      v-show="logging.entry.Severity === 'Error'"
+      >View 1 high priority event</b-list-group-item
+    >
+    <b-list-group-item>
+      <dl>
+        <dt>BMC time</dt>
+        <dd>{{ bmc.Elapsed | date("MMM, DD YYYY HH:MM:SS A ZZ") }}</dd>
+      </dl>
+    </b-list-group-item>
+    <b-list-group-item>
+      <!-- TODO: add toggle LED on/off funtionality -->
+      <b-form-checkbox v-model="checked" name="check-button" switch>
+        Turn
+        <span v-if="!checked">on</span>
+        <span v-else>off</span> server LED
+      </b-form-checkbox>
+    </b-list-group-item>
+    <b-list-group-item
+      href="#"
+      class="d-flex justify-content-between align-items-center"
+    >
+      <!-- TODO: link to SOL -->
+      <span>Serial over LAN console</span>
+      <ChevronRight16 />
+    </b-list-group-item>
+    <b-list-group-item
+      href="#"
+      class="d-flex justify-content-between align-items-center"
+    >
+      <!-- TODO: link to network settings -->
+      <span>Edit network settings</span>
+      <ChevronRight16 />
+    </b-list-group-item>
+  </b-list-group>
+</template>
+
+<script>
+import ChevronRight16 from "@carbon/icons-vue/es/chevron--right/16";
+
+export default {
+  name: "quickLinks",
+  components: {
+    ChevronRight16
+  },
+  data() {
+    return {
+      bmc: {
+        Elapsed: 1574782085071
+      },
+      logging: {
+        entry: {
+          Severity: "Error"
+        }
+      },
+      checked: false
+    };
+  }
+};
+</script>
-- 
cgit v1.2.3