Merge branch 'application-mgt-new' into 'application-mgt-new'

Remove redux from release in APPM Store

See merge request entgra/carbon-device-mgt!132
feature/appm-store/pbac
Dharmakeerthi Lasantha 6 years ago
commit f92e208720

@ -1,60 +0,0 @@
import {
Skeleton, Switch, Card, Icon, Avatar, Typography
} from 'antd';
import React from "react";
import config from "../../../public/conf/config.json";
import {openReleasesModal} from "../../js/actions";
import {connect} from "react-redux";
const { Meta } = Card;
const { Text } = Typography;
const mapDispatchToProps = dispatch => ({
openReleasesModal: (app) => dispatch(openReleasesModal(app))
});
class ConnectedAppCard extends React.Component {
constructor(props){
super(props);
this.handleReleasesClick = this.handleReleasesClick.bind(this);
}
handleReleasesClick(){
this.props.openReleasesModal(this.props.app);
}
render() {
const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default;
if(defaultPlatformIcons.hasOwnProperty(this.props.platform)){
icon = defaultPlatformIcons[this.props.platform];
}
let descriptionText = this.props.description;
if(descriptionText.length>50){
descriptionText = descriptionText.substring(0,50)+"...";
}
const description = (
<div>
<p>{descriptionText}</p>
<Text code>{this.props.type}</Text>
<Text> {this.props.subType}</Text>
</div>
);
return (
<Card style={{marginTop: 16 }} actions={[<Icon type="edit" />, <Icon type="delete" />, <Icon type="appstore" theme="twoTone" onClick={this.handleReleasesClick} />]}>
<Meta
avatar={<Avatar src={icon} />}
title={this.props.name}
description={description}
/>
</Card>
);
}
}
const AppCard = connect(null,mapDispatchToProps)(ConnectedAppCard);
export default AppCard;

@ -1,42 +0,0 @@
import React from "react";
import AppCard from "./AppCard";
import {Col, Row} from "antd";
import {connect} from "react-redux";
import {getApps} from "../../js/actions";
// connecting state.apps with the component
const mapStateToProps= state => {
return {apps : state.apps}
};
class ConnectedAppList extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.getApps();
}
render() {
return (
<Row gutter={16}>
{this.props.apps.map(app => (
<Col key={app.id} xs={24} sm={12} md={6} lg={6}>
<AppCard key={app.id}
app = {app}
name={app.name}
platform={app.deviceType}
type={app.type}
subType={app.subType}
description={app.description}/>
</Col>
))}
</Row>
);
}
}
const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
export default AppList;

@ -21,8 +21,8 @@ class DetailedRating extends React.Component{
this.getData(this.props.uuid); this.getData(this.props.uuid);
} }
componentDidUpdate(nextProps) { componentDidUpdate(prevProps, prevState) {
if (nextProps !== this.props) { if (prevProps.uuid !== this.props.uuid) {
this.getData(this.props.uuid); this.getData(this.props.uuid);
} }
} }

@ -7,11 +7,6 @@ import config from "../../../../public/conf/config.json";
const {Title} = Typography; const {Title} = Typography;
// connecting state.apps with the component
const mapStateToProps = state => {
return {apps: state.apps}
};
const columns = [ const columns = [
{ {
title: '', title: '',
@ -71,7 +66,7 @@ const columns = [
}, },
]; ];
class ConnectedAppsTable extends React.Component { class AppsTable extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -175,6 +170,4 @@ class ConnectedAppsTable extends React.Component {
} }
} }
const AppsTable = connect(mapStateToProps, {getApps})(ConnectedAppsTable);
export default AppsTable; export default AppsTable;

@ -1,60 +0,0 @@
import React from "react";
import "antd/dist/antd.css";
import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
import AppList from "../../../components/apps/AppList";
import ReleaseModal from "../../../components/apps/ReleaseModal";
const Search = Input.Search;
const routes = [
{
path: 'index',
breadcrumbName: 'Publisher',
},
{
path: 'first',
breadcrumbName: 'Dashboard',
},
{
path: 'second',
breadcrumbName: 'Apps',
},
];
class Apps extends React.Component {
routes;
constructor(props) {
super(props);
this.routes = props.routes;
}
render() {
return (
<div>
<PageHeader
breadcrumb={{routes}}
/>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
<Row style={{padding:10}}>
<Col span={6} offset={18}>
<Search
placeholder="search"
onSearch={value => console.log(value)}
style={{ width: 200}}
/>
<Button style={{margin:5}}>Advanced Search</Button>
</Col>
</Row>
<ReleaseModal/>
<AppList/>
</div>
</div>
);
}
}
export default Apps;

