diff options
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/Overview/Overview.vue | 118 | ||||
-rw-r--r-- | src/views/Overview/OverviewEvents.vue | 60 | ||||
-rw-r--r-- | src/views/Overview/OverviewQuickLinks.vue | 37 |
3 files changed, 98 insertions, 117 deletions
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue index bf3f27fb..570f8494 100644 --- a/src/views/Overview/Overview.vue +++ b/src/views/Overview/Overview.vue @@ -3,30 +3,30 @@ <PageTitle /> <b-row> <b-col lg="8" sm="12"> - <PageSection sectionTitle="Server Information"> + <PageSection sectionTitle="Server information"> <b-row> <b-col sm="6"> <dl> - <dt>MODEL</dt> - <dd>{{ system.Model || "N/A" }}</dd> + <dt>Model</dt> + <dd>{{ serverModel }}</dd> </dl> </b-col> <b-col sm="6"> <dl> - <dt>MANUFACTURER</dt> - <dd>{{ system.Manufacturer || "N/A" }}</dd> + <dt>Manufacturer</dt> + <dd>{{ serverManufacturer }}</dd> </dl> </b-col> <b-col sm="6"> <dl> - <dt>SERIAL NUMBER</dt> - <dd>{{ system.SerialNumber || "N/A" }}</dd> + <dt>Serial number</dt> + <dd>{{ serverSerialNumber }}</dd> </dl> </b-col> <b-col sm="6"> <dl> - <dt>FIRMWARE VERSION</dt> - <dd>{{ software.Version || "N/A" }}</dd> + <dt>Firmware version</dt> + <dd>{{ hostActiveVersion }}</dd> </dl> </b-col> </b-row> @@ -35,26 +35,26 @@ <b-row> <b-col sm="6"> <dl> - <dt>HOSTNAME</dt> - <dd>{{ network.config.HostName || "N/A" }}</dd> + <dt>Hostname</dt> + <dd>{{ hostName }}</dd> </dl> </b-col> <b-col sm="6"> <dl> - <dt>MAC ADDRESS</dt> - <dd>{{ network.eth0.MACAddress || "N/A" }}</dd> + <dt>MAC address</dt> + <dd>{{ macAddress }}</dd> </dl> </b-col> <b-col sm="6"> <dl> - <dt>IP ADDRESS</dt> - <dd>{{ network.ipv4.Address || "N/A" }}</dd> + <dt>IP address</dt> + <dd v-for="ip in ipAddress" v-bind:key="ip.id">{{ ip }}</dd> </dl> </b-col> <b-col sm="6"> <dl> - <dt>FIRMWARE VERSION</dt> - <dd>{{ logging.entry.Version || "N/A" }}</dd> + <dt>Firmware version</dt> + <dd>{{ bmcActiveVersion }}</dd> </dl> </b-col> </b-row> @@ -63,26 +63,25 @@ <b-row> <b-col sm="6"> <dl> - <dt>POWER CONSUMPTION</dt> - <dd>{{ total_power.description || "N/A" }}</dd> + <dt>Power consumption</dt> + <dd>{{ powerConsumption }}</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> + <dt>Power cap</dt> + <dd>{{ powerCapValue }}</dd> </dl> </b-col> </b-row> </PageSection> </b-col> <b-col lg="4" sm="12"> - <quickLinks /> + <OverviewQuickLinks /> </b-col> </b-row> <PageSection sectionTitle="High priority events"> - <events /> + <OverviewEvents /> </PageSection> </b-container> </template> @@ -92,56 +91,39 @@ import OverviewQuickLinks from "./OverviewQuickLinks"; import OverviewEvents from "./OverviewEvents"; import PageTitle from "../../components/Global/PageTitle"; import PageSection from "../../components/Global/PageSection"; - +import { mapState } from "vuex"; export default { name: "Overview", components: { - quickLinks: OverviewQuickLinks, - events: OverviewEvents, + OverviewQuickLinks, + OverviewEvents, PageTitle, PageSection }, - 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" - } - }; + created() { + this.getOverviewInfo(); + }, + computed: mapState({ + serverModel: state => state.overview.serverModel, + serverManufacturer: state => state.overview.serverManufacturer, + serverSerialNumber: state => state.overview.serverSerialNumber, + hostName: state => state.global.hostName, + hostActiveVersion: state => state.firmware.hostActiveVersion, + bmcActiveVersion: state => state.firmware.bmcActiveVersion, + powerConsumption: state => state.powerConsumption.powerConsumption, + powerCapValue: state => state.powerCap.powerCapValue, + ipAddress: state => state.networkSettings.ipAddress, + macAddress: state => state.networkSettings.macAddress + }), + methods: { + getOverviewInfo() { + this.$store.dispatch("overview/getServerInfo"); + this.$store.dispatch("global/getHostName"); + this.$store.dispatch("firmware/getFirmwareInfo"); + this.$store.dispatch("powerConsumption/getPowerData"); + this.$store.dispatch("powerCap/getPowerCapData"); + this.$store.dispatch("networkSettings/getNetworkData"); + } } }; </script> diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue index b49ed6e4..05106067 100644 --- a/src/views/Overview/OverviewEvents.vue +++ b/src/views/Overview/OverviewEvents.vue @@ -1,43 +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> + <div> + <b-list-group v-for="logData in eventLogData" :key="logData.id"> + <b-list-group-item href="#" class="flex-column align-items-start"> + {{ "#" + logData.logId }} + <b-badge variant="danger">{{ logData.priority }}</b-badge> + <div class="d-flex w-100 justify-content-between"> + <small>{{ + logData.Timestamp | date("MMM DD YYYY HH:MM:SS A ZZ") + }}</small> + <ChevronRight16 /> + </div> + <p class="mb-1">{{ logData.eventID }}: {{ logData.description }}</p> + </b-list-group-item> + </b-list-group> + <b-list-group v-if="!eventLogData"> + There are no high priority events to display at this time. + </b-list-group> + </div> </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 - } - } - }; + created() { + this.getEventLogData(); + }, + computed: { + eventLogData() { + return this.$store.getters["eventLog/eventLogData"]; + } + }, + methods: { + getEventLogData() { + this.$store.dispatch("eventLog/getEventLogData"); + } } }; </script> diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue index f8806b27..577ea5ff 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -1,22 +1,17 @@ <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 - > + <!-- TODO: add event log priority events count --> <b-list-group-item> <dl> <dt>BMC time</dt> - <dd>{{ bmc.Elapsed | date("MMM, DD YYYY HH:MM:SS A ZZ") }}</dd> + <dd>{{ bmcTime | 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> + <b-form-checkbox v-model="serverLedChecked" name="check-button" switch> Turn - <span v-if="!checked">on</span> + <span v-if="!serverLedChecked">on</span> <span v-else>off</span> server LED </b-form-checkbox> </b-list-group-item> @@ -41,23 +36,27 @@ <script> import ChevronRight16 from "@carbon/icons-vue/es/chevron--right/16"; - export default { name: "quickLinks", components: { ChevronRight16 }, + created() { + this.getBmcTime(); + }, + computed: { + bmcTime() { + return this.$store.getters["global/bmcTime"]; + } + }, + methods: { + getBmcTime() { + this.$store.dispatch("global/getBmcTime"); + } + }, data() { return { - bmc: { - Elapsed: 1574782085071 - }, - logging: { - entry: { - Severity: "Error" - } - }, - checked: false + serverLedChecked: false }; } }; |