diff --git a/app/assets/javascripts/miq_timeline.js b/app/assets/javascripts/miq_timeline.js
index 8e7bd4c39ee..0bc2adcf52b 100644
--- a/app/assets/javascripts/miq_timeline.js
+++ b/app/assets/javascripts/miq_timeline.js
@@ -15,7 +15,11 @@
function eventClick(el) {
var table = '
';
- 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 + 'This is a group of ' + el.events.length + ' events starting on ' + el.date.toLocaleString() + '';
table = table + 'Date | Event |
'
@@ -33,7 +37,12 @@
table = table + el.details[i] + '
';
}
}
- $('#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('');
+
$(window).on('resize', createTooltip);
}
};
diff --git a/app/assets/stylesheets/timeline.scss b/app/assets/stylesheets/timeline.scss
index 0019b4a59da..3507e3a2dc1 100644
--- 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;
}
\ No newline at end of file
diff --git a/app/views/layouts/_tl_options.html.haml b/app/views/layouts/_tl_options.html.haml
index a48dd589e95..cb6b9746a30 100644
--- 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
index 0d2f6787eec..6690f34c150 100644
--- 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"
},