Adding Led's to enhance use experience

Adding custom LED component to enhance visual representation of
physical LED State which will be dipict the original system LED
colour and it's behaviour.

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@carbon/icons-vue": "10.28.0",
     "@novnc/novnc": "1.2.0",
+    "@vue/runtime-dom": "3.3.4",
     "axios": "0.21.4",
     "bootstrap": "4.6.0",
     "bootstrap-vue": "2.21.2",

src/components/Global/LedComponent.vue

@@ -0,0 +1,157 @@
+<template>
+  <button class="ui button toggle mybtn" :class="[btnColour, 'mybtn']"></button>
+</template>
+<script>
+export default {
+  name: 'LedComponent',
+  props: {
+    id: { type: String, default: '' },
+    onColour: { type: String, default: 'green' },
+    offColour: { type: String, default: 'white' },
+    errColour: { type: String, default: 'amber' },
+    ledValue: { type: Boolean, default: false },
+    isSolidLed: { type: Boolean, default: false },
+    isServiceLed: { type: Boolean, default: false },
+    issysAttentionLed: { type: Boolean, default: false },
+    issysidentifyLed: { type: Boolean, default: false },
+    health: { type: String, default: '' },
+  },
+  data() {
+    return {
+      checkbox: false,
+      blinkcolour: false,
+      btnColour: 'white',
+      intervalId: 0,
+      onColours: this.onColour,
+      offColours: this.offColour,
+      errColours: 'red',
+      cid: this.id,
+      //isSolidLeds: this.isSolidLed,
+      //issysAttentionLeds: this.issysAttentionLed,
+      //issysidentifyLeds: this.issysidentifyLed,
+      //isServiceLeds: this.isServiceLed,
+    };
+  },
+  mounted() {
+    console.log(
+      'mounted->ledValue',
+      this.ledValue,
+      'isSolidLed',
+      this.isSolidLed,
+      'this.isServiceLed',
+      this.isServiceLed,
+      'this.issysAttentionLed',
+      this.issysAttentionLed,
+      'issysidentifyLed',
+      this.issysidentifyLed
+    );
+
+    if (this.isServiceLed && this.isSolidLed) {
+      console.log('this is service+solid LED');
+      clearInterval(this.intervalId);
+      console.log('i m in else part1', this.intervalId);
+      if (this.ledValue === `global.status.on`) {
+        console.log('i m in else part2');
+        this.turnon();
+      } else {
+        console.log('i m in else part3');
+        this.startBlinking();
+      }
+    } else if (this.isServiceLed) {
+      console.log('this is service LED');
+      if (this.isServiceLed && this.issysidentifyLed) {
+        this.issysidentifyLed ? this.turnon() : this.turnoff();
+      } else if (this.isServiceLed && this.issysAttentionLed) {
+        this.issysAttentionLed ? this.turnon() : this.turnoff();
+      }
+    } else {
+      console.log('this is identify LED');
+      if (!(this.health === 'Critical')) {
+        if (this.ledValue) {
+          this.startBlinking();
+        } else {
+          this.stopBlinking();
+        }
+      } else {
+        this.turnon();
+      }
+    }
+  },
+  methods: {
+    myFunction() {
+      if (this.blinkcolour) {
+        this.turnoff();
+      } else {
+        this.turnon();
+      }
+    },
+    turnoff() {
+      this.blinkcolour = false;
+      this.btnColour = this.offColour;
+    },
+    turnon() {
+      this.blinkcolour = true;
+      this.btnColour = this.onColour;
+    },
+
+    toggleCheckbox() {
+      this.checkbox = true;
+      if (this.blinkcolour) {
+        this.turnoff();
+        this.blinkcolour = false;
+      } else {
+        this.turnon();
+        this.blinkcolour = true;
+      }
+      this.intervalId = setInterval(this.myFunction, 500);
+      console.log(' this.intervalId->', this.intervalId);
+    },
+
+    turnErrorColor() {
+      if (this.checkbox) {
+        this.stopBlinking();
+      }
+      this.blinkcolour = true;
+      this.btnColour = this.errColours;
+    },
+
+    stopBlinking() {
+      clearInterval(this.intervalId);
+      this.turnoff();
+      this.checkbox = false;
+    },
+    startBlinking() {
+      if (!this.checkbox) this.toggleCheckbox();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.mybtn {
+  border-radius: 50%;
+  padding: 12px;
+  border-color: black;
+  color: black;
+  outline-color: black;
+}
+
+.green {
+  background-color: green;
+}
+.blue {
+  background-color: #0029e0;
+}
+.amber {
+  background-color: #ffb300;
+}
+.red {
+  background-color: red;
+}
+.white {
+  background-color: white;
+}
+.lightgrey {
+  background-color: lightgrey;
+}
+</style>

src/store/modules/HardwareStatus/BmcStore.js

@@ -17,6 +17,7 @@ const BmcStore = {
       bmc.health = data.Status.Health;
       bmc.id = data.Id;
       bmc.identifyLed = data.LocationIndicatorActive;
+      bmc.ledStatus = data.LocationIndicatorActive;
       bmc.locationNumber = data.Location?.PartLocation?.ServiceLabel;
       bmc.model = data.Model;
       bmc.name = data.Name;

src/store/modules/HardwareStatus/FanStore.js

@@ -29,6 +29,7 @@ const FanStore = {
           partNumber: PartNumber,
           serialNumber: SerialNumber,
           identifyLed: LocationIndicatorActive,
+          ledStatus: LocationIndicatorActive,
           locationNumber: Location?.PartLocation?.ServiceLabel,
           model: Model,
           name: Name,

src/store/modules/HardwareStatus/PcieSlotsStore.js

@@ -16,6 +16,7 @@ const PcieSlotsStore = {
         return {
           type: SlotType,
           identifyLed: LocationIndicatorActive,
+          ledStatus: LocationIndicatorActive,
           locationNumber: Location?.PartLocation?.ServiceLabel,
         };
       });

src/store/modules/HardwareStatus/PowerSupplyStore.js

@@ -31,6 +31,7 @@ const PowerSupplyStore = {
           serialNumber: SerialNumber,
           firmwareVersion: FirmwareVersion,
           identifyLed: LocationIndicatorActive,
+          ledStatus: LocationIndicatorActive,
           locationNumber: Location?.PartLocation?.ServiceLabel,
           model: Model,
           name: Name,

src/store/modules/HardwareStatus/ProcessorStore.js

@@ -38,6 +38,7 @@ const ProcessorStore = {
           totalCores: TotalCores,
           locationNumber: Location?.PartLocation?.ServiceLabel,
           identifyLed: LocationIndicatorActive,
+          ledStatus: LocationIndicatorActive,
           uri: processor['@odata.id'],
         };
       });

src/store/modules/HardwareStatus/SystemStore.js

@@ -21,14 +21,18 @@ const SystemStore = {
       system.sysAttentionLed =
         data.Oem?.IBM?.PartitionSystemAttentionIndicator ||
         data.Oem?.IBM?.PlatformSystemAttentionIndicator;
+      system.issysAttentionLed = system.sysAttentionLed;
       system.locationIndicatorActive = data.LocationIndicatorActive;
+      system.issysidentifyLed = data.LocationIndicatorActive;
       system.model = data.Model;
       system.processorSummaryCoreCount = data.ProcessorSummary?.CoreCount;
       system.processorSummaryCount = data.ProcessorSummary?.Count;
       system.powerState = data.PowerState;
+      system.powerLedStatus = data.PowerState;
       system.serialNumber = data.SerialNumber;
       system.statusState = data.Status?.State;
       state.systems = [system];
+      console.log('init->system.issysidentifyLed', system.issysidentifyLed);
     },
   },
   actions: {
@@ -67,6 +71,32 @@ const SystemStore = {
           }
         });
     },
