Skip to content

Commit c0e6cf5

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

19 files changed

+17093
-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

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