Skip to content

Commit

Permalink
Add loading indicator for left navigation
Browse files Browse the repository at this point in the history 
Resolves #1013
  • Loading branch information
@ghillert @oodamien
ghillert authored and oodamien committed Mar 19, 2019
1 parent 641ddce commit 4815377
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 62 deletions.
129 changes: 70 additions & 59 deletions ui/src/app/layout/navigation/navigation.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,79 @@
<app-navigation-search [force]="!isCollapsed" [dataflowAppRoles]="['ROLE_VIEW']"></app-navigation-search>
<div *ngIf="featureInfoLoaded">

<div class="sidebar-user" *ngIf="securityInfo.isAuthenticationEnabled" [dataflowAppRoles]="['ROLE_VIEW']">
<div dropdown class="sidebar-item dropdown" *ngIf="securityInfo.isAuthenticated">
<a class="dropdown-toggle" dropdownToggle>
<i class="sidebar-fa fa fa-user"></i>
<span class="text">{{ securityInfo.username | truncate: 20 }}</span>
<span class="fa fa-chevron-right"></span>
</a>
<ul class="dropdown-menu" *dropdownMenu="">
<li><a routerLink="logout">Logout</a></li>
</ul>
<app-navigation-search [force]="!isCollapsed" [dataflowAppRoles]="['ROLE_VIEW']"></app-navigation-search>
<div class="sidebar-user" *ngIf="securityInfo.isAuthenticationEnabled" [dataflowAppRoles]="['ROLE_VIEW']">
<div dropdown class="sidebar-item dropdown" *ngIf="securityInfo.isAuthenticated">
<a class="dropdown-toggle" dropdownToggle>
<i class="sidebar-fa fa fa-user"></i>
<span class="text">{{ securityInfo.username | truncate: 20 }}</span>
<span class="fa fa-chevron-right"></span>
</a>
<ul class="dropdown-menu" *dropdownMenu="">
<li>
<a routerLink="logout">Logout</a>
</li>
</ul>
</div>
</div>
</div>

<div class="sidebar-items" [dataflowAppRoles]="['ROLE_VIEW']">
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']">
<a routerLink="apps">
<i class="sidebar-fa fa fa-tags"></i>
<span class="text">Apps</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="streamsEnabled">
<a routerLink="runtime/apps">
<i class="sidebar-fa fa fa-terminal"></i>
<span class="text">Runtime</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="streamsEnabled">
<a routerLink="streams">
<i class="sidebar-fa fa fa-cloud"></i>
<span class="text">Streams</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="tasksEnabled">
<a routerLink="tasks">
<i class="sidebar-fa fa fa-tasks"></i>
<span class="text">Tasks</span>
</a>
<div class="sidebar-items" [dataflowAppRoles]="['ROLE_VIEW']">
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']">
<a routerLink="apps">
<i class="sidebar-fa fa fa-tags"></i>
<span class="text">Apps</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="streamsEnabled">
<a routerLink="runtime/apps">
<i class="sidebar-fa fa fa-terminal"></i>
<span class="text">Runtime</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="streamsEnabled">
<a routerLink="streams">
<i class="sidebar-fa fa fa-cloud"></i>
<span class="text">Streams</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="tasksEnabled">
<a routerLink="tasks">
<i class="sidebar-fa fa fa-tasks"></i>
<span class="text">Tasks</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="tasksEnabled">
<a routerLink="jobs">
<i class="sidebar-fa fa fa-clock-o"></i>
<span class="text">Jobs</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']">
<a routerLink="audit-records">
<i class="sidebar-fa fa fa-list-alt"></i>
<span class="text">Audit Records</span>
</a>
</div>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']" appFeature="tasksEnabled">
<a routerLink="jobs">
<i class="sidebar-fa fa fa-clock-o"></i>
<span class="text">Jobs</span>
</a>
</div>
<div class="sidebar-item" routerLinkActive="active" [dataflowAppRoles]="['ROLE_VIEW']">
<a routerLink="audit-records">
<i class="sidebar-fa fa fa-list-alt"></i>
<span class="text">Audit Records</span>
</a>

