chandrasegar
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create components to install by group & role

Browse Source
feature/appm-store/pbac
Jayasanka 6 years ago
parent 316f93b190
commit 113be7e6ac
4 changed files with 254 additions and 7 deletions
Show Stats Download Patch File Download Diff File

8
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js vendored
Unescape View File

@ -1,6 +1,8 @@
import React from "react";
import {Button, Modal, Tabs} from "antd";
import UserInstall from "./UserInstall";
import GroupInstall from "./GroupInstall";
import RoleInstall from "./RoleInstall";
const { TabPane } = Tabs;
@ -20,13 +22,13 @@ class AppInstallModal extends React.Component{
<UserInstall onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="Device" key="2">
Tab 2
Device install
</TabPane>
<TabPane tab="Role" key="3">
Tab 3
<RoleInstall onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="Group" key="4">
Tab 3
<GroupInstall onInstall={this.props.onInstall}/>
</TabPane>
</Tabs>
</Modal>

120
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js vendored
Unescape View File

@ -0,0 +1,120 @@
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import config from "../../../../../public/conf/config.json";
const {Text} = Typography;
const {Option} = Select;
class GroupInstall extends React.Component {
constructor(props) {
super(props);
this.lastFetchId = 0;
this.fetchUser = debounce(this.fetchUser, 800);
}
state = {
data: [],
value: [],
fetching: false,
};
fetchUser = value => {
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({data: [], fetching: true});
const parameters = {
method: "get",
'content-type': "application/json",
payload: "{}",
'api-endpoint': "/device-mgt/v1.0/admin/groups?name=" + value
};
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
console.log(request);
axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
if (fetchId !== this.lastFetchId) {
// for fetch callback order
return;
}
console.log(res.data.data);
const data = res.data.data.deviceGroups.map(group => ({
text: group.name,
value: group.name,
}));
this.setState({data, fetching: false});
}
}).catch((error) => {
if (error.hasOwnProperty("status") && error.response.status === 401) {
message.error('You are not logged in');
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
} else {
message.error('Something went wrong... :(');
}
this.setState({fetching: false});
});
};
handleChange = value => {
this.setState({
value,
data: [],
fetching: false,
});
};
install = () =>{
const {value} = this.state;
const data = [];
value.map(val=>{
data.push(val.key);
});
this.props.onInstall("group",data);
};
render() {
const {fetching, data, value} = this.state;
return (
<div>
<Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
decore ubique sed,</Text>
<br/>
<br/>
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Search groups"
notFoundContent={fetching ? <Spin size="small"/> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{width: '100%'}}
>
{data.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
<div style={{paddingTop:10, textAlign:"right"}}>
<Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
</div>
</div>
);
}
}
export default GroupInstall;

120
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js vendored
Unescape View File

@ -0,0 +1,120 @@
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import config from "../../../../../public/conf/config.json";
const {Text} = Typography;
const {Option} = Select;
class RoleInstall extends React.Component {
constructor(props) {
super(props);
this.lastFetchId = 0;
this.fetchUser = debounce(this.fetchUser, 800);
}
state = {
data: [],
value: [],
fetching: false,
};
fetchUser = value => {
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({data: [], fetching: true});
const parameters = {
method: "get",
'content-type': "application/json",
payload: "{}",
'api-endpoint': "/device-mgt/v1.0/roles?filter=" + value
};
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
console.log(request);
axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
if (fetchId !== this.lastFetchId) {
// for fetch callback order
return;
}
console.log(res.data.data);
const data = res.data.data.roles.map(role => ({
text: role,
value: role,
}));
this.setState({data, fetching: false});
}
}).catch((error) => {
if (error.hasOwnProperty("status") && error.response.status === 401) {
message.error('You are not logged in');
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
} else {
message.error('Something went wrong... :(');
}
this.setState({fetching: false});
});
};
handleChange = value => {
this.setState({
value,
data: [],
fetching: false,
});
};
install = () =>{
const {value} = this.state;
const data = [];
value.map(val=>{
data.push(val.key);
});
this.props.onInstall("role",data);
};
render() {
const {fetching, data, value} = this.state;
return (
<div>
<Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
decore ubique sed,</Text>
<br/>
<br/>
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Search roles"
notFoundContent={fetching ? <Spin size="small"/> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{width: '100%'}}
>
{data.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
<div style={{paddingTop:10, textAlign:"right"}}>
<Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
</div>
</div>
);
}
}
export default RoleInstall;

13
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js vendored
Unescape View File

@ -59,7 +59,7 @@ class UserInstall extends React.Component {
}).catch((error) => {
if (error.response.hasOwnProperty(status) && error.response.status === 401) {
message.error('You are not logged in');
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
} else {
message.error('Something went wrong... :(');
}
@ -76,8 +76,13 @@ class UserInstall extends React.Component {
});
};
install = () =>{
this.props.onInstall("user",this.state.data);
install = () => {
const {value} = this.state;
const data = [];
value.map(val => {
data.push(val.key);
});
this.props.onInstall("user", data);
};
render() {
@ -104,7 +109,7 @@ class UserInstall extends React.Component {
<Option key={d.value}>{d.text}</Option>
))}
</Select>
<div style={{paddingTop:10}}>
<div style={{paddingTop: 10, textAlign: "right"}}>
<Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
</div>
</div>

Write Preview
Loading…
Cancel
Save