Skip to content

Commit e12064f

Browse files
Patel-KamalkumarPatel-Kamalkumar
committed
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.
1 parent 68b0643 commit e12064f

19 files changed

+594
-20932
lines changed

‎package-lock.json

-20,823
This file was deleted.

‎package.json

-76
This file was deleted.

‎src/components/Global/LedComponent.vue

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<template>
2+
<button class="ui button toggle mybtn" :class="[btnColour, 'mybtn']"></button>
3+
</template>
4+
<script>
5+
export default {
6+
name: 'LedComponent',
7+
props: {
8+
id: { type: String, default: '' },
9+
onColour: { type: String, default: 'green' },
10+
offColour: { type: String, default: 'white' },
11+
errColour: { type: String, default: 'amber' },
12+
ledValue: { type: Boolean, default: false },
13+
isSolidLed: { type: Boolean, default: false },
14+
isServiceLed: { type: Boolean, default: false },
15+
issysAttentionLed: { type: Boolean, default: false },
16+
issysidentifyLed: { type: Boolean, default: false },
17+
health: { type: String, default: '' },
18+
},
19+
data() {
20+
return {
21+
checkbox: false,
22+
blinkcolour: false,
23+
btnColour: 'white',
24+
intervalId: 0,
25+
onColours: this.onColour,
26+
offColours: this.offColour,
27+
errColours: 'red',
28+
cid: this.id,
29+
};
30+
},
31+
mounted() {
32+
if (this.isServiceLed && this.isSolidLed) {
33+
clearInterval(this.intervalId);
34+
if (this.ledValue === `global.status.on`) {
35+
this.turnon();
36+
} else {
37+
this.startBlinking();
38+
}
39+
} else if (this.isServiceLed) {
40+
if (this.isServiceLed && this.issysidentifyLed) {
41+
this.issysidentifyLed ? this.turnon() : this.turnoff();
42+
} else if (this.isServiceLed && this.issysAttentionLed) {
43+
this.issysAttentionLed ? this.turnon() : this.turnoff();
44+
}
45+
} else {
46+
if (!(this.health === 'Critical')) {
47+
if (this.ledValue) {
48+
this.startBlinking();
49+
} else {
50+
this.stopBlinking();
51+
}
52+
} else {
53+
this.turnon();
54+
}
55+
}
56+
},
57+
methods: {
58+
myFunction() {
59+
if (this.blinkcolour) {
60+
this.turnoff();
61+
} else {
62+
this.turnon();
63+
}
64+
},
65+
turnoff() {
66+
this.blinkcolour = false;
67+
this.btnColour = this.offColour;
68+
},
69+
turnon() {
70+
this.blinkcolour = true;
71+
this.btnColour = this.onColour;
72+
},
73+
74+
toggleCheckbox() {
75+
this.checkbox = true;
76+
if (this.blinkcolour) {
77+
this.turnoff();
78+
this.blinkcolour = false;
79+
} else {
80+
this.turnon();
81+
this.blinkcolour = true;
82+
}
83+
this.intervalId = setInterval(this.myFunction, 500);
84+
},
85+
86+
turnErrorColor() {
87+
if (this.checkbox) {
88+
this.stopBlinking();
89+
}
90+
this.blinkcolour = true;
91+
this.btnColour = this.errColours;
92+
},
93+
94+
stopBlinking() {
95+
clearInterval(this.intervalId);
96+
this.turnoff();
97+
this.checkbox = false;
98+
},
99+
startBlinking() {
100+
if (!this.checkbox) this.toggleCheckbox();
101+
},
102+
},
103+
};
104+
</script>
105+
106+
<style scoped>
107+
.mybtn {
108+
border-radius: 50%;
109+
padding: 12px;
110+
border-color: black;
111+
color: black;
112+
outline-color: black;
113+
}
114+
115+
.green {
116+
background-color: green;
117+
}
118+
.blue {
119+
background-color: #0029e0;
120+
}
121+
.amber {
122+
background-color: #ffb300;
123+
}
124+
.red {
125+
background-color: red;
126+
}
127+
.white {
128+
background-color: white;
129+
}
130+
.lightgrey {
131+
background-color: lightgrey;
132+
}
133+
</style>

‎src/store/modules/HardwareStatus/BmcStore.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const BmcStore = {
1717
bmc.health = data.Status.Health;
1818
bmc.id = data.Id;
1919
bmc.identifyLed = data.LocationIndicatorActive;
20+
bmc.ledStatus = data.LocationIndicatorActive;
2021
bmc.locationNumber = data.Location?.PartLocation?.ServiceLabel;
2122
bmc.model = data.Model;
2223
bmc.name = data.Name;

‎src/store/modules/HardwareStatus/FanStore.js

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const FanStore = {
2929
partNumber: PartNumber,
3030
serialNumber: SerialNumber,
3131
identifyLed: LocationIndicatorActive,
32+
ledStatus: LocationIndicatorActive,
3233
locationNumber: Location?.PartLocation?.ServiceLabel,
3334
model: Model,
3435
name: Name,

‎src/store/modules/HardwareStatus/PcieSlotsStore.js

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const PcieSlotsStore = {
1616
return {
1717
type: SlotType,
1818
identifyLed: LocationIndicatorActive,
19+
ledStatus: LocationIndicatorActive,
1920
locationNumber: Location?.PartLocation?.ServiceLabel,
2021
};
2122
});

‎src/store/modules/HardwareStatus/PowerSupplyStore.js

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const PowerSupplyStore = {
3131
serialNumber: SerialNumber,
3232
firmwareVersion: FirmwareVersion,
3333
identifyLed: LocationIndicatorActive,
34+
ledStatus: LocationIndicatorActive,
3435
locationNumber: Location?.PartLocation?.ServiceLabel,
3536
model: Model,
3637
name: Name,

‎src/store/modules/HardwareStatus/ProcessorStore.js

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const ProcessorStore = {
3838
totalCores: TotalCores,
3939
locationNumber: Location?.PartLocation?.ServiceLabel,
4040
identifyLed: LocationIndicatorActive,
41+
ledStatus: LocationIndicatorActive,
4142
uri: processor['@odata.id'],
4243
};
4344
});

