community
/
device-mgt-core
12
0
Fork 47
Code Issues Pull Requests 26 Packages Projects Releases Wiki Activity

Applying new UX design for device details default unit

Browse Source
merge-requests/1/head
dunithd 8 years ago
parent 4cf3e2d421
commit c832f1b5a9
3 changed files with 397 additions and 311 deletions
Show Stats Download Patch File Download Diff File

195
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/public/js/device-view.js
Unescape View File

@ -16,12 +16,12 @@
* under the License. * under the License.
*/ */
var deviceId = $(".device-id"); var deviceId = $(".device-id");
var deviceIdentifier = deviceId.data("deviceid"); var deviceIdentifier = deviceId.data("deviceid");
var deviceType = deviceId.data("type"); var deviceType = deviceId.data("type");
var deviceOwner = deviceId.data("owner"); var deviceOwner = deviceId.data("owner");
$(document).ready(function () { $(document).ready(function() {
$(".panel-body").removeClass("hidden"); $(".panel-body").removeClass("hidden");
$("#loading-content").remove(); $("#loading-content").remove();
@ -34,25 +34,143 @@
} }
$("#refresh-policy").click(function () { $("#refresh-policy").click(function() {
$('#policy-spinner').removeClass('hidden'); $('#policy-spinner').removeClass('hidden');
loadPolicyCompliance(); loadPolicyCompliance();
}); });
$("#refresh-operations").click(function () { $("#refresh-operations").click(function() {
$('#operations-spinner').removeClass('hidden'); $('#operations-spinner').removeClass('hidden');
loadOperationsLog(true); loadOperationsLog(true);
}); });
});
function loadOperationsLog() {
var table = $('#operation-log').DataTable({
serverSide: true,
processing: false,
searching: false,
ordering: false,
pageLength: 10,
order: [],
autoWidth: false,
ajax: {
url: "/devicemgt/api/operation/paginate",
data: {
deviceId: deviceIdentifier,
deviceType: deviceType,
owner: deviceOwner
},
dataSrc: function(json) {
$("#operations-spinner").addClass("hidden");
$("#operations-log-container").empty();
return json.data;
}
},
columnDefs: [{
targets: 0,
data: "code",
class: "icon-only content-fill"
},
{
targets: 1,
data: "createdTimeStamp",
class: "text-right",
render: function(date) {
var value = String(date);
return value.slice(0, 16);
}
},
{
targets: 2,
data: "status",
class: "text-right extended-log-data log-record-status",
render: function(data, type, full, meta) {
return '<i class="icon fw fw-success"></i><span> ' + data + ' </span><i class="icon fw fw-down"></i>';
},
width: "100%"
}
],
fnCreatedRow: function(nRow, aData, iDataIndex) {
$('td:eq(0)', nRow)
.attr('data-search', aData.Device_Type)
.attr('data-display', aData.Device_Type)
.addClass(' icon-only content-fill');
$('td:eq(1), td:eq(2)', nRow).addClass('text-right');
$('td:eq(2)', nRow).addClass('log-record-status')
}
});
$('#operation-log tbody').on('click', 'td.extended-log-data', function() {
var tr = $(this).closest('tr');
var row = table.row(tr);
var rowData = row.data()
var deviceid = $('.device-id').data('deviceid');
var deviceType = $('.device-id').data('type');
var uri = "/api/device-mgt/v1.0/activities/" + rowData.activityId + "/" + deviceType + "/" + deviceid;
var contentType = "application/json";
if (row.child.isShown()) {
row.child.hide();
$(row.child()).removeClass('log-data-row');
tr.removeClass('shown');
} else {
invokerUtil.get(uri,(payload) => {
row.child(renderLogDetails(row.data(),payload)).show();
$(row.child()).addClass('log-data-row');
tr.addClass('shown');
},(error) => {
},contentType);
}
}); });
function loadOperationsLog(update) { function renderLogDetails(obj,data) {
var payload = JSON.parse(data);
var logStream = '<div class="log-data">';
Object.entries(payload.activityStatus).forEach(
([key, entry]) => {
logStream += '<div class="row log-entry">' +
'<div class="col-lg-8">' +
'<div class="log-status"><i class="icon fw ' + getLogStatusIcon(entry.status) + ' "></i>' +
'<span>' + entry.status + '</span></div>' +
'</div>' +
'<div class="col-lg-4">' +
'<div class="log-time text-right"><span>' + entry.updatedTimestamp + '</span></div>' +
'</div>' +
'</div>';
}
);
logStream += '</div></div>';
return logStream;
function getLogStatusIcon(entry) {
switch (entry) {
case 'COMPLETED':
return 'fw-success'
break;
case 'PENDING':
return 'fw-pending'
break;
default:
return 'fw-info'
}
}
}
}
function loadOperationsLog2(update) {
var operationsLogTable = "#operations-log-table"; var operationsLogTable = "#operations-log-table";
if (update) { if (update) {
operationTable = $(operationsLogTable).DataTable(); operationTable = $(operationsLogTable).DataTable();
$("#operations-spinner").removeClass("hidden"); $("#operations-spinner").removeClass("hidden");
operationTable.ajax.reload(function ( json ) { operationTable.ajax.reload(function(json) {
$("#operations-spinner").addClass("hidden"); $("#operations-spinner").addClass("hidden");
}, false); }, false);
return; return;
@ -62,45 +180,54 @@
processing: false, processing: false,
searching: false, searching: false,
ordering: false, ordering: false,
pageLength : 10, pageLength: 10,
order: [], order: [],
ajax: { ajax: {
url: "/devicemgt/api/operation/paginate", url: "/devicemgt/api/operation/paginate",
data: {deviceId : deviceIdentifier, deviceType: deviceType, owner: deviceOwner}, data: {
dataSrc: function (json) { deviceId: deviceIdentifier,
deviceType: deviceType,
owner: deviceOwner
},
dataSrc: function(json) {
$("#operations-spinner").addClass("hidden"); $("#operations-spinner").addClass("hidden");
$("#operations-log-container").empty(); $("#operations-log-container").empty();
return json.data; return json.data;
} }
}, },
columnDefs: [ columnDefs: [{
{targets: 0, data: "code" }, targets: 0,
{targets: 1, data: "status", render: data: "code"
function (status) { },
{
targets: 1,
data: "status",
render: function(status) {
var html; var html;
switch (status) { switch (status) {
case "COMPLETED" : case "COMPLETED":
html = "<span><i class='fw fw-success icon-success'></i> Completed</span>"; html = "<span><i class='fw fw-success icon-success'></i> Completed</span>";
break; break;
case "PENDING" : case "PENDING":
html = "<span><i class='fw fw-warning icon-warning'></i> Pending</span>"; html = "<span><i class='fw fw-warning icon-warning'></i> Pending</span>";
break; break;
case "ERROR" : case "ERROR":
html = "<span><i class='fw fw-error icon-danger'></i> Error</span>"; html = "<span><i class='fw fw-error icon-danger'></i> Error</span>";
break; break;
case "IN_PROGRESS" : case "IN_PROGRESS":
html = "<span><i class='fw fw-success icon-warning'></i> In Progress</span>"; html = "<span><i class='fw fw-success icon-warning'></i> In Progress</span>";
break; break;
case "REPEATED" : case "REPEATED":
html = "<span><i class='fw fw-success icon-warning'></i> Repeated</span>"; html = "<span><i class='fw fw-success icon-warning'></i> Repeated</span>";
break; break;
} }
return html; return html;
} }
}, },
{targets: 2, data: "createdTimeStamp", render: {
function (date) { targets: 2,
data: "createdTimeStamp",
render: function(date) {
var value = String(date); var value = String(date);
return value.slice(0, 16); return value.slice(0, 16);
} }
@ -112,7 +239,7 @@
$(row).attr("data-id", data["id"]); $(row).attr("data-id", data["id"]);
$.each($("td", row), $.each($("td", row),
function(colIndex) { function(colIndex) {
switch(colIndex) { switch (colIndex) {
case 1: case 1:
$(this).attr("data-grid-label", "Code"); $(this).attr("data-grid-label", "Code");
$(this).attr("data-display", data["code"]); $(this).attr("data-display", data["code"]);
@ -130,9 +257,9 @@
); );
} }
}); });
} }
function loadPolicyCompliance() { function loadPolicyCompliance() {
var policyCompliance = $("#policy-view"); var policyCompliance = $("#policy-view");
var policyComplianceTemplate = policyCompliance.attr("src"); var policyComplianceTemplate = policyCompliance.attr("src");
var deviceId = policyCompliance.data("device-id"); var deviceId = policyCompliance.data("device-id");
@ -142,23 +269,23 @@
$.template( $.template(
"policy-view", "policy-view",
policyComplianceTemplate, policyComplianceTemplate,
function (template) { function(template) {
var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy"; var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy";
var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data"; var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data";
invokerUtil.get( invokerUtil.get(
getEffectivePolicyURL, getEffectivePolicyURL,
// success-callback // success-callback
function (data, textStatus, jqXHR) { function(data, textStatus, jqXHR) {
if (jqXHR.status == 200) { if (jqXHR.status == 200) {
$("#policy-spinner").addClass("hidden"); $("#policy-spinner").addClass("hidden");
if(data){ if (data) {
data = JSON.parse(data); data = JSON.parse(data);
if (data["active"] == true) { if (data["active"] == true) {
activePolicy = data; activePolicy = data;
invokerUtil.get( invokerUtil.get(
getDeviceComplianceURL, getDeviceComplianceURL,
// success-callback // success-callback
function (data, textStatus, jqXHR) { function(data, textStatus, jqXHR) {
if (jqXHR.status == 200 && data) { if (jqXHR.status == 200 && data) {
var viewModel = {}; var viewModel = {};
viewModel["policy"] = activePolicy; viewModel["policy"] = activePolicy;
@ -188,7 +315,7 @@
} }
}, },
// error-callback // error-callback
function () { function() {
$("#policy-list-container"). $("#policy-list-container").
html("<div class='panel-body'><br><p class='fw-warning'> Loading policy compliance related data " + html("<div class='panel-body'><br><p class='fw-warning'> Loading policy compliance related data " +
"was not successful. please try refreshing data in a while.<p></div>"); "was not successful. please try refreshing data in a while.<p></div>");
@ -199,7 +326,7 @@
} }
}, },
// error-callback // error-callback
function () { function() {
$("#policy-list-container"). $("#policy-list-container").
html("<div class='panel-body'><br><p class='fw-warning'> Loading policy compliance related data " + html("<div class='panel-body'><br><p class='fw-warning'> Loading policy compliance related data " +
"was not successful. please try refreshing data in a while.<p></div>"); "was not successful. please try refreshing data in a while.<p></div>");
@ -207,4 +334,4 @@
); );
} }
); );
} }

178
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs
Unescape View File

@ -15,135 +15,93 @@
specific language governing permissions and limitations specific language governing permissions and limitations
under the License. under the License.
}} }}
{{#zone "topCss"}}
{{css "css/main.css"}}
{{/zone}}
{{unit "cdmf.unit.lib.editable"}} {{unit "cdmf.unit.lib.editable"}}
{{#zone "content"}} {{#zone "content"}}
{{#if deviceFound}} {{#if deviceFound}}
{{#if isAuthorized}} {{#if isAuthorized}}
<span id="logged-in-user" class="hidden" data-username="{{@user.username}}" data-domain="{{@user.domain}}" <div class="row">
data-tenant-id="{{@user.tenantId}}" data-iscloud="{{isCloud}}"></span> <div class="col-lg-4">
<div class="device-info-container">
<div class="row">
<div class="col-lg-3">
{{#defineZone "device-thumbnail"}}
<i class="fw fw-mobile device-type fw-2x"></i>
{{/defineZone}}
</div>
<div class="col-lg-9">
<div class="device-info">
{{#defineZone "device-details-header"}} {{#defineZone "device-details-header"}}
<h1 class="page-sub-title device-id device-select" data-deviceid="{{device.deviceIdentifier}}" <h1 data-deviceid="{{device.deviceIdentifier}}"
data-type="{{device.type}}"> data-type="{{device.type}}"
Device {{device.name}} data-ownership="{{device.ownership}}"
data-owner="{{device.owner}}">
{{#if device.viewModel.model}} {{#if device.viewModel.model}}
<span class="lbl-device"> <h4>{{device.viewModel.vendor}} {{device.viewModel.model}}</h4>
( {{device.viewModel.vendor}} {{device.viewModel.model}} )
</span>
{{/if}} {{/if}}
</h1> <h4>Ownership - <strong>{{device.viewModel.ownership}}</strong></h4>
{{/defineZone}} <h4>Device is
<div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;"> <strong>
<div class="media"> {{#equal device.status "ACTIVE"}}Active{{/equal}}
<div id="device_overview"> {{#equal device.status "INACTIVE"}}Inactive{{/equal}}
<div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2"> {{#equal device.status "BLOCKED"}}Blocked{{/equal}}
<div class="thumbnail icon"> {{#equal device.status "REMOVED"}}Removed{{/equal}}
{{#defineZone "device-thumbnail"}} {{#equal device.status "UNREACHABLE"}}Unreachable{{/equal}}
<i class="square-element text fw fw-mobile"></i> </strong>
</h4>
{{/defineZone}} {{/defineZone}}
</div> </div>
</div> </div>
</div>
<div class="media-body asset-desc add-padding-left-5x"> </div>
{{#defineZone "overview-section"}} <div class="vital-strip">
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px"> {{#defineZone "device-details"}}
Device Overview - {{label}}</div>
{{unit "cdmf.unit.device.overview-section" device=device}}
{{/defineZone}} {{/defineZone}}
{{#defineZone "operation-status"}}{{/defineZone}} </div>
{{#defineZone "device-opetations"}} {{#defineZone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px"> <div class="operation-container">
Operations <div class="operation-title">
<h4>Device Operations</h4>
</div> </div>
<div class="add-margin-top-4x" style="height: 90px;">
{{unit "cdmf.unit.device.operation-bar" device=device}} {{unit "cdmf.unit.device.operation-bar" device=device}}
</div> </div>
{{/defineZone}} {{/defineZone}}
<div class="clearfix"></div>
</div> </div>
</div> <!-- /col-lg-4 -->
</div> <div class="col-lg-8">
<ul class="nav nav-tabs">
<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">
{{#defineZone "device-view-tabs"}} {{#defineZone "device-view-tabs"}}
{{#defineZone "device-details-tab"}} <li class="active"><a data-toggle="tab" href="#event_log">Operations Log</a></li>
<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>
{{/defineZone}}
{{#defineZone "device-details-tab-injected"}} {{#defineZone "device-details-tab-injected"}}
{{/defineZone}} {{/defineZone}}
{{#defineZone "device-details-tab-operations"}}
<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>
{{/defineZone}}
{{/defineZone}} {{/defineZone}}
</ul> </ul>
</div> <div class="tab-content">
<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="{{device.isNotRemoved}}" aria-multiselectable="true">
<div class="arrow-left hidden-xs"></div>
{{#defineZone "device-view-tab-contents"}} {{#defineZone "device-view-tab-contents"}}
{{#defineZone "device-details-tab-contents"}} <div id="event_log" class="tab-pane fade in active">
<div class="message message-info"> <div class="clearfix"></div>
<h4 class="remove-margin"> <div class="operation-log-container">
<i class="icon fw fw-info"></i> <table class="table table-striped table-hover table-responsive list-table display responsive nowrap data-table"
No Device details avaialbe yet. id="operation-log">
</h4> <thead class="block">
</div> <tr class="sort-row">
{{/defineZone}} <!-- <th class="content-fill no-sort"></th> -->
<th>Name</th>
{{#defineZone "device-view-tab-injected-conents"}} <th>Position</th>
{{/defineZone}} <th>Office</th>
<!-- <th>Age</th>
{{#defineZone "device-view-tab-operations-log-conents"}} <th>Start date</th>
<div class="panel panel-default visible-xs-block" role="tabpanel" id="event_log_tab"> <th>Salary</th>
<div class="panel-heading visible-xs collapsed" id="event_log"> <th class="no-sort"></th> -->
<h4 class="panel-title"> </tr>
<a role="button" data-toggle="collapse" data-parent="#tabs" </thead>
href="#collapseFive" aria-expanded="true" aria-controls="collapseFive"> <tbody>
<i class="fw fw-text fw-2x"></i> </tbody>
Operations Log </table>
<i class="caret-updown fw fw-down"></i> <!-- <table class="table table-striped table-hover table-bordered display data-table"
</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"> id="operations-log-table">
<thead> <thead>
<tr class="sort-row"> <tr class="sort-row">
@ -154,17 +112,17 @@
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table> -->
</div>
</div> </div>
</div> </div>
{{#defineZone "device-view-tab-injected-conents"}}
{{/defineZone}} {{/defineZone}}
{{/defineZone}} {{/defineZone}}
</div>
</div> </div>
</div> </div>
<!-- /col-lg-08 -->
</div> </div>
<!-- /row -->
{{else}} {{else}}
<h1 class="page-sub-title"> <h1 class="page-sub-title">
Permission Denied Permission Denied

3
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-desktop.css
Unescape View File

@ -2859,7 +2859,8 @@ a.ast-type-item:hover {
font-size: 12px; font-size: 12px;
text-decoration: none; text-decoration: none;
margin-right: 10px; margin-right: 10px;
color: #526A84; /*color: #526A84;*/
color: #333;
min-width: 70px; min-width: 70px;
background: #fafafa; background: #fafafa;
padding: 2px 10px 10px 10px; padding: 2px 10px 10px 10px;

Write Preview
Loading…
Cancel
Save