diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/locales/en-US.json | 46 | ||||
-rw-r--r-- | src/views/Overview/Overview.vue | 201 | ||||
-rw-r--r-- | src/views/Overview/OverviewCard.vue | 81 | ||||
-rw-r--r-- | src/views/Overview/OverviewDumps.vue | 54 | ||||
-rw-r--r-- | src/views/Overview/OverviewEvents.vue | 125 | ||||
-rw-r--r-- | src/views/Overview/OverviewFirmware.vue | 49 | ||||
-rw-r--r-- | src/views/Overview/OverviewInventory.vue | 57 | ||||
-rw-r--r-- | src/views/Overview/OverviewNetwork.vue | 121 | ||||
-rw-r--r-- | src/views/Overview/OverviewPower.vue | 56 | ||||
-rw-r--r-- | src/views/Overview/OverviewQuickLinks.vue | 119 | ||||
-rw-r--r-- | src/views/Overview/OverviewServer.vue | 47 |
11 files changed, 597 insertions, 359 deletions
diff --git a/src/locales/en-US.json b/src/locales/en-US.json index a94d3995..d50d44a7 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 2436e393..9960f373 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 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 PageTitle from '@/components/Global/PageTitle'; +import OverviewPower from './OverviewPower'; +import OverviewQuickLinks from './OverviewQuickLinks'; +import OverviewServer from './OverviewServer'; import PageSection from '@/components/Global/PageSection'; -import { mapState } from 'vuex'; -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +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 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 eventsPromise = new Promise((resolve) => { - this.$root.$on('overview-events-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 00000000..4fc0a031 --- /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 00000000..6fe5996e --- /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 b8f876ac..84eadd1b 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 @@ export default { 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 00000000..ec9dfffd --- /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 00000000..575cb7b7 --- /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 bfb378a9..fbb81c65 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 00000000..a8a630a5 --- /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 1dc2c984..bc579b03 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 @@ export default { 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 @@ dd, 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 00000000..6d1d4303 --- /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> |