From 1eee9a48259edc04c89e8f3863c7966091641850 Mon Sep 17 00:00:00 2001
From: Kamalkumar <108823339+Patel-Kamalkumar@users.noreply.github.com>
Date: Wed, 17 Jan 2024 21:23:57 +0530
Subject: [PATCH] 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.
- When user toggle the identify LED button then as current behaviour
toast message will be appears for the LED status but as part of this
change when user toggle identify LED button then it's appears as LED
button and colour of the LED continuously blinking based on toggle
button status.
- For each toggle button behaviour is different as similar as Hardware
LED colour code.
- For example:
Dimms, fans, processor etc LED colour representation are amber and
system identify LED colour is blue as similar as Hardware colour.

Signed-off-by: Kamalkumar <108823339+Patel-Kamalkumar@users.noreply.github.com>
---
 src/components/Global/LedComponent.vue        | 133 ++++++++++++++++++
 src/store/modules/HardwareStatus/BmcStore.js  |   1 +
 src/store/modules/HardwareStatus/FanStore.js  |   1 +
 .../modules/HardwareStatus/PcieSlotsStore.js  |   1 +
 .../HardwareStatus/PowerSupplyStore.js        |   1 +
 .../modules/HardwareStatus/ProcessorStore.js  |   1 +
 .../modules/HardwareStatus/SystemStore.js     |  29 ++++
 .../Inventory/InventoryFabricAdapters.vue     |  39 ++++-
 .../Inventory/InventoryServiceIndicator.vue   |  79 ++++++++++-
 .../Inventory/InventoryTableAssembly.vue      |  49 ++++++-
 .../Inventory/InventoryTableBmcManager.vue    |  34 ++++-
 .../Inventory/InventoryTableChassis.vue       |  37 ++++-
 .../Inventory/InventoryTableDimmSlot.vue      |  43 +++++-
 .../Inventory/InventoryTableFans.vue          |  37 ++++-
 .../Inventory/InventoryTablePcieSlots.vue     |  47 ++++++-
 .../Inventory/InventoryTablePowerSupplies.vue |  50 ++++++-
 .../Inventory/InventoryTableProcessors.vue    |  45 +++++-
 17 files changed, 594 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Global/LedComponent.vue

diff --git a/src/components/Global/LedComponent.vue b/src/components/Global/LedComponent.vue
new file mode 100644
index 0000000000..464d054c4c
--- /dev/null
+++ b/src/components/Global/LedComponent.vue
@@ -0,0 +1,133 @@
+<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,
+    };
+  },
+  mounted() {
+    if (this.isServiceLed && this.isSolidLed) {
+      clearInterval(this.intervalId);
+      if (this.ledValue === `global.status.on`) {
+        this.turnon();
+      } else {
+        this.startBlinking();
+      }
+    } else if (this.isServiceLed) {
+      if (this.isServiceLed && this.issysidentifyLed) {
+        this.issysidentifyLed ? this.turnon() : this.turnoff();
+      } else if (this.isServiceLed && this.issysAttentionLed) {
+        this.issysAttentionLed ? this.turnon() : this.turnoff();
+      }
+    } else {
+      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);
+    },
+
+    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>
diff --git a/src/store/modules/HardwareStatus/BmcStore.js b/src/store/modules/HardwareStatus/BmcStore.js
index bbdf6b1232..c97dd5d981 100644
--- a/src/store/modules/HardwareStatus/BmcStore.js
+++ b/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;
diff --git a/src/store/modules/HardwareStatus/FanStore.js b/src/store/modules/HardwareStatus/FanStore.js
index dc74214ae2..29d07464f0 100644
--- a/src/store/modules/HardwareStatus/FanStore.js
+++ b/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,
diff --git a/src/store/modules/HardwareStatus/PcieSlotsStore.js b/src/store/modules/HardwareStatus/PcieSlotsStore.js
index e173270f60..cbd3589982 100644
--- a/src/store/modules/HardwareStatus/PcieSlotsStore.js
+++ b/src/store/modules/HardwareStatus/PcieSlotsStore.js
@@ -16,6 +16,7 @@ const PcieSlotsStore = {
         return {
           type: SlotType,
           identifyLed: LocationIndicatorActive,
+          ledStatus: LocationIndicatorActive,
           locationNumber: Location?.PartLocation?.ServiceLabel,
         };
       });
