mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Api integration stage 2: Create and retrieve apps and platforms.
This commit is contained in:
Menaka Jayawardena
parent
a4e342ed08
commit
2b6f9a9e2c
@ -19,15 +19,19 @@
|
||||
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
<parent>
|
||||
<groupId>org.wso2.carbon.devicemgt</groupId>
|
||||
<artifactId>application-mgt</artifactId>
|
||||
<version>3.0.46-SNAPSHOT</version>
|
||||
</parent>
|
||||
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
<artifactId>org.wso2.carbon.device.application.mgt.publisher.ui</artifactId>
|
||||
<version>3.0.46-SNAPSHOT</version>
|
||||
<packaging>war</packaging>
|
||||
<name>WSO2 Carbon - Application Management Publisher UI</name>
|
||||
<description>WSO2 Carbon - Application Management Publisher UI React Application</description>
|
||||
<url>http://wso2.org</url>
|
||||
|
||||
<build>
|
||||
<plugins>
|
||||
|
||||
@ -56,16 +56,17 @@ class Base extends Component {
|
||||
super();
|
||||
this.state = {
|
||||
user: null
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
let user = AuthHandler.getUser();
|
||||
|
||||
if (user) {
|
||||
if (!AuthHandler.isTokenExpired()) {
|
||||
this.setState({user: user});
|
||||
} else {
|
||||
console.log("expired!");
|
||||
this.setState({user: null});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,7 +80,7 @@ class Base extends Component {
|
||||
console.log("Have User.");
|
||||
return (
|
||||
<div className="container">
|
||||
<BaseLayout>
|
||||
<BaseLayout user={this.state.user}>
|
||||
<Switch>
|
||||
<Redirect exact path={"/"} to={"/assets/apps"}/>
|
||||
<Route exact path={"/assets/apps"} component={ApplicationListing}/>
|
||||
|
||||
@ -36,8 +36,9 @@ class AuthHandler {
|
||||
* */
|
||||
static login(userName, password) {
|
||||
const headers = {"Content-type": "application/json"};
|
||||
let login_promise = Axios.post("https://localhost:9443/auth/application-mgt/v1.0/auth/login?userName=admin&password=admin",
|
||||
null, {headers: headers});
|
||||
let login_promise =
|
||||
Axios.post(Constants.userConstants.LOGIN_URL+"?userName=" + userName+ "&password=" + password,
|
||||
null, {headers: headers});
|
||||
|
||||
login_promise.then(response => {
|
||||
console.log(response);
|
||||
@ -51,6 +52,8 @@ class AuthHandler {
|
||||
const user = new User(userName, clientId, clientSecret, validityPeriod);
|
||||
console.log(user);
|
||||
user.setAuthToken(WSO2_IOT_TOKEN, validityPeriod);
|
||||
let expiresIn = Date.now() + (validityPeriod * 1000);
|
||||
localStorage.setItem("expiresIn", expiresIn);
|
||||
AuthHandler.setUser(user);
|
||||
}
|
||||
);
|
||||
@ -67,10 +70,24 @@ class AuthHandler {
|
||||
if (!user instanceof User) {
|
||||
throw "Invalid user object";
|
||||
}
|
||||
user.created = Date.now();
|
||||
localStorage.setItem(Constants.userConstants.WSO2_USER, JSON.stringify(user.toJson()));
|
||||
/* TODO: IMHO it's better to get this key (`wso2_user`) from configs */
|
||||
}
|
||||
|
||||
static unauthorizedErrorHandler(error_response) {
|
||||
if (error_response.status !== 401) { /* Skip unrelated response code to handle in unauthorizedErrorHandler*/
|
||||
throw error_response;
|
||||
/* re throwing the error since we don't handle it here and propagate to downstream error handlers in catch chain*/
|
||||
}
|
||||
let message = "The session has expired" + ".<br/> You will be redirect to the login page ...";
|
||||
if (true) {
|
||||
alert(message);
|
||||
} else {
|
||||
throw error_response;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the logged in user.
|
||||
* @return User: The logged in user object.
|
||||
@ -89,8 +106,27 @@ class AuthHandler {
|
||||
|
||||
}
|
||||
|
||||
logout() {
|
||||
static logout() {
|
||||
const user = AuthHandler.getUser();
|
||||
const clientId = user.getClientId();
|
||||
const clientSecret = user.getClientSecret();
|
||||
const token = user.getAuthToken();
|
||||
const headers = {"Content-type": "application/json"};
|
||||
|
||||
let login_promise = Axios.post(Constants.userConstants.LOGOUT_URL+"?token=" + token + "&clientId=" + clientId
|
||||
+ "&clientSecret=" + clientSecret,
|
||||
null, {headers: headers});
|
||||
login_promise.then(
|
||||
(response) => {
|
||||
Utils.delete_cookie(Constants.userConstants.PARTIAL_TOKEN);
|
||||
localStorage.removeItem(Constants.userConstants.WSO2_USER);
|
||||
window.location = "/";
|
||||
}
|
||||
).catch(
|
||||
(err) => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -98,9 +134,17 @@ class AuthHandler {
|
||||
* @return boolean: True if expired. False otherwise.
|
||||
* */
|
||||
static isTokenExpired() {
|
||||
const userData = AuthHandler.getUser().getAuthToken();
|
||||
return (Date.now() - userData._createdTime) > userData._expires;
|
||||
const expiresIn = localStorage.getItem("expiresIn");
|
||||
return (expiresIn < Date.now());
|
||||
}
|
||||
|
||||
static createAuthenticationHeaders(contentType) {
|
||||
return {
|
||||
"Authorization": "Bearer " + AuthHandler.getUser().getAuthToken(),
|
||||
"Content-Type": contentType,
|
||||
};
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default AuthHandler;
|
||||
|
||||
@ -33,7 +33,6 @@ export default class User {
|
||||
this._clientId = clientId;
|
||||
this._clientSecret = clientSecret;
|
||||
this._expires = validityPeriod;
|
||||
this._createdTime = Date.now();
|
||||
User._instance = this;
|
||||
}
|
||||
|
||||
@ -61,6 +60,14 @@ export default class User {
|
||||
return Utils.getCookie(Constants.userConstants.PARTIAL_TOKEN);
|
||||
}
|
||||
|
||||
getClientId() {
|
||||
return this._clientId;
|
||||
}
|
||||
|
||||
getClientSecret() {
|
||||
return this._clientSecret;
|
||||
}
|
||||
|
||||
/**
|
||||
* Store the JavaScript accessible access token segment in cookie storage
|
||||
* @param {String} newToken : Part of the access token which needs when accessing REST API
|
||||
@ -72,11 +79,11 @@ export default class User {
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param type
|
||||
*/
|
||||
checkPermission(type) {
|
||||
throw ("Not implemented!");
|
||||
* Get the user name of logged in user.
|
||||
* @return String: User name
|
||||
* */
|
||||
getUserName() {
|
||||
return this._userName;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -98,7 +105,6 @@ export default class User {
|
||||
* @returns {User} : An instance of User(this) class.
|
||||
*/
|
||||
static fromJson(userJson) {
|
||||
|
||||
const _user = new User(userJson.name);
|
||||
_user._clientId = userJson.clientId;
|
||||
_user._clientSecret = userJson.clientSecret;
|
||||
|
||||
@ -87,8 +87,6 @@ class PublisherUtils {
|
||||
static isEmptyObject(object) {
|
||||
return Object.keys(object).length === 0 && object.constructor === Object
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default PublisherUtils;
|
||||
|
||||
@ -27,7 +27,7 @@ import Helper from './helpers/appMgtApiHelpers';
|
||||
export default class Endpoint {
|
||||
|
||||
/* =================================================================
|
||||
* Application related apis
|
||||
* Application related apis
|
||||
* */
|
||||
|
||||
/**
|
||||
@ -38,37 +38,33 @@ export default class Endpoint {
|
||||
* From applicationData, the proper application object will be created and send it to the api.
|
||||
* */
|
||||
static createApplication(applicationData) {
|
||||
|
||||
let app = Helper.buildApplication(applicationData).application;
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.post(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload the image artifacts (banner, icon, screenshots) related to the application.
|
||||
* @param appId: The application uuid of the application which the images should be uploaded to.
|
||||
* */
|
||||
static uploadImageArtifacts(appId) {
|
||||
let user = AuthHandler.getUser();
|
||||
console.log(user.idToken);
|
||||
const headers = {
|
||||
"Authorization": 'Bearer ' + user.getAuthToken(),
|
||||
"Content-Type": "application/json",
|
||||
};
|
||||
|
||||
Axios.post(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers}).then(
|
||||
function (response) {
|
||||
console.log(response);
|
||||
}
|
||||
).catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
|
||||
return Axios.post(Constants.appManagerEndpoints.UPLOAD_IMAGES + appId, appId, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
* Method to handle application release process.
|
||||
* */
|
||||
static releaseApplication() {
|
||||
static releaseApplication(appId) {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Promote the current state of the application.
|
||||
* Promote the current life cycle state of the application.
|
||||
* @param appId: The uuid of the application which the state should be updated.
|
||||
* */
|
||||
static updateState(appId) {
|
||||
static updateLifeCycleState(appId) {
|
||||
|
||||
}
|
||||
|
||||
@ -76,7 +72,7 @@ export default class Endpoint {
|
||||
* Get the next possible state, which the application can be promoted to.
|
||||
* @param appId: The application uuid.
|
||||
*/
|
||||
static getNextState(appId) {
|
||||
static getNextLifeCycleState(appId) {
|
||||
|
||||
}
|
||||
|
||||
@ -85,7 +81,14 @@ export default class Endpoint {
|
||||
* @param applicationData: The modified application data.
|
||||
* */
|
||||
static editApplication(applicationData) {
|
||||
let app = Helper.buildApplication(applicationData).application;
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.put(Constants.appManagerEndpoints.CREATE_APP, app, {headers: headers});
|
||||
}
|
||||
|
||||
static editApplicationArtofacts(appId) {
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.put(Constants.appManagerEndpoints.CREATE_APP, appId, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -95,12 +98,7 @@ export default class Endpoint {
|
||||
static getApplications() {
|
||||
let user = AuthHandler.getUser();
|
||||
console.log("Get all applications", user.getAuthToken());
|
||||
const headers = {
|
||||
"Authorization": 'Bearer ' + user.getAuthToken(),
|
||||
'Accept': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
};
|
||||
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS, {headers: headers});
|
||||
}
|
||||
|
||||
@ -109,7 +107,10 @@ export default class Endpoint {
|
||||
* @param appId: The application Id.
|
||||
* */
|
||||
static getApplication(appId) {
|
||||
|
||||
let user = AuthHandler.getUser();
|
||||
console.log("Get Application",appId, user.getAuthToken());
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS + appId, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -123,11 +124,8 @@ export default class Endpoint {
|
||||
/*
|
||||
* End of Application management apis.
|
||||
* =================================================================
|
||||
* */
|
||||
|
||||
/*
|
||||
* =================================================================
|
||||
* Platform related apis
|
||||
* Platform related apis
|
||||
* */
|
||||
|
||||
/**
|
||||
@ -135,13 +133,7 @@ export default class Endpoint {
|
||||
* @param platformData: The platform data object.
|
||||
* */
|
||||
static createPlatform(platformData) {
|
||||
|
||||
const headers = {
|
||||
"Authorization": 'Bearer ' + AuthHandler.getUser().getAuthToken(),
|
||||
'Accept': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
};
|
||||
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then(
|
||||
function (response) {
|
||||
console.log(response);
|
||||
@ -149,14 +141,14 @@ export default class Endpoint {
|
||||
).catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available platforms
|
||||
* */
|
||||
static getPlatforms() {
|
||||
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.platformManagerEndpoints.GET_ENABLED_PLATFORMS, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -164,7 +156,8 @@ export default class Endpoint {
|
||||
* @param platformId: The identifier of the platform
|
||||
* */
|
||||
static getPlatform(platformId) {
|
||||
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.get(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -172,12 +165,12 @@ export default class Endpoint {
|
||||
* @param platformId: The id of the platform which is to be deleted.
|
||||
* */
|
||||
static deletePlatform(platformId) {
|
||||
|
||||
const headers = AuthHandler.createAuthenticationHeaders("application/json");
|
||||
return Axios.delete(Constants.platformManagerEndpoints.GET_PLATFORM + platformId, {headers: headers});
|
||||
}
|
||||
|
||||
/*
|
||||
* End of Platform management apis.
|
||||
* End of Platform management apis.
|
||||
* =================================================================
|
||||
* */
|
||||
|
||||
}
|
||||
|
||||
@ -39,13 +39,7 @@ export default class Helper {
|
||||
if (prop === 'banner' || prop === 'screenshots' || prop === 'icon') {
|
||||
images[prop] = tmpData[prop];
|
||||
} else if(prop === 'tags') {
|
||||
let tags = [];
|
||||
let tagsFromStep = tmpData[prop];
|
||||
for (let tag in tagsFromStep) {
|
||||
console.log(tag);
|
||||
tags.push(tagsFromStep[tag].value);
|
||||
}
|
||||
application[prop] = tags;
|
||||
application[prop] = Helper.stringifyTags(tmpData[prop]);
|
||||
} else {
|
||||
application[prop] = tmpData[prop];
|
||||
}
|
||||
@ -53,4 +47,15 @@ export default class Helper {
|
||||
}
|
||||
return {application, images};
|
||||
}
|
||||
|
||||
static stringifyTags(tags) {
|
||||
let tmpTags = [];
|
||||
for (let tag in tags) {
|
||||
console.log(tag);
|
||||
tmpTags.push(tags[tag].value);
|
||||
}
|
||||
|
||||
return tmpTags;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -16,30 +16,29 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
export default class Constants {
|
||||
|
||||
static scopes = 'perm:application:get perm:application:create perm:application:update perm:application-mgt:login' +
|
||||
' perm:application:delete perm:platform:add perm:platform:remove perm:roles:view perm:devices:view';
|
||||
|
||||
static TOKEN_ENDPOINT = '/token';
|
||||
static DYNAMIC_CLIENT_REGISTER_ENDPOINT = '/api-application-registration/register';
|
||||
|
||||
static appManagerEndpoints = {
|
||||
GET_ALL_APPS: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
|
||||
CREATE_APP: 'https://localhost:8243/api/application-mgt/v1.0/applications/1.0.0/',
|
||||
UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-image-artifacts/', //+appId
|
||||
UPLOAD_IMAGES: '/api/application-mgt/v1.0/applications/1.0.0/upload-artifacts/', //+appId
|
||||
};
|
||||
|
||||
static platformManagerEndpoints = {
|
||||
CREATE_PLATFORM: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0/'
|
||||
}
|
||||
CREATE_PLATFORM: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0',
|
||||
GET_ENABLED_PLATFORMS: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0?status=ENABLED',
|
||||
GET_PLATFORM: 'https://localhost:8243/api/application-mgt/v1.0/platforms/1.0.0/'
|
||||
};
|
||||
|
||||
static userConstants = {
|
||||
LOGIN_URL:"https://localhost:9443/auth/application-mgt/v1.0/auth/login",
|
||||
LOGOUT_URL: "https://localhost:9443/auth/application-mgt/v1.0/auth/logout",
|
||||
REFRESH_TOKEN_URL: "",
|
||||
WSO2_USER: 'wso2_user',
|
||||
PARTIAL_TOKEN: 'WSO2_IOT_TOKEN'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -39,12 +39,14 @@ class ApplicationCreate extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.scriptId = "application-create";
|
||||
this.setStepData.bind(this);
|
||||
this.removeStepData.bind(this);
|
||||
this.handleSubmit.bind(this);
|
||||
this.handleCancel.bind(this);
|
||||
this.handleYes.bind(this);
|
||||
this.handleNo.bind(this);
|
||||
this.setStepData = this.setStepData.bind(this);
|
||||
this.removeStepData = this.removeStepData.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleCancel = this.handleCancel.bind(this);
|
||||
this.handleYes = this.handleYes.bind(this);
|
||||
this.handleNo = this.handleNo.bind(this);
|
||||
this.handlePrev = this.handlePrev.bind(this);
|
||||
this.handleNext = this.handleNext.bind(this);
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
@ -80,8 +82,18 @@ class ApplicationCreate extends Component {
|
||||
* Handles form submit.
|
||||
* */
|
||||
handleSubmit() {
|
||||
console.log(this.state.stepData);
|
||||
Endpoint.createApplication(this.state.stepData);
|
||||
let stepData = this.state.stepData;
|
||||
let applicationCreationPromise = Endpoint.createApplication(stepData);
|
||||
applicationCreationPromise.then(response => {
|
||||
console.log(response);
|
||||
let uploadArtifactsPromise = Endpoint.uploadImageArtifacts(response.data.uuid);
|
||||
this.handleYes();
|
||||
}
|
||||
).catch(
|
||||
function (err) {
|
||||
console.log(err);
|
||||
}
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
@ -107,6 +119,8 @@ class ApplicationCreate extends Component {
|
||||
|
||||
/**
|
||||
* Saves form data in each step in to the state.
|
||||
* @param step: The step number of the step data.
|
||||
* @param data: The form data of the step.
|
||||
* */
|
||||
setStepData(step, data) {
|
||||
console.log(step, data, this.state.stepData);
|
||||
@ -153,25 +167,31 @@ class ApplicationCreate extends Component {
|
||||
getStepContent(stepIndex) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return <Step1
|
||||
handleNext={this.handleNext}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
/>;
|
||||
return (
|
||||
<Step1
|
||||
handleNext={this.handleNext}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return <Step2
|
||||
handleNext={this.handleNext}
|
||||
handlePrev={this.handlePrev}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
/>;
|
||||
return (
|
||||
<Step2
|
||||
handleNext={this.handleNext}
|
||||
handlePrev={this.handlePrev}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return <Step3
|
||||
handleFinish={this.handleNext}
|
||||
handlePrev={this.handlePrev}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
/>;
|
||||
return (
|
||||
<Step3
|
||||
handleFinish={this.handleNext}
|
||||
handlePrev={this.handlePrev}
|
||||
setData={this.setStepData}
|
||||
removeData={this.removeStepData}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <div/>;
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ import TextField from 'material-ui/TextField';
|
||||
import DataTable from '../UIComponents/DataTable';
|
||||
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||
import Theme from '../../theme';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
@ -35,51 +36,21 @@ import Theme from '../../theme';
|
||||
class ApplicationListing extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.searchApplications = this.searchApplications.bind(this);
|
||||
this.onRowClick = this.onRowClick.bind(this);
|
||||
this.setData = this.setData.bind(this);
|
||||
this.sortData = this.sortData.bind(this);
|
||||
this.compare = this.compare.bind(this);
|
||||
this.state = {
|
||||
data: [],
|
||||
searchedApplications: [],
|
||||
applications: [],
|
||||
asc: true
|
||||
};
|
||||
this.scriptId = "application-listing";
|
||||
}
|
||||
|
||||
data = [
|
||||
{
|
||||
id: Math.random(),
|
||||
applicationName: "Cne",
|
||||
platform: 'Android',
|
||||
category: "Public",
|
||||
status: "Created"
|
||||
},
|
||||
{
|
||||
id: Math.random(),
|
||||
applicationName: "Gone",
|
||||
platform: 'IOS',
|
||||
category: "Public",
|
||||
status: "Created"
|
||||
},
|
||||
{
|
||||
id: Math.random(),
|
||||
applicationName: "Ane",
|
||||
platform: 'Android',
|
||||
category: "Public",
|
||||
status: "Created"
|
||||
},
|
||||
{
|
||||
id: Math.random(),
|
||||
applicationName: "one",
|
||||
platform: 'Android',
|
||||
category: "Public",
|
||||
status: "Created"
|
||||
},
|
||||
{
|
||||
id: Math.random(),
|
||||
applicationName: "one",
|
||||
platform: 'Android',
|
||||
category: "Public",
|
||||
status: "Created"
|
||||
},
|
||||
];
|
||||
|
||||
data = [];
|
||||
//
|
||||
headers = [
|
||||
{
|
||||
data_id: "image",
|
||||
@ -92,7 +63,7 @@ class ApplicationListing extends Component {
|
||||
data_type: "string",
|
||||
sortable: true,
|
||||
label: "Application Name",
|
||||
sort: this.sortData.bind(this)
|
||||
sort: this.sortData
|
||||
},
|
||||
{
|
||||
data_id: "platform",
|
||||
@ -126,30 +97,99 @@ class ApplicationListing extends Component {
|
||||
|
||||
componentWillUnmount() {
|
||||
Theme.removeThemingScripts(this.scriptId);
|
||||
// this.setState({data: this.data});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let getApps = EndPoint.getApplications();
|
||||
getApps.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
let apps = this.setData(response.data.applications);
|
||||
console.log(apps);
|
||||
this.setState({searchedApplications: apps});
|
||||
// console.log(this.setState({data: response.data}), console.log(this.state));
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
});
|
||||
}
|
||||
|
||||
setData(applications) {
|
||||
// {
|
||||
// id: Math.random(),
|
||||
// applicationName: "one",
|
||||
// platform: 'Android',
|
||||
// category: "Public",
|
||||
// status: "Created"
|
||||
// }
|
||||
|
||||
//
|
||||
// "uuid":"f59ca462-7fa0-4cef-8536-96c17905e587",
|
||||
// "name":"sdkfsdkf",
|
||||
// "shortDescription":"shdkfhsd[f sfs;df dsf","description":"khsdkhfkjdss hfdsff\nsdf\ndsf",
|
||||
// "tags":["dsfds","f","dsfs"],
|
||||
// "platform":{
|
||||
// "name":"jdslkjfljs",
|
||||
// "description":"ljlksdjlfjdsljf",
|
||||
// "identifier":"sdjflsjdfjlkj",
|
||||
// "fileBased":false,
|
||||
// "shared":false,
|
||||
// "enabled":false,
|
||||
// "defaultTenantMapping":false
|
||||
// },
|
||||
//
|
||||
// "category":{
|
||||
// "id":1
|
||||
// },
|
||||
//
|
||||
// "createdAt":"Tue, 12 Sep 2017 18:53:54 IST",
|
||||
// "modifiedAt":"Tue, 12 Sep 2017 18:53:54 IST",
|
||||
// "currentLifecycle":{
|
||||
// "lifecycleState":{
|
||||
// "id":1,
|
||||
// "name":"CREATED",
|
||||
// "identifier":"CREATED",
|
||||
// "description":"Application creation initial state"
|
||||
// },
|
||||
//
|
||||
// "lifecycleStateModifiedAt":"Tue, 12 Sep 2017 18:53:54 IST",
|
||||
// "getLifecycleStateModifiedBy":"admin"},
|
||||
// "screenShotCount":0,
|
||||
// "user":{
|
||||
// "userName":"admin",
|
||||
// "tenantId":-1234
|
||||
// }
|
||||
// }
|
||||
|
||||
let apps = [];
|
||||
for (let app in applications) {
|
||||
let application = {};
|
||||
application.id = applications[app].uuid;
|
||||
application.applicationName = applications[app].name;
|
||||
application.platform = applications[app].platform.name;
|
||||
application.category = applications[app].category.id;
|
||||
application.status = applications[app].currentLifecycle.lifecycleState.name;
|
||||
apps.push(application);
|
||||
}
|
||||
|
||||
this.setState({searchedApplications: apps});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the search action.
|
||||
* When typing in the search bar, this method will be invoked.
|
||||
* @param event: The event triggered from typing in the search box.
|
||||
* @param searchText: The text that typed in the search box.
|
||||
* */
|
||||
searchApplications(event, word) {
|
||||
searchApplications(event, searchText) {
|
||||
let searchedData;
|
||||
if (word) {
|
||||
searchedData = this.data.filter((dataItem) => {
|
||||
return dataItem.applicationName.includes(word);
|
||||
if (searchText) {
|
||||
searchedData = this.state.applications.filter((dataItem) => {
|
||||
return dataItem.applicationName.includes(searchText);
|
||||
});
|
||||
} else {
|
||||
searchedData = this.data;
|
||||
searchedData = this.state.applications;
|
||||
}
|
||||
|
||||
this.setState({data: searchedData}, console.log("Searched data ", this.state.data));
|
||||
this.setState({searchedApplications: searchedData}, console.log("Searched data ", this.state.searchedApplications));
|
||||
}
|
||||
|
||||
/**
|
||||
@ -157,9 +197,10 @@ class ApplicationListing extends Component {
|
||||
* asc: true : sort in ascending order.
|
||||
* */
|
||||
sortData() {
|
||||
console.log(this.state);
|
||||
let isAsc = this.state.asc;
|
||||
let datas = isAsc ? this.data.sort(this.compare) : this.data.reverse();
|
||||
this.setState({data: datas, asc: !isAsc});
|
||||
let sortedData = isAsc ? this.state.searchedApplications.sort(this.compare) : this.data.reverse();
|
||||
this.setState({searchedApplications: sortedData, asc: !isAsc});
|
||||
}
|
||||
|
||||
compare(a, b) {
|
||||
@ -171,20 +212,27 @@ class ApplicationListing extends Component {
|
||||
}
|
||||
|
||||
onRowClick(id) {
|
||||
this.props.history.push("apps/" + id);
|
||||
EndPoint.getApplication(id).then(response => {
|
||||
console.log(response);
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
});
|
||||
// this.props.history.push("apps/" + id);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="middle applicationListingMiddle">
|
||||
<Card className="applicationListingCard">
|
||||
<TextField hintText="Search" className="applicationListingSearch"
|
||||
onChange={this.searchApplications.bind(this)}/>
|
||||
<TextField
|
||||
hintText="Search"
|
||||
className="applicationListingSearch"
|
||||
onChange={this.searchApplications}/>
|
||||
<CardTitle title="Applications" className="applicationListTitle"/>
|
||||
<DataTable
|
||||
headers={this.headers}
|
||||
data={this.state.data}
|
||||
handleRowClick={this.onRowClick.bind(this)}
|
||||
data={this.state.searchedApplications}
|
||||
handleRowClick={this.onRowClick}
|
||||
noDataMessage={{type: 'button', text: 'Create Application'}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
@ -22,6 +22,8 @@ import MenuItem from 'material-ui/MenuItem';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import Theme from '../../../theme';
|
||||
import Endpoint from "../../../api/endpoints";
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
|
||||
/**
|
||||
* The first step of the application creation wizard.
|
||||
@ -39,13 +41,15 @@ import Theme from '../../../theme';
|
||||
class Step1 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.platforms = [{identifier: 1}, {identifier: 2}, {identifier: 3}];
|
||||
this.stores = [{identifier: 5}, {identifier: 2}, {identifier: 3}];
|
||||
this.setPlatforms = this.setPlatforms.bind(this);
|
||||
this.platforms = [];
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
store: 1,
|
||||
platform: 0,
|
||||
platformSelectedIndex: 0,
|
||||
platform: "",
|
||||
platforms: [],
|
||||
stepData: [],
|
||||
title: "",
|
||||
titleError: ""
|
||||
@ -63,22 +67,40 @@ class Step1 extends Component {
|
||||
componentWillUnmount() {
|
||||
Theme.removeThemingScripts(this.scriptId);
|
||||
}
|
||||
componentDidMount() {
|
||||
//Get the list of available platforms and set to the state.
|
||||
Endpoint.getPlatforms().then(response => {
|
||||
console.log(response);
|
||||
this.setPlatforms(response.data);
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes the handleNext function in Create component.
|
||||
* Extract the platforms from the response data and populate the state.
|
||||
* @param platforms: The array returned as the response.
|
||||
* */
|
||||
handleNext() {
|
||||
this.props.handleNext();
|
||||
};
|
||||
setPlatforms(platforms) {
|
||||
let tmpPlatforms = [];
|
||||
for (let index in platforms) {
|
||||
let platform = {};
|
||||
platform = platforms[index];
|
||||
tmpPlatforms.push(platform);
|
||||
}
|
||||
this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].identifier})
|
||||
}
|
||||
|
||||
/**
|
||||
* Persist the current form data to the state.
|
||||
* */
|
||||
setStepData() {
|
||||
console.log(this.state.platforms);
|
||||
let step = {
|
||||
store: this.state.store,
|
||||
platform: this.platforms[this.state.platform]
|
||||
platform: this.state.platforms[this.state.platformSelectedIndex]
|
||||
};
|
||||
console.log(step);
|
||||
this.props.setData("step1", {step: step});
|
||||
}
|
||||
|
||||
@ -96,8 +118,8 @@ class Step1 extends Component {
|
||||
* Triggers when changing the Platform selection.
|
||||
* */
|
||||
onChangePlatform(event, index, value) {
|
||||
console.log(value);
|
||||
this.setState({platform: value});
|
||||
console.log(this.state.platforms[index]);
|
||||
this.setState({platform: this.state.platforms[index].identifier, platformSelectedIndex: index});
|
||||
};
|
||||
|
||||
/**
|
||||
@ -129,9 +151,17 @@ class Step1 extends Component {
|
||||
floatingLabelFixed={true}
|
||||
onChange={this.onChangePlatform.bind(this)}
|
||||
>
|
||||
<MenuItem value={0} primaryText="Android"/>
|
||||
<MenuItem value={1} primaryText="iOS"/>
|
||||
<MenuItem value={2} primaryText="Web"/>
|
||||
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
|
||||
return (
|
||||
<MenuItem
|
||||
key={Math.random()}
|
||||
value={platform.identifier}
|
||||
primaryText={platform.name}
|
||||
/>
|
||||
)
|
||||
}) : <div/>}
|
||||
|
||||
|
||||
</SelectField>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
@ -51,6 +51,10 @@ import Theme from '../../../theme';
|
||||
class Step3 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.handleToggle = this.handleToggle.bind(this);
|
||||
this.handlePrev = this.handlePrev.bind(this);
|
||||
this.handleToggle = this.handleToggle.bind(this);
|
||||
this.handleFinish = this.handleFinish.bind(this);
|
||||
this.state = {
|
||||
showForm: false,
|
||||
releaseChannel: 1,
|
||||
@ -100,7 +104,7 @@ class Step3 extends Component {
|
||||
<Toggle
|
||||
label="Release the Application"
|
||||
labelPosition="right"
|
||||
onToggle={this.handleToggle.bind(this)}
|
||||
onToggle={this.handleToggle}
|
||||
defaultToggled={this.state.showForm}
|
||||
/>
|
||||
{/*If toggle is true, the release form will be shown.*/}
|
||||
@ -127,13 +131,13 @@ class Step3 extends Component {
|
||||
<FlatButton
|
||||
label="< Back"
|
||||
disabled={false}
|
||||
onClick={this.handlePrev.bind(this)}
|
||||
className="applicationCreateFinish"/>
|
||||
|
||||
onClick={this.handlePrev}
|
||||
className="applicationCreateFinish"
|
||||
/>
|
||||
<RaisedButton
|
||||
label="Finish"
|
||||
primary={true}
|
||||
onClick={this.handleFinish.bind(this)}
|
||||
onClick={this.handleFinish}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,11 @@ import Badge from 'material-ui/Badge';
|
||||
import React, {Component} from 'react';
|
||||
import AppBar from 'material-ui/AppBar';
|
||||
import Drawer from 'material-ui/Drawer';
|
||||
import IconMenu from 'material-ui/IconMenu';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import {List, ListItem} from 'material-ui/List';
|
||||
import Apps from 'material-ui/svg-icons/navigation/apps';
|
||||
@ -48,6 +52,7 @@ class BaseLayout extends Component {
|
||||
user: 'Admin'
|
||||
};
|
||||
this.scriptId = "basic-layout";
|
||||
this.logout = this.logout.bind(this);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
@ -93,6 +98,10 @@ class BaseLayout extends Component {
|
||||
this.props.history.push(to);
|
||||
}
|
||||
|
||||
logout(event, index, value) {
|
||||
AuthHandler.logout();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
@ -110,11 +119,22 @@ class BaseLayout extends Component {
|
||||
<NotificationsIcon/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
<IconButton onClick={() => {
|
||||
console.log("Clicked")
|
||||
}}>
|
||||
<ActionAccountCircle/>
|
||||
</IconButton>
|
||||
<IconMenu
|
||||
iconButtonElement={<FlatButton
|
||||
icon={<ActionAccountCircle/>}
|
||||
label="sdfdsf"
|
||||
/>}
|
||||
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||
targetOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||
onChange={this.logout}
|
||||
>
|
||||
<MenuItem value={0} primaryText="Logout" />
|
||||
</IconMenu>
|
||||
{/*<FlatButton*/}
|
||||
{/*icon={<ActionAccountCircle/>}*/}
|
||||
{/*onClick={() => {console.log("Clicked")}}*/}
|
||||
{/*label={this.props.user.getUserName()}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -232,6 +232,7 @@ class PlatformCreate extends Component {
|
||||
platform.icon = this.state.icon;
|
||||
platform.enabled = this.state.enabled;
|
||||
platform.allTenants = this.state.allTenants;
|
||||
platform.defaultTenantMapping = true;
|
||||
|
||||
Endpoint.createPlatform(platform);
|
||||
|
||||
|
||||
@ -53,6 +53,7 @@ class DataTable extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleRowClick = this.handleRowClick.bind(this);
|
||||
this.state = {
|
||||
data: [],
|
||||
headers: [],
|
||||
@ -120,7 +121,7 @@ class DataTable extends Component {
|
||||
<DataTableRow
|
||||
key={dataItem.id}
|
||||
dataItem={dataItem}
|
||||
handleClick={this.handleRowClick.bind(this)}
|
||||
handleClick={this.handleRowClick}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
@ -30,6 +30,7 @@ class DataTableHeader extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.tableHeaderClick = this.tableHeaderClick.bind(this);
|
||||
this.scriptId = "data-table";
|
||||
}
|
||||
|
||||
@ -42,6 +43,7 @@ class DataTableHeader extends Component {
|
||||
|
||||
componentWillUnmount() {
|
||||
Theme.removeThemingScripts(this.scriptId);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -63,9 +65,9 @@ class DataTableHeader extends Component {
|
||||
headerCell =
|
||||
<FlatButton
|
||||
label={this.props.header.label}
|
||||
onClick={this.tableHeaderClick.bind(this)}
|
||||
onClick={this.tableHeaderClick}
|
||||
className="sortableHeaderCell"
|
||||
/>;
|
||||
/>
|
||||
} else {
|
||||
headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user