summaryrefslogtreecommitdiffstats
path: root/cds-ui/client
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/client')
-rw-r--r--cds-ui/client/src/app/common/shared/components/home/home.component.html2
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html121
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss6
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html4
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss4
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts2
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html170
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss67
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html2
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts32
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) {