You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by rl...@apache.org on 2018/01/05 23:04:43 UTC
[47/50] [abbrv] ambari git commit: AMBARI-22675 LogSearch Title Bar
Fixes. (Istvan Tobias via ababiichuk)
AMBARI-22675 LogSearch Title Bar Fixes. (Istvan Tobias via ababiichuk)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/b74b05c2
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/b74b05c2
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/b74b05c2
Branch: refs/heads/branch-feature-AMBARI-20859
Commit: b74b05c22f4dec6791e53944a0f6385625e33362
Parents: e077bd2
Author: Istvan Tobias <to...@gmail.com>
Authored: Tue Dec 19 19:14:17 2017 +0200
Committer: Robert Levas <rl...@hortonworks.com>
Committed: Fri Jan 5 17:54:17 2018 -0500
----------------------------------------------------------------------
.../src/app/components/app.component.html | 11 ++----
.../src/app/components/app.component.less | 4 +--
.../filters-panel/filters-panel.component.ts | 8 +++--
.../logs-container.component.html | 6 ++--
.../logs-container.component.less | 17 ++++++++--
.../logs-container/logs-container.component.ts | 35 +++++++++++++++++++-
.../main-container.component.html | 1 -
.../main-container.component.less | 1 -
.../main-container/main-container.component.ts | 5 +--
9 files changed, 63 insertions(+), 25 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.html
index 833f43f..495c8d9 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.html
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.html
@@ -16,7 +16,7 @@
-->
<header>
- <nav class="navbar navbar-fixed-top">
+ <nav class="navbar">
<div class="container-fluid">
<h1 [ngClass]="{'full-flex-width': !isAuthorized, 'pull-left': true}">{{'common.title' | translate}}</h1>
<top-menu *ngIf="isAuthorized"></top-menu>
@@ -24,11 +24,4 @@
</nav>
</header>
-<main-container>
- <ng-template>
- <!-- hidden element for moving the main bar outside the fixed header -->
- <div class="navbar invisible">
- <h1> </h1>
- </div>
- </ng-template>
-</main-container>
+<main-container></main-container>
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.less
index f0fecfc..476465c 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.less
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/app.component.less
@@ -18,11 +18,11 @@
@import 'mixins';
:host {
- .full-size;
+ background-color: @main-background-color; // TODO implement actual color
display: flex;
flex-direction: column;
- background-color: @main-background-color; // TODO implement actual color
line-height: @default-line-height;
+ min-height: 100vh;
.navbar {
margin-bottom: 0;
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.ts
index f9fe94b..480706a 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.ts
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';
+import {Component, OnChanges, SimpleChanges, Input, ViewContainerRef} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
@@ -33,7 +33,7 @@ import {LogsContainerService} from '@app/services/logs-container.service';
})
export class FiltersPanelComponent implements OnChanges {
- constructor(private logsContainer: LogsContainerService) {
+ constructor(private logsContainer: LogsContainerService, public viewContainerRef: ViewContainerRef) {
}
ngOnChanges(changes: SimpleChanges): void {
@@ -62,6 +62,10 @@ export class FiltersPanelComponent implements OnChanges {
searchBoxItems: Observable<ListItem[]>;
+ get containerEl(): Element {
+ return this.viewContainerRef.element.nativeElement;
+ }
+
get filters(): {[key: string]: FilterCondition} {
return this.logsContainer.filters;
}
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html
index 5e401d8..d1b11e6 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html
@@ -24,9 +24,9 @@
</div>
</div>
</div>
-<div class="container-fluid">
- <filters-panel class="row" [filtersForm]="filtersForm" [logsType]="logsType"></filters-panel>
- <div class="row">
+<div #container [ngClass]="{'container-fluid': true, 'fixed-filterbar': isFilterPanelFixedPostioned}">
+ <filters-panel class="row" [filtersForm]="filtersForm" [logsType]="logsType" #filtersPanel></filters-panel>
+ <div class="row events-count">
<div *ngIf="autoRefreshRemainingSeconds" class="col-md-12">
<div class="auto-refresh-message pull-right">
{{'filter.capture.triggeringRefresh' | translate: autoRefreshMessageParams}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less
index b4d44fb..243bb5b 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less
@@ -32,7 +32,20 @@
}
}
- filters-panel {
- margin-bottom: @block-margin-top;
+ .fixed-filterbar {
+ filters-panel {
+ background-color: fadeout(@filters-panel-background-color, 35%);
+ left: 0;
+ margin: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+ }
+ }
+
+ .events-count {
+ margin-top: @block-margin-top;
}
+
}
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
index 86709fb..cf28a8b 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-import {Component} from '@angular/core';
+import {Component, ElementRef, ViewChild, HostListener} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import {LogsContainerService} from '@app/services/logs-container.service';
@@ -31,6 +31,7 @@ import {ActiveServiceLogEntry} from '@app/classes/active-service-log-entry';
import {HistogramOptions} from '@app/classes/histogram-options';
import {ListItem} from '@app/classes/list-item';
import {LogsType} from '@app/classes/string';
+import {FiltersPanelComponent} from "@app/components/filters-panel/filters-panel.component";
@Component({
selector: 'logs-container',
@@ -51,6 +52,16 @@ export class LogsContainerComponent {
appState.getParameter('isServiceLogContextView').subscribe((value: boolean) => this.isServiceLogContextView = value);
}
+ @ViewChild('container') containerRef: ElementRef;
+ @ViewChild('filtersPanel') filtersPanelRef: FiltersPanelComponent;
+
+ @HostListener("window:scroll", ['$event'])
+ onWindowScroll(): void {
+ this.setFixedPositionValue();
+ }
+
+ private isFilterPanelFixedPostioned: boolean = false;
+
tabs: Observable<Tab[]> = this.tabsStorage.getAll();
get filtersForm(): FormGroup {
@@ -115,6 +126,28 @@ export class LogsContainerComponent {
return this.logsContainer.serviceLogsColumns;
}
+ /**
+ * The goal is to set the fixed position of the filter panel when it is scrolled to the top. So that the panel
+ * can be always visible for the user.
+ */
+ private setFixedPositionValue(): void {
+ const el:Element = this.containerRef.nativeElement;
+ const top:number = el.getBoundingClientRect().top;
+ const valueBefore: boolean = this.isFilterPanelFixedPostioned;
+ if (valueBefore != (top <= 0)) {
+ const fpEl:Element = this.filtersPanelRef.containerEl;
+ this.isFilterPanelFixedPostioned = top <= 0;
+ const filtersPanelHeight: number = fpEl.getBoundingClientRect().height;
+ const containerPaddingTop: number = parseFloat(window.getComputedStyle(el).paddingTop);
+ const htmlEl:HTMLElement = this.containerRef.nativeElement;
+ if (this.isFilterPanelFixedPostioned) {
+ htmlEl.style.paddingTop = (containerPaddingTop + filtersPanelHeight) + 'px';
+ } else {
+ htmlEl.style.paddingTop = (containerPaddingTop - filtersPanelHeight) + 'px';
+ }
+ }
+ }
+
setCustomTimeRange(startTime: number, endTime: number): void {
this.logsContainer.setCustomTimeRange(startTime, endTime);
}
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.html
index 95dd238..b85cd87 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.html
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.html
@@ -15,7 +15,6 @@
limitations under the License.
-->
-<ng-template [ngTemplateOutlet]="template"></ng-template>
<div *ngIf="isInitialLoading" class="text-center">
<span class="fa fa-spinner fa-spin"></span>
</div>
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.less
index bca668d..115f822 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.less
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.less
@@ -19,6 +19,5 @@
@import '../mixins';
:host {
- .full-size;
overflow-x: hidden;
}
http://git-wip-us.apache.org/repos/asf/ambari/blob/b74b05c2/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.ts
index 6747a0c..f83d22b 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/main-container/main-container.component.ts
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-import {Component, ContentChild, TemplateRef} from '@angular/core';
+import {Component} from '@angular/core';
import {AppStateService} from '@app/services/storage/app-state.service';
@Component({
@@ -31,9 +31,6 @@ export class MainContainerComponent {
appState.getParameter('isInitialLoading').subscribe((value: boolean) => this.isInitialLoading = value);
}
- @ContentChild(TemplateRef)
- template;
-
isAuthorized: boolean = false;
isInitialLoading: boolean = false;