diff options
-rw-r--r-- | package-lock.json | 11 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/components/AppOverview/AppOverview.vue | 12 | ||||
-rw-r--r-- | src/components/AppOverview/index.js | 2 | ||||
-rw-r--r-- | src/main.js | 14 | ||||
-rw-r--r-- | src/router/index.js | 2 | ||||
-rw-r--r-- | src/views/Home.vue | 15 | ||||
-rw-r--r-- | src/views/Overview/Events.vue | 43 | ||||
-rw-r--r-- | src/views/Overview/Home.vue | 147 | ||||
-rw-r--r-- | src/views/Overview/OverviewQuickLinks.vue | 64 |
10 files changed, 275 insertions, 36 deletions
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> |