diff options
Diffstat (limited to 'cds-ui/client')
10 files changed, 95 insertions, 31 deletions
diff --git a/cds-ui/client/src/app/app.component.html b/cds-ui/client/src/app/app.component.html index 88446ca84..945db342e 100644 --- a/cds-ui/client/src/app/app.component.html +++ b/cds-ui/client/src/app/app.component.html @@ -20,4 +20,10 @@ limitations under the License. --> +<mat-progress-bar mode="indeterminate" *ngIf="loaderStatus === true"></mat-progress-bar> +<div [ngClass]="{'overlay': loaderStatus === true}"> <router-outlet></router-outlet> +<div class="notification-container"> + <app-notification></app-notification> +</div> +</div> diff --git a/cds-ui/client/src/app/app.component.scss b/cds-ui/client/src/app/app.component.scss index bf7a36c2e..8dc7dd0af 100644 --- a/cds-ui/client/src/app/app.component.scss +++ b/cds-ui/client/src/app/app.component.scss @@ -32,4 +32,17 @@ limitations under the License. height: 200px; overflow: auto; border: 1px solid #555; + } + + .overlay { + opacity: 0.5; + pointer-events: none; + } + + .notification-container{ + position: fixed; + top: 1em; + z-index: 1; + right: 1em; + overflow: auto; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/app.component.ts b/cds-ui/client/src/app/app.component.ts index 106417958..d6499cc35 100644 --- a/cds-ui/client/src/app/app.component.ts +++ b/cds-ui/client/src/app/app.component.ts @@ -23,13 +23,22 @@ import { Router } from '@angular/router'; import { Observable} from 'rxjs'; import { Store } from '@ngrx/store'; +import { LoaderService } from './common/core/services/loader.service'; + @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { + loaderStatus: boolean = false; + constructor(private router: Router, + private loaderService: LoaderService + ) { - constructor(private router: Router) { + this.loaderService.subject.subscribe(data=>{ + console.log(data); + this.loaderStatus = data; + }) } } diff --git a/cds-ui/client/src/app/common/core/core.module.ts b/cds-ui/client/src/app/common/core/core.module.ts index 807065ebc..7207178a9 100644 --- a/cds-ui/client/src/app/common/core/core.module.ts +++ b/cds-ui/client/src/app/common/core/core.module.ts @@ -30,6 +30,8 @@ import { appReducers } from './store/reducers/app.reducer'; import { BlueprintEffects } from './store/effects/blueprint.effects'; import { ResourcesEffects } from './store/effects/resources.effects'; import { ApiService } from './services/api.service'; +import { NotificationHandlerService } from './services/notification-handler.service'; +import { LoaderService } from './services/loader.service'; // import { BlueprintService } from './services/blueprint.service'; @NgModule({ @@ -38,10 +40,13 @@ import { ApiService } from './services/api.service'; imports: [ CommonModule, StoreModule.forRoot(appReducers), - EffectsModule.forRoot([BlueprintEffects,ResourcesEffects]), - StoreRouterConnectingModule.forRoot({stateKey: 'router'}), + EffectsModule.forRoot([BlueprintEffects, ResourcesEffects]), + StoreRouterConnectingModule.forRoot({ stateKey: 'router' }), HttpClientModule ], - providers : [ ApiService ] + providers: [ApiService, + NotificationHandlerService, + LoaderService + ] }) export class CoreModule { } diff --git a/cds-ui/client/src/app/common/core/services/notification-handler.service.ts b/cds-ui/client/src/app/common/core/services/notification-handler.service.ts index 296b71e53..b64f2fa0f 100644 --- a/cds-ui/client/src/app/common/core/services/notification-handler.service.ts +++ b/cds-ui/client/src/app/common/core/services/notification-handler.service.ts @@ -23,22 +23,22 @@ limitations under the License. import { Injectable } from '@angular/core'; -// import { NotificationService } from '../../shared/components/notification/notification.service'; +import { NotificationService } from '../../shared/components/notification/notification.service'; @Injectable() export class NotificationHandlerService { constructor( - // private alert: NotificationService + private alert: NotificationService ) { } success(message: string) { - // this.alert.success(message); + this.alert.success(message); } error(message: string) { - // this.alert.error(message); + this.alert.error(message); } info(message: string) { diff --git a/cds-ui/client/src/app/common/shared/shared.module.ts b/cds-ui/client/src/app/common/shared/shared.module.ts index b036f5967..39e4e433f 100644 --- a/cds-ui/client/src/app/common/shared/shared.module.ts +++ b/cds-ui/client/src/app/common/shared/shared.module.ts @@ -30,6 +30,8 @@ import { SearchPipe } from './pipes/search.pipe'; import { SearchDialog } from './components/search-dialog/search-dialog.component'; import { AppMaterialModule } from '../modules/app-material.module'; import { SortPipe } from './pipes/sort.pipe'; +import { NotificationComponent } from './components/notification/notification.component'; +import { NotificationService } from './components/notification/notification.service'; @NgModule({ declarations: [ @@ -37,14 +39,16 @@ import { SortPipe } from './pipes/sort.pipe'; CBAWizardComponent, SearchPipe, SearchDialog, - SortPipe + SortPipe, + NotificationComponent ], exports: [ HomeComponent, CBAWizardComponent, SearchPipe, SearchDialog, - SortPipe + SortPipe, + NotificationComponent ], imports: [ AppMaterialModule, @@ -68,6 +72,7 @@ import { SortPipe } from './pipes/sort.pipe'; MatStepperModule, RouterModule ], + providers: [NotificationService], entryComponents: [SearchDialog] }) export class SharedModule { }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts index b982fa29f..0a3a8d2ef 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts @@ -39,6 +39,9 @@ import { ApiService } from 'src/app/common/core/services/api.service'; import { IMetaData } from 'src/app/common/core/store/models/metadata.model'; import { EditorService } from './editor.service'; import { SortPipe } from '../../../../common/shared/pipes/sort.pipe'; +import { NotificationHandlerService } from 'src/app/common/core/services/notification-handler.service'; +import { LoaderService } from 'src/app/common/core/services/loader.service'; + interface Node { name: string; @@ -107,6 +110,7 @@ export class EditorComponent implements OnInit { private tocsaMetadaData: any; metadata: IMetaData; uploadedFileName: string; + entryDefinition: string; private transformer = (node: Node, level: number) => { return { @@ -126,7 +130,10 @@ export class EditorComponent implements OnInit { artifactName: any; artifactVersion: any; - constructor(private store: Store<IAppState>, private apiservice: EditorService) { + constructor(private store: Store<IAppState>, private apiservice: EditorService, + private alertService: NotificationHandlerService, private loader: LoaderService + ) + { this.dataSource.data = TREE_DATA; this.bpState = this.store.select('blueprint'); // this.dataSource.data = TREE_DATA; @@ -162,6 +169,7 @@ export class EditorComponent implements OnInit { this.dataSource.data = this.filesTree; this.blueprintName = blueprintdata.name; this.uploadedFileName = blueprintdata.uploadedFileName; + this.entryDefinition = blueprintdata.entryDefinition; let blueprint = []; for (let key in this.blueprintdata) { if (this.blueprintdata.hasOwnProperty(key)) { @@ -206,10 +214,10 @@ export class EditorComponent implements OnInit { name: this.blueprintName, files: this.filesTree, filesData: this.filesData, - uploadedFileName: this.uploadedFileName + uploadedFileName: this.uploadedFileName, + entryDefinition: this.entryDefinition } this.store.dispatch(new SetBlueprintState(blueprintState)); - // console.log(this.text); } selectFileToView(file) { @@ -227,7 +235,6 @@ export class EditorComponent implements OnInit { } }) this.fileExtension = this.selectedFile.substr(this.selectedFile.lastIndexOf('.') + 1); - // console.log(this.fileExtension); this.setEditorMode(); } @@ -248,7 +255,10 @@ export class EditorComponent implements OnInit { console.log("processed"); } }); - window.alert('Blueprint enriched successfully'); + this.alertService.success('Blueprint enriched successfully'); + }, + (error)=>{ + this.alertService.error('Enrich:' + error.message); }); }); } @@ -264,8 +274,9 @@ export class EditorComponent implements OnInit { this.apiservice.post("/create-blueprint/", formData) .subscribe( data => { - // console.log(data); - window.alert('Success:' + JSON.stringify(data)); + this.alertService.success('Success:' + JSON.stringify(data)); + }, error=>{ + this.alertService.error('Save -' +error.message); }); }); @@ -280,8 +291,9 @@ export class EditorComponent implements OnInit { formData.append("file", blob); this.apiservice.deployPost("/deploy-blueprint/", formData) .subscribe(data => { - // console.log(data); - window.alert('Saved Successfully:' + JSON.stringify(data)); + this.alertService.success('Saved Successfully:' + JSON.stringify(data)); + }, error=>{ + this.alertService.error('Deploy - ' + error.message); }); }); @@ -295,8 +307,9 @@ export class EditorComponent implements OnInit { formData.append("file", blob); this.apiservice.post("/publish/", formData) .subscribe(data => { - // console.log(data); - window.alert('Published:' + JSON.stringify(data)); + this.alertService.success('Published:' + JSON.stringify(data)) + }, error=>{ + this.alertService.error('Publish - ' + error.message); }); }); @@ -580,6 +593,7 @@ export class EditorComponent implements OnInit { } saveEditedChanges() { + this.loader.showLoader(); this.filesData.forEach(fileNode => { if (this.selectedFile && fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) { fileNode.data = this.text; @@ -596,5 +610,6 @@ export class EditorComponent implements OnInit { } this.updateBlueprint(); + this.loader.hideLoader(); } } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts index 609aacae7..cefe0fd93 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts @@ -29,6 +29,7 @@ import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; import { IMetaData } from '../../../../common/core/store/models/metadata.model'; import { SetBlueprintState } from 'src/app/common/core/store/actions/blueprint.action'; +import { LoaderService } from '../../../../common/core/services/loader.service'; @Component({ selector: 'app-metadata', @@ -48,7 +49,7 @@ export class MetadataComponent implements OnInit { uploadedFileName: string; entryDefinition: string; - constructor(private formBuilder: FormBuilder, private store: Store<IAppState>) { + constructor(private formBuilder: FormBuilder, private store: Store<IAppState>, private loader: LoaderService) { this.bpState = this.store.select('blueprint'); this.CBAMetadataForm = this.formBuilder.group({ template_author: ['', Validators.required], @@ -96,9 +97,16 @@ export class MetadataComponent implements OnInit { } UploadMetadata() { + this.loader.showLoader(); this.metadata = Object.assign({}, this.CBAMetadataForm.value); this.blueprint.metadata = this.metadata; - + if( this.blueprint && + this.blueprint['topology_template'] && + this.blueprint['topology_template'].workflows && + this.blueprint['topology_template'].workflows['resource-assignment'] && + this.blueprint['topology_template'].workflows['resource-assignment'].name) { + delete this.blueprint['topology_template'].workflows['resource-assignment'].name; + } this.filesData.forEach((fileNode) => { if (fileNode.name.includes(this.blueprintName) && fileNode.name == this.entryDefinition) { fileNode.data = JSON.stringify(this.blueprint, null, "\t"); @@ -113,6 +121,6 @@ export class MetadataComponent implements OnInit { entryDefinition: this.entryDefinition } this.store.dispatch(new SetBlueprintState(blueprintState)); + this.loader.hideLoader(); } - }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts index 92003c919..1221e8f2b 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts @@ -30,6 +30,7 @@ import { IAppState } from '../../../../common/core/store/state/app.state'; import { LoadBlueprintSuccess, SET_BLUEPRINT_STATE, SetBlueprintState } from '../../../../common/core/store/actions/blueprint.action'; import { json } from 'd3'; import { SortPipe } from '../../../../common/shared/pipes/sort.pipe'; +import { LoaderService } from '../../../../common/core/services/loader.service'; @Component({ selector: 'app-search-template', @@ -56,7 +57,7 @@ export class SearchTemplateComponent implements OnInit { private blueprintName: string; private entryDefinition: string; - constructor(private store: Store<IAppState>) { } + constructor(private store: Store<IAppState>, private loader: LoaderService) { } ngOnInit() { } @@ -68,7 +69,8 @@ export class SearchTemplateComponent implements OnInit { this.zipFile.files = {}; this.zipFile.loadAsync(this.file) .then((zip) => { - if(zip) { + if(zip) { + this.loader.showLoader(); this.buildFileViewData(zip); } }); @@ -157,8 +159,8 @@ export class SearchTemplateComponent implements OnInit { } } }); - }); - console.log('tree', tree); + }); + this.loader.hideLoader(); return tree; } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts index 4603c529f..2da1287ba 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts @@ -30,6 +30,7 @@ import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor'; import { Observable } from 'rxjs'; import { A11yModule } from '@angular/cdk/a11y'; import { ResourceEditService } from './resource-edit.service'; +import { NotificationHandlerService } from 'src/app/common/core/services/notification-handler.service'; @Component({ selector: 'app-resource-edit', @@ -47,7 +48,7 @@ export class ResourceEditComponent implements OnInit { @ViewChild(JsonEditorComponent) editor: JsonEditorComponent; options = new JsonEditorOptions(); - constructor(private store: Store<IAppState>, private resourceEditService: ResourceEditService) { + constructor(private store: Store<IAppState>, private resourceEditService: ResourceEditService, private alertService: NotificationHandlerService) { this.rdState = this.store.select('resources'); this.options.mode = 'text'; this.options.modes = [ 'text', 'tree', 'view']; @@ -100,10 +101,10 @@ export class ResourceEditComponent implements OnInit { saveToBackend() { this.resourceEditService.saveResource(this.data) .subscribe(response=>{ - window.alert("save success"); + this.alertService.success("save success") }, error=>{ - window.alert('Error saving resources'); + this.alertService.error('Error saving resources'); }) } } |