From 951325ee75ff7d93ede759640b22345bb06d9e76 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Tue, 22 Oct 2019 16:08:09 +0530 Subject: [PATCH] Add ui improvements to APPM Publisher UI The following changes are with this commit - View subscription status of devices in release view - Display server error response in add new app form --- .../src/components/new-app/AddNewAppForm.js | 12 ++- .../apps/release/InstalledDevicesTable.js | 94 +++++++++++++------ .../components/apps/release/ReleaseView.js | 2 +- 3 files changed, 71 insertions(+), 37 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js index 6e731679e1..340d28aa93 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js @@ -54,7 +54,8 @@ class AddNewAppFormComponent extends React.Component { release: null, isError: false, deviceType: null, - supportedOsVersions: [] + supportedOsVersions: [], + errorText: "" }; } @@ -112,11 +113,12 @@ class AddNewAppFormComponent extends React.Component { } }).catch((error) => { - handleApiError(error, "Sorry, we were unable to complete your request.") + handleApiError(error, error.response.data.data); this.setState({ loading: false, isError: true, - current: 2 + current: 2, + errorText: error.response.data.data }); }); @@ -149,7 +151,7 @@ class AddNewAppFormComponent extends React.Component { }; render() { - const {loading, current, isError, supportedOsVersions} = this.state; + const {loading, current, isError, supportedOsVersions, errorText} = this.state; const {formConfig} = this.props; return (
@@ -190,7 +192,7 @@ class AddNewAppFormComponent extends React.Component { {isError && (Back} />)} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js index 6284808ef8..1b6642f3d4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js @@ -32,29 +32,72 @@ let config = null; const columns = [ { title: 'Device', - dataIndex: 'name', + dataIndex: 'device', width: 100, + render: device => device.name }, { title: 'Owner', - dataIndex: 'enrolmentInfo', + dataIndex: 'device', key: 'owner', - render: enrolmentInfo => enrolmentInfo.owner - // todo add filtering options + render: device => device.enrolmentInfo.owner }, { - title: 'Ownership', - dataIndex: 'enrolmentInfo', - key: 'ownership', - render: enrolmentInfo => enrolmentInfo.ownership - // todo add filtering options + title: 'Action Type', + dataIndex: 'actionType', + key: 'actionType', + render: actionType => actionType.toLowerCase() }, { - title: 'Status', - dataIndex: 'enrolmentInfo', - key: 'status', - render: (enrolmentInfo) => { - const status = enrolmentInfo.status.toLowerCase(); + title: 'Action', + dataIndex: 'action', + key: 'action', + render: action => action.toLowerCase() + }, + { + title: 'Triggered By', + dataIndex: 'actionTriggeredBy', + key: 'actionTriggeredBy' + }, + { + title: 'Action Triggered At', + dataIndex: 'actionTriggeredTimestamp', + key: 'actionTriggeredTimestamp' + }, + { + title: 'Action Status', + dataIndex: 'status', + key: 'actionStatus', + render: (status) => { + let color = "#f9ca24"; + switch (status) { + case "COMPLETED": + color = "#badc58"; + break; + case "REPEATED": + color = "#6ab04c"; + break; + case "ERROR": + case "INVALID": + case "UNAUTHORIZED": + color = "#ff7979"; + break; + case "IN_PROGRESS": + color = "#f9ca24"; + break; + case "PENDING": + color = "#636e72"; + break; + } + return {status.toLowerCase()}; + } + }, + { + title: 'Device Status', + dataIndex: 'device', + key: 'deviceStatus', + render: (device) => { + const status = device.enrolmentInfo.status.toLowerCase(); let color = "#f9ca24"; switch (status) { case "active": @@ -75,18 +118,6 @@ const columns = [ } return {status}; } - // todo add filtering options - }, - { - title: 'Last Updated', - dataIndex: 'enrolmentInfo', - key: 'dateOfLastUpdate', - render: (data) => { - const {dateOfLastUpdate} = data; - const timeAgoString = getTimeAgo(dateOfLastUpdate); - return {timeAgoString}; - } - // todo add filtering options } ]; @@ -135,14 +166,15 @@ class InstalledDevicesTable extends React.Component { //send request to the invoker axios.get( window.location.origin + config.serverConfig.invoker.uri + - config.serverConfig.invoker.deviceMgt + - "/devices?" + encodedExtraParams, + config.serverConfig.invoker.store + + `/admin/subscription/${this.props.uuid}?` + encodedExtraParams, ).then(res => { if (res.status === 200) { const pagination = {...this.state.pagination}; + console.log(res.data.data.data); this.setState({ loading: false, - data: res.data.data.devices, + data: res.data.data.data, pagination, }); } @@ -169,7 +201,7 @@ class InstalledDevicesTable extends React.Component { const {data, pagination, loading, selectedRows} = this.state; return (
-
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, @@ -179,7 +211,7 @@ class InstalledDevicesTable extends React.Component {
(record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)} + rowKey={record => (record.device.deviceIdentifier + record.device.enrolmentInfo.owner + record.device.enrolmentInfo.ownership)} dataSource={data} pagination={{ ...pagination, 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 a35ccb5e51..51ab619df2 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 @@ -208,7 +208,7 @@ class ReleaseView extends React.Component { - +