ATLAS-3331: updated metrics UI to display notification consumption details per topic

dashboardv2/public/js/templates/site/Statistics_Topic_Offset_table_tmpl.html

+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+<thead>
+    <tr>
+        <th>Kafka Topic</th>
+        <th>Current Offset</th>
+        <th>Start Offset</th>
+
+    </tr>
+</thead>
+{{#if data}}
+<tbody>
+    {{#each tableCol}}
+    <tr>
+        <td>{{{this.label}}}</td>
+        {{#each ../tableHeader}}
+        <td>{{callmyfunction ../../getTmplValue ../this this}}</td>
+        {{/each }}
+    </tr>
+    {{/each}}
+</tbody>
+{{/if}}
\ No newline at end of file

dashboardv2/public/js/templates/site/Statistics_tmpl.html

@@ -81,9 +81,20 @@
                                     </tr>
                                 </tbody>
                             </table>
+
+                            <hr>
+                            </hr>
+                            <table data-id="offset-card" class="table stat-table notification-table table-striped ">
+                                <tbody>
+                                    <tr class="empty text-center">
+                                        <td colspan="2"><span>No records found!</span></td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </div>
                     </div>
                 </div>
+
             </div>
         </div>
     </div>

dashboardv2/public/js/utils/Enums.js

@@ -184,7 +184,8 @@ define(['require'], function(require) {
             "totalCreates": "number",
             "totalDeletes": "number",
             "totalFailed": "number",
-            "totalUpdates": "number"
+            "totalUpdates": "number",
+            "topicOffsets":"number"
         }
     };
     return Enums;

dashboardv2/public/js/views/site/Statistics.js

@@ -20,6 +20,7 @@ define(['require',
     'backbone',
     'hbs!tmpl/site/Statistics_tmpl',
     'hbs!tmpl/site/Statistics_Notification_table_tmpl',
+    'hbs!tmpl/site/Statistics_Topic_Offset_table_tmpl',
     'hbs!tmpl/site/entity_tmpl',
     'modules/Modal',
     'models/VCommon',
@@ -30,7 +31,7 @@ define(['require',
     'moment',
     'utils/Utils',
     'moment-timezone'
-], function(require, Backbone, StatTmpl, StatsNotiTable, EntityTable, Modal, VCommon, UrlLinks, VTagList, CommonViewFunction, Enums, moment, Utils) {
+], function(require, Backbone, StatTmpl, StatsNotiTable, TopicOffsetTable, EntityTable, Modal, VCommon, UrlLinks, VTagList, CommonViewFunction, Enums, moment, Utils) {
     'use strict';
 
     var StatisticsView = Backbone.Marionette.LayoutView.extend(
@@ -48,7 +49,8 @@ define(['require',
                 notificationCard: "[data-id='notification-card']",
                 statsNotificationTable: "[data-id='stats-notification-table']",
                 notificationSmallCard: "[data-id='notification-small-card']",
-                entityCard: "[data-id='entity-card']"
+                entityCard: "[data-id='entity-card']",
+                offsetCard: "[data-id='offset-card']"
             },
             /** ui events hash */
             events: function() {},
@@ -241,6 +243,29 @@ define(['require',
                             "data": _.pick(data.Notification, 'lastMessageProcessedTime', 'offsetCurrent', 'offsetStart')
                         })
                     );
+
+
+                    var offsetTableColumn = function(obj) {
+                        var returnObj = []
+                        _.each(obj, function(value, key) {
+                            returnObj.push({ "label": key, "dataValue": value });
+                        });
+                        return returnObj
+                    }
+
+                    that.ui.offsetCard.html(
+                        TopicOffsetTable({
+                            "enums": Enums.stats.Notification,
+                            "data": data.Notification.topicOffsets,
+                            "tableHeader": ['offsetCurrent', 'offsetStart'],
+                            "tableCol": offsetTableColumn(data.Notification.topicOffsets),
+                            "getTmplValue": function(argument, args) {
+                                console.log(argument, args)
+                                var returnVal = data.Notification.topicOffsets[argument.label][args];
+                                return returnVal ? _.numberFormatWithComa(returnVal) : 0;
+                            }
+                        })
+                    )
                 }
 
                 if (data.Server) {