Merge pull request #72 from charithag/IoTS-1.0.0-M1

UI/UX improvements
Ruwan 9 years ago
commit 20beb69419

@ -1,3 +1,10 @@
{{#zone "topCss"}}
<style>
.thumbnail.icon:before {
padding-top: 0;
}
</style>
{{/zone}}
{{#zone "device-thumbnail"}}
<img src="{{@unit.publicUri}}/images/android-sense-icon.png"/>
{{/zone}}

@ -1,126 +1,73 @@
{{unit "cdmf.unit.lib.service-invoker-utility"}}
{{unit "cdmf.unit.lib.handlebars"}}
{{#defineZone "device-detail-top"}}
<div class="row wr-device-board">
<div class="col-lg-12 wr-secondary-bar">
<label class="device-id device-select" data-deviceid="{{device.deviceIdentifier}}" data-type="{{device.type}}">
Device {{device.name}}
</label>
</div>
{{#zone "topCss"}}
<style>
.thumbnail.icon:before {
padding-top: 0;
}
</style>
{{/zone}}
{{#zone "device-thumbnail"}}
<img src="{{@unit.publicUri}}/images/ardunio-icon.png"/>
{{/zone}}
{{#zone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
</div>
<div class="add-margin-top-4x">
{{unit "iot.unit.device.operation" device=device}}
</div>
{{/defineZone}}
{{/zone}}
<!-- #page-content-wrapper -->
<div class="page-content-wrapper">
<!-- content/body -->
<div class="container-fluid body-wrapper">
<div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
<div class="media">
<div id="device_overview">
<div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="thumbnail icon">
<img src="{{@unit.publicUri}}/images/ardunio-icon.png"/>
</div>
{{#zone "device-detail-properties"}}
<div class="media-body add-padding-left-5x remove-padding-xs tab-content">
<div class="panel-group tab-content">
<div id="deviceDetails" class="panel panel-default tab-pane active" id="device_details" role="tabpanel" aria-labelledby="device_details">
<div class="panel-heading">Device Details</div>
{{unit "iot.unit.device.stats" device=device}}
</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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Policy Compliance . . .
<br>
<br>
</div>
<div class="media-body asset-desc add-padding-left-5x">
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Device Overview - Arduino</div>
{{#defineZone "device-detail-properties"}}
<table class="table table-responsive table-striped" id="members">
<tbody>
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px; width: 1%;;">Device</td><td style="padding:10px 15px;">{{device.viewModel.vendor}} {{device.properties.model}}</td></tr>
<tr role="row" class="odd"><td class="sorting_1" style="padding:10px 15px;">Model</td><td style="padding:10px 15px;">{{device.viewModel.model}}</td></tr>
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px;">IMEI</td><td style="padding:10px 15px;">{{device.viewModel.imei}}</td></tr>
{{#if device.viewModel.udid}}
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px;">UDID</td><td style="padding:10px 15px;">{{device.viewModel.udid}}</td></tr>
{{/if}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px;">Status</td>
<td style="padding:10px 15px;">
{{#equal device.status "ACTIVE"}}<span><i class="fw fw-ok icon-success"></i> Active</span>{{/equal}}
{{#equal device.status "INACTIVE"}}<span><i class="fw fw-warning icon-warning"></i> Inactive</span>{{/equal}}
</td>
</tr>
</tbody>
</table>
{{/defineZone}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Operations</div>
<div class="add-margin-top-4x">
{{unit "iot.unit.device.operation" device=device}}
<div id="policy-list-container">
<div class="panel-body">
Not available yet
</div>
<br class="c-both" />
</div>
</div>
</div>
<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="#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>
<li><a class="list-group-item" href="#event_log" role="tab" data-toggle="tab" aria-controls="event_log">Operations Log</a></li>
<li><a class="list-group-item" href="{{@app.context}}/analytics?deviceType={{device.type}}&deviceName={{device.name}}&deviceId={{device.deviceIdentifier}}">Device Analytics</a></li>
</ul>
</div>
{{#defineZone "device-detail-properties"}}
<div class="media-body add-padding-left-5x remove-padding-xs tab-content">
<div class="panel-group tab-content">
<div id="deviceDetails" class="panel panel-default tab-pane active" id="device_details" role="tabpanel" aria-labelledby="device_details">
<div class="panel-heading">Device Details</div>
{{unit "iot.unit.device.stats" device=device}}
</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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Policy Compliance . . .
<br>
<br>
</div>
<div id="policy-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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Operations Log . . .
<br>
<br>
</div>
<div id="operations-log-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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Operations Log . . .
<br>
<br>
</div>
<div id="operations-log-container">
<div class="panel-body">
Not available yet
</div>
<br class="c-both" />
</div>
{{/defineZone}}
</div>
</div>
</div>
</div>
<!-- /content/body -->
</div>
{{#zone "bottomJs"}}
<script id="policy-view" src="{{@unit.publicUri}}/templates/policy-compliance.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
<script id="applications-list" src="{{@unit.publicUri}}/templates/applications-list.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
<script id="operations-log" src="{{@unit.publicUri}}/templates/operations-log.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
{{/zone}}

@ -1,197 +0,0 @@
/*
* 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
*
* 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
* specific language governing permissions and limitations
* under the License.
*/
(function () {
var deviceId = $(".device-id");
var deviceIdentifier = deviceId.data("deviceid");
var deviceType = deviceId.data("type");
var payload = [deviceIdentifier];
var operationTable;
if (deviceType == "ios") {
var serviceUrl = "/ios/operation/deviceinfo";
} else if (deviceType == "android") {
var serviceUrl = "/mdm-android-agent/operation/device-info";
}
if(serviceUrl){
invokerUtil.post(serviceUrl, payload,
function(message){
console.log(message);
}, function (message) {
console.log(message);
});
}
$(document).ready(function(){
$(".panel-body").removeClass("hidden");
$("#loading-content").remove();
loadOperationBar(deviceType);
loadOperationsLog();
loadApplicationsList();
loadPolicyCompliance();
$("#refresh-policy").click(function () {
$('#policy-spinner').removeClass('hidden');
loadPolicyCompliance();
});
$("#refresh-apps").click(function () {
$('#apps-spinner').removeClass('hidden');
loadApplicationsList();
});
$("#refresh-operations").click(function () {
$('#operations-spinner').removeClass('hidden');
loadOperationsLog(true);
});
});
function loadOperationsLog(update) {
var operationsLog = $("#operations-log");
var deviceListingSrc = operationsLog.attr("src");
var deviceId = operationsLog.data("device-id");
var deviceType = operationsLog.data("device-type");
$.template("operations-log", deviceListingSrc, function (template) {
var serviceURL = "/devicemgt_admin/operations/"+deviceType+"/"+deviceId;
var successCallback = function (data) {
data = JSON.parse(data);
$('#operations-spinner').addClass('hidden');
var viewModel = {};
viewModel.operations = data;
if(data.length > 0){
var content = template(viewModel);
if(!update) {
$("#operations-log-container").html(content);
operationTable = $('#operations-log-table').datatables_extended();
}else{
$('#operations-log-table').dataTable().fnClearTable();
for(var i=0; i < data.length; i++) {
var status;
if(data[i].status == "COMPLETED") {
status = "<span><i class='fw fw-ok icon-success'></i> Completed</span>";
} else if(data[i].status == "PENDING") {
status = "<span><i class='fw fw-warning icon-warning'></i> Pending</span>";
} else if(data[i].status == "ERROR") {
status = "<span><i class='fw fw-error icon-danger'></i> Error</span>";
} else if(data[i].status == "IN_PROGRESS") {
status = "<span><i class='fw fw-ok icon-warning'></i> In Progress</span>";
}
$('#operations-log-table').dataTable().fnAddData([
data[i].code,
status,
data[i].createdTimeStamp
]);
}
}
}
};
invokerUtil.get(serviceURL,
successCallback, function(message){
console.log(message);
});
});
}
function loadApplicationsList() {
var applicationsList = $("#applications-list");
var deviceListingSrc = applicationsList.attr("src");
var deviceId = applicationsList.data("device-id");
var deviceType = applicationsList.data("device-type");
$.template("application-list", deviceListingSrc, function (template) {
var serviceURL = "/devicemgt_admin/operations/"+deviceType+"/"+deviceId+"/apps";
var successCallback = function (data) {
data = JSON.parse(data);
$('#apps-spinner').addClass('hidden');
var viewModel = {};
if(data != null && data.length > 0) {
for (var i = 0; i < data.length; i++) {
data[i].name = data[i].name.replace(/[^\w\s]/gi, ' ');
data[i].name = data[i].name.replace(/[0-9]/g, ' ');
}
}
viewModel.applications = data;
viewModel.deviceType = deviceType;
if(data.length > 0){
var content = template(viewModel);
$("#applications-list-container").html(content);
}
};
invokerUtil.get(serviceURL,
successCallback, function(message){
console.log(message);
});
});
}
function loadPolicyCompliance() {
var policyCompliance = $("#policy-view");
var policySrc = policyCompliance.attr("src");
var deviceId = policyCompliance.data("device-id");
var deviceType = policyCompliance.data("device-type");
var activePolicy = null;
$.template("policy-view", policySrc, function (template) {
var serviceURLPolicy ="/devicemgt_admin/policies/"+deviceType+"/"+deviceId+"/active-policy"
var serviceURLCompliance = "/devicemgt_admin/policies/"+deviceType+"/"+deviceId;
var successCallbackCompliance = function (data) {
var viewModel = {};
viewModel.policy = activePolicy;
viewModel.deviceType = deviceType;
if(data != null && data.complianceFeatures!= null && data.complianceFeatures != undefined && data.complianceFeatures.length > 0) {
viewModel.compliance = "NON-COMPLIANT";
viewModel.complianceFeatures = data.complianceFeatures;
var content = template(viewModel);
$("#policy-list-container").html(content);
} else {
viewModel.compliance = "COMPLIANT";
var content = template(viewModel);
$("#policy-list-container").html(content);
$("#policy-compliance-table").addClass("hidden");
}
};
var successCallbackPolicy = function (data) {
data = JSON.parse(data);
$('#policy-spinner').addClass('hidden');
if(data != null && data.active == true){
activePolicy = data;
invokerUtil.get(serviceURLCompliance,
successCallbackCompliance, function(message){
console.log(message);
});
}
};
invokerUtil.get(serviceURLPolicy,
successCallbackPolicy, function(message){
console.log(message);
});
});
}
}());

@ -1,55 +0,0 @@
/*
* 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
*
* 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
* specific language governing permissions and limitations
* under the License.
*/
$(document).ready(function(){
if (document.getElementById('device-location')){
loadMap();
}
});
function loadMap() {
var map;
function initialize() {
var mapOptions = {
zoom: 18
};
var lat = $("#device-location").data("lat");
var long = $("#device-location").data("long");
if(lat != null && lat != undefined && lat != "" && long != null && long != undefined && long != "") {
$("#map-error").hide();
$("#device-location").show();
map = new google.maps.Map(document.getElementById('device-location'),
mapOptions);
var pos = new google.maps.LatLng(lat,
long);
var marker = new google.maps.Marker({
position: pos,
map: map
});
map.setCenter(pos);
}else{
$("#device-location").hide();
$("#map-error").show();
}
}
google.maps.event.addDomListener(window, 'load', initialize);
}

@ -1,12 +0,0 @@
<div class="wr-app-listing">
<div class="wr-applist">
{{#each applications}}
<a style="text-align: center;width: 100px;height: 100px;">
{{#equal platform "android"}}<i class="fw fw-android"></i>{{/equal}}
{{#equal platform "ios"}}<i class="fw fw-apple"></i>{{/equal}}
{{#equal platform "windows"}}<i class="fw fw-windows"></i>{{/equal}}
<span>{{name}}</span>
</a>
{{/each}}
</div>
</div>

@ -1,24 +0,0 @@
<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>
{{#each operations}}
<tr data-type="selectable" data-id="{{id}}">
<td data-display="{{code}}" data-grid-label="Code">{{code}}</td>
<td data-display="{{status}}" data-grid-label="Status">
{{#equal status "COMPLETED"}}<span><i class="fw fw-ok icon-success"></i> Completed</span>{{/equal}}
{{#equal status "PENDING"}}<span><i class="fw fw-warning icon-warning"></i> Pending</span>{{/equal}}
{{#equal status "ERROR"}}<span><i class="fw fw-error icon-danger"></i> Error</span>{{/equal}}
{{#equal status "IN_PROGRESS"}}<span><i class="fw fw-ok icon-warning"></i> In Progress</span>{{/equal}}
</td>
<td data-display="{{createdTimeStamp}}" data-grid-label="Created Timestamp">{{createdTimeStamp}}</td>
</tr>
{{/each}}
<br class="c-both" />
</tbody>
</table>

@ -1,79 +0,0 @@
<div class="wr-list-group wr-sortable policy-list">
<span class="list-group-item" id="{{id}}">
<div class="row">
<div class="col-lg-3 clearfix">
<span class="wr-list-icon">
{{#equal deviceType "android"}}
<i class=" fw fw-android"></i>
{{/equal}}
{{#equal deviceType "ios"}}
<i class=" fw fw-apple"></i>
{{/equal}}
{{#equal deviceType "windows"}}
<i class=" fw fw-windows"></i>
{{/equal}}
</span>
<span class="wr-list-desc">
<h3 class="wr-list-name">{{policy.policyName}}</h3>
<span class="wr-list-username">{{deviceType}}</span>
</span>
</div>
<div class="col-lg-6">
<div class="row no-gutter">
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Ownership Type : </b> {{policy.ownershipType}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance Type :</b> {{policy.compliance}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance :</b>
{{#equal compliance "COMPLIANT"}}
<span><i class="fw fw-ok icon-success"></i> Compliant</span>
{{/equal}}
{{#equal compliance "NON-COMPLIANT"}}
<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>
{{/equal}}
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<span class="list-group-item-actions">
<a href="/mdm/policies/view?id={{policy.id}}" class="cu-btn-inner policy-view-link" data-id="{{id}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-view fw-stack-1x"></i>
</span>
View
</a>
</span>
</div>
</div>
</span>
</div>
<table class="table table-striped table-hover table-bordered display data-table" id="policy-compliance-table">
<thead>
<tr class="sort-row">
<th>Feature</th>
<th>Compliance</th>
</tr>
</thead>
<tbody>
{{#each complianceFeatures}}
<tr data-type="selectable">
<td data-display="{{featureCode}}" data-grid-label="Feature Code">{{featureCode}}</td>
<td data-display="{{compliance}}" data-grid-label="Status">
{{#equal compliance true}}<span><i class="fw fw-ok icon-success"></i> Compliant</span>{{/equal}}
{{#equal compliance false}}<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>{{/equal}}
</td>
</tr>
{{/each}}
<br class="c-both" />
</tbody>
</table>

@ -1,6 +1,15 @@
{{#zone "topCss"}}
<style>
.thumbnail.icon:before {
padding-top: 0;
}
</style>
{{/zone}}
{{#zone "device-thumbnail"}}
<img src="{{@unit.publicUri}}/images/display-icon.png"/>
{{/zone}}
{{#zone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
@ -9,6 +18,7 @@
{{unit "iot.unit.device.operation" device=device}}
</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">

@ -1,170 +1,73 @@
{{unit "cdmf.unit.lib.service-invoker-utility"}}
{{unit "cdmf.unit.lib.handlebars"}}
{{#defineZone "device-detail-top"}}
<div class="row wr-device-board">
<div class="col-lg-12 wr-secondary-bar">
<label class="device-id device-select" data-deviceid="{{device.deviceIdentifier}}" data-type="{{device.type}}">
Device {{device.name}}
<span class="lbl-device">
( {{device.viewModel.vendor}} {{device.viewModel.model}} )
</span>
</label>
</div>
{{#zone "topCss"}}
<style>
.thumbnail.icon:before {
padding-top: 0;
}
</style>
{{/zone}}
{{#zone "device-thumbnail"}}
<img src="{{@unit.publicUri}}/images/drone-icon.png"/>
{{/zone}}
{{#zone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
</div>
<div class="add-margin-top-4x">
{{unit "iot.unit.device.operation" device=device}}
</div>
{{/defineZone}}
{{/zone}}
<!-- #page-content-wrapper -->
<div class="page-content-wrapper">
<!-- content/body -->
<div class="container-fluid body-wrapper">
<div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
<div class="media">
<div id="device_overview">
<div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="thumbnail icon">
<img src="{{@unit.publicUri}}/imgages/drone-icon.png"/>
</div>
{{#zone "device-detail-properties"}}
<div class="media-body add-padding-left-5x remove-padding-xs tab-content">
<div class="panel-group tab-content">
<div id="deviceDetails" class="panel panel-default tab-pane active" id="device_details" role="tabpanel" aria-labelledby="device_details">
<div class="panel-heading">Device Details</div>
{{unit "iot.unit.device.stats" device=device}}
</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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Policy Compliance . . .
<br>
<br>
</div>
<div class="media-body asset-desc add-padding-left-5x">
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Device Overview - Virtual Firealarm</div>
{{#defineZone "device-detail-properties"}}
<table class="table table-responsive table-striped" id="members">
<tbody>
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px; width: 1%;;">Device</td><td style="padding:10px 15px;">{{device.viewModel.vendor}} {{device.properties.model}}</td></tr>
<tr role="row" class="odd"><td class="sorting_1" style="padding:10px 15px;">Model</td><td style="padding:10px 15px;">{{device.viewModel.model}}</td></tr>
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px;">IMEI</td><td style="padding:10px 15px;">{{device.viewModel.imei}}</td></tr>
{{#if device.viewModel.udid}}
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px;">UDID</td><td style="padding:10px 15px;">{{device.viewModel.udid}}</td></tr>
{{/if}}
{{#if device.viewModel.phoneNumber}}
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px;">Phone Number</td><td style="padding:10px 15px;">{{device.viewModel.phoneNumber}}</td></tr>
{{/if}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px;">Status</td>
<td style="padding:10px 15px;">
{{#equal device.status "ACTIVE"}}<span><i class="fw fw-ok icon-success"></i> Active</span>{{/equal}}
{{#equal device.status "INACTIVE"}}<span><i class="fw fw-warning icon-warning"></i> Inactive</span>{{/equal}}
{{#equal device.status "BLOCKED"}}<span><i class="fw fw-remove icon-danger"></i> Blocked</span>{{/equal}}
{{#equal device.status "REMOVED"}}<span><i class="fw fw-delete icon-danger"></i> Removed</span>{{/equal}}
</td>
</tr>
</tbody>
</table>
{{/defineZone}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Operations</div>
<div class="add-margin-top-4x">
{{unit "iot.unit.device.operation" device=device}}
<div id="policy-list-container">
<div class="panel-body">
Not available yet
</div>
<br class="c-both" />
</div>
</div>
</div>
<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="#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>
<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>
<li><a class="list-group-item" href="{{@app.context}}/analytics?deviceType={{device.type}}&deviceName={{device.name}}&deviceId={{device.deviceIdentifier}}">Device Analytics</a></li>
</ul>
</div>
{{#defineZone "device-detail-properties"}}
<div class="media-body add-padding-left-5x remove-padding-xs tab-content">
<div class="panel-group tab-content">
<div id="deviceDetails" class="panel panel-default tab-pane active" id="device_details" role="tabpanel" aria-labelledby="device_details">
<div class="panel-heading">Device Details</div>
{{unit "iot.unit.device.stats" device=device}}
</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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Policy Compliance . . .
<br>
<br>
</div>
<div id="policy-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="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>
</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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Operations Log . . .
<br>
<br>
</div>
<div id="operations-log-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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Operations Log . . .
<br>
<br>
</div>
<div id="operations-log-container">
<div class="panel-body">
Not available yet
</div>
<br class="c-both" />
</div>
{{/defineZone}}
</div>
</div>
</div>
</div>
<!-- /content/body -->
</div>
{{#zone "bottomJs"}}
<script id="policy-view" src="{{@unit.publicUri}}/templates/policy-compliance.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
<script id="applications-list" src="{{@unit.publicUri}}/templates/applications-list.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
<script id="operations-log" src="{{@unit.publicUri}}/templates/operations-log.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" 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"}}
{{/zone}}

@ -1,197 +0,0 @@
/*
* 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
*
* 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
* specific language governing permissions and limitations
* under the License.
*/
(function () {
var deviceId = $(".device-id");
var deviceIdentifier = deviceId.data("deviceid");
var deviceType = deviceId.data("type");
var payload = [deviceIdentifier];
var operationTable;
if (deviceType == "ios") {
var serviceUrl = "/ios/operation/deviceinfo";
} else if (deviceType == "android") {
var serviceUrl = "/mdm-android-agent/operation/device-info";
}
if(serviceUrl){
invokerUtil.post(serviceUrl, payload,
function(message){
console.log(message);
}, function (message) {
console.log(message);
});
}
$(document).ready(function(){
$(".panel-body").removeClass("hidden");
$("#loading-content").remove();
loadOperationBar(deviceType);
loadOperationsLog();
loadApplicationsList();
loadPolicyCompliance();
$("#refresh-policy").click(function () {
$('#policy-spinner').removeClass('hidden');
loadPolicyCompliance();
});
$("#refresh-apps").click(function () {
$('#apps-spinner').removeClass('hidden');
loadApplicationsList();
});
$("#refresh-operations").click(function () {
$('#operations-spinner').removeClass('hidden');
loadOperationsLog(true);
});
});
function loadOperationsLog(update) {
var operationsLog = $("#operations-log");
var deviceListingSrc = operationsLog.attr("src");
var deviceId = operationsLog.data("device-id");
var deviceType = operationsLog.data("device-type");
$.template("operations-log", deviceListingSrc, function (template) {
var serviceURL = "/devicemgt_admin/operations/"+deviceType+"/"+deviceId;
var successCallback = function (data) {
data = JSON.parse(data);
$('#operations-spinner').addClass('hidden');
var viewModel = {};
viewModel.operations = data;
if(data.length > 0){
var content = template(viewModel);
if(!update) {
$("#operations-log-container").html(content);
operationTable = $('#operations-log-table').datatables_extended();
}else{
$('#operations-log-table').dataTable().fnClearTable();
for(var i=0; i < data.length; i++) {
var status;
if(data[i].status == "COMPLETED") {
status = "<span><i class='fw fw-ok icon-success'></i> Completed</span>";
} else if(data[i].status == "PENDING") {
status = "<span><i class='fw fw-warning icon-warning'></i> Pending</span>";
} else if(data[i].status == "ERROR") {
status = "<span><i class='fw fw-error icon-danger'></i> Error</span>";
} else if(data[i].status == "IN_PROGRESS") {
status = "<span><i class='fw fw-ok icon-warning'></i> In Progress</span>";
}
$('#operations-log-table').dataTable().fnAddData([
data[i].code,
status,
data[i].createdTimeStamp
]);
}
}
}
};
invokerUtil.get(serviceURL,
successCallback, function(message){
console.log(message);
});
});
}
function loadApplicationsList() {
var applicationsList = $("#applications-list");
var deviceListingSrc = applicationsList.attr("src");
var deviceId = applicationsList.data("device-id");
var deviceType = applicationsList.data("device-type");
$.template("application-list", deviceListingSrc, function (template) {
var serviceURL = "/devicemgt_admin/operations/"+deviceType+"/"+deviceId+"/apps";
var successCallback = function (data) {
data = JSON.parse(data);
$('#apps-spinner').addClass('hidden');
var viewModel = {};
if(data != null && data.length > 0) {
for (var i = 0; i < data.length; i++) {
data[i].name = data[i].name.replace(/[^\w\s]/gi, ' ');
data[i].name = data[i].name.replace(/[0-9]/g, ' ');
}
}
viewModel.applications = data;
viewModel.deviceType = deviceType;
if(data.length > 0){
var content = template(viewModel);
$("#applications-list-container").html(content);
}
};
invokerUtil.get(serviceURL,
successCallback, function(message){
console.log(message);
});
});
}
function loadPolicyCompliance() {
var policyCompliance = $("#policy-view");
var policySrc = policyCompliance.attr("src");
var deviceId = policyCompliance.data("device-id");
var deviceType = policyCompliance.data("device-type");
var activePolicy = null;
$.template("policy-view", policySrc, function (template) {
var serviceURLPolicy ="/devicemgt_admin/policies/"+deviceType+"/"+deviceId+"/active-policy"
var serviceURLCompliance = "/devicemgt_admin/policies/"+deviceType+"/"+deviceId;
var successCallbackCompliance = function (data) {
var viewModel = {};
viewModel.policy = activePolicy;
viewModel.deviceType = deviceType;
if(data != null && data.complianceFeatures!= null && data.complianceFeatures != undefined && data.complianceFeatures.length > 0) {
viewModel.compliance = "NON-COMPLIANT";
viewModel.complianceFeatures = data.complianceFeatures;
var content = template(viewModel);
$("#policy-list-container").html(content);
} else {
viewModel.compliance = "COMPLIANT";
var content = template(viewModel);
$("#policy-list-container").html(content);
$("#policy-compliance-table").addClass("hidden");
}
};
var successCallbackPolicy = function (data) {
data = JSON.parse(data);
$('#policy-spinner').addClass('hidden');
if(data != null && data.active == true){
activePolicy = data;
invokerUtil.get(serviceURLCompliance,
successCallbackCompliance, function(message){
console.log(message);
});
}
};
invokerUtil.get(serviceURLPolicy,
successCallbackPolicy, function(message){
console.log(message);
});
});
}
}());

@ -1,55 +0,0 @@
/*
* 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
*
* 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
* specific language governing permissions and limitations
* under the License.
*/
$(document).ready(function(){
if (document.getElementById('device-location')){
loadMap();
}
});
function loadMap() {
var map;
function initialize() {
var mapOptions = {
zoom: 18
};
var lat = $("#device-location").data("lat");
var long = $("#device-location").data("long");
if(lat != null && lat != undefined && lat != "" && long != null && long != undefined && long != "") {
$("#map-error").hide();
$("#device-location").show();
map = new google.maps.Map(document.getElementById('device-location'),
mapOptions);
var pos = new google.maps.LatLng(lat,
long);
var marker = new google.maps.Marker({
position: pos,
map: map
});
map.setCenter(pos);
}else{
$("#device-location").hide();
$("#map-error").show();
}
}
google.maps.event.addDomListener(window, 'load', initialize);
}

@ -1,12 +0,0 @@
<div class="wr-app-listing">
<div class="wr-applist">
{{#each applications}}
<a style="text-align: center;width: 100px;height: 100px;">
{{#equal platform "android"}}<i class="fw fw-android"></i>{{/equal}}
{{#equal platform "ios"}}<i class="fw fw-apple"></i>{{/equal}}
{{#equal platform "windows"}}<i class="fw fw-windows"></i>{{/equal}}
<span>{{name}}</span>
</a>
{{/each}}
</div>
</div>

@ -1,24 +0,0 @@
<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>
{{#each operations}}
<tr data-type="selectable" data-id="{{id}}">
<td data-display="{{code}}" data-grid-label="Code">{{code}}</td>
<td data-display="{{status}}" data-grid-label="Status">
{{#equal status "COMPLETED"}}<span><i class="fw fw-ok icon-success"></i> Completed</span>{{/equal}}
{{#equal status "PENDING"}}<span><i class="fw fw-warning icon-warning"></i> Pending</span>{{/equal}}
{{#equal status "ERROR"}}<span><i class="fw fw-error icon-danger"></i> Error</span>{{/equal}}
{{#equal status "IN_PROGRESS"}}<span><i class="fw fw-ok icon-warning"></i> In Progress</span>{{/equal}}
</td>
<td data-display="{{createdTimeStamp}}" data-grid-label="Created Timestamp">{{createdTimeStamp}}</td>
</tr>
{{/each}}
<br class="c-both" />
</tbody>
</table>

@ -1,79 +0,0 @@
<div class="wr-list-group wr-sortable policy-list">
<span class="list-group-item" id="{{id}}">
<div class="row">
<div class="col-lg-3 clearfix">
<span class="wr-list-icon">
{{#equal deviceType "android"}}
<i class=" fw fw-android"></i>
{{/equal}}
{{#equal deviceType "ios"}}
<i class=" fw fw-apple"></i>
{{/equal}}
{{#equal deviceType "windows"}}
<i class=" fw fw-windows"></i>
{{/equal}}
</span>
<span class="wr-list-desc">
<h3 class="wr-list-name">{{policy.policyName}}</h3>
<span class="wr-list-username">{{deviceType}}</span>
</span>
</div>
<div class="col-lg-6">
<div class="row no-gutter">
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Ownership Type : </b> {{policy.ownershipType}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance Type :</b> {{policy.compliance}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance :</b>
{{#equal compliance "COMPLIANT"}}
<span><i class="fw fw-ok icon-success"></i> Compliant</span>
{{/equal}}
{{#equal compliance "NON-COMPLIANT"}}
<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>
{{/equal}}
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<span class="list-group-item-actions">
<a href="/mdm/policies/view?id={{policy.id}}" class="cu-btn-inner policy-view-link" data-id="{{id}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-view fw-stack-1x"></i>
</span>
View
</a>
</span>
</div>
</div>
</span>
</div>
<table class="table table-striped table-hover table-bordered display data-table" id="policy-compliance-table">
<thead>
<tr class="sort-row">
<th>Feature</th>
<th>Compliance</th>
</tr>
</thead>
<tbody>
{{#each complianceFeatures}}
<tr data-type="selectable">
<td data-display="{{featureCode}}" data-grid-label="Feature Code">{{featureCode}}</td>
<td data-display="{{compliance}}" data-grid-label="Status">
{{#equal compliance true}}<span><i class="fw fw-ok icon-success"></i> Compliant</span>{{/equal}}
{{#equal compliance false}}<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>{{/equal}}
</td>
</tr>
{{/each}}
<br class="c-both" />
</tbody>
</table>

@ -24,16 +24,19 @@ var deviceId = $(".device-id").data("deviceid");
var monitor_operations = $("#details").data("monitor");
var appContext = $("#details").data("appcontext");
var marker_1 = appContext +'/public/iot.unit.device.stats/images/map-marker-1.png';
var marker_1 = appContext + '/public/iot.unit.device.stats/images/map-marker-1.png';
var marker_2 = appContext + '/public/iot.unit.device.stats/images/map-marker-2.png';
var map;
var mapPoints = [], mapPaths = [], mapMarkers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 6.9344, lng: 79.8428},
zoom: 12
});
if ($('#map').length) {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 6.9344, lng: 79.8428},
zoom: 12
});
}
}
function formatDates() {
@ -122,7 +125,7 @@ function updateGraphs() {
var graphVals = {};
for (var s in stats) {
var val = stats[s];
if (!val){
if (!val) {
continue;
}
if (val.time > lastUpdate) {
@ -141,7 +144,7 @@ function updateGraphs() {
map.panTo(val.map);
mapMarkers.push(marker);
if (mapPoints.length > 1 ){
if (mapPoints.length > 1) {
var l = mapPoints.length;
var path = new google.maps.Polyline({
path: [mapPoints[l - 1], mapPoints[l - 2]],
@ -157,7 +160,7 @@ function updateGraphs() {
mapMarkers[l - 2].setIcon(marker_2);
}
if (mapPoints.length >= 10){
if (mapPoints.length >= 10) {
mapMarkers[0].setMap(null);
mapMarkers.splice(0, 1);
@ -174,7 +177,7 @@ function updateGraphs() {
}
graph.series.addData(graphVals);
if (lastUpdate == -1){
if (lastUpdate == -1) {
$('#last_seen').text("Not seen recently");
}

@ -1,126 +1,73 @@
{{unit "cdmf.unit.lib.service-invoker-utility"}}
{{unit "cdmf.unit.lib.handlebars"}}
{{#defineZone "device-detail-top"}}
<div class="row wr-device-board">
<div class="col-lg-12 wr-secondary-bar">
<label class="device-id device-select" data-deviceid="{{device.deviceIdentifier}}" data-type="{{device.type}}">
Device {{device.name}}
</label>
</div>
{{#zone "topCss"}}
<style>
.thumbnail.icon:before {
padding-top: 0;
}
</style>
{{/zone}}
{{#zone "device-thumbnail"}}
<img src="{{@unit.publicUri}}/images/raspberry-icon.png"/>
{{/zone}}
{{#zone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
</div>
<div class="add-margin-top-4x">
{{unit "iot.unit.device.operation" device=device}}
</div>
{{/defineZone}}
{{/zone}}
<!-- #page-content-wrapper -->
<div class="page-content-wrapper">
<!-- content/body -->
<div class="container-fluid body-wrapper">
<div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
<div class="media">
<div id="device_overview">
<div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="thumbnail icon">
<img src="{{@unit.publicUri}}/images/respberry-icon.png"/>
</div>
{{#zone "device-detail-properties"}}
<div class="media-body add-padding-left-5x remove-padding-xs tab-content">
<div class="panel-group tab-content">
<div id="deviceDetails" class="panel panel-default tab-pane active" id="device_details" role="tabpanel" aria-labelledby="device_details">
<div class="panel-heading">Device Details</div>
{{unit "iot.unit.device.stats" device=device}}
</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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Policy Compliance . . .
<br>
<br>
</div>
<div class="media-body asset-desc add-padding-left-5x">
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Device Overview - RaspberryPi</div>
{{#defineZone "device-detail-properties"}}
<table class="table table-responsive table-striped" id="members">
<tbody>
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px; width: 1%;;">Device</td><td style="padding:10px 15px;">{{device.viewModel.vendor}} {{device.properties.model}}</td></tr>
<tr role="row" class="odd"><td class="sorting_1" style="padding:10px 15px;">Model</td><td style="padding:10px 15px;">{{device.viewModel.model}}</td></tr>
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px;">IMEI</td><td style="padding:10px 15px;">{{device.viewModel.imei}}</td></tr>
{{#if device.viewModel.udid}}
<tr role="row" class="even"><td class="sorting_1" style="padding:10px 15px;">UDID</td><td style="padding:10px 15px;">{{device.viewModel.udid}}</td></tr>
{{/if}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px;">Status</td>
<td style="padding:10px 15px;">
{{#equal device.status "ACTIVE"}}<span><i class="fw fw-ok icon-success"></i> Active</span>{{/equal}}
{{#equal device.status "INACTIVE"}}<span><i class="fw fw-warning icon-warning"></i> Inactive</span>{{/equal}}
</td>
</tr>
</tbody>
</table>
{{/defineZone}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Operations</div>
<div class="add-margin-top-4x">
{{unit "iot.unit.device.operation" device=device}}
<div id="policy-list-container">
<div class="panel-body">
Not available yet
</div>
<br class="c-both" />
</div>
</div>
</div>
<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="#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>
<li><a class="list-group-item" href="#event_log" role="tab" data-toggle="tab" aria-controls="event_log">Operations Log</a></li>
<li><a class="list-group-item" href="{{@app.context}}/analytics?deviceType={{device.type}}&deviceName={{device.name}}&deviceId={{device.deviceIdentifier}}">Device Analytics</a></li>
</ul>
</div>
{{#defineZone "device-detail-properties"}}
<div class="media-body add-padding-left-5x remove-padding-xs tab-content">
<div class="panel-group tab-content">
<div id="deviceDetails" class="panel panel-default tab-pane active" id="device_details" role="tabpanel" aria-labelledby="device_details">
<div class="panel-heading">Device Details</div>
{{unit "iot.unit.device.stats" device=device}}
</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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Policy Compliance . . .
<br>
<br>
</div>
<div id="policy-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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Operations Log . . .
<br>
<br>
</div>
<div id="operations-log-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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fw fw-settings fw-spin fw-2x"></i>
&nbsp;&nbsp;&nbsp;
Loading Operations Log . . .
<br>
<br>
</div>
<div id="operations-log-container">
<div class="panel-body">
Not available yet
</div>
<br class="c-both" />
</div>
{{/defineZone}}
</div>
</div>
</div>
</div>
<!-- /content/body -->
</div>
{{#zone "bottomJs"}}
<script id="policy-view" src="{{@unit.publicUri}}/templates/policy-compliance.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
<script id="applications-list" src="{{@unit.publicUri}}/templates/applications-list.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
<script id="operations-log" src="{{@unit.publicUri}}/templates/operations-log.hbs" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" type="text/x-handlebars-template" ></script>
{{/zone}}

@ -1,197 +0,0 @@
/*
* 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
*
* 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
* specific language governing permissions and limitations
* under the License.
*/
(function () {
var deviceId = $(".device-id");
var deviceIdentifier = deviceId.data("deviceid");
var deviceType = deviceId.data("type");
var payload = [deviceIdentifier];
var operationTable;
if (deviceType == "ios") {
var serviceUrl = "/ios/operation/deviceinfo";
} else if (deviceType == "android") {
var serviceUrl = "/mdm-android-agent/operation/device-info";
}
if(serviceUrl){
invokerUtil.post(serviceUrl, payload,
function(message){
console.log(message);
}, function (message) {
console.log(message);
});
}
$(document).ready(function(){
$(".panel-body").removeClass("hidden");
$("#loading-content").remove();
loadOperationBar(deviceType);
loadOperationsLog();
loadApplicationsList();
loadPolicyCompliance();
$("#refresh-policy").click(function () {
$('#policy-spinner').removeClass('hidden');
loadPolicyCompliance();
});
$("#refresh-apps").click(function () {
$('#apps-spinner').removeClass('hidden');
loadApplicationsList();
});
$("#refresh-operations").click(function () {
$('#operations-spinner').removeClass('hidden');
loadOperationsLog(true);
});
});
function loadOperationsLog(update) {
var operationsLog = $("#operations-log");
var deviceListingSrc = operationsLog.attr("src");
var deviceId = operationsLog.data("device-id");
var deviceType = operationsLog.data("device-type");
$.template("operations-log", deviceListingSrc, function (template) {
var serviceURL = "/devicemgt_admin/operations/"+deviceType+"/"+deviceId;
var successCallback = function (data) {
data = JSON.parse(data);
$('#operations-spinner').addClass('hidden');
var viewModel = {};
viewModel.operations = data;
if(data.length > 0){
var content = template(viewModel);
if(!update) {
$("#operations-log-container").html(content);
operationTable = $('#operations-log-table').datatables_extended();
}else{
$('#operations-log-table').dataTable().fnClearTable();
for(var i=0; i < data.length; i++) {
var status;
if(data[i].status == "COMPLETED") {
status = "<span><i class='fw fw-ok icon-success'></i> Completed</span>";
} else if(data[i].status == "PENDING") {
status = "<span><i class='fw fw-warning icon-warning'></i> Pending</span>";
} else if(data[i].status == "ERROR") {
status = "<span><i class='fw fw-error icon-danger'></i> Error</span>";
} else if(data[i].status == "IN_PROGRESS") {
status = "<span><i class='fw fw-ok icon-warning'></i> In Progress</span>";
}
$('#operations-log-table').dataTable().fnAddData([
data[i].code,
status,
data[i].createdTimeStamp
]);
}
}
}
};
invokerUtil.get(serviceURL,
successCallback, function(message){
console.log(message);
});
});
}
function loadApplicationsList() {
var applicationsList = $("#applications-list");
var deviceListingSrc = applicationsList.attr("src");
var deviceId = applicationsList.data("device-id");
var deviceType = applicationsList.data("device-type");
$.template("application-list", deviceListingSrc, function (template) {
var serviceURL = "/devicemgt_admin/operations/"+deviceType+"/"+deviceId+"/apps";
var successCallback = function (data) {
data = JSON.parse(data);
$('#apps-spinner').addClass('hidden');
var viewModel = {};
if(data != null && data.length > 0) {
for (var i = 0; i < data.length; i++) {
data[i].name = data[i].name.replace(/[^\w\s]/gi, ' ');
data[i].name = data[i].name.replace(/[0-9]/g, ' ');
}
}
viewModel.applications = data;
viewModel.deviceType = deviceType;
if(data.length > 0){
var content = template(viewModel);
$("#applications-list-container").html(content);
}
};
invokerUtil.get(serviceURL,
successCallback, function(message){
console.log(message);
});
});
}
function loadPolicyCompliance() {
var policyCompliance = $("#policy-view");
var policySrc = policyCompliance.attr("src");
var deviceId = policyCompliance.data("device-id");
var deviceType = policyCompliance.data("device-type");
var activePolicy = null;
$.template("policy-view", policySrc, function (template) {
var serviceURLPolicy ="/devicemgt_admin/policies/"+deviceType+"/"+deviceId+"/active-policy"
var serviceURLCompliance = "/devicemgt_admin/policies/"+deviceType+"/"+deviceId;
var successCallbackCompliance = function (data) {
var viewModel = {};
viewModel.policy = activePolicy;
viewModel.deviceType = deviceType;
if(data != null && data.complianceFeatures!= null && data.complianceFeatures != undefined && data.complianceFeatures.length > 0) {
viewModel.compliance = "NON-COMPLIANT";
viewModel.complianceFeatures = data.complianceFeatures;
var content = template(viewModel);
$("#policy-list-container").html(content);
} else {
viewModel.compliance = "COMPLIANT";
var content = template(viewModel);
$("#policy-list-container").html(content);
$("#policy-compliance-table").addClass("hidden");
}
};
var successCallbackPolicy = function (data) {
data = JSON.parse(data);
$('#policy-spinner').addClass('hidden');
if(data != null && data.active == true){
activePolicy = data;
invokerUtil.get(serviceURLCompliance,
successCallbackCompliance, function(message){
console.log(message);
});
}
};
invokerUtil.get(serviceURLPolicy,
successCallbackPolicy, function(message){
console.log(message);
});
});
}
}());

@ -1,55 +0,0 @@
/*
* 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
*
* 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
* specific language governing permissions and limitations
* under the License.
*/
$(document).ready(function(){
if (document.getElementById('device-location')){
loadMap();
}
});
function loadMap() {
var map;
function initialize() {
var mapOptions = {
zoom: 18
};
var lat = $("#device-location").data("lat");
var long = $("#device-location").data("long");
if(lat != null && lat != undefined && lat != "" && long != null && long != undefined && long != "") {
$("#map-error").hide();
$("#device-location").show();
map = new google.maps.Map(document.getElementById('device-location'),
mapOptions);
var pos = new google.maps.LatLng(lat,
long);
var marker = new google.maps.Marker({
position: pos,
map: map
});
map.setCenter(pos);
}else{
$("#device-location").hide();
$("#map-error").show();
}
}
google.maps.event.addDomListener(window, 'load', initialize);
}

@ -1,12 +0,0 @@
<div class="wr-app-listing">
<div class="wr-applist">
{{#each applications}}
<a style="text-align: center;width: 100px;height: 100px;">
{{#equal platform "android"}}<i class="fw fw-android"></i>{{/equal}}
{{#equal platform "ios"}}<i class="fw fw-apple"></i>{{/equal}}
{{#equal platform "windows"}}<i class="fw fw-windows"></i>{{/equal}}
<span>{{name}}</span>
</a>
{{/each}}
</div>
</div>

@ -1,24 +0,0 @@
<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>
{{#each operations}}
<tr data-type="selectable" data-id="{{id}}">
<td data-display="{{code}}" data-grid-label="Code">{{code}}</td>
<td data-display="{{status}}" data-grid-label="Status">
{{#equal status "COMPLETED"}}<span><i class="fw fw-ok icon-success"></i> Completed</span>{{/equal}}
{{#equal status "PENDING"}}<span><i class="fw fw-warning icon-warning"></i> Pending</span>{{/equal}}
{{#equal status "ERROR"}}<span><i class="fw fw-error icon-danger"></i> Error</span>{{/equal}}
{{#equal status "IN_PROGRESS"}}<span><i class="fw fw-ok icon-warning"></i> In Progress</span>{{/equal}}
</td>
<td data-display="{{createdTimeStamp}}" data-grid-label="Created Timestamp">{{createdTimeStamp}}</td>
</tr>
{{/each}}
<br class="c-both" />
</tbody>
</table>

@ -1,79 +0,0 @@
<div class="wr-list-group wr-sortable policy-list">
<span class="list-group-item" id="{{id}}">
<div class="row">
<div class="col-lg-3 clearfix">
<span class="wr-list-icon">
{{#equal deviceType "android"}}
<i class=" fw fw-android"></i>
{{/equal}}
{{#equal deviceType "ios"}}
<i class=" fw fw-apple"></i>
{{/equal}}
{{#equal deviceType "windows"}}
<i class=" fw fw-windows"></i>
{{/equal}}
</span>
<span class="wr-list-desc">
<h3 class="wr-list-name">{{policy.policyName}}</h3>
<span class="wr-list-username">{{deviceType}}</span>
</span>
</div>
<div class="col-lg-6">
<div class="row no-gutter">
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Ownership Type : </b> {{policy.ownershipType}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance Type :</b> {{policy.compliance}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance :</b>
{{#equal compliance "COMPLIANT"}}
<span><i class="fw fw-ok icon-success"></i> Compliant</span>
{{/equal}}
{{#equal compliance "NON-COMPLIANT"}}
<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>
{{/equal}}
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<span class="list-group-item-actions">
<a href="/mdm/policies/view?id={{policy.id}}" class="cu-btn-inner policy-view-link" data-id="{{id}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-view fw-stack-1x"></i>
</span>
View
</a>
</span>
</div>
</div>
</span>
</div>
<table class="table table-striped table-hover table-bordered display data-table" id="policy-compliance-table">
<thead>
<tr class="sort-row">
<th>Feature</th>
<th>Compliance</th>
</tr>
</thead>
<tbody>
{{#each complianceFeatures}}
<tr data-type="selectable">
<td data-display="{{featureCode}}" data-grid-label="Feature Code">{{featureCode}}</td>
<td data-display="{{compliance}}" data-grid-label="Status">
{{#equal compliance true}}<span><i class="fw fw-ok icon-success"></i> Compliant</span>{{/equal}}
{{#equal compliance false}}<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>{{/equal}}
</td>
</tr>
{{/each}}
<br class="c-both" />
</tbody>
</table>

@ -1,6 +1,15 @@
{{#zone "topCss"}}
<style>
.thumbnail.icon:before {
padding-top: 0;
}
</style>
{{/zone}}
{{#zone "device-thumbnail"}}
<img src="{{@unit.publicUri}}/images/firealarm-icon.png"/>
{{/zone}}
{{#zone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
@ -9,6 +18,7 @@
{{unit "iot.unit.device.operation" device=device}}
</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">

Loading…
Cancel
Save