summaryrefslogtreecommitdiffstats
path: root/cds-ui/client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/client/src/app')
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts30
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html63
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts7
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html7
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss10
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts25
-rw-r--r--cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html19
-rw-r--r--cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss21
-rw-r--r--cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts11
-rw-r--r--cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts30
10 files changed, 184 insertions, 39 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts
index 5e86a7eb7..b332f8fe4 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts
@@ -112,21 +112,21 @@ export class DesignerComponent implements OnInit {
d.x = xbyMath;
d.y = ybyMath;
- firstg.append('rect')
- .attr('x', 95)
- .attr('y', 20)
- // .attr('r', 10)
+ firstg.append('circle')
+ .attr('cx', 97)
+ .attr('cy', 20)
+ .attr('r', 5)
.attr('width', 10)
.attr('height', 10)
.attr('fill', 'orange')
if(d.requirementsArray) {
d.requirementsArray.forEach(requirement =>{
- firstg.append('rect')
+ firstg.append('circle')
.attr('id', d.name+requirement.name)
- .attr('x', 95)
- .attr('y', 60)
- // .attr('r', 10)
+ .attr('cx', 97)
+ .attr('cy', 60)
+ .attr('r', 5)
.attr('width', 10)
.attr('height', 10)
.attr('fill', 'blue')
@@ -137,16 +137,16 @@ export class DesignerComponent implements OnInit {
if(d.capabilitiesArray) {
d.capabilitiesArray.forEach(capability =>{
- firstg.append('rect')
+ firstg.append('circle')
.attr('id', d.name+capability.name)
- .attr('x', 95)
- .attr('y', 40)
- // .attr('r', 10)
+ .attr('cx', 97)
+ .attr('cy', 40)
+ .attr('r', 5)
.attr('width', 10)
.attr('height', 10)
.attr('fill', 'green');
- capability.x = xbyMath + 95;
- capability.y = ybyMath + 60;
+ capability.x = xbyMath + 97;
+ capability.y = ybyMath + 40;
});
}
@@ -237,7 +237,7 @@ export class DesignerComponent implements OnInit {
.attr('x2', link.targetX)
.attr('y2', link.targetY)
.attr('stroke','gray')
- .attr('stroke-width', 5);
+ .attr('stroke-width', 2);
});
}
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 c41bdafb7..1ba944a30 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
@@ -61,6 +61,7 @@ limitations under the License.
<!-- <svg id="svgArea" width="1000px" height="100%" style="background-color: #C0C0C0"> -->
<!-- <rect x="0" y="0" width="300" height="200" fill="yellow"></rect> -->
<!-- </svg> -->
+ <app-designer></app-designer>
</div>
@@ -71,6 +72,18 @@ limitations under the License.
<div *ngIf="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>
@@ -91,6 +104,56 @@ limitations under the License.
</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.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
index eed926b7f..9ccb9977f 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
@@ -25,13 +25,16 @@ import { CdkTableModule } from '@angular/cdk/table';
import { ModifyTemplateComponent } from './modify-template.component';
import { ModifyTemplateRoutingModule } from './modify-template-routing.module';
import { AppMaterialModule } from '../../../common/modules/app-material.module';
+import { DesignerComponent } from './designer/designer.component';
@NgModule({
declarations: [
- ModifyTemplateComponent
+ ModifyTemplateComponent,
+ DesignerComponent
],
exports: [
- ModifyTemplateComponent
+ ModifyTemplateComponent,
+ DesignerComponent
],
imports: [
CommonModule,
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 635b83cbd..f97ea0ee7 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,4 +18,9 @@ See the License for the specific language governing permissions and
limitations under the License.
============LICENSE_END============================================
-->
-<input type="file" accept=".cba"> \ No newline at end of file
+<div>
+ <input type="file" accept=".json" (change)="fileChanged($event)">
+</div>
+<div>
+ <button mat-button matStepperNext class="matStepNextBtn" (click)="extractBlueprint()">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.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss
index 22941b5fa..5732b5a26 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
@@ -17,4 +17,12 @@ 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============================================
-*/ \ No newline at end of file
+*/
+
+.matStepNextBtn {
+ color: white;
+ background: gray;
+ margin-top: 10px;
+ position: absolute;
+ margin-bottom: 5px;
+} \ 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 a58be6eb3..3a344c9fc 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,9 @@ limitations under the License.
============LICENSE_END============================================
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { IBlueprint} from '../../../../common/core/store/models/blueprint.model';
@Component({
selector: 'app-search-template',
@@ -27,10 +29,25 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./search-template.component.scss']
})
export class SearchTemplateComponent implements OnInit {
-
+ file: any;
+ localBluePrintData: IBlueprint;
+ fileText: object[];
+
constructor() { }
- ngOnInit() {
+ ngOnInit() { }
+
+ fileChanged(e: any) {
+ this.file = e.target.files[0];
+ let fileReader = new FileReader();
+ fileReader.readAsText(e.srcElement.files[0]);
+ var me = this;
+ fileReader.onload = function () {
+ let fileData = JSON.stringify(fileReader.result);
+ me.localBluePrintData = JSON.parse(fileData);
+ console.log(me.localBluePrintData);
+ }
+ }
+ extractBlueprint(){
}
-
}
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 dad727cec..83c9ae2c0 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
@@ -18,23 +18,28 @@
* ============LICENSE_END=========================================================
*/-->
+<mat-card class="ver-card">
+<mat-card-header>
+</mat-card-header>
+<mat-card-content>
<mat-vertical-stepper linear>
- <mat-step >
+ <mat-step [stepControl]="step1FormGroup">
<ng-template matStepLabel>Choose Resource file</ng-template>
<br>
- <app-resource-template-options></app-resource-template-options>
+ <app-resource-template-options (options)="selectedOption($event)"></app-resource-template-options>
<br>
<div>
<button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
</div>
</mat-step>
- <mat-step >
+ <mat-step [stepControl]="step2FormGroup">
<ng-template matStepLabel>Browse Template file</ng-template>
- <app-upload-resource (change)="fileChange(fileupload.files)"></app-upload-resource>
+ <app-upload-resource (change)="fileChange(fileupload.files)"></app-upload-resource><br><br>
+ <app-existing-model></app-existing-model>
<div>
<button mat-button matStepperNext class="matStepNextBtn">Upload</button>
</div>
</mat-step>
-</mat-vertical-stepper>
-
-<!-- <router-outlet></router-outlet> --> \ No newline at end of file
+ </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 b1d0ac57a..1d113d49b 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
@@ -22,4 +22,25 @@
background:gray;
margin-top: 10px;
position: absolute;
+
+}
+.ver-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-card-header{
+ height:35px;
+}
+.mat-card-content{
+ width: auto;
+ background-color: #fff;
+ padding: 8px 8px;
+ // border-left: 4px solid #4CAF50;
+ word-wrap: break-word;
+ min-height:350px;
+ height: auto;
} \ 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 32dc3807d..bb8ceea51 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
@@ -30,10 +30,10 @@ import { Store } from '@ngrx/store';
export class ResourceCreationComponent implements OnInit {
myFile: File; /* property of File type */
-
+ selectedValue: any;
constructor() {
}
-
+
ngOnInit() {
}
@@ -41,8 +41,13 @@ export class ResourceCreationComponent implements OnInit {
console.log(files);
this.myFile = files[0].nativeElement;
}
-
upload(){
}
+
+ selectedOption(value){
+ this.selectedValue=value;
+ console.log(this.selectedValue);
+}
+
}
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts
index e4fcf1378..7003f4c20 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts
@@ -24,22 +24,39 @@ import { CommonModule } from '@angular/common';
import { ResourceCreationRoutingModule } from './resource-creation-routing.module';
import { ResourceCreationComponent } from './resource-creation.component';
import { ResourceTemplateOptionsComponent } from './resource-template-options/resource-template-options.component';
-import { MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
+import { MatAutocompleteModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
import { UploadResourceComponent } from './upload-resource/upload-resource.component';
+import { NewTemplateComponent } from './new-template/new-template.component';
+import { ExistingModelComponent } from './existing-model/existing-model.component';
+import { SearchResourceComponent } from './existing-model/search-resource/search-resource.component';
+import { SharedModule } from '../../../../app/common/shared/shared.module';
+import { FormsModule,ReactiveFormsModule } from '@angular/forms';
@NgModule({
- declarations: [
+
+ declarations: [
ResourceCreationComponent,
ResourceTemplateOptionsComponent,
- UploadResourceComponent
+ UploadResourceComponent,
+ NewTemplateComponent,
+ ExistingModelComponent,
+ SearchResourceComponent,
+
],
exports: [
ResourceCreationComponent,
ResourceTemplateOptionsComponent,
- UploadResourceComponent
+ UploadResourceComponent,
+ NewTemplateComponent,
+ ExistingModelComponent,
+ SearchResourceComponent,
+ SharedModule
],
imports: [
CommonModule,
+ SharedModule,
+ FormsModule,
+ ReactiveFormsModule,
ResourceCreationRoutingModule,
MatToolbarModule,
MatIconModule,
@@ -57,7 +74,8 @@ import { UploadResourceComponent } from './upload-resource/upload-resource.compo
MatSelectModule,
MatRadioModule,
MatFormFieldModule,
- MatStepperModule
- ]
+ MatStepperModule,
+ MatAutocompleteModule
+ ]
})
export class ResourceCreationModule { }