Skip to content

Commit d02f180

Browse files
Patel-KamalkumarPatel-Kamalkumar
committed
Adding Led's to GUI to enhance user experience
adding LED to web GUI to enhance user visual experience Signed-off-by: Kamalkumar <[email protected]>
1 parent 595a5fa commit d02f180

19 files changed

+17131
-11887
lines changed

‎package-lock.json

+16,500-11,854
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)