ATLAS-3027 : UI : Metric modal Improvements

dashboardv2/public/css/scss/override.scss

@@ -50,7 +50,7 @@
 .modal-body {
     position: relative;
     padding: 15px;
-    max-height: 400px;
+    max-height: 72vh;
     min-height: 70px;
     overflow: auto;
 

dashboardv2/public/css/scss/style.scss

@@ -19,6 +19,7 @@
 @import "__mixin.scss";
 @import "__variable.scss";
 @import "common.scss";
+@import "table.scss";
 @import "tab.scss";
 @import "form.scss";
 @import "nav.scss";

dashboardv2/public/css/scss/table.scss

+/*
+ * 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.
+ */
+
+.stat-table {
+
+    tbody,
+    thead {
+        >tr {
+
+            td:nth-child(2),
+            th:nth-child(2) {
+                text-align: right;
+            }
+        }
+    }
+}
\ No newline at end of file

dashboardv2/public/js/router/Router.js

@@ -76,8 +76,8 @@ define([
             $('body').on('click', 'a.show-stat', function() {
                 require([
                     'views/common/Statistics',
-                ], function(AboutAtlas) {
-                    new AboutAtlas();
+                ], function(Statistics) {
+                    new Statistics();
                 });
             });
             $('body').on('click', 'li.aboutAtlas', function() {

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

@@ -15,10 +15,10 @@
  * limitations under the License.
 -->
 <div class="panel-group" id="accordion">
-    <div class="panel panel-default expand_collapse_panel-icon">
+    <div class="panel panel-default expand_collapse_panel-icon" data-id="entityActive">
         <div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true">
             <h4 class="panel-title">
-          <a>Active Entities</a>
+          <a>Active Entities <span class="count">(0)</span></a>
         </h4>
             <div class="btn-group pull-right">
                 <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
@@ -26,23 +26,23 @@
         </div>
         <div id="collapse1" class="panel-collapse collapse in">
             <div class="panel-body">
-                <table class="table table-quickMenu">
+                <table class="table stat-table">
                     <thead>
                         <tr>
                             <th>Entity</th>
                             <th>Count</th>
                         </tr>
                     </thead>
-                    <tbody data-id="entityActive">
+                    <tbody >
                     </tbody>
                 </table>
             </div>
         </div>
     </div>
-    <div class="panel panel-default expand_collapse_panel-icon">
+    <div class="panel panel-default expand_collapse_panel-icon" data-id="entityDelete">
         <div class="panel-heading" data-toggle="collapse" href="#collapse2">
             <h4 class="panel-title">
-          <a>Deleted Entities</a>
+          <a>Deleted Entities <span class="count">(0)</span></a>
         </h4>
             <div class="btn-group pull-right">
                 <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
@@ -50,14 +50,14 @@
         </div>
         <div id="collapse2" class="panel-collapse collapse">
             <div class="panel-body">
-                <table class="table table-quickMenu">
+                <table class="table stat-table">
                     <thead>
                         <tr>
                             <th>Entity</th>
                             <th>Count</th>
                         </tr>
                     </thead>
-                    <tbody data-id="entityDelete">
+                    <tbody >
                     </tbody>
                 </table>
             </div>

dashboardv2/public/js/views/common/Statistics.js

@@ -35,8 +35,10 @@ define(['require',
             regions: {},
             /** ui selector cache */
             ui: {
-                entityActive: "[data-id='entityActive']",
-                entityDelete: "[data-id='entityDelete']"
+                entityActive: "[data-id='entityActive'] tbody",
+                entityDelete: "[data-id='entityDelete'] tbody",
+                entityActiveHeader: "[data-id='entityActive'] .count",
+                entityDeletedHeader: "[data-id='entityDelete'] .count"
             },
             /** ui events hash */
             events: function() {},
@@ -51,7 +53,7 @@ define(['require',
                     content: this,
                     okCloses: true,
                     showFooter: true,
-                    allowCancel: false,
+                    allowCancel: false
                 }).open();
 
                 modal.on('closeModal', function() {
@@ -70,12 +72,23 @@ define(['require',
                             no_records = '<tr class="empty text-center"><td colspan="2"><span>No records found!</span></td></tr>',
                             activeEntityTable = _.isEmpty(data.entity.entityActive) ? no_records : CommonViewFunction.propertyTable({ scope: that, valueObject: data.entity.entityActive }),
                             deleteEntityTable = _.isEmpty(data.entity.entityDeleted) ? no_records : CommonViewFunction.propertyTable({ scope: that, valueObject: data.entity.entityDeleted });
+                        var totalActive = 0,
+                            totalDeleted = 0;
+                        if (data.entity && data.general.entityCount) {
+                            totalActive = data.general.entityCount;
+                        }
+                        if (data.entity && data.entity.entityDeleted) {
+                            _.each(data.entity.entityDeleted, function(val) {
+                                totalDeleted += val;
+                            });
+                        }
                         that.ui.entityActive.html(activeEntityTable);
                         that.ui.entityDelete.html(deleteEntityTable);
+                        that.ui.entityActiveHeader.html("&nbsp;(" + (totalActive - totalDeleted) + ")");
+                        that.ui.entityDeletedHeader.html("&nbsp;(" + totalDeleted + ")");
                     }
                 });
-            },
-
+            }
         });
     return StatisticsView;
 });
\ No newline at end of file