diff options
Diffstat (limited to 'cds-ui')
16 files changed, 207 insertions, 57 deletions
diff --git a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts index 58b0dc264..f5092aff3 100644 --- a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts +++ b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts @@ -1,15 +1,37 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'search' }) + export class SearchPipe implements PipeTransform{ - transform(items: any[], searchText: string): any[] { - if(!items) return []; - if(!searchText) return items; -searchText = searchText.toLowerCase(); -return items.filter( it => { - return it.toLowerCase().includes(searchText); - }); - } + + transform(items: any[], searchText: string): any[] { + if(!items) return []; + if(!searchText) return items; + searchText = searchText.toLowerCase(); + return items.filter( it => { + return it.toLowerCase().includes(searchText); + }); + } }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html index 64556fb74..5098d563f 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html @@ -33,13 +33,13 @@ limitations under the License. </div> </mat-step> <mat-step [stepControl]="thirdFormGroup"> - <ng-template matStepLabel>Test</ng-template> - <app-test-template></app-test-template> - </mat-step> - <mat-step [stepControl]="thirdFormGroup"> <ng-template matStepLabel>Deploy</ng-template> <app-deploy-template></app-deploy-template> + </mat-step> + <mat-step [stepControl]="thirdFormGroup"> + <ng-template matStepLabel>Test</ng-template> + <app-test-template></app-test-template> </mat-step> </mat-horizontal-stepper> </mat-card-content> -</mat-card>
\ No newline at end of file +</mat-card> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss index 21c06784c..63e456549 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss @@ -25,8 +25,7 @@ limitations under the License. .matStepNextBtn { color: white; - background: gray; - margin-top: 10px; - position: absolute; - margin-bottom: 5px; + background-color: #3f51b5; + margin-right: 2em; + border-radius: 2em; }
\ 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 bf135bba2..9073d10cf 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 @@ -19,9 +19,19 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit } from '@angular/core'; -import {FlatTreeControl} from '@angular/cdk/tree'; -import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import "ace-builds/webpack-resolver"; +import 'brace'; +import 'brace/ext/language_tools'; +import 'ace-builds/src-min-noconflict/snippets/html'; +import { IAppState } from '../../../../common/core/store/state/app.state'; +import { Store } from '@ngrx/store'; +import { Observable } from 'rxjs'; +import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model'; + interface FoodNode { name: string; @@ -32,19 +42,19 @@ const TREE_DATA: FoodNode[] = [ { name: 'Definitions', children: [ - {name: 'activation-blueprint.json'}, - {name: 'artifacts_types.json'}, - {name: 'data_types.json'}, + { name: 'activation-blueprint.json' }, + { name: 'artifacts_types.json' }, + { name: 'data_types.json' }, ] - }, + }, { name: 'Scripts', children: [ { name: 'kotlin', children: [ - {name: 'ScriptComponent.cba.kts'}, - {name: 'ResourceAssignmentProcessor.cba.kts'}, + { name: 'ScriptComponent.cba.kts' }, + { name: 'ResourceAssignmentProcessor.cba.kts' }, ] } ] @@ -82,6 +92,12 @@ interface ExampleFlatNode { }) export class EditorComponent implements OnInit { + @ViewChild('editor') editor; + blueprintdata: IBlueprint; + blueprint: IBlueprint; + bpState: Observable<IBlueprintState>; + text: string; + private transformer = (node: FoodNode, level: number) => { return { expandable: !!node.children && node.children.length > 0, @@ -91,24 +107,63 @@ export class EditorComponent implements OnInit { } treeControl = new FlatTreeControl<ExampleFlatNode>( - node => node.level, node => node.expandable); + node => node.level, node => node.expandable); treeFlattener = new MatTreeFlattener( - this.transformer, node => node.level, node => node.expandable, node => node.children); + this.transformer, node => node.level, node => node.expandable, node => node.children); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - constructor() { + constructor(private store: Store<IAppState>) { this.dataSource.data = TREE_DATA; + this.bpState = this.store.select('blueprint'); } hasChild = (_: number, node: ExampleFlatNode) => node.expandable; ngOnInit() { + this.editorContent(); } fileClicked(file) { console.log('selected file:' + file); } + editorContent() { + this.editor.setTheme("eclipse"); + this.editor.getEditor().setOptions({ + // enableBasicAutocompletion: true, + fontSize: "100%", + printMargin: false, + }); + this.editor.getEditor().commands.addCommand({ + name: "showOtherCompletions", + bindKey: "Ctrl-.", + exec: function (editor) { + } + }) + this.bpState.subscribe( + blueprintdata => { + var blueprintState: IBlueprintState = { blueprint: blueprintdata.blueprint, isLoadSuccess: blueprintdata.isLoadSuccess, isSaveSuccess: blueprintdata.isSaveSuccess, isUpdateSuccess: blueprintdata.isUpdateSuccess }; + this.blueprintdata = blueprintState.blueprint; + let blueprint = []; + for (let key in this.blueprintdata) { + if (this.blueprintdata.hasOwnProperty(key)) { + blueprint.push(this.blueprintdata[key]); + } + } + this.text = JSON.stringify(this.blueprintdata, null, '\t'); + // this.editor.getEditor().getSession().setMode("ace/mode/json"); + this.editor.getEditor().getSession().setTabSize(2); + this.editor.getEditor().getSession().setUseWrapMode(true); + // this.editor.getEditor().setValue(JSON.stringify(this.blueprintdata, null, '\t')); + // console.log(this.text); + }) + } + + updateBlueprint(){ + this.blueprint = JSON.parse(this.text); + this.store.dispatch(new LoadBlueprintSuccess(this.blueprint)); + // console.log(this.text); + } } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts index 1ab7a8045..3aef2a7aa 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts @@ -27,6 +27,7 @@ import { ModifyTemplateRoutingModule } from './modify-template-routing.module'; import { AppMaterialModule } from '../../../common/modules/app-material.module'; import { DesignerComponent } from './designer/designer.component'; import { EditorComponent } from './editor/editor.component'; +import { AceEditorModule } from 'ng2-ace-editor'; @NgModule({ declarations: [ @@ -36,13 +37,15 @@ import { EditorComponent } from './editor/editor.component'; ], exports: [ ModifyTemplateComponent, - DesignerComponent + DesignerComponent, + AceEditorModule ], imports: [ CommonModule, CdkTableModule, AppMaterialModule, - ModifyTemplateRoutingModule + ModifyTemplateRoutingModule, + AceEditorModule ] }) export class ModifyTemplateModule { } 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 033950b3a..2327a5839 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 @@ -59,6 +59,7 @@ export class MetadataComponent implements OnInit { blueprintdata => { var blueprintState: IBlueprintState = { blueprint: blueprintdata.blueprint, isLoadSuccess: blueprintdata.isLoadSuccess, isSaveSuccess: blueprintdata.isSaveSuccess, isUpdateSuccess: blueprintdata.isUpdateSuccess }; this.metadata = blueprintState.blueprint.metadata; + this.blueprint = blueprintState.blueprint; let metadatavalues = []; for (let key in this.metadata) { if (this.metadata.hasOwnProperty(key)) { diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss index 5732b5a26..66f3f28de 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss @@ -21,8 +21,9 @@ limitations under the License. .matStepNextBtn { color: white; - background: gray; + background-color: #3f51b5; margin-top: 10px; position: absolute; margin-bottom: 5px; + border-radius: 2em; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html index f0a38324b..d11b37144 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html @@ -34,7 +34,7 @@ limitations under the License. <ng-template matStepLabel>Browse CBA Template file</ng-template> <div class="matStepContent"> <app-search-template (cbaFile)="fileChange($event)"></app-search-template> - <!-- <div> + <!-- <div> <button mat-button matStepperNext class="matStepNextBtn">Upload</button> </div>--> </div> @@ -46,4 +46,4 @@ limitations under the License. </div> </mat-step> </mat-vertical-stepper> -<button mat-button matStepperNext class="matStepNextBtn" (click)="saveBlueprintModel()">Next</button>
\ No newline at end of file +<button mat-button matStepperNext class="matStepNextBtn">Next</button>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss index 64c816477..931e1d445 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss @@ -21,10 +21,11 @@ limitations under the License. .matStepNextBtn { color: white; - background: gray; + background-color: #3f51b5; margin-top: 10px; position: absolute; margin-bottom: 5px; + border-radius: 2em; } .matStepContent { diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts index 431b734e9..d9591dd80 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts @@ -57,9 +57,9 @@ export class SelectTemplateComponent implements OnInit { upload() { } - saveBlueprintModel(){ - this.blueprint.toplogyTemplates=this.topologyTemplate; - this.blueprint.metadata= this.metaData; - // this.store.dispatch(new CreateBlueprint(this.blueprint)); - } + // saveBlueprintModel(){ + // this.blueprint.toplogyTemplates=this.topologyTemplate; + // this.blueprint.metadata= this.metaData; + // // this.store.dispatch(new CreateBlueprint(this.blueprint)); + // } } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit-routing.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit-routing.module.ts index bf423f0b2..ae417c454 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit-routing.module.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit-routing.module.ts @@ -2,8 +2,8 @@ * ============LICENSE_START======================================================= * ONAP : CDS * ================================================================================ -* Copyright 2019 TechMahindra -*================================================================================= +* Copyright (C) 2019 TechMahindra +* ================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -33,3 +33,4 @@ const routes: Routes = [ exports: [RouterModule] }) export class ResourceEditRoutingModule { } + 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 8f40e8e34..7df509221 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 @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : CDS * ================================================================================ -* Copyright 2019 TechMahindra +* Copyright (C) 2019 TechMahindra *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -19,7 +19,27 @@ */--> -<p> - resource-edit works! -</p> -<router-outlet></router-outlet>
\ No newline at end of file +<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> + </mat-card-content> +</mat-card> + +<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 class="submit"> + <button mat-raised-button>Save</button> +</mat-card> +<!-- <router-outlet></router-outlet> -->
\ No newline at end of file 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 cafd2bf8f..7135350d5 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 @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : CDS * ================================================================================ -* Copyright 2019 TechMahindra +* Copyright (C) 2019 TechMahindra *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -16,4 +16,40 @@ * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END========================================================= -*/
\ No newline at end of file +*/ + +.metadata-card { + width: 100%; + background-color: #f1f1f1; + padding: 0.01em 16px; + 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; +} +.sources-card { + width: 100%; + background-color: #f1f1f1; + padding: 0.01em 16px; + 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; +} +.mat-raised-button{ + border: 1px solid grey; + background-color: grey; + padding: 1px; + color: white; + +} +.mat-card-title{ + padding-top: 7px; +} +.mat-card-header{ + height:35px; +} +.mat-card-content{ + width: auto; + background-color: #fff; + padding: 8px 8px; + word-wrap: break-word; +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.spec.ts index a970de6ab..f88452d31 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.spec.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.spec.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : CDS * ================================================================================ -* Copyright 2019 TechMahindra +* Copyright (C) 2019 TechMahindra *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. 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 a4e9773a4..5b567034a 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 @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : CDS * ================================================================================ -* Copyright 2019 TechMahindra +* Copyright (C) 2019 TechMahindra *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts index 3efab6724..8f28021c8 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : CDS * ================================================================================ -* Copyright 2019 TechMahindra +* Copyright (C) 2019 TechMahindra *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -23,13 +23,24 @@ import { CommonModule } from '@angular/common'; import { ResourceEditComponent } from './resource-edit.component'; import { ResourceEditRoutingModule } from './resource-edit-routing.module'; +import { MatExpansionModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material'; +import { FormsModule,ReactiveFormsModule } from '@angular/forms'; +import { SharedModule } from '../../../../app/common/shared/shared.module'; +import { SourcesTemplateComponent } from './sources-template/sources-template.component'; +import { ResourceMetadataComponent } from './resource-metadata/resource-metadata.component'; +import { DragDropModule } from '@angular/cdk/drag-drop'; @NgModule({ - declarations: [ ResourceEditComponent ], - exports: [ ResourceEditComponent ], + declarations: [ ResourceEditComponent,SourcesTemplateComponent,ResourceMetadataComponent ], imports: [ - CommonModule, - ResourceEditRoutingModule - ] + CommonModule, + ResourceEditRoutingModule, + SharedModule, + FormsModule,ReactiveFormsModule, + DragDropModule, + MatExpansionModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule + + ], + exports: [ ResourceEditComponent,SharedModule ] }) export class ResourceEditModule { } |