diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 44db67ba0..f24fb808d 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -117,7 +117,7 @@
Unable to connect with the server
-
+
Successfully Established Connection with the Server
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 596fa7040..ff9b5570e 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,17 +1,14 @@ import {Component, HostListener, OnInit, Renderer2} from '@angular/core'; -import {NavigationEnd, Router} from '@angular/router'; +import {Router} from '@angular/router'; import {TranslateService} from '@ngx-translate/core'; -import {NgxSpinnerService} from 'ngx-spinner'; -import {UtmToastService} from './shared/alert/utm-toast.service'; -import {DashboardBehavior} from './shared/behaviors/dashboard.behavior'; +import {filter} from 'rxjs/operators'; +import {ApiServiceCheckerService} from './core/auth/api-checker-service'; import {MenuBehavior} from './shared/behaviors/menu.behavior'; import {ThemeChangeBehavior} from './shared/behaviors/theme-change.behavior'; import {ADMIN_ROLE, USER_ROLE} from './shared/constants/global.constant'; import {AppThemeLocationEnum} from './shared/enums/app-theme-location.enum'; import {UtmAppThemeService} from './shared/services/theme/utm-app-theme.service'; -import {retry} from "rxjs/operators"; -import {ApiServiceCheckerService} from "./core/auth/api-checker-service"; -import {TimezoneFormatService} from "./shared/services/utm-timezone.service"; +import {TimezoneFormatService} from './shared/services/utm-timezone.service'; @Component({ selector: 'app-root', @@ -23,23 +20,21 @@ export class AppComponent implements OnInit { roles = [ADMIN_ROLE, USER_ROLE]; menu = false; private height: string; - offline = false; - hideOnline = true; + offline = null; iframeView = false; favIcon: HTMLLinkElement; constructor( - private spinner: NgxSpinnerService, private translate: TranslateService, private menuBehavior: MenuBehavior, - private dashboardBehavior: DashboardBehavior, private themeChangeBehavior: ThemeChangeBehavior, private utmAppThemeService: UtmAppThemeService, - private utmToastService: UtmToastService, private router: Router, private renderer: Renderer2, private apiServiceCheckerService: ApiServiceCheckerService, private timezoneFormatService: TimezoneFormatService) { + this.translate.setDefaultLang('en'); + this.menuBehavior.$menu.subscribe(men => { this.menu = men; }); @@ -59,39 +54,27 @@ export class AppComponent implements OnInit { this.iframeView = true; } }); - this.apiServiceCheckerService.checkApiAvailability(); } ngOnInit(): void { this.favIcon = document.querySelector('#appFavicon'); - this.apiServiceCheckerService.isOnlineApi$.subscribe(result => { - if (result) { - this.offline = false; - this.timezoneFormatService.loadTimezoneAndFormat(); - this.getReportLogo(); - if (this.router.url === '/') { - this.hideOnline = false; - } - setTimeout(() => { - this.hideOnline = true; - }, 3000); - } else if (result != null && !result && !this.offline) { - this.offline = true; - } - }); - this.router.events.subscribe(evt => { - if (evt instanceof NavigationEnd && evt.url.endsWith('dashboard')) { - } - }); + this.init(); this.themeChangeBehavior.$themeChange.subscribe(value => { if (value) { this.getReportLogo(); } }); - /** - * Sync fields of index patterns every 5 min - */ + + this.apiServiceCheckerService.isOnlineApi$ + .pipe( + filter(isOnline => isOnline)) + .subscribe(isOnline => { + if (this.offline) { + this.init(); + } + setTimeout(() => this.offline = null, 3000); + }); } @HostListener('window', ['$event']) @@ -101,9 +84,9 @@ export class AppComponent implements OnInit { getReportLogo() { this.utmAppThemeService.getTheme({page: 0, size: 100}) - .pipe(retry(5)) .subscribe(response => { - for (const img of response.body) { + this.offline = false; + for (const img of response.body) { switch (img.shortName) { case AppThemeLocationEnum.LOGIN: this.favIcon.href = img.userImg; @@ -120,9 +103,11 @@ export class AppComponent implements OnInit { break; } } + this.apiServiceCheckerService.setOnlineStatus(true); }, error => { - this.offline = true; - }); + this.offline = true; + this.apiServiceCheckerService.checkApiAvailability(); + }); } isInExportRoute() { @@ -130,4 +115,9 @@ export class AppComponent implements OnInit { this.router.url.includes('/getting-started') || this.router.url.includes('/dashboard/export-report/') || this.iframeView || this.router.url.includes('/data/alert/detail/'); } + + init() { + this.timezoneFormatService.loadTimezoneAndFormat(); + this.getReportLogo(); + } } diff --git a/frontend/src/app/core/auth/api-checker-service.ts b/frontend/src/app/core/auth/api-checker-service.ts index fb20e0b2f..cef80a02f 100644 --- a/frontend/src/app/core/auth/api-checker-service.ts +++ b/frontend/src/app/core/auth/api-checker-service.ts @@ -1,8 +1,8 @@ import {HttpClient} from '@angular/common/http'; import {Injectable} from '@angular/core'; -import {BehaviorSubject, interval, Observable, of, Subject, throwError} from 'rxjs'; -import {catchError, delay, first, switchMap, takeUntil, takeWhile, tap} from 'rxjs/operators'; -import {SERVER_API_URL} from "../../app.constants"; +import {BehaviorSubject, interval, Observable, Subject} from 'rxjs'; +import {first, takeUntil} from 'rxjs/operators'; +import {SERVER_API_URL} from '../../app.constants'; @Injectable({ providedIn: 'root' @@ -38,17 +38,8 @@ export class ApiServiceCheckerService { ); }); } -} -/*return this.http.get(this.resourceUrl).pipe( - catchError(() => { - return of(false); - }), - switchMap((result: any) => { - if (result != null) { - return of(true); - } - }), - takeWhile((isAvailable: any) => isAvailable != null) -); -}*/ + setOnlineStatus(status: boolean) { + this.isOnline.next(status); + } +} diff --git a/frontend/src/app/shared/components/auth/login/login.component.ts b/frontend/src/app/shared/components/auth/login/login.component.ts index 2b2c80681..e043d36a3 100644 --- a/frontend/src/app/shared/components/auth/login/login.component.ts +++ b/frontend/src/app/shared/components/auth/login/login.component.ts @@ -4,7 +4,7 @@ import {DomSanitizer} from '@angular/platform-browser'; import {ActivatedRoute, Router} from '@angular/router'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {NgxSpinnerService} from 'ngx-spinner'; -import {Observable} from "rxjs"; +import {Observable} from 'rxjs'; import {AccountService} from '../../../../core/auth/account.service'; import {ApiServiceCheckerService} from '../../../../core/auth/api-checker-service'; import {LoginService} from '../../../../core/login/login.service'; @@ -20,7 +20,7 @@ import {PasswordResetInitComponent} from '../password-reset/init/password-reset- templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] }) -export class LoginComponent implements OnInit, AfterViewInit { +export class LoginComponent implements OnInit { authenticationError: boolean; password: string; rememberMe: boolean; @@ -53,15 +53,9 @@ export class LoginComponent implements OnInit, AfterViewInit { this.loginImage$ = this.themeChangeBehavior.$themeIcon.asObservable(); } - ngAfterViewInit() { - - } - ngOnInit() { - this.apiServiceCheckerService.isOnlineApi$.subscribe(result => { if (result) { - this.loadingAuth = false; this.activatedRoute.queryParams.subscribe(params => { if (params.token) { this.loginService.loginWithToken(params.token, true).then(() => { @@ -80,6 +74,7 @@ export class LoginComponent implements OnInit, AfterViewInit { } }); this.initForm(); + this.loadingAuth = false; } }); }