@ -15,6 +15,7 @@
"axios": "^0.18.0", "axios": "^0.18.0",
"d3": "^5.9.2", "d3": "^5.9.2",
"dagre": "^0.8.4", "dagre": "^0.8.4",
"javascript-time-ago": "^2.0.1",
"keymirror": "^0.1.1", "keymirror": "^0.1.1",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"rc-viewer": "0.0.9", "rc-viewer": "0.0.9",
@ -30,7 +31,6 @@
"react-scripts": "2.1.8", "react-scripts": "2.1.8",
"react-star-ratings": "^2.3.0", "react-star-ratings": "^2.3.0",
"react-virtualized": "^9.21.1", "react-virtualized": "^9.21.1",
"redux-thunk": "^2.3.0",
"reqwest": "^2.0.5", "reqwest": "^2.0.5",
"storm-react-diagrams": "^5.2.1" "storm-react-diagrams": "^5.2.1"
}, },
@ -65,8 +65,6 @@
"react": "^15.6.2", "react": "^15.6.2",
"react-dom": "^15.6.2", "react-dom": "^15.6.2",
"react-intl": "^2.4.0", "react-intl": "^2.4.0",
"react-redux": "^7.0.2",
"redux": "^4.0.1",
"sass-loader": "^6.0.7", "sass-loader": "^6.0.7",
"style-loader": "^0.18.2", "style-loader": "^0.18.2",
"url-loader": "^1.1.2", "url-loader": "^1.1.2",

@ -9,7 +9,7 @@ class RouteWithSubRoutes extends React.Component{
render() { render() {
return( return(
<Route path={this.props.path} exact={this.props.exact} render={(props) => ( <Route path={this.props.path} exact={this.props.exact} render={(props) => (
<this.props.component {...props} routes={this.props.routes}/> <this.props.component {...props} {...this.props} routes={this.props.routes}/>
)}/> )}/>
); );
} }

@ -1,21 +1,13 @@
import { import {Card, Typography, Col, Row} from 'antd';
Skeleton, Switch, Card, Icon, Avatar, Typography, Col, Row, Rate
} from 'antd';
import React from "react"; import React from "react";
import {openReleasesModal} from "../../js/actions";
import {connect} from "react-redux";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import "../../App.css"; import "../../App.css";
import StarRatings from 'react-star-ratings'; import StarRatings from 'react-star-ratings';
const {Meta} = Card; const {Meta} = Card;
const {Text, Title} = Typography; const {Text} = Typography;
const mapDispatchToProps = dispatch => ({ class AppCard extends React.Component {
openReleasesModal: (app) => dispatch(openReleasesModal(app))
});
class ConnectedAppCard extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -29,11 +21,10 @@ class ConnectedAppCard extends React.Component {
render() { render() {
const app = this.props.app; const app = this.props.app;
const release = this.props.app.applicationReleases[0]; const release = this.props.app.applicationReleases[0];
// console.log(this.props);
const description = ( const description = (
<div className="appCard"> <div className="appCard">
<Link to={"/store/apps/" + release.uuid}> <Link to={"/store/"+app.deviceType+"/apps/" + release.uuid}>
<Row className="release"> <Row className="release">
<Col span={24} className="release-icon"> <Col span={24} className="release-icon">
<img src={release.iconPath} alt="icon"/> <img src={release.iconPath} alt="icon"/>
@ -66,6 +57,4 @@ class ConnectedAppCard extends React.Component {
} }
} }
const AppCard = connect(null, mapDispatchToProps)(ConnectedAppCard);
export default AppCard; export default AppCard;

@ -1,31 +1,88 @@
import React from "react"; import React from "react";
import AppCard from "./AppCard"; import AppCard from "./AppCard";
import {Col, Row} from "antd"; import {Col, message, Row} from "antd";
import {connect} from "react-redux"; import axios from "axios";
import {getApps} from "../../js/actions"; import config from "../../../public/conf/config.json";
// connecting state.apps with the component class AppList extends React.Component {
const mapStateToProps= state => {
return {apps : state.apps}
};
class ConnectedAppList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
apps: [],
loading: false
}
} }
componentDidMount() { componentDidMount() {
this.props.getApps(); console.log("mounted");
const {deviceType} = this.props;
console.log(this.props);
this.props.changeSelectedMenuItem(deviceType);
this.fetchData(deviceType);
} }
componentDidUpdate(prevProps, prevState) {
if (prevProps.deviceType !== this.props.deviceType) {
const {deviceType} = this.props;
this.props.changeSelectedMenuItem(deviceType);
this.fetchData(deviceType);
}
}
fetchData = (deviceType) => {
const payload = {};
if(deviceType==="web-clip"){
payload.appType= "WEB_CLIP";
}else{
payload.deviceType= deviceType;
}
const parameters = {
method: "post",
'content-type': "application/json",
payload: JSON.stringify(payload),
'api-endpoint': "/application-mgt-store/v1.0/applications/"
};
//url-encode parameters
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
//send request to the invoker
axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
//todo remove this property check after backend improvement
let apps = (res.data.data.hasOwnProperty("applications")) ? res.data.data.applications : [];
this.setState({
apps: apps,
loading: false
})
}
}).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
//todo display a popup with error
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({loading: false});
});
};
render() { render() {
const {apps} = this.state;
return ( return (
<Row gutter={16}> <Row gutter={16}>
{this.props.apps.map(app => ( {apps.map(app => (
<Col key={app.id} xs={12} sm={6} md={6} lg={4} xl={3}> <Col key={app.id} xs={12} sm={6} md={6} lg={4} xl={3}>
<AppCard key={app.id} <AppCard key={app.id}
app = {app} app={app}
/> />
</Col> </Col>
))} ))}
</Row> </Row>
@ -33,6 +90,4 @@ class ConnectedAppList extends React.Component {
} }
} }
const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
export default AppList; export default AppList;

@ -1,85 +0,0 @@
import React from "react";
import {Modal, Typography,List, Avatar} from 'antd';
import {connect} from 'react-redux';
import {Link} from "react-router-dom";
// connecting state.releaseView with the component
const mapStateToProps = state => {
return {releaseView: state.releaseView}
};
const Text = Typography;
class ConnectedReleaseModal extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
app: null
};
}
componentWillReceiveProps(nextProps) {
if (nextProps !== this.props) {
this.setState({
visible: nextProps.releaseView.visible,
app: nextProps.releaseView.app
})
}
}
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = (e) => {
this.setState({
visible: false,
});
};
handleCancel = (e) => {
this.setState({
visible: false,
});
};
render() {
if (this.props.releaseView.app != null) {
const app = this.props.releaseView.app;
return (
<div>
<Modal
title={app.name}
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<List
itemLayout="horizontal"
dataSource={app.applicationReleases}
renderItem={release => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={release.iconPath} />}
title={<Link to={"/store/apps/"+release.uuid}>{release.version}</Link>}
description={release.description}
/>
</List.Item>
)}
/>
</Modal>
</div>
);
} else {
return null;
}
}
}
const ReleaseModal = connect(mapStateToProps, null)(ConnectedReleaseModal);
export default ReleaseModal;

