diff options
23 files changed, 325 insertions, 96 deletions
diff --git a/cds-ui/client/src/app/common/core/store/models/propertyData.model.ts b/cds-ui/client/src/app/common/core/store/models/propertyData.model.ts index 94cff8991..96e9fda7e 100644 --- a/cds-ui/client/src/app/common/core/store/models/propertyData.model.ts +++ b/cds-ui/client/src/app/common/core/store/models/propertyData.model.ts @@ -20,8 +20,8 @@ import {IEntrySchema} from './entrySchema.model'; export interface IPropertyData{ - discription:string; - _type:string; + description:string; + type:string; required:boolean; entry_schema:IEntrySchema; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html index 1ce5bf5b7..6113e6d75 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html @@ -23,9 +23,9 @@ limitations under the License. <!-- <div style="width:inherit; height: inherit; position: fixed;z-index: 1; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);"></div> --> <div style="display: flex;"> <div> - <i class="fa fa-folder" aria-hidden="true" style="color:#3f51b5; font-size: 20px;margin: 3px; cursor: pointer;" [ngClass] ="{'fa-disabled': selectedFileObj.type == 'file' || selectedFileObj.type == ''}" (click)="enableNameInputEl('createFolder')"></i> - <i class="fa fa-file" aria-hidden="true" style="color:#3f51b5; font-size: 18px; margin: 3px; cursor: pointer;" [ngClass] ="{'fa-disabled' : selectedFileObj.type == 'file' ||selectedFileObj.type == ''}" (click)="enableNameInputEl('createFile')"></i> - <i class="fa fa-trash" aria-hidden="true" style="color:#3f51b5; font-size: 20px; margin: 3px; cursor: pointer;" [ngClass] ="{'fa-disabled' : selectedFileObj.type == ''}" (click)="deleteFolderOrFile('deleteFile')"></i> + <i class="fa fa-folder delete-add-file" aria-hidden="true" [ngClass] ="{'fa-disabled': selectedFileObj.type == 'file' || selectedFileObj.type == ''}" (click)="enableNameInputEl('createFolder')"></i> + <i class="fa fa-file add-file" aria-hidden="true" [ngClass] ="{'fa-disabled' : selectedFileObj.type == 'file' ||selectedFileObj.type == ''}" (click)="enableNameInputEl('createFile')"></i> + <i class="fa fa-trash delete-add-file" aria-hidden="true" [ngClass] ="{'fa-disabled' : selectedFileObj.type == ''}" (click)="deleteFolderOrFile('deleteFile')"></i> </div> <div> <input *ngIf="isNameTextboxEnablled" type="text" (focusout)="createFolderOrFile($event)"/> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss index fac43eb43..8375fff87 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss @@ -72,4 +72,18 @@ limitations under the License. .mat-tree-node { min-height: 40px !important; + } + + .delete-add-file { + color:#3f51b5; + font-size: 20px; + margin: 3px; + cursor: pointer; + } + + .add-file { + color:#3f51b5; + font-size: 18px; + margin: 3px; + cursor: pointer; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.html index 491066310..4a738b79c 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.html @@ -19,4 +19,4 @@ */--> -<app-search-resource></app-search-resource>
\ No newline at end of file +<app-search-resource (resourcesData)="selectedResource($event)"></app-search-resource>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts index f780ef851..9fdc38886 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts @@ -19,6 +19,10 @@ */ import { Component, OnInit } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { IResources } from 'src/app/common/core/store/models/resources.model'; +import { IAppState } from 'src/app/common/core/store/state/app.state'; +import { LoadResourcesSuccess } from 'src/app/common/core/store/actions/resources.action'; @Component({ selector: 'app-existing-model', @@ -27,9 +31,27 @@ import { Component, OnInit } from '@angular/core'; }) export class ExistingModelComponent implements OnInit { - constructor() { } + resourceName:string; + + constructor(private store: Store<IAppState>) { } ngOnInit() { - } + } + + selectedResource(value){ + console.log(value); + this.resourceName=value; + } + + getDataUsingResouceName(){ + + } + + updateResourcesState() { + var me = this; + var data:IResources; + me.store.dispatch(new LoadResourcesSuccess(data)); + } + } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html index ab696286b..236196b9b 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html @@ -23,7 +23,7 @@ <input type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input"> <button matSuffix mat-icon-button><mat-icon>search</mat-icon></button> <mat-autocomplete #auto="matAutocomplete"> - <mat-option *ngFor="let option of options | search : searchText" [value]="option"> + <mat-option (click)="selected(option)" *ngFor="let option of options | search : searchText" [value]="option"> {{option}} </mat-option> </mat-autocomplete> diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts index 16129b74a..7f2745e63 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'app-search-resource', @@ -27,17 +27,18 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; }) export class SearchResourceComponent implements OnInit { - myControl: FormGroup; - + myControl: FormGroup; + @Output() resourcesData = new EventEmitter(); + options: string[] = ['One','One1', 'Two', 'Three']; constructor(private _formBuilder: FormBuilder) { } - options: string[] = ['One','One1', 'Two', 'Three']; - - ngOnInit() { + ngOnInit() { this.myControl = this._formBuilder.group({ search_input: ['', Validators.required] }); } - + selected(value){ + this.resourcesData.emit(value); + } } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html index 8ace910b1..c4fa67a62 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html @@ -36,10 +36,13 @@ <ng-template matStepLabel>Browse or Search Resources</ng-template> <app-upload-resource (fileData)=upload($event)></app-upload-resource><br><br> <app-existing-model></app-existing-model> - <div> - <button mat-button matStepperNext (click)="updateResourcesState()" class="matStepNextBtn">Upload</button> + <div> + <button mat-button matStepperNext (click)="updateResourcesState()" class="matStepNextBtn">Upload</button> + </div><br><br> + <div *ngIf="showMsg"> + <p class="success"><strong>File Upload Success!</strong> Please click Proceed to continue!</p> </div> - </mat-step> + </mat-step> </mat-vertical-stepper> </mat-card-content> </mat-card>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss index b3b7fe7d5..51df0969b 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss @@ -43,4 +43,7 @@ word-wrap: break-word; min-height:350px; height: auto; +} +.success{ +color:green; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts index c751e0ee8..549fbb7ea 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts @@ -34,6 +34,8 @@ export class ResourceCreationComponent implements OnInit { myFile: any; selectedValue: any; + showMsg:boolean=false; + constructor(private store: Store<IAppState>) { } @@ -53,6 +55,7 @@ export class ResourceCreationComponent implements OnInit { me.store.dispatch(new LoadResourcesSuccess(data)); console.log(data); } + this.showMsg= true; } selectedOption(value){ diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html index 7df509221..de81e2394 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html @@ -19,27 +19,36 @@ */--> -<mat-card class="metadata-card"> +<button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button> +<br><br> +<div *ngIf="designerMode"> + <mat-card class="metadata-card"> <mat-card-header> <mat-card-title>Resource Metadata</mat-card-title> </mat-card-header> <mat-card-content> - <app-resource-metadata></app-resource-metadata> + <app-resource-metadata (resourcesData)="metaDataDetail($event)"></app-resource-metadata> </mat-card-content> -</mat-card> + </mat-card> -<mat-card class="sources-card"> - <mat-card-header> + <mat-card class="sources-card"> + <mat-card-header> <mat-card-title> Sources </mat-card-title> - </mat-card-header> - <mat-card-content> - <app-sources-template></app-sources-template> - </mat-card-content> -</mat-card> + </mat-card-header> + <mat-card-content> + <app-sources-template (resourcesData)="sourcesDetails($event)"></app-sources-template> + </mat-card-content> + </mat-card> +</div> -<mat-card class="submit"> - <button mat-raised-button>Save</button> -</mat-card> -<!-- <router-outlet></router-outlet> -->
\ No newline at end of file +<div *ngIf="editorMode"> + <json-editor class="jsoneditor" *ngIf="editorMode" [options]="options" [data]="resources" on-change="onChange($event)"></json-editor> +</div> + +<div class="btn"> + <button mat-button matStepperPrevious>Back</button></div> +<div class="btn"> + <button mat-button matStepperNext type="submit" (click)="updateResourcesState()">Upload</button> +</div> diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss index 7c60cf3e6..280645e3d 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss @@ -25,6 +25,7 @@ margin: 20px 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; height: auto; + min-height:340px; } .sources-card { width: 100%; @@ -33,13 +34,14 @@ margin: 20px 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; height: auto; + min-height:300px; } -.mat-raised-button{ - border: 1px solid grey; - background-color: #3f51b5; - padding: 1px; - color: white; - border-radius: 1em; +.mat-button{ + color:white; + background:#3f51b5; + margin-top: 10px; + position: absolute; + border-radius: 1em; } .mat-card-title{ padding-top: 7px; @@ -53,3 +55,18 @@ padding: 8px 8px; word-wrap: break-word; } +.btn{ + width: 50px; + max-width: 100%; + margin: 0 25px 25px 0; + display: inline-block; + vertical-align: top; +} +.toggle-view-btn{ + color:white; + background:#3f51b5; + border-radius: 1em; + margin-top: 10px; + padding:0.6em; + border: 1px solid #3f51b5; +} 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 5b567034a..55b80628d 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 @@ -18,7 +18,15 @@ * ============LICENSE_END========================================================= */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IResources } from 'src/app/common/core/store/models/resources.model'; +import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model'; +import { LoadResourcesSuccess,UpdateResources,SetResourcesState } from 'src/app/common/core/store/actions/resources.action'; +import { Store } from '@ngrx/store'; +import { IAppState } from '../../../common/core/store/state/app.state'; +import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor'; +import { Observable } from 'rxjs'; +import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-resource-edit', @@ -27,9 +35,62 @@ import { Component, OnInit } from '@angular/core'; }) export class ResourceEditComponent implements OnInit { - constructor() { } + resources:IResources; + data:IResources; + rdState: Observable<IResourcesState>; + designerMode: boolean = true; + editorMode: boolean = false; + viewText: string = "Open in Editor Mode"; + @ViewChild(JsonEditorComponent) editor: JsonEditorComponent; + options = new JsonEditorOptions(); + + constructor(private store: Store<IAppState>) { + this.rdState = this.store.select('resources'); + this.options.mode = 'text'; + this.options.modes = [ 'text', 'tree', 'view']; + this.options.statusBar = false; + } ngOnInit() { + this.rdState.subscribe( + resourcesdata => { + var resourcesState: IResourcesState = { resources: resourcesdata.resources, isLoadSuccess: resourcesdata.isLoadSuccess, isSaveSuccess: resourcesdata.isSaveSuccess, isUpdateSuccess: resourcesdata.isUpdateSuccess }; + this.resources=resourcesState.resources; + }) } + metaDataDetail(data: IResources) { + this.data=data; + } + + sourcesDetails(data: IResources) { + this.data=data; + } + + onChange($event) { + this.data=JSON.parse($event.srcElement.value); + }; + + updateResourcesState(){ + console.log(this.data); + let resourcesState = { + resources: this.data, + isLoadSuccess: true, + isUpdateSuccess:true, + isSaveSuccess:true + } + this.store.dispatch(new SetResourcesState(resourcesState)); + } + + changeView() { + if(this.viewText == 'Open in Editor Mode') { + this.editorMode = true; + this.designerMode = false; + this.viewText = 'Open in Form Mode' + } else { + this.editorMode = false; + this.designerMode = true; + this.viewText = 'Open in Editor Mode' + } + } } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html index 0bbc0b7c1..3b35a9929 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */--> -<form [formGroup]="ResourceMetadata"> +<form [formGroup]="ResourceMetadata" (ngSubmit)="UploadMetadata()"> <mat-form-field class="form-field"> <input matInput placeholder="Name" formControlName="Resource_Name"> </mat-form-field><mat-form-field class="form-field"> @@ -42,4 +42,8 @@ <mat-form-field class="form-field" > <textarea matInput placeholder="Description" formControlName="_description"></textarea> </mat-form-field> + <br> + <div> + <button mat-button class="matStepNextBtn" type="submit">Save Metadata</button> + </div> </form>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss index d10ad488f..aa8ca61b5 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss @@ -19,6 +19,13 @@ */
+.matStepNextBtn{
+ color:white;
+ background:#3f51b5;
+ margin-top: 10px;
+ position: absolute;
+ border-radius: 1em;
+}
.meta-form {
width: 100%;
}
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts index 536be26cd..29244f0fb 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, EventEmitter, Output } from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import { IResources } from 'src/app/common/core/store/models/resources.model'; import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model'; @@ -45,7 +45,8 @@ export class ResourceMetadataComponent implements OnInit { resources: IResources; propertyValues = []; property = []; - + @Output() resourcesData = new EventEmitter(); + constructor(private formBuilder: FormBuilder, private store: Store<IAppState>) { this.rdState = this.store.select('resources'); this.ResourceMetadata = this.formBuilder.group({ @@ -68,16 +69,27 @@ export class ResourceMetadataComponent implements OnInit { this.properties= resourcesState.resources.property; this.propertyValues= this.checkNested(this.properties); this.ResourceMetadata = this.formBuilder.group({ - Resource_Name: [this.resource_name, Validators.required], - _tags: [this.tags, Validators.required], - _description : [ this.propertyValues[0], Validators.required], - _type: [ this.propertyValues[1], Validators.required], - required: [ this.propertyValues[2], Validators.required], - entry_schema: [this.propertyValues[3]] + Resource_Name: [this.resource_name, Validators.required], + _tags: [this.tags, Validators.required], + _description : [ this.propertyValues[0], Validators.required], + _type: [ this.propertyValues[1], Validators.required], + required: [ JSON.stringify(this.propertyValues[2]), Validators.required], + entry_schema: [this.propertyValues[3]] }); }) } - + + UploadMetadata() { + + this.resources.name = this.ResourceMetadata.value.Resource_Name; + this.resources.tags = this.ResourceMetadata.value._tags; + this.resources.property.description = this.ResourceMetadata.value._description; + this.resources.property.type = this.ResourceMetadata.value._type; + this.resources.property.required = this.ResourceMetadata.value.required; + this.resources.property.entry_schema = this.ResourceMetadata.value.entry_schema; + this.resourcesData.emit(this.resources); + } + checkNested(obj) { for (let key in obj) { if (obj.hasOwnProperty(key)) { diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html index 903c6d319..91a22b8b4 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html @@ -24,15 +24,16 @@ [cdkDropListData]="sourcesOptions" class="sources-list" (cdkDropListDropped)="drop($event)"> - <div class="sources-box" *ngFor="let item of sourcesOptions" cdkDrag> + <div class="sources-box" *ngFor="let item of sourcesOptions;let i = index" cdkDrag> <mat-expansion-panel class="expansion-panel"> <mat-expansion-panel-header> <mat-panel-title> {{item}} </mat-panel-title> </mat-expansion-panel-header> - <json-editor [options]="options" [data]="selected(item)" on-change="onChange()"></json-editor> + <json-editor [options]="options" [data]="selected(item)" on-change="onChange(item,$event)"></json-editor> </mat-expansion-panel> + <button matSuffix mat-icon-button (click)="delete(item,i)"><mat-icon class="icon">delete</mat-icon></button> </div> </div> </div> @@ -52,5 +53,8 @@ (cdkDropListDropped)="drop($event)"> <div class="options-box" *ngFor="let item of option | search :searchText" cdkDrag>{{item}}</div> </div> - </div> + </div> + <div> + <button mat-button class="matStepNextBtn" (click)="UploadSourcesData()">Save Sources Data</button> + </div> </div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss index a76b60aa8..5bec796e8 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss @@ -110,4 +110,14 @@ overflow: hidden;
display: block;
width: 100%;
- }
\ No newline at end of file + }
+ .matStepNextBtn{
+ color:white;
+ background:#3f51b5;
+ margin-top: 10px;
+ position: absolute;
+ border-radius: 1em;
+}
+.icon{
+color: red;
+}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts index c43d1debd..517add87b 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core'; import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { IResources } from 'src/app/common/core/store/models/resources.model'; import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model'; @@ -36,52 +36,68 @@ import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor'; styleUrls: ['./sources-template.component.scss'] }) export class SourcesTemplateComponent implements OnInit { -// rdState: Observable<IResourcesState>; -// resources: IResources; -// todo = []; -// sources:ISourcesData; -// sourcesOptions = []; @ViewChild(JsonEditorComponent) editor: JsonEditorComponent; - options = new JsonEditorOptions(); - + options = new JsonEditorOptions(); rdState: Observable<IResourcesState>; resources: IResources; option = ['mdsal','default']; sources:ISourcesData; sourcesOptions = []; sourcesData = []; - + @Output() resourcesData = new EventEmitter(); + constructor(private store: Store<IAppState>) { - this.rdState = this.store.select('resources'); - this.options.mode = 'text'; + this.rdState = this.store.select('resources'); + this.options.mode = 'text'; this.options.modes = [ 'text', 'tree', 'view']; - this.options.statusBar = false; - this.options.onChange = () => console.log(this.editor.get()); - + this.options.statusBar = false; } ngOnInit() { this.rdState.subscribe( resourcesdata => { var resourcesState: IResourcesState = { resources: resourcesdata.resources, isLoadSuccess: resourcesdata.isLoadSuccess, isSaveSuccess: resourcesdata.isSaveSuccess, isUpdateSuccess: resourcesdata.isUpdateSuccess }; + this.resources=resourcesState.resources; this.sources = resourcesState.resources.sources; for (let key in this.sources) { this.sourcesOptions.push(key); } - //console.log(this.sourcesOptions); }) } - onChange() { - console.log(this.editor.get()) + onChange(item,$event) { + var editedData =JSON.parse($event.srcElement.value); + var originalSources = this.resources.sources; + for (let key in originalSources){ + if(key == item){ + originalSources[key] = editedData; + } + } + this.resources.sources = Object.assign({},originalSources); }; selected(value){ - console.log(value); - this.sourcesData=this.sources[value]; - return this.sourcesData; + this.sourcesData=this.sources[value]; + return this.sourcesData; } + + delete(item,i){ + if(confirm("Are sure you want to delete this source ?")) { + var originalSources = this.resources.sources; + for (let key in originalSources){ + if(key == item){ + delete originalSources[key]; + } + } + this.resources.sources = Object.assign({},originalSources); + this.sourcesOptions.splice(i,1); + } + } + + UploadSourcesData() { + this.resourcesData.emit(this.resources); + } drop(event: CdkDragDrop<string[]>) { if (event.previousContainer === event.container) { diff --git a/cds-ui/client/src/styles.scss b/cds-ui/client/src/styles.scss index 54eb74689..c75748a73 100644 --- a/cds-ui/client/src/styles.scss +++ b/cds-ui/client/src/styles.scss @@ -45,4 +45,28 @@ limitations under the License. min-width: 6em; border: none; cursor: initial; -}
\ No newline at end of file +} +div.jsoneditor-outer { + position: static; + width: 100%; + height: 400px; + margin: 0; + padding: 0; + box-sizing: border-box; + color:white; +} +div.jsoneditor-outer.has-main-menu-bar{ +background-color:#3f51b5; + +} +div.jsoneditor-tree div.jsoneditor-tree-inner{ + padding-bottom: 300px; + background-color: white; +} +div.jsoneditor-treepath { + padding: 0 5px; + overflow: hidden; + white-space: nowrap; + outline: 0; + color:white; + }
\ No newline at end of file diff --git a/cds-ui/server/tsconfig.json b/cds-ui/server/tsconfig.json index eb96bb53c..e042793b2 100644 --- a/cds-ui/server/tsconfig.json +++ b/cds-ui/server/tsconfig.json @@ -10,5 +10,8 @@ "node_modules/**", "packages/*/node_modules/**", "**/*.d.ts" - ] + ], + "compilerOptions": { + "experimentalDecorators": true + } } diff --git a/components/model-catalog/blueprint-model/test-blueprint/capability_restconf/Scripts/python/RestconfConfigDeploy.py b/components/model-catalog/blueprint-model/test-blueprint/capability_restconf/Scripts/python/RestconfConfigDeploy.py index 78a38a225..d65aefabb 100644 --- a/components/model-catalog/blueprint-model/test-blueprint/capability_restconf/Scripts/python/RestconfConfigDeploy.py +++ b/components/model-catalog/blueprint-model/test-blueprint/capability_restconf/Scripts/python/RestconfConfigDeploy.py @@ -37,11 +37,19 @@ class RestconfConfigDeploy(RestconfComponentFunction): web_client_service = self.restClientService(self.restconf_server_identifier) try: + # mount the device mount_payload = self.resolveAndGenerateMessage("config-deploy-mapping", "config-deploy-template") restconf_client.mount_device(web_client_service, pnf_id, mount_payload) + # log the current configuration subtree + current_configuration = restconf_client.retrieve_device_configuration_subtree( + web_client_service, pnf_id, self.configlet_resource_path) + self.log.info("Current configuration subtree: {}", current_configuration) + + # apply configuration configlet = self.resolveFromDatabase(resolution_key, self.configlet_template_name) - restconf_client.configure_device(web_client_service, pnf_id, self.configlet_resource_path, configlet) + restconf_client.configure_device_json_patch( + web_client_service, pnf_id, self.configlet_resource_path, configlet) except Exception, err: self.log.error("an error occurred while configuring device {}", err) raise err diff --git a/components/scripts/python/ccsdk_restconf/restconf_client.py b/components/scripts/python/ccsdk_restconf/restconf_client.py index 43e885a5b..92069c571 100644 --- a/components/scripts/python/ccsdk_restconf/restconf_client.py +++ b/components/scripts/python/ccsdk_restconf/restconf_client.py @@ -22,53 +22,61 @@ from time import sleep class RestconfClient: + __base_odl_url = "restconf/config/network-topology:network-topology/topology/topology-netconf/node/" __odl_status_check_limit = 10 __odl_status_check_pause = 1 + # Once confirmed to be reliable, the check should change to use the connection-status API __odl_status_check_url = "restconf/operational/network-topology:network-topology/topology/topology-netconf/node/" - __base_odl_url = "restconf/config/network-topology:network-topology/topology/topology-netconf/node/" def __init__(self, log, restconf_component_function): self.__log = log self.__component_function = restconf_component_function - def mount_device(self, web_client_service, pnf_id, mount_payload): - self.__log.debug("mounting device {}", pnf_id) + def mount_device(self, web_client_service, nf_id, mount_payload): + self.__log.debug("mounting device {}", nf_id) headers = {"Content-Type": "application/xml"} - url = self.__base_odl_url + pnf_id + url = self.__base_odl_url + nf_id self.__log.debug("sending mount request, url: {}", url) web_client_service.exchangeResource("PUT", url, mount_payload, headers) - self.__wait_for_odl_to_mount(web_client_service, pnf_id) + self.__wait_for_odl_to_mount(web_client_service, nf_id) - def __wait_for_odl_to_mount(self, web_client_service, pnf_id): + def __wait_for_odl_to_mount(self, web_client_service, nf_id): counter = 0 - url = self.__odl_status_check_url + pnf_id + url = self.__odl_status_check_url + nf_id self.__log.info("url for ODL status check: {}", url) expected_result = '"netconf-node-topology:connection-status":"connected"' while counter < self.__odl_status_check_limit: result = web_client_service.exchangeResource("GET", url, "") if expected_result in result: - self.__log.info("PNF was mounted successfully on ODL") + self.__log.info("NF was mounted successfully on ODL") return None sleep(self.__odl_status_check_pause) counter += 1 - raise Exception("PNF was not mounted on ODL, aborting configuration procedure") + raise Exception("NF was not mounted on ODL, aborting configuration procedure") - def configure_device(self, web_client_service, pnf_id, configlet_resource_path, configlet_to_apply): - self.log_current_configlet(web_client_service, pnf_id, configlet_resource_path) - self.__log.info("configuring device: {}, Configlet: {}", pnf_id, configlet_to_apply) + def configure_device_json_patch(self, web_client_service, nf_id, configlet_resource_path, configlet_to_apply): headers = {"Content-Type": "application/yang.patch+json"} - url = self.__base_odl_url + pnf_id + configlet_resource_path + self.__configure_device(web_client_service, nf_id, configlet_resource_path, configlet_to_apply, headers) + + def configure_device_xml_patch(self, web_client_service, nf_id, configlet_resource_path, configlet_to_apply): + headers = {"Content-Type": "application/yang.patch+xml"} + self.__configure_device(web_client_service, nf_id, configlet_resource_path, configlet_to_apply, headers) + + def __configure_device(self, web_client_service, nf_id, configlet_resource_path, configlet_to_apply, headers): + self.__log.debug("headers: {}", headers) + self.__log.info("configuring device: {}, Configlet: {}", nf_id, configlet_to_apply) + url = self.__base_odl_url + nf_id + configlet_resource_path self.__log.debug("sending patch request, url: {}", url) result = web_client_service.exchangeResource("PATCH", url, configlet_to_apply, headers) self.__log.info("Configuration application result: {}", result) - def log_current_configlet(self, web_client_service, pnf_id, configlet_resource_path): - url = self.__base_odl_url + pnf_id + configlet_resource_path + def retrieve_device_configuration_subtree(self, web_client_service, nf_id, configlet_resource_path): + url = self.__base_odl_url + nf_id + configlet_resource_path self.__log.debug("sending GET request, url: {}", url) result = web_client_service.exchangeResource("GET", url, "") - self.__log.info("Current configuration: {}", result) + return result - def unmount_device(self, web_client_service, pnf_id): - url = self.__base_odl_url + str(pnf_id) + def unmount_device(self, web_client_service, nf_id): + url = self.__base_odl_url + nf_id self.__log.debug("sending unmount request, url: {}", url) web_client_service.exchangeResource("DELETE", url, "") |