You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by nb...@apache.org on 2021/05/28 04:26:05 UTC

[atlas] 01/02: ATLAS-4296: ATLAS-4298: ATLAS-4299: UI: Debug Metrics UI, fixed

This is an automated email from the ASF dual-hosted git repository.

nbonte pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git

commit e2a0c10393558d2b4454e2da574cbfeedd043956
Author: prasad pawar <pr...@freestoneinfotech.com>
AuthorDate: Wed May 26 00:05:00 2021 +0530

    ATLAS-4296: ATLAS-4298: ATLAS-4299: UI: Debug Metrics UI, fixed
    
    Signed-off-by: Nikhil Bonte <nb...@apache.org>
---
 dashboardv2/public/css/scss/override.scss          |  9 ++++
 .../site/DebugMetricsTableLayoutView_tmpl.html     |  1 +
 .../js/templates/site/MetricsUIInfoView_tmpl.html  | 27 ++++++----
 .../js/views/site/DebugMetricsTableLayoutView.js   | 39 +++++++++++---
 .../public/js/views/site/MetricsUIInfoView.js      | 61 ++++++++++++++++++++++
 dashboardv3/public/css/scss/override.scss          |  9 ++++
 .../site/DebugMetricsTableLayoutView_tmpl.html     |  1 +
 ...tView_tmpl.html => MetricsUIInfoView_tmpl.html} | 27 ++++++----
 .../js/views/site/DebugMetricsTableLayoutView.js   | 39 +++++++++++---
 .../public/js/views/site/MetricsUIInfoView.js      | 61 ++++++++++++++++++++++
 .../apache/atlas/web/resources/AdminResource.java  |  2 +
 11 files changed, 242 insertions(+), 34 deletions(-)

diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
index c593619..c51a23c 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/dashboardv2/public/css/scss/override.scss
@@ -263,6 +263,11 @@
     cursor: pointer;
 }
 
