mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Applying new UX design for device details default unit
This commit is contained in:
dunithd
parent
4cf3e2d421
commit
c832f1b5a9
@ -16,195 +16,322 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
var deviceId = $(".device-id");
|
||||
var deviceIdentifier = deviceId.data("deviceid");
|
||||
var deviceType = deviceId.data("type");
|
||||
var deviceOwner = deviceId.data("owner");
|
||||
var deviceId = $(".device-id");
|
||||
var deviceIdentifier = deviceId.data("deviceid");
|
||||
var deviceType = deviceId.data("type");
|
||||
var deviceOwner = deviceId.data("owner");
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".panel-body").removeClass("hidden");
|
||||
$("#loading-content").remove();
|
||||
$(document).ready(function() {
|
||||
$(".panel-body").removeClass("hidden");
|
||||
$("#loading-content").remove();
|
||||
|
||||
if ($('#event_log').length) {
|
||||
loadOperationsLog();
|
||||
}
|
||||
|
||||
if ($('#policy_compliance').length) {
|
||||
loadPolicyCompliance();
|
||||
}
|
||||
|
||||
|
||||
$("#refresh-policy").click(function() {
|
||||
$('#policy-spinner').removeClass('hidden');
|
||||
loadPolicyCompliance();
|
||||
});
|
||||
|
||||
$("#refresh-operations").click(function() {
|
||||
$('#operations-spinner').removeClass('hidden');
|
||||
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')
|
||||
|
||||
if ($('#event_log').length) {
|
||||
loadOperationsLog();
|
||||
}
|
||||
});
|
||||
|
||||
if ($('#policy_compliance').length) {
|
||||
loadPolicyCompliance();
|
||||
$('#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);
|
||||
}
|
||||
|
||||
|
||||
$("#refresh-policy").click(function () {
|
||||
$('#policy-spinner').removeClass('hidden');
|
||||
loadPolicyCompliance();
|
||||
});
|
||||
|
||||
$("#refresh-operations").click(function () {
|
||||
$('#operations-spinner').removeClass('hidden');
|
||||
loadOperationsLog(true);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function loadOperationsLog(update) {
|
||||
var operationsLogTable = "#operations-log-table";
|
||||
function renderLogDetails(obj,data) {
|
||||
var payload = JSON.parse(data);
|
||||
var logStream = '<div class="log-data">';
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
$.template(
|
||||
"policy-view",
|
||||
policyComplianceTemplate,
|
||||
function (template) {
|
||||
var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy";
|
||||
var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data";
|
||||
invokerUtil.get(
|
||||
getEffectivePolicyURL,
|
||||
// success-callback
|
||||
function (data, textStatus, jqXHR) {
|
||||
if (jqXHR.status == 200) {
|
||||
$("#policy-spinner").addClass("hidden");
|
||||
if(data){
|
||||
data = JSON.parse(data);
|
||||
if (data["active"] == true) {
|
||||
activePolicy = data;
|
||||
invokerUtil.get(
|
||||
getDeviceComplianceURL,
|
||||
// success-callback
|
||||
function (data, textStatus, jqXHR) {
|
||||
if (jqXHR.status == 200 && data) {
|
||||
var viewModel = {};
|
||||
viewModel["policy"] = activePolicy;
|
||||
viewModel["deviceType"] = deviceType;
|
||||
viewModel["deviceId"] = deviceId;
|
||||
viewModel["appContext"] = context;
|
||||
data = JSON.parse(data);
|
||||
var 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 {
|
||||
$("#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>");
|
||||
}
|
||||
);
|
||||
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;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
$.template(
|
||||
"policy-view",
|
||||
policyComplianceTemplate,
|
||||
function(template) {
|
||||
var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy";
|
||||
var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data";
|
||||
invokerUtil.get(
|
||||
getEffectivePolicyURL,
|
||||
// success-callback
|
||||
function(data, textStatus, jqXHR) {
|
||||
if (jqXHR.status == 200) {
|
||||
$("#policy-spinner").addClass("hidden");
|
||||
if (data) {
|
||||
data = JSON.parse(data);
|
||||
if (data["active"] == true) {
|
||||
activePolicy = data;
|
||||
invokerUtil.get(
|
||||
getDeviceComplianceURL,
|
||||
// success-callback
|
||||
function(data, textStatus, jqXHR) {
|
||||
if (jqXHR.status == 200 && data) {
|
||||
var viewModel = {};
|
||||
viewModel["policy"] = activePolicy;
|
||||
viewModel["deviceType"] = deviceType;
|
||||
viewModel["deviceId"] = deviceId;
|
||||
viewModel["appContext"] = context;
|
||||
data = JSON.parse(data);
|
||||
var 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 {
|
||||
$("#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>");
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@ -15,156 +15,114 @@
|
||||
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>
|
||||
{{#defineZone "device-details-header"}}
|
||||
<h1 class="page-sub-title device-id device-select" data-deviceid="{{device.deviceIdentifier}}"
|
||||
data-type="{{device.type}}">
|
||||
Device {{device.name}}
|
||||
{{#if device.viewModel.model}}
|
||||
<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>
|
||||
<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 data-deviceid="{{device.deviceIdentifier}}"
|
||||
data-type="{{device.type}}"
|
||||
data-ownership="{{device.ownership}}"
|
||||
data-owner="{{device.owner}}">
|
||||
{{#if device.viewModel.model}}
|
||||
<h4>{{device.viewModel.vendor}} {{device.viewModel.model}}</h4>
|
||||
{{/if}}
|
||||
<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>
|
||||
</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 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}}
|
||||
</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>
|
||||
|
||||
{{#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"
|
||||
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}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#defineZone "device-view-tab-injected-conents"}}
|
||||
{{/defineZone}}
|
||||
{{/defineZone}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- /col-lg-08 -->
|
||||
</div>
|
||||
<!-- /row -->
|
||||
{{else}}
|
||||
<h1 class="page-sub-title">
|
||||
Permission Denied
|
||||
@ -192,4 +150,4 @@
|
||||
<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>
|
||||
{{/zone}}
|
||||
{{/zone}}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user