Skip to content

Commit

Permalink
initial implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghareeb-falazi
ghareeb-falazi committed Dec 12, 2019
1 parent fb478db commit 92a3ca2
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 148 deletions.
95 changes: 68 additions & 27 deletions org.eclipse.winery.frontends/app/topologymodeler/src/app/canvas/canvas.component.ts
View file
Expand Up @@ -43,7 +43,6 @@ import { align, toggleModalType } from '../models/enums';
import { QName } from '../models/qname';
import { ImportTopologyModalData } from '../models/importTopologyModalData';
import { ImportTopologyService } from '../services/import-topology.service';
import { ReqCapService } from '../services/req-cap.service';
import { SplitMatchTopologyService } from '../services/split-match-topology.service';
import { PlaceComponentsService } from '../services/placement.service';
import { DifferenceStates, VersionUtils } from '../models/ToscaDiff';
Expand All @@ -56,6 +55,8 @@ import { TopologyTemplateUtil } from '../models/topologyTemplateUtil';
import { ReqCapRelationshipService } from '../services/req-cap-relationship.service';
import { TPolicy } from '../models/policiesModalData';
import { WineryRepositoryConfigurationService } from '../../../../tosca-management/src/app/wineryFeatureToggleModule/WineryRepositoryConfiguration.service';
import { RequirementDefinitionModel } from '../models/requirementDefinitonModel';
import { CapabilityDefinitionModel } from '../models/capabilityDefinitionModel';

@Component({
selector: 'winery-canvas',
Expand Down Expand Up @@ -161,7 +162,6 @@ export class CanvasComponent implements OnInit, OnDestroy, OnChanges, AfterViewI
private existsService: ExistsService,
private splitMatchService: SplitMatchTopologyService,
private placementService: PlaceComponentsService,
private reqCapService: ReqCapService,
private errorHandler: ErrorHandlerService,
private reqCapRelationshipService: ReqCapRelationshipService,
private notify: ToastrService,
Expand Down Expand Up @@ -372,14 +372,14 @@ export class CanvasComponent implements OnInit, OnDestroy, OnChanges, AfterViewI
try {
// request all valid requirement types for that node type for display as name select options in
// the modal
this.reqCapService.requestRequirementDefinitionsOfNodeType(currentNodeData.type).subscribe(data => {
this.requirements.reqDefinitionNames = [];
this.requirements.reqDefinitionName = '';
for (const reqType of data) {
const qNameOfType = new QName(reqType.requirementType);
this.requirements.reqDefinitionNames.push(qNameOfType.localName);
}
});
const data = this.getRequirementDefinitionsOfNodeType(currentNodeData.type);
this.requirements.reqDefinitionNames = [];
this.requirements.reqDefinitionName = '';

for (const reqType of data) {
const qNameOfType = new QName(reqType.requirementType);
this.requirements.reqDefinitionNames.push(qNameOfType.localName);
}
} catch (e) {
this.requirements.requirements = '';
}
Expand Down Expand Up @@ -454,14 +454,15 @@ export class CanvasComponent implements OnInit, OnDestroy, OnChanges, AfterViewI
try {
// request all valid capability types for that node type for display as name select options in
// the modal
this.reqCapService.requestCapabilityDefinitionsOfNodeType(currentNodeData.type).subscribe(data => {
this.capabilities.capDefinitionNames = [];
this.capabilities.capDefinitionName = '';
for (const capType of data) {
const qNameOfType = new QName(capType.capabilityType);
this.capabilities.capDefinitionNames.push(qNameOfType.localName);
}
});
const data = this.getCapabilityDefinitionsOfNodeType(currentNodeData.type);
console.debug(currentNodeData);
this.capabilities.capDefinitionNames = [];
this.capabilities.capDefinitionName = '';
for (const capType of data) {
const qNameOfType = new QName(capType.capabilityType);
this.capabilities.capDefinitionNames.push(qNameOfType.localName);
}

} catch (e) {
this.capabilities.capabilities = '';
}
Expand All @@ -471,6 +472,45 @@ export class CanvasComponent implements OnInit, OnDestroy, OnChanges, AfterViewI
}
}

