-
+
@@ -66,6 +57,4 @@ class ConnectedAppCard extends React.Component {
}
}
-const AppCard = connect(null, mapDispatchToProps)(ConnectedAppCard);
-
export default AppCard;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
index e41c30290ab..767843d7107 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
@@ -1,31 +1,88 @@
import React from "react";
import AppCard from "./AppCard";
-import {Col, Row} from "antd";
-import {connect} from "react-redux";
-import {getApps} from "../../js/actions";
+import {Col, message, Row} from "antd";
+import axios from "axios";
+import config from "../../../public/conf/config.json";
-// connecting state.apps with the component
-const mapStateToProps= state => {
- return {apps : state.apps}
-};
-
-
-class ConnectedAppList extends React.Component {
+class AppList extends React.Component {
constructor(props) {
super(props);
+ this.state = {
+ apps: [],
+ loading: false
+ }
}
+
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() {
+ const {apps} = this.state;
+
return (
- {this.props.apps.map(app => (
+ {apps.map(app => (
@@ -33,6 +90,4 @@ class ConnectedAppList extends React.Component {
}
}
-const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
-
export default AppList;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/ReleaseModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/ReleaseModal.js
deleted file mode 100644
index 2265aa6d3f9..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/ReleaseModal.js
+++ /dev/null
@@ -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 (
-
App Name
+ {app.name}
Version : {release.version}
@@ -17,12 +21,12 @@ class AppInstallModal extends React.Component{
onCancel={this.props.onClose}
footer={null}
>
-
+ {console.log("changed");}}>
- Device install
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
new file mode 100644
index 00000000000..c1c7a5f2e53
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
@@ -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 (
+
-
-
-
- );
- } else {
- return null;
- }
- }
-}
-
-const ReleaseModal = connect(mapStateToProps, null)(ConnectedReleaseModal);
-
-export default ReleaseModal;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
index b5dad1088c9..f8dc026b8e7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
@@ -1,31 +1,52 @@
import React from "react";
import {Row, Typography, Icon} from "antd";
import StarRatings from "react-star-ratings";
+import axios from "axios";
import "./DetailedRating.css";
-import {connect} from "react-redux";
-import {getDetailedRating} from "../../../js/actions";
+import config from "../../../../public/conf/config.json";
const { Text } = Typography;
-// connecting state. with the component
-const mapStateToProps= state => {
- return {detailedRating : state.detailedRating}
-};
+class DetailedRating extends React.Component{
-const mapDispatchToProps = dispatch => ({
- getDetailedRating: (uuid) => dispatch(getDetailedRating(uuid))
-});
+ constructor(props){
+ 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() {
- this.props.getDetailedRating(this.props.uuid);
- }
+ 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;
+ 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() {
- const detailedRating = this.props.detailedRating;
+ const detailedRating = this.state.detailedRating;
console.log(detailedRating);
@@ -96,6 +117,5 @@ class ConnectedDetailedRating extends React.Component{
}
}
-const DetailedRating = connect(mapStateToProps,mapDispatchToProps)(ConnectedDetailedRating);
export default DetailedRating;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
index d95377e1c9d..ea96028b805 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -89,7 +89,8 @@ class ReleaseView extends React.Component {
};
render() {
- const release = this.props.release;
+ const app = this.props.app;
+ const release = app.applicationReleases[0];
return (
Some contents...
-- (
-
+ 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.
+ 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}}
+ />
+