@ -1,31 +1,52 @@
import React from "react"; import React from "react";
import {Row, Typography, Icon} from "antd"; import {Row, Typography, Icon} from "antd";
import StarRatings from "react-star-ratings"; import StarRatings from "react-star-ratings";
import axios from "axios";
import "./DetailedRating.css"; import "./DetailedRating.css";
import {connect} from "react-redux"; import config from "../../../../public/conf/config.json";
import {getDetailedRating} from "../../../js/actions";
const { Text } = Typography; const { Text } = Typography;
// connecting state. with the component class DetailedRating extends React.Component{
const mapStateToProps= state => {
return {detailedRating : state.detailedRating}
};
const mapDispatchToProps = dispatch => ({ constructor(props){
getDetailedRating: (uuid) => dispatch(getDetailedRating(uuid)) super(props);
}); this.state={
detailedRating: null
}
}
componentDidMount() {
this.getData(this.props.uuid);
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.uuid !== this.props.uuid) {
this.getData(this.props.uuid);
}
}
class ConnectedDetailedRating extends React.Component{ getData = (uuid)=>{
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
componentDidMount() { return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
this.props.getDetailedRating(this.props.uuid); ).then(res => {
} if (res.status === 200) {
let detailedRating = res.data.data;
this.setState({
detailedRating
})
}
}).catch(function (error) {
if (error.response.status === 401) {
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
}
});
};
render() { render() {
const detailedRating = this.props.detailedRating; const detailedRating = this.state.detailedRating;
console.log(detailedRating); console.log(detailedRating);
@ -96,6 +117,5 @@ class ConnectedDetailedRating extends React.Component{
} }
} }
const DetailedRating = connect(mapStateToProps,mapDispatchToProps)(ConnectedDetailedRating);
export default DetailedRating; export default DetailedRating;