diff --git a/src/store/modules/HardwareStatus/PowerSupplyStore.js b/src/store/modules/HardwareStatus/PowerSupplyStore.js
index 7281cb2820..e783c5efac 100644
--- a/src/store/modules/HardwareStatus/PowerSupplyStore.js
+++ b/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,
diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js
index 400c364601..a80458b13f 100644
--- a/src/store/modules/HardwareStatus/ProcessorStore.js
+++ b/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'],
         };
       });
diff --git a/src/store/modules/HardwareStatus/SystemStore.js b/src/store/modules/HardwareStatus/SystemStore.js
index 213e69cb8a..1631af7518 100644
--- a/src/store/modules/HardwareStatus/SystemStore.js
+++ b/src/store/modules/HardwareStatus/SystemStore.js
@@ -21,11 +21,14 @@ 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];
@@ -67,6 +70,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', {
diff --git a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue b/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
index 551effcd79..bd55174104 100644
--- a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
+++ b/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') {
diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
index e4b00ba965..02bed4b3a2 100644
--- a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue
@@ -10,6 +10,14 @@
             <dd>
               {{ $t(powerStatus) }}
             </dd>
+            <led-component
+              ref="PowerStatusLedRef"
+              :led-value="powerStatus"
+              :is-service-led="true"
+              off-colour="white"
+              on-colour="green"
+              :is-solid-led="true"
+            ></led-component>
           </dl>
         </b-col>
         <b-col sm="6" md="3">
@@ -30,6 +38,14 @@
                 </span>
                 <span v-else>{{ $t('global.status.off') }}</span>
               </b-form-checkbox>
+
+              <led-component
+                ref="LEDStatusidentifyLedRef"
+                :issysidentify-led="sysIdentifyLed"
+                :is-service-led="true"
+                off-colour="white"
+                on-colour="blue"
+              ></led-component>
             </dd>
           </dl>
         </b-col>
@@ -57,6 +73,13 @@
                 </span>
                 <span v-else>{{ $t('global.status.off') }}</span>
               </b-form-checkbox>
+              <led-component
+                ref="identifyattentionLedRef"
+                :is-service-led="true"
+                :issys-attention-led="sysAttentionLed"
+                off-colour="white"
+                on-colour="amber"
+              ></led-component>
             </dd>
           </dl>
         </b-col>
@@ -95,15 +118,17 @@
 <script>
 import InfoTooltip from '@/components/Global/InfoTooltip';
 import PageSection from '@/components/Global/PageSection';
