ATLAS-4451:UI: #2 Chart representation of Metrics data on Statistics …

…dialog box Signed-off-by: Sarath Subramanian <sarath@apache.org>
apache · Dec 2, 2021 · bc2e13c · bc2e13c
1 parent a4ee6c0
commit bc2e13c
Show file tree

Hide file tree

Showing 20 changed files with 38,624 additions and 4 deletions.
diff --git a/dashboardv2/public/css/nv.d3.min.css b/dashboardv2/public/css/nv.d3.min.css
diff --git a/dashboardv2/public/css/scss/stats.scss b/dashboardv2/public/css/scss/stats.scss
@@ -170,4 +170,81 @@
             padding: 10px 10px;
         }
     }
+}
+
+.statistics-time-list {
+    padding-right: 0px;
+    width: 230px;
+    float: right;
+}
+
+.entityTable {
+    tbody {
+        border-bottom: 2px solid #ddd;
+    }
+}
+
+.table-row-selected {
+    background-color: #F5F5F5;
+
+    td span {
+        color: $color_jungle_green_approx;
+    }
+}
+
+.entity-type-chart {
+    cursor: pointer;
+}
+
+.entity-chart-panel {
+    margin: 0px !important;
+    padding: 0px !important;
+    border: none;
+
+    .panel-body {
+        padding: 0px;
+    }
+}
+
+.chart-container {
+    margin-top: 20px;
+
+    .chart-heading {
+        display: flex;
+
+        .chart-title {
+            width: 50%;
+            padding: 8px;
+            font-weight: bold;
+        }
+
+        .chart-buttons-container {
+            width: 50%;
+
+            ul {
+                display: flex;
+
+                li {
+                    padding: 8px 0px 8px 0px;
+                    margin: 0px 3px 0px 3px;
+                    cursor: pointer;
+
+                    a {
+                        color: $color_ironside_gray_approx;
+                    }
+                }
+
+                .active a {
+                    color: $color_jungle_green_approx;
+                }
+            }
+
+        }
+    }
+
+    .chart-svg {
+        width: 725px;
+        height: 300px;
+        margin: 0 auto;
+    }
 }
diff --git a/dashboardv2/public/index.html.tpl b/dashboardv2/public/index.html.tpl
@@ -59,6 +59,7 @@
     <link rel="stylesheet" href="js/libs/jquery-asBreadcrumbs/css/asBreadcrumbs.min.css?bust=<%- bust %>">
     <link rel="stylesheet" href="css/googlefonts.css?bust=<%- bust %>" type='text/css'>
     <link rel="stylesheet" type="text/css" href="js/external_lib/jquery-ui/jquery-ui.min.css?bust=<%- bust %>">
+    <link rel="stylesheet" href="css/nv.d3.min.css?bust=<%- bust %>" >
     <link href="css/bootstrap-sidebar.css?bust=<%- bust %>" rel="stylesheet">
     <link href="js/libs/font-awesome/css/font-awesome.min.css?bust=<%- bust %>" rel="stylesheet">
     <link href="js/external_lib/pnotify/pnotify.custom.min.css?bust=<%- bust %>" rel="stylesheet">

diff --git a/dashboardv2/public/js/router/Router.js b/dashboardv2/public/js/router/Router.js
@@ -92,7 +92,7 @@ define([
             var that = this;
             $('body').on('click', 'a.show-stat', function() {
                 require([
-                    'views/site/Statistics',
+                    'views/site/StatisticsTimelineView',
                 ], function(Statistics) {
                     new Statistics(_.extend({}, that.preFetchedCollectionLists, that.sharedObj, that.ventObj));
                 });