@ -89,7 +89,8 @@ class ReleaseView extends React.Component {
}; };
render() { render() {
const release = this.props.release; const app = this.props.app;
const release = app.applicationReleases[0];
return ( return (
<div> <div>
<AppInstallModal uuid={release.uuid} visible={this.state.appInstallModalVisible} <AppInstallModal uuid={release.uuid} visible={this.state.appInstallModalVisible}
@ -100,10 +101,10 @@ class ReleaseView extends React.Component {
<img src={release.iconPath} alt="icon"/> <img src={release.iconPath} alt="icon"/>
</Col> </Col>
<Col xl={10} sm={11} className="release-title"> <Col xl={10} sm={11} className="release-title">
<Title level={2}>App Name</Title> <Title level={2}>{app.name}</Title>
<Text>Version : {release.version}</Text><br/><br/> <Text>Version : {release.version}</Text><br/><br/>
<StarRatings <StarRatings
rating={release.rating} rating={app.rating}
starRatedColor="#777" starRatedColor="#777"
starDimension="20px" starDimension="20px"
starSpacing="2px" starSpacing="2px"

@ -3,10 +3,14 @@ import {Button, Modal, Tabs} from "antd";
import UserInstall from "./UserInstall"; import UserInstall from "./UserInstall";
import GroupInstall from "./GroupInstall"; import GroupInstall from "./GroupInstall";
import RoleInstall from "./RoleInstall"; import RoleInstall from "./RoleInstall";
import DeviceInstall from "./DeviceInstall";
const { TabPane } = Tabs; const { TabPane } = Tabs;
class AppInstallModal extends React.Component{ class AppInstallModal extends React.Component{
state={
data:[]
};
render() { render() {
return ( return (
<div> <div>
@ -17,12 +21,12 @@ class AppInstallModal extends React.Component{
onCancel={this.props.onClose} onCancel={this.props.onClose}
footer={null} footer={null}
> >
<Tabs defaultActiveKey="1"> <Tabs defaultActiveKey="1" onChange={()=>{console.log("changed");}}>
<TabPane tab="User" key="1"> <TabPane tab="User" key="1">
<UserInstall onInstall={this.props.onInstall}/> <UserInstall onInstall={this.props.onInstall}/>
</TabPane> </TabPane>
<TabPane tab="Device" key="2"> <TabPane tab="Device" key="2">
Device install <DeviceInstall onInstall={this.props.onInstall}/>
</TabPane> </TabPane>
<TabPane tab="Role" key="3"> <TabPane tab="Role" key="3">
<RoleInstall onInstall={this.props.onInstall}/> <RoleInstall onInstall={this.props.onInstall}/>

@ -0,0 +1,225 @@
import React from "react";
import axios from "axios";
import config from "../../../../../public/conf/config.json";
import {Button, message, Table, Typography} from "antd";
import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules.
import en from 'javascript-time-ago/locale/en'
const {Text} = Typography;
const columns = [
{
title: 'Device',
dataIndex: 'name',
fixed: 'left',
width: 100,
},
{
title: 'Modal',
dataIndex: 'deviceInfo',
key:'modal',
render: deviceInfo => `${deviceInfo.vendor} ${deviceInfo.deviceModel}`
// todo add filtering options
},
{
title: 'Owner',
dataIndex: 'enrolmentInfo',
key: 'owner',
render: enrolmentInfo => enrolmentInfo.owner
// todo add filtering options
},
{
title: 'Last Updated',
dataIndex: 'enrolmentInfo',
key: 'dateOfLastUpdate',
render: (data) => {
return (getTimeAgo(data.dateOfLastUpdate));
}
// todo add filtering options
},
{
title: 'Status',
dataIndex: 'enrolmentInfo',
key: 'status',
render: enrolmentInfo => enrolmentInfo.status
// todo add filtering options
},
{
title: 'Ownership',
dataIndex: 'enrolmentInfo',
key: 'ownership',
render: enrolmentInfo => enrolmentInfo.ownership
// todo add filtering options
},
{
title: 'OS Version',
dataIndex: 'deviceInfo',
key:'osVersion',
render: deviceInfo => deviceInfo.osVersion
// todo add filtering options
},
{
title: 'IMEI',
dataIndex: 'properties',
key:'imei',
render: properties => {
let imei = "not-found";
for (let i = 0; i < properties.length; i++) {
if(properties[i].name==="IMEI"){
imei = properties[i].value;
}
}
return imei;
}
// todo add filtering options
},
];
const getTimeAgo = (time) => {
const timeAgo = new TimeAgo('en-US');
return timeAgo.format(time);
};
class DeviceInstall extends React.Component {
constructor(props) {
super(props);
TimeAgo.addLocale(en);
this.state = {
data: [],
pagination: {},
loading: false,
selectedRows:[]
};
}
rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.setState({
selectedRows: selectedRows
})
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};
componentDidMount() {
this.fetch();
}
//fetch data from api
fetch = (params = {}) => {
this.setState({loading: true});
// get current page
const currentPage = (params.hasOwnProperty("page")) ? params.page : 1;
const extraParams = {
offset: 10 * (currentPage - 1), //calculate the offset
limit: 10,
status: "INACTIVE",
requireDeviceInfo: true
};
// note: encode with '%26' not '&'
const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('%26');
const parameters = {
method: "get",
'content-type': "application/json",
payload: "{}",
'api-endpoint': "/device-mgt/v1.0/devices?" + encodedExtraParams
};
//url-encode parameters
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
//send request to the invoker
axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
const pagination = {...this.state.pagination};
console.log(res.data.data.devices);
this.setState({
loading: false,
data: res.data.data.devices,
pagination,
});
}
}).catch((error) => {
if (error.hasOwnProperty("status") && error.response.status === 401) {
//todo display a popop with error
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({loading: false});
});
};
handleTableChange = (pagination, filters, sorter) => {
const pager = {...this.state.pagination};
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch({
results: pagination.pageSize,
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
install = () => {
const {selectedRows} = this.state;
const payload = [];
selectedRows.map(device => {
payload.push({
deviceIdentifier: device.deviceIdentifier,
type: device.type
});
});
this.props.onInstall("device", payload);
};
render() {
const {data,pagination,loading,selectedRows} = this.state;
return (
<div>
<Text>Start installing the application for one or more users by entering the corresponding user name. Select install to automatically start downloading the application for the respective user/users. </Text>
<Table
style={{paddingTop:20}}
columns={columns}
rowKey={record => record.deviceIdentifier}
dataSource={data}
pagination={{
...pagination,
size: "small",
// position: "top",
showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices`
// showQuickJumper: true
}}
loading={loading}
onChange={this.handleTableChange}
rowSelection={this.rowSelection}
scroll={{x: 1000}}
/>
<div style={{paddingTop: 10, textAlign: "right"}}>
<Button disabled={selectedRows.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
</div>
</div>
);
}
}
export default DeviceInstall;

@ -90,8 +90,7 @@ class GroupInstall extends React.Component {
return ( return (
<div> <div>
<Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro <Text>Start installing the application for one or more groups by entering the corresponding group name. Select install to automatically start downloading the application for the respective device group/ groups.</Text>
decore ubique sed,</Text>
<br/> <br/>
<br/> <br/>
<Select <Select
@ -110,7 +109,7 @@ class GroupInstall extends React.Component {
))} ))}
</Select> </Select>
<div style={{paddingTop:10, textAlign:"right"}}> <div style={{paddingTop:10, textAlign:"right"}}>
<Button htmlType="button" type="primary" onClick={this.install}>Install</Button> <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
</div> </div>
</div> </div>
); );

@ -90,8 +90,7 @@ class RoleInstall extends React.Component {
return ( return (
<div> <div>
<Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro <Text>Start installing the application for one or more roles by entering the corresponding role name. Select install to automatically start downloading the application for the respective user role/roles.</Text>
decore ubique sed,</Text>
<br/> <br/>
<br/> <br/>
<Select <Select
@ -110,7 +109,7 @@ class RoleInstall extends React.Component {
))} ))}
</Select> </Select>
<div style={{paddingTop:10, textAlign:"right"}}> <div style={{paddingTop:10, textAlign:"right"}}>
<Button htmlType="button" type="primary" onClick={this.install}>Install</Button> <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
</div> </div>
</div> </div>
); );

@ -86,13 +86,11 @@ class UserInstall extends React.Component {
}; };
render() { render() {
const {fetching, data, value} = this.state; const {fetching, data, value} = this.state;
return ( return (
<div> <div>
<Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro <Text>Start installing the application for one or more users by entering the corresponding user name. Select install to automatically start downloading the application for the respective user/users. </Text>
decore ubique sed,</Text>
<p>Select users</p> <p>Select users</p>
<Select <Select
mode="multiple" mode="multiple"
@ -110,7 +108,7 @@ class UserInstall extends React.Component {
))} ))}
</Select> </Select>
<div style={{paddingTop: 10, textAlign: "right"}}> <div style={{paddingTop: 10, textAlign: "right"}}>
<Button htmlType="button" type="primary" onClick={this.install}>Install</Button> <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
</div> </div>
</div> </div>
); );

@ -6,11 +6,7 @@ import Login from "./pages/Login";
import Dashboard from "./pages/dashboard/Dashboard"; import Dashboard from "./pages/dashboard/Dashboard";
import Apps from "./pages/dashboard/apps/Apps"; import Apps from "./pages/dashboard/apps/Apps";
import Release from "./pages/dashboard/apps/release/Release"; import Release from "./pages/dashboard/apps/release/Release";
import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
import './index.css'; import './index.css';
import store from "./js/store/index";
import {Provider} from "react-redux";
const routes = [ const routes = [
{ {
@ -19,22 +15,17 @@ const routes = [
component: Login component: Login
}, },
{ {
path: '/store/apps', path: '/store',
exact: false, exact: false,
component: Dashboard, component: Dashboard,
routes: [ routes: [
{ {
path: '/store/apps', path: '/store/:deviceType',
component: Apps, component: Apps,
exact: true exact: true
}, },
{ {
path: '/store/apps/new-app', path: '/store/:deviceType/apps/:uuid',
component: AddNewApp,
exact: true
},
{
path: '/store/apps/:uuid',
exact: true, exact: true,
component: Release component: Release
} }
@ -44,9 +35,7 @@ const routes = [
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <App routes={routes}/>,
<App routes={routes}/>
</Provider>,
document.getElementById('root')); document.getElementById('root'));
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change

@ -1,168 +0,0 @@
import axios from "axios";
import ActionTypes from "../constants/ActionTypes";
import config from "../../../public/conf/config.json";
export const getApps = () => dispatch => {
const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications";
return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
let apps = [];
if (res.data.data.hasOwnProperty("applications")) {
apps = res.data.data.applications;
}
dispatch({type: ActionTypes.GET_APPS, payload: apps});
}
}).catch(function (error) {
if (error.response.status === 401) {
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
}
});
};
export const getRelease = (uuid) => dispatch => {
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications/" + uuid;
return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
let release = res.data.data.applicationReleases[0];
dispatch({
type: ActionTypes.GET_RELEASE,
payload: {
release: release,
releaseLoading: false
}
});
}
}).catch(function (error) {
if (error.response.status === 401) {
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
}else if(error.response.status===404){
dispatch({
type: ActionTypes.GET_RELEASE,
payload: {
release: null,
releaseLoading: false
}});
}
});
};
export const openReleasesModal = (app) => dispatch => {
dispatch({
type: ActionTypes.OPEN_RELEASES_MODAL,
payload: {
app: app
}
});
};
export const openLifecycleModal = (nextState) => dispatch => {
dispatch({
type: ActionTypes.OPEN_LIFECYCLE_MODAL,
payload: {
nextState: nextState
}
});
};
export const closeLifecycleModal = () => dispatch => {
dispatch({
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
});
};
export const setLoading = (stateToLoad) => dispatch => {
dispatch({
type: ActionTypes.SET_LOADING_STATE,
payload: {
stateToLoad: stateToLoad
}
});
};
export const getLifecycle = () => dispatch => {
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications/lifecycle-config";
return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
let lifecycle = res.data.data;
dispatch({type: ActionTypes.GET_LIFECYCLE, payload: lifecycle});
}
}).catch(function (error) {
if (error.response.status === 401) {
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
}
});
};
export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
const payload = {
action: nextState,
reason: reason
};
const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-store/v1.0/applications/life-cycle/" + uuid;
return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 201) {
let release = res.data.data;
dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
}else {
alert("error");
dispatch({
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
});
}
}).catch(function (error) {
if (error.response.status === 401) {
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
} else if (error.response.status === 500) {
alert("error");
dispatch({
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
});
}
});
};
export const getDetailedRating = (uuid) => dispatch => {
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
let detailedRating = res.data.data;
dispatch({type: ActionTypes.GET_DETAILED_RATING, payload: detailedRating});
}
}).catch(function (error) {
if (error.response.status === 401) {
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
} else{
dispatch({
type: ActionTypes.GET_DETAILED_RATING, payload: null
});
}
});
};

@ -1,17 +0,0 @@
import keyMirror from 'keymirror';
const ActionTypes = keyMirror({
LOGIN: null,
GET_APPS: null,
OPEN_RELEASES_MODAL: null,
CLOSE_RELEASES_MODAL: null,
GET_RELEASE: null,
GET_LIFECYCLE: null,
OPEN_LIFECYCLE_MODAL: null,
CLOSE_LIFECYCLE_MODAL: null,
UPDATE_LIFECYCLE_STATE: null,
SET_LOADING_STATE: null,
GET_DETAILED_RATING: null
});
export default ActionTypes;

@ -1,83 +0,0 @@
import ActionTypes from "../constants/ActionTypes";
const initialState = {
apps: [],
releaseView: {
visible: false,
app: null
},
release: null,
lifecycle: null,
lifecycleModal: {
visible: false,
nextState: null
},
loadingState: {
release: true
},
detailedRating: null
};
function rootReducer(state = initialState, action) {
if (action.type === ActionTypes.GET_APPS) {
return Object.assign({}, state, {
apps: action.payload
});
} else if (action.type === ActionTypes.OPEN_RELEASES_MODAL) {
return Object.assign({}, state, {
releaseView: {
visible: true,
app: action.payload.app
}
});
} else if (action.type === ActionTypes.GET_RELEASE) {
let loadingState = {...state.loadingState};
loadingState.release = action.payload.releaseLoading;
return Object.assign({}, state, {
release: action.payload.release,
loadingState: loadingState
});
} else if (action.type === ActionTypes.GET_LIFECYCLE) {
return Object.assign({}, state, {
lifecycle: action.payload
});
} else if (action.type === ActionTypes.OPEN_LIFECYCLE_MODAL) {
return Object.assign({}, state, {
lifecycleModal: {
visible: true,
nextState: action.payload.nextState
}
});
} else if (action.type === ActionTypes.CLOSE_LIFECYCLE_MODAL) {
return Object.assign({}, state, {
lifecycleModal: {
visible: false,
nextState: null
}
});
} else if (action.type === ActionTypes.UPDATE_LIFECYCLE_STATE) {
return Object.assign({}, state, {
lifecycleModal: {
visible: false,
nextState: null,
},
release: action.payload
});
} else if (action.type === ActionTypes.SET_LOADING_STATE) {
let loadingState = {...state.loadingState};
loadingState[action.payload.stateToLoad] = true;
return Object.assign({}, state, {
loadingState: loadingState
});
} else if (action.type === ActionTypes.GET_DETAILED_RATING) {
return Object.assign({}, state, {
detailedRating: action.payload
});
}
return state;
}
export default rootReducer;

@ -1,5 +0,0 @@
import { createStore, applyMiddleware } from "redux";
import rootReducer from "../reducers/index";
import thunk from "redux-thunk";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

@ -92,7 +92,7 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('username', { {getFieldDecorator('username', {
rules: [{required: true, message: 'Please input your username!'}], rules: [{required: true, message: 'Please input your username!'}],
})( })(
<Input style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} <Input name="username" style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
placeholder="Username"/> placeholder="Username"/>
)} )}
</Form.Item> </Form.Item>
@ -100,7 +100,7 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{required: true, message: 'Please input your Password!'}], rules: [{required: true, message: 'Please input your Password!'}],
})( })(
<Input style={{height: 32}} className={styles.input} <Input name="password" style={{height: 32}} className={styles.input}
prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password" prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
placeholder="Password"/> placeholder="Password"/>
)} )}

@ -13,11 +13,21 @@ class Dashboard extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
routes: props.routes routes: props.routes,
selectedKeys : []
} }
} }
changeSelectedMenuItem = (key) =>{
console.log("called", key);
this.setState({
selectedKeys: [key]
})
};
render() { render() {
const {selectedKeys} = this.state;
console.log(selectedKeys);
return ( return (
<div> <div>
<Layout className="layout"> <Layout className="layout">
@ -28,23 +38,21 @@ class Dashboard extends React.Component {
<Menu <Menu
theme="light" theme="light"
mode="horizontal" mode="horizontal"
defaultSelectedKeys={['2']} selectedKeys={selectedKeys}
style={{lineHeight: '64px'}} style={{lineHeight: '64px'}}
> >
<Menu.Item key="1"><Link to="/store/apps"><Icon type="appstore"/>Apps</Link></Menu.Item> <Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>
<Menu.Item key="2"><Link to="/store/apps"><Icon <Menu.Item key="ios"><Link to="/store/ios"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item>
type="line-chart"/>Apps</Link></Menu.Item> <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web Clips</Link></Menu.Item>
<Menu.Item key="3"><Link to="/store/apps/new-app"><Icon type="upload"/>Add New
App</Link></Menu.Item>
</Menu> </Menu>
</Header> </Header>
</Layout> </Layout>
<Layout> <Layout>
<Content style={{padding: '0 0'}}> <Content style={{padding: '0 0'}}>
<Switch> <Switch>
<Redirect exact from="/store" to="/store/apps"/> <Redirect exact from="/store" to="/store/android"/>
{this.state.routes.map((route) => ( {this.state.routes.map((route) => (
<RouteWithSubRoutes key={route.path} {...route} /> <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem} key={route.path} {...route} />
))} ))}
</Switch> </Switch>

@ -1,26 +1,6 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; import "antd/dist/antd.css";
import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
import AppList from "../../../components/apps/AppList"; import AppList from "../../../components/apps/AppList";
import ReleaseModal from "../../../components/apps/ReleaseModal";
const Search = Input.Search;
const routes = [
{
path: 'index',
breadcrumbName: 'store',
},
{
path: 'first',
breadcrumbName: 'Dashboard',
},
{
path: 'second',
breadcrumbName: 'Apps',
},
];
class Apps extends React.Component { class Apps extends React.Component {
routes; routes;
@ -30,25 +10,13 @@ class Apps extends React.Component {
} }
render() { render() {
const {deviceType} = this.props.match.params;
return ( return (
<div> <div>
<PageHeader
breadcrumb={{routes}}
/>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
<Row style={{padding:10}}> {deviceType!==null && <AppList changeSelectedMenuItem={this.props.changeSelectedMenuItem} deviceType={deviceType}/>}
<Col span={6} offset={18}>
<Search
placeholder="search"
onSearch={value => console.log(value)}
style={{ width: 200}}
/>
<Button style={{margin:5}}>Advanced Search</Button>
</Col>
</Row>
<ReleaseModal/>
<AppList/>
</div> </div>
</div> </div>

@ -1,73 +1,98 @@
import React from "react"; import React from "react";
import '../../../../App.css'; import '../../../../App.css';
import {Skeleton, Typography, Row, Col, Card} from "antd"; import {Skeleton, Typography, Row, Col, Card, message} from "antd";
import {connect} from "react-redux";
import ReleaseView from "../../../../components/apps/release/ReleaseView"; import ReleaseView from "../../../../components/apps/release/ReleaseView";
import {getRelease, setLoading} from "../../../../js/actions"; import axios from "axios";
import config from "../../../../../public/conf/config.json";
const {Title} = Typography; const {Title} = Typography;
const routes = [ class Release extends React.Component {
{
path: 'index',
breadcrumbName: 'store',
},
{
path: 'first',
breadcrumbName: 'Dashboard',
},
{
path: 'second',
breadcrumbName: 'Apps',
},
];
const mapStateToProps = state => {
return {
release: state.release,
releaseLoading: state.loadingState.release
}
};
const mapDispatchToProps = dispatch => ({
getRelease: (uuid) => dispatch(getRelease(uuid)),
setLoading: (stateToLoad) => dispatch(setLoading(stateToLoad))
});
class ConnectedRelease extends React.Component {
routes; routes;
constructor(props) { constructor(props) {
super(props); super(props);
this.routes = props.routes; this.routes = props.routes;
this.state={
loading: true,
app: null,
uuid: null
}
} }
componentDidMount() { componentDidMount() {
const {uuid} = this.props.match.params; const {uuid, deviceType} = this.props.match.params;
this.props.setLoading("release"); this.fetchData(uuid);
this.props.getRelease(uuid); this.props.changeSelectedMenuItem(deviceType);
} }
render() { componentDidUpdate(prevProps, prevState, snapshot) {
console.log(prevState);
if (prevState.uuid !== this.state.uuid) {
const {uuid,deviceType} = this.props.match.params;
this.fetchData(uuid);
this.props.changeSelectedMenuItem(deviceType);
}
}
fetchData = (uuid)=>{
const parameters = {
method: "get",
'content-type': "application/json",
payload: "{}",
'api-endpoint': "/application-mgt-store/v1.0/applications/" + uuid
};
//url-encode parameters
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
//send request to the invoker
axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
let app = res.data.data;
console.log(app);
this.setState({
app: app,
loading: false,
uuid: uuid
})
}
}).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
//todo display a popop with error
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({loading: false});
});
};
const release = this.props.release; render() {
const {app, loading} = this.state;
let content = <Title level={3}>No Releases Found</Title>; let content = <Title level={3}>No Releases Found</Title>;
if (release != null) { if (app != null && app.applicationReleases.length!==0) {
content = <ReleaseView release={release}/>; content = <ReleaseView app={app}/>;
} }
return ( return (
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}> <div style={{background: '#f0f2f5', minHeight: 780}}>
<Row style={{padding: 10}}> <Row style={{padding: 10}}>
<Col lg={4}> <Col lg={4}>
</Col> </Col>
<Col lg={16} md={24} style={{padding: 3}}> <Col lg={16} md={24} style={{padding: 3}}>
<Card> <Card>
<Skeleton loading={this.props.releaseLoading} avatar={{size: 'large'}} active paragraph={{rows: 8}}> <Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 8}}>
{content} {content}
</Skeleton> </Skeleton>
</Card> </Card>
@ -76,29 +101,8 @@ class ConnectedRelease extends React.Component {
</div> </div>
); );
// //todo remove uppercase
// return (
// <div>
// <div className="main-container">
// <Row style={{padding: 10}}>
// <Col lg={4}>
//
// </Col>
// <Col lg={16} md={24} style={{padding: 3}}>
// <Card>
// <ReleaseView release={release}/>
// </Card>
// </Col>
// </Row>
// </div>
// </div>
//
// );
} }
} }
const Release = connect(mapStateToProps, mapDispatchToProps)(ConnectedRelease);
export default Release; export default Release;

Loading…
Cancel
Save