community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add ui improvements to APPM Publisher UI

Browse Source 
The following changes are with this commit
- View subscription status of devices in release view
- Display server error response in add new app form
This commit is contained in:
Jayasanka Weerasinghe 2019-10-24 15:37:29 +00:00 committed by Dharmakeerthi Lasantha
parent b6a2c3fb64
commit 9807a36098
4 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js vendored
View File

@ -30,7 +30,7 @@ import {
Spin, Spin,
message, message,
Icon, Icon,
Card Card, Badge
} from 'antd'; } from 'antd';
import DetailedRating from "../../detailed-rating/DetailedRating"; import DetailedRating from "../../detailed-rating/DetailedRating";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
@ -487,18 +487,14 @@ class AppDetailsDrawer extends React.Component {
)} )}
<Text strong={true}>Releases </Text> <Text strong={true}>Releases </Text>
{/*display add new release only if app type is enterprise*/}
<div className="releases-details"> <div className="releases-details">
{(app.type === "ENTERPRISE") && (
<Link to={`/publisher/apps/${app.deviceType}/${app.id}/add-release`}><Button
htmlType="button"
size="small">Add
new release</Button></Link>)}
<List <List
style={{paddingTop: 16}} style={{paddingTop: 16}}
grid={{gutter: 16, column: 2}} grid={{gutter: 16, column: 2}}
pagination={{
pageSize: 4, // number of releases per page
size: "small",
}}
dataSource={app.applicationReleases} dataSource={app.applicationReleases}
renderItem={release => ( renderItem={release => (
<div className="app-release-cards"> <div className="app-release-cards">
@ -507,7 +503,27 @@ class AppDetailsDrawer extends React.Component {
<Card className="release-card"> <Card className="release-card">
<Meta <Meta
avatar={ avatar={
<Avatar size="large" shape="square" src={release.iconPath}/> <div>
{(release.currentStatus === "PUBLISHED") ? (
<Badge
title="Published"
style={{
backgroundColor: '#52c41a',
borderRadius:"50%",
color:"white"
}}
count={
<Icon
type="check-circle"/>
}>
<Avatar size="large" shape="square"
src={release.iconPath}/>
</Badge>
) : (
<Avatar size="large" shape="square"
src={release.iconPath}/>
)}
</div>
} }
title={release.version} title={release.version}
description={ description={
@ -529,10 +545,27 @@ class AppDetailsDrawer extends React.Component {
</div> </div>
)} )}
/> />
</div> </div>
<Divider dashed={true}/> <Divider dashed={true}/>
{/*display add new release only if app type is enterprise*/}
{(app.type === "ENTERPRISE") && (
<div>
<div style={{paddingBottom: 16}}>
<Text>
Add new release for the application
</Text>
</div>
<Link to={`/publisher/apps/${app.deviceType}/${app.id}/add-release`}>
<Button
htmlType="button"
type="primary"
size="small">
Add
</Button>
</Link>
</div>)}
<Divider dashed={true}/>
<Text strong={true}>Description </Text> <Text strong={true}>Description </Text>
{!isDescriptionEditEnabled && ( {!isDescriptionEditEnabled && (

32
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js vendored
View File

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Avatar, Table, Tag, Icon, message, notification, Col} from "antd"; import {Avatar, Table, Tag, Icon, message, notification, Col, Badge} from "antd";
import axios from "axios"; import axios from "axios";
import pSBC from 'shade-blend-color'; import pSBC from 'shade-blend-color';
import "./AppsTable.css"; import "./AppsTable.css";
@ -47,7 +47,31 @@ const columns = [
</Avatar> </Avatar>
); );
} else { } else {
avatar = ( const {applicationReleases} = row;
let hasPublishedRelease = false;
for (let i = 0; i < applicationReleases.length; i++) {
if (applicationReleases[i].currentStatus === "PUBLISHED") {
hasPublishedRelease = true;
break;
}
}
avatar = (hasPublishedRelease) ? (
<Badge
title="Published"
style={{ backgroundColor: '#52c41a', borderRadius:"50%", color:"white"}}
count={
<Icon
type="check-circle"/>
}>
<Avatar shape="square" size="large"
style={{
borderRadius: "28%",
border: "1px solid #ddd"
}}
src={row.applicationReleases[0].iconPath}
/>
</Badge>
) : (
<Avatar shape="square" size="large" <Avatar shape="square" size="large"
style={{ style={{
marginRight: 20, marginRight: 20,
@ -56,13 +80,13 @@ const columns = [
}} }}
src={row.applicationReleases[0].iconPath} src={row.applicationReleases[0].iconPath}
/> />
) );
} }
return ( return (
<div> <div>
{avatar} {avatar}
{name} <span style={{marginLeft: 20}}>{name}</span>
</div>); </div>);
} }
}, },

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

@ -24,6 +24,7 @@ import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules. // Load locale-specific relative date/time formatting rules.
import en from 'javascript-time-ago/locale/en' import en from 'javascript-time-ago/locale/en'
import {withConfigContext} from "../../../context/ConfigContext"; import {withConfigContext} from "../../../context/ConfigContext";
import {handleApiError} from "../../../js/Utils";
const {Text} = Typography; const {Text} = Typography;
@ -180,19 +181,7 @@ class InstalledDevicesTable extends React.Component {
} }
}).catch((error) => { }).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) { handleApiError(error, "Something went wrong when trying to load subscription data.");
//todo display a popop with error
message.error('You are not logged in');
window.location.href = window.location.origin + '/entgra/login';
} else {
notification["error"]({
message: "There was a problem",
duration: 0,
description:
"Error occurred while trying to load devices.",
});
}
this.setState({loading: false}); this.setState({loading: false});
}); });
}; };
@ -203,10 +192,7 @@ class InstalledDevicesTable extends React.Component {
<div> <div>
<div style={{paddingBottom: 24}}> <div style={{paddingBottom: 24}}>
<Text> <Text>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque The following are the subscription details of the application in each respective device.
laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</Text> </Text>
</div> </div>
<Table <Table

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

@ -21,12 +21,9 @@ import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Ico
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";
import DetailedRating from "./DetailedRating";
import Reviews from "./review/Reviews";
import axios from "axios"; import axios from "axios";
import AppInstallModal from "./install/AppInstallModal"; import AppInstallModal from "./install/AppInstallModal";
import AppUninstallModal from "./install/AppUninstallModal"; import AppUninstallModal from "./install/AppUninstallModal";
import CurrentUsersReview from "./review/CurrentUsersReview";
import {withConfigContext} from "../../../context/ConfigContext"; import {withConfigContext} from "../../../context/ConfigContext";
import {handleApiError} from "../../../js/Utils"; import {handleApiError} from "../../../js/Utils";
import ReviewContainer from "./review/ReviewContainer"; import ReviewContainer from "./review/ReviewContainer";
@ -207,7 +204,7 @@ class ReleaseView extends React.Component {
<Divider/> <Divider/>
<ReviewContainer uuid={release.uuid}/> <ReviewContainer uuid={release.uuid}/>
</TabPane> </TabPane>
<TabPane tab="Installed devices" key="2"> <TabPane tab="Subscription Details" key="2">
<InstalledDevicesTable uuid={release.uuid}/> <InstalledDevicesTable uuid={release.uuid}/>
</TabPane> </TabPane>
</Tabs> </Tabs>