diff options
Diffstat (limited to 'cds-ui/client')
10 files changed, 210 insertions, 200 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 e23263f9a..dc0181cff 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 @@ -42,7 +42,7 @@ limitations under the License. <mat-toolbar color=""primary>Menu</mat-toolbar> <mat-nav-list> <a mat-list-item [routerLink]="['/blueprint']">Controlled Blueprint</a> - <a mat-list-item [routerLink]="['/resource-definition']">Data dictionory</a> + <a mat-list-item [routerLink]="['/resource-definition']">Resource Definition</a> </mat-nav-list> </mat-sidenav> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html index b1c894099..3ab8f2414 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html @@ -17,6 +17,123 @@ 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============================================ --> +<div class="designerTmp"> + <div class="outerDiv divone"> + <mat-accordion> + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Node types + </mat-panel-title> + </mat-expansion-panel-header> + <div class="flex-container"> + <div class="item-box" *ngFor="let item of todo" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> -<svg id="svgArea" width="1000px" height="100%" style="background-color:white"> -</svg>
\ No newline at end of file + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Policy + </mat-panel-title> + </mat-expansion-panel-header> + <div class="flex-container"> + <div class="item-box">Policy 1</div> + <div class="item-box">Policy 1</div> + <div class="item-box">Policy 1</div> + </div> + </mat-expansion-panel> + </mat-accordion> + </div> + <div class="outerDiv divtwo"> + <svg id="svgArea" width="1000px" height="100%" style="background-color:white"> + </svg> + </div> + <div id="overlay" class="outerDiv divThree"> + <mat-accordion style="width: 100%"> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Type + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box">vnf-netconf-device</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Properties + </mat-panel-title> + </mat-expansion-panel-header> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Interface + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Interface + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Artifacts + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Inputs + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Capabilities + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + + + </mat-accordion> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss index eecaa169d..1a3674c56 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss @@ -63,4 +63,10 @@ limitations under the License. background-position: 39px 32px; background-repeat: repeat; width: 100% +} +.designerTmp { + display: flex; + flex-direction: row; + height: 524px; + width: 100% }
\ 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 bcf2d1549..53bbc6dfa 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 @@ -70,7 +70,7 @@ limitations under the License. color: white; border-radius: 2em; padding: 0.5em; - min-width: 6em;">Save Changes</button> + min-width: 6em;" (click)="updateBlueprint()">Save Changes</button> </div> <div style="height: 6em; width: 100%;"> @@ -98,7 +98,7 @@ limitations under the License. color: white; border-radius: 2em; padding: 0.5em; - min-width: 6em;">Download</button> + min-width: 6em;" (click)="download()">Download</button> </div> </div> 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 f189af656..58f0ab85d 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 @@ -26,14 +26,14 @@ limitations under the License. .fileViewContainer { width: 20%; margin: 2px; - height: 450px !important; + height: 490px !important; overflow-x: scroll; overflow-y: scroll; } .editorConatiner { width: 80%; background-color: gainsboro; - height: 450px !important; + height: 490px !important; } } 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 5092a698e..37ac522af 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 @@ -161,7 +161,7 @@ export class EditorComponent implements OnInit { } }); - if (this.selectedFile == this.blueprintName) { + if (this.selectedFile == this.blueprintName.trim()) { this.blueprint = JSON.parse(this.text); } else { this.blueprint = this.blueprintdata; diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html index 8397ae9f6..81a1a851e 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html @@ -18,130 +18,58 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> - -<div class="modifyTemp"> - <div *ngIf="designerMode" class="outerDiv divone"> - <mat-accordion> - <mat-expansion-panel> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Node types - </mat-panel-title> - </mat-expansion-panel-header> - <div class="flex-container"> - <div class="item-box" *ngFor="let item of todo" cdkDrag>{{item}}</div> - </div> - </mat-expansion-panel> - - <mat-expansion-panel> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Policy - </mat-panel-title> - </mat-expansion-panel-header> - <div class="flex-container"> - <div class="item-box">Policy 1</div> - <div class="item-box">Policy 1</div> - <div class="item-box">Policy 1</div> - </div> - </mat-expansion-panel> - </mat-accordion> +<!-- <div style="display: flex;flex-direction: row"> + <div style="width: 30em;"> + <button (click) ="changeView()" style=" + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em;">{{viewText}}</button> + </div> + <div style="width: 16em"> + <button style="margin: 0.5em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em;">Save Changes</button> </div> + <div style="width: 100%;height: 3em;"> + <div style="margin-left: 38em"> + <mat-form-field> + <select matNativeControl required> + <option value="volvo">SDC</option> + <option value="saab">CCSDK</option> + </select> + </mat-form-field> + <button style="margin: 0.5em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em;">Deploy</button> + <button style="margin: 0.5em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em;">Save</button> + <button style="margin: 0.5em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em;">Download</button> + + </div> + </div> +</div> --> + +<div class="modifyTemp"> <button class="enrich-btn">Enrichment</button> <button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button> - - <div *ngIf="designerMode" class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv"> - <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer> - </div> - + <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer> <app-editor class="editor-selector" *ngIf="editorMode"></app-editor> - - <div *ngIf="designerMode && on" id="overlay" class="outerDiv divThree"> - <mat-accordion style="width: 100%"> - - <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Type - </mat-panel-title> - </mat-expansion-panel-header> - - <div class="item-list"> - <div class="item-box">vnf-netconf-device</div> - </div> - </mat-expansion-panel> - - <mat-expansion-panel> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Properties - </mat-panel-title> - </mat-expansion-panel-header> - </mat-expansion-panel> - - <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Interface - </mat-panel-title> - </mat-expansion-panel-header> - - <div class="item-list"> - <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> - </div> - </mat-expansion-panel> - - <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Interface - </mat-panel-title> - </mat-expansion-panel-header> - - <div class="item-list"> - <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> - </div> - </mat-expansion-panel> - - <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Artifacts - </mat-panel-title> - </mat-expansion-panel-header> - - <div class="item-list"> - <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> - </div> - </mat-expansion-panel> - - <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Inputs - </mat-panel-title> - </mat-expansion-panel-header> - - <div class="item-list"> - <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> - </div> - </mat-expansion-panel> - - <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> - <mat-expansion-panel-header style="background-color: #f1f1f1"> - <mat-panel-title> - Capabilities - </mat-panel-title> - </mat-expansion-panel-header> - - <div class="item-list"> - <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> - </div> - </mat-expansion-panel> - - - - </mat-accordion> - </div> </div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss index 74303dcfb..2d9685e24 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss @@ -19,51 +19,6 @@ limitations under the License. ============LICENSE_END============================================ */ -.outerDiv { - display: flex; - // align-items: center; - // justify-content: center; - margin: 1px; - padding: 16px; - border-radius: 8px; - } - - .divone { - height: 100%; - width: 18%; - background-color: #D7D1D1; - } -.divtwo { - height: 100%; - width: 100%; - background-color: #D7D1D1; -} -.divThree{ - width: 30%; - height: 100%; - background-color: #D7D1D1; -} - -.flex-container { - display: flex; - flex-wrap: wrap; -} - -.flex-container > div { - background-color: #f1f1f1; - width: 53px; - margin: 2px; - text-align: center; - line-height: 53px; - font-size: 13px; -} -.cnv -{ - background-image: url('http://i.imgur.com/M3PFd.png'); - background-position: 39px 32px; - background-repeat: repeat; - width: 100% -} .modifyTemp { display: flex; @@ -72,35 +27,29 @@ limitations under the License. width: 100% } -.mat-expansion-panel-header{ - background-color: #3f51b5 !important; -} - -.mat-expansion-panel-header-title { - color: white !important; -} - .enrich-btn { cursor: pointer; position: absolute; - top: 4em; - right: 27em; + top: 3.6em; + right: 10em; padding: 6px; color: white; background-color:#3f51b5; margin-right: 2em; - border-radius: 2em; + border-radius: 2em; + z-index: 1; } .toggle-view-btn { cursor: pointer; position: absolute; - top: 4em; - right: 20em; + top: 3.6em; + right: 3em; padding: 6px; color: white; background-color:#3f51b5; - border-radius: 2em + border-radius: 2em; + z-index: 1; } .editor-selector { 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 bb00d7f1a..66e3aeb36 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 @@ -22,5 +22,5 @@ limitations under the License. <input type="file" accept=".zip" (change)="fileChanged($event)"> </div> <div> - <button mat-button matStepperNext class="matStepNextBtn" (click)="updateBlueprintState()">Upload</button> + <button mat-button matStepperNext class="matStepNextBtn" (click)="updateBlueprintState()" [disabled]="!validfile">Upload</button> </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 1ce33f6ab..777faee68 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 @@ -41,6 +41,7 @@ export class SearchTemplateComponent implements OnInit { fileText: object[]; blueprintState: IBlueprintState; bpState: Observable<IBlueprintState>; + validfile: boolean = false; @ViewChild('fileInput') fileInput; result: string = ''; @@ -60,7 +61,7 @@ export class SearchTemplateComponent implements OnInit { fileChanged(e: any) { this.file = e.target.files[0]; - + this.zipFile.files = {}; this.zipFile.loadAsync(this.file) .then((zip) => { if(zip) { @@ -70,14 +71,6 @@ export class SearchTemplateComponent implements OnInit { } updateBlueprintState() { - // let fileReader = new FileReader(); - // fileReader.readAsText(this.file); - // var me = this; - // fileReader.onload = function () { - // var data: IBlueprint = JSON.parse(fileReader.result.toString()); - // me.store.dispatch(new LoadBlueprintSuccess(data)); - // } - let data: IBlueprint = this.activationBlueprint ? JSON.parse(this.activationBlueprint.toString()) : this.activationBlueprint; let blueprintState = { blueprint: data, @@ -90,6 +83,8 @@ export class SearchTemplateComponent implements OnInit { } async buildFileViewData(zip) { + this.validfile = false; + this.paths = []; for (var file in zip.files) { this.fileObject = { name: zip.files[file].name, @@ -99,8 +94,23 @@ export class SearchTemplateComponent implements OnInit { this.fileObject.data = value; this.paths.push(this.fileObject); } - this.fetchTOSACAMetadata(); - this.tree = this.arrangeTreeData(this.paths); + + if(this.paths) { + this.paths.forEach(path =>{ + if(path.name.includes("TOSCA.meta")) { + this.validfile = true + } + }); + } else { + alert('Please update proper file'); + } + + if(this.validfile) { + this.fetchTOSACAMetadata(); + this.tree = this.arrangeTreeData(this.paths); + } else { + alert('Please update proper file with TOSCA metadata'); + } } arrangeTreeData(paths) { |