Applying new UX design for device details default unit

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 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");
-            }, 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 {
-                                                    $("#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>");
+                }
+            );
+        }
+    );
+}

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}}
-            <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="col-lg-9">
-                </div>
+                              <div class="device-info">
-
+                                {{#defineZone "device-details-header"}}
-                <div class="media tab-responsive">
+                                  <h1 data-deviceid="{{device.deviceIdentifier}}"
-                    <div class="media-left col-xs-1 col-sm-1 col-md-2 col-lg-2 hidden-xs">
+                                  data-type="{{device.type}}"
-                        <ul class="list-group nav nav-pills nav-stacked" role="tablist">
+                                  data-ownership="{{device.ownership}}"
-                            {{#defineZone "device-view-tabs"}}
+                                  data-owner="{{device.owner}}">
-                                {{#defineZone "device-details-tab"}}
+                                        {{#if device.viewModel.model}}
-                                    <li role="presentation" class="list-group-item active">
+                                          <h4>{{device.viewModel.vendor}} {{device.viewModel.model}}</h4>
-                                        <a href="#device_details_tab" role="tab" data-toggle="tab"
+                                        {{/if}}
-                                           aria-controls="device_details_tab">
+                                        <h4>Ownership - <strong>{{device.viewModel.ownership}}</strong></h4>
-                                            <i class="icon fw fw-mobile"></i><span class="hidden-sm">Device Details</span>
+                                        <h4>Device is
-                                        </a>
+                                          <strong>
-                                    </li>
+                                            {{#equal device.status "ACTIVE"}}Active{{/equal}}
-                                {{/defineZone}}
+                                            {{#equal device.status "INACTIVE"}}Inactive{{/equal}}
-                                {{#defineZone "device-details-tab-injected"}}
+                                            {{#equal device.status "BLOCKED"}}Blocked{{/equal}}
-                                {{/defineZone}}
+                                            {{#equal device.status "REMOVED"}}Removed{{/equal}}
-                                {{#defineZone "device-details-tab-operations"}}
+                                            {{#equal device.status "UNREACHABLE"}}Unreachable{{/equal}}
-                                    <li role="presentation" class="list-group-item">
+                                          </strong>
-                                        <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>
+                  </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>
+                      {{#defineZone "device-view-tab-injected-conents"}}
-                </div>
+                      {{/defineZone}}
+                    {{/defineZone}}
+                  </div>
+              </div>
+              <!-- /col-lg-08 -->
             </div>
+            <!-- /row -->
         {{else}}
             <h1 class="page-sub-title">
                 Permission Denied

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;