Merge pull request #1026 from menakaj/application-mgt

Styling changes and error page.
feature/appm-store/pbac
Amal Gunatilake 7 years ago committed by GitHub
commit 1533f85daa

@ -316,10 +316,6 @@ body {
background-color: #E64A19; background-color: #E64A19;
} }
#app-main-content {
margin: 0 auto;
}
#sub-title-container { #sub-title-container {
height: 100px; height: 100px;
padding: 50px 0 20px 0; padding: 50px 0 20px 0;
@ -332,10 +328,9 @@ body {
} }
/* Holds the app publisher pages. */ /* Holds the app publisher pages. */
#application-content { .publisher-card {
height: auto; height: auto;
background-color: white; background-color: white;
width: 100%;
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 24px; padding: 24px;
} }
@ -368,7 +363,7 @@ body {
margin-right: 4px; margin-right: 4px;
} }
#application-list { .application-list {
transition: margin-right .5s; transition: margin-right .5s;
} }
@ -838,3 +833,23 @@ div.tab button.active {
.data-table-row-cell { .data-table-row-cell {
padding-top: 14px; padding-top: 14px;
} }
.error-code {
text-align: center;
font-family: Roboto-Medium;
font-weight: 800;
font-size: 15em;
color: #BaBaBa;
}
.error-code p {
}
.error-text {
text-align: center;
font-family: Roboto-Regular;
font-size: 14px;
font-weight: 500;
color: #9e9e9e;
}

@ -182,12 +182,11 @@ class ApplicationListing extends Component {
onRowClick(uuid) { onRowClick(uuid) {
let selectedApp = this.getSelectedApplication(uuid); let selectedApp = this.getSelectedApplication(uuid);
let style = { let style = {
width: '550px', width: '35%'
marginLeft: '550px'
}; };
let appListStyle = { let appListStyle = {
marginRight: '550px', marginRight: '35%',
}; };
this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]}); this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]});
@ -217,15 +216,18 @@ class ApplicationListing extends Component {
render() { render() {
//TODO: Move this to a data table component. //TODO: Move this to a data table component.
console.log(this.state.appListStyle);
return ( return (
<div id="application-list" style={this.state.appListStyle}> <div className="publisher-card application-list" style={this.state.appListStyle}>
<Row className="app-list-table-header"> <Row className="app-list-table-header">
{this.headers.map(header => { {this.headers.map(header => {
if (header.data_id === "applicationName") { if (header.data_id === "applicationName") {
return ( return (
<Col xs="5">{header.label}</Col>) <Col xs="4">{header.label}</Col>)
} else if (header.data_id === "image") { } else if (header.data_id === "image") {
return (<Col xs="1">{header.label}</Col>) return (<Col xs="1">{header.label}</Col>)
} else if (header.data_id === "edit") {
return <Col xs="1"></Col>
} }
return (<Col>{header.label}</Col>) return (<Col>{header.label}</Col>)
})} })}
@ -242,13 +244,13 @@ class ApplicationListing extends Component {
src={application.icon} src={application.icon}
/> />
</Col> </Col>
<Col xs="5" className="data-table-row-cell"><strong>{application.name}</strong></Col> <Col xs="4" className="data-table-row-cell"><strong>{application.name}</strong></Col>
<Col className="data-table-row-cell">{application.platform.name}</Col> <Col className="data-table-row-cell">{application.platform.name}</Col>
<Col className="data-table-row-cell">{application.category.name}</Col> <Col className="data-table-row-cell">{application.category.name}</Col>
<Col <Col
className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name} className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name}
</Col> </Col>
<Col> <Col xs="1">
<Button className="custom-flat grey rounded" <Button className="custom-flat grey rounded"
onClick={() => this.onAppEditClick(application.uuid)}> onClick={() => this.onAppEditClick(application.uuid)}>
<i className="fw fw-edit"></i> <i className="fw fw-edit"></i>

@ -21,6 +21,7 @@ import React, {Component} from 'react';
import GeneralInfo from "../GenenralInfo/GeneralInfo"; import GeneralInfo from "../GenenralInfo/GeneralInfo";
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager'; import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import ApplicationMgtApi from "../../../../api/applicationMgtApi";
class ApplicationEdit extends Component { class ApplicationEdit extends Component {
@ -28,6 +29,7 @@ class ApplicationEdit extends Component {
super(); super();
this.getTabContent = this.getTabContent.bind(this); this.getTabContent = this.getTabContent.bind(this);
this.state = { this.state = {
application: {},
general: "active", general: "active",
release: "", release: "",
pkgmgt: "", pkgmgt: "",
@ -35,6 +37,22 @@ class ApplicationEdit extends Component {
} }
} }
componentWillMount() {
let appId = window.location.pathname.split("/")[4];
let response = ApplicationMgtApi.getApplication(appId);
response.then(res => {
let data = res.data.applications;
let application = data.filter(app => {
return app.uuid === appId;
});
this.setState({application: application[0]});
})
}
handleTabClick(event) { handleTabClick(event) {
event.stopPropagation(); event.stopPropagation();
const key = event.target.value; const key = event.target.value;
@ -61,7 +79,10 @@ class ApplicationEdit extends Component {
getTabContent(tab) { getTabContent(tab) {
switch (tab) { switch (tab) {
case 1: { case 1: {
return <GeneralInfo/> {
console.log(this.state.application)
}
return <GeneralInfo application={this.state.application}/>
} }
case 2: { case 2: {
return <ReleaseManager/> return <ReleaseManager/>
@ -78,7 +99,7 @@ class ApplicationEdit extends Component {
render() { render() {
return ( return (
<div id="application-edit-base"> <div className="publisher-card">
<Row id="application-edit-header"> <Row id="application-edit-header">
<Col xs="3"> <Col xs="3">
<a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}> <a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}>
@ -86,7 +107,7 @@ class ApplicationEdit extends Component {
</a> </a>
</Col> </Col>
<Col> <Col>
<FormattedMessage id="Application.Name" defaultMessage="Application Name"/> {this.state.application.name}
</Col> </Col>
</Row> </Row>
<hr/> <hr/>

@ -16,6 +16,7 @@
* under the License. * under the License.
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Col, Row} from "reactstrap";
/** /**
* Error page. * Error page.
@ -28,8 +29,22 @@ class Error extends Component {
render() { render() {
return ( return (
<div> <div className="error-page">
404 not found <Row>
<Col>
<div className="error-code">
<p>404</p>
</div>
</Col>
</Row>
<Row>
<Col>
<div className="error-text">
<p>The page you are looking for doesn't exist or error occurred.</p>
<p>Please click <a href="/publisher">here</a> to go to App publisher home page.</p>
</div>
</Col>
</Row>
</div> </div>
); );
} }

@ -51,7 +51,7 @@ class PlatformListing extends Component {
render() { render() {
return ( return (
<div id="platform-listing"> <div className="publisher-card">
<Row> <Row>
<div className="create-platform"> <div className="create-platform">
<Button className="custom-flat grey" onClick={this.onPlatformCreateClick}> <Button className="custom-flat grey" onClick={this.onPlatformCreateClick}>

Loading…
Cancel
Save