Skip to content

Commit 99b2789

Browse files
silabs-borislsilabs-borisl
committed
GH-43: Unify_UserCredential cluster integration in Dev-GUI
Bug-SiliconLabs: UIC-3222 Bug-GitHub: #43 Signed-off-by: Philippe Coval <philippe.coval@silabs.com>
1 parent 087da0e commit 99b2789

File tree

10 files changed

+846
-2
lines changed

10 files changed

+846
-2
lines changed

‎applications/dev_ui/dev_gui/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import Scene from './pages/scenes/scene/scene';
3333
import EpScenes from './pages/scenes/ep-scenes/ep-scenes';
3434
import { CommissionableDevices } from './pages/commissionable-devices/commissionable-devices';
3535
import { Button, Modal, Spinner } from 'react-bootstrap';
36+
import UserCredential from './pages/user-credential/user-credential';
3637

3738
class App extends Component<{}, AppState> {
3839
constructor(props: {}) {
@@ -278,6 +279,7 @@ class App extends Component<{}, AppState> {
278279
<Route path='/networkmanagement' exact render={() => <NetworkManagement ref={this.changeNodes} {...baseProps} NodeList={this.state.NodeList} />} />
279280
<Route path='/measurements' exact render={() => <Measurements {...baseProps} NodeList={this.state.NodeList} />} />
280281
<Route path='/commissionabledevices' exact render={() => <CommissionableDevices {...baseProps} List={this.state.CommissionableDevices} />} />
282+
<Route path='/usercredential' exact render={() => <UserCredential ref={this.changeConfParams} {...baseProps} NodeList={this.state.NodeList} />} />
281283
<Redirect from="/" exact to="/nodes" />
282284
{Object.keys(ClusterTypes).map((type, index) =>
283285
<Route key={index} path={NavbarItems.find(i => i.name === type)?.path} render={() =>

‎applications/dev_ui/dev_gui/src/pages/base-clusters/cluster-view-overrides.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ClusterTypes } from '../../cluster-types/cluster-types';
1010
import { ClusterViewOverride } from './base-cluster-types';
1111
import { Link } from 'react-router-dom';
1212
import { Tooltip } from '@mui/material';
13-
import { Button } from 'react-bootstrap';
13+
import { Button, Badge } from 'react-bootstrap';
1414

1515
//Here you can find icons that can be used to customize you page: https://react-icons.github.io/react-icons/
1616
//Don`t forgot to check licence if you use something that is not in Licence.txt
@@ -769,4 +769,23 @@ export let ClusterViewOverrides = {
769769
} as NavbarItem,
770770
IsExpandable: true
771771
} as ClusterViewOverride,
772+
773+
UserCredential: {
774+
NodesTooltip: (endpoint: string) =>
775+
<Tooltip title={`Endpoint ${endpoint}: User Credential`}>
776+
<span className="cursor-default">
777+
<Link to={`/usercredential`}>
778+
<RiIcons.RiUserSettingsFill color="#212529" />
779+
</Link>
780+
</span>
781+
</Tooltip>,
782+
NavbarItem: {
783+
name: "User Credential",
784+
title: 'User Credential',
785+
path: '/usercredential',
786+
icon: <RiIcons.RiUserSettingsFill />,
787+
cName: 'nav-text',
788+
subMenu: SideMenu.Actuators
789+
} as NavbarItem
790+
} as ClusterViewOverride,
772791
}

‎applications/dev_ui/dev_gui/src/pages/user-credential/cred-dlg/cred-dlg-types.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export type UserDlgState = {
2+
Command: any,
3+
Unid: any,
4+
ShowModal: boolean,
5+
UserCredential: any
6+
}
7+
8+
export type UserDlgProps = {
9+
SocketServer: WebSocket
10+
}

‎applications/dev_ui/dev_gui/src/pages/user-credential/cred-dlg/cred-dlg.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import * as React from 'react';
2+
import { Button, Modal } from 'react-bootstrap';
3+
import { UserDlgProps, UserDlgState } from './cred-dlg-types';
4+
import UserCredentialAttrs from '../user-credential-attrs/user-credential-attrs';
5+
6+
7+
class CredDlg extends React.Component<UserDlgProps, UserDlgState> {
8+
constructor(props: UserDlgProps) {
9+
super(props);
10+
this.sendCommand = this.sendCommand.bind(this);
11+
this.toggleModal = this.toggleModal.bind(this);
12+
this.state = {
13+
Command: {},
14+
Unid: "",
15+
ShowModal: false,
16+
UserCredential: {}
17+
};
18+
this.changeCommandAttrs = React.createRef();
19+
}
20+
changeCommandAttrs: any;
21+
22+
toggleModal(value: boolean) {
23+
this.setState({ ShowModal: value });
24+
}
25+
26+
getDefinedUserIDs(userCredential: any) {
27+
var users = userCredential.User
28+
if (!users) {
29+
return [];
30+
}
31+
return Object.keys(users).map(user_id => {
32+
return { label: user_id, id: parseInt(user_id) }
33+
});
34+
}
35+
36+
getSupportedEnum(enumData: any, supportedEnumField: any) {
37+
if (!supportedEnumField) {
38+
return enumData;
39+
}
40+
return enumData.filter((enumItem:any) => supportedEnumField[enumItem.name]);
41+
}
42+
43+
updateState(unid: string, command: any, showModal: boolean, userCredential: any) {
44+
let updatedCommand = structuredClone(command);
45+
46+
updatedCommand.fields = command.fields.map( (field: any) => {
47+
switch (field.name) {
48+
case "UserUniqueID":
49+
field.values = this.getDefinedUserIDs(userCredential);
50+
if (field.values.length !== 0) {
51+
field.defaultValue = field.values[0];
52+
field.default = field.values[0].id;
53+
}
54+
break;
55+
case "CredentialType":
56+
field.enum = this.getSupportedEnum(field.enum, userCredential.SupportedCredentialTypes?.Reported);
57+
break;
58+
}
59+
return field;
60+
});
61+
62+
63+
updatedCommand.UserList = userCredential.User;
64+
updatedCommand.UserCredential = userCredential;
65+
66+
this.setState({ Unid: unid, Command: updatedCommand, ShowModal: showModal, UserCredential: userCredential },
67+
() => {
68+
this.changeCommandAttrs.current.updateState(this.state.Command)
69+
});
70+
71+
}
72+
73+
sendCommand() {
74+
if (this.state.UserCredential !== undefined)
75+
this.props.SocketServer.send(JSON.stringify(
76+
{
77+
type: "run-cluster-command",
78+
data: {
79+
Unid: this.state.Unid,
80+
ClusterType: "UserCredential",
81+
Cmd: this.state.Command.name,
82+
Payload: this.changeCommandAttrs.current.state.Payload
83+
}
84+
}));
85+
}
86+
87+
88+
render() {
89+
return (
90+
<Modal show={this.state.ShowModal} size="lg" onHide={() => this.toggleModal(false)}>
91+
<Modal.Header closeButton>
92+
<Modal.Title>{this.state.Command.name}</Modal.Title>
93+
</Modal.Header>
94+
<Modal.Body>
95+
<UserCredentialAttrs ref={this.changeCommandAttrs} />
96+
</Modal.Body>
97+
<Modal.Footer>
98+
<Button variant="primary" onClick={() => { this.sendCommand(); this.toggleModal(false); }}>
99+
Send
100+
</Button>
101+
<Button variant="outline-primary" onClick={() => this.toggleModal(false)}>
102+
Cancel
103+
</Button>
104+
</Modal.Footer>
105+
</Modal>
106+
);
107+
}
108+
}
109+
110+
export default CredDlg

0 commit comments

Comments
 (0)