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

8 files changed, 265 insertions, 34 deletions

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>