getCapabilityDefinitionsOfNodeType(nodeType: string): CapabilityDefinitionModel[] {
const match = this.entityTypes.unGroupedNodeTypes
.filter(nt => nt.qName === nodeType)
.filter(nt =>
nt.full &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation.length > 0 &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].capabilityDefinitions &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].capabilityDefinitions.capabilityDefinition &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].capabilityDefinitions.capabilityDefinition.length > 0
);

if (match && match.length > 0) {
return match[0].full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].capabilityDefinitions.capabilityDefinition;
}

return [];
}

getRequirementDefinitionsOfNodeType(nodeType: string): RequirementDefinitionModel[] {
const match = this.entityTypes.unGroupedNodeTypes
.filter(nt => nt.qName === nodeType)
.filter(nt =>
nt.full &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation.length > 0 &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].requirementDefinitions &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].requirementDefinitions.requirementDefinition &&
nt.full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].requirementDefinitions.requirementDefinition.length > 0
);

if (match && match.length > 0) {
return match[0].full.serviceTemplateOrNodeTypeOrNodeTypeImplementation[0].requirementDefinitions.requirementDefinition;
}

return [];

}

/**
* This function sets the capability default KV properties
*/
Expand Down Expand Up @@ -1808,15 +1848,16 @@ export class CanvasComponent implements OnInit, OnDestroy, OnChanges, AfterViewI

// if in YAML mode, automatically add all requirement and capability definitions to the node template!
if (this.configuration.isYaml()) {
this.reqCapService.requestRequirementDefinitionsOfNodeType(this.newNode.type).subscribe(data => {
this.newNode.requirements = { requirement: [] };
data.forEach(def => this.newNode.requirements.requirement.push(RequirementModel.fromRequirementDefinition(def)));
});

this.reqCapService.requestCapabilityDefinitionsOfNodeType(this.newNode.type).subscribe(data => {
this.newNode.capabilities = { capability: [] };
data.forEach(def => this.newNode.capabilities.capability.push(CapabilityModel.fromCapabilityDefinitionModel(def)));
});
this.newNode.requirements = { requirement: [] };
this.newNode.capabilities = { capability: [] };
const reqData = this.getRequirementDefinitionsOfNodeType(this.newNode.type);
if (reqData) {
reqData.forEach(reqDef => this.newNode.requirements.requirement.push(RequirementModel.fromRequirementDefinition(reqDef)));
}
const capData = this.getCapabilityDefinitionsOfNodeType(this.newNode.type);
if (capData) {
capData.forEach(capDef => this.newNode.capabilities.capability.push(CapabilityModel.fromCapabilityDefinitionModel(capDef)));
}
}
}

