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
diff --git a/package-lock.json b/package-lock.json
index 120eab4..b059a6c 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 6cbc094..cb44ebc 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 055c911..0000000
--- 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 3f1a43b..0000000
--- 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 4db1b2b..e18ce89 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,29 +2,35 @@
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 dfa1e58..03b94c4 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 f6cbd4e..0000000
--- 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 0000000..b49ed6e
--- /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 0000000..1dbda47
--- /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 0000000..f8806b2
--- /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>