Adding Led's to enhance use experience #122

Patel-Kamalkumar · 2023-06-28T18:48:58Z

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.

New physical LED are looks like attached images:

mzipse · 2023-08-30T15:01:38Z

If we do this, let's target this for FW1060.

gtmills · 2023-12-11T14:18:02Z

package.json

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


why do we need this ?

sure gunner, will remove from PR.

file is removed

Nikhil-Ashoka · 2023-12-11T14:18:42Z

package-lock.json

We should not push the package-lock.json file. Not recommended.

sure nikhil, will remove from PR.

file is removed

gtmills · 2023-12-11T14:19:00Z

Can you explain more on what this does? Why we need this? Can you add a summary of the changes? Can you add a screenshot of what it looks like?

Nikhil-Ashoka · 2023-12-11T14:20:21Z

src/components/Global/LedComponent.vue

+      offColours: this.offColour,
+      errColours: 'red',
+      cid: this.id,
+      //isSolidLeds: this.isSolidLed,


Need to remove unwanted code, console logs, debuggers.

removed unwanted codes.

Nikhil-Ashoka · 2023-12-11T14:34:54Z

src/store/modules/HardwareStatus/FanStore.js

@@ -29,6 +29,7 @@ const FanStore = {
          partNumber: PartNumber,
          serialNumber: SerialNumber,
          identifyLed: LocationIndicatorActive,
+          ledStatus: LocationIndicatorActive,


We can use identifyLed without creating ledStatus.

each LED is attached with unique ledStatus, so mentioned separately.

- 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 <[email protected]>

Nikhil-Ashoka · 2024-01-22T11:23:45Z

src/components/Global/LedComponent.vue

+    ledValue: { type: Boolean, default: false },
+    isSolidLed: { type: Boolean, default: false },
+    isServiceLed: { type: Boolean, default: false },
+    issysAttentionLed: { type: Boolean, default: false },


Change issysAttentionLed -> isSysAttentionLed.

Nikhil-Ashoka · 2024-01-22T11:24:13Z

src/components/Global/LedComponent.vue

+    isSolidLed: { type: Boolean, default: false },
+    isServiceLed: { type: Boolean, default: false },
+    issysAttentionLed: { type: Boolean, default: false },
+    issysidentifyLed: { type: Boolean, default: false },


Change issysidentifyLed -> isSysIdentifyLed

Nikhil-Ashoka · 2024-01-22T11:24:40Z

src/components/Global/LedComponent.vue

+  data() {
+    return {
+      checkbox: false,
+      blinkcolour: false,


blinkcolour -> blinkColour

Nikhil-Ashoka · 2024-01-22T11:26:06Z

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;


issysAttentionLed -> isSysAttentionLed

Nikhil-Ashoka · 2024-01-22T11:26:32Z

src/store/modules/HardwareStatus/SystemStore.js

      system.locationIndicatorActive = data.LocationIndicatorActive;
+      system.issysidentifyLed = data.LocationIndicatorActive;


Change issysidentifyLed to isSysIdentifyLed

Nikhil-Ashoka · 2024-01-22T11:27:38Z

src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue

  },
  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}`);


Remove comments

Nikhil-Ashoka · 2024-01-22T11:28:55Z

src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue

-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {
+          //this.successToast(message);


I think this success Toast is required?

Nikhil-Ashoka · 2024-01-22T11:29:21Z

src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue

    },
    toggleSystemAttentionLedSwitch(systemLedState) {
      this.$store
        .dispatch('system/changeSystemAttentionLedState', systemLedState)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {


I think the success toast is still required?

Nikhil-Ashoka · 2024-01-22T11:30:01Z

src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue

@@ -197,6 +214,11 @@ export default {
          label: this.$t('pageInventory.table.identifyLed'),
          formatter: this.dataFormatter,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


label: 'Physical LED State', Should be taken from the translation file.

Nikhil-Ashoka · 2024-01-22T11:30:58Z

src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue

@@ -286,8 +308,29 @@ export default {
          memberId: row.id,
          identifyLed: row.identifyLed,
        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {


Success toast message will still be required.

Nikhil-Ashoka · 2024-01-22T11:31:37Z

src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue

@@ -181,8 +196,21 @@ export default {
          uri: row.uri,
          identifyLed: row.identifyLed,
        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {


Success toast will still be required.

Nikhil-Ashoka · 2024-01-22T11:32:27Z

src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue

@@ -197,6 +216,11 @@ export default {
          formatter: this.dataFormatter,
          sortable: false,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


Physical LED State should be taken from the translation file.

Nikhil-Ashoka · 2024-01-22T11:32:58Z

src/views/HardwareStatus/Inventory/InventoryTableFans.vue

@@ -207,6 +224,11 @@ export default {
          label: this.$t('pageInventory.table.identifyLed'),
          formatter: this.dataFormatter,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


Physical LED State should be taken from the translation file.

Nikhil-Ashoka · 2024-01-22T11:33:24Z

src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue

@@ -139,6 +154,11 @@ export default {
          label: this.$t('pageInventory.table.identifyLed'),
          formatter: this.dataFormatter,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


Label should be taken from the translation file.

Nikhil-Ashoka · 2024-01-22T11:33:51Z

src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue

@@ -206,6 +225,11 @@ export default {
          label: this.$t('pageInventory.table.identifyLed'),
          formatter: this.dataFormatter,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


label should be taken from the translation file

Nikhil-Ashoka · 2024-01-22T11:34:04Z

src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue

@@ -275,13 +299,33 @@ export default {
      this.searchTotalFilteredRows = filteredItems.length;
    },
    toggleIdentifyLedValue(row) {
+      console.log('row->', row);


Remove console.log

Nikhil-Ashoka · 2024-01-22T11:34:39Z

src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue

@@ -195,6 +212,11 @@ export default {
          formatter: this.dataFormatter,
          sortable: false,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


label Should be taken from the translation file.

Nikhil-Ashoka · 2024-01-22T11:35:02Z

src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue

@@ -228,8 +250,25 @@ export default {
          uri: row.uri,
          identifyLed: row.identifyLed,
        })
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
+        .then(() => {


Successtoast will still be required.

Nikhil-Ashoka · 2024-01-22T11:45:36Z

src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue

@@ -194,6 +213,11 @@ export default {
          label: this.$t('pageInventory.table.identifyLed'),
          formatter: this.dataFormatter,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


Label should be taken from the translation file

Nikhil-Ashoka · 2024-01-22T11:46:07Z

src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue

@@ -260,8 +284,17 @@ export default {
          memberId: row.id,
          identifyLed: row.identifyLed,
        })
-        .then((message) => this.successToast(message))


success toast message will still be needed

Nikhil-Ashoka · 2024-01-22T11:48:18Z

src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue

@@ -151,6 +161,11 @@ export default {
          label: this.$t('pageInventory.table.identifyLed'),
          formatter: this.dataFormatter,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


label must be taken from the translation file

Nikhil-Ashoka · 2024-01-22T11:48:45Z

src/views/HardwareStatus/Inventory/InventoryTableChassis.vue

@@ -134,6 +145,11 @@ export default {
          label: this.$t('pageInventory.table.identifyLed'),
          formatter: this.dataFormatter,
        },
+        {
+          key: 'ledStatus',
+          label: 'Physical LED State',


label must be taken from the translation file

Nikhil-Ashoka · 2024-01-22T11:49:09Z

src/views/HardwareStatus/Inventory/InventoryTableChassis.vue

@@ -157,8 +173,21 @@ export default {
          uri: row.uri,
          identifyLed: row.identifyLed,
        })
-        .then((message) => this.successToast(message))


success toast message would still be required.

Nikhil-Ashoka · 2024-01-22T11:49:58Z

src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue

      this.$store
        .dispatch('powerSupply/updateIdentifyLedValue', {
          uri: row.uri,
          identifyLed: row.identifyLed,
        })
-        .then((message) => this.successToast(message))


success toast will still be required.

Patel-Kamalkumar force-pushed the ledchanges branch from c0e6cf5 to d02f180 Compare June 30, 2023 08:09

Nikhil-Ashoka added the enhancement New feature or request label Jul 10, 2023

mzipse requested review from Renuka9527 and Nikhil-Ashoka August 30, 2023 15:00

Patel-Kamalkumar changed the base branch from 1050 to 1060 December 11, 2023 13:09

Patel-Kamalkumar force-pushed the ledchanges branch from 810deb0 to e27b5d4 Compare December 11, 2023 14:09

gtmills reviewed Dec 11, 2023

View reviewed changes

Nikhil-Ashoka reviewed Dec 11, 2023

View reviewed changes

Patel-Kamalkumar force-pushed the ledchanges branch from e27b5d4 to a0fb13c Compare December 13, 2023 17:20

Patel-Kamalkumar requested review from Nikhil-Ashoka and gtmills December 13, 2023 17:23

Patel-Kamalkumar force-pushed the ledchanges branch from a0fb13c to e12064f Compare January 11, 2024 06:11

Patel-Kamalkumar force-pushed the ledchanges branch from e12064f to 1eee9a4 Compare January 17, 2024 16:03

Nikhil-Ashoka requested review from nabilpandiyalayil, vedangimittal and SteffiAntony January 19, 2024 06:48

Nikhil-Ashoka reviewed Jan 22, 2024

View reviewed changes

SteffiAntony requested a review from Nikhil-Ashoka March 7, 2024 09:41

		system.locationIndicatorActive = data.LocationIndicatorActive;
		system.issysidentifyLed = data.LocationIndicatorActive;

Adding Led's to enhance use experience #122

Are you sure you want to change the base?

Adding Led's to enhance use experience #122

Conversation

Patel-Kamalkumar commented Jun 28, 2023 • edited Loading

mzipse commented Aug 30, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtmills commented Dec 11, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Nikhil-Ashoka Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

Nikhil-Ashoka Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Nikhil-Ashoka Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Patel-Kamalkumar commented Jun 28, 2023 •

edited

Loading

Nikhil-Ashoka Jan 22, 2024 •

edited

Loading

Nikhil-Ashoka Jan 22, 2024 •

edited

Loading

Nikhil-Ashoka Jan 22, 2024 •

edited

Loading