+import LedComponent from '@/components/Global/LedComponent';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 
 export default {
-  components: { InfoTooltip, PageSection },
+  components: { InfoTooltip, PageSection, LedComponent },
   mixins: [BVToastMixin, DataFormatterMixin],
   data() {
     return {
       isLampTestEditable: true,
+      intervalId: 0,
     };
   },
   computed: {
@@ -120,6 +145,14 @@ export default {
       }
       return `global.status.${this.serverStatus}`;
     },
+    sysIdentifyLed() {
+      let systemData = this.$store.getters['system/systems'][0];
+      return systemData.issysidentifyLed;
+    },
+    sysAttentionLed() {
+      let systemData = this.$store.getters['system/systems'][0];
+      return systemData.issysAttentionLed;
+    },
   },
   watch: {
     systems: function (value) {
@@ -135,25 +168,61 @@ export default {
         this.$store.dispatch('system/getSystem');
       }
     },
+    powerStatus: function (value) {
+      this.updatePowerStatusLedState(value);
+    },
   },
   created() {
     this.$store.dispatch('system/getSystem').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardware-status-service-complete');
+      // this.updatePowerStatusLedState(`global.status.${this.serverStatus}`);
     });
   },
   methods: {
     toggleIdentifyLedSwitch(ledState) {
       this.$store
         .dispatch('system/changeIdentifyLedState', ledState)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          //this.successToast(message);
+          if (ledState) {
+            this.$refs.LEDStatusidentifyLedRef.turnon();
+          } else {
+            this.$refs.LEDStatusidentifyLedRef.turnoff();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs.LEDStatusidentifyLedRef.turnErrorColor();
+          this.errorToast(message);
+        });
     },
     toggleSystemAttentionLedSwitch(systemLedState) {
       this.$store
         .dispatch('system/changeSystemAttentionLedState', systemLedState)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (systemLedState) {
+            this.$refs.identifyattentionLedRef.turnon();
+          } else {
+            this.$refs.identifyattentionLedRef.turnoff();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs.identifyattentionLedRef.turnErrorColor();
+          this.errorToast(message);
+        });
+    },
+    updatePowerStatusLedState(powerStatus) {
+      try {
+        if (powerStatus === `global.status.on`) {
+          this.$refs.PowerStatusLedRef.stopBlinking();
+          this.$refs.PowerStatusLedRef.turnon();
+        } else {
+          this.$refs.PowerStatusLedRef.startBlinking();
+        }
+      } catch (message) {
+        this.$refs.PowerStatusLedRef.startBlinking();
+        this.errorToast(message);
+      }
     },
     toggleLampTestSwitch(lampTestState) {
       this.$store
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
index 4c683e9859..0051bf6ec6 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
@@ -94,6 +94,15 @@
         <div v-else>--</div>
       </template>
 
+      <template #cell(ledStatus)="row">
+        <led-component
+          :ref="`identifyLedAssemblyRef${row.item.locationNumber}`"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+        ></led-component>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -142,9 +151,17 @@ import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import LedComponent from '@/components/Global/LedComponent';
 
 export default {
-  components: { IconChevron, Search, InfoTooltip, PageSection, TableCellCount },
+  components: {
+    IconChevron,
+    Search,
+    InfoTooltip,
+    PageSection,
+    TableCellCount,
+    LedComponent,
+  },
   mixins: [
     BVToastMixin,
     SearchFilterMixin,
@@ -197,6 +214,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,
@@ -286,8 +308,29 @@ export default {
           memberId: row.id,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (!(row.health === 'Critical')) {
+            if (row.identifyLed) {
+              this.$refs[
+                'identifyLedAssemblyRef' + `${row.locationNumber}`
+              ].startBlinking();
+            } else {
+              this.$refs[
+                'identifyLedAssemblyRef' + `${row.locationNumber}`
+              ].stopBlinking();
+            }
+          } else {
+            this.$refs[
+              'identifyLedAssemblyRef' + `${row.locationNumber}`
+            ].turnon();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs[
+            'identifyLedAssemblyRef' + `${row.locationNumber}`
+          ].turnErrorColor();
+          this.errorToast(message);
+        });
     },
     hasIdentifyLed(identifyLed) {
       return typeof identifyLed === 'boolean';
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index 9216d8e8c0..037c6c47b5 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -68,6 +68,15 @@
         <div v-else>--</div>
       </template>
 
+      <template #cell(ledStatus)="row">
+        <led-component
+          ref="identifyBmcMngerLedRef"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+        ></led-component>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -108,13 +117,14 @@ import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LedComponent from '@/components/Global/LedComponent';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon },
+  components: { IconChevron, PageSection, StatusIcon, LedComponent },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
   data() {
     return {
@@ -151,6 +161,11 @@ export default {
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
         },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',
+          formatter: this.dataFormatter,
+        },
       ],
       expandRowLabel: expandRowLabel,
     };
@@ -181,8 +196,21 @@ export default {
           uri: row.uri,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (!(row.health === 'Critical')) {
+            if (row.identifyLed) {
+              this.$refs.identifyBmcMngerLedRef.startBlinking();
+            } else {
+              this.$refs.identifyBmcMngerLedRef.stopBlinking();
+            }
+          } else {
+            this.$refs.identifyBmcMngerLedRef.turnon();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs.identifyBmcMngerLedRef.turnErrorColor();
+          this.errorToast(message);
+        });
     },
     // TO DO: remove hasIdentifyLed method once the following story is merged:
     // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/43179
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
index 2915577017..78d7b54d74 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -58,8 +58,18 @@
           </span>
           <span v-else> {{ $t('global.status.off') }} </span>
         </b-form-checkbox>
-        <div v-else>--</div>
       </template>
+
+      <template #cell(ledStatus)="row">
+        <led-component
+          ref="identifyChassisLedRef"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+          class="align-middle"
+        ></led-component>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -89,6 +99,7 @@ import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import StatusIcon from '@/components/Global/StatusIcon';
+import LedComponent from '@/components/Global/LedComponent';
 
 import TableRowExpandMixin, {
   expandRowLabel,
@@ -96,7 +107,7 @@ import TableRowExpandMixin, {
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon },
+  components: { IconChevron, PageSection, StatusIcon, LedComponent },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
   data() {
     return {
@@ -134,6 +145,11 @@ export default {
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
         },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',
+          formatter: this.dataFormatter,
+        },
       ],
       expandRowLabel: expandRowLabel,
     };