+    async PowerStatusLedState({ commit }, ledState) {
+      return await api
+        .patch('/redfish/v1/Systems/system', {
+          powerLedStatus: ledState,
+        })
+        .then(() => {
+          if (ledState) {
+            return i18n.t('pageInventory.toast.successEnableIdentifyLed');
+          } else {
+            return i18n.t('pageInventory.toast.successDisableIdentifyLed');
+          }
+        })
+        .catch((error) => {
+          commit('setSystemInfo', this.state.system.systems[0]);
+          console.log('error', error);
+          if (ledState) {
+            throw new Error(
+              i18n.t('pageInventory.toast.errorEnableIdentifyLed')
+            );
+          } else {
+            throw new Error(
+              i18n.t('pageInventory.toast.errorDisableIdentifyLed')
+            );
+          }
+        });
+    },
     async changeSystemAttentionLedState({ commit }, ledState) {
       return await api
         .patch('/redfish/v1/Systems/system', {

src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue

@@ -91,6 +91,18 @@
         </b-form-checkbox>
         <div v-else>--</div>
       </template>
+
+      <template #cell(ledStatus)="row">
+        <led-component
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          :ref="`identifyfabricLedRef${row.item.name}`"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+        ></led-component>
+        <div v-else>--</div>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -136,9 +148,16 @@ import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LedComponent from '@/components/Global/LedComponent';
 
 export default {
-  components: { IconChevron, PageSection, Search, TableCellCount },
+  components: {
+    IconChevron,
+    PageSection,
+    Search,
+    TableCellCount,
+    LedComponent,
+  },
   mixins: [
     BVToastMixin,
     TableRowExpandMixin,
@@ -194,6 +213,11 @@ export default {
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
         },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',
+          formatter: this.dataFormatter,
+        },
       ],
       searchFilter: searchFilter,
       searchTotalFilteredRows: 0,
@@ -260,8 +284,17 @@ export default {
           memberId: row.id,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (row.identifyLed) {
+            this.$refs['identifyfabricLedRef' + `${row.name}`].startBlinking();
+          } else {
+            this.$refs['identifyfabricLedRef' + `${row.name}`].stopBlinking();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs['identifyfabricLedRef' + `${row.name}`].turnErrorColor();
+          this.errorToast(message);
+        });
     },
     sortCompare(a, b, key) {
       if (key === 'health') {