Skip to content

Commit e27b5d4

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 e27b5d4

19 files changed

+4965
-4772
lines changed

‎package-lock.json

+4,334-4,739
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"dependencies": {
1818
"@carbon/icons-vue": "10.28.0",
1919
"@novnc/novnc": "1.2.0",
20+
"@vue/runtime-dom": "3.3.4",
2021
"axios": "0.21.4",
2122
"bootstrap": "4.6.0",
2223
"bootstrap-vue": "2.21.2",

‎src/components/Global/LedComponent.vue

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
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+
//isSolidLeds: this.isSolidLed,
30+
//issysAttentionLeds: this.issysAttentionLed,
31+
//issysidentifyLeds: this.issysidentifyLed,
32+
//isServiceLeds: this.isServiceLed,
33+
};
34+
},
35+
mounted() {
36+
console.log(
37+
'mounted->ledValue',
38+
this.ledValue,
39+
'isSolidLed',
40+
this.isSolidLed,
41+
'this.isServiceLed',
42+
this.isServiceLed,
43+
'this.issysAttentionLed',
44+
this.issysAttentionLed,
45+
'issysidentifyLed',
46+
this.issysidentifyLed
47+
);
48+
49+
if (this.isServiceLed && this.isSolidLed) {
50+
console.log('this is service+solid LED');
51+
clearInterval(this.intervalId);
52+
console.log('i m in else part1', this.intervalId);
53+
if (this.ledValue === `global.status.on`) {
54+
console.log('i m in else part2');
55+
this.turnon();
56+
} else {
57+
console.log('i m in else part3');
58+
this.startBlinking();
59+
}
60+
} else if (this.isServiceLed) {
61+
console.log('this is service LED');
62+
if (this.isServiceLed && this.issysidentifyLed) {
63+
this.issysidentifyLed ? this.turnon() : this.turnoff();
64+
} else if (this.isServiceLed && this.issysAttentionLed) {
65+
this.issysAttentionLed ? this.turnon() : this.turnoff();
66+
}
67+
} else {
68+
console.log('this is identify LED');
69+
if (!(this.health === 'Critical')) {
70+
if (this.ledValue) {
71+
this.startBlinking();
72+
} else {
73+
this.stopBlinking();
74+
}
75+
} else {
76+
this.turnon();
77+
}
78+
}
79+
},
80+
methods: {
81+
myFunction() {
82+
if (this.blinkcolour) {
83+
this.turnoff();
84+
} else {
85+
this.turnon();
86+
}
87+
},
88+
turnoff() {
89+
this.blinkcolour = false;
90+
this.btnColour = this.offColour;
91+
},
92+
turnon() {
93+
this.blinkcolour = true;
94+
this.btnColour = this.onColour;
95+
},
96+
97+
toggleCheckbox() {
98+
this.checkbox = true;
99+
if (this.blinkcolour) {
100+
this.turnoff();
101+
this.blinkcolour = false;
102+
} else {
103+
this.turnon();
104+
this.blinkcolour = true;
105+
}
106+
this.intervalId = setInterval(this.myFunction, 500);
107+
console.log(' this.intervalId->', this.intervalId);
108+
},
109+
110+
turnErrorColor() {
111+
if (this.checkbox) {
112+
this.stopBlinking();
113+
}
114+
this.blinkcolour = true;
115+
this.btnColour = this.errColours;
116+
},
117+
118+
stopBlinking() {
119+
clearInterval(this.intervalId);
120+
this.turnoff();
121+
this.checkbox = false;
122+
},
123+
startBlinking() {
124+
if (!this.checkbox) this.toggleCheckbox();
125+
},
126+
},
127+
};
128+
</script>
129+
130+
<style scoped>
131+
.mybtn {
132+
border-radius: 50%;
133+
padding: 12px;
134+
border-color: black;
135+
color: black;
136+
outline-color: black;
137+
}
138+
139+
.green {
140+
background-color: green;
141+
}
142+
.blue {
143+
background-color: #0029e0;
144+
}
145+
.amber {
146+
background-color: #ffb300;
147+
}
148+
.red {
149+
background-color: red;
150+
}
151+
.white {
152+
background-color: white;
153+
}
154+
.lightgrey {
155+
background-color: lightgrey;
156+
}
157+
</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

+30
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,18 @@ 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];
35+
console.log('init->system.issysidentifyLed', system.issysidentifyLed);
3236
},
3337
},
3438
actions: {
@@ -67,6 +71,32 @@ const SystemStore = {
6771
}
6872
});
6973
},
74+
async PowerStatusLedState({ commit }, ledState) {
75+
return await api
76+
.patch('/redfish/v1/Systems/system', {
77+
powerLedStatus: ledState,
78+
})
79+
.then(() => {
80+
if (ledState) {
81+
return i18n.t('pageInventory.toast.successEnableIdentifyLed');
82+
} else {
83+
return i18n.t('pageInventory.toast.successDisableIdentifyLed');
84+
}
85+
})
86+
.catch((error) => {
87+
commit('setSystemInfo', this.state.system.systems[0]);
88+
console.log('error', error);
89+
if (ledState) {
90+
throw new Error(
91+
i18n.t('pageInventory.toast.errorEnableIdentifyLed')
92+
);
93+
} else {
94+
throw new Error(
95+
i18n.t('pageInventory.toast.errorDisableIdentifyLed')
96+
);
97+
}
98+
});
99+
},
70100
async changeSystemAttentionLedState({ commit }, ledState) {
71101
return await api
72102
.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)