Adding refresh button for the operations log tab

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

@@ -46,7 +46,16 @@ $(document).ready(function() {
 
 });
 
-function loadOperationsLog() {
+function loadOperationsLog(update) {
+    var operationsLogTable = "#operation-log";
+    if (update) {
+        operationTable = $(operationsLogTable).DataTable();
+        $("#operations-spinner").removeClass("hidden");
+        operationTable.ajax.reload(function(json) {
+            $("#operations-spinner").addClass("hidden");
+        }, false);
+        return;
+    }
     var table = $('#operation-log').DataTable({
         serverSide: true,
         processing: false,
@@ -164,101 +173,6 @@ function loadOperationsLog() {
     }
 }
 
-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");

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs

@@ -56,10 +56,8 @@
                           </div>
                       </div>
                   </div>
-                  <div class="vital-strip">
-                    {{#defineZone "device-details"}}
-                    {{/defineZone}}
-                  </div>
+                  {{#defineZone "device-details"}}
+                  {{/defineZone}}
                   {{#defineZone "device-opetations"}}
                     <div class="operation-container">
                       <div class="operation-title">
@@ -82,6 +80,18 @@
                   <div class="tab-content">
                     {{#defineZone "device-view-tab-contents"}}
                         <div id="event_log" class="tab-pane fade in active">
+                          <div class="tab-actions">
+                            <div class="action-btn-container">
+                                <div class="action-btn show filter">
+                                    <a href="javascript:void(0);" id="refresh-operations">
+                                        <i class="fw fw-refresh"></i> Refresh Log
+                                    </a>
+                                </div>
+                            </div>
+                          </div>
+                          <div id="operations-spinner" class="wr-advance-operations-init hidden">
+                              <i class="fw fw-wso2-logo fw-pulse fw-2x"></i> Loading Operations Log...
+                          </div>
                           <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"
@@ -101,18 +111,6 @@
                                     <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>
                       {{#defineZone "device-view-tab-injected-conents"}}