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

1 files changed, 28 insertions, 8 deletions

diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index b964795b..5dd71ee2 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>