From c832f1b5a97a04d48bb080f032ac09d3418446f9 Mon Sep 17 00:00:00 2001 From: dunithd Date: Tue, 20 Jun 2017 19:39:52 +0530 Subject: [PATCH] Applying new UX design for device details default unit --- .../public/js/device-view.js | 463 +++++++++++------- .../app/units/cdmf.unit.device.view/view.hbs | 242 ++++----- .../public/css/custom-desktop.css | 3 +- 3 files changed, 397 insertions(+), 311 deletions(-) diff --git a/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 b/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 index b0fb423aa2..cf6b1dda7c 100644 --- a/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 +++ b/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 @@ -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(); - } + 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); - }); + $("#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"; +}); - if (update) { - operationTable = $(operationsLogTable).DataTable(); - $("#operations-spinner").removeClass("hidden"); - operationTable.ajax.reload(function ( json ) { +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"); - }, 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; + $("#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); } }, - columnDefs: [ - {targets: 0, data: "code" }, - {targets: 1, data: "status", render: - function (status) { - var html; - switch (status) { - case "COMPLETED" : - html = " Completed"; - break; - case "PENDING" : - html = " Pending"; - break; - case "ERROR" : - html = " Error"; - break; - case "IN_PROGRESS" : - html = " In Progress"; - break; - case "REPEATED" : - html = " Repeated"; - break; - } - return html; - } + { + targets: 2, + data: "status", + class: "text-right extended-log-data log-record-status", + render: function(data, type, full, meta) { + return ' ' + data + ' '; }, - {targets: 2, data: "createdTimeStamp", render: - function (date) { - var value = String(date); - return value.slice(0, 16); + 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 = '
'; + + Object.entries(payload.activityStatus).forEach( + ([key, entry]) => { + logStream += '
' + + '
' + + '
' + + '' + entry.status + '
' + + '
' + + '
' + + '
' + entry.updatedTimestamp + '
' + + '
' + + '
'; + } + ); + logStream += '
'; + 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 = " Completed"; + break; + case "PENDING": + html = " Pending"; + break; + case "ERROR": + html = " Error"; + break; + case "IN_PROGRESS": + html = " In Progress"; + break; + case "REPEATED": + html = " Repeated"; + 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() { - 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"); - } + $.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 { - $("#policy-list-container"). - html("

This device " + - "has no policy applied.

"); + viewModel["compliance"] = "COMPLIANT"; + content = template(viewModel); + $("#policy-list-container").html(content); + $("#policy-compliance-table").addClass("hidden"); } + } else { + $("#policy-list-container"). + html("

This device " + + "has no policy applied.

"); } - }, - // error-callback - function () { - $("#policy-list-container"). - html("

Loading policy compliance related data " + - "was not successful. please try refreshing data in a while.

"); } - ); - } + }, + // error-callback + function() { + $("#policy-list-container"). + html("

Loading policy compliance related data " + + "was not successful. please try refreshing data in a while.

"); + } + ); } } - }, - // error-callback - function () { - $("#policy-list-container"). - html("

Loading policy compliance related data " + - "was not successful. please try refreshing data in a while.

"); } - ); - } - ); - } + }, + // error-callback + function() { + $("#policy-list-container"). + html("

Loading policy compliance related data " + + "was not successful. please try refreshing data in a while.

"); + } + ); + } + ); +} diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs index 8a58f285ab..e9b704cd7a 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs @@ -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}} - - {{#defineZone "device-details-header"}} -

- Device {{device.name}} - {{#if device.viewModel.model}} - - ( {{device.viewModel.vendor}} {{device.viewModel.model}} ) - - {{/if}} -

- {{/defineZone}} -
-
-
-
-
- {{#defineZone "device-thumbnail"}} - - {{/defineZone}} -
-
- -
- {{#defineZone "overview-section"}} -
- Device Overview - {{label}}
- {{unit "cdmf.unit.device.overview-section" device=device}} - {{/defineZone}} - {{#defineZone "operation-status"}}{{/defineZone}} - {{#defineZone "device-opetations"}} -
- Operations -
-
- {{unit "cdmf.unit.device.operation-bar" device=device}} -
- {{/defineZone}} -
-
-
- -
- -
-
- - - {{#defineZone "device-view-tab-contents"}} - {{#defineZone "device-details-tab-contents"}} -
-

- - No Device details avaialbe yet. +

+
+
+ {{#defineZone "device-details-header"}} +

+ {{#if device.viewModel.model}} +

{{device.viewModel.vendor}} {{device.viewModel.model}}

+ {{/if}} +

Ownership - {{device.viewModel.ownership}}

+

Device is + + {{#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}} +

-
- {{/defineZone}} - - {{#defineZone "device-view-tab-injected-conents"}} - {{/defineZone}} - - {{#defineZone "device-view-tab-operations-log-conents"}} -
- - -
-
- - - - - - -
-
-

- - There are no operations, performed yet on this device. -

-
-
- - - - - - - - - - -
Operation CodeStatusRequest created at
-
-
-
{{/defineZone}} - {{/defineZone}} - +
+
+
+
+
+ {{#defineZone "device-details"}} + {{/defineZone}} +
+ {{#defineZone "device-opetations"}} +
+
+

Device Operations

+
+ {{unit "cdmf.unit.device.operation-bar" device=device}} +
+ {{/defineZone}} +
+
+ +
+ +
+ {{#defineZone "device-view-tab-contents"}} +
+
+
+ + + + + + + + + + + + +
NamePositionOffice
+ +
-
-
+ {{#defineZone "device-view-tab-injected-conents"}} + {{/defineZone}} + {{/defineZone}} + + + + {{else}}

Permission Denied @@ -192,4 +150,4 @@ -{{/zone}} \ No newline at end of file +{{/zone}} diff --git a/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 b/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 index 4d04a5bdf2..4b3cb525a9 100644 --- a/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 +++ b/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 @@ -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;