Skip to content

Commit

Permalink
refactor(ui): migrate application module to onPush strategy
Browse files Browse the repository at this point in the history
  • Loading branch information
@sguiheux
sguiheux committed Jul 19, 2019
1 parent fbd08d0 commit ecc44fc
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 44 deletions.
20 changes: 15 additions & 5 deletions ui/src/app/views/application/add/application.add.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Store } from '@ngxs/store';
Expand All @@ -17,7 +17,8 @@ import { finalize, first, flatMap } from 'rxjs/operators';
@Component({
selector: 'app-application-add',
templateUrl: './application.add.html',
styleUrls: ['./application.add.scss']
styleUrls: ['./application.add.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
@AutoUnsubscribe()
export class ApplicationAddComponent implements OnInit {
Expand Down Expand Up @@ -48,7 +49,8 @@ export class ApplicationAddComponent implements OnInit {
private _translate: TranslateService,
private _router: Router,
private _varService: VariableService,
private store: Store
private store: Store,
private _cd: ChangeDetectorRef
) {
this.dataSubscription = this._activatedRoute.data.subscribe(datas => {
this.project = datas['project'];
Expand All @@ -58,6 +60,7 @@ export class ApplicationAddComponent implements OnInit {
ngOnInit(): void {
this._varService.getContextVariable(this.project.key).pipe(first()).subscribe(s => {
this.suggestion = s;
this._cd.markForCheck();
});
}

Expand Down Expand Up @@ -90,6 +93,7 @@ export class ApplicationAddComponent implements OnInit {
}
});
}
this._cd.markForCheck();
});
}

Expand Down Expand Up @@ -120,7 +124,10 @@ export class ApplicationAddComponent implements OnInit {
projectKey: this.project.key,
newApplication,
clonedAppName: this.selectedApplication.name
})).pipe(finalize(() => this.loadingCreate = false))
})).pipe(finalize(() => {
this.loadingCreate = false;
this._cd.markForCheck();
}))
.subscribe(() => {
this._toast.success('', this._translate.instant('application_created'));
this._router.navigate(['/project', this.project.key, 'application', newApplication.name]);
Expand All @@ -129,7 +136,10 @@ export class ApplicationAddComponent implements OnInit {

default:
this.store.dispatch(new AddApplication({ projectKey: this.project.key, application: newApplication }))
.pipe(finalize(() => this.loadingCreate = false))
.pipe(finalize(() => {
this.loadingCreate = false;
this._cd.markForCheck();
}))
.subscribe(() => {
this._toast.success('', this._translate.instant('application_created'));
this._router.navigate(['/project', this.project.key, 'application', newApplication.name]);
Expand Down
18 changes: 13 additions & 5 deletions ui/src/app/views/application/show/admin/application.admin.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Store } from '@ngxs/store';
Expand All @@ -15,7 +15,8 @@ import { ToastService } from '../../../../shared/toast/ToastService';
@Component({
selector: 'app-application-admin',
templateUrl: './application.admin.html',
styleUrls: ['./application.admin.scss']
styleUrls: ['./application.admin.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ApplicationAdminComponent implements OnInit {

Expand All @@ -35,7 +36,8 @@ export class ApplicationAdminComponent implements OnInit {
public _translate: TranslateService,
private _router: Router,
private _authStore: AuthentificationStore,
private store: Store
private store: Store,
private _cd: ChangeDetectorRef
) {

}
Expand All @@ -61,7 +63,10 @@ export class ApplicationAdminComponent implements OnInit {
projectKey: this.project.key,
applicationName: this.application.name,
changes: app
})).pipe(finalize(() => this.loading = false))
})).pipe(finalize(() => {
this.loading = false;
this._cd.markForCheck();
}))
.subscribe(() => {
this._toast.success('', this._translate.instant('application_update_ok'));
if (nameUpdated) {
Expand All @@ -74,7 +79,10 @@ export class ApplicationAdminComponent implements OnInit {
deleteApplication(): void {
this.loading = true;
this.store.dispatch(new DeleteApplication({ projectKey: this.project.key, applicationName: this.application.name }))
.pipe(finalize(() => this.loading = false))
.pipe(finalize(() => {
this.loading = false;
this._cd.markForCheck();
}))
.subscribe(() => {
this._toast.success('', this._translate.instant('application_deleted'));
this._router.navigate(['/project', this.project.key], { queryParams: { 'tab': 'applications' } });
Expand Down
29 changes: 22 additions & 7 deletions ui/src/app/views/application/show/admin/deployment/application.deployment.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { Component, Input, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Store } from '@ngxs/store';
import { AddApplicationDeployment, DeleteApplicationDeployment, UpdateApplicationDeployment } from 'app/store/applications.action';
import {
AddApplicationDeployment,
DeleteApplicationDeployment,
UpdateApplicationDeployment
} from 'app/store/applications.action';
import { finalize } from 'rxjs/operators';
import { Application } from '../../../../../model/application.model';
import { ProjectIntegration } from '../../../../../model/integration.model';
Expand All @@ -12,7 +16,8 @@ import { ToastService } from '../../../../../shared/toast/ToastService';
@Component({
selector: 'app-application-deployment',
templateUrl: './application.deployment.html',
styleUrls: ['./application.deployment.scss']
styleUrls: ['./application.deployment.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ApplicationDeploymentComponent {

Expand Down Expand Up @@ -48,7 +53,8 @@ export class ApplicationDeploymentComponent {
constructor(
private _toast: ToastService,
public _translate: TranslateService,
private store: Store
private store: Store,
private _cd: ChangeDetectorRef
) {

}
Expand All @@ -59,7 +65,10 @@ export class ApplicationDeploymentComponent {
projectKey: this.project.key,
applicationName: this.application.name,
integrationName: pfName
})).pipe(finalize(() => this.loadingBtn = false))
})).pipe(finalize(() => {
this.loadingBtn = false;
this._cd.markForCheck();
}))
.subscribe(() => this._toast.success('', this._translate.instant('application_integration_deleted')));
}

Expand All @@ -70,7 +79,10 @@ export class ApplicationDeploymentComponent {
applicationName: this.application.name,
deploymentName: pfName,
config: this.application.deployment_strategies[pfName]
})).pipe(finalize(() => this.loadingBtn = false))
})).pipe(finalize(() => {
this.loadingBtn = false;
this._cd.markForCheck();
}))
.subscribe(() => this._toast.success('', this._translate.instant('application_integration_updated')));
}

Expand All @@ -81,7 +93,10 @@ export class ApplicationDeploymentComponent {
projectKey: this.project.key,
applicationName: this.application.name,
integration: this.selectedIntegration
})).pipe(finalize(() => this.loadingBtn = false))
})).pipe(finalize(() => {
this.loadingBtn = false;
this._cd.markForCheck();
}))
.subscribe(() => {
this.selectedIntegration = null;
this._toast.success('', this._translate.instant('application_integration_added'));
Expand Down
40 changes: 28 additions & 12 deletions ui/src/app/views/application/show/admin/repository/application.repo.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Store } from '@ngxs/store';
import { ConnectVcsRepoOnApplication, DeleteVcsRepoOnApplication, UpdateApplication } from 'app/store/applications.action';
import {
ConnectVcsRepoOnApplication,
DeleteVcsRepoOnApplication,
UpdateApplication
} from 'app/store/applications.action';
import { finalize, first } from 'rxjs/operators';
import { Application } from '../../../../../model/application.model';
import { Project } from '../../../../../model/project.model';
Expand All @@ -13,7 +17,8 @@ import { ToastService } from '../../../../../shared/toast/ToastService';
@Component({
selector: 'app-application-repo',
templateUrl: './application.repo.html',
styleUrls: ['./application.repo.scss']
styleUrls: ['./application.repo.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ApplicationRepositoryComponent implements OnInit {

Expand All @@ -37,7 +42,8 @@ export class ApplicationRepositoryComponent implements OnInit {
private _repoManagerService: RepoManagerService,
private _toast: ToastService,
public _translate: TranslateService,
private store: Store
private store: Store,
private _cd: ChangeDetectorRef
) {

}
Expand All @@ -59,7 +65,10 @@ export class ApplicationRepositoryComponent implements OnInit {
projectKey: this.project.key,
applicationName: this.application.name,
repoManager: this.application.vcs_server
})).pipe(finalize(() => this.loadingBtn = false))
})).pipe(finalize(() => {
this.loadingBtn = false;
this._cd.markForCheck();
}))
.subscribe(() => this._toast.success('', this._translate.instant('application_repo_detach_ok')));
}
}
Expand All @@ -80,14 +89,15 @@ export class ApplicationRepositoryComponent implements OnInit {
updateListRepo(sync: boolean): void {
if (this.selectedRepoManager) {
this.loadingRepos = true;
this._repoManagerService.getRepositories(this.project.key, this.selectedRepoManager, sync).pipe(first())
this._repoManagerService.getRepositories(this.project.key, this.selectedRepoManager, sync)
.pipe(first(), finalize(() => {
this.loadingRepos = false;
this._cd.markForCheck();
}))
.subscribe(repos => {
this.repos = repos;
this.reposFiltered = repos.slice(0, 50);
},
null,
() => this.loadingRepos = false
);
});
}
}

