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

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

Browse Source 
Add UI improvements to APPM UI

See merge request entgra/carbon-device-mgt!303
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
parent c859ff9611 3c9d200770
commit d3077da65b
6 changed files with 151 additions and 115 deletions
Show Stats Download Patch File Download Diff File

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
Unescape View File

@ -13,7 +13,7 @@
"@ant-design/dark-theme": "^0.2.2", "@ant-design/dark-theme": "^0.2.2",
"@babel/polyfill": "^7.6.0", "@babel/polyfill": "^7.6.0",
"acorn": "^6.2.0", "acorn": "^6.2.0",
"antd": "^3.22.2", "antd": "^3.23.6",
"axios": "^0.19.0", "axios": "^0.19.0",
"d3": "^5.9.7", "d3": "^5.9.7",
"dagre": "^0.8.4", "dagre": "^0.8.4",

4
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js vendored
Unescape View File

@ -35,6 +35,10 @@ class ReleaseView extends React.Component {
} }
} }
componentDidMount() {
console.log("mounted: Release view");
}
render() { render() {
const {app, release} = this.props; const {app, release} = this.props;
const config = this.props.context; const config = this.props.context;

70
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js vendored
Unescape View File

@ -61,6 +61,8 @@ class NewAppUploadForm extends React.Component {
binaryFileHelperText: '', binaryFileHelperText: '',
iconHelperText: '', iconHelperText: '',
screenshotHelperText: '', screenshotHelperText: '',
osVersionsHelperText: '',
osVersionsValidateStatus: 'validating',
metaData: [] metaData: []
}; };
this.lowerOsVersion = null; this.lowerOsVersion = null;
@ -95,10 +97,6 @@ class NewAppUploadForm extends React.Component {
releaseType: releaseType releaseType: releaseType
}; };
if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") {
release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`;
}
if (specificElements.hasOwnProperty("version")) { if (specificElements.hasOwnProperty("version")) {
release.version = values.version; release.version = values.version;
} }
@ -110,20 +108,51 @@ class NewAppUploadForm extends React.Component {
} }
const data = new FormData(); const data = new FormData();
let isFormValid = true; // flag to check if this form is valid
if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") {
if(this.lowerOsVersion==null || this.upperOsVersion==null){
isFormValid = false;
this.setState({
osVersionsHelperText: 'Please select supported OS versions',
osVersionsValidateStatus: 'error',
});
}else if(this.lowerOsVersion>=this.upperOsVersion){
isFormValid = false;
this.setState({
osVersionsHelperText: 'Please select valid range',
osVersionsValidateStatus: 'error',
});
}else{
release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`;
}
}
if (specificElements.hasOwnProperty("binaryFile") && this.state.binaryFiles.length !== 1) { if (specificElements.hasOwnProperty("binaryFile") && this.state.binaryFiles.length !== 1) {
isFormValid = false;
this.setState({ this.setState({
binaryFileHelperText: 'Please select the application' binaryFileHelperText: 'Please select the application'
}); });
} else if (this.state.icons.length !== 1) { }
if (this.state.icons.length !== 1) {
isFormValid = false;
this.setState({ this.setState({
iconHelperText: 'Please select an icon' iconHelperText: 'Please select an icon'
}); });
} else if (this.state.screenshots.length !== 3) { }
if (this.state.screenshots.length !== 3) {
isFormValid = false;
this.setState({ this.setState({
screenshotHelperText: 'Please select 3 screenshots' screenshotHelperText: 'Please select 3 screenshots'
}); });
} else { }
if (this.state.screenshots.length !== 3) {
isFormValid = false;
this.setState({
screenshotHelperText: 'Please select 3 screenshots'
});
}
if(isFormValid) {
data.append('icon', icon[0].originFileObj); data.append('icon', icon[0].originFileObj);
data.append('screenshot1', screenshots[0].originFileObj); data.append('screenshot1', screenshots[0].originFileObj);
data.append('screenshot2', screenshots[1].originFileObj); data.append('screenshot2', screenshots[1].originFileObj);
@ -193,10 +222,18 @@ class NewAppUploadForm extends React.Component {
handleLowerOsVersionChange = (lowerOsVersion) => { handleLowerOsVersionChange = (lowerOsVersion) => {
this.lowerOsVersion = lowerOsVersion; this.lowerOsVersion = lowerOsVersion;
this.setState({
osVersionsValidateStatus: 'validating',
osVersionsHelperText: ''
});
}; };
handleUpperOsVersionChange = (upperOsVersion) => { handleUpperOsVersionChange = (upperOsVersion) => {
this.upperOsVersion = upperOsVersion; this.upperOsVersion = upperOsVersion;
this.setState({
osVersionsValidateStatus: 'validating',
osVersionsHelperText: ''
});
}; };
render() { render() {
@ -212,7 +249,9 @@ class NewAppUploadForm extends React.Component {
binaryFileHelperText, binaryFileHelperText,
iconHelperText, iconHelperText,
screenshotHelperText, screenshotHelperText,
metaData metaData,
osVersionsHelperText,
osVersionsValidateStatus
} = this.state; } = this.state;
const uploadButton = ( const uploadButton = (
<div> <div>
@ -361,7 +400,11 @@ class NewAppUploadForm extends React.Component {
</Form.Item> </Form.Item>
{(formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") && ( {(formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") && (
<Form.Item {...formItemLayout} label="Supported OS Versions"> <Form.Item
{...formItemLayout}
label="Supported OS Versions"
validateStatus={osVersionsValidateStatus}
help={osVersionsHelperText}>
{getFieldDecorator('supportedOS')( {getFieldDecorator('supportedOS')(
<div> <div>
<InputGroup> <InputGroup>
@ -436,7 +479,6 @@ class NewAppUploadForm extends React.Component {
required: true, required: true,
message: 'Please select' message: 'Please select'
}], }],
initialValue: false
})( })(
<Switch checkedChildren={<Icon type="check"/>} <Switch checkedChildren={<Icon type="check"/>}
unCheckedChildren={<Icon type="close"/>} unCheckedChildren={<Icon type="close"/>}
@ -444,13 +486,7 @@ class NewAppUploadForm extends React.Component {
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Meta Data"> <Form.Item {...formItemLayout} label="Meta Data">
{getFieldDecorator('meta', { {getFieldDecorator('meta', {})(
rules: [{
required: true,
message: 'Please fill empty fields'
}],
initialValue: false
})(
<div> <div>
{ {
metaData.map((data, index) => { metaData.map((data, index) => {

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

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Divider, Row, Col, Typography, Button, Rate, notification} from "antd"; import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon} from "antd";
import "../../../App.css"; import "../../../App.css";
import ImgViewer from "../../apps/release/images/ImgViewer"; import ImgViewer from "../../apps/release/images/ImgViewer";
import StarRatings from "react-star-ratings"; import StarRatings from "react-star-ratings";
@ -42,7 +42,7 @@ class ReleaseView extends React.Component {
} }
} }
appOperation = (type, payload, operation, timestamp=null) => { appOperation = (type, payload, operation, timestamp = null) => {
const config = this.props.context; const config = this.props.context;
const release = this.props.app.applicationReleases[0]; const release = this.props.app.applicationReleases[0];
const {uuid} = release; const {uuid} = release;
@ -50,9 +50,9 @@ class ReleaseView extends React.Component {
this.setState({ this.setState({
loading: true, loading: true,
}); });
let url = window.location.origin+ config.serverConfig.invoker.uri + let url = window.location.origin + config.serverConfig.invoker.uri +
config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/" + operation; config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/" + operation;
if(timestamp!= null){ if (timestamp != null) {
url += `?timestamp=${timestamp}`; url += `?timestamp=${timestamp}`;
} }
axios.post( axios.post(
@ -81,18 +81,11 @@ class ReleaseView extends React.Component {
message: "There was a problem", message: "There was a problem",
duration: 0, duration: 0,
description: description:
"Error occurred while "+operation+"ing app", "Error occurred while " + operation + "ing app",
}); });
} }
}).catch((error) => { }).catch((error) => {
handleApiError(error,"Error occurred while "+operation+"ing the app."); handleApiError(error, "Error occurred while " + operation + "ing the app.");
});
};
showAppInstallModal = () => {
this.setState({
appInstallModalVisible: true
}); });
}; };
@ -103,35 +96,48 @@ class ReleaseView extends React.Component {
}); });
}; };
showAppUninstallModal = () => { handleSubscribeClick = (e) => {
if (e.key === "install") {
this.setState({ this.setState({
appUninstallModalVisible: true appInstallModalVisible: true // display app install modal
}); })
} else if (e.key === "uninstall") {
this.setState({
appUninstallModalVisible: true // display app uninstall modal
})
}
}; };
render() { render() {
const {app,deviceType} = this.props; const {app, deviceType} = this.props;
const release = app.applicationReleases[0]; const release = app.applicationReleases[0];
let metaData = []; let metaData = [];
try{ try {
metaData = JSON.parse(release.metaData); metaData = JSON.parse(release.metaData);
}catch (e) { } catch (e) {
} }
const menu = (
<Menu onClick={this.handleSubscribeClick}>
<Menu.Item key="install">Install</Menu.Item>
<Menu.Item key="uninstall">Uninstall</Menu.Item>
</Menu>
);
return ( return (
<div> <div>
<AppInstallModal <AppInstallModal
uuid={release.uuid} uuid={release.uuid}
visible={this.state.appInstallModalVisible} visible={this.state.appInstallModalVisible}
deviceType = {deviceType} deviceType={deviceType}
onClose={this.closeAppOperationModal} onClose={this.closeAppOperationModal}
onInstall={this.appOperation}/> onInstall={this.appOperation}/>
<AppUninstallModal <AppUninstallModal
uuid={release.uuid} uuid={release.uuid}
visible={this.state.appUninstallModalVisible} visible={this.state.appUninstallModalVisible}
deviceType = {deviceType} deviceType={deviceType}
onClose={this.closeAppOperationModal} onClose={this.closeAppOperationModal}
onUninstall={this.appOperation}/> onUninstall={this.appOperation}/>
<div className="release"> <div className="release">
@ -152,17 +158,14 @@ class ReleaseView extends React.Component {
/> />
</Col> </Col>
<Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}> <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
<div> <div style={{
<Button.Group style={{float: "right"}}> textAlign: "right"
<Button onClick={this.showAppInstallModal} loading={this.state.loading} }}>
htmlType="button" type="primary" icon="download">Install</Button> <Dropdown overlay={menu}>
</Button.Group> <Button type="primary">
</div> Subscribe <Icon type="down"/>
<div> </Button>
<Button.Group style={{float: "right",marginRight:'3%'}}> </Dropdown>
<Button onClick={this.showAppUninstallModal} loading={this.state.loading}
htmlType="button" type="primary" icon="delete">UnInstall</Button>
</Button.Group>
</div> </div>
</Col> </Col>
</Row> </Row>
@ -178,16 +181,16 @@ class ReleaseView extends React.Component {
<Text>META DATA</Text> <Text>META DATA</Text>
<Row> <Row>
{ {
metaData.map((data, index)=>{ metaData.map((data, index) => {
return ( return (
<Col key={index} lg={8} md={6} xs={24} style={{marginTop:15}}> <Col key={index} lg={8} md={6} xs={24} style={{marginTop: 15}}>
<Text>{data.key}</Text><br/> <Text>{data.key}</Text><br/>
<Text type="secondary">{data.value}</Text> <Text type="secondary">{data.value}</Text>
</Col> </Col>
) )
}) })
} }
{(metaData.length===0) && (<Text type="secondary">No meta data available.</Text>)} {(metaData.length === 0) && (<Text type="secondary">No meta data available.</Text>)}
</Row> </Row>
<Divider/> <Divider/>
<CurrentUsersReview uuid={release.uuid}/> <CurrentUsersReview uuid={release.uuid}/>

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

@ -17,12 +17,12 @@
*/ */
import React from "react"; import React from "react";
import {Button, DatePicker} from "antd"; import {Button, DatePicker, Checkbox} from "antd";
class InstallModalFooter extends React.Component{ class InstallModalFooter extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={ this.state = {
scheduledTime: null, scheduledTime: null,
isScheduledInstallVisible: false isScheduledInstallVisible: false
} }
@ -34,64 +34,51 @@ class InstallModalFooter extends React.Component{
}); });
}; };
showScheduledInstall = ()=>{ toggleScheduledInstall = () => {
this.setState({ this.setState({
isScheduledInstallVisible: true isScheduledInstallVisible: !this.state.isScheduledInstallVisible
}) })
}; };
hideScheduledInstall = ()=>{ triggerInstallOperation = () => {
this.setState({ const {scheduledTime, isScheduledInstallVisible} = this.state;
isScheduledInstallVisible: false if (isScheduledInstallVisible && scheduledTime != null) {
})
};
triggerInstallOperation = () =>{
this.props.operation();
};
triggerScheduledInstallOperation = () =>{
const {scheduledTime} =this.state;
this.props.operation(scheduledTime); this.props.operation(scheduledTime);
} else {
this.props.operation();
}
}; };
render() { render() {
const {scheduledTime,isScheduledInstallVisible} =this.state; const {scheduledTime, isScheduledInstallVisible} = this.state;
const {disabled, type} = this.props; const {disabled, type} = this.props;
return ( return (
<div> <div>
<div style={{ <div style={{
textAlign: "right", textAlign: "right"
display: (!isScheduledInstallVisible)?'block':'none'
}}> }}>
<Button style={{margin: 5}} disabled={disabled} htmlType="button" type="primary" <div style={{margin: 8}}>
onClick={this.triggerInstallOperation}> <Checkbox checked={this.state.isScheduledInstallVisible} onChange={this.toggleScheduledInstall}>
{type} Schedule {type}
</Button> </Checkbox>
<Button style={{margin: 5}} disabled={disabled} htmlType="button"
onClick={this.showScheduledInstall}>
Scheduled {type}
</Button>
</div> </div>
<div style={{ <span style={{
textAlign: "right", display: (isScheduledInstallVisible) ? 'inline' : 'none'
display: (isScheduledInstallVisible)?'block':'none'
}}> }}>
<DatePicker showTime <DatePicker showTime
placeholder="Select Time" placeholder="Select Time"
format="YYYY-MM-DDTHH:mm" format="YYYY-MM-DDTHH:mm"
onChange={this.onDateTimeChange}/> onChange={this.onDateTimeChange}/>
<Button disabled={scheduledTime == null} </span>
style={{margin: 5}} <Button style={{margin: 5}}
disabled={disabled || (isScheduledInstallVisible && scheduledTime == null)}
htmlType="button" htmlType="button"
type="primary" type="primary"
onClick={this.triggerScheduledInstallOperation}> onClick={this.triggerInstallOperation}>
Schedule {type}
</Button>
<Button style={{margin: 5}} htmlType="button"
onClick={this.hideScheduledInstall}>
Cancel
</Button> </Button>
</div> </div>
</div> </div>
); );
} }

14
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js vendored
Unescape View File

@ -98,13 +98,18 @@ class NormalLoginForm extends React.Component {
const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&'); const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
axios.post(window.location.origin+ config.serverConfig.loginUri, request axios.post(window.location.origin + config.serverConfig.loginUri, request
).then(res => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
window.location = window.location.origin+ "/store"; let redirectUrl = window.location.origin + "/store";
const searchParams = new URLSearchParams(window.location.search);
if (searchParams.has("redirect")) {
redirectUrl = searchParams.get("redirect");
}
window.location = redirectUrl;
} }
}).catch(function (error) { }).catch(function (error) {
handleApiError(error,"Error occurred while trying to load groups."); handleApiError(error, "Error occurred while trying to load groups.");
if (error.hasOwnProperty("response") && error.response.status === 400) { if (error.hasOwnProperty("response") && error.response.status === 400) {
thisForm.setState({ thisForm.setState({
inValid: true, inValid: true,
@ -158,7 +163,8 @@ class NormalLoginForm extends React.Component {
)} )}
<br/> <br/>
<a className="login-form-forgot" href="">Forgot password</a> <a className="login-form-forgot" href="">Forgot password</a>
<Button loading={this.state.loading} block type="primary" htmlType="submit" className="login-form-button"> <Button loading={this.state.loading} block type="primary" htmlType="submit"
className="login-form-button">
Log in Log in
</Button> </Button>
</Form.Item> </Form.Item>

Write Preview
Loading…
Cancel
Save