Update overview layout
Layout updates uses bootstrap vue cards to display
general information. View more links and download
or export ability has been added to the overview page.
Network settings displays the hostname and the first IP
address for the first ethernet interface. Link status
was also added.
TODO: Add idle power and power mode properties in seperate
commit for each story.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Iaf0720d76b2a9416f068a1e779ede59bffda9727
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index a94d399..d50d44a 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -561,36 +561,34 @@
}
},
"pageOverview": {
- "bmcInformation": "BMC information",
- "firmwareVersion": "Firmware version",
- "highPriorityEvents": "High priority events",
- "manufacturer": "Manufacturer",
+ "backupVersion": "Backup",
+ "bmcTime": "BMC time",
+ "criticalEvents": "Critical",
+ "dhcp": "DHCPv4",
+ "dumps": "Dumps",
+ "eventLogs": "Event logs",
+ "firmwareInformation": "Firmware information",
+ "hostname": "Hostname",
+ "idlePower": "Idle power",
+ "inventory": "Inventory and LEDs",
+ "ipv4": "IPv4",
+ "linkStatus": "Link status",
"model": "Model",
"networkInformation": "Network information",
"powerCap": "Power cap",
"powerConsumption": "Power consumption",
+ "powerInformation": "Power information",
+ "powerMode": "Power mode",
+ "runningVersion": "Running",
"serialNumber": "Serial number",
"serverInformation": "Server information",
- "events": {
- "date": "Date",
- "description": "Description",
- "id": "ID",
- "noHighEventsMsg": "There are no high priority events to display at this time.",
- "severity": "Severity",
- "type": "Type",
- "viewAllButton": "View all event logs"
- },
- "network": {
- "hostname": "Hostname",
- "ipAddress": "IP address",
- "macAddress": "MAC address"
- },
- "quicklinks": {
- "bmcTime": "BMC time",
- "editNetworkSettings": "Edit network settings",
- "serverLed": "Server LED",
- "solConsole": "@:appNavigation.serialOverLan"
- }
+ "solConsole": "@:appNavigation.serialOverLan",
+ "statusInformation": "Status information",
+ "systemIdentifyLed": "System identify LED",
+ "systemInformation": "System information",
+ "total": "Total",
+ "warningEvents": "Warning",
+ "viewMore": "View more"
},
"pagePostCodeLogs": {
"allExportFilePrefix": "All_POST_codes_log_",
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 2436e39..9960f37 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -1,167 +1,100 @@
<template>
<b-container fluid="xl">
<page-title />
- <div class="quicklinks-section">
- <overview-quick-links />
- </div>
- <b-row>
- <b-col>
- <page-section :section-title="$t('pageOverview.bmcInformation')">
- <b-row>
- <b-col>
- <dl>
- <dt>{{ $t('pageOverview.firmwareVersion') }}</dt>
- <dd>{{ bmcFirmwareVersion }}</dd>
- </dl>
- </b-col>
- </b-row>
- </page-section>
- <b-row>
- <b-col>
- <page-section
- :section-title="$t('pageOverview.networkInformation')"
- >
- <overview-network />
- </page-section>
- </b-col>
- </b-row>
- </b-col>
- <b-col>
- <page-section :section-title="$t('pageOverview.serverInformation')">
- <b-row>
- <b-col lg="6">
- <dl>
- <dt>{{ $t('pageOverview.model') }}</dt>
- <dd>{{ serverModel }}</dd>
- </dl>
- </b-col>
- <b-col lg="6">
- <dl>
- <dt>{{ $t('pageOverview.manufacturer') }}</dt>
- <dd>{{ serverManufacturer }}</dd>
- </dl>
- </b-col>
- <b-col lg="6">
- <dl>
- <dt>{{ $t('pageOverview.serialNumber') }}</dt>
- <dd>{{ serverSerialNumber }}</dd>
- </dl>
- </b-col>
- <b-col lg="6">
- <dl>
- <dt>{{ $t('pageOverview.firmwareVersion') }}</dt>
- <dd>{{ hostFirmwareVersion }}</dd>
- </dl>
- </b-col>
- </b-row>
- </page-section>
- <page-section :section-title="$t('pageOverview.powerConsumption')">
- <b-row>
- <b-col sm="6">
- <dl>
- <dt>{{ $t('pageOverview.powerConsumption') }}</dt>
- <dd v-if="powerConsumptionValue == null">
- {{ $t('global.status.notAvailable') }}
- </dd>
- <dd v-else>{{ powerConsumptionValue }} W</dd>
- </dl>
- </b-col>
- <b-col sm="6">
- <dl>
- <dt>{{ $t('pageOverview.powerCap') }}</dt>
- <dd v-if="powerCapValue == null">
- {{ $t('global.status.disabled') }}
- </dd>
- <dd v-else>{{ powerCapValue }} W</dd>
- </dl>
- </b-col>
- </b-row>
- </page-section>
- </b-col>
- </b-row>
- <page-section :section-title="$t('pageOverview.highPriorityEvents')">
- <overview-events />
+ <overview-quick-links class="mb-4" />
+ <page-section
+ :section-title="$t('pageOverview.systemInformation')"
+ class="mb-1"
+ >
+ <b-card-group deck>
+ <overview-server />
+ <overview-firmware />
+ </b-card-group>
+ <b-card-group deck>
+ <overview-network />
+ <overview-power />
+ </b-card-group>
+ </page-section>
+ <page-section :section-title="$t('pageOverview.statusInformation')">
+ <b-card-group deck>
+ <overview-events />
+ <overview-inventory />
+ <overview-dumps v-if="showDumps" />
+ </b-card-group>
</page-section>
</b-container>
</template>
<script>
-import OverviewQuickLinks from './OverviewQuickLinks';
-import OverviewEvents from './OverviewEvents';
-import OverviewNetwork from './OverviewNetwork';
-import PageTitle from '@/components/Global/PageTitle';
-import PageSection from '@/components/Global/PageSection';
-import { mapState } from 'vuex';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import OverviewDumps from './OverviewDumps.vue';
+import OverviewEvents from './OverviewEvents.vue';
+import OverviewFirmware from './OverviewFirmware.vue';
+import OverviewInventory from './OverviewInventory.vue';
+import OverviewNetwork from './OverviewNetwork';
+import OverviewPower from './OverviewPower';
+import OverviewQuickLinks from './OverviewQuickLinks';
+import OverviewServer from './OverviewServer';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
export default {
name: 'Overview',
components: {
- OverviewQuickLinks,
+ OverviewDumps,
OverviewEvents,
+ OverviewFirmware,
+ OverviewInventory,
OverviewNetwork,
- PageTitle,
+ OverviewPower,
+ OverviewQuickLinks,
+ OverviewServer,
PageSection,
+ PageTitle,
},
mixins: [LoadingBarMixin],
- computed: {
- ...mapState({
- server: (state) => state.system.systems[0],
- powerCapValue: (state) => state.powerControl.powerCapValue,
- powerConsumptionValue: (state) =>
- state.powerControl.powerConsumptionValue,
- serverManufacturer() {
- if (this.server) return this.server.manufacturer || '--';
- return '--';
- },
- serverModel() {
- if (this.server) return this.server.model || '--';
- return '--';
- },
- serverSerialNumber() {
- if (this.server) return this.server.serialNumber || '--';
- return '--';
- },
- }),
- activeHostFirmware() {
- return this.$store.getters[`firmware/activeHostFirmware`];
- },
- hostFirmwareVersion() {
- return this.activeHostFirmware?.version || '--';
- },
- activeBmcFirmware() {
- return this.$store.getters[`firmware/activeBmcFirmware`];
- },
- bmcFirmwareVersion() {
- return this.activeBmcFirmware?.version || '--';
- },
+ data() {
+ return {
+ showDumps: process.env.VUE_APP_ENV_NAME === 'ibm',
+ };
},
created() {
this.startLoader();
- const quicklinksPromise = new Promise((resolve) => {
- this.$root.$on('overview-quicklinks-complete', () => resolve());
- });
- const networkPromise = new Promise((resolve) => {
- this.$root.$on('overview-network-complete', () => resolve());
+ const dumpsPromise = new Promise((resolve) => {
+ this.$root.$on('overview-dumps-complete', () => resolve());
});
const eventsPromise = new Promise((resolve) => {
this.$root.$on('overview-events-complete', () => resolve());
});
+ const firmwarePromise = new Promise((resolve) => {
+ this.$root.$on('overview-firmware-complete', () => resolve());
+ });
+ const inventoryPromise = new Promise((resolve) => {
+ this.$root.$on('overview-inventory-complete', () => resolve());
+ });
+ const networkPromise = new Promise((resolve) => {
+ this.$root.$on('overview-network-complete', () => resolve());
+ });
+ const powerPromise = new Promise((resolve) => {
+ this.$root.$on('overview-power-complete', () => resolve());
+ });
+ const quicklinksPromise = new Promise((resolve) => {
+ this.$root.$on('overview-quicklinks-complete', () => resolve());
+ });
+ const serverPromise = new Promise((resolve) => {
+ this.$root.$on('overview-server-complete', () => resolve());
+ });
+
Promise.all([
- this.$store.dispatch('system/getSystem'),
- this.$store.dispatch(`firmware/getFirmwareInformation`),
- this.$store.dispatch('powerControl/getPowerControl'),
- quicklinksPromise,
- networkPromise,
+ dumpsPromise,
eventsPromise,
+ firmwarePromise,
+ inventoryPromise,
+ networkPromise,
+ powerPromise,
+ quicklinksPromise,
+ serverPromise,
]).finally(() => this.endLoader());
},
};
</script>
-
-<style lang="scss" scoped>
-.quicklinks-section {
- margin-bottom: $spacer * 2;
- margin-left: $spacer * -1;
-}
-</style>
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
new file mode 100644
index 0000000..4fc0a03
--- /dev/null
+++ b/src/views/Overview/OverviewCard.vue
@@ -0,0 +1,81 @@
+<template>
+ <b-card bg-variant="light" border-variant="light" class="mb-4">
+ <div class="justify-content-between align-items-center d-flex flex-wrap">
+ <h3 class="h5 mb-0">{{ title }}</h3>
+ <div class="card-buttons">
+ <b-button
+ v-if="exportButton || downloadButton"
+ :disabled="disabled"
+ :download="download"
+ :href="href"
+ class="p-0"
+ variant="link"
+ >
+ <span v-if="downloadButton">{{ $t('global.action.download') }}</span>
+ <span v-if="exportButton">{{ $t('global.action.exportAll') }}</span>
+ </b-button>
+ <span v-if="exportButton || downloadButton" class="pl-2 pr-2">|</span>
+ <b-link :to="to">{{ $t('pageOverview.viewMore') }}</b-link>
+ </div>
+ </div>
+ <slot></slot>
+ </b-card>
+</template>
+
+<script>
+export default {
+ name: 'OverviewCard',
+ props: {
+ data: {
+ type: Array,
+ default: () => [],
+ },
+ disabled: {
+ type: Boolean,
+ default: true,
+ },
+ downloadButton: {
+ type: Boolean,
+ default: false,
+ },
+ exportButton: {
+ type: Boolean,
+ default: false,
+ },
+
+ fileName: {
+ type: String,
+ default: 'data',
+ },
+ title: {
+ type: String,
+ default: '',
+ },
+ to: {
+ type: String,
+ default: '/',
+ },
+ },
+ computed: {
+ dataForExport() {
+ return JSON.stringify(this.data);
+ },
+ download() {
+ return `${this.fileName}.json`;
+ },
+ href() {
+ return `data:text/json;charset=utf-8,${this.dataForExport}`;
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+a {
+ vertical-align: middle;
+ font-size: 14px;
+}
+.card {
+ min-width: 310px;
+}
+</style>
diff --git a/src/views/Overview/OverviewDumps.vue b/src/views/Overview/OverviewDumps.vue
new file mode 100644
index 0000000..6fe5996
--- /dev/null
+++ b/src/views/Overview/OverviewDumps.vue
@@ -0,0 +1,54 @@
+<template>
+ <overview-card
+ :data="dumps"
+ :disabled="dumps.length === 0"
+ :download-button="true"
+ :file-name="exportFileNameByDate()"
+ :title="$t('pageOverview.dumps')"
+ :to="`/logs/dumps`"
+ >
+ <b-row class="mt-3">
+ <b-col sm="6">
+ <dl>
+ <dt>{{ $t('pageOverview.total') }}</dt>
+ <dd class="h3">{{ tableFormatter(dumps.length) }}</dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+
+export default {
+ name: 'Dumps',
+ components: {
+ OverviewCard,
+ },
+ mixins: [TableDataFormatterMixin],
+ computed: {
+ dumps() {
+ return this.$store.getters['dumps/bmcDumps'];
+ },
+ },
+ created() {
+ this.$store.dispatch('dumps/getBmcDumps').finally(() => {
+ this.$root.$emit('overview-dumps-complete');
+ });
+ },
+ methods: {
+ exportFileNameByDate() {
+ // Create export file name based on date
+ let date = new Date();
+ date =
+ date.toISOString().slice(0, 10) +
+ '_' +
+ date.toString().split(':').join('-').split(' ')[4];
+ let fileName = 'all_dumps_';
+ return fileName + date;
+ },
+ },
+};
+</script>
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index b8f876a..84eadd1 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -1,72 +1,61 @@
<template>
- <div>
- <b-button
- variant="link"
- to="/logs/event-logs"
- data-test-id="overviewEvents-button-eventLogs"
- class="float-md-right"
- >
- {{ $t('pageOverview.events.viewAllButton') }}
- </b-button>
- <b-table
- per-page="5"
- sort-by="id"
- sort-desc
- hover
- responsive="md"
- stacked="sm"
- show-empty
- :items="eventLogData"
- :fields="fields"
- :empty-text="$t('pageOverview.events.noHighEventsMsg')"
- >
- <template #cell(severity)="{ value }">
- <status-icon status="danger" />
- {{ value }}
- </template>
- <template #cell(date)="{ value }">
- <p class="mb-0">{{ value | formatDate }}</p>
- <p class="mb-0">{{ value | formatTime }}</p>
- </template>
- </b-table>
- </div>
+ <overview-card
+ :data="eventLogData"
+ :disabled="eventLogData.length === 0"
+ :export-button="true"
+ :file-name="exportFileNameByDate()"
+ :title="$t('pageOverview.eventLogs')"
+ :to="`/logs/event-logs`"
+ >
+ <b-row class="mt-3">
+ <b-col sm="6">
+ <dl>
+ <dt>{{ $t('pageOverview.criticalEvents') }}</dt>
+ <dd class="h3">
+ {{ tableFormatter(criticalEvents.length) }}
+ <status-icon status="danger" />
+ </dd>
+ </dl>
+ </b-col>
+ <b-col sm="6">
+ <dl>
+ <dt>{{ $t('pageOverview.warningEvents') }}</dt>
+ <dd class="h3">
+ {{ tableFormatter(warningEvents.length) }}
+ <status-icon status="warning" />
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </overview-card>
</template>
<script>
+import OverviewCard from './OverviewCard';
import StatusIcon from '@/components/Global/StatusIcon';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
export default {
name: 'Events',
- components: { StatusIcon },
- data() {
- return {
- fields: [
- {
- key: 'id',
- label: this.$t('pageOverview.events.id'),
- },
- {
- key: 'severity',
- label: this.$t('pageOverview.events.severity'),
- },
- {
- key: 'type',
- label: this.$t('pageOverview.events.type'),
- },
- {
- key: 'date',
- label: this.$t('pageOverview.events.date'),
- },
- {
- key: 'description',
- label: this.$t('pageOverview.events.description'),
- },
- ],
- };
- },
+ components: { OverviewCard, StatusIcon },
+ mixins: [TableDataFormatterMixin],
computed: {
eventLogData() {
- return this.$store.getters['eventLog/highPriorityEvents'];
+ return this.$store.getters['eventLog/allEvents'];
+ },
+ criticalEvents() {
+ return this.eventLogData
+ .filter((log) => log.severity === 'Critical')
+ .map((log) => {
+ return log;
+ });
+ },
+ warningEvents() {
+ return this.eventLogData
+ .filter((log) => log.severity === 'Warning')
+ .map((log) => {
+ return log;
+ });
},
},
created() {
@@ -74,5 +63,23 @@
this.$root.$emit('overview-events-complete');
});
},
+ methods: {
+ exportFileNameByDate() {
+ // Create export file name based on date
+ let date = new Date();
+ date =
+ date.toISOString().slice(0, 10) +
+ '_' +
+ date.toString().split(':').join('-').split(' ')[4];
+ let fileName = 'all_event_logs_';
+ return fileName + date;
+ },
+ },
};
</script>
+
+<style lang="scss" scoped>
+.status-icon {
+ vertical-align: text-top;
+}
+</style>
diff --git a/src/views/Overview/OverviewFirmware.vue b/src/views/Overview/OverviewFirmware.vue
new file mode 100644
index 0000000..ec9dfff
--- /dev/null
+++ b/src/views/Overview/OverviewFirmware.vue
@@ -0,0 +1,49 @@
+<template>
+ <overview-card
+ :title="$t('pageOverview.firmwareInformation')"
+ :to="`/operations/firmware`"
+ >
+ <b-row class="mt-3">
+ <b-col>
+ <dl>
+ <dt>{{ $t('pageOverview.runningVersion') }}</dt>
+ <dd>{{ tableFormatter(runningVersion) }}</dd>
+ <dt>{{ $t('pageOverview.backupVersion') }}</dt>
+ <dd>{{ tableFormatter(backupVersion) }}</dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+
+export default {
+ name: 'Firmware',
+ components: {
+ OverviewCard,
+ },
+ mixins: [TableDataFormatterMixin],
+ computed: {
+ backupBmcFirmware() {
+ return this.$store.getters['firmware/backupBmcFirmware'];
+ },
+ backupVersion() {
+ return this.backupBmcFirmware?.version;
+ },
+ activeBmcFirmware() {
+ return this.$store.getters[`firmware/activeBmcFirmware`];
+ },
+ runningVersion() {
+ return this.activeBmcFirmware?.version;
+ },
+ },
+ created() {
+ this.$store.dispatch('firmware/getFirmwareInformation').finally(() => {
+ this.$root.$emit('overview-firmware-complete');
+ });
+ },
+};
+</script>
diff --git a/src/views/Overview/OverviewInventory.vue b/src/views/Overview/OverviewInventory.vue
new file mode 100644
index 0000000..575cb7b
--- /dev/null
+++ b/src/views/Overview/OverviewInventory.vue
@@ -0,0 +1,57 @@
+<template>
+ <overview-card
+ :title="$t('pageOverview.inventory')"
+ :to="`/hardware-status/inventory`"
+ >
+ <b-row class="mt-3">
+ <b-col sm="6">
+ <dl sm="6">
+ <dt>{{ $t('pageOverview.systemIdentifyLed') }}</dt>
+ <dd>
+ <b-form-checkbox
+ id="identifyLedSwitch"
+ v-model="systems.locationIndicatorActive"
+ data-test-id="overviewInventory-checkbox-identifyLed"
+ switch
+ @change="toggleIdentifyLedSwitch"
+ >
+ <span v-if="systems.locationIndicatorActive">
+ {{ $t('global.status.on') }}
+ </span>
+ <span v-else>{{ $t('global.status.off') }}</span>
+ </b-form-checkbox>
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+
+export default {
+ name: 'Inventory',
+ components: {
+ OverviewCard,
+ },
+ computed: {
+ systems() {
+ let systemData = this.$store.getters['system/systems'][0];
+ return systemData ? systemData : {};
+ },
+ },
+ created() {
+ this.$store.dispatch('system/getSystem').finally(() => {
+ this.$root.$emit('overview-inventory-complete');
+ });
+ },
+ methods: {
+ toggleIdentifyLedSwitch(state) {
+ this.$store
+ .dispatch('system/changeIdentifyLedState', state)
+ .catch(({ message }) => this.errorToast(message));
+ },
+ },
+};
+</script>
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index bfb378a..fbb81c6 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -1,63 +1,88 @@
<template>
- <div>
- <div v-if="ethernetData.length === 0">
- {{ $t('global.status.notAvailable') }}
- </div>
- <div
- v-for="ethernetInterface in ethernetData"
- v-else
- :key="ethernetInterface.id"
- >
- <h3 class="h5 font-weight-bold">
- {{ ethernetInterface.Id }}
- </h3>
- <b-row>
- <b-col lg="6" xl="4">
- <dl>
- <dt>{{ $t('pageOverview.network.hostname') }}</dt>
- <dd>{{ ethernetInterface.HostName }}</dd>
- </dl>
- </b-col>
- <b-col lg="6" xl="4">
- <dl>
- <dt>{{ $t('pageOverview.network.macAddress') }}</dt>
- <dd>{{ ethernetInterface.MACAddress }}</dd>
- </dl>
- </b-col>
- <b-col lg="6" xl="4">
- <dl>
- <dt>{{ $t('pageOverview.network.ipAddress') }}</dt>
- <dd
- v-for="(ip, $index) in ethernetInterface.IPv4Addresses"
- :key="$index"
- >
- {{ ip.Address }}
- </dd>
- </dl>
- </b-col>
- </b-row>
- </div>
- </div>
+ <overview-card
+ :title="$t('pageOverview.networkInformation')"
+ :to="`/settings/network`"
+ >
+ <b-row class="mt-3">
+ <b-col sm="6">
+ <dl>
+ <dt>{{ $t('pageOverview.hostname') }}</dt>
+ <dd>{{ tableFormatter(hostname) }}</dd>
+ </dl>
+ </b-col>
+ <b-col sm="6">
+ <dl>
+ <dt>{{ $t('pageOverview.linkStatus') }}</dt>
+ <dd>
+ {{ tableFormatter(linkStatus) }}
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+ <b-row>
+ <b-col>
+ <dl>
+ <dt>{{ $t('pageOverview.ipv4') }}</dt>
+ <dd>
+ {{ tableFormatter(ipStaticAddress) }}
+ </dd>
+ </dl>
+ </b-col>
+ <b-col>
+ <dl>
+ <dt>{{ $t('pageOverview.dhcp') }}</dt>
+ <dd>
+ {{ tableFormatter(ipDhcpAddress) }}
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </overview-card>
</template>
<script>
+import OverviewCard from './OverviewCard';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+import { mapState } from 'vuex';
+
export default {
name: 'Network',
+ components: {
+ OverviewCard,
+ },
+ mixins: [TableDataFormatterMixin],
+ data() {
+ return {
+ ipDhcpAddress: '',
+ };
+ },
computed: {
- ethernetData() {
- return this.$store.getters['network/ethernetData'];
- },
+ ...mapState({
+ ethernetData: (state) => state.network.ethernetData[0],
+ hostname() {
+ return this.ethernetData?.HostName;
+ },
+ linkStatus() {
+ return this.ethernetData?.LinkStatus;
+ },
+ ipStaticAddress() {
+ return this.ethernetData?.IPv4StaticAddresses[0].Address;
+ },
+ }),
},
created() {
this.$store.dispatch('network/getEthernetData').finally(() => {
this.$root.$emit('overview-network-complete');
});
+ this.getDhcpInfo();
+ },
+ methods: {
+ getDhcpInfo() {
+ const dhcp = this.ethernetData.IPv4Addresses.filter(
+ (ipv4) => ipv4.AddressOrigin === 'DHCP'
+ );
+ this.ipDhcpAddress = dhcp[0].Address;
+ },
},
};
</script>
-
-<style lang="scss" scoped>
-dd {
- margin-bottom: 0;
-}
-</style>
diff --git a/src/views/Overview/OverviewPower.vue b/src/views/Overview/OverviewPower.vue
new file mode 100644
index 0000000..a8a630a
--- /dev/null
+++ b/src/views/Overview/OverviewPower.vue
@@ -0,0 +1,56 @@
+<template>
+ <overview-card
+ :title="$t('pageOverview.powerInformation')"
+ :to="`/resource-management/power`"
+ >
+ <b-row class="mt-3">
+ <b-col sm="6">
+ <dl>
+ <dt>{{ $t('pageOverview.powerConsumption') }}</dt>
+ <dd v-if="powerConsumptionValue == null">
+ {{ $t('global.status.notAvailable') }}
+ </dd>
+ <dd v-else>{{ powerConsumptionValue }} W</dd>
+ <dt>{{ $t('pageOverview.powerCap') }}</dt>
+ <dd v-if="powerCapValue == null">
+ {{ $t('global.status.disabled') }}
+ </dd>
+ <dd v-else>{{ powerCapValue }} W</dd>
+ </dl>
+ </b-col>
+ <b-col>
+ <dl>
+ <dt>{{ $t('pageOverview.idlePower') }}</dt>
+ <dd>{{ tableFormatter(idlePower) }}</dd>
+ <dt>{{ $t('pageOverview.powerMode') }}</dt>
+ <dd>{{ tableFormatter(powerMode) }}</dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+import { mapGetters } from 'vuex';
+
+export default {
+ name: 'Power',
+ components: {
+ OverviewCard,
+ },
+ mixins: [TableDataFormatterMixin],
+ computed: {
+ ...mapGetters({
+ powerCapValue: 'powerControl/powerCapValue',
+ powerConsumptionValue: 'powerControl/powerConsumptionValue',
+ }),
+ },
+ created() {
+ this.$store.dispatch('powerControl/getPowerControl').finally(() => {
+ this.$root.$emit('overview-power-complete');
+ });
+ },
+};
+</script>
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 1dc2c98..bc579b0 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -1,56 +1,28 @@
<template>
- <div class="quicklinks form-background">
- <div>
- <dl>
- <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt>
- <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
- {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
- </dd>
- <dd v-else>--</dd>
- </dl>
- </div>
- <div>
- <dl>
- <dt>{{ $t('pageOverview.quicklinks.serverLed') }}</dt>
- <dd>
- <b-form-checkbox
- v-model="indicatorLedActiveState"
- data-test-id="overviewQuickLinks-checkbox-serverLed"
- name="check-button"
- switch
- @change="onChangeServerLed"
- >
- <span v-if="indicatorLedActiveState">
- {{ $t('global.status.on') }}
- </span>
- <span v-else>{{ $t('global.status.off') }}</span>
- </b-form-checkbox>
- </dd>
- </dl>
- </div>
- <div>
- <b-button
- to="/settings/network"
- variant="secondary"
- data-test-id="overviewQuickLinks-button-networkSettings"
- class="d-flex justify-content-between align-items-center"
- >
- {{ $t('pageOverview.quicklinks.editNetworkSettings') }}
- <icon-arrow-right />
- </b-button>
- </div>
- <div>
- <b-button
- to="/operations/serial-over-lan"
- variant="secondary"
- data-test-id="overviewQuickLinks-button-solConsole"
- class="d-flex justify-content-between align-items-center"
- >
- {{ $t('pageOverview.quicklinks.solConsole') }}
- <icon-arrow-right />
- </b-button>
- </div>
- </div>
+ <b-card bg-variant="light" border-variant="light">
+ <b-row class="d-flex justify-content-between align-items-center">
+ <b-col sm="6" lg="9" class="mb-2 mt-2">
+ <dl>
+ <dt>{{ $t('pageOverview.bmcTime') }}</dt>
+ <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
+ {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+ </dd>
+ <dd v-else>--</dd>
+ </dl>
+ </b-col>
+ <b-col sm="6" lg="3" class="mb-2 mt-2">
+ <b-button
+ to="/operations/serial-over-lan"
+ variant="secondary"
+ data-test-id="overviewQuickLinks-button-solConsole"
+ class="d-flex justify-content-between align-items-center"
+ >
+ {{ $t('pageOverview.solConsole') }}
+ <icon-arrow-right />
+ </b-button>
+ </b-col>
+ </b-row>
+ </b-card>
</template>
<script>
@@ -67,33 +39,12 @@
bmcTime() {
return this.$store.getters['global/bmcTime'];
},
- indicatorLedActiveState: {
- get() {
- return this.$store.getters['serverLed/getIndicatorLedActiveState'];
- },
- set(value) {
- return value;
- },
- },
},
created() {
- Promise.all([
- this.$store.dispatch('global/getBmcTime'),
- this.$store.dispatch('serverLed/getIndicatorLedActiveState'),
- ]).finally(() => {
+ Promise.all([this.$store.dispatch('global/getBmcTime')]).finally(() => {
this.$root.$emit('overview-quicklinks-complete');
});
},
- methods: {
- onChangeServerLed(indicatorLedActiveState) {
- this.$store
- .dispatch(
- 'serverLed/saveIndicatorLedActiveState',
- indicatorLedActiveState
- )
- .catch(({ message }) => this.errorToast(message));
- },
- },
};
</script>
@@ -102,24 +53,4 @@
dl {
margin: 0;
}
-
-.quicklinks {
- display: grid;
- grid-gap: 1rem;
- padding: 1rem;
- white-space: nowrap;
- align-items: center;
-}
-
-@include media-breakpoint-up(sm) {
- .quicklinks {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@include media-breakpoint-up(xl) {
- .quicklinks {
- grid-template-columns: repeat(4, 1fr);
- }
-}
</style>
diff --git a/src/views/Overview/OverviewServer.vue b/src/views/Overview/OverviewServer.vue
new file mode 100644
index 0000000..6d1d430
--- /dev/null
+++ b/src/views/Overview/OverviewServer.vue
@@ -0,0 +1,47 @@
+<template>
+ <overview-card
+ :title="$t('pageOverview.serverInformation')"
+ :to="`/hardware-status/inventory`"
+ >
+ <b-row class="mt-3">
+ <b-col lg="6">
+ <dl>
+ <dt>{{ $t('pageOverview.model') }}</dt>
+ <dd>{{ tableFormatter(serverModel) }}</dd>
+ <dt>{{ $t('pageOverview.serialNumber') }}</dt>
+ <dd>{{ tableFormatter(serverSerialNumber) }}</dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+import { mapState } from 'vuex';
+
+export default {
+ name: 'Server',
+ components: {
+ OverviewCard,
+ },
+ mixins: [TableDataFormatterMixin],
+ computed: {
+ ...mapState({
+ server: (state) => state.system.systems[0],
+ serverModel() {
+ return this.server?.model;
+ },
+ serverSerialNumber() {
+ return this.server?.serialNumber;
+ },
+ }),
+ },
+ created() {
+ this.$store.dispatch('system/getSystem').finally(() => {
+ this.$root.$emit('overview-server-complete');
+ });
+ },
+};
+</script>