inosh
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Applying new UX design for device details default unit

Browse Source
4.x.x
dunithd 7 years ago
parent 4cf3e2d421
commit c832f1b5a9
3 changed files with 397 additions and 311 deletions
Show Stats Download Patch File Download Diff File

463
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,195 +16,322 @@
* 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();
if ($('#event_log').length) { if ($('#event_log').length) {
loadOperationsLog(); loadOperationsLog();
} }
if ($('#policy_compliance').length) {
loadPolicyCompliance();
}
if ($('#policy_compliance').length) {
loadPolicyCompliance();
}
$("#refresh-policy").click(function () {
$('#policy-spinner').removeClass('hidden');
loadPolicyCompliance();
});
$("#refresh-operations").click(function () { $("#refresh-policy").click(function() {
$('#operations-spinner').removeClass('hidden'); $('#policy-spinner').removeClass('hidden');
loadOperationsLog(true); loadPolicyCompliance();
}); });
$("#refresh-operations").click(function() {
$('#operations-spinner').removeClass('hidden');
loadOperationsLog(true);
}); });
function loadOperationsLog(update) { });
var operationsLogTable = "#operations-log-table";
if (update) { function loadOperationsLog() {
operationTable = $(operationsLogTable).DataTable(); var table = $('#operation-log').DataTable({
$("#operations-spinner").removeClass("hidden"); serverSide: true,
operationTable.ajax.reload(function ( json ) { 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-spinner").addClass("hidden");
}, false); $("#operations-log-container").empty();
return; return json.data;
} }
operationTable = $(operationsLogTable).datatables_extended({ },
serverSide: true, columnDefs: [{
processing: false, targets: 0,
searching: false, data: "code",
ordering: false, class: "icon-only content-fill"
pageLength : 10, },
order: [], {
ajax: { targets: 1,
data: "createdTimeStamp",
url: "/devicemgt/api/operation/paginate", class: "text-right",
data: {deviceId : deviceIdentifier, deviceType: deviceType, owner: deviceOwner}, render: function(date) {
dataSrc: function (json) { var value = String(date);
$("#operations-spinner").addClass("hidden"); return value.slice(0, 16);
$("#operations-log-container").empty();
return json.data;
} }
}, },
columnDefs: [ {
{targets: 0, data: "code" }, targets: 2,
{targets: 1, data: "status", render: data: "status",
function (status) { class: "text-right extended-log-data log-record-status",
var html; render: function(data, type, full, meta) {
switch (status) { return '<i class="icon fw fw-success"></i><span> ' + data + ' </span><i class="icon fw fw-down"></i>';
case "COMPLETED" :
html = "<span><i class='fw fw-success icon-success'></i> Completed</span>";
break;
case "PENDING" :
html = "<span><i class='fw fw-warning icon-warning'></i> Pending</span>";
break;
case "ERROR" :
html = "<span><i class='fw fw-error icon-danger'></i> Error</span>";
break;
case "IN_PROGRESS" :
html = "<span><i class='fw fw-success icon-warning'></i> In Progress</span>";
break;
case "REPEATED" :
html = "<span><i class='fw fw-success icon-warning'></i> Repeated</span>";
break;
}
return html;
}
}, },
{targets: 2, data: "createdTimeStamp", render: width: "100%"
function (date) { }
var value = String(date); ],
return value.slice(0, 16); 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 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";
if (update) {
operationTable = $(operationsLogTable).DataTable();
$("#operations-spinner").removeClass("hidden");
operationTable.ajax.reload(function(json) {
$("#operations-spinner").addClass("hidden");
}, false);
return;
}
operationTable = $(operationsLogTable).datatables_extended({
serverSide: true,
processing: false,
searching: false,
ordering: false,
pageLength: 10,
order: [],
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"
},
{
targets: 1,
data: "status",
render: function(status) {
var html;
switch (status) {
case "COMPLETED":
html = "<span><i class='fw fw-success icon-success'></i> Completed</span>";
break;
case "PENDING":
html = "<span><i class='fw fw-warning icon-warning'></i> Pending</span>";
break;
case "ERROR":
html = "<span><i class='fw fw-error icon-danger'></i> Error</span>";
break;
case "IN_PROGRESS":
html = "<span><i class='fw fw-success icon-warning'></i> In Progress</span>";
break;
case "REPEATED":
html = "<span><i class='fw fw-success icon-warning'></i> Repeated</span>";
break;
} }
return html;
}
},
{
targets: 2,
data: "createdTimeStamp",
render: function(date) {
var value = String(date);
return value.slice(0, 16);
} }
],
"createdRow": function(row, data) {
$(row).attr("data-type", "selectable");
$(row).attr("data-id", data["id"]);
$.each($("td", row),
function(colIndex) {
switch(colIndex) {
case 1:
$(this).attr("data-grid-label", "Code");
$(this).attr("data-display", data["code"]);
break;
case 2:
$(this).attr("data-grid-label", "Status");
$(this).attr("data-display", data["status"]);
break;
case 3:
$(this).attr("data-grid-label", "Created Timestamp");
$(this).attr("data-display", data["createdTimeStamp"]);
break;
}
}
);
} }
}); ],
} "createdRow": function(row, data) {
$(row).attr("data-type", "selectable");
$(row).attr("data-id", data["id"]);
$.each($("td", row),
function(colIndex) {
switch (colIndex) {
case 1:
$(this).attr("data-grid-label", "Code");
$(this).attr("data-display", data["code"]);
break;
case 2:
$(this).attr("data-grid-label", "Status");
$(this).attr("data-display", data["status"]);
break;
case 3:
$(this).attr("data-grid-label", "Created Timestamp");
$(this).attr("data-display", data["createdTimeStamp"]);
break;
}
}
);
}
});
}
function loadPolicyCompliance() {
var policyCompliance = $("#policy-view");
var policyComplianceTemplate = policyCompliance.attr("src");
var deviceId = policyCompliance.data("device-id");
var deviceType = policyCompliance.data("device-type");
var activePolicy = null;
function loadPolicyCompliance() { $.template(
var policyCompliance = $("#policy-view"); "policy-view",
var policyComplianceTemplate = policyCompliance.attr("src"); policyComplianceTemplate,
var deviceId = policyCompliance.data("device-id"); function(template) {
var deviceType = policyCompliance.data("device-type"); var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy";
var activePolicy = null; var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data";
invokerUtil.get(
$.template( getEffectivePolicyURL,
"policy-view", // success-callback
policyComplianceTemplate, function(data, textStatus, jqXHR) {
function (template) { if (jqXHR.status == 200) {
var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy"; $("#policy-spinner").addClass("hidden");
var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data"; if (data) {
invokerUtil.get( data = JSON.parse(data);
getEffectivePolicyURL, if (data["active"] == true) {
// success-callback activePolicy = data;
function (data, textStatus, jqXHR) { invokerUtil.get(
if (jqXHR.status == 200) { getDeviceComplianceURL,
$("#policy-spinner").addClass("hidden"); // success-callback
if(data){ function(data, textStatus, jqXHR) {
data = JSON.parse(data); if (jqXHR.status == 200 && data) {
if (data["active"] == true) { var viewModel = {};
activePolicy = data; viewModel["policy"] = activePolicy;
invokerUtil.get( viewModel["deviceType"] = deviceType;
getDeviceComplianceURL, viewModel["deviceId"] = deviceId;
// success-callback viewModel["appContext"] = context;
function (data, textStatus, jqXHR) { data = JSON.parse(data);
if (jqXHR.status == 200 && data) { var content;
var viewModel = {}; if (data["complianceData"]) {
viewModel["policy"] = activePolicy; if (data["complianceData"]["complianceFeatures"] &&
viewModel["deviceType"] = deviceType; data["complianceData"]["complianceFeatures"].length > 0) {
viewModel["deviceId"] = deviceId; viewModel["compliance"] = "NON-COMPLIANT";
viewModel["appContext"] = context; viewModel["complianceFeatures"] = data["complianceData"]["complianceFeatures"];
data = JSON.parse(data); content = template(viewModel);
var content; $("#policy-list-container").html(content);
if (data["complianceData"]) {
if (data["complianceData"]["complianceFeatures"] &&
data["complianceData"]["complianceFeatures"].length > 0) {
viewModel["compliance"] = "NON-COMPLIANT";
viewModel["complianceFeatures"] = data["complianceData"]["complianceFeatures"];
content = template(viewModel);
$("#policy-list-container").html(content);
} else {
viewModel["compliance"] = "COMPLIANT";
content = template(viewModel);
$("#policy-list-container").html(content);
$("#policy-compliance-table").addClass("hidden");
}
} else { } else {
$("#policy-list-container"). viewModel["compliance"] = "COMPLIANT";
html("<div class='panel-body'><br><p class='fw-warning'> This device " + content = template(viewModel);
"has no policy applied.<p></div>"); $("#policy-list-container").html(content);
$("#policy-compliance-table").addClass("hidden");
} }
} else {
$("#policy-list-container").
html("<div class='panel-body'><br><p class='fw-warning'> This device " +
"has no policy applied.<p></div>");
} }
},
// error-callback
function () {
$("#policy-list-container").
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>");
} }
); },
} // error-callback
function() {
$("#policy-list-container").
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>");
}
);
} }
} }
},
// error-callback
function () {
$("#policy-list-container").
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>");
} }
); },
} // error-callback
); function() {
} $("#policy-list-container").
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>");
}
);
}
);
}