Expand Down
9 changes: 6 additions & 3 deletions org.eclipse.winery.frontends/app/topologymodeler/src/app/models/requirementModel.ts
View file
Expand Up @@ -28,6 +28,9 @@ export class RequirementModel {
public capability?: string;
public node?: string;
public relationship?: string;
public capabilityType?: string;
public relationshipType?: string;
public nodeType?: string;

static fromRequirementDefinition(def: RequirementDefinitionModel): RequirementModel {
const result = new RequirementModel();
Expand All @@ -36,9 +39,9 @@ export class RequirementModel {
result.name = def.name;
result.otherAttributes = def.otherAttributes;
result.type = def.requirementType;
result.capability = def.capability;
result.node = def.node;
result.relationship = def.relationship;
result.capabilityType = def.capability;
result.nodeType = def.node;
result.relationshipType = def.relationship;

return result;
}
Expand Down
10 changes: 6 additions & 4 deletions ...inery.frontends/app/topologymodeler/src/app/node/requirements/requirements.component.html
View file
Expand Up @@ -12,7 +12,7 @@
* SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
-->

<div id="requirementDiv" *ngIf="requirementsExist">
<div id="requirementDiv" *ngIf="requirements?.length">
<winery-toscatype-table
[toscaType]="toscaTypes.RequirementType"
[currentNodeData]="currentNodeData"
Expand All @@ -22,10 +22,12 @@
</winery-toscatype-table>
</div>

<div *ngIf="!requirementsExist" style="color: dimgray; text-align: center">
<div *ngIf="!requirements || requirements.length == 0" style="color: dimgray; text-align: center">
<span>No requirements defined <br> for this Node Template.</span></div>

<div *ngIf="!readonly" (click)="toggleModal($event);" class="btn btn-sm btn-modal" style="display: block;">
Add new Requirement
<div *wineryRepositoryHideOnFeature="'yaml'">
<div *ngIf="!readonly" (click)="toggleModal($event);" class="btn btn-sm btn-modal" style="display: block;">
Add new Requirement
</div>
</div>

3 changes: 2 additions & 1 deletion ....frontends/app/topologymodeler/src/app/node/toscatype-table/toscatype-table.component.css
View file
Expand Up @@ -23,14 +23,15 @@ table {
th {
background-color: #CFD8DC;
color: #000;
text-align: center;
text-align: left;
}

th, td {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #ddd;
padding-left: 2px;
}

tr {
Expand Down
162 changes: 116 additions & 46 deletions ...frontends/app/topologymodeler/src/app/node/toscatype-table/toscatype-table.component.html
View file
Expand Up @@ -70,51 +70,121 @@
</tbody>
</table>

<table *ngIf="toscaType === toscaTypes.CapabilityType || toscaType === toscaTypes.RequirementType"
class="toscatype-table">
<thead>
<tr>
<th *ngIf="toscaType === toscaTypes.CapabilityType" width="25px"></th>
<th>Endpoint</th>
<th>Id</th>
<th>Name</th>
<th *ngIf="toscaType === toscaTypes.RequirementType"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let reqOrCap of currentToscaTypeData">
<td *ngIf="toscaType === toscaTypes.CapabilityType" class="toscatype-table-td">
<button type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
style="font-size: x-small;" id="{{currentNodeData.nodeTemplate.id +'.'+ reqOrCap.id}}">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i> {{""}}
</button>
</td>
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(reqOrCapType)">
<div #reqOrCapType (click)="clickReqOrCapType(reqOrCap.type)">{{ reqOrCap.type | localname }}</div>
<span class="cell-comment">{{ reqOrCap.type | localname }}</span>
</td>
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(reqOrCapName)">
<div #reqOrCapName (click)="showExistingReqOrCapModal($event)">{{ reqOrCap.id }}</div>
<span class="cell-comment">{{ reqOrCap.name }}</span>
</td>
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(reqOrCapRef)">
<div #reqOrCapRef (click)="clickReqOrCapRef(reqOrCap.name)">{{ reqOrCap.name }}</div>
<span class="cell-comment">{{ reqOrCap.name }}</span>
</td>
<td *ngIf="toscaType === toscaTypes.RequirementType" class="toscatype-table-td">
<div (mousedown)="passCurrentType($event);
<div *ngIf="toscaType === toscaTypes.CapabilityType || toscaType === toscaTypes.RequirementType">

<table *wineryRepositoryHideOnFeature="'yaml'"
class="toscatype-table">
<thead>
<tr>
<th *ngIf="toscaType === toscaTypes.CapabilityType" width="25px"></th>
<th>Endpoint</th>
<th>Id</th>
<th>Name</th>
<th *ngIf="toscaType === toscaTypes.RequirementType"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let reqOrCap of currentToscaTypeData">
<td *ngIf="toscaType === toscaTypes.CapabilityType" class="toscatype-table-td">
<button type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
style="font-size: x-small;" id="{{currentNodeData.nodeTemplate.id +'.'+ reqOrCap.id}}">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i> {{""}}
</button>
</td>
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(reqOrCapType)">
<div #reqOrCapType (click)="clickReqOrCapType(reqOrCap.type)">{{ reqOrCap.type | localname }}</div>
<span class="cell-comment">{{ reqOrCap.type | localname }}</span>
</td>
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(reqOrCapName)">
<div #reqOrCapName (click)="showExistingReqOrCapModal($event)">{{ reqOrCap.id }}</div>
<span class="cell-comment">{{ reqOrCap.name }}</span>
</td>
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(reqOrCapRef)">
<div #reqOrCapRef (click)="clickReqOrCapRef(reqOrCap.name)">{{ reqOrCap.name }}</div>
<span class="cell-comment">{{ reqOrCap.name }}</span>
</td>
<td *ngIf="toscaType === toscaTypes.RequirementType" class="toscatype-table-td">
<div (mousedown)="passCurrentType($event);
reqCapRelationshipService.createSourceInfo(this.currentNodeData, reqOrCap);">
<div class="btn-group-vertical center-block" role="group" id={{dragSource}}>
<button *ngFor="let rel of entityTypes.relationshipTypes"
type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
style="font-size: xx-small;">{{rel.id}}
</button>
<div class="btn-group-vertical center-block" role="group" id={{dragSource}}>
<button *ngFor="let rel of entityTypes.relationshipTypes"
type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
style="font-size: xx-small;">{{rel.id}}
</button>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<div *wineryRepositoryShowOnFeature="'yaml'">
<table *ngIf="toscaType === toscaTypes.RequirementType"
class="toscatype-table">
<thead>
<tr>
<th>Name</th>
<th>Fulfilled by Relationship</th>
<th *ngIf="toscaType === toscaTypes.RequirementType">Possible Relationships</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let req of currentToscaTypeData">
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(reqRef)">
<div #reqRef (click)="clickYamlReqRef()">{{ req.name }}</div>
</td>
<td class="toscatype-table-td" *ngIf="req.relationship"> {{req.relationship}}</td>
<td class="toscatype-table-td" *ngIf="!req.relationship"> N/A</td>
<td *ngIf="toscaType === toscaTypes.RequirementType" class="toscatype-table-td">
<div (mousedown)="passCurrentType($event);
reqCapRelationshipService.createSourceInfo(this.currentNodeData, req);">
<div class="btn-group-vertical center-block" role="group" id={{dragSource}}>
<button *ngFor="let rel of entityTypes.relationshipTypes"
type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
style="font-size: xx-small;">{{rel.id}}
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>

<table *ngIf="toscaType === toscaTypes.CapabilityType"
class="toscatype-table">
<thead>
<tr>
<th *ngIf="toscaType === toscaTypes.CapabilityType" width="25px"></th>
<th>Name</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>

<tr *ngFor="let cap of currentToscaTypeData">
<td class="toscatype-table-td">
<button type="button" class="reqCap-button btn btn-sm btn-outline-secondary btn-block"
style="font-size: x-small;" id="{{currentNodeData.nodeTemplate.id +'.'+ cap.id}}">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i> {{''}}
</button>
</td>
<td class="toscatype-table-td">
<div (click)="clickYamlCapRef()">{{ cap.name }}</div>
</td>
<td class="toscatype-table-td"
[class.cell-with-comment]="isEllipsisActive(capType)">
<div #capType (click)="clickReqOrCapType(cap.type)">{{ cap.type | localname }}</div>
<span class="cell-comment">{{ cap.type }}</span>
</td>
<td class="toscatype-table-td"> Action </td>
</tr>
</tbody>
</table>
</div>
</div>

0 comments on commit 92a3ca2

Please sign in to comment.