summaryrefslogtreecommitdiff
path: root/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/views')
-rw-r--r--src/views/Overview/Overview.vue201
-rw-r--r--src/views/Overview/OverviewCard.vue81
-rw-r--r--src/views/Overview/OverviewDumps.vue54
-rw-r--r--src/views/Overview/OverviewEvents.vue125
-rw-r--r--src/views/Overview/OverviewFirmware.vue49
-rw-r--r--src/views/Overview/OverviewInventory.vue57
-rw-r--r--src/views/Overview/OverviewNetwork.vue121
-rw-r--r--src/views/Overview/OverviewPower.vue56
-rw-r--r--src/views/Overview/OverviewQuickLinks.vue119
-rw-r--r--src/views/Overview/OverviewServer.vue47
10 files changed, 575 insertions, 335 deletions
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>
generated by cgit v1.2.3 (git 2.39.0) at 2024-07-03 14:05:38 +0300