From 3227f3f6509a784f0427e4d94de72c20cad930bc Mon Sep 17 00:00:00 2001
From: Chatura Dilan <dilan@dilan.me>
Date: Fri, 4 Nov 2016 11:17:41 +0530
Subject: [PATCH] Chages to device view for Android

---
 .../device-view.hbs                           | 651 +++++++++++++-----
 .../device-view.js                            | 225 ++++--
 .../device-view.json                          |   3 +-
 3 files changed, 682 insertions(+), 197 deletions(-)

diff --git a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.hbs b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.hbs
index d607d38759..23f83fe475 100644
--- a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.hbs
+++ b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.hbs
@@ -1,174 +1,513 @@
-{{#zone "device-opetations"}}
-    <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
-        Operations
-    </div>
-    <div class="add-margin-top-4x">
-        {{unit "mdm.unit.device.operation-bar"}}
-    </div>
-{{/zone}}
-
-{{#zone "device-detail-properties"}}
-    <div class="media">
-        <div class="media-left col-xs-12 col-sm-2 col-md-2 col-lg-2">
-            <ul class="list-group" role="tablist">
-                <li class="active"><a class="list-group-item"
-                                      href="#device_details"
-                                      role="tab" data-toggle="tab"
-                                      aria-controls="device_details">Device
-                                                                     Details</a>
-                </li>
-                <li><a class="list-group-item" href="#policies"
-                       role="tab"
-                       data-toggle="tab" aria-controls="policies">Policies</a>
-                </li>
-                <li><a class="list-group-item" href="#policy_compliance"
-                       role="tab"
-                       data-toggle="tab" aria-controls="policy_compliance">Policy
-                                                                           Compliance</a>
-                </li>
-                <li><a class="list-group-item" href="#device_location"
-                       role="tab"
-                       data-toggle="tab" aria-controls="device_location">Device
-                                                                         Location</a>
-                </li>
+{{unit "mdm.unit.lib.leaflet"}}
+{{unit "cdmf.unit.lib.qrcode"}}
+{{unit "mdm.unit.device.qr-modal"}}
 
-                <li><a class="list-group-item" href="#installed_applications" role="tab"
-                       data-toggle="tab" aria-controls="installed_applications">Installed
-                                                                                Applications</a>
-                </li>
-                <li><a class="list-group-item" href="#event_log" role="tab"
-                       data-toggle="tab" aria-controls="event_log">Operations
-                                                                   Log</a></li>
-            </ul>
-        </div>
-        <div class="media-body add-padding-left-5x remove-padding-xs tab-content">
-            <div class="panel-group tab-content">
-
-                <div class="panel panel-default tab-pane active"
-                     id="device_details" role="tabpanel"
-                     aria-labelledby="device_details">
-                    {{unit "cdmf.unit.device.details" device=device}}
-                </div>
-                <div class="panel panel-default tab-pane" id="policies" role="tabpanel"
-                     aria-labelledby="policies">
-                    <div class="panel-heading">Policies</div>
-                    <div class="panel-body">
-                        <div id="policy-spinner" class="wr-advance-operations-init hidden">
-                            <br>
-
-                            <i class="fw fw-settings fw-spin fw-2x"></i>
-
-                            Loading Policies . . .
-                            <br>
-                            <br>
-                        </div>
-                        <div id="policy-list-container">
-                            <div class="panel-body">
-                                No policies found
-                            </div>
-                            <br class="c-both"/>
-                        </div>
+{{#zone "content"}}
+    {{#if deviceFound}}
+        {{#if isAuthorized}}
+            <h1 class="page-sub-title device-id device-select"
+                data-deviceid="{{deviceView.deviceIdentifier}}" data-type="{{deviceView.deviceType}}"
+                data-ownership="{{deviceView.ownership}}">
+                Device {{deviceView.name}}
+                {{#if deviceView.model}}
+                    <span class="lbl-device">
+                    ( {{deviceView.vendor}} {{deviceView.model}} )
+                </span>
+                {{/if}}
+            </h1>
+            <div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
+                <div class="media" id="device-owner" data-owner="{{deviceView.owner}}">
+                    <div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
+                        <div class="thumbnail icon"><i class="square-element text fw fw-mobile"></i></div>
                     </div>
-                    <a class="padding-left"
-                       href="{{@app.context}}/policy/add/{{device.type}}?deviceId={{device.deviceIdentifier}}">
-                                        <span class="fw-stack">
-                                            <i class="fw fw-ring fw-stack-2x"></i>
-                                            <i class="fw fw-policy fw-stack-1x"></i>
-                                        </span> Add device specific policy</a>
-                </div>
-                <div class="panel panel-default tab-pane" id="policy_compliance"
-                     role="tabpanel" aria-labelledby="policy_compliance">
-                    <div class="panel-heading">Policy Compliance <span><a
-                            href="#" id="refresh-policy"><i
-                            class="fw fw-refresh"></i></a></span></div>
-                    <div class="panel-body">
-                        <div id="policy-spinner"
-                             class="wr-advance-operations-init hidden">
-                            <br>
-
-                            <i class="fw fw-settings fw-spin fw-2x"></i>
-
-                            Loading Policy Compliance . . .
-                            <br>
-                            <br>
+                    <div class="media-body asset-desc add-padding-left-5x">
+                        <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Device
+                            Overview
                         </div>
-                        <div id="policy-list-container">
-                            <div class="panel-body">
-                                Not available yet
+                        {{#defineZone "device-detail-properties"}}
+                            <table class="table table-responsive table-striped" id="members">
+                                <tbody>
+                                {{#if deviceView.deviceIdentifier}}
+                                    <tr role="row" class="odd">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Device ID</td>
+                                        <td style="padding:10px 15px;">{{deviceView.deviceIdentifier}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.name}}
+                                    <tr role="row" class="even">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Name</td>
+                                        <td style="padding:10px 15px;">{{deviceView.name}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.vendor}}
+                                    {{#if deviceView.model}}
+                                        <tr role="row" class="odd">
+                                            <td class="sorting_1" style="padding:10px 15px; width: 15%;">Model</td>
+                                            <td style="padding:10px 15px;">{{deviceView.vendor}} {{deviceView.model}}</td>
+                                        </tr>
+                                    {{/if}}
+                                {{/if}}
+                                {{#if deviceView.status}}
+                                    <tr role="row" class="even">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Status</td>
+                                        <td style="padding:10px 15px;">
+                                            {{#equal deviceView.status "ACTIVE"}}<span><i
+                                                    class="fw fw-ok icon-success"></i>Active</span>{{/equal}}
+                                            {{#equal deviceView.status "INACTIVE"}}<span><i
+                                                    class="fw fw-warning icon-warning"></i>Inactive</span>{{/equal}}
+                                            {{#equal deviceView.status "BLOCKED"}}<span><i
+                                                    class="fw fw-remove icon-danger"></i>Blocked</span>{{/equal}}
+                                            {{#equal deviceView.status "REMOVED"}}<span><i
+                                                    class="fw fw-delete icon-danger"></i>Removed</span>{{/equal}}
+                                        </td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.owner}}
+                                    <tr role="row" class="odd">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Owner</td>
+                                        <td style="padding:10px 15px;">{{deviceView.owner}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.ownership}}
+                                    <tr role="row" class="even">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Ownership</td>
+                                        <td style="padding:10px 15px;">{{deviceView.ownership}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.imei}}
+                                    <tr role="row" class="even">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">IMEI</td>
+                                        <td style="padding:10px 15px;">{{deviceView.imei}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.udid}}
+                                    <tr role="row" class="odd">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">UDID</td>
+                                        <td style="padding:10px 15px;">{{deviceView.udid}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.osBuildDate}}
+                                    <tr role="row" class="even">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Firmware Build
+                                            Date
+                                        </td>
+                                        <td style="padding:10px 15px;">{{deviceView.osBuildDate}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.phoneNumber}}
+                                    <tr role="row" class="odd">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Phone Number</td>
+                                        <td style="padding:10px 15px;">{{deviceView.phoneNumber}}</td>
+                                    </tr>
+                                {{/if}}
+                                {{#if deviceView.lastUpdatedTime}}
+                                    <tr role="row" class="even">
+                                        <td class="sorting_1" style="padding:10px 15px; width: 15%;">Last Update</td>
+                                        <td style="padding:10px 15px;">{{deviceView.lastUpdatedTime}}</td>
+                                    </tr>
+                                {{/if}}
+                                </tbody>
+                            </table>
+                        {{/defineZone}}
+                        {{#if deviceView.isNotRemoved}}
+                            <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
+                                Operations
                             </div>
-                            <br class="c-both"/>
-                        </div>
+                            <div class="add-margin-top-4x">
+                                {{unit "cdmf.unit.device.type.android.operation-bar" deviceType=deviceView.deviceType ownership=deviceView.ownership}}
+                            </div>
+                        {{/if}}
                     </div>
                 </div>
-                <div class="panel panel-default tab-pane" id="device_location"
-                     role="tabpanel" aria-labelledby="device_location">
-                    <div class="panel-heading">Device Location</div>
-                    <div class="panel-body">
-                        <div id="device-location"
-                             data-lat="{{device.viewModel.location.latitude}}"
-                             data-long="{{device.viewModel.location.longitude}}"
-                             style="height:450px" class="panel-body">
-                        </div>
-                        <div id="map-error" class="panel-body">
-                            Not available yet
-                        </div>
-                        <br class="c-both"/>
+                <div class="media tab-responsive">
+                    <div class="media-left col-xs-1 col-sm-1 col-md-2 col-lg-2 hidden-xs">
+                        <ul class="list-group nav nav-pills nav-stacked" role="tablist">
+                            {{#if deviceView.isNotWindows}}
+                                <li role="presentation" class="list-group-item active">
+                                    <a href="#device_details_tab" role="tab" data-toggle="tab"
+                                       aria-controls="device_details_tab">
+                                        <i class="icon fw fw-mobile"></i><span class="hidden-sm">Device Details</span>
+                                    </a>
+                                </li>
+                            {{/if}}
+                            {{#if deviceView.isNotWindows}}
+                            <li role="presentation" class="list-group-item">
+                            {{else}}
+                            <li role="presentation" class="list-group-item active">
+                            {{/if}}
+                            <li role="presentation" class="list-group-item">
+                                <a href="#policy_compliance_tab" role="tab" data-toggle="tab"
+                                   aria-controls="policy_compliance_tab">
+                                    <i class="icon fw fw-policy"></i><span class="hidden-sm">Policy Compliance</span>
+                                </a>
+                            </li>
+                            {{#if deviceView.isNotWindows}}
+                                <li role="presentation" class="list-group-item">
+                                    <a href="#device_location_tab" role="tab" data-toggle="tab"
+                                       data-lat="{{deviceView.location.latitude}}"
+                                       data-long="{{deviceView.location.longitude}}"
+                                       aria-controls="device_location_tab">
+                                        <i class="icon fw fw-map-location"></i><span
+                                            class="hidden-sm">Device Location</span>
+                                    </a>
+                                </li>
+                                <li role="presentation" class="list-group-item">
+                                    <a href="#installed_applications_tab" role="tab" data-toggle="tab"
+                                       aria-controls="installed_applications_tab">
+                                        <i class="icon fw fw-application"></i><span class="hidden-sm">Installed Applications</span>
+                                    </a>
+                                </li>
+                            {{/if}}
+                            {{#if deviceView.isNotRemoved}}
+                                <li role="presentation" class="list-group-item">
+                                    <a href="#event_log_tab" role="tab" data-toggle="tab" aria-controls="event_log_tab">
+                                        <i class="icon fw fw-text"></i><span class="hidden-sm">Operations Log</span>
+                                    </a>
+                                </li>
+                            {{/if}}
+                        </ul>
                     </div>
-                </div>
-                <div class="panel panel-default tab-pane" id="installed_applications"
-                     role="tabpanel" aria-labelledby="installed_applications">
-                    <div class="panel-heading">Installed Applications <span><a href="#"
-                                                                               id="refresh-apps"><i
-                            class="fw fw-refresh"></i></a></span></div>
-                    <div class="panel-body">
-                        <div id="apps-spinner" class="wr-advance-operations-init hidden">
-                            <br>
+                    {{#defineZone "device-detail-properties"}}
+                        <div class="media-body add-padding-left-5x remove-padding-xs">
+                            <div class="panel-group tab-content remove-padding" id="tabs" role="tablist"
+                                 data-status="{{deviceView.isNotRemoved}}" aria-multiselectable="true">
+                                <div class="arrow-left hidden-xs"></div>
 
-                            <i class="fw fw-settings fw-spin fw-2x"></i>
+                                {{#if deviceView.isNotWindows}}
+                                    <div class="panel panel-default" role="tabpanel" id="device_details_tab">
+                                        <div class="panel-heading visible-xs collapsed" id="device_details">
+                                            <h4 class="panel-title">
+                                                <a role="button" data-toggle="collapse" data-parent="#tabs"
+                                                   href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                                    <i class="fw fw-mobile fw-2x"></i>
+                                                    Device Details
+                                                    <i class="caret-updown fw fw-down"></i>
+                                                </a>
+                                            </h4>
+                                        </div>
+                                        <div class="panel-heading display-none-xs">Device Details</div>
+                                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
+                                             aria-labelledby="device_details">
+                                            <div class="panel-body ">
+                                                <div class="device-detail-body">
+                                                    <!-- device summary -->
+                                                    {{#equal deviceView.deviceType "windows"}}
+                                                        <div class="message message-info">
+                                                            <h4 class="remove-margin"><i class="icon fw fw-info"></i>Not
+                                                                available yet</h4>
+                                                        </div>
+                                                    {{/equal}}
+                                                    {{#if deviceView.deviceInfoAvailable}}
+                                                        {{#if deviceView.BatteryLevel}}
+                                                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+                                                                <div class="col-md-12">
+                                                                    <div class="wr-stats-board-tile">
+                                                                        <div class="tile-name">BATTERY</div>
+                                                                        <div>
+                                                                            <div class="tile-icon"><i
+                                                                                    class="fw fw-battery"></i></div>
+                                                                            <div class="tile-stats">
+                                                                                {{deviceView.BatteryLevel.value}} %
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        {{/if}}
+                                                            <!--{{#if deviceView.cpuUsage}}-->
+                                                        <!--<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">-->
+                                                        <!--<div class="col-md-12">-->
+                                                        <!--<div class="wr-stats-board-tile">-->
+                                                        <!--<div class="tile-name">CPU Usage</div>-->
+                                                        <!--<div>-->
+                                                        <!--<div class="tile-icon"><i class="fw fw-dashboard"></i></div>-->
+                                                        <!--<div class="tile-stats">-->
+                                                        <!--{{deviceView.cpuUsage.value}} %-->
+                                                        <!--</div>-->
+                                                        <!--</div>-->
+                                                        <!--</div>-->
+                                                        <!--</div>-->
+                                                        <!--</div>-->
+                                                            <!--{{/if}}-->
+                                                        {{#if deviceView.ramUsage}}
+                                                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+                                                                <div class="col-md-12">
+                                                                    <div class="wr-stats-board-tile">
+                                                                        <div class="tile-name">RAM Usage</div>
+                                                                        <div>
+                                                                            <div class="tile-icon"><i
+                                                                                    class="fw fw-hardware"></i></div>
+                                                                            <div class="tile-stats">
+                                                                                {{deviceView.ramUsage.value}} %
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        {{/if}}
+                                                        {{#if deviceView.internalMemory}}
+                                                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+                                                                <div class="col-md-12">
+                                                                    <div class="wr-stats-board-tile">
+                                                                        <div class="tile-name">Local Storage</div>
+                                                                        <div>
+                                                                            <div class="tile-icon"><i
+                                                                                    class="fw fw-hdd"></i>
+                                                                            </div>
+                                                                            <div class="tile-stats">
+                                                                                {{deviceView.internalMemory.usage}} %
+                                                                                <span class="tile-stats-free">
+                                                            TOTAL OF {{deviceView.internalMemory.total}} GB
+                                                        </span>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        {{/if}}
+                                                        {{#if deviceView.externalMemory}}
+                                                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+                                                                <div class="col-md-12">
+                                                                    <div class="wr-stats-board-tile">
+                                                                        <div class="tile-name">External Storage</div>
+                                                                        <div>
+                                                                            <div class="tile-icon"><i
+                                                                                    class="fw fw-usb-drive"></i></div>
+                                                                            <div class="tile-stats">
+                                                                                {{deviceView.externalMemory.usage}} %
+                                                                                <span class="tile-stats-free">
+                                                            TOTAL OF {{deviceView.externalMemory.total}} GB
+                                                        </span>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        {{/if}}
+                                                    {{else}}
+                                                        <div class="message message-info">
+                                                            <h4 class="remove-margin">
+                                                                <i class="icon fw fw-info"></i>
+                                                                Battery, RAM and Storage related information are not
+                                                                available yet.
+                                                            </h4>
+                                                        </div>
+                                                    {{/if}}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {{/if}}
 
-                            Loading App List . . .
-                            <br>
-                            <br>
-                        </div>
-                        <div id="applications-list-container">
-                            <div class="panel-body">
-                                Not available yet
-                            </div>
-                            <br class="c-both"/>
-                        </div>
-                    </div>
-                </div>
-                <div class="panel panel-default tab-pane" id="event_log"
-                     role="tabpanel" aria-labelledby="event_log">
-                    <div class="panel-heading">Operations Log <span><a href="#"
-                                                                       id="refresh-operations"><i
-                            class="fw fw-refresh"></i></a></span></div>
-                    <div class="panel-body">
-                        <div id="operations-spinner"
-                             class="wr-advance-operations-init hidden">
-                            <br>
+                                <div class="panel panel-default visible-xs-block" role="tabpanel"
+                                     id="policy_compliance_tab">
+                                    <div class="panel-heading visible-xs collapsed" id="policy_compliance">
+                                        <h4 class="panel-title">
+                                            <a role="button"
+                                               data-toggle="collapse" data-parent="#tabs" href="#collapseTwo"
+                                               aria-expanded="true" aria-controls="collapseTwo">
+                                                <i class="fw fw-policy fw-2x"></i>
+                                                Policy Compliance
+                                                <i class="caret-updown fw fw-down"></i>
+                                            </a>
+                                        </h4>
+                                    </div>
+                                    <div class="panel-heading display-none-xs">
+                                        Policy Compliance
 
-                            <i class="fw fw-settings fw-spin fw-2x"></i>
+                                        <span>
+                            <a href="javascript:void(0);" id="refresh-policy">
+                                <i class="fw fw-refresh"></i>
+                            </a>
+                        </span>
+                                    </div>
+                                    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel"
+                                         aria-labelledby="policy_compliance">
+                                        <div class="panel-body ">
+                            <span class="visible-xs add-padding-2x text-right">
+                                <a href="javascript:void(0);" id="refresh-policy">
+                                    <i class="fw fw-refresh"></i>
+                                </a>
+                            </span>
+                                            <div id="policy-spinner"
+                                                 class="wr-advance-operations-init add-padding-bottom-2x add-padding-bottom-4x hidden">
+                                                <i class="fw fw-settings fw-spin fw-2x"></i>Loading Policy
+                                                Compliance...
+                                            </div>
+                                            <div id="policy-list-container">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="panel panel-default visible-xs-block" role="tabpanel"
+                                     id="device_location_tab">
+                                    <div class="panel-heading visible-xs collapsed" id="device_location">
+                                        <h4 class="panel-title">
+                                            <a role="button" data-toggle="collapse" data-parent="#tabs"
+                                               href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
+                                                <i class="fw fw-map-location fw-2x"></i>
+                                                Device Location
+                                                <i class="caret-updown fw fw-down"></i>
+                                            </a>
+                                        </h4>
+                                    </div>
+                                    <div class="panel-heading display-none-xs">Device Location</div>
+                                    <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel"
+                                         aria-labelledby="device_location">
+                                        <div class="panel-body">
+                                            {{#if deviceView.location}}
+                                                <div id="device-location"
+                                                     data-lat="{{deviceView.location.latitude}}"
+                                                     data-long="{{deviceView.location.longitude}}">
+                                                </div>
+                                            {{else}}
+                                                <div id="map-error" class="message message-warning">
+                                                    <h4 class="remove-margin">
+                                                        <i class="icon fw fw-warning"></i>
+                                                        Device location information is not available.
+                                                    </h4>
+                                                </div>
+                                                <p class="add-padding-5x"></p>
+                                                <p class="add-padding-5x"></p>
+                                                <p class="add-padding-5x"></p>
+                                            {{/if}}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="panel panel-default visible-xs-block" role="tabpanel"
+                                     id="installed_applications_tab">
+                                    <div class="panel-heading visible-xs collapsed" id="installed_applications">
+                                        <h4 class="panel-title">
+                                            <a role="button" data-toggle="collapse" data-parent="#tabs"
+                                               href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
+                                                <i class="fw fw-application fw-2x"></i>
+                                                Installed Applications
+                                                <i class="caret-updown fw fw-down"></i>
+                                            </a>
+                                        </h4>
+                                    </div>
+                                    <div class="panel-heading display-none-xs">
+                                        Installed Applications
 
-                            Loading Operations Log . . .
-                            <br>
-                            <br>
-                        </div>
-                        <div id="operations-log-container">
-                            <div class="panel-body">
-                                Not available yet
+                                        <span>
+                            <a href="javascript:void(0);" id="refresh-apps">
+                                <i class="fw fw-refresh"></i>
+                            </a>
+                        </span>
+                                    </div>
+                                    <div id="collapseFour" class="panel-collapse collapse in" role="tabpanel"
+                                         aria-labelledby="installed_applications">
+                                        <div class="panel-body">
+                            <span class="visible-xs add-padding-2x text-right">
+                                <a href="javascript:void(0);" id="refresh-apps">
+                                    <i class="fw fw-refresh"></i>
+                                </a>
+                            </span>
+                                            <div id="apps-spinner" class="wr-advance-operations-init hidden">
+                                                <i class="fw fw-settings fw-spin fw-2x"></i> Loading Applications
+                                                List...
+                                            </div>
+                                            <div id="applications-list-container">
+                                                <div class="message message-info">
+                                                    <h4>
+                                                        <i class="icon fw fw-info"></i>
+                                                        No applications found.
+                                                    </h4>
+                                                    <p>Please try refreshing in a while.</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="panel panel-default visible-xs-block" role="tabpanel" id="event_log_tab">
+                                    <div class="panel-heading visible-xs collapsed" id="event_log">
+                                        <h4 class="panel-title">
+                                            <a role="button" data-toggle="collapse" data-parent="#tabs"
+                                               href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
+                                                <i class="fw fw-text fw-2x"></i>
+                                                Operations Log
+                                                <i class="caret-updown fw fw-down"></i>
+                                            </a>
+                                        </h4>
+                                    </div>
+                                    <div class="panel-heading display-none-xs">
+                                        Operations Log
+                                        <span>
+                            <a href="javascript:void(0);" id="refresh-operations">
+                                <i class="fw fw-refresh"></i>
+                            </a>
+                        </span>
+                                    </div>
+                                    <div id="collapseFive" class="panel-collapse collapse in" role="tabpanel"
+                                         aria-labelledby="event_log">
+                                        <div class="panel-body">
+                                            <span class="visible-xs add-padding-2x text-right">
+                                                <a href="javascript:void(0);" id="refresh-operations">
+                                                    <i class="fw fw-refresh"></i>
+                                                </a>
+                                            </span>
+                                            <div id="operations-spinner" class="wr-advance-operations-init hidden">
+                                                <i class="fw fw-settings fw-spin fw-2x"></i> Loading Operations Log...
+                                            </div>
+                                            <div id="operations-log-container">
+                                                <div class="message message-info">
+                                                    <h4 class="remove-margin">
+                                                        <i class="icon fw fw-info"></i>
+                                                        There are no operations, performed yet on this device.
+                                                    </h4>
+                                                </div>
+                                            </div>
+                                            <table class="table table-striped table-hover table-bordered display data-table"
+                                                   id="operations-log-table">
+                                                <thead>
+                                                <tr class="sort-row">
+                                                    <th>Operation Code</th>
+                                                    <th>Status</th>
+                                                    <th>Request created at</th>
+                                                </tr>
+                                                </thead>
+                                                <tbody>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <br class="c-both"/>
                         </div>
-                    </div>
+                    {{/defineZone}}
                 </div>
             </div>
-        </div>
-    </div>
+        {{else}}
+            <h1 class="page-sub-title">
+                Permission Denied
+            </h1>
+            <br>
+            You are not authorized to view specified device in the system.
+        {{/if}}
+    {{else}}
+        <h1 class="page-sub-title">
+            Device not found
+        </h1>
+        <br>
+        You have tried to access either a removed or non-existing device.
+    {{/if}}
 {{/zone}}
-
 {{#zone "bottomJs"}}
-    {{js "js/device-detail.js"}}
-    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
-    {{js "js/load-map.js"}}
+    {{#if isAuthorized}}
+        <!--suppress HtmlUnknownTarget -->
+        <script id="policy-view" src="{{@unit.publicUri}}/templates/policy-compliance.hbs"
+                data-device-id="{{deviceView.deviceIdentifier}}" data-device-type="{{deviceView.deviceType}}"
+                type="text/x-handlebars-template"></script>
+        <!--suppress HtmlUnknownTarget -->
+        <script id="applications-list" src="{{@unit.publicUri}}/templates/applications-list.hbs"
+                data-device-id="{{deviceView.deviceIdentifier}}" data-device-type="{{deviceView.deviceType}}"
+                type="text/x-handlebars-template"></script>
+        <!--suppress HtmlUnknownTarget -->
+        <script id="operations-log" src="{{@unit.publicUri}}/templates/operations-log.hbs"
+                data-device-id="{{deviceView.deviceIdentifier}}" data-device-type="{{deviceView.deviceType}}"
+                type="text/x-handlebars-template"></script>
+        {{js "js/device-detail.js"}}
+        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
+        {{js "js/load-map.js"}}
+    {{/if}}
 {{/zone}}
\ No newline at end of file
diff --git a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.js b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.js
index 56c11ec664..073670b6c2 100644
--- a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.js
+++ b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.js
@@ -1,66 +1,211 @@
 /*
- * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  *
  * WSO2 Inc. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
  * in compliance with the License.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
 
 function onRequest(context) {
-    var log = new Log("detail.js");
-    var deviceType = context.uriParams.deviceType;
+    // var log = new Log("device-view.js");
+    var deviceType = context["uriParams"]["deviceType"];
     var deviceId = request.getParameter("id");
+    var deviceViewData = {};
 
-    if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) {
+    if (deviceType && deviceId) {
         var deviceModule = require("/app/modules/business-controllers/device.js")["deviceModule"];
-        var device = deviceModule.viewDevice(deviceType, deviceId)["content"];
+        var response = deviceModule.viewDevice(deviceType, deviceId);
+        if (response["status"] == "success") {
+            deviceViewData["deviceFound"] = true;
+            deviceViewData["isAuthorized"] = true;
 
-        if (device) {
+            var filteredDeviceData = response["content"];
+
+            // creating deviceView information model from filtered device data
             var viewModel = {};
-            var deviceInfo = device.properties.DEVICE_INFO;
-            if (deviceInfo != undefined && String(deviceInfo.toString()).length > 0) {
-                deviceInfo = parse(stringify(deviceInfo));
-                viewModel.imei = device.properties.IMEI;
-                viewModel.model = device.properties.DEVICE_MODEL;
-                viewModel.vendor = device.properties.VENDOR;
-                viewModel.internal_memory = {};
-                viewModel.external_memory = {};
-                viewModel.location = {
-                    latitude: device.properties.LATITUDE,
-                    longitude: device.properties.LONGITUDE
-                };
-                var info = {};
-                var infoList = parse(deviceInfo);
-                if (infoList != null && infoList != undefined) {
-                    for (var j = 0; j < infoList.length; j++) {
-                        info[infoList[j].name] = infoList[j].value;
+            if (filteredDeviceData["type"]) {
+                viewModel["deviceType"] = filteredDeviceData["type"];
+                viewModel.isNotWindows = true;
+                if (viewModel["deviceType"] == "windows") {
+                    viewModel.isNotWindows = false;
+                }
+            }
+            if (filteredDeviceData["deviceIdentifier"]) {
+                viewModel["deviceIdentifier"] = filteredDeviceData["deviceIdentifier"];
+            }
+            if (filteredDeviceData["name"]) {
+                viewModel["name"] = filteredDeviceData["name"];
+            }
+            if (filteredDeviceData["enrolmentInfo"]) {
+                if (filteredDeviceData["enrolmentInfo"]["status"]) {
+                    viewModel["status"] = filteredDeviceData["enrolmentInfo"]["status"];
+                    viewModel.isActive = false ;
+                    viewModel.isNotRemoved = true;
+                    if (filteredDeviceData["enrolmentInfo"]["status"]== "ACTIVE") {
+                        viewModel.isActive = true ;
                     }
+                    if (filteredDeviceData["enrolmentInfo"]["status"]== "REMOVED") {
+                        viewModel.isNotRemoved = false ;
+                    }
+                }
+                if (filteredDeviceData["enrolmentInfo"]["owner"]) {
+                    viewModel["owner"] = filteredDeviceData["enrolmentInfo"]["owner"];
+                }
+                if (filteredDeviceData["enrolmentInfo"]["ownership"]) {
+                    viewModel["ownership"] = filteredDeviceData["enrolmentInfo"]["ownership"];
                 }
-                deviceInfo = info;
-                viewModel.BatteryLevel = deviceInfo.BATTERY_LEVEL;
-                viewModel.internal_memory.FreeCapacity = Math.round(deviceInfo.INTERNAL_AVAILABLE_MEMORY * 100) / 100;
-                viewModel.internal_memory.DeviceCapacityPercentage = Math.round(deviceInfo.INTERNAL_AVAILABLE_MEMORY
-                                                                                / deviceInfo.INTERNAL_TOTAL_MEMORY * 10000) / 100;
-                viewModel.external_memory.FreeCapacity = Math.round(deviceInfo.EXTERNAL_AVAILABLE_MEMORY * 100) / 100;
-                viewModel.external_memory.DeviceCapacityPercentage = Math.round(deviceInfo.EXTERNAL_AVAILABLE_MEMORY
-                                                                                / deviceInfo.EXTERNAL_TOTAL_MEMORY * 10000) / 100;
-                device.viewModel = viewModel;
             }
-        }
+            if (filteredDeviceData["initialDeviceInfo"]) {
+                viewModel["deviceInfoAvailable"] = true;
+                if (filteredDeviceData["initialDeviceInfo"]["IMEI"]) {
+                    viewModel["imei"] = filteredDeviceData["initialDeviceInfo"]["IMEI"];
+                }
+                if (!filteredDeviceData["latestDeviceInfo"]) {
+                    if (filteredDeviceData["initialDeviceInfo"]["OS_BUILD_DATE"]) {
+                        if (filteredDeviceData["initialDeviceInfo"]["OS_BUILD_DATE"] != "0") {
+                            viewModel["osBuildDate"] = new Date(filteredDeviceData["initialDeviceInfo"]["OS_BUILD_DATE"] * 1000);
+                        }
+                    }
+                    if (filteredDeviceData["initialDeviceInfo"]["LATITUDE"] && filteredDeviceData["initialDeviceInfo"]["LONGITUDE"]) {
+                        viewModel["location"] = {};
+                        viewModel["location"]["latitude"] = filteredDeviceData["initialDeviceInfo"]["LATITUDE"];
+                        viewModel["location"]["longitude"] = filteredDeviceData["initialDeviceInfo"]["LONGITUDE"];
+                    }
+                    if (filteredDeviceData["initialDeviceInfo"]["VENDOR"] && filteredDeviceData["initialDeviceInfo"]["DEVICE_MODEL"]) {
+                        viewModel["vendor"] = filteredDeviceData["initialDeviceInfo"]["VENDOR"];
+                        viewModel["model"] = filteredDeviceData["initialDeviceInfo"]["DEVICE_MODEL"];
+                    }
+                    if (filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]) {
+                        if (deviceType == "android") {
+                            viewModel["BatteryLevel"] = {};
+                            viewModel["BatteryLevel"]["value"] = filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["BATTERY_LEVEL"];
+
+                            viewModel["internalMemory"] = {};
+                            viewModel["internalMemory"]["total"] = Math.
+                                round(filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["INTERNAL_TOTAL_MEMORY"] * 100) / 100;
+                            if (filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["INTERNAL_TOTAL_MEMORY"] != 0) {
+                                viewModel["internalMemory"]["usage"] = Math.
+                                    round((filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["INTERNAL_TOTAL_MEMORY"] -
+                                        filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["INTERNAL_AVAILABLE_MEMORY"])
+                                        / filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["INTERNAL_TOTAL_MEMORY"] * 10000) / 100;
+                            } else {
+                                viewModel["internalMemory"]["usage"] = 0;
+                            }
+
+                            viewModel["externalMemory"] = {};
+                            viewModel["externalMemory"]["total"] = Math.
+                                round(filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["EXTERNAL_TOTAL_MEMORY"] * 100) / 100;
+                            if (filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["EXTERNAL_TOTAL_MEMORY"] != 0) {
+                                viewModel["externalMemory"]["usage"] = Math.
+                                    round((filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["EXTERNAL_TOTAL_MEMORY"] -
+                                        filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["EXTERNAL_AVAILABLE_MEMORY"])
+                                        / filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["EXTERNAL_TOTAL_MEMORY"] * 10000) / 100;
+                            } else {
+                                viewModel["externalMemory"]["usage"] = 0;
+                            }
+                        } else if (deviceType == "ios") {
+                            viewModel["BatteryLevel"] = {};
+                            viewModel["BatteryLevel"]["value"] = Math. round(filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["BatteryLevel"] * 10000) / 100;
+
+                            viewModel["internalMemory"] = {};
+                            viewModel["internalMemory"]["total"] = Math.
+                                round(filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["DeviceCapacity"] * 100) / 100;
+                            if (filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["DeviceCapacity"] != 0) {
+                                viewModel["internalMemory"]["usage"] = Math.
+                                    round((filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["DeviceCapacity"] -
+                                        filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["AvailableDeviceCapacity"])
+                                        / filteredDeviceData["initialDeviceInfo"]["DEVICE_INFO"]["DeviceCapacity"] * 10000) / 100;
+                            } else {
+                                viewModel["internalMemory"]["usage"] = 0;
+                            }
+                        }
+                    }
+                }
+            }
+            if (filteredDeviceData["latestDeviceInfo"]) {
+                viewModel["deviceInfoAvailable"] = true;
+                if (filteredDeviceData["latestDeviceInfo"]["osBuildDate"]) {
+                    if (filteredDeviceData["latestDeviceInfo"]["osBuildDate"] != "0") {
+                        viewModel["osBuildDate"] = new Date(filteredDeviceData["latestDeviceInfo"]["osBuildDate"] * 1000);
+                    }
+                }
+                if (filteredDeviceData["latestDeviceInfo"]["location"]["latitude"] &&
+                    filteredDeviceData["latestDeviceInfo"]["location"]["longitude"]) {
+                    viewModel["location"] = {};
+                    viewModel["location"]["latitude"] = filteredDeviceData["latestDeviceInfo"]["location"]["latitude"];
+                    viewModel["location"]["longitude"] = filteredDeviceData["latestDeviceInfo"]["location"]["longitude"];
+                }
+                if (filteredDeviceData["latestDeviceInfo"]["vendor"] && filteredDeviceData["latestDeviceInfo"]["deviceModel"]) {
+                    viewModel["vendor"] = filteredDeviceData["latestDeviceInfo"]["vendor"];
+                    viewModel["model"] = filteredDeviceData["latestDeviceInfo"]["deviceModel"];
+                }
+                if (filteredDeviceData["latestDeviceInfo"]["updatedTime"]) {
+                    viewModel["lastUpdatedTime"] = filteredDeviceData["latestDeviceInfo"]["updatedTime"].
+                    substr(0, filteredDeviceData["latestDeviceInfo"]["updatedTime"].indexOf("+"));
+                }
+                viewModel["BatteryLevel"] = {};
+                viewModel["BatteryLevel"]["value"] = filteredDeviceData["latestDeviceInfo"]["batteryLevel"];
 
-        log.info(device);
-        var utility = require("/app/modules/utility.js").utility;
-        var configs = utility.getDeviceTypeConfig(deviceType);
-        return {"device": device, "label": configs["deviceType"]["label"]};
+                viewModel["cpuUsage"] = {};
+                viewModel["cpuUsage"]["value"] = filteredDeviceData["latestDeviceInfo"]["cpuUsage"];
+
+                viewModel["ramUsage"] = {};
+                if (filteredDeviceData["latestDeviceInfo"]["totalRAMMemory"] != 0) {
+                    viewModel["ramUsage"]["value"] = Math.
+                        round((filteredDeviceData["latestDeviceInfo"]["totalRAMMemory"] -
+                            filteredDeviceData["latestDeviceInfo"]["availableRAMMemory"])
+                            / filteredDeviceData["latestDeviceInfo"]["totalRAMMemory"] * 10000) / 100;
+                } else {
+                    viewModel["ramUsage"]["value"] = 0;
+                }
+
+                viewModel["internalMemory"] = {};
+                viewModel["internalMemory"]["total"] = Math.
+                    round(filteredDeviceData["latestDeviceInfo"]["internalTotalMemory"] * 100) / 100;
+                if (filteredDeviceData["latestDeviceInfo"]["internalTotalMemory"] != 0) {
+                    viewModel["internalMemory"]["usage"] = Math.
+                        round((filteredDeviceData["latestDeviceInfo"]["internalTotalMemory"] -
+                            filteredDeviceData["latestDeviceInfo"]["internalAvailableMemory"])
+                            / filteredDeviceData["latestDeviceInfo"]["internalTotalMemory"] * 10000) / 100;
+                } else {
+                    viewModel["internalMemory"]["usage"] = 0;
+                }
+
+                viewModel["externalMemory"] = {};
+                viewModel["externalMemory"]["total"] = Math.
+                    round(filteredDeviceData["latestDeviceInfo"]["externalTotalMemory"] * 100) / 100;
+                if (filteredDeviceData["latestDeviceInfo"]["externalTotalMemory"] != 0) {
+                    viewModel["externalMemory"]["usage"] = Math.
+                        round((filteredDeviceData["latestDeviceInfo"]["externalTotalMemory"] -
+                            filteredDeviceData["latestDeviceInfo"]["externalAvailableMemory"])
+                            / filteredDeviceData["latestDeviceInfo"]["externalTotalMemory"] * 10000) / 100;
+                } else {
+                    viewModel["externalMemory"]["usage"] = 0;
+                }
+            }
+            if (!filteredDeviceData["initialDeviceInfo"] && !filteredDeviceData["latestDeviceInfo"]) {
+                viewModel["deviceInfoAvailable"] = false;
+            }
+
+            deviceViewData["deviceView"] = viewModel;
+        } else if (response["status"] == "unauthorized") {
+            deviceViewData["deviceFound"] = true;
+            deviceViewData["isAuthorized"] = false;
+        } else if (response["status"] == "notFound") {
+            deviceViewData["deviceFound"] = false;
+        }
+    } else {
+        deviceViewData["deviceFound"] = false;
     }
+    return deviceViewData;
 }
\ No newline at end of file
diff --git a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.json b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.json
index 9eecd8f5bf..787e8b1dcd 100644
--- a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.json
+++ b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.json
@@ -1,3 +1,4 @@
 {
-    "version": "1.0.0"
+  "version": "1.0.0",
+  "extends": "cdmf.unit.device.view"
 }
\ No newline at end of file