‎src/store/modules/HardwareStatus/SystemStore.js

+29
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ const SystemStore = {
2121
system.sysAttentionLed =
2222
data.Oem?.IBM?.PartitionSystemAttentionIndicator ||
2323
data.Oem?.IBM?.PlatformSystemAttentionIndicator;
24+
system.issysAttentionLed = system.sysAttentionLed;
2425
system.locationIndicatorActive = data.LocationIndicatorActive;
26+
system.issysidentifyLed = data.LocationIndicatorActive;
2527
system.model = data.Model;
2628
system.processorSummaryCoreCount = data.ProcessorSummary?.CoreCount;
2729
system.processorSummaryCount = data.ProcessorSummary?.Count;
2830
system.powerState = data.PowerState;
31+
system.powerLedStatus = data.PowerState;
2932
system.serialNumber = data.SerialNumber;
3033
system.statusState = data.Status?.State;
3134
state.systems = [system];
@@ -67,6 +70,32 @@ const SystemStore = {
6770
}
6871
});
6972
},
73+
async PowerStatusLedState({ commit }, ledState) {
74+
return await api
75+
.patch('/redfish/v1/Systems/system', {
76+
powerLedStatus: ledState,
77+
})
78+
.then(() => {
79+
if (ledState) {
80+
return i18n.t('pageInventory.toast.successEnableIdentifyLed');
81+
} else {
82+
return i18n.t('pageInventory.toast.successDisableIdentifyLed');
83+
}
84+
})
85+
.catch((error) => {
86+
commit('setSystemInfo', this.state.system.systems[0]);
87+
console.log('error', error);
88+
if (ledState) {
89+
throw new Error(
90+
i18n.t('pageInventory.toast.errorEnableIdentifyLed')
91+
);
92+
} else {
93+
throw new Error(
94+
i18n.t('pageInventory.toast.errorDisableIdentifyLed')
95+
);
96+
}
97+
});
98+
},
7099
async changeSystemAttentionLedState({ commit }, ledState) {
71100
return await api
72101
.patch('/redfish/v1/Systems/system', {

‎src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue

+36-3
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,18 @@
9191
</b-form-checkbox>
9292
<div v-else>--</div>
9393
</template>
94+
95+
<template #cell(ledStatus)="row">
96+
<led-component
97+
v-if="hasIdentifyLed(row.item.identifyLed)"
98+
:ref="`identifyfabricLedRef${row.item.name}`"
99+
:led-value="row.item.identifyLed"
100+
off-colour="white"
101+
on-colour="amber"
102+
></led-component>
103+
<div v-else>--</div>
104+
</template>
105+
94106
<template #row-details="{ item }">
95107
<b-container fluid>
96108
<b-row>
@@ -136,9 +148,16 @@ import TableRowExpandMixin, {
136148
expandRowLabel,
137149
} from '@/components/Mixins/TableRowExpandMixin';
138150
import BVToastMixin from '@/components/Mixins/BVToastMixin';
151+
import LedComponent from '@/components/Global/LedComponent';
139152
140153
export default {
141-
components: { IconChevron, PageSection, Search, TableCellCount },
154+
components: {
155+
IconChevron,
156+
PageSection,
157+
Search,
158+
TableCellCount,
159+
LedComponent,
160+
},
142161
mixins: [
143162
BVToastMixin,
144163
TableRowExpandMixin,
@@ -194,6 +213,11 @@ export default {
194213
label: this.$t('pageInventory.table.identifyLed'),
195214
formatter: this.dataFormatter,
196215
},
216+
{
217+
key: 'ledStatus',
218+
label: 'Physical LED State',
219+
formatter: this.dataFormatter,
220+
},
197221
],
198222
searchFilter: searchFilter,
199223
searchTotalFilteredRows: 0,
@@ -260,8 +284,17 @@ export default {
260284
memberId: row.id,
261285
identifyLed: row.identifyLed,
262286
})
263-
.then((message) => this.successToast(message))
264-
.catch(({ message }) => this.errorToast(message));
287+
.then(() => {
288+
if (row.identifyLed) {
289+
this.$refs['identifyfabricLedRef' + `${row.name}`].startBlinking();
290+
} else {
291+
this.$refs['identifyfabricLedRef' + `${row.name}`].stopBlinking();
292+
}
293+
})
294+
.catch(({ message }) => {
295+
this.$refs['identifyfabricLedRef' + `${row.name}`].turnErrorColor();
296+
this.errorToast(message);
297+
});
265298
},
266299
sortCompare(a, b, key) {
267300
if (key === 'health') {

0 commit comments

Comments
 (0)