Expand All @@ -101,7 +111,10 @@ export class ApplicationRepositoryComponent implements OnInit {
applicationName: this.application.name,
repoManager: this.selectedRepoManager,
repoFullName: this.selectedRepo
})).pipe(finalize(() => this.loadingBtn = false))
})).pipe(finalize(() => {
this.loadingBtn = false;
this._cd.markForCheck();
}))
.subscribe(() => {
this.displayVCSStrategy = !this.application.vcs_strategy || !this.application.vcs_strategy.connection_type;
this._toast.success('', this._translate.instant('application_repo_attach_ok'));
Expand All @@ -115,7 +128,10 @@ export class ApplicationRepositoryComponent implements OnInit {
projectKey: this.project.key,
applicationName: this.application.name,
changes: this.application
})).pipe(finalize(() => this.loadingBtn = false))
})).pipe(finalize(() => {
this.loadingBtn = false;
this._cd.markForCheck();
}))
.subscribe(() => this._toast.success('', this._translate.instant('application_update_ok')));
}
}
22 changes: 15 additions & 7 deletions ui/src/app/views/application/show/application.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Store } from '@ngxs/store';
Expand Down Expand Up @@ -26,7 +26,8 @@ import { CDSWebWorker } from '../../../shared/worker/web.worker';
@Component({
selector: 'app-application-show',
templateUrl: './application.html',
styleUrls: ['./application.scss']
styleUrls: ['./application.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
@AutoUnsubscribe()
export class ApplicationShowComponent implements OnInit {
Expand All @@ -35,7 +36,6 @@ export class ApplicationShowComponent implements OnInit {
public readyApp = false;
public varFormLoading = false;
public permFormLoading = false;
public notifFormLoading = false;

// Project & Application data
project: Project;
Expand All @@ -44,7 +44,6 @@ export class ApplicationShowComponent implements OnInit {
// Subscription
applicationSubscription: Subscription;
projectSubscription: Subscription;
workerSubscription: Subscription;
_routeParamsSub: Subscription;
_routeDataSub: Subscription;
_queryParamsSub: Subscription;
Expand Down Expand Up @@ -76,7 +75,8 @@ export class ApplicationShowComponent implements OnInit {
private _authStore: AuthentificationStore,
private _toast: ToastService,
public _translate: TranslateService,
private store: Store
private store: Store,
private _cd: ChangeDetectorRef
) {
this.currentUser = this._authStore.getUser();
// Update data if route change
Expand Down Expand Up @@ -126,11 +126,13 @@ export class ApplicationShowComponent implements OnInit {

// Update recent application viewed
this._applicationStore.updateRecentApplication(key, this.application);
this._cd.markForCheck();

}, () => {
this._router.navigate(['/project', key], { queryParams: { tab: 'applications' } });
})
}
this._cd.markForCheck();
}
});
}
Expand All @@ -141,6 +143,7 @@ export class ApplicationShowComponent implements OnInit {
if (tab) {
this.selectedTab = tab;
}
this._cd.markForCheck();
});
}

Expand All @@ -167,6 +170,7 @@ export class ApplicationShowComponent implements OnInit {
})).pipe(finalize(() => {
event.variable.updating = false;
this.varFormLoading = false;
this._cd.markForCheck();
})).subscribe(() => this._toast.success('', this._translate.instant('variable_added')));
break;
case 'update':
Expand All @@ -175,15 +179,19 @@ export class ApplicationShowComponent implements OnInit {
applicationName: this.application.name,
variableName: event.variable.name,
variable: event.variable
})).pipe(finalize(() => event.variable.updating = false))
})).pipe(finalize(() => {
event.variable.updating = false;
this._cd.markForCheck();
}))
.subscribe(() => this._toast.success('', this._translate.instant('variable_updated')));
break;
case 'delete':
this.store.dispatch(new applicationsActions.DeleteApplicationVariable({
projectKey: this.project.key,
applicationName: this.application.name,
variable: event.variable
})).subscribe(() => this._toast.success('', this._translate.instant('variable_deleted')));
})).pipe(finalize(() => this._cd.markForCheck()))
.subscribe(() => this._toast.success('', this._translate.instant('variable_deleted')));
break;
}
}
Expand Down
Loading

0 comments on commit ecc44fc

Please sign in to comment.