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/f3dc1ca3 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/f3dc1ca3 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/f3dc1ca3 Branch: refs/heads/branch-feature-AMBARI-22008-isilon Commit: f3dc1ca399c25c3f875bf52e75948839ce5d0b11 Parents: 9bb0980 Author: Istvan Tobias <tobias.ist...@gmail.com> Authored: Tue Dec 19 19:14:17 2017 +0200 Committer: ababiichuk <ababiic...@hortonworks.com> Committed: Tue Dec 19 19:14:17 2017 +0200 ---------------------------------------------------------------------- .../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/f3dc1ca3/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/f3dc1ca3/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/f3dc1ca3/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/f3dc1ca3/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/f3dc1ca3/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/f3dc1ca3/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/f3dc1ca3/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/f3dc1ca3/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/f3dc1ca3/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;
