forked from community/device-mgt-core
Change 401 redirection in APPM UI See merge request entgra/carbon-device-mgt!1284.x.x
Dharmakeerthi Lasantha
6 years ago
commit
a5ffc12eeb
@ -0,0 +1,38 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Button, Modal, Tabs} from "antd";
|
||||||
|
import UserInstall from "./UserInstall";
|
||||||
|
|
||||||
|
const { TabPane } = Tabs;
|
||||||
|
|
||||||
|
class AppInstallModal extends React.Component{
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
title="Install App"
|
||||||
|
visible={this.props.visible}
|
||||||
|
// onOk={this.handleOk}
|
||||||
|
onCancel={this.props.onClose}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
<Tabs defaultActiveKey="1">
|
||||||
|
<TabPane tab="User" key="1">
|
||||||
|
<UserInstall onInstall={this.props.onInstall}/>
|
||||||
|
</TabPane>
|
||||||
|
<TabPane tab="Device" key="2">
|
||||||
|
Tab 2
|
||||||
|
</TabPane>
|
||||||
|
<TabPane tab="Role" key="3">
|
||||||
|
Tab 3
|
||||||
|
</TabPane>
|
||||||
|
<TabPane tab="Group" key="4">
|
||||||
|
Tab 3
|
||||||
|
</TabPane>
|
||||||
|
</Tabs>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppInstallModal;
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
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 UserInstall extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.lastFetchId = 0;
|
||||||
|
this.fetchUser = debounce(this.fetchUser, 800);
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
data: [],
|
||||||
|
value: [],
|
||||||
|
fetching: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchUser = value => {
|
||||||
|
console.log('fetching user', 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/users/search?username=" + 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.users.map(user => ({
|
||||||
|
text: user.username,
|
||||||
|
value: user.username,
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.setState({data, fetching: false});
|
||||||
|
}
|
||||||
|
|
||||||
|
}).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';
|
||||||
|
} else {
|
||||||
|
message.error('Something went wrong... :(');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({fetching: false});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChange = value => {
|
||||||
|
this.setState({
|
||||||
|
value,
|
||||||
|
data: [],
|
||||||
|
fetching: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
install = () =>{
|
||||||
|
this.props.onInstall("user",this.state.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>
|
||||||
|
<p>Select users</p>
|
||||||
|
<Select
|
||||||
|
mode="multiple"
|
||||||
|
labelInValue
|
||||||
|
value={value}
|
||||||
|
placeholder="Enter the username"
|
||||||
|
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}}>
|
||||||
|
<Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserInstall;
|
||||||
Loading…
Reference in new issue