[ambari] branch trunk updated: [AMBARI-24425] [Log Search UI] Create visible time histogram selection area (#2025)

[tobiasistvan]

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

tobiasistvan pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ambari.git


The following commit(s) were added to refs/heads/trunk by this push:
     new d15a7bd  [AMBARI-24425] [Log Search UI] Create visible time histogram 
selection area (#2025)
d15a7bd is described below

commit d15a7bd3602478c7207614f68fe13e7e8c7f1872
Author: Istvan Tobias <tobias.ist...@gmail.com>
AuthorDate: Tue Aug 14 10:38:15 2018 +0200

    [AMBARI-24425] [Log Search UI] Create visible time histogram selection area 
(#2025)
---
 .../src/app/classes/components/graph/time-graph.component.less        | 4 ++--
 .../src/app/classes/components/graph/time-graph.component.ts          | 3 +++
 .../ambari-logsearch-web/src/app/modules/shared/variables.less        | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git 
a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less
 
b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less
index af72943..73f1870 100644
--- 
a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less
+++ 
b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less
@@ -42,7 +42,7 @@
   }
 
   /deep/ rect.unselected-drag-area {
-    fill: darken(@main-background-color, 10%);
-    opacity: .6;
+    fill: @graph-invert-selection-background;
+    opacity: .4;
   }
 }
diff --git 
a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts
 
b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts
index a20ac36..ad00a68 100644
--- 
a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts
+++ 
b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts
@@ -230,6 +230,7 @@ export class TimeGraphComponent extends GraphComponent 
implements OnInit {
         this.dragStartX = Math.max(0, this.getDragX(containers[0]) - 
this.margin.left);
         this.dragArea = this.svg.insert('rect', ':first-child').attr('x', 
this.dragStartX).attr('y', 0).attr('width', 0)
           .attr('height', this.height).attr('class', 'drag-area');
+        this.createInvertDragArea(this.dragStartX, this.dragStartX);
       })
       .on('drag', (datum: undefined, index: number, containers: 
d3.ContainerElement[]): void => {
         const mousePos = this.getDragX(containers[0]);
@@ -239,6 +240,7 @@ export class TimeGraphComponent extends GraphComponent 
implements OnInit {
         this.dragArea.attr('x', startX).attr('width', currentWidth);
         const timeRange = this.getTimeRangeByXRanges(startX, startX + 
currentWidth);
         this.setChartTimeGap(new Date(timeRange[0]), new Date(timeRange[1]));
+        this.setInvertDragArea(startX, startX + currentWidth);
       })
       .on('end', (): void => {
         const dragAreaDetails = this.dragArea.node().getBBox();
@@ -248,6 +250,7 @@ export class TimeGraphComponent extends GraphComponent 
implements OnInit {
           const dateRange: [number, number] = 
this.getTimeRangeByXRanges(startX, endX);
           this.selectArea.emit(dateRange);
           this.dragArea.remove();
+          this.clearInvertDragArea();
           this.setChartTimeGap(new Date(dateRange[0]), new Date(dateRange[1]));
         }
       })
diff --git 
a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/variables.less 
b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/variables.less
index 4b2677f..fb76842 100644
--- 
a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/variables.less
+++ 
b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/variables.less
@@ -77,6 +77,7 @@
 
 // Graph
 @graph-padding: .5rem;
+@graph-invert-selection-background: @grey-color;
 
 // Log list
 @log-list-row-data-padding: 8px;