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

Improve schedule install/ uninstall component's UI in APPM store

Browse Source
feature/appm-store/pbac
Jayasanka 5 years ago
parent b21de79151
commit 6d16259aaf
3 changed files with 87 additions and 93 deletions
Show Stats Download Patch File Download Diff File

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;

83
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,37 +96,50 @@ class ReleaseView extends React.Component {
}); });
}; };
showAppUninstallModal = () => { handleSubscribeClick = (e) => {
this.setState({ if (e.key === "install") {
appUninstallModalVisible: true this.setState({
}); 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">
<Row> <Row>
<Col xl={4} sm={6} xs={8} className="release-icon"> <Col xl={4} sm={6} xs={8} className="release-icon">
@ -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}/>

93
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,65 +34,52 @@ 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) {
}) this.props.operation(scheduledTime);
}; } else {
this.props.operation();
triggerInstallOperation = () =>{ }
this.props.operation();
};
triggerScheduledInstallOperation = () =>{
const {scheduledTime} =this.state;
this.props.operation(scheduledTime);
}; };
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' }}>
}}> <div style={{margin: 8}}>
<Button style={{margin: 5}} disabled={disabled} htmlType="button" type="primary" <Checkbox checked={this.state.isScheduledInstallVisible} onChange={this.toggleScheduledInstall}>
onClick={this.triggerInstallOperation}> Schedule {type}
{type} </Checkbox>
</Button> </div>
<Button style={{margin: 5}} disabled={disabled} htmlType="button" <span style={{
onClick={this.showScheduledInstall}> display: (isScheduledInstallVisible) ? 'inline' : 'none'
Scheduled {type} }}>
</Button> <DatePicker showTime
</div> placeholder="Select Time"
<div style={{ format="YYYY-MM-DDTHH:mm"
textAlign: "right", onChange={this.onDateTimeChange}/>
display: (isScheduledInstallVisible)?'block':'none' </span>
}}> <Button style={{margin: 5}}
<DatePicker showTime disabled={disabled || (isScheduledInstallVisible && scheduledTime == null)}
placeholder="Select Time" htmlType="button"
format="YYYY-MM-DDTHH:mm" type="primary"
onChange={this.onDateTimeChange}/> onClick={this.triggerInstallOperation}>
<Button disabled={scheduledTime == null} {type}
style={{margin: 5}} </Button>
htmlType="button" </div>
type="primary"
onClick={this.triggerScheduledInstallOperation}> </div>
Schedule
</Button>
<Button style={{margin: 5}} htmlType="button"
onClick={this.hideScheduledInstall}>
Cancel
</Button>
</div>
</div>
); );
} }
} }

Write Preview
Loading…
Cancel
Save