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

Add UI improvements to APPM UI

Browse Source 
The following changes are with this commit
- Fix wrong 401 redirection in Subscription details table
- Add pagination to releases list in App Details Drawer
- Show published badge on app icon in apps table and releases list
feature/appm-store/pbac
Jayasanka 5 years ago
parent e762d35a74
commit cd062f0788
4 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File

55
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js vendored
Unescape 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
Unescape 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
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save