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

145
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

@ -46,7 +46,125 @@
});
function loadOperationsLog(update) {
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 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) {
@ -65,19 +183,26 @@
pageLength: 10,
order: [],
ajax: {
url: "/devicemgt/api/operation/paginate",
data: {deviceId : deviceIdentifier, deviceType: deviceType, owner: deviceOwner},
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) {
columnDefs: [{
targets: 0,
data: "code"
},
{
targets: 1,
data: "status",
render: function(status) {
var html;
switch (status) {
case "COMPLETED":
@ -99,8 +224,10 @@
return html;
}
},
{targets: 2, data: "createdTimeStamp", render:
function (date) {
{
targets: 2,
data: "createdTimeStamp",
render: function(date) {
var value = String(date);
return value.slice(0, 16);
}

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
under the License.
}}
{{#zone "topCss"}}
{{css "css/main.css"}}
{{/zone}}
{{unit "cdmf.unit.lib.editable"}}
{{#zone "content"}}
{{#if deviceFound}}
{{#if isAuthorized}}
<span id="logged-in-user" class="hidden" data-username="{{@user.username}}" data-domain="{{@user.domain}}"
data-tenant-id="{{@user.tenantId}}" data-iscloud="{{isCloud}}"></span>
<div class="row">
<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"}}
<h1 class="page-sub-title device-id device-select" data-deviceid="{{device.deviceIdentifier}}"
data-type="{{device.type}}">
Device {{device.name}}
<h1 data-deviceid="{{device.deviceIdentifier}}"
data-type="{{device.type}}"
data-ownership="{{device.ownership}}"
data-owner="{{device.owner}}">
{{#if device.viewModel.model}}
<span class="lbl-device">
( {{device.viewModel.vendor}} {{device.viewModel.model}} )
</span>
<h4>{{device.viewModel.vendor}} {{device.viewModel.model}}</h4>
{{/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>
<h4>Ownership - <strong>{{device.viewModel.ownership}}</strong></h4>
<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>
{{/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}}
</div>
</div>
<div class="vital-strip">
{{#defineZone "device-details"}}
{{/defineZone}}
{{#defineZone "operation-status"}}{{/defineZone}}
</div>
{{#defineZone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
<div class="operation-container">
<div class="operation-title">
<h4>Device Operations</h4>
</div>
<div class="add-margin-top-4x" style="height: 90px;">
{{unit "cdmf.unit.device.operation-bar" device=device}}
</div>
{{/defineZone}}
<div class="clearfix"></div>
</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">
<!-- /col-lg-4 -->
<div class="col-lg-8">
<ul class="nav nav-tabs">
{{#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}}
<li class="active"><a data-toggle="tab" href="#event_log">Operations Log</a></li>
{{#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}}
</ul>
</div>
<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>
<div class="tab-content">
{{#defineZone "device-view-tab-contents"}}
{{#defineZone "device-details-tab-contents"}}
<div class="message message-info">
<h4 class="remove-margin">
<i class="icon fw fw-info"></i>
No Device details avaialbe yet.
</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"
<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">
@ -154,17 +112,17 @@
</thead>
<tbody>
</tbody>
</table>
</div>
</table> -->
</div>
</div>
{{#defineZone "device-view-tab-injected-conents"}}
{{/defineZone}}
{{/defineZone}}
</div>
</div>
</div>
<!-- /col-lg-08 -->
</div>
<!-- /row -->
{{else}}
<h1 class="page-sub-title">
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;
text-decoration: none;
margin-right: 10px;
color: #526A84;
/*color: #526A84;*/
color: #333;
min-width: 70px;
background: #fafafa;
padding: 2px 10px 10px 10px;

Write Preview
Loading…
Cancel
Save