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.
