diff options
Diffstat (limited to 'cds-ui/client/src/app')
14 files changed, 237 insertions, 20 deletions
diff --git a/cds-ui/client/src/app/common/shared/components/home/home.component.html b/cds-ui/client/src/app/common/shared/components/home/home.component.html index f8cfc888e..ef6880d37 100644 --- a/cds-ui/client/src/app/common/shared/components/home/home.component.html +++ b/cds-ui/client/src/app/common/shared/components/home/home.component.html @@ -37,7 +37,18 @@ limitations under the License. <mat-sidenav #drawer mode="side" [(opened)]="opened" (opened)="events.push('open!')" (closed)="events.push('close!')"> <mat-toolbar color="" primary>Menu</mat-toolbar> <mat-nav-list> - <a mat-list-item [routerLink]="['/blueprint']">Controller Blueprint</a> + <!-- <a mat-list-item [routerLink]="['/blueprint']">Controller Blueprint</a> --> + <nav class="ng-tns-c12-2 ng-star-inserted"> + <!-- <button class="docs-nav-content-btn" cdkaccordionitem="" expanded="true" + aria-label="Form Controls, section toggle" aria-controls="panel-forms" aria-expanded="false">--> + <label>Controller Blueprint</label> + <!-- <mat-icon class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true"> + keyboard_arrow_down</mat-icon></button> --> + <ul> + <a mat-list-item [routerLink]="['/blueprint']">Create Blueprint</a> + <a mat-list-item [routerLink]="['/']">Search Blueprint</a> + </ul> + </nav> <a mat-list-item [routerLink]="['/resource-definition']">Resource Definition</a> </mat-nav-list> </mat-sidenav> diff --git a/cds-ui/client/src/app/common/shared/components/home/home.component.scss b/cds-ui/client/src/app/common/shared/components/home/home.component.scss index df9a48de5..be21b750c 100644 --- a/cds-ui/client/src/app/common/shared/components/home/home.component.scss +++ b/cds-ui/client/src/app/common/shared/components/home/home.component.scss @@ -26,22 +26,41 @@ limitations under the License. // left: 0; // right: 0; // } - // .example-events { // width: 300px; // height: 200px; // overflow: auto; // border: 1px solid #555; // } -.mat-sidenav-container{ +.mat-sidenav-container { height: 652px; } -.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary { + +.mat-button.mat-primary, +.mat-icon-button.mat-primary, +.mat-stroked-button.mat-primary { color: white !important; } -.menuBar{ + +.menuBar { cursor: pointer; } -.title{ + +.title { margin: 1em; +} + +.docs-component-viewer-nav .docs-component-viewer-nav-content button { + padding: 10px 15px; + font-weight: 700; + line-height: 16px; + margin: 0; + font-size: 13px; + cursor: pointer; + position: relative; + display: block; + width: 100%; + text-align: left; + background: 0 0; + border: none; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.module.ts index 3a25e92f0..ae4df4ccf 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.module.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.module.ts @@ -30,7 +30,7 @@ import { SelectTemplateModule } from './select-template/select-template.module'; import { ModifyTemplateModule } from './modify-template/modify-template.module'; import { DeployTemplateModule } from './deploy-template/deploy-template.module'; import { TestTemplateModule } from './test-template/test-template.module'; - +import { SearchEditCBAComponent } from './search-edit-cba/search-edit-cba.component'; import { AppMaterialModule } from '../../../app/common/modules/app-material.module'; @NgModule({ @@ -45,7 +45,8 @@ import { AppMaterialModule } from '../../../app/common/modules/app-material.modu SelectTemplateModule, ModifyTemplateModule, DeployTemplateModule, - TestTemplateModule + TestTemplateModule, + SearchEditCBAComponent ] }) export class BlueprintModule { } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.html b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.html new file mode 100644 index 000000000..7371d2105 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.html @@ -0,0 +1,16 @@ +/* ============LICENSE_START========================================== =================================================================== Copyright (C) 2018 IBM Intellectual Property. All rights reserved. =================================================================== +Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); you may not use this software 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============================================ */ + +<form class="search-form" [formGroup]="myControl"> + <mat-form-field class="search-full-width"> + <input #resourceSelect type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input"> + <button matSuffix mat-icon-button (click)="fetchResourceByName()"><mat-icon>search</mat-icon></button> + <!-- <mat-autocomplete #auto="matAutocomplete"> + <mat-option (click)="selected(option)" *ngFor="let option of options | search : searchText" [value]="option.tags"> + {{option.tags}} + </mat-option> + </mat-autocomplete> --> + </mat-form-field> +</form>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.scss diff --git a/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.spec.ts new file mode 100644 index 000000000..78210cf12 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchEditCBAComponent } from './search-edit-cba.component'; + +describe('SearchEditCBAComponent', () => { + let component: SearchEditCBAComponent; + let fixture: ComponentFixture<SearchEditCBAComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchEditCBAComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchEditCBAComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.ts new file mode 100644 index 000000000..14a79e0f1 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/search-edit-cba/search-edit-cba.component.ts @@ -0,0 +1,67 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +* +* Modifications Copyright (C) 2019 IBM +*================================================================================= +* 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 { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; + +import { MatAutocompleteTrigger } from '@angular/material' +@Component({ + selector: 'app-search-edit-cba', + templateUrl: './search-edit-cba.component.html', + styleUrls: ['./search-edit-cba.component.scss'] +}) +export class SearchEditCBAComponent implements OnInit { + + myControl: FormGroup; + @Output() resourcesData = new EventEmitter(); + options: any[] = []; + //['One','One1', 'Two', 'Three']; + // @ViewChild('resourceSelect') resourceSelect; + @ViewChild('resourceSelect', { read: MatAutocompleteTrigger }) resourceSelect: MatAutocompleteTrigger; + + searchText: string = ''; + constructor(private _formBuilder: FormBuilder, + ) { } + + ngOnInit() { + this.myControl = this._formBuilder.group({ + search_input: ['', Validators.required] + }); + } + selected(value){ + this.resourcesData.emit(value); + } + + fetchResourceByName() { + // this.exsistingModelService.searchByTags(this.searchText) + // .subscribe(data=>{ + // console.log(data); + // data.forEach(element => { + // this.options.push(element) + // }); + // this.resourceSelect.openPanel(); + // }, error=>{ + // window.alert('error' + error); + // }) + } + +} diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html index b58be9fce..491c5e06d 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html @@ -18,9 +18,24 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> -<div> - <input type="file" accept=".zip" (change)="fileChanged($event)"> +<div *ngIf="optionSelected==1"> + <div> + <input type="file" accept=".zip" (change)="fileChanged($event)"> + </div> + <div> + <button mat-button matStepperNext (click)="updateBlueprintState()" [ngClass]="{'mat-upload-btn-disabled': !validfile, 'matStepNextBtn': validfile}" [disabled]="!validfile">Upload</button> + </div> </div> -<div> - <button mat-button matStepperNext (click)="updateBlueprintState()" [ngClass] = "{'mat-upload-btn-disabled': !validfile, 'matStepNextBtn': validfile}" [disabled]="!validfile">Upload</button> +<div *ngIf="optionSelected==2"> + <form class="search-form" [formGroup]="myControl"> + <mat-form-field class="search-full-width"> + <input #resourceSelect type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input"> + <button matSuffix mat-icon-button (click)="fetchResourceByName()"><mat-icon>search</mat-icon></button> + <!-- <mat-autocomplete #auto="matAutocomplete"> + <mat-option (click)="selected(option)" *ngFor="let option of options | search : searchText" [value]="option.tags"> + {{option.tags}} + </mat-option> + </mat-autocomplete> --> + </mat-form-field> + </form> </div>
\ 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 1221e8f2b..64352b224 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 @@ -19,7 +19,7 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit, EventEmitter, Output, ViewChild } from '@angular/core'; +import { Component, OnInit, EventEmitter, Output, ViewChild, Input } from '@angular/core'; import { Store } from '@ngrx/store'; import * as JSZip from 'jszip'; import { Observable } from 'rxjs'; @@ -31,6 +31,8 @@ import { LoadBlueprintSuccess, SET_BLUEPRINT_STATE, SetBlueprintState } from '.. import { json } from 'd3'; import { SortPipe } from '../../../../common/shared/pipes/sort.pipe'; import { LoaderService } from '../../../../common/core/services/loader.service'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { MatAutocompleteTrigger } from '@angular/material'; @Component({ selector: 'app-search-template', @@ -47,6 +49,12 @@ export class SearchTemplateComponent implements OnInit { uploadedFileName: string; @ViewChild('fileInput') fileInput; result: string = ''; + @Input() optionSelected: string; + myControl: FormGroup; + @ViewChild('resourceSelect', { read: MatAutocompleteTrigger }) resourceSelect: MatAutocompleteTrigger; + @Output() resourcesData = new EventEmitter(); + options: any[] = []; + searchText: string = ''; private paths = []; private tree; @@ -57,11 +65,30 @@ export class SearchTemplateComponent implements OnInit { private blueprintName: string; private entryDefinition: string; - constructor(private store: Store<IAppState>, private loader: LoaderService) { } + constructor(private store: Store<IAppState>, private loader: LoaderService,private formBuilder: FormBuilder) { } ngOnInit() { + this.myControl = this.formBuilder.group({ + search_input: ['', Validators.required] + }); + } + + selected(value) { + this.resourcesData.emit(value); } + fetchResourceByName() { + // this.exsistingModelService.searchByTags(this.searchText) + // .subscribe(data => { + // console.log(data); + // data.forEach(element => { + // this.options.push(element) + // }); + // this.resourceSelect.openPanel(); + // }, error => { + // window.alert('error' + error); + // }) + } fileChanged(e: any) { this.paths = []; this.file = e.target.files[0]; diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.service.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.service.spec.ts new file mode 100644 index 000000000..418b7e9ca --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { SearchTemplateService } from './search-template.service'; + +describe('SearchTemplateService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: SearchTemplateService = TestBed.get(SearchTemplateService); + expect(service).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.service.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.service.ts new file mode 100644 index 000000000..fdb261d52 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { ApiService } from '../../../../common/core/services/api.service'; + +@Injectable({ + providedIn: 'root' +}) +export class SearchTemplateService { + + constructor(private _http: HttpClient, private api: ApiService) { } + + searchByTags(uri: string, searchText: String): Observable<any>{ + return this.api.post(uri, searchText); + } +} 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 d11b37144..97c65b220 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 @@ -22,7 +22,7 @@ limitations under the License. <mat-step [stepControl]="step1FormGroup"> <ng-template matStepLabel>Choose CBA Template file</ng-template> <div class="matStepContent"> - <app-template-options></app-template-options> + <app-template-options (option)="templateSelected($event)"></app-template-options> <br> <div> <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> @@ -30,10 +30,10 @@ limitations under the License. </div> </mat-step> - <mat-step [stepControl]="step2FormGroup"> + <mat-step [stepControl]="step2FormGroup" *ngIf="templateOption==1 || templateOption == 2"> <ng-template matStepLabel>Browse CBA Template file</ng-template> <div class="matStepContent"> - <app-search-template (cbaFile)="fileChange($event)"></app-search-template> + <app-search-template [optionSelected]="templateOption" (cbaFile)="fileChange($event)"></app-search-template> <!-- <div> <button mat-button matStepperNext class="matStepNextBtn">Upload</button> </div>--> 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 d9591dd80..561f15a5d 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 @@ -38,6 +38,7 @@ export class SelectTemplateComponent implements OnInit { metaData: IMetaData; blueprintState: IBlueprintState; importModel: IImportModel; + templateOption: any; constructor(private store: Store<IBlueprintState>) { // this.importModel.file = ''; @@ -45,6 +46,12 @@ export class SelectTemplateComponent implements OnInit { ngOnInit() { } + + templateSelected(option: any) { + this.templateOption = option; + console.log(this.templateOption); + } + fileChange(topologyTemp: ITopologyTemplate) { this.topologyTemplate = topologyTemp; console.log(topologyTemp); @@ -57,6 +64,7 @@ export class SelectTemplateComponent implements OnInit { upload() { } + // saveBlueprintModel(){ // this.blueprint.toplogyTemplates=this.topologyTemplate; // this.blueprint.metadata= this.metaData; diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.html index d66b559f3..57ff00df5 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.html @@ -19,7 +19,7 @@ limitations under the License. ============LICENSE_END============================================ --> <mat-radio-group> - <mat-radio-button value="1" (click)="selected(1)">Upload Template file</mat-radio-button><br><br> - <!-- <mat-radio-button value="2" (click)="selected(2)">Starter Template</mat-radio-button><br><br> - <mat-radio-button value="3" (click)="selected(3)">Existing Model File</mat-radio-button> --> + <mat-radio-button value="1" (click)="selected(1)">Upload Template file</mat-radio-button><br> <br> + <mat-radio-button value="2" (click)="selected(2)">Starter Template</mat-radio-button><br> <br> + <mat-radio-button value="3" (click)="selected(3)">Existing Model File</mat-radio-button> </mat-radio-group>
\ No newline at end of file |