This is an automated email from the ASF dual-hosted git repository. ababiichuk 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 63979c7 AMBARI-23687 Log Search UI: the UI does not load the initial data on logs screen loading 63979c7 is described below commit 63979c7423851cf2dacf5d338bb8096a270ebeb5 Author: Istvan Tobias <tobias.ist...@gmail.com> AuthorDate: Mon May 7 10:14:37 2018 +0200 AMBARI-23687 Log Search UI: the UI does not load the initial data on logs screen loading --- .../components/graph/time-graph.component.less | 2 +- .../src/app/components/app.component.html | 4 +- .../src/app/components/app.component.less | 7 ++ .../cluster-filter/cluster-filter.component.ts | 21 +++- .../logs-container/logs-container.component.ts | 1 + .../dropdown-button/dropdown-button.component.ts | 14 ++- .../dropdown-list/dropdown-list.component.html | 50 ++++++---- .../app/modules/shipper/services/shipper.guard.ts | 20 ++-- .../src/app/services/logs-container.service.ts | 106 +++++++++++---------- 9 files changed, 134 insertions(+), 91 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 d9952c6..af72943 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 @@ -18,7 +18,7 @@ @import '../../../modules/shared/mixins'; :host { - background: #ECECEC; // TODO add style according to actual design + background: #FFF; // TODO add style according to actual design /deep/ svg { cursor: crosshair; 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 574ce61..e190d3b 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,9 +16,9 @@ --> <header> - <nav class="navbar"> + <nav class="navbar" [class.authorized]="isAuthorized$ | async"> <h1 [ngClass]="{'full-flex-width': !(isAuthorized$ | async), 'pull-left': true}">{{'common.title' | translate}}</h1> - <breadcrumbs></breadcrumbs> + <breadcrumbs *ngIf="isAuthorized$ | async"></breadcrumbs> <top-menu *ngIf="isAuthorized$ | async"></top-menu> </nav> </header> 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 26b39fb..2e1a0c6 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 @@ -30,8 +30,10 @@ background-color: @navbar-background-color; color: #fff; .stretch-flex; + align-items: center; h1 { align-items: center; + align-self: stretch; background-color: lighten(@navbar-background-color, 5%); display: flex; margin: 0 2em 0 0; @@ -50,5 +52,10 @@ margin-left: auto; margin-right: 5em; } + &:not(.authorized) { + h1 { + margin: 0; + } + } } } diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/cluster-filter/cluster-filter.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/cluster-filter/cluster-filter.component.ts index de766a0..df5e99d 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/cluster-filter/cluster-filter.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/cluster-filter/cluster-filter.component.ts @@ -102,14 +102,25 @@ export class ClusterFilterComponent implements OnInit, OnDestroy { let clusterSelection = this.routingUtilsService.getParamFromActivatedRouteSnapshot(routeSnapshot, 'cluster'); if (clusterSelection) { clusterSelection = this.useMultiSelection.getValue() ? clusterSelection.split(/[,;]/) : clusterSelection; + if (Array.isArray(clusterSelection)) { + clusterSelection = clusterSelection.map( + (clusterName: string) => Object.assign(this.utilsService.getListItemFromString(clusterName), { + isChecked: true + }) + ); + } else { + clusterSelection = Object.assign(this.utilsService.getListItemFromString(clusterSelection), { + isChecked: true + }); + } this.appStateService.getParameter('clustersDataState') .filter((state: DataAvailabilityValues) => state === DataAvailabilityValues.AVAILABLE) .first() .subscribe(() => { - this.filterDropdown.updateSelection(Object.assign(this.utilsService.getListItemFromString(clusterSelection), { - isChecked: true - })); + this.filterDropdown.updateSelection(clusterSelection); }); + } else { + this.filterDropdown.selection = []; } } @@ -124,10 +135,10 @@ export class ClusterFilterComponent implements OnInit, OnDestroy { } onDropDownSelectionChanged = (values): void => { - this.setSelection(values); + this.setSelectionInClusterSelectionStore(values); } - private setSelection = (values): void => { + private setSelectionInClusterSelectionStore = (values): void => { this.clusterSelectionStoreService.getParameter(this.clusterSelectionStoreKey.getValue()).first() .subscribe(currentCluster => { if (!this.utilsService.isEqual(currentCluster, values)) { 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 37c6492..8ab1d49 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 @@ -22,6 +22,7 @@ import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/skipWhile'; import 'rxjs/add/operator/skip'; +import 'rxjs/add/operator/throttleTime'; import {LogsContainerService} from '@app/services/logs-container.service'; import {ServiceLogsHistogramDataService} from '@app/services/storage/service-logs-histogram-data.service'; import {AuditLogsGraphDataService} from '@app/services/storage/audit-logs-graph-data.service'; diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts index 373142d..8ed1ab3 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts @@ -93,9 +93,17 @@ export class DropdownButtonComponent { const checkedItems = this.options.filter((option: ListItem): boolean => option.isChecked); this.selection = checkedItems; this.selectItem.emit(checkedItems.map((option: ListItem): any => option.value)); - } else if (!this.utils.isEqual(this.selection[0], item)) { - this.selection = [item]; - this.selectItem.emit(item.value); + } else { + if (item) { + item.isChecked = true; + } + if (!this.utils.isEqual(this.selection[0], item)) { + if (this.selection && this.selection.length) { + this.selection[0].isChecked = false; + } + this.selection = item ? [item] : []; + this.selectItem.emit(item ? item.value : undefined); + } } } diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html index f0c5854..3423f54 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html @@ -41,28 +41,36 @@ <i class="fa fa-search"></i> <i class="fa fa-times-circle-o clear-filter" [class.hide]="!filterRegExp" (click)="clearFilter($event)"></i> </li> -<li class="selection-all" *ngIf="isMultipleChoice"> - <label *ngIf="isMultipleChoice && items && items.length" class="list-item-label" (click)="changeAllSelection($event)"> - <input type="checkbox" #selectAll [value]="items && items.length" - [checked]="items && (items.length === itemsSelected.length)"> - <label class="label-container"> - <span>{{'dropdown.selection.all' | translate:({total: items && items.length, listName: ''})}}</span> - </label> - </label> -</li> -<li *ngIf="isMultipleChoice && items && items.length" class="divider"></li> -<li class="selections" *ngIf="itemsSelected.length>0"> - <span>{{'dropdown.selection' | translate:({total: itemsSelected.length})}}</span> - <a href="#" (click)="onClearSelectionClick($event)">{{'dropdown.selection.clear' | translate}}</a> -</li> -<ng-container *ngFor="let item of itemsSelected"> - <ng-container - *ngTemplateOutlet="listItem; context:{$implicit: item, isMultipleChoice: isMultipleChoice}"></ng-container> +<ng-container *ngIf="isMultipleChoice"> + <li class="selection-all"> + <label *ngIf="items && items.length" class="list-item-label" (click)="changeAllSelection($event)"> + <input type="checkbox" #selectAll [value]="items && items.length" + [checked]="items && (items.length === itemsSelected.length)"> + <label class="label-container"> + <span>{{'dropdown.selection.all' | translate:({total: items && items.length, listName: ''})}}</span> + </label> + </label> + </li> + <li *ngIf="items && items.length" class="divider"></li> + <li class="selections" *ngIf="itemsSelected.length>0"> + <span>{{'dropdown.selection' | translate:({total: itemsSelected.length})}}</span> + <a href="#" (click)="onClearSelectionClick($event)">{{'dropdown.selection.clear' | translate}}</a> + </li> + <ng-container *ngFor="let item of itemsSelected"> + <ng-container + *ngTemplateOutlet="listItem; context:{$implicit: item, isMultipleChoice: isMultipleChoice}"></ng-container> + </ng-container> + <li *ngIf="itemsSelected.length && itemsUnSelected.length" class="divider"></li> + <ng-container *ngFor="let item of itemsUnSelected"> + <ng-container + *ngTemplateOutlet="listItem; context:{$implicit: item, isMultipleChoice: isMultipleChoice}"></ng-container> + </ng-container> </ng-container> -<li *ngIf="itemsSelected.length && itemsUnSelected.length" class="divider"></li> -<ng-container *ngFor="let item of itemsUnSelected"> - <ng-container - *ngTemplateOutlet="listItem; context:{$implicit: item, isMultipleChoice: isMultipleChoice}"></ng-container> +<ng-container *ngIf="!isMultipleChoice"> + <ng-container *ngFor="let item of items"> + <ng-container + *ngTemplateOutlet="listItem; context:{$implicit: item, isMultipleChoice: isMultipleChoice}"></ng-container> + </ng-container> </ng-container> diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shipper/services/shipper.guard.ts b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shipper/services/shipper.guard.ts index a8e2320..4c92c05 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shipper/services/shipper.guard.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shipper/services/shipper.guard.ts @@ -63,15 +63,17 @@ export class ShipperGuard implements CanActivate { if (!canActivate) { const title = 'shipperConfiguration.navigation.title'; const invalidKey: string = cluster === validCluster ? 'invalidService' : 'invalidCluster'; - const message = this.translateService.instant(`shipperConfiguration.navigation.${invalidKey}`, { - cluster, - service - }); - this.notificationService.addNotification({ - title, - message, - type: NotificationType.ERROR - }); + if (cluster || service) { + const message = this.translateService.instant(`shipperConfiguration.navigation.${invalidKey}`, { + cluster: cluster || '', + service: service || '' + }); + this.notificationService.addNotification({ + title, + message, + type: NotificationType.ERROR + }); + } this.router.navigate(['/shipper', validCluster, services[0]]); } return canActivate; diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts b/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts index 68b90ac..13e6333 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts @@ -630,9 +630,6 @@ export class LogsContainerService { return Object.assign(currentObject, item); }, {}); this.filtersForm = new FormGroup(formItems); - // this.loadComponents(); - // this.loadClusters(); - // this.loadHosts(); this.componentsStorage.getAll().subscribe(this.setComponentsFilters); this.clustersStorage.getAll().subscribe(this.setClustersFilters); @@ -641,10 +638,12 @@ export class LogsContainerService { appState.getParameter('activeLog').subscribe((value: ActiveServiceLogEntry | null) => this.activeLog = value); appState.getParameter('isServiceLogsFileView').subscribe((value: boolean) => this.isServiceLogsFileView = value); appState.getParameter('activeLogsType').subscribe((value: LogsType) => { - if (this.activeLogsType !== value) { + if (this.isLogsTypeSupported(value)) { this.activeLogsType = value; + this.loadLogs(this.activeLogsType); } }); + appSettings.getParameter('timeZone').subscribe((value: string) => this.timeZone = value || this.defaultTimeZone); tabsStorage.mapCollection((tab: Tab): Tab => { return Object.assign({}, tab, { @@ -712,7 +711,6 @@ export class LogsContainerService { * @param {Tab} tab */ private setAppStateByTab(tab: Tab): void { - this.activeLogsType = tab.appState.activeLogsType; // there are dependencies on this prop... this.appState.setParameters(tab.appState); } @@ -733,9 +731,9 @@ export class LogsContainerService { * @param {Tab} activeTab */ switchTab(activeTab: Tab): void { + this.syncTabFiltersToFilterForms(activeTab); this.setActiveTab(activeTab); this.setAppStateByTab(activeTab); - this.syncTabFiltersToFilterForms(activeTab); } /** @@ -805,59 +803,67 @@ export class LogsContainerService { return true; } + isLogsTypeSupported(logsType: LogsType): boolean { + return !!this.logsTypeMap[logsType]; + } + loadLogs = (logsType: LogsType = this.activeLogsType): void => { - this.httpClient.get(logsType, this.getParams('listFilters')).subscribe((response: Response): void => { - const jsonResponse = response.json(), - model = this.logsTypeMap[logsType].logsModel; - model.clear(); - if (jsonResponse) { - const logs = jsonResponse.logList, - count = jsonResponse.totalCount || 0; - if (logs) { - model.addInstances(logs); - } - this.totalCount = count; - } - }); - this.httpClient.get(this.logsTypeMap[logsType].graphRequestName, this.getParams('graphFilters')) - .subscribe((response: Response): void => { + if (this.isLogsTypeSupported(logsType)) { + this.httpClient.get(logsType, this.getParams('listFilters', {}, logsType)).subscribe((response: Response): void => { const jsonResponse = response.json(), - model = this.logsTypeMap[logsType].graphModel; + model = this.logsTypeMap[logsType].logsModel; model.clear(); if (jsonResponse) { - const graphData = jsonResponse.graphData; - if (graphData) { - model.addInstances(graphData); + const logs = jsonResponse.logList, + count = jsonResponse.totalCount || 0; + if (logs) { + model.addInstances(logs); } + this.totalCount = count; } }); - if (logsType === 'auditLogs') { - this.httpClient.get('topAuditLogsResources', this.getParams('topResourcesFilters', { - field: 'resource' - }), { - number: this.topResourcesCount - }).subscribe((response: Response): void => { - const jsonResponse = response.json(); - if (jsonResponse) { - const data = jsonResponse.graphData; - if (data) { - this.topResourcesGraphData = this.parseAuditLogsTopData(data); + this.httpClient.get(this.logsTypeMap[logsType].graphRequestName, this.getParams('graphFilters', {}, logsType)) + .subscribe((response: Response): void => { + const jsonResponse = response.json(), + model = this.logsTypeMap[logsType].graphModel; + model.clear(); + if (jsonResponse) { + const graphData = jsonResponse.graphData; + if (graphData) { + model.addInstances(graphData); + } } - } - }); - this.httpClient.get('topAuditLogsResources', this.getParams('topResourcesFilters', { - field: 'reqUser' - }), { - number: this.topUsersCount - }).subscribe((response: Response): void => { - const jsonResponse = response.json(); - if (jsonResponse) { - const data = jsonResponse.graphData; - if (data) { - this.topUsersGraphData = this.parseAuditLogsTopData(data); + }); + if (logsType === 'auditLogs') { + this.httpClient.get('topAuditLogsResources', this.getParams('topResourcesFilters', { + field: 'resource' + }, logsType), { + number: this.topResourcesCount + }).subscribe((response: Response): void => { + const jsonResponse = response.json(); + if (jsonResponse) { + const data = jsonResponse.graphData; + if (data) { + this.topResourcesGraphData = this.parseAuditLogsTopData(data); + } } - } - }); + }); + this.httpClient.get('topAuditLogsResources', this.getParams('topResourcesFilters', { + field: 'reqUser' + }, logsType), { + number: this.topUsersCount + }).subscribe((response: Response): void => { + const jsonResponse = response.json(); + if (jsonResponse) { + const data = jsonResponse.graphData; + if (data) { + this.topUsersGraphData = this.parseAuditLogsTopData(data); + } + } + }); + } + } else { + console.error(`Logs Type does not supported: ${logsType}`); } } -- To stop receiving notification emails like this one, please contact ababiic...@apache.org.