diff options
author | Dixsie Wolmers <dixsiew@gmail.com> | 2019-12-02 14:07:57 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-01-22 05:30:19 +0300 |
commit | 97d86b33d78c3b92b29915d6afba125b67bc6714 (patch) | |
tree | 139c0da941495dd17fdf4ce6b9b963aedb65fd7c /src/views/Overview | |
parent | d415d97af75dc6b77718103b3763f8d62460e147 (diff) | |
download | webui-vue-97d86b33d78c3b92b29915d6afba125b67bc6714.tar.xz |
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
Diffstat (limited to 'src/views/Overview')
-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 |
3 files changed, 254 insertions, 0 deletions
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> |