Api integration stage 2: Create and retrieve apps and platforms.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml

@@ -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>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx

@@ -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}/>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js

@@ -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",
+        let login_promise =
-            null, {headers: headers});
+                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();
+        const expiresIn = localStorage.getItem("expiresIn");
-        return (Date.now() - userData._createdTime) > userData._expires;
+        return (expiresIn < Date.now());
     }
+
+    static createAuthenticationHeaders(contentType) {
+        return {
+            "Authorization": "Bearer " + AuthHandler.getUser().getAuthToken(),
+            "Content-Type": contentType,
+        };
+
+    };
 }
 
 export default AuthHandler;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/user.js

@@ -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 {
     }
 
     /**
-     *
+     * Get the user name of logged in user.
-     * @param type
+     * @return String: User name
-     */
+     * */
-    checkPermission(type) {
+    getUserName() {
-        throw ("Not implemented!");
+        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;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/data/utils.js

@@ -87,8 +87,6 @@ class PublisherUtils {
     static isEmptyObject(object) {
         return Object.keys(object).length === 0 && object.constructor === Object
     }
-
-
 }
 
 export default PublisherUtils;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/endpoints.js

@@ -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 = AuthHandler.createAuthenticationHeaders("multipart/form-data");
-        const headers = {
+        return Axios.post(Constants.appManagerEndpoints.UPLOAD_IMAGES + appId, appId, {headers: 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);
-        });
-
     }
 
     /**
      * 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 = {
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
-            "Authorization": 'Bearer ' + user.getAuthToken(),
-            'Accept': 'application/json',
-            "Content-Type": "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 = AuthHandler.createAuthenticationHeaders("application/json");
-        const headers = {
-            "Authorization": 'Bearer ' + AuthHandler.getUser().getAuthToken(),
-            'Accept': 'application/json',
-            "Content-Type": "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.
     * =================================================================
     * */
-
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js

@@ -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 = [];
+                    application[prop] = Helper.stringifyTags(tmpData[prop]);
-                    let tagsFromStep = tmpData[prop];
-                    for (let tag in tagsFromStep) {
-                        console.log(tag);
-                        tags.push(tagsFromStep[tag].value);
-                    }
-                    application[prop] = tags;
                 } 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;
+    }
+
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js

@@ -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'
     }
-
 }
-
-
-

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx

@@ -39,12 +39,14 @@ class ApplicationCreate extends Component {
     constructor() {
         super();
         this.scriptId = "application-create";
-        this.setStepData.bind(this);
+        this.setStepData = this.setStepData.bind(this);
-        this.removeStepData.bind(this);
+        this.removeStepData = this.removeStepData.bind(this);
-        this.handleSubmit.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
-        this.handleCancel.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
-        this.handleYes.bind(this);
+        this.handleYes = this.handleYes.bind(this);
-        this.handleNo.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);
+        let stepData = this.state.stepData;
-        Endpoint.createApplication(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
+                return (
-                    handleNext={this.handleNext}
+                    <Step1
-                    setData={this.setStepData}
+                        handleNext={this.handleNext}
-                    removeData={this.removeStepData}
+                        setData={this.setStepData}
-                />;
+                        removeData={this.removeStepData}
+                    />
+                );
             case 1:
-                return <Step2
+                return (
-                    handleNext={this.handleNext}
+                    <Step2
-                    handlePrev={this.handlePrev}
+                        handleNext={this.handleNext}
-                    setData={this.setStepData}
+                        handlePrev={this.handlePrev}
-                    removeData={this.removeStepData}
+                        setData={this.setStepData}
-                />;
+                        removeData={this.removeStepData}
+                    />
+                );
             case 2:
-                return <Step3
+                return (
-                    handleFinish={this.handleNext}
+                    <Step3
-                    handlePrev={this.handlePrev}
+                        handleFinish={this.handleNext}
-                    setData={this.setStepData}
+                        handlePrev={this.handlePrev}
-                    removeData={this.removeStepData}
+                        setData={this.setStepData}
-                />;
+                        removeData={this.removeStepData}
+                    />
+                );
             default:
                 return <div/>;
         }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx

@@ -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 = [
+    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"
-        },
-    ];
-
     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) {
+        if (searchText) {
-            searchedData = this.data.filter((dataItem) => {
+            searchedData = this.state.applications.filter((dataItem) => {
-                return dataItem.applicationName.includes(word);
+                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();
+        let sortedData = isAsc ? this.state.searchedApplications.sort(this.compare) : this.data.reverse();
-        this.setState({data: datas, asc: !isAsc});
+        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"
+                    <TextField
-                               onChange={this.searchApplications.bind(this)}/>
+                        hintText="Search"
+                        className="applicationListingSearch"
+                        onChange={this.searchApplications}/>
                     <CardTitle title="Applications" className="applicationListTitle"/>
                     <DataTable
                         headers={this.headers}
-                        data={this.state.data}
+                        data={this.state.searchedApplications}
-                        handleRowClick={this.onRowClick.bind(this)}
+                        handleRowClick={this.onRowClick}
                         noDataMessage={{type: 'button', text: 'Create Application'}}
                     />
                 </Card>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx

@@ -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.setPlatforms = this.setPlatforms.bind(this);
-        this.stores = [{identifier: 5}, {identifier: 2}, {identifier: 3}];
+        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() {
+    setPlatforms(platforms) {
-        this.props.handleNext();
+        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);
+        console.log(this.state.platforms[index]);
-        this.setState({platform: value});
+        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"/>
+                                {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
-                                <MenuItem value={1} primaryText="iOS"/>
+                                    return (
-                                <MenuItem value={2} primaryText="Web"/>
+                                        <MenuItem
+                                            key={Math.random()}
+                                            value={platform.identifier}
+                                            primaryText={platform.name}
+                                        />
+                                    )
+                                }) : <div/>}
+
+
                             </SelectField>
                         </div>
                         <br/>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx

@@ -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)}
+                            onClick={this.handlePrev}
-                            className="applicationCreateFinish"/>
+                            className="applicationCreateFinish"
-
+                        />
                         <RaisedButton
                             label="Finish"
                             primary={true}
-                            onClick={this.handleFinish.bind(this)}
+                            onClick={this.handleFinish}
                         />
 
                     </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx

@@ -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={() => {
+                            <IconMenu
-                                console.log("Clicked")
+                                iconButtonElement={<FlatButton
-                            }}>
+                                    icon={<ActionAccountCircle/>}
-                                <ActionAccountCircle/>
+                                    label="sdfdsf"
-                            </IconButton>
+                                />}
+                                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>
                     }
                 />

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx

@@ -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);
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx

@@ -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}
                             />
                         )
                     })}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx

@@ -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>;
         }