Add Sonar graph to analytics. Fix undefined content issue in device details

application-manager-new
charithag 9 years ago
parent 019f077ea4
commit d7c6c083a0

@ -79,6 +79,7 @@ function getFireAlarmData(user, deviceId, from, to) {
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to); result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to);
result['fanData'] = getSensorData("DEVICE_FAN_USAGE_SUMMARY", "status", user, deviceId, from, to); result['fanData'] = getSensorData("DEVICE_FAN_USAGE_SUMMARY", "status", user, deviceId, from, to);
result['bulbData'] = getSensorData("DEVICE_BULB_USAGE_SUMMARY", "status", user, deviceId, from, to); result['bulbData'] = getSensorData("DEVICE_BULB_USAGE_SUMMARY", "status", user, deviceId, from, to);
result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY", "sonar", user, deviceId, from, to);
return result; return result;
} }

@ -0,0 +1,9 @@
{{authorized}}
{{layout "fluid"}}
{{#zone "title"}}
WSO2 DC | Analytics
{{/zone}}
{{#zone "body"}}
{{unit "appbar" link="analytics" title="Group Analytics"}}
{{unit "analytics"}}
{{/zone}}

@ -1,9 +1,10 @@
{{#zone "main"}} {{#zone "main"}}
<span id="request-group-id" data-groupId="{{groupId}}"></span>
<div class="container container-bg white-bg"> <div class="container container-bg white-bg">
<div class=" margin-top-double"> <div class=" margin-top-double">
<div class="row row padding-top-double padding-bottom-double margin-bottom-double "> <div class="row row padding-top-double padding-bottom-double margin-bottom-double ">
<div class="col-lg-12 margin-top-double"> <div class="col-lg-12 margin-top-double">
<h1 class="grey ">Device Statistics</h1> <h1 class="grey ">{{title}}</h1>
<hr> <hr>
</div> </div>
</div> </div>

@ -1,4 +1,13 @@
function onRequest(context){ function onRequest(context){
context.sketchPath = "api/device/sketch"; context.sketchPath = "api/device/sketch";
var groupId = request.getParameter("groupId");
if (groupId){
context.groupId = groupId;
context.title = "Group Analytics";
}else{
context.groupId = 0;
context.title = "Device Analytics";
}
return context; return context;
} }

@ -1,22 +1,22 @@
{{#zone "main"}} {{#zone "main"}}
<div class="row wr-device-board"> <div class="row wr-device-board">
<div class="col-lg-12 wr-secondary-bar"> <div class="col-lg-12 wr-secondary-bar">
<label class="device-id device-select" data-deviceid="{{device.deviceIdentifier}}" data-type="{{device.type}}"> <label class="device-id device-select" data-deviceid="{{device.deviceIdentifier}}"
data-type="{{device.type}}">
Device {{device.name}} Device {{device.name}}
<span class="lbl-device"> <span class="lbl-device">
{{#if device.viewModel.vendor}} {{#if device.viewModel.vendor}}
({{device.viewModel.vendor}} {{device.viewModel.model}}) ({{device.viewModel.vendor}} {{device.viewModel.model}})
{{/if}} {{/if}}
</span> </span>
</label> </label>
</div> </div>
</div> </div>
<div class="wr-device-list row"> <div class="wr-device-list row">
<div class="wr-hidden-operations wr-advance-operations"> <div class="wr-hidden-operations wr-advance-operations">
</div> </div>
<div class="col-md-12 wr-page-content"> <div class="col-md-12 wr-page-content">
{{unit "operation-bar" deviceType=device.type}} {{unit "operation-bar" deviceType=device.type}}
<div class="row"> <div class="row">
<div class="col-md-12 wr-stats-board"> <div class="col-md-12 wr-stats-board">
@ -25,11 +25,12 @@
<div class="col-lg-2 ast-desc-image"> <div class="col-lg-2 ast-desc-image">
<div class="row"> <div class="row">
<div class="col-lg-12 col-sm-4"> <div class="col-lg-12 col-sm-4">
<img src="{{self.publicURL}}/img/device_icons/{{device.type}}.png" style="width:200px" /> <img src="{{self.publicURL}}/img/device_icons/{{device.type}}.png" style="width:200px"/>
</div> </div>
<div class="col-lg-12 col-sm-4 ast-desc"> <div class="col-lg-12 col-sm-4 ast-desc">
<div class="ast-device-desc"><b>Owner:</b> {{device.owner}}</div> <div class="ast-device-desc"><b>Owner:</b> {{device.owner}}</div>
<div class="ast-device-desc"><b>Date of Enrollment:</b><br/> <span class="formatDate">{{device.enrollment}}</span></div> <div class="ast-device-desc"><b>Date of Enrollment:</b><br/> <span
class="formatDate">{{device.dateOfEnrolment}}</span></div>
<!--<div class="ast-device-desc"><b>Device:</b> {{device.viewModel.vendor}} {{device.properties.model}}</div>--> <!--<div class="ast-device-desc"><b>Device:</b> {{device.viewModel.vendor}} {{device.properties.model}}</div>-->
<!--<div class="ast-device-desc"><b>Model:</b> {{device.viewModel.model}}</div>--> <!--<div class="ast-device-desc"><b>Model:</b> {{device.viewModel.model}}</div>-->
<!--<div class="ast-device-desc"><b>IMEI:</b> {{device.viewModel.imei}}</div>--> <!--<div class="ast-device-desc"><b>IMEI:</b> {{device.viewModel.imei}}</div>-->
@ -45,7 +46,7 @@
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-6"> <div class="col-lg-6 col-md-6">
{{#if device.viewModel.BatteryLevel}} {{#if device.viewModel.BatteryLevel}}
<div class="col-lg-4"> <div class="col-lg-4">
<div class="wr-stats-board-tile"> <div class="wr-stats-board-tile">
<div class="tile-name">BATTERY</div> <div class="tile-name">BATTERY</div>
@ -55,41 +56,47 @@
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
{{#if device.viewModel.DeviceCapacity}} {{#if device.viewModel.DeviceCapacity}}
<div class="col-lg-4"> <div class="col-lg-4">
<div class="wr-stats-board-tile"> <div class="wr-stats-board-tile">
<div class="tile-name">STORAGE</div> <div class="tile-name">STORAGE</div>
<div> <div>
<div class="tile-icon"><i class="fw fw-hdd"></i></div> <div class="tile-icon"><i class="fw fw-hdd"></i></div>
<div class="tile-stats">{{device.viewModel.DeviceCapacityPercentage}}%<span class="tile-stats-free">{{device.viewModel.DeviceCapacityUsed}} GB Free</span></div> <div class="tile-stats">{{device.viewModel.DeviceCapacityPercentage}}
%<span class="tile-stats-free">{{device.viewModel.DeviceCapacityUsed}}
GB Free</span></div>
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
{{#if device.viewModel.internal_memory.FreeCapacity}} {{#if device.viewModel.internal_memory.FreeCapacity}}
<div class="col-lg-4"> <div class="col-lg-4">
<div class="wr-stats-board-tile"> <div class="wr-stats-board-tile">
<div class="tile-name">LOCAL STORAGE</div> <div class="tile-name">LOCAL STORAGE</div>
<div> <div>
<div class="tile-icon"><i class="fw fw-hdd"></i></div> <div class="tile-icon"><i class="fw fw-hdd"></i></div>
<div class="tile-stats">{{device.viewModel.internal_memory.DeviceCapacityPercentage}}%<span class="tile-stats-free">{{device.viewModel.internal_memory.FreeCapacity}} GB Free</span></div> <div class="tile-stats">{{device.viewModel.internal_memory.DeviceCapacityPercentage}}
%<span class="tile-stats-free">{{device.viewModel.internal_memory.FreeCapacity}}
GB Free</span></div>
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
{{#if device.viewModel.external_memory.FreeCapacity}} {{#if device.viewModel.external_memory.FreeCapacity}}
<div class="col-lg-4"> <div class="col-lg-4">
<div class="wr-stats-board-tile"> <div class="wr-stats-board-tile">
<div class="tile-name">EXTERNAL STORAGE</div> <div class="tile-name">EXTERNAL STORAGE</div>
<div> <div>
<div class="tile-icon"><i class="fw fw-hdd"></i></div> <div class="tile-icon"><i class="fw fw-hdd"></i></div>
<div class="tile-stats">{{device.viewModel.external_memory.DeviceCapacityPercentage}}%<span class="tile-stats-free">{{device.viewModel.external_memory.FreeCapacity}} GB Free</span></div> <div class="tile-stats">{{device.viewModel.external_memory.DeviceCapacityPercentage}}
%<span class="tile-stats-free">{{device.viewModel.external_memory.FreeCapacity}}
GB Free</span></div>
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
</div> </div>
</div> </div>
@ -101,7 +108,8 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour"> <div class="panel-heading" role="tab" id="headingFour">
<h2 class="sub-title panel-title"> <h2 class="sub-title panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i> <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
@ -110,9 +118,11 @@
</a> </a>
</h2> </h2>
</div> </div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingFour">
<div class="panel-body"> <div class="panel-body">
<a href="../../devices/analytics?deviceId={{deviceId}}&deviceType={{deviceType}}" ><i class="fw fw-charts"></i> Show Statistics</a> <a href="../../devices/analytics?deviceId={{deviceId}}&deviceType={{deviceType}}"><i
class="fw fw-charts"></i> Show Statistics</a>
</div> </div>
</div> </div>
</div> </div>
@ -120,22 +130,22 @@
<!-- device location --> <!-- device location -->
<!--<div class="panel panel-default">--> <!--<div class="panel panel-default">-->
<!--<div class="panel-heading" role="tab" id="headingOne">--> <!--<div class="panel-heading" role="tab" id="headingOne">-->
<!--<h2 class="sub-title panel-title">--> <!--<h2 class="sub-title panel-title">-->
<!--<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">--> <!--<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">-->
<!--<span class="fw-stack">--> <!--<span class="fw-stack">-->
<!--<i class="fw fw-ring fw-stack-2x"></i>--> <!--<i class="fw fw-ring fw-stack-2x"></i>-->
<!--<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>--> <!--<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>-->
<!--</span>--> <!--</span>-->
<!--Device Location--> <!--Device Location-->
<!--</a>--> <!--</a>-->
<!--</h2>--> <!--</h2>-->
<!--</div>--> <!--</div>-->
<!--<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">--> <!--<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">-->
<!--<div id="device-location" style="height:400px" class="panel-body">--> <!--<div id="device-location" style="height:400px" class="panel-body">-->
<!--</div>--> <!--</div>-->
<!--</div>--> <!--</div>-->
<!--</div>--> <!--</div>-->
<!-- /device location --> <!-- /device location -->
@ -143,7 +153,8 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo"> <div class="panel-heading" role="tab" id="headingTwo">
<h2 class="sub-title panel-title"> <h2 class="sub-title panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i> <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
@ -152,7 +163,8 @@
</a> </a>
</h2> </h2>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body"> <div class="panel-body">
Not available yet Not available yet
</div> </div>
@ -162,27 +174,26 @@
<!-- installed applications --> <!-- installed applications -->
<!--<div class="panel panel-default">--> <!--<div class="panel panel-default">-->
<!--<div class="panel-heading" role="tab" id="headingThree">--> <!--<div class="panel-heading" role="tab" id="headingThree">-->
<!--<h2 class="sub-title panel-title">--> <!--<h2 class="sub-title panel-title">-->
<!--<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">--> <!--<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">-->
<!--<span class="fw-stack">--> <!--<span class="fw-stack">-->
<!--<i class="fw fw-ring fw-stack-2x"></i>--> <!--<i class="fw fw-ring fw-stack-2x"></i>-->
<!--<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>--> <!--<i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>-->
<!--</span>--> <!--</span>-->
<!--Installed Applications--> <!--Installed Applications-->
<!--</a>--> <!--</a>-->
<!--</h2>--> <!--</h2>-->
<!--</div>--> <!--</div>-->
<!--<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">--> <!--<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">-->
<!--<div class="panel-body">--> <!--<div class="panel-body">-->
<!--Not available yet--> <!--Not available yet-->
<!--</div>--> <!--</div>-->
<!--</div>--> <!--</div>-->
<!--</div>--> <!--</div>-->
<!-- /installed applications --> <!-- /installed applications -->
</div> </div>
</div> </div>

@ -16,54 +16,13 @@
* under the License. * under the License.
*/ */
function formatDates(){ function formatDates() {
$(".formatDate").each(function(){ $(".formatDate").each(function () {
var timeStamp = $(this).html(); var timeStamp = $(this).html();
$(this).html(new Date(parseInt(timeStamp)).toUTCString()); $(this).html(new Date(parseInt(timeStamp)).toUTCString());
}); });
} }
(function () { $(document).ready(function () {
var deviceId = $(".device-id"); formatDates();
var deviceIdentifier = deviceId.data("deviceid"); });
var deviceType = deviceId.data("type");
var payload = [deviceIdentifier];
if (deviceType == "ios") {
var serviceUrl = "/ios/operation/deviceinfo";
} else if (deviceType == "android") {
var serviceUrl = "/mdm-android-agent/operation/device-info";
}
invokerUtil.post(serviceUrl, payload,
function(message){
console.log(message);
}, function (message) {
console.log(message);
});
$(document).ready(function(){
loadOperationBar(deviceType);
loadMap();
formatDates();
});
function loadMap(){
var map;
function initialize() {
var mapOptions = {
zoom: 18
};
var lat = 6.9098591;
var long = 79.8523753;
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
}());

@ -187,7 +187,7 @@ function loadDevices(searchType, searchParam) {
addDeviceSelectedClass(this); addDeviceSelectedClass(this);
}); });
attachEvents(); attachEvents();
//formatDates(); formatDates();
} }
}; };
invokerUtil.get(serviceURL, invokerUtil.get(serviceURL,
@ -374,81 +374,86 @@ function attachEvents() {
* when a user clicks on "Group" link * when a user clicks on "Group" link
* on Device Management page in WSO2 MDM Console. * on Device Management page in WSO2 MDM Console.
*/ */
$("a.group-device-link").click(function () { if (groupId && groupId != "0") {
var deviceId = $(this).data("deviceid"); $("a.group-device-link").remove();
var deviceType = $(this).data("devicetype"); }else{
var endPoint = "/iotserver/api/group/all"; $("a.group-device-link").click(function () {
var deviceId = $(this).data("deviceid");
var deviceType = $(this).data("devicetype");
var endPoint = "/iotserver/api/group/all";
$(modalPopupContent).html($('#group-device-modal-content').html()); $(modalPopupContent).html($('#group-device-modal-content').html());
$('#user-groups').html("Loading..."); $('#user-groups').html("Loading...");
$("a#group-device-yes-link").hide(); $("a#group-device-yes-link").hide();
showPopup(); showPopup();
invokerUtil.get(endPoint, invokerUtil.get(endPoint,
function (data, txtStatus, jqxhr) { function (data, txtStatus, jqxhr) {
var groups = JSON.parse(data); var groups = JSON.parse(data);
var status = jqxhr.status; var status = jqxhr.status;
if (status == 200) { if (status == 200) {
if (groups.length <= 0) { if (groups.length <= 0) {
$('#user-groups').html("There is no any groups available"); $('#user-groups').html("There is no any groups available");
return; return;
} }
var str = '<br /><select id="assign-group-selector" style="color:#3f3f3f;padding:5px;width:250px;">'; var str = '<br /><select id="assign-group-selector" style="color:#3f3f3f;padding:5px;width:250px;">';
for (var group in groups) { for (var group in groups) {
str += '<option value="' + groups[group].id + '">' + groups[group].name + '</option>'; str += '<option value="' + groups[group].id + '">' + groups[group].name + '</option>';
} }
str += '</select>'; str += '</select>';
$('#user-groups').html(str); $('#user-groups').html(str);
$("a#group-device-yes-link").show(); $("a#group-device-yes-link").show();
$("a#group-device-yes-link").click(function () { $("a#group-device-yes-link").click(function () {
var selectedGroupId = $('#assign-group-selector').val(); var selectedGroupId = $('#assign-group-selector').val();
endPoint = "/iotserver/api/group/id/" + selectedGroupId + "/assign"; endPoint = "/iotserver/api/group/id/" + selectedGroupId + "/assign";
var device = {"deviceId": deviceId, "deviceType": deviceType}; var device = {"deviceId": deviceId, "deviceType": deviceType};
invokerUtil.post( invokerUtil.post(
endPoint, endPoint,
device, device,
function (data, txtStatus, jqxhr) { function (data, txtStatus, jqxhr) {
var status = jqxhr.status; var status = jqxhr.status;
if (status == 200) { if (status == 200) {
$(modalPopupContent).html($('#group-associate-device-200-content').html()); $(modalPopupContent).html($('#group-associate-device-200-content').html());
$("a#group-associate-device-200-link").click(function () { $("a#group-associate-device-200-link").click(function () {
hidePopup(); hidePopup();
}); });
} else if (status == 400) { } else if (status == 400) {
$(modalPopupContent).html($('#device-400-content').html()); $(modalPopupContent).html($('#device-400-content').html());
$("a#device-400-link").click(function () { $("a#device-400-link").click(function () {
hidePopup(); hidePopup();
}); });
} else if (status == 403) { } else if (status == 403) {
$(modalPopupContent).html($('#device-403-content').html()); $(modalPopupContent).html($('#device-403-content').html());
$("a#device-403-link").click(function () { $("a#device-403-link").click(function () {
hidePopup(); hidePopup();
}); });
} else if (status == 409) { } else if (status == 409) {
$(modalPopupContent).html($('#device-409-content').html()); $(modalPopupContent).html($('#device-409-content').html());
$("a#device-409-link").click(function () { $("a#device-409-link").click(function () {
hidePopup();
});
}
},
function () {
$(modalPopupContent).html($('#device-unexpected-error-content').html());
$("a#device-unexpected-error-link").click(function () {
hidePopup(); hidePopup();
}); });
}
},
function () {
$(modalPopupContent).html($('#device-unexpected-error-content').html());
$("a#device-unexpected-error-link").click(function () {
hidePopup();
}); });
}); });
}
},
function () {
$(modalPopupContent).html($('#device-unexpected-error-content').html());
$("a#device-unexpected-error-link").click(function () {
hidePopup();
}); });
}
},
function () {
$(modalPopupContent).html($('#device-unexpected-error-content').html());
$("a#device-unexpected-error-link").click(function () {
hidePopup();
}); });
});
$("a#group-device-cancel-link").click(function () { $("a#group-device-cancel-link").click(function () {
hidePopup(); hidePopup();
});
}); });
});
}
} }

@ -14,10 +14,10 @@
<div class="ast-title"> <div class="ast-title">
<h3 class="ast-name">{{name}}</h3> <h3 class="ast-name">{{name}}</h3>
<span class="ast-auth">Device Type: {{type}}</span> <span class="ast-auth">Device Type: {{type}}</span>
<span class="ast-auth">Date of Enrollment: <span class="formatDate">{{dateOfEnrolment}}</span></span> <span class="ast-auth">Date of Enrollment: <span class="formatDate">{{enrolmentInfo.dateOfEnrolment}}</span></span>
</div> </div>
<div class="ast-model"> <div class="ast-model">
<span class="ast-ver">{{owner}}</span> <span class="ast-ver">{{enrolmentInfo.owner}}</span>
<span class="ast-published">{{status}}</span> <span class="ast-published">{{status}}</span>
<div class="ast-btn-group"> <div class="ast-btn-group">

Loading…
Cancel
Save