AMBARI-18079. Update the date range picker with the latest version i.e 2.1.24 (Dharmesh Makwana via oleewere)

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/css/daterangepicker.css

@@ -1,336 +1,415 @@
-/**
-* A stylesheet for use with Bootstrap 3.x
-* @author: Dan Grossman http://www.dangrossman.info/
-* @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
-* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
-* @website: https://www.improvely.com/
-*/
+.daterangepicker {
+    position: absolute;
+    color: inherit;
+    background: #fff;
+    border-radius: 4px;
+    width: 278px;
+    padding: 4px;
+    margin-top: 1px;
+    top: 100px;
+    left: 20px;
+    /* Calendars */
+}
+
+.daterangepicker:before,
+.daterangepicker:after {
+    position: absolute;
+    display: inline-block;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    content: '';
+}
 
-/* Container Appearance */
+.daterangepicker:before {
+    top: -7px;
+    border-right: 7px solid transparent;
+    border-left: 7px solid transparent;
+    border-bottom: 7px solid #ccc;
+}
 
-.daterangepicker {
-  position: absolute;
-  background: #fff;
-  top: 100px;
-  left: 20px;
-  padding: 4px;
-  margin-top: 1px;
-  border-radius: 4px;
+.daterangepicker:after {
+    top: -6px;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent;
 }
 
 .daterangepicker.opensleft:before {
-  position: absolute;
-  top: -7px;
-  right: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
+    right: 9px;
 }
 
 .daterangepicker.opensleft:after {
-  position: absolute;
-  top: -6px;
-  right: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
+    right: 10px;
 }
 
 .daterangepicker.openscenter:before {
-  position: absolute;
-  top: -7px;
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .daterangepicker.openscenter:after {
-  position: absolute;
-  top: -6px;
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .daterangepicker.opensright:before {
-  position: absolute;
-  top: -7px;
-  left: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
+    left: 9px;
 }
 
 .daterangepicker.opensright:after {
-  position: absolute;
-  top: -6px;
-  left: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-  content: '';
+    left: 10px;
 }
 
-.daterangepicker.dropup{
-  margin-top: -5px;
-}
-.daterangepicker.dropup:before{
-  top: initial;
-  bottom:-7px;
-  border-bottom: initial;
-  border-top: 7px solid #ccc;
-}
-.daterangepicker.dropup:after{
-  top: initial;
-  bottom:-6px;
-  border-bottom: initial;
-  border-top: 6px solid #fff;
+.daterangepicker.dropup {
+    margin-top: -5px;
 }
 
-.daterangepicker.dropdown-menu {
-  max-width: none;
-  z-index: 3000;
+.daterangepicker.dropup:before {
+    top: initial;
+    bottom: -7px;
+    border-bottom: initial;
+    border-top: 7px solid #ccc;
 }
 
-.daterangepicker .ranges, .daterangepicker .calendar {
-  float: left;
+.daterangepicker.dropup:after {
+    top: initial;
+    bottom: -6px;
+    border-bottom: initial;
+    border-top: 6px solid #fff;
 }
 
-.daterangepicker.single .ranges, .daterangepicker.single .calendar {
-  float: none;
+.daterangepicker.dropdown-menu {
+    max-width: none;
+    z-index: 3001;
 }
 
-.daterangepicker .ranges {
-  margin: 4px;
-  text-align: left;
+.daterangepicker.single .ranges,
+.daterangepicker.single .calendar {
+    float: none;
 }
 
-.daterangepicker .calendar {
-  display: none;
-  max-width: 270px;
+.daterangepicker.show-calendar .calendar {
+    display: block;
 }
 
-.daterangepicker.show-calendar .calendar {
-  display: block;
+.daterangepicker .calendar {
+    display: none;
+    max-width: 270px;
+    margin: 4px;
 }
 
 .daterangepicker .calendar.single .calendar-table {
-  border: none;
+    border: none;
 }
 
-/* Calendars */
-
-.daterangepicker .calendar th, .daterangepicker .calendar td {
-  white-space: nowrap;
-  text-align: center;
-  min-width: 32px;
+.daterangepicker .calendar th,
+.daterangepicker .calendar td {
+    white-space: nowrap;
+    text-align: center;
+    min-width: 32px;
 }
 
 .daterangepicker .calendar-table {
-  border: 1px solid #ddd;
-  padding: 4px;
-  border-radius: 4px;
-  background: #fff;
-}
-
-.daterangepicker .calendar.left .calendar-table {
-  border-right: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.daterangepicker .calendar.right .calendar-table {
-  border-left: none;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;  
-}
-
-.daterangepicker .calendar.left {
-  margin: 4px 0 4px 4px;
-}
-
-.daterangepicker .calendar.right {
-  margin: 4px 4px 4px 0;
-}
-
-.daterangepicker .calendar.left .calendar-table {
-  padding-right: 12px;
+    border: 1px solid #fff;
+    padding: 4px;
+    border-radius: 4px;
+    background: #fff;
 }
 
 .daterangepicker table {
-  width: 100%;
-  margin: 0;
+    width: 100%;
+    margin: 0;
 }
 
-.daterangepicker td, .daterangepicker th {
-  text-align: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  white-space: nowrap;
-  cursor: pointer;
+.daterangepicker td,
+.daterangepicker th {
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    cursor: pointer;
 }
 
-.daterangepicker td.off {
-  color: #999;
+.daterangepicker td.available:hover,
+.daterangepicker th.available:hover {
+    background-color: #eee;
+    border-color: transparent;
+    color: inherit;
 }
 
-.daterangepicker td.disabled, .daterangepicker option.disabled {
-  color: #999;
+.daterangepicker td.week,
+.daterangepicker th.week {
+    font-size: 80%;
+    color: #ccc;
 }
 
-.daterangepicker td.available:hover, .daterangepicker th.available:hover {
-  background: #eee;
+.daterangepicker td.off,
+.daterangepicker td.off.in-range,
+.daterangepicker td.off.start-date,
+.daterangepicker td.off.end-date {
+    background-color: #fff;
+    border-color: transparent;
+    color: #999;
 }
 
 .daterangepicker td.in-range {
-  background: #ebf4f8;
-  border-radius: 0;
+    background-color: #ebf4f8;
+    border-color: transparent;
+    color: #000;
+    border-radius: 0;
 }
 
 .daterangepicker td.start-date {
-  border-radius: 4px 0 0 4px;
+    border-radius: 4px 0 0 4px;
 }
 
 .daterangepicker td.end-date {
-  border-radius: 0 4px 4px 0;
+    border-radius: 0 4px 4px 0;
 }
 
 .daterangepicker td.start-date.end-date {
-  border-radius: 4px;
-}
-
-.daterangepicker td.active, .daterangepicker td.active:hover {
-  background-color: #357ebd;
-  border-color: #3071a9;
-  color: #fff;
+    border-radius: 4px;
 }
 
-.daterangepicker td.week, .daterangepicker th.week {
-  font-size: 80%;
-  color: #ccc;
+.daterangepicker td.active,
+.daterangepicker td.active:hover {
+    background-color: #357ebd;
+    border-color: transparent;
+    color: #fff;
 }
 
-.daterangepicker select.monthselect, .daterangepicker select.yearselect {
-  font-size: 12px;
-  padding: 1px;
-  height: auto;
-  margin: 0;
-  cursor: default;
+.daterangepicker th.month {
+    width: auto;
 }
 
-.daterangepicker select.monthselect {
-  margin-right: 2%;
-  width: 56%;
+.daterangepicker td.disabled,
+.daterangepicker option.disabled {
+    color: #999;
+    cursor: not-allowed;
+    text-decoration: line-through;
 }
 
+.daterangepicker select.monthselect,
 .daterangepicker select.yearselect {
-  width: 40%;
+    font-size: 12px;
+    padding: 1px;
+    height: auto;
+    margin: 0;
+    cursor: default;
 }
 
-.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
-  width: 50px;
-  margin-bottom: 0;
+.daterangepicker select.monthselect {
+    margin-right: 2%;
+    width: 56%;
 }
 
-.daterangepicker th.month {
-  width: auto;
+.daterangepicker select.yearselect {
+    width: 40%;
 }
 
-/* Text Input Above Each Calendar */
-
-.daterangepicker .input-mini {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #555;
-  display: block;
-  height: 30px;
-  line-height: 30px;
-  vertical-align: middle;
-  margin: 0 0 5px 0;
-  padding: 0 6px 0 28px;
-  width: 100%;
+.daterangepicker select.hourselect,
+.daterangepicker select.minuteselect,
+.daterangepicker select.secondselect,
+.daterangepicker select.ampmselect {
+    width: 50px;
+    margin-bottom: 0;
 }
 
-.daterangepicker .daterangepicker_input i {
-  position: absolute;
-  left: 8px;
-  top: 8px;
+.daterangepicker .input-mini {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: #555;
+    height: 30px;
+    line-height: 30px;
+    display: block;
+    vertical-align: middle;
+    margin: 0 0 5px 0;
+    padding: 0 6px 0 28px;
+    width: 100%;
 }
 
-.daterangepicker .left .daterangepicker_input {
-  padding-right: 12px;
+.daterangepicker .input-mini.active {
+    border: 1px solid #08c;
+    border-radius: 4px;
 }
 
 .daterangepicker .daterangepicker_input {
-  position: relative;
-}
-
-/* Time Picker */
-
-.daterangepicker .calendar-time {
-  text-align: center;
-  margin: 5px auto;
-  line-height: 30px;
-  position: relative;
-  padding-left: 28px;
+    position: relative;
 }
 
-.daterangepicker .calendar-time select.disabled {
-  color: #ccc;
-  cursor: not-allowed;
+.daterangepicker .daterangepicker_input i {
+    position: absolute;
+    left: 8px;
+    top: 8px;
 }
 
-/* Predefined Ranges */
-
-.daterangepicker .ranges {
-  font-size: 11px;
+.daterangepicker.rtl .input-mini {
+    padding-right: 28px;
+    padding-left: 6px;
 }
 
-.daterangepicker .ranges ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 160px;
+.daterangepicker.rtl .daterangepicker_input i {
+    left: auto;
+    right: 8px;
 }
 
-.daterangepicker .ranges li {
-  font-size: 13px;
-  background: #f5f5f5;
-  border: 1px solid #f5f5f5;
-  color: #08c;
-  padding: 3px 12px;
-  margin-bottom: 8px;
-  border-radius: 5px;
-  cursor: pointer;
+.daterangepicker .calendar-time {
+    text-align: center;
+    margin: 5px auto;
+    line-height: 30px;
+    position: relative;
+    padding-left: 28px;
 }
 
-.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
-  background: #08c;
-  border: 1px solid #08c;
-  color: #fff;
+.daterangepicker .calendar-time select.disabled {
+    color: #ccc;
+    cursor: not-allowed;
+}
+
+.ranges {
+    font-size: 11px;
+    float: none;
+    margin: 4px;
+    text-align: left;
+}
+
+.ranges ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+}
+
+.ranges li {
+    font-size: 13px;
+    background: #f5f5f5;
+    border: 1px solid #f5f5f5;
+    border-radius: 4px;
+    color: #08c;
+    padding: 3px 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+}
+
+.ranges li:hover {
+    background: #08c;
+    border: 1px solid #08c;
+    color: #fff;
+}
+
+.ranges li.active {
+    background: #08c;
+    border: 1px solid #08c;
+    color: #fff;
+}
+
+
+/*  Larger Screen Styling */
+
+@media (min-width: 564px) {
+    .daterangepicker {
+        width: auto;
+    }
+    .daterangepicker .ranges ul {
+        width: 160px;
+    }
+    .daterangepicker.single .ranges ul {
+        width: 100%;
+    }
+    .daterangepicker.single .calendar.left {
+        clear: none;
+    }
+    .daterangepicker.single.ltr .ranges,
+    .daterangepicker.single.ltr .calendar {
+        float: left;
+    }
+    .daterangepicker.single.rtl .ranges,
+    .daterangepicker.single.rtl .calendar {
+        float: right;
+    }
+    .daterangepicker.ltr {
+        direction: ltr;
+        text-align: left;
+    }
+    .daterangepicker.ltr .calendar.left {
+        clear: left;
+        margin-right: 0;
+    }
+    .daterangepicker.ltr .calendar.left .calendar-table {
+        border-right: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .daterangepicker.ltr .calendar.right {
+        margin-left: 0;
+    }
+    .daterangepicker.ltr .calendar.right .calendar-table {
+        border-left: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .daterangepicker.ltr .left .daterangepicker_input {
+        padding-right: 12px;
+    }
+    .daterangepicker.ltr .calendar.left .calendar-table {
+        padding-right: 12px;
+    }
+    .daterangepicker.ltr .ranges,
+    .daterangepicker.ltr .calendar {
+        float: left;
+    }
+    .daterangepicker.rtl {
+        direction: rtl;
+        text-align: right;
+    }
+    .daterangepicker.rtl .calendar.left {
+        clear: right;
+        margin-left: 0;
+    }
+    .daterangepicker.rtl .calendar.left .calendar-table {
+        border-left: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .daterangepicker.rtl .calendar.right {
+        margin-right: 0;
+    }
+    .daterangepicker.rtl .calendar.right .calendar-table {
+        border-right: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .daterangepicker.rtl .left .daterangepicker_input {
+        padding-left: 12px;
+    }
+    .daterangepicker.rtl .calendar.left .calendar-table {
+        padding-left: 12px;
+    }
+    .daterangepicker.rtl .ranges,
+    .daterangepicker.rtl .calendar {
+        text-align: right;
+        float: right;
+    }
+}
+
+@media (min-width: 730px) {
+    .daterangepicker .ranges {
+        width: auto;
+    }
+    .daterangepicker.ltr .ranges {
+        float: left;
+    }
+    .daterangepicker.rtl .ranges {
+        float: right;
+    }
+    .daterangepicker .calendar.left {
+        clear: none !important;
+    }
 }

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js

@@ -59,6 +59,7 @@ define(['require',
                 this.bindEvents();
                 this.graphParams = {};
                 this.unit = this.params.unit ? this.params.unit : "+1HOUR";
+                this.isEventTriggerdFromVent = false;
             },
             bindEvents: function() {
                 this.listenTo(this.vent, "tab:refresh", function(params) {
@@ -68,6 +69,7 @@ define(['require',
                     this.setValues(options);
                 }, this);
                 this.listenTo(this.vent, "date:click", function(options) {
+                	this.isEventTriggerdFromVent = true;
                     this.setValues(options);
                     this.ui.dateRange.data('daterangepicker').clickApply();
                 }, this);
@@ -165,6 +167,15 @@ define(['require',
 
 
                 this.ui.dateRange.on('apply.daterangepicker ', function(ev, picker) {
+                	if(! that.isEventTriggerdFromVent && !(_.isUndefined(picker.chosenLabel)) ){
+                		that.dateRangeLabel = picker.chosenLabel;
+                	}else{
+                		that.isEventTriggerdFromVent = false;
+                	}
+                	if (that.dateRangeLabel !== "Custom Range") {
+                		var last1Hour = that.dateUtil.getRelativeDateFromString(that.dateRangeLabel);
+                		that.setDateText(last1Hour[0], last1Hour[1]);  
+                	}
                     that.ui.dateRangeTitle.html(that.dateRangeLabel);
                     that.unit = that.checkDateRange(picker);
                     var options = {
@@ -178,7 +189,8 @@ define(['require',
                 });
                 this.ui.dateRange.on('show.daterangepicker', function(ev, picker) {
                     elem.find('li').removeClass('active');
-                    elem.find('li:contains(' + that.dateRangeLabel + ')').addClass('active')
+                    elem.find('li:contains(' + that.dateRangeLabel + ')').addClass('active');
+                       picker.chosenLabel = that.dateRangeLabel; 
                 });
                 this.ui.dateRange.on('hide.daterangepicker', function(ev, picker) {
                     that.pickerOpend = true
@@ -196,15 +208,6 @@ define(['require',
                     that.ui.dateRange.data('daterangepicker').clickApply();
 
                 });
-
-                elem.on("click", '.ranges ul li', function(e) {
-                    that.dateRangeLabel = $(this).text();
-                    if (that.dateRangeLabel !== "Custom Range") {
-                        var last1Hour = that.dateUtil.getRelativeDateFromString(that.dateRangeLabel);
-                        that.setDateText(last1Hour[0], last1Hour[1]);
-                        that.ui.dateRange.data('daterangepicker').clickApply();
-                    }
-                });
             },
             checkDateRange: function(picker) {
                 return this.dateUtil.calculateUnit(picker)

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js

@@ -205,7 +205,8 @@ define(['require',
                         parentEl: that.$el,
                         fetch: true,
                         rangeLabel: true,
-                        width: '55%'
+                        datePickerPosition : "left",
+                        width: '65%'
                     }));
                 });
             },

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js

@@ -275,7 +275,7 @@ define(['backbone',
     					hideFireButton : false,
     					buttonLabel : "Apply",
     					parentEl: that.$el.find(".row").first(),
-    					datePickerPosition : "right"
+    					datePickerPosition : "left"
     				}));
                 });
             },

ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css

@@ -2910,6 +2910,7 @@ td.filterName {
   content: "";
   display: table;
 }
+
 table.backgrid{
   overflow: auto !important;
 }
@@ -2926,12 +2927,6 @@ button.defaultCancelBtn{
   color: #333333 !important;
   background-color: #ffffff;
 }
-ul.user-profile{
-  list-style: none;
-  margin: 0;
-  -webkit-padding-start: 0;
-}
-ul.user-profile i{
-  font-size: 26px;
-  margin-right: 20px;
+.comparisonTab .daterangepicker .ranges{
+  float: right !important;
 }