@@ -157,8 +173,21 @@ export default {
           uri: row.uri,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (!(row.health === 'Critical')) {
+            if (row.identifyLed) {
+              this.$refs.identifyChassisLedRef.startBlinking();
+            } else {
+              this.$refs.identifyChassisLedRef.stopBlinking();
+            }
+          } else {
+            this.$refs.identifyChassisLedRef.turnon();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs.identifyChassisLedRef.turnErrorColor();
+          this.errorToast(message);
+        });
     },
     // TO DO: Remove this method when the LocationIndicatorActive is added from backend.
     hasIdentifyLed(identifyLed) {
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
index b9ff2dd748..488728cc9c 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -80,6 +80,17 @@
           <span v-else> {{ $t('global.status.off') }} </span>
         </b-form-checkbox>
       </template>
+
+      <template #cell(ledStatus)="row">
+        <led-component
+          :ref="`identifydimmLedRef${row.item.id}`"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+          class="text-center"
+        ></led-component>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -140,6 +151,7 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import Search from '@/components/Global/Search';
+import LedComponent from '@/components/Global/LedComponent';
 import SearchFilterMixin, {
   searchFilter,
 } from '@/components/Mixins/SearchFilterMixin';
@@ -148,7 +160,14 @@ import TableRowExpandMixin, {
 } from '@/components/Mixins/TableRowExpandMixin';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  components: {
+    IconChevron,
+    PageSection,
+    StatusIcon,
+    Search,
+    TableCellCount,
+    LedComponent,
+  },
   mixins: [
     BVToastMixin,
     TableRowExpandMixin,
@@ -197,6 +216,11 @@ export default {
           formatter: this.dataFormatter,
           sortable: false,
         },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',
+          formatter: this.dataFormatter,
+        },
       ],
       searchFilter: searchFilter,
       searchTotalFilteredRows: 0,
@@ -235,8 +259,21 @@ export default {
           uri: row.uri,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (!(row.health === 'Critical')) {
+            if (row.identifyLed) {
+              this.$refs['identifydimmLedRef' + `${row.id}`].startBlinking();
+            } else {
+              this.$refs['identifydimmLedRef' + `${row.id}`].stopBlinking();
+            }
+          } else {
+            this.$refs['identifydimmLedRef' + `${row.id}`].turnon();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs['identifydimmLedRef' + `${row.id}`].turnErrorColor();
+          this.errorToast(message);
+        });
     },
   },
 };
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index a7ca16e380..17dbf8379d 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -95,6 +95,15 @@
         </b-form-checkbox>
       </template>
 
+      <template #cell(ledStatus)="row">
+        <led-component
+          :ref="`identifyLedFanRef${row.item.name}`"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+        ></led-component>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -150,9 +159,17 @@ import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LedComponent from '@/components/Global/LedComponent';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  components: {
+    IconChevron,
+    PageSection,
+    StatusIcon,
+    Search,
+    TableCellCount,
+    LedComponent,
+  },
   mixins: [
     BVToastMixin,
     TableRowExpandMixin,
@@ -207,6 +224,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,
@@ -279,8 +301,17 @@ export default {
           uri: row.uri,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (row.identifyLed) {
+            this.$refs['identifyLedFanRef' + `${row.name}`].turnErrorColor();
+          } else {
+            this.$refs['identifyLedFanRef' + `${row.name}`].stopBlinking();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs.identifyLedFanRef`${row.name}`.turnErrorColor();
+          this.errorToast(message);
+        });
     },
   },
 };
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
index 814a6f5e44..fd1b75a56e 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
@@ -64,6 +64,14 @@
           <span v-else> {{ $t('global.status.off') }} </span>
         </b-form-checkbox>
       </template>
+      <template #cell(ledStatus)="row">
+        <led-component
+          :ref="`identifyPciSlotLedRef${row.item.locationNumber}`"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+        ></led-component>
+      </template>
 
       <template #row-details="{ item }">
         <b-container fluid>