+.metricsUIInfo {
+    font-size: 20px !important;
+    margin-right: 5px;
+}
+
 .query-builder {
     .rule-container {
         margin: 6px 0;
@@ -557,4 +562,8 @@ div.columnmanager-dropdown-container {
 
 .dropzone .dz-preview .dz-details .dz-filename {
     padding-top: 20px;
+}
+
+.tooltip-inner {
+    max-width: 250px;
 }
\ No newline at end of file
diff --git a/dashboardv2/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
index 43a38c2..8b54368 100644
--- a/dashboardv2/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
@@ -17,6 +17,7 @@
 <div class="metrics-details" data-id="metricsTablePage">
     <div class="col-sm-12 debug-btn-wrapper">
         <button type="button" class="btn btn-action btn-sm pull-right typeLOV" title="" data-id="refreshMetricsBtn" data-original-title="Refresh"><i class="fa fa-refresh"></i></button>
+        <span class="advancedInfo metricsUIInfo pull-right" data-id="metricsInfo"><i class="fa fa-question-circle-o"></i></span>
     </div>
     <div class="position-relative">
         <div class="tableOverlay"></div>
diff --git a/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/site/MetricsUIInfoView_tmpl.html
similarity index 57%
copy from dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
copy to dashboardv2/public/js/templates/site/MetricsUIInfoView_tmpl.html
index 43a38c2..837c3b5 100644
--- a/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/site/MetricsUIInfoView_tmpl.html
@@ -14,15 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="metrics-details" data-id="metricsTablePage">
-    <div class="col-sm-12 debug-btn-wrapper">
-        <button type="button" class="btn btn-action btn-sm pull-right typeLOV" title="" data-id="refreshMetricsBtn" data-original-title="Refresh"><i class="fa fa-refresh"></i></button>
-    </div>
-    <div class="position-relative">
-        <div class="tableOverlay"></div>
-        <div class='attr-filter-overlay hide'></div>
-        <div class="debug-metrics-table  metrics-details">
-            <div id="r_debugMetricsTableLayoutView"></div>
-        </div>
-    </div>
+<div class="">
+    <h4>Debug Metrics Information</h4>
+    <ul class="list-style-disc">
+        <li><b>Count</b>
+            <p>Number of times the API has been hit since Atlas started</p>
+        </li>
+        <li><b>Min Time (secs)</b>
+            <p>Minimum API execution time since Atlas started</p>
+        </li>
+        <li><b>Max Time (secs)</b>
+            <p>Maximum API execution time since Atlas started</p>
+        </li>
+        <li><b>Average Time (secs)</b>
+            <p>Average time taken to execute by an API within an interval of time</p>
+        </li>
+    </ul>
 </div>
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/site/DebugMetricsTableLayoutView.js b/dashboardv2/public/js/views/site/DebugMetricsTableLayoutView.js
index c00733a..407e489 100644
--- a/dashboardv2/public/js/views/site/DebugMetricsTableLayoutView.js
+++ b/dashboardv2/public/js/views/site/DebugMetricsTableLayoutView.js
@@ -37,7 +37,8 @@ define(['require',
             },
             /** ui selector cache */
             ui: {
-                refreshMetricsBtn: '[data-id="refreshMetricsBtn"]'
+                refreshMetricsBtn: '[data-id="refreshMetricsBtn"]',
+                metricsInfoBtn: '[data-id="metricsInfo"]'
             },
             /** ui events hash */
             events: function() {
@@ -49,6 +50,7 @@ define(['require',
                     this.debugMetricsCollection.state.currentPage = 0;
                     this.fetchMetricData();
                 };
+                events["click " + this.ui.metricsInfoBtn] = 'metricsInfo';
                 return events;
             },
             /**
@@ -90,6 +92,24 @@ define(['require',
                 this.$('.debug-metrics-table').show();
                 this.fetchMetricData();
             },
+            metricsInfo: function(e) {
+                require([
+                    'views/site/MetricsUIInfoView',
+                    'modules/Modal'
+                ], function(MetricsUIInfoView, Modal) {
+                    var view = new MetricsUIInfoView();
+                    var modal = new Modal({
+                        title: 'Debug Metrics',
+                        content: view,
+                        okCloses: true,
+                        showFooter: false,
+                        allowCancel: false
+                    }).open();
+                    view.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+                });
+            },
             fetchMetricData: function(options) {
                 var that = this;
                 this.debugMetricsCollection.fetch({
@@ -98,7 +118,7 @@ define(['require',
                             metricsDataKeys = data ? Object.keys(data) : null;
                         that.debugMetricsCollection.fullCollection.reset();
                         _.each(metricsDataKeys.sort(), function(keyName) {
-                            that.debugMetricsCollection.add(data[keyName]);
+                            that.debugMetricsCollection.fullCollection.add(data[keyName]);
                         });
                     },
                     complete: function(data) {
@@ -118,6 +138,9 @@ define(['require',
                     }
                 });
             },
+            millisecondsToSeconds: function(rawValue) {
+                return parseFloat((rawValue % 60000) / 1000).toFixed(3);
+            },
             getAuditTableColumns: function() {
                 var that = this;
                 return this.debugMetricsCollection.constructor.getTableCols({
@@ -130,39 +153,43 @@ define(['require',
                     numops: {
                         label: "Count",
                         cell: "html",
+                        toolTip: "Number of times the API has been hit since Atlas started",
                         sortable: true,
                         editable: false
                     },
                     minTime: {
                         label: "Min Time (secs)",
                         cell: "html",
+                        toolTip: "Minimum API execution time since Atlas started",
                         sortable: true,
                         editable: false,
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
-                                return parseFloat((rawValue % 1000) / 100).toFixed(3);
+                                return that.millisecondsToSeconds(rawValue);
                             }
                         })
                     },
                     maxTime: {
                         label: "Max Time (secs)",
                         cell: "html",
+                        toolTip: "Maximum API execution time since Atlas started",
                         sortable: true,
                         editable: false,
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
-                                return parseFloat((rawValue % 1000) / 100).toFixed(3);
+                                return that.millisecondsToSeconds(rawValue);
                             }
                         })
                     },
                     avgTime: {
                         label: "Average Time (secs)",
                         cell: "html",
+                        toolTip: "Average time taken to execute by an API within an interval of time",
                         sortable: true,
                         editable: false,
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
-                                return parseFloat((rawValue % 1000) / 100).toFixed(3);
+                                return that.millisecondsToSeconds(rawValue);
                             }
                         })
                     }
@@ -171,4 +198,4 @@ define(['require',
             }
         });
     return DebugMetricsTableLayoutView;
-});
+});
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/site/MetricsUIInfoView.js b/dashboardv2/public/js/views/site/MetricsUIInfoView.js
new file mode 100644
index 0000000..f46b5b8
--- /dev/null
+++ b/dashboardv2/public/js/views/site/MetricsUIInfoView.js
@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+define(['require',
+    'backbone',
+    'hbs!tmpl/site/MetricsUIInfoView_tmpl',
+], function(require, Backbone, MetricsUIInfoViewTmpl) {
+
+    var MetricsUIInfoViewView = Backbone.Marionette.LayoutView.extend(
+        /** @lends MetricsUIInfoViewView */
+        {
+            _viewName: 'MetricsUIInfoViewView',
+
+            template: MetricsUIInfoViewTmpl,
+
+
+
+            /** Layout sub regions */
+            regions: {},
+
+
+            /** ui selector cache */
+            ui: {
+
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                return events;
+            },
+            /**
+             * intialize a new MetricsUIInfoViewView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+
+            },
+            bindEvents: function() {},
+            onRender: function() {
+
+            },
+
+
+        });
+    return MetricsUIInfoViewView;
+});
\ No newline at end of file
diff --git a/dashboardv3/public/css/scss/override.scss b/dashboardv3/public/css/scss/override.scss
index b7d65e7..280afd6 100644
--- a/dashboardv3/public/css/scss/override.scss
+++ b/dashboardv3/public/css/scss/override.scss
@@ -267,6 +267,11 @@
     cursor: pointer;
 }
 
+.metricsUIInfo {
+    font-size: 20px !important;
+    margin-right: 5px;
+}
+
 .query-builder {
     .rule-container {
         margin: 6px 0;
@@ -559,4 +564,8 @@ div.columnmanager-dropdown-container {
 
 .dropzone .dz-preview .dz-details .dz-filename {
     padding-top: 20px;
+}
+
+.tooltip-inner {
+    max-width: 250px;
 }
\ No newline at end of file
diff --git a/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html b/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
index 43a38c2..8b54368 100644
--- a/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
@@ -17,6 +17,7 @@
 <div class="metrics-details" data-id="metricsTablePage">
     <div class="col-sm-12 debug-btn-wrapper">
         <button type="button" class="btn btn-action btn-sm pull-right typeLOV" title="" data-id="refreshMetricsBtn" data-original-title="Refresh"><i class="fa fa-refresh"></i></button>
+        <span class="advancedInfo metricsUIInfo pull-right" data-id="metricsInfo"><i class="fa fa-question-circle-o"></i></span>
     </div>
     <div class="position-relative">
         <div class="tableOverlay"></div>
diff --git a/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html b/dashboardv3/public/js/templates/site/MetricsUIInfoView_tmpl.html
similarity index 57%
copy from dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
copy to dashboardv3/public/js/templates/site/MetricsUIInfoView_tmpl.html
index 43a38c2..837c3b5 100644
--- a/dashboardv3/public/js/templates/site/DebugMetricsTableLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/site/MetricsUIInfoView_tmpl.html
@@ -14,15 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="metrics-details" data-id="metricsTablePage">
-    <div class="col-sm-12 debug-btn-wrapper">
-        <button type="button" class="btn btn-action btn-sm pull-right typeLOV" title="" data-id="refreshMetricsBtn" data-original-title="Refresh"><i class="fa fa-refresh"></i></button>
-    </div>
-    <div class="position-relative">
-        <div class="tableOverlay"></div>
-        <div class='attr-filter-overlay hide'></div>
-        <div class="debug-metrics-table  metrics-details">
-            <div id="r_debugMetricsTableLayoutView"></div>
-        </div>
-    </div>
+<div class="">
+    <h4>Debug Metrics Information</h4>
+    <ul class="list-style-disc">
+        <li><b>Count</b>
+            <p>Number of times the API has been hit since Atlas started</p>
+        </li>
+        <li><b>Min Time (secs)</b>
+            <p>Minimum API execution time since Atlas started</p>
+        </li>
+        <li><b>Max Time (secs)</b>
+            <p>Maximum API execution time since Atlas started</p>
+        </li>
+        <li><b>Average Time (secs)</b>
+            <p>Average time taken to execute by an API within an interval of time</p>
+        </li>
+    </ul>
 </div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/site/DebugMetricsTableLayoutView.js b/dashboardv3/public/js/views/site/DebugMetricsTableLayoutView.js
index c00733a..407e489 100644
--- a/dashboardv3/public/js/views/site/DebugMetricsTableLayoutView.js
+++ b/dashboardv3/public/js/views/site/DebugMetricsTableLayoutView.js
@@ -37,7 +37,8 @@ define(['require',
             },
             /** ui selector cache */
             ui: {
-                refreshMetricsBtn: '[data-id="refreshMetricsBtn"]'
+                refreshMetricsBtn: '[data-id="refreshMetricsBtn"]',
+                metricsInfoBtn: '[data-id="metricsInfo"]'
             },
             /** ui events hash */
             events: function() {
@@ -49,6 +50,7 @@ define(['require',
                     this.debugMetricsCollection.state.currentPage = 0;
                     this.fetchMetricData();
                 };
+                events["click " + this.ui.metricsInfoBtn] = 'metricsInfo';
                 return events;
             },
             /**
@@ -90,6 +92,24 @@ define(['require',
                 this.$('.debug-metrics-table').show();
                 this.fetchMetricData();
             },
+            metricsInfo: function(e) {
+                require([
+                    'views/site/MetricsUIInfoView',
+                    'modules/Modal'
+                ], function(MetricsUIInfoView, Modal) {
+                    var view = new MetricsUIInfoView();
+                    var modal = new Modal({
+                        title: 'Debug Metrics',
+                        content: view,
+                        okCloses: true,
+                        showFooter: false,
+                        allowCancel: false
+                    }).open();
+                    view.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+                });
+            },
             fetchMetricData: function(options) {
                 var that = this;
                 this.debugMetricsCollection.fetch({
@@ -98,7 +118,7 @@ define(['require',
                             metricsDataKeys = data ? Object.keys(data) : null;
                         that.debugMetricsCollection.fullCollection.reset();
                         _.each(metricsDataKeys.sort(), function(keyName) {
-                            that.debugMetricsCollection.add(data[keyName]);
+                            that.debugMetricsCollection.fullCollection.add(data[keyName]);
                         });
                     },
                     complete: function(data) {
@@ -118,6 +138,9 @@ define(['require',
                     }
                 });
             },
+            millisecondsToSeconds: function(rawValue) {
+                return parseFloat((rawValue % 60000) / 1000).toFixed(3);
+            },
             getAuditTableColumns: function() {
                 var that = this;
                 return this.debugMetricsCollection.constructor.getTableCols({
@@ -130,39 +153,43 @@ define(['require',
                     numops: {
                         label: "Count",
                         cell: "html",
+                        toolTip: "Number of times the API has been hit since Atlas started",
                         sortable: true,
                         editable: false
                     },
                     minTime: {
                         label: "Min Time (secs)",
                         cell: "html",
+                        toolTip: "Minimum API execution time since Atlas started",
                         sortable: true,
                         editable: false,
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
-                                return parseFloat((rawValue % 1000) / 100).toFixed(3);
+                                return that.millisecondsToSeconds(rawValue);
                             }
                         })
                     },
                     maxTime: {
                         label: "Max Time (secs)",
                         cell: "html",
+                        toolTip: "Maximum API execution time since Atlas started",
                         sortable: true,
                         editable: false,
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
-                                return parseFloat((rawValue % 1000) / 100).toFixed(3);
+                                return that.millisecondsToSeconds(rawValue);
                             }
                         })
                     },
                     avgTime: {
                         label: "Average Time (secs)",
                         cell: "html",
+                        toolTip: "Average time taken to execute by an API within an interval of time",
                         sortable: true,
                         editable: false,
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
-                                return parseFloat((rawValue % 1000) / 100).toFixed(3);
+                                return that.millisecondsToSeconds(rawValue);
                             }
                         })
                     }
@@ -171,4 +198,4 @@ define(['require',
             }
         });
     return DebugMetricsTableLayoutView;
-});
+});
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/site/MetricsUIInfoView.js b/dashboardv3/public/js/views/site/MetricsUIInfoView.js
new file mode 100644
index 0000000..f46b5b8
--- /dev/null
+++ b/dashboardv3/public/js/views/site/MetricsUIInfoView.js
@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+define(['require',
+    'backbone',
+    'hbs!tmpl/site/MetricsUIInfoView_tmpl',
+], function(require, Backbone, MetricsUIInfoViewTmpl) {
+
+    var MetricsUIInfoViewView = Backbone.Marionette.LayoutView.extend(
+        /** @lends MetricsUIInfoViewView */
+        {
+            _viewName: 'MetricsUIInfoViewView',
+
+            template: MetricsUIInfoViewTmpl,
+
+
+
+            /** Layout sub regions */
+            regions: {},
+
+
+            /** ui selector cache */
+            ui: {
+
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                return events;
+            },
+            /**
+             * intialize a new MetricsUIInfoViewView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+
+            },
+            bindEvents: function() {},
+            onRender: function() {
+
+            },
+
+
+        });
+    return MetricsUIInfoViewView;
+});
\ No newline at end of file
diff --git a/webapp/src/main/java/org/apache/atlas/web/resources/AdminResource.java b/webapp/src/main/java/org/apache/atlas/web/resources/AdminResource.java
index 46d42ba..01fb8ec 100755
--- a/webapp/src/main/java/org/apache/atlas/web/resources/AdminResource.java
+++ b/webapp/src/main/java/org/apache/atlas/web/resources/AdminResource.java
@@ -368,6 +368,8 @@ public class AdminResource {
         responseData.put("timezones", TIMEZONE_LIST);
         responseData.put(UI_DATE_TIMEZONE_FORMAT_ENABLED, isTimezoneFormatEnabled);
         responseData.put(UI_DATE_FORMAT, uiDateFormat);
+        responseData.put(AtlasConfiguration.DEBUG_METRICS_ENABLED.getPropertyName(), isDebugMetricsEnabled);
+        responseData.put(AtlasConfiguration.TASKS_USE_ENABLED.getPropertyName(), isTasksEnabled);
 
         String salt = (String) request.getSession().getAttribute(CSRF_TOKEN);
         if (StringUtils.isEmpty(salt)) {