242
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,156 +15,114 @@
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">
{{#defineZone "device-details-header"}} <div class="device-info-container">
<h1 class="page-sub-title device-id device-select" data-deviceid="{{device.deviceIdentifier}}" <div class="row">
data-type="{{device.type}}"> <div class="col-lg-3">
Device {{device.name}} {{#defineZone "device-thumbnail"}}
{{#if device.viewModel.model}} <i class="fw fw-mobile device-type fw-2x"></i>
<span class="lbl-device">
( {{device.viewModel.vendor}} {{device.viewModel.model}} )
</span>
{{/if}}
</h1>
{{/defineZone}}
<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">
{{#defineZone "device-thumbnail"}}
<i class="square-element text fw fw-mobile"></i>
{{/defineZone}}
</div>
</div>
<div class="media-body asset-desc add-padding-left-5x">
{{#defineZone "overview-section"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Device Overview - {{label}}</div>
{{unit "cdmf.unit.device.overview-section" device=device}}
{{/defineZone}}
{{#defineZone "operation-status"}}{{/defineZone}}
{{#defineZone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
</div>
<div class="add-margin-top-4x" style="height: 90px;">
{{unit "cdmf.unit.device.operation-bar" device=device}}
</div>
{{/defineZone}}
</div>
</div>
</div>
<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-details-tab"}}
<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}}
{{#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> </div>
</div> <div class="col-lg-9">
<div class="media-body add-padding-left-5x remove-padding-xs"> <div class="device-info">
<div class="panel-group tab-content remove-padding" id="tabs" role="tablist" {{#defineZone "device-details-header"}}
data-status="{{device.isNotRemoved}}" aria-multiselectable="true"> <h1 data-deviceid="{{device.deviceIdentifier}}"
<div class="arrow-left hidden-xs"></div> data-type="{{device.type}}"
data-ownership="{{device.ownership}}"
{{#defineZone "device-view-tab-contents"}} data-owner="{{device.owner}}">
{{#defineZone "device-details-tab-contents"}} {{#if device.viewModel.model}}
<div class="message message-info"> <h4>{{device.viewModel.vendor}} {{device.viewModel.model}}</h4>
<h4 class="remove-margin"> {{/if}}
<i class="icon fw fw-info"></i> <h4>Ownership - <strong>{{device.viewModel.ownership}}</strong></h4>
No Device details avaialbe yet. <h4>Device is
<strong>
{{#equal device.status "ACTIVE"}}Active{{/equal}}
{{#equal device.status "INACTIVE"}}Inactive{{/equal}}
{{#equal device.status "BLOCKED"}}Blocked{{/equal}}
{{#equal device.status "REMOVED"}}Removed{{/equal}}
{{#equal device.status "UNREACHABLE"}}Unreachable{{/equal}}
</strong>
</h4> </h4>
</div>
{{/defineZone}}
{{#defineZone "device-view-tab-injected-conents"}}
{{/defineZone}}
{{#defineZone "device-view-tab-operations-log-conents"}}
<div class="panel panel-default visible-xs-block" role="tabpanel" id="event_log_tab">
<div class="panel-heading visible-xs collapsed" id="event_log">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tabs"
href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<i class="fw fw-text fw-2x"></i>
Operations Log
<i class="caret-updown fw fw-down"></i>
</a>
</h4>
</div>
<div class="panel-heading display-none-xs">
Operations Log
<span>
<a href="javascript:void(0);" id="refresh-operations">
<i class="fw fw-refresh"></i>
</a>
</span>
</div>
<div id="collapseFive" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="event_log">
<div class="panel-body">
<span class="visible-xs add-padding-2x text-right">
<a href="javascript:void(0);" id="refresh-operations">
<i class="fw fw-refresh"></i>
</a>
</span>
<div id="operations-spinner" class="wr-advance-operations-init hidden">
<i class="fw fw-settings fw-spin fw-2x"></i> Loading Operations Log...
</div>
<div id="operations-log-container">
<div class="message message-info">
<h4 class="remove-margin">
<i class="icon fw fw-info"></i>
There are no operations, performed yet on this device.
</h4>
</div>
</div>
<table class="table table-striped table-hover table-bordered display data-table"
id="operations-log-table">
<thead>
<tr class="sort-row">
<th>Operation Code</th>
<th>Status</th>
<th>Request created at</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
{{/defineZone}} {{/defineZone}}
{{/defineZone}} </div>
</div>
</div>
</div>
<div class="vital-strip">
{{#defineZone "device-details"}}
{{/defineZone}}
</div>
{{#defineZone "device-opetations"}}
<div class="operation-container">
<div class="operation-title">
<h4>Device Operations</h4>
</div>
{{unit "cdmf.unit.device.operation-bar" device=device}}
</div>
{{/defineZone}}
<div class="clearfix"></div>
</div>
<!-- /col-lg-4 -->
<div class="col-lg-8">
<ul class="nav nav-tabs">
{{#defineZone "device-view-tabs"}}
<li class="active"><a data-toggle="tab" href="#event_log">Operations Log</a></li>
{{#defineZone "device-details-tab-injected"}}
{{/defineZone}}
{{/defineZone}}
</ul>
<div class="tab-content">
{{#defineZone "device-view-tab-contents"}}
<div id="event_log" class="tab-pane fade in active">
<div class="clearfix"></div>
<div class="operation-log-container">
<table class="table table-striped table-hover table-responsive list-table display responsive nowrap data-table"
id="operation-log">
<thead class="block">
<tr class="sort-row">
<!-- <th class="content-fill no-sort"></th> -->
<th>Name</th>
<th>Position</th>
<th>Office</th>
<!-- <th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th class="no-sort"></th> -->
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- <table class="table table-striped table-hover table-bordered display data-table"
id="operations-log-table">
<thead>
<tr class="sort-row">
<th>Operation Code</th>
<th>Status</th>
<th>Request created at</th>
</tr>
</thead>
<tbody>
</tbody>
</table> -->
</div>
</div> </div>
</div> {{#defineZone "device-view-tab-injected-conents"}}
</div> {{/defineZone}}
{{/defineZone}}
</div>
</div>
<!-- /col-lg-08 -->
</div> </div>
<!-- /row -->
{{else}} {{else}}
<h1 class="page-sub-title"> <h1 class="page-sub-title">
Permission Denied Permission Denied
@ -192,4 +150,4 @@
<script id="applications-list" src="{{@unit.publicUri}}/templates/applications-list.hbs" <script id="applications-list" src="{{@unit.publicUri}}/templates/applications-list.hbs"
data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}" data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}"
type="text/x-handlebars-template"></script> type="text/x-handlebars-template"></script>
{{/zone}} {{/zone}}

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