<div class="sidebar-items sidebar-items-bottom" [dataflowAppRoles]="['ROLE_VIEW']">
<div class="sidebar-item" routerLinkActive="active">
<a routerLink="about">
<i class="sidebar-fa fa fa-leaf"></i>
<span class="text">About & Docs</span>
</a>
</div>
<div class="sidebar-divider"></div>
<div class="sidebar-item sidebar-item-collapser" *ngIf="!isSm">
<a (click)="toggle()">
<i [class.fa-rotate-180]="!isCollapsed" class="sidebar-fa fa fa-chevron-left"></i>
</a>
</div>
</div>
</div>

<div class="sidebar-items sidebar-items-bottom" [dataflowAppRoles]="['ROLE_VIEW']">
<div class="sidebar-item" routerLinkActive="active">
<a routerLink="about">
<i class="sidebar-fa fa fa-leaf"></i>
<span class="text">About & Docs</span>
</a>
</div>
<div class="sidebar-divider"></div>
<div class="sidebar-item sidebar-item-collapser" *ngIf="!isSm">
<a (click)="toggle()">
<i [class.fa-rotate-180]="!isCollapsed" class="sidebar-fa fa fa-chevron-left"></i>
</a>
<div *ngIf="!featureInfoLoaded">
<div style="padding: 10px 15px;">
<app-loader *ngIf="!isSm && isCollapsed"></app-loader>
<app-loader *ngIf="isSm || !isCollapsed" [text]="''"></app-loader>
</div>
</div>
37 changes: 35 additions & 2 deletions ui/src/app/layout/navigation/navigation.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { Component, DoCheck, HostListener, OnInit, Renderer2 } from '@angular/core';
import { Component, DoCheck, HostListener, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { SecurityInfo } from '../../shared/model/about/security-info.model';
import { AuthService } from '../../auth/auth.service';
import { SharedAboutService } from 'src/app/shared/services/shared-about.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

/**
* Navigation component
Expand All @@ -12,13 +15,24 @@ import { AuthService } from '../../auth/auth.service';
selector: 'app-navigation',
templateUrl: './navigation.component.html',
})
export class NavigationComponent implements DoCheck, OnInit {
export class NavigationComponent implements DoCheck, OnInit, OnDestroy {

/**
* Unubscribe
*/
private ngUnsubscribe$: Subject<any> = new Subject();

/**
* Security Info
*/
securityInfo: SecurityInfo;

/**
* Is the feature information (required for role-based visibility of features)
* available?
*/
featureInfoLoaded = false;

/**
* Collapsed state
* @type {boolean}
Expand All @@ -35,20 +49,39 @@ export class NavigationComponent implements DoCheck, OnInit {
* Contructor
*
* @param {AuthService} authService
* @param {SharedAboutService} sharedAboutService
* @param {Renderer2} renderer
*/
constructor(private authService: AuthService,
private sharedAboutService: SharedAboutService,
private renderer: Renderer2) {
this.securityInfo = authService.securityInfo;
}

/**
* Will cleanup any {@link Subscription}s to prevent
* memory leaks.
*/
ngOnDestroy() {
this.ngUnsubscribe$.next();
this.ngUnsubscribe$.complete();
}

/**
* Init
*/
ngOnInit() {
if (this.isCollapsed) {
this.renderer.addClass(document.body, 'sidebar-fixed');
}

this.sharedAboutService.featureInfoSubject
.pipe(takeUntil(this.ngUnsubscribe$))
.subscribe(event => {
if (event) {
this.featureInfoLoaded = true;
}
});
}

/**
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/shared/services/shared-about.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export class SharedAboutService {

public aboutUrl = '/about';
public featureInfo;
public featureInfoSubject = new Subject<FeatureInfo>();
public featureInfoSubject = new BehaviorSubject<FeatureInfo>(undefined);

public aboutInfo: AboutInfo;
public aboutInfo$ = new BehaviorSubject<AboutInfo>(undefined);
Expand Down

0 comments on commit 4815377

Please sign in to comment.