Modify popover logic in the timeline, move to 1.0.2 and fix layout of…

… the filterbar
ManageIQ · Oct 7, 2016 · a8f23c3 · a8f23c3
1 parent ad54db0
commit a8f23c3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/app/assets/javascripts/miq_timeline.js b/app/assets/javascripts/miq_timeline.js
@@ -15,7 +15,11 @@
 
   function eventClick(el) {
     var table = '<table class="table table-striped table-bordered">';
-    console.log(el);
+    $(d3.event.target).popover('toggle');
+    $(d3.event.target).on('shown.bs.popover', function () {
+      $(document).on('click', hidePopover);
+    });
+
     if (el.hasOwnProperty("events")) {
       table = table + '<thead>This is a group of ' + el.events.length + ' events starting on ' + el.date.toLocaleString() + '</thead><tbody>';
       table = table + '<tr><th>Date</th><th>Event</th></tr>'
@@ -33,7 +37,12 @@
         table = table + el.details[i] + '<br>';
       }
     }
-    $('#chart_placeholder').append(table);
+    $('#legend').html(table);
+  }
+
+  function hidePopover() {
+    $('[data-toggle="popover"]').popover('hide');
+    $(document).off('click', hidePopover);
   }
 
   function createTooltip() {
@@ -42,6 +51,7 @@
     }
     $('[data-toggle="popover"]').popover({
       'container': '#tl_div',
+      'trigger': 'manual',
       'placement': 'top',
       'html': true
     });
@@ -73,9 +83,10 @@
           data[x].display = true;
         }
       }
+      var timeSpanMilliseconds = end.getTime() - start.getTime();
       timeline = d3.chart.timeline().end(end).start(start)
-        .minScale(one_week / one_month)
-        .maxScale(one_week / one_hour)
+        .minScale(1)
+        .maxScale(timeSpanMilliseconds / one_hour)
         .eventGrouping(360000).labelWidth(170)
         .eventPopover(handlePopover).eventClick(eventClick);
 
@@ -90,10 +101,13 @@
 
       $('[data-toggle="popover"]').popover({
         'container': '#tl_div',
+        'trigger': 'manual',
         'placement': 'top',
         'html': true
       });
 
+      $('#chart_placeholder').append('<div id="legend"></div>');
+
       $(window).on('resize', createTooltip);
     }
   };

diff --git a/app/assets/stylesheets/timeline.scss b/app/assets/stylesheets/timeline.scss
@@ -11,13 +11,15 @@
 .timeline-option {
   display: inline-block;
   margin-left: 30px;
+  margin-top: 10px;
+  margin-bottom: 15px;
 }
 
 .timeline-option .radio {
   display: inline-block;
   width: 150px;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 
 .timeline-container {
@@ -65,4 +67,12 @@
 
 .timeline-info {
   padding-bottom: 10px;
+}
+
+.timeline-filterbar {
+  width: 740px;
+}
+
+.timeline-apply {
+  margin-left: 20px;
 }
diff --git a/app/views/layouts/_tl_options.html.haml b/app/views/layouts/_tl_options.html.haml
@@ -15,7 +15,7 @@
         .row
           .col-sm-12.toolbar-pf-actions.timeline-toolbar
             .form-group
-              %div
+              %div{'class' => 'timeline-filterbar'}
                 = select_tag("tl_show",
                   options_for_select(ApplicationController::Timelines::SELECT_EVENT_TYPE, nil),
                   'ng-model'                    => 'reportModel.tl_show',
@@ -83,9 +83,10 @@
                       'options' => 'dateOptions',
                       'date'    => 'reportModel.tl_date',
                       'class'   => 'pull-righto timeline-date-input'}
-            %div{'class' => 'pull-right'}
+            %div
               .btn.btn-default{'ng-click'    => 'applyButtonClicked()',
-                              'ng-disabled' => 'reportModel.tl_categories.length === 0'}
+                              'ng-disabled' => 'reportModel.tl_categories.length === 0',
+                              'class'       => 'timeline-apply'}
                 = _("Apply")
 
 :javascript

diff --git a/bower.json b/bower.json
@@ -50,7 +50,7 @@
     "rxjs": "^4.1.0",
     "rx-angular": "rx.angular#^1.1.3",
     "manageiq-ui-components": "~0.0.7",
-    "patternfly-timeline": "~1.0.1",
+    "patternfly-timeline": "~1.0.2",
     "patternfly-bootstrap-treeview": "~2.1.0",
     "jquery": "~2.1.4"
   },