Add server LED switch calls to Overview page
The Overview page currently shows a static Server LED switch. It does
not accurately display the IndicatorLED state.
This commit will add ability to toggle the IndicatorLED value and
accurately displays the current value.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I4fc9b18a0c87db421dfa73e51ecc472d0907d323
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index b964795..5dd71ee 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -10,7 +10,6 @@
</dl>
</div>
<div>
- <!-- TODO: add toggle LED on/off funtionality -->
<dl>
<dt>{{ $t('pageOverview.quicklinks.serverLed') }}</dt>
<dd>
@@ -19,8 +18,13 @@
data-test-id="overviewQuickLinks-checkbox-serverLed"
name="check-button"
switch
+ value="Lit"
+ unchecked-value="Off"
+ @change="onChangeServerLed"
>
- <span v-if="serverLedChecked">{{ $t('global.status.on') }}</span>
+ <span v-if="serverLedChecked !== 'Off'">
+ {{ $t('global.status.on') }}
+ </span>
<span v-else>{{ $t('global.status.off') }}</span>
</b-form-checkbox>
</dd>
@@ -53,26 +57,42 @@
<script>
import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
export default {
name: 'QuickLinks',
components: {
IconArrowRight: ArrowRight16
},
- data() {
- return {
- serverLedChecked: false
- };
- },
+ mixins: [BVToastMixin],
computed: {
bmcTime() {
return this.$store.getters['global/bmcTime'];
+ },
+ serverLedChecked: {
+ get() {
+ return this.$store.getters['serverLed/getIndicatorValue'];
+ },
+ set(value) {
+ return value;
+ }
}
},
created() {
- this.$store.dispatch('global/getBmcTime').finally(() => {
+ Promise.all([
+ this.$store.dispatch('global/getBmcTime'),
+ this.$store.dispatch('serverLed/getIndicatorValue')
+ ]).finally(() => {
this.$root.$emit('overview::quicklinks::complete');
});
+ },
+ methods: {
+ onChangeServerLed(value) {
+ this.$store
+ .dispatch('serverLed/saveIndicatorLedValue', value)
+ .then(message => this.successToast(message))
+ .catch(({ message }) => this.errorToast(message));
+ }
}
};
</script>