@@ -96,9 +104,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,
@@ -139,6 +154,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,
@@ -205,8 +225,29 @@ export default {
           identifyLed: row.identifyLed,
           uri: this.chassis,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (!(row.health === 'Critical')) {
+            if (row.identifyLed) {
+              this.$refs[
+                'identifyPciSlotLedRef' + `${row.locationNumber}`
+              ].startBlinking();
+            } else {
+              this.$refs[
+                'identifyPciSlotLedRef' + `${row.locationNumber}`
+              ].stopBlinking();
+            }
+          } else {
+            this.$refs[
+              'identifyPciSlotLedRef' + `${row.locationNumber}`
+            ].turnon();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs[
+            'identifyPciSlotLedRef' + `${row.locationNumber}`
+          ].turnErrorColor();
+          this.errorToast(message);
+        });
     },
   },
 };
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index d1c99aeb48..6072d0c0d7 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -89,6 +89,17 @@
           <span v-else> {{ $t('global.status.off') }} </span>
         </b-form-checkbox>
       </template>
+
+      <template #cell(ledStatus)="row">
+        <led-component
+          :ref="`identifyLedpowersupplyRef${row.item.name}`"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+          :health="row.item.health"
+        ></led-component>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -149,9 +160,17 @@ import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LedComponent from '@/components/Global/LedComponent';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  components: {
+    IconChevron,
+    PageSection,
+    StatusIcon,
+    Search,
+    TableCellCount,
+    LedComponent,
+  },
   mixins: [
     BVToastMixin,
     TableRowExpandMixin,
@@ -206,6 +225,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,
@@ -275,13 +299,33 @@ export default {
       this.searchTotalFilteredRows = filteredItems.length;
     },
     toggleIdentifyLedValue(row) {
+      console.log('row->', row);
       this.$store
         .dispatch('powerSupply/updateIdentifyLedValue', {
           uri: row.uri,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (!(row.health === 'Critical')) {
+            if (row.identifyLed) {
+              this.$refs[
+                'identifyLedpowersupplyRef' + `${row.name}`
+              ].startBlinking();
+            } else {
+              this.$refs[
+                'identifyLedpowersupplyRef' + `${row.name}`
+              ].stopBlinking();
+            }
+          } else {
+            this.$refs['identifyLedpowersupplyRef' + `${row.name}`].turnon();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs[
+            'identifyLedpowersupplyRef' + `${row.name}`
+          ].turnErrorColor();
+          this.errorToast(message);
+        });
     },
   },
 };
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
index 20cde869aa..ee9c4fe429 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
@@ -83,6 +83,15 @@
         <div v-else>--</div>
       </template>
 
+      <template #cell(ledStatus)="row">
+        <led-component
+          :ref="`identifyprocessorledRef${row.item.id}`"
+          :led-value="row.item.identifyLed"
+          off-colour="white"
+          on-colour="amber"
+        ></led-component>
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -143,9 +152,17 @@ import SearchFilterMixin, {
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
+import LedComponent from '@/components/Global/LedComponent';
 
 export default {
-  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  components: {
+    IconChevron,
+    PageSection,
+    StatusIcon,
+    Search,
+    TableCellCount,
+    LedComponent,
+  },
   mixins: [
     BVToastMixin,
     TableRowExpandMixin,
@@ -195,6 +212,11 @@ export default {
           formatter: this.dataFormatter,
           sortable: false,
         },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',
+          formatter: this.dataFormatter,
+        },
       ],
       searchFilter: searchFilter,
       searchTotalFilteredRows: 0,
@@ -228,8 +250,25 @@ export default {
           uri: row.uri,
           identifyLed: row.identifyLed,
         })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          if (!(row.health === 'Critical')) {
+            if (row.identifyLed) {
+              this.$refs[
+                'identifyprocessorledRef' + `${row.id}`
+              ].startBlinking();
+            } else {
+              this.$refs[
+                'identifyprocessorledRef' + `${row.id}`
+              ].stopBlinking();
+            }
+          } else {
+            this.$refs['identifyprocessorledRef' + `${row.id}`].turnon();
+          }
+        })
+        .catch(({ message }) => {
+          this.$refs['identifyprocessorledRef' + `${row.id}`].turnErrorColor();
+          this.errorToast(message);
+        });
     },
     // TO DO: remove hasIdentifyLed when the following is merged:
     // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045