deploy: '/controllerblueprint/deploy-blueprint',
getMetaDate: '/controllerblueprint/meta-data/',
countOfAllBluePrints: '/controllerblueprint/list/count',
- getMetaDatePageable: '/controllerblueprint/metadata/paged'
+ getMetaDatePageable: '/controllerblueprint/metadata/paged',
+ getBlueprintByName: '/controllerblueprint/by-name/'
};
export const ResourceDictionaryURLs = {
export class PackagesDashboardState {
page: BluePrintPage;
+ filteredPackages: BluePrintPage;
command: string;
currentPage = 0;
totalPackages: number;
-<div class="center">
- <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
- (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
- gi<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
- Optional custom content that replaces the the entire default content.
- <button type="button" (click)="openFileSelector()">Browse Files</button>
- </ng-template>
- </ngx-file-drop>
- <div class="upload-table">
- <table class="table">
- <thead>
- <tr>
- <th>Name</th>
- </tr>
- </thead>
- <tbody class="upload-name-style">
- <tr *ngFor="let item of files; let i=index">
- <td><strong>{{ item.relativePath }}</strong></td>
- </tr>
- </tbody>
- </table>
+
+<div class="import-container-all">
+ <div class="import-container">
+ <div class="import-container-input">
+ <input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched">
+ <a class="enter-link" href="#"><i class="icon-enter"></i></a>
+ </div>
+ <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></span>
+
+ </div>
+
+ <div class="accordion">
+ <div class="card creat-card">
+ <div class="single-line">
+ <label class="label-name">File</label>
+ </div>
+ </div>
+ <div id="accordion">
+ <div class="card">
+ <div class="card-header" id="headingOne">
+ <h5 class="mb-0 d-flex justify-content-between">
+ <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ <i class="icon-file-code"></i> Definitions/data_types.json
+ </button>
+ <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
+ </h5>
+ </div>
+
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header" id="headingTwo">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+ <i class="icon-file-code"></i> Definitions/relationship_types.json
+ </button>
+ </h5>
+ </div>
+ <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header" id="headingThree">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+ <i class="icon-file-code"></i> Definitions/artifact_types.json
+ </button>
+ </h5>
+ </div>
+ <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</div>
+
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
+ (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+ <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+ <div class="folder-upload">
+ <img src="assets/img/folder-upload.svg"/>
+ </div>
+ <div class="folder-upload-text">
+ Drag & Drop file
+ </div>
+ <div class="folder-upload-text">or
+ <button type="button" class="btn btn-sm btn-primary" (click)="openFileSelector()">Browse Files</button>
+ </div>
+ <div class="folder-upload-type">Allowed file type: json</div>
+ </ng-template>
+ </ngx-file-drop>
+ <div class="upload-table" *ngFor="let item of files; let i=index">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Name : {{ item.relativePath }}</th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-sm btn-primary">Import</button>
+ </div>
+ </div>
</div>
</div>
+
+
-import {JsonObject, JsonProperty} from 'json2typescript';
+import {Any, JsonObject, JsonProperty} from 'json2typescript';
+
@JsonObject
export class VlbDefinition {
// topology_template: TopologyTemplate;
}
+@JsonObject('metadata')
export class Metadata {
@JsonProperty('template_author')
- templateAuthor: string;
+ // tslint:disable-next-line:variable-name
+ template_author: string;
'author-email': string;
'user-groups': string;
@JsonProperty('template_name')
- templateName: string;
+ // tslint:disable-next-line:variable-name
+ template_name: string;
@JsonProperty('template_version')
- templateVersion: string;
+ // tslint:disable-next-line:variable-name
+ template_version: string;
@JsonProperty('template_tag')
- templateTags: string;
+ // tslint:disable-next-line:variable-name
+ template_tags: string;
+
+ @JsonProperty('dictionary_group')
+ // tslint:disable-next-line:variable-name
+ dictionary_group: string;
+
+
+ /* @JsonProperty('custom_keys', {String}, false)
+ mapOfCustomKeys: Map<string, string> = new Map<string, string>();*/
}
export class Import {
'CSAR-Version: 1.0\n' +
'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' +
'Entry-Definitions:' + metaDataTab.entryFileName + '\n' +
- 'Template-Name:' + metaDataTab.templateName + '\n' +
- 'Template-Version: 1.0.0\n' +
- 'Template-Type: DEFAULT\n' +
+ 'Template-Name:' + metaDataTab.name + '\n' +
+ 'Template-Version:' + metaDataTab.version + '\n' +
+ 'Template-Type: ' + metaDataTab.mode + '\n' +
'Template-Tags:' + metaDataTab.tags;
}
</div>
<nav class="row">
<div class="col pr-0">
- <button class="float btn btn-sm btn-primary">Save</button>
+ <button class="float btn btn-sm btn-primary" (click)="saveMetaData()">Save</button>
<button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
</div>
</nav>
<label class="label-name">Mode</label>
<label name="trst" *ngFor="let mode of modes; let i = index">
<input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
- name="exampleRadios" id="exampleRadios1" value={{mode}}>
+ name="exampleRadios" id="exampleRadios1" value={{mode.name}}>
<span>
- <i [className]="mode.style" aria-hidden="true"></i>
- <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> -->
+ <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
{{mode.name}}
</span>
</label>
</div>
- <!-- <div class="single-line">
- <label class="label-name">Dictionary Library Instances</label>
- <div class="label-input">
- <select name="cars">
- <option class="select-placeholder">Select library</option>
- <option value="audi"
- *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
- </select>
- </div>
- </div>-->
</div>
<div class="card creat-card">
<div class="single-line">
<label class="label-name">Name</label>
<div class="label-input">
- <input type="input" (input)="searchPackages($event)"
+ <input type="input"
[(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
</div>
</div>
<div class="single-line">
<label class="label-name">Description</label>
<div class="label-input">
- <input type="input" placeholder="Descripe the package">
+ <input type="input" [(ngModel)]="metaDataTab.description"
+ placeholder="Descripe the package">
</div>
</div>
<hr/>
<div class="single-line">
<label class="label-name">Version</label>
<div class="label-input">
- <input type="input" placeholder="Example: 1.0.0">
+ <input type="input" [(ngModel)]="metaDataTab.version"
+ (input)="validatePackageNameAndVersion()"
+ placeholder="Example: 1.0.0">
</div>
+ <div><label style="color: red">{{errorMessage}}</label></div>
</div>
<hr/>
<div class="single-line">
<label class="label-name">tags</label>
<div class="label-input">
- <input type="input" placeholder="Ex., vDNS-CDS">
+ <input type="input" [(ngModel)]="metaDataTab.tags"
+ placeholder="Ex., vDNS-CDS">
</div>
</div>
</div>
<div class="card creat-card">
<div class="single-line">
<h5 class="label-name">
- Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a>
+ Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
</h5>
</div>
<div class="single-line">
<label class="label-name">Name</label>
<div class="label-input">
- <input type="input" placeholder="Enter Name">
+ <input name="key" type="input" placeholder="Enter Name">
</div>
</div>
<hr/>
<div class="single-line">
<label class="label-name">Value</label>
<div class="label-input">
- <input type="input" placeholder="Enter Value">
+ <input name="value" type="input"
+ placeholder="Enter Value">
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-imports" role="tabpanel"
aria-labelledby="nav-imports-tab">
- <div class="import-container-all">
- <div class="import-container">
- <div class="import-container-input">
- <input placeholder="Enter file URL" type="input"
- class="ng-pristine ng-valid ng-touched">
- <a class="enter-link" href="#"><i class="icon-enter"></i></a>
- </div>
- <span class="import-container-span">Or you can also <a href="#"
- data-toggle="modal"
- data-target="#exampleModal">Import File</a></span>
-
- </div>
-
- <div class="accordion">
- <div class="card creat-card">
- <div class="single-line">
- <label class="label-name">File</label>
- </div>
- </div>
- <div id="accordion">
- <div class="card">
- <div class="card-header" id="headingOne">
- <h5 class="mb-0 d-flex justify-content-between">
- <button class="btn btn-link" data-toggle="collapse"
- data-target="#collapseOne" aria-expanded="true"
- aria-controls="collapseOne">
- <i class="icon-file-code"></i> Definitions/data_types.json
- </button>
- <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
- </h5>
- </div>
-
- <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
- data-parent="#accordion">
- <div class="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life
- accusamus terry richardson ad squid. 3 wolf moon officia aute,
- non cupidatat skateboard dolor brunch. Food truck quinoa
- nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
- put a bird on it squid single-origin coffee nulla assumenda
- shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
- wes anderson cred nesciunt sapiente ea proident. Ad vegan
- excepteur butcher vice lomo. Leggings occaecat craft beer
- farm-to-table, raw denim aesthetic synth nesciunt you probably
- haven't heard of them accusamus labore sustainable VHS.
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header" id="headingTwo">
- <h5 class="mb-0">
- <button class="btn btn-link collapsed" data-toggle="collapse"
- data-target="#collapseTwo" aria-expanded="false"
- aria-controls="collapseTwo">
- Definitions/relationship_types.json
- </button>
- </h5>
- </div>
- <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
- data-parent="#accordion">
- <div class="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life
- accusamus terry richardson ad squid. 3 wolf moon officia aute,
- non cupidatat skateboard dolor brunch. Food truck quinoa
- nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
- put a bird on it squid single-origin coffee nulla assumenda
- shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
- wes anderson cred nesciunt sapiente ea proident. Ad vegan
- excepteur butcher vice lomo. Leggings occaecat craft beer
- farm-to-table, raw denim aesthetic synth nesciunt you probably
- haven't heard of them accusamus labore sustainable VHS.
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header" id="headingThree">
- <h5 class="mb-0">
- <button class="btn btn-link collapsed" data-toggle="collapse"
- data-target="#collapseThree" aria-expanded="false"
- aria-controls="collapseThree">
- Definitions/artifact_types.json
- </button>
- </h5>
- </div>
- <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
- data-parent="#accordion">
- <div class="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life
- accusamus terry richardson ad squid. 3 wolf moon officia aute,
- non cupidatat skateboard dolor brunch. Food truck quinoa
- nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
- put a bird on it squid single-origin coffee nulla assumenda
- shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
- wes anderson cred nesciunt sapiente ea proident. Ad vegan
- excepteur butcher vice lomo. Leggings occaecat craft beer
- farm-to-table, raw denim aesthetic synth nesciunt you probably
- haven't heard of them accusamus labore sustainable VHS.
- </div>
- </div>
- </div>
- </div>
- </div>
+ <app-imports-tab></app-imports-tab>
- </div>
</div>
<div class="tab-pane fade" id="nav-authentication" role="tabpanel"
aria-labelledby="nav-authentication-tab">...
</div>
</div>
</div>
-
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
- aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div class="modal-body">
- ...
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary">Import</button>
- </div>
- </div>
- </div>
-</div>
import {JsonPipe} from '@angular/common';
import {PackageCreationService} from './package-creation.service';
import {PackageCreationUtils} from './package-creation.utils';
+import List = _.List;
+import {Router} from '@angular/router';
@Component({
selector: 'app-package-creation',
styleUrls: ['./package-creation.component.css']
})
export class PackageCreationComponent implements OnInit {
-
+ counter = 0;
modes: object[] = [
{name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
{name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
+ customKeysAndValues: Map<string, string> = new Map<string, string>();
dictionaryLibraryInstances: string[] = ['x', 'y'];
private container: HTMLElement;
private folder: FolderNodeElement = new FolderNodeElement();
private zipFile: JSZip = new JSZip();
private filesData: any = [];
+ private errorMessage: string;
+ private keys: NodeListOf<HTMLElement>;
+ private values: NodeListOf<HTMLElement>;
- constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils) {
+ constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils,
+ private router: Router) {
}
ngOnInit() {
+ // this.customKeysAndValues.set('Dictionary Library Instances', ' ');
+ this.keys = document.getElementsByName('key');
+ this.values = document.getElementsByName('value');
}
createAnotherCustomKeyDiv() {
- console.log(this.metaDataTab);
this.newElement = document.getElementById('target');
+ const id = this.newElement.getAttribute('id');
+ this.newElement.setAttribute('id', 'target' + this.counter++);
const copiedElement = this.newElement.cloneNode(true);
- /* this.newElement.setAttribute('class', 'alert-dark');*/
this.container = document.getElementById('container');
this.container.appendChild(copiedElement);
this.elements = this.container.children;
+ this.newElement.setAttribute('id', id);
+ this.clearCopiedElement();
+
+ // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version));
/*this.metaDataTab = new MetaDataTab();
this.metaDataTab.name = 'klfdj';
this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/
}
- validatePacakgeName() {
-
+ private clearCopiedElement() {
+ const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement;
+ const inputElements = newCopiedElement.getElementsByTagName('input');
+ for (let i = 0; i < inputElements.length; i++) {
+ const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement;
+ element.value = '';
+ }
}
- getDictionaryLibraryInstances() {
+
+ validatePackageNameAndVersion() {
+ if (this.metaDataTab.name && this.metaDataTab.version) {
+ this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
+ if (element) {
+ this.errorMessage = 'the package with name and version is exists';
+ } else {
+ this.errorMessage = ' ';
+ }
+ });
+ }
}
- saveMetaData() {
+ getDictionaryLibraryInstances() {
}
- private saveToFileSystem(response) {
-
- const filename = 'TOSCA.meta';
- FilesContent.putData(filename, response);
-
- const filenameEntry = 'vLB_CDS.json';
- const vlbDefinition: VlbDefinition = new VlbDefinition();
- const metadata: Metadata = new Metadata();
+ saveMetaData() {
+ for (let i = 0; i < this.values.length; i++) {
+ const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement;
+ const inputKey: string = inputKeyElement.value;
+ const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement;
+ const inputValue: string = inputValueElement.value;
+ this.customKeysAndValues.set(inputKey, inputValue);
+ }
- metadata.templateAuthor = ' lldkslds';
- metadata.templateName = ' lldkslds';
- metadata.templateTags = ' lldkslds';
- metadata.templateVersion = ' lldkslds';
- metadata['author-email'] = ' lldkslds';
- metadata['user-groups'] = ' lldkslds';
- vlbDefinition.metadata = metadata;
+ this.metaDataTab.mapOfCustomKey = this.customKeysAndValues;
+ this.setModeType(this.metaDataTab);
+ this.setEntryPoint(this.metaDataTab);
- vlbDefinition.imports = [{
- file: 'Definitions/data_types.json'
- }];
+ this.addToscaMetaDataFile(this.metaDataTab);
- const value = this.packageCreationUtils.transformToJson(vlbDefinition);
- FilesContent.putData(filenameEntry, value);
+ const vlbDefinition: VlbDefinition = new VlbDefinition();
+ this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
this.filesData.push(this.folder.TREE_DATA);
this.saveToBackend();
+ this.packageCreationService.refreshPackages();
+ this.router.navigate(['/packages']);
+
}
+ addToscaMetaDataFile(metaDataTab: MetaDataTab) {
+ const filename = 'TOSCA.meta';
+ FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab));
+ }
+
+ private setModeType(metaDataTab: MetaDataTab) {
+ if (metaDataTab.mode.startsWith('Scripting')) {
+ metaDataTab.mode = 'KOTLIN_SCRIPT';
+ } else if (metaDataTab.mode.startsWith('Designer')) {
+ metaDataTab.mode = 'DEFAULT';
+ } else {
+ metaDataTab.mode = 'GENERIC_SCRIPT';
+ }
+ }
saveToBackend() {
this.create();
this.zipFile.generateAsync({type: 'blob'})
.then(blob => {
- const formData = new FormData();
- formData.append('file', blob);
- this.packageCreationService.saveBlueprint(formData)
- .subscribe(
- data => {
- console.log('Success:' + JSON.stringify(data));
- }, error => {
- console.log('Error -' + error.message);
- });
+ this.saveBluePrint(blob);
});
}
+ private saveBluePrint(blob) {
+ const formData = new FormData();
+ formData.append('file', blob);
+ this.packageCreationService.saveBlueprint(formData)
+ .subscribe(
+ data => {
+ console.log('Success:' + JSON.stringify(data));
+ }, error => {
+ console.log('Error -' + error.message);
+ });
+ }
+
create() {
this.folder.TREE_DATA.forEach((path) => {
this.zipFile.folder(name);
path.children.forEach(children => {
const name2 = children.name;
- console.log(FilesContent.getMapOfFilesNamesAndContent());
- console.log(name2);
if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) {
this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2));
} else {
}
- searchPackages($event: Event) {
- /* const searchQuery = event.target.value;
- searchQuery = searchQuery.trim();
- this.packagesStore.search(searchQuery);*/
- }
-
deleteCustomKey(event) {
this.container = document.getElementById('container');
const element = event.parentElement.parentElement.parentElement;
this.container.removeChild(element);
- console.log('removed');
+ }
+
+
+ private setEntryPoint(metaDataTab: MetaDataTab) {
+ if (metaDataTab.mode.startsWith('DEFAULT')) {
+ metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
+ } else {
+ metaDataTab.entryFileName = '';
+ }
+
+
+ }
+
+ private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) {
+
+ const metadata: Metadata = new Metadata();
+ metadata.template_author = 'Shaaban';
+ metadata.template_name = metaDataTab.templateName;
+ metadata.template_tags = metaDataTab.tags;
+
+ metadata.dictionary_group = 'default';
+ metadata.template_version = metaDataTab.version;
+ metadata['author-email'] = 'shaaban.altanany.ext@orange.com';
+ metadata['user-groups'] = 'ADMIN';
+ // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey;
+ vlbDefinition.tosca_definitions_version = metaDataTab.version;
+ vlbDefinition.metadata = metadata;
+
+ // console.log(vlbDefinition.metadata.mapOfCustomKeys);
+ const value = this.packageCreationUtils.transformToJson(vlbDefinition);
+ console.log(value);
+ FilesContent.putData('vLB_CDS.json', value);
}
}
import {Observable} from 'rxjs';
import {ApiService} from '../../../../common/core/services/api.service';
import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {PackagesApiService} from '../packages-api.service';
+import {PackagesStore} from '../packages.store';
@Injectable({
providedIn: 'root'
export class PackageCreationService {
- constructor(private api: ApiService) {
+ constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) {
}
saveBlueprint(body: any | null, options?: any): Observable<any> {
return this.api.post(BlueprintURLs.save, body, {responseType: 'text'});
}
+
+ async checkBluePrintNameAndVersion(name: string, version: string): Promise<boolean> {
+ return await this.packagesListService.checkBluePrintIfItExists(name, version)
+ .then(bluePrintModelsResult => bluePrintModelsResult != null && bluePrintModelsResult.length > 0);
+ }
+
+ refreshPackages() {
+ this.packagesStore.getAll();
+ }
}
import {JsonPipe} from '@angular/common';
import {Injectable} from '@angular/core';
+import {JsonConvert} from 'json2typescript';
@Injectable({
}
public transformToJson(object: any): string {
+
return this.pipe.transform(object);
}
});
}
- checkBluePrintIfItExists(keyword: string) {// : Observable<any> {
- // return this.api.get(BlueprintURLs.get + '/' + keyword);
+ async checkBluePrintIfItExists(name: string, version: string): Promise<BluePrintPage[]> {
+ return await this.api.get(BlueprintURLs.getBlueprintByName + '/' + name + '/version/' + version).toPromise();
}
getCountOfAllPackages(observable: Observable<number>) {
<div class="dropdown packagesFilter w-100">
<input class="dropdown-toggle" type="text">
- <div class="dropdown-text">ALL PACKAGES TAGS</div>
+ <div class="dropdown-text">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div>
<ul class="dropdown-content w-100">
<li>
<div class="form-group">
searchTag = '';
viewedPackages: BlueprintModel[] = [];
private checkBoxTages = '';
-
+ currentPage = 0;
constructor(private packagesStore: PackagesStore,
) {
console.log(state);
if (state.page) {
this.viewedPackages = state.page.content;
+ this.tags = [];
+ if (state.currentPage !== this.currentPage) {
+ this.checkBoxTages = '';
+ this.currentPage = state.currentPage;
+ }
this.viewedPackages.forEach(element => {
element.tags.split(',').forEach(tag => {
this.tags.push(tag.trim());
});
+ this.tags.push('All');
this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index);
this.assignTags();
-
});
}
});
}
reloadPackages(event: any) {
-
if (!event.target.checked) {
this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '')
.replace(event.target.id, '');
} else {
this.checkBoxTages += event.target.id.trim() + ',';
}
- console.log(this.checkBoxTages);
- if (!this.checkBoxTages.includes(',')) {
- return;
- }
- this.viewedPackages = [];
- // this.packagesStore.getPagesFilterByTags(this.checkBoxTages);
- // this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+ const tagsSelected = this.checkBoxTages.split(',').filter(item => {
+ if (item) {
+ return true;
+ }
+ }).map((item) => {
+ return item.trim();
+ });
+ this.packagesStore.filterByTags(tagsSelected);
}
</div>
<div class="card-footer row">
<div class="col">
- <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+ <a href="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create Package
</a>
</div>
<div class="col">
import { PackagesStore } from '../../packages.store';
import { getBluePrintPageMock } from '../../blueprint.page.mock';
import { of } from 'rxjs';
+import {PackagesDashboardState} from '../../model/packages-dashboard.state';
describe('PackageListComponent', () => {
let component: PackageListComponent;
beforeEach(async(() => {
- store = { state$: of(getBluePrintPageMock()) };
+ const dashBoard = new PackagesDashboardState();
+ dashBoard.page = getBluePrintPageMock();
+ store = { state$: of(dashBoard) };
TestBed.configureTestingModule({
declarations: [ PackageListComponent ],
console.log('PackageListComponent');
this.packagesStore.state$.subscribe(state => {
console.log(state);
- if (state.page) {
- this.viewedPackages = state.page.content;
+ if (state.filteredPackages) {
+ this.viewedPackages = state.filteredPackages.content;
}
});
}
</app-header>
<div class="new-wrapper">
<div class="container-fluid main-container">
-
+ <app-packages-header></app-packages-header>
<div class="container-fluid body-container">
<nav class="row">
<!--Nav Tabs-->
<div class="col-5 pl-2">
<app-filter-by-tags class="w-100"></app-filter-by-tags>
</div>
-
+
</div>
</div>
</nav>
- <div class="row mt-4">
- <div class="col">
- <div class="tab-content" id="nav-tabContent">
- <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
- <div class="row">
- <div class="col sort-packages">
-
- </div>
- <app-package-pagination></app-package-pagination>
-
- </div>
- <app-packages-list></app-packages-list>
-
- </div>
- <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
- <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
- <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
- </div>
- </div>
- </div>
- </div>
+ <app-sort-packages></app-sort-packages>
</div>
</div>
</div>
import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
import {DesignerComponent} from './designer/designer.component';
import {PackageCreationComponent} from './package-creation/package-creation.component';
+import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
const routes: Routes = [
component: PackagesDashboardComponent
},
{path: 'designer', component: DesignerComponent},
+ {path: 'package/:id', component: ConfigurationDashboardComponent},
{path: 'createPackage', component: PackageCreationComponent},
];
import {Store} from '../../../common/core/stores/Store';
import {PackagesApiService} from './packages-api.service';
import {PackagesDashboardState} from './model/packages-dashboard.state';
-
+import {Observable, of} from 'rxjs';
@Injectable({
providedIn: 'root'
export class PackagesStore extends Store<PackagesDashboardState> {
// TDOD fixed for now as there is no requirement to change it from UI
public pageSize = 5;
+ private bluePrintContent: BluePrintPage = new BluePrintPage();
constructor(private packagesServiceList: PackagesApiService) {
super(new PackagesDashboardState());
}
}
+ public filterByTags(tags: string[]) {
+ console.log(this.state.currentPage);
+ this.getPagedPackagesByTags(this.state.command, this.state.currentPage,
+ this.pageSize, this.state.sortBy, tags);
+
+ }
+
public getPage(pageNumber: number, pageSize: number) {
if (this.isCommandExist()) {
this.searchPagedPackages(this.state.command, pageNumber, pageSize);
this.setState({
...this.state,
page: pages[0],
+ filteredPackages: pages[0],
command: '',
totalPackages: pages[0].totalElements,
currentPage: pageNumber,
// this param is set only in get all as it represents the total number of pacakges in the server
totalPackagesWithoutSearchorFilters: pages[0].totalElements,
+ tags: [],
sortBy
});
});
this.setState({
...this.state,
page: pages[0],
+ filteredPackages: pages[0],
command: keyWord,
totalPackages: pages[0].totalElements,
currentPage: pageNumber,
+ tags: [],
sortBy
});
});
private isCommandExist() {
return this.state.command;
}
+
+ private getPagedPackagesByTags(keyWord: string, currentPage1: number, pageSize: number, sortBy1: string, tagsSearchable: string[]) {
+ this.getPagedPackagesByKeyWordFilteredByTags(tagsSearchable)
+ .subscribe((pages: BluePrintPage) => {
+ this.setState({
+ ...this.state,
+ page: this.state.page,
+ filteredPackages: pages,
+ command: keyWord,
+ tags: tagsSearchable,
+ // totalPackages: pages.totalElements,
+ currentPage: currentPage1,
+ sortBy: sortBy1,
+ totalPackages: this.state.page.totalElements,
+ });
+ });
+ }
+
+ private getPagedPackagesByKeyWordFilteredByTags(tagsSearchable: string[]): Observable<any> {
+ this.bluePrintContent.content = [];
+ if (tagsSearchable && tagsSearchable.length !== 0 && !tagsSearchable.includes('All')) {
+ tagsSearchable.forEach(tag => {
+ if (tag) {
+ this.state.page.content.forEach(bluePrintModel => {
+ if (tag.endsWith(',')) {
+ tag = tag.replace(',', '');
+ }
+ bluePrintModel.tags.split(',').forEach(bluePrintModelTag => {
+ if (bluePrintModelTag === tag) {
+ this.bluePrintContent.content.push(bluePrintModel);
+ }
+ });
+ });
+ } else {
+ this.getPagedPackages(this.state.currentPage, this.pageSize);
+ return of(this.state.page);
+ }
+ });
+ this.bluePrintContent.content = this.bluePrintContent.content.filter((value, index, self) => self.indexOf(value) === index);
+ console.log('the lenght is ' + this.bluePrintContent.content.length);
+ return of(this.bluePrintContent);
+ } else {
+ this.getPagedPackages(this.state.currentPage, this.pageSize);
+ return of(this.state.page);
+ }
+ }
+
+
}
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+ <title>icon</title>
+ <desc>Created with Sketch.</desc>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="3.2-Import---Upload" transform="translate(-676.000000, -411.000000)" fill="#1273EB" fill-rule="nonzero">
+ <g id="modal-new" transform="translate(380.000000, 295.000000)">
+ <g id="upload" transform="translate(30.000000, 86.000000)">
+ <g id="icon" transform="translate(266.000000, 30.000000)">
+ <path d="M76.1081081,41.8594595 L76.1081081,19.027027 C76.1004221,17.1729378 74.928946,15.5234994 73.1808732,14.9054802 L73.1808732,10.2453222 C73.1808732,7.82032143 71.2150216,5.85446985 68.7900208,5.85446985 L27.8087318,5.85446985 C27.0003982,5.85446985 26.3451143,5.199186 26.3451143,4.39085239 C26.3451143,1.96585158 24.3792628,0 21.954262,0 L4.39085239,0 C1.96585158,0 0,1.96585158 0,4.39085239 L0,60.008316 C0,62.4333168 1.96585158,64.3991684 4.39085239,64.3991684 L38.1286985,64.3991684 C38.8107319,76.1598631 47.6519103,85.8279505 59.3049335,87.5560014 C70.9579566,89.2840522 82.2243598,82.5977596 86.2900241,71.5411108 C90.3556884,60.484462 86.1046903,48.092232 76.1081081,41.8594595 Z M2.92723493,60.008316 L2.92723493,4.39085239 C2.92723493,3.58251879 3.58251879,2.92723493 4.39085239,2.92723493 L21.954262,2.92723493 C22.7625956,2.92723493 23.4178794,3.58251879 23.4178794,4.39085239 C23.4178794,6.81585321 25.383731,8.78170478 27.8087318,8.78170478 L68.7900208,8.78170478 C69.5983544,8.78170478 70.2536383,9.43698864 70.2536383,10.2453222 L70.2536383,14.6361746 L16.0997921,14.6361746 C12.0601301,14.6410135 8.78654367,17.9146 8.78170478,21.954262 L8.78170478,57.0810811 C8.78708623,58.6697929 9.3147445,60.2126533 10.2833763,61.4719335 L4.39085239,61.4719335 C3.58251879,61.4719335 2.92723493,60.8166496 2.92723493,60.008316 Z M11.7089397,57.0810811 L11.7089397,21.954262 C11.7089397,19.5292611 13.6747913,17.5634096 16.0997921,17.5634096 L71.7172557,17.5634096 C72.5255893,17.5634096 73.1808732,18.2186934 73.1808732,19.027027 L73.1808732,40.2875343 C65.7265206,36.8900031 57.0753868,37.3922287 50.0642601,41.6295266 C43.0531335,45.8668245 38.5863831,53.2926233 38.1286985,61.4719335 L16.0997921,61.4719335 C13.6747913,61.4719335 11.7089397,59.5060819 11.7089397,57.0810811 Z M62.9355509,84.8898129 C50.8105469,84.8898129 40.981289,75.060555 40.981289,62.9355509 C40.981289,50.8105469 50.8105469,40.981289 62.9355509,40.981289 C75.060555,40.981289 84.8898129,50.8105469 84.8898129,62.9355509 C84.876101,75.0548708 75.0548708,84.876101 62.9355509,84.8898129 Z" id="Shape"></path>
+ <path d="M69.7833333,61.4115756 C69.1416667,58.3450161 66.3916667,56 63,56 C60.3416667,56 58.05,57.4430868 56.95,59.607717 C54.1083333,59.9684887 52,62.2233119 52,65.0192926 C52,67.9956592 54.475,70.4308682 57.5,70.4308682 L69.4166667,70.4308682 C71.9833333,70.4308682 74,68.4466238 74,65.9212219 C74,63.5762058 72.075,61.5919614 69.7833333,61.4115756 Z M64.8333333,64.1173633 L64.8333333,67.7250804 L61.1666667,67.7250804 L61.1666667,64.1173633 L58.4166667,64.1173633 L63,59.607717 L67.5833333,64.1173633 L64.8333333,64.1173633 Z" id="Shape"></path>
+ <path d="M16.0997921,20.4906445 C15.2914585,20.4906445 14.6361746,21.1459283 14.6361746,21.954262 L14.6361746,27.8087318 L17.5634096,27.8087318 L17.5634096,23.4178794 L21.954262,23.4178794 L21.954262,20.4906445 L16.0997921,20.4906445 Z" id="Path"></path>
+ <rect id="Rectangle" x="14.6361746" y="30.7359667" width="2.92723493" height="2.92723493"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
/* background-image: linear-gradient(-45deg, #000 10%, #fff 0);
background-size: 6px 6px; */
margin: 0;
- font-family: 'Nunito' !important;
+ /* font-family: 'Nunito' !important; */
+ font-family: Arial, Helvetica, sans-serif !important;
color: #1B3E6F !important;
}
*:focus{
.btn{
padding-right: 20px !important;
padding-left: 20px !important;
- border-radius: 15px !important;
+
+}
+.btn.border-radius{
+ border-radius: 20px !important;
}
.btn-primary{
background-color: #1273EB !important;
display: inline-block;
margin-top: 5px;
}
+.btn-link:hover, .btn-link:focus{
+ text-decoration: none !important;
+}
+.btn-link::before{
+ content: "\f107";
+ font-family:'FontAwesome';
+ position: relative;
+ margin-right: 20px;
+}
+.btn-link.collapsed::before{
+ content: "\f105";
+ font-family:'FontAwesome';
+ position: relative;
+ margin-right: 30px;
+}
+.btn-link i{
+ margin-right: 10px;
+}
+.ngx-file-drop__content{
+ background: #F4F9FE;
+ padding: 20px;
+ height: auto !important;
+ display: inline-block !important;
+ width: 100%;
+}
+.ngx-file-drop__drop-zone{
+ border: 2px dotted #F4F9FE !important;
+ border-radius: 0px !important;
+ height: auto !important;
+}
+.folder-upload{
+ width: 100%;
+ display: inline-block;
+ text-align: center;
+}
+.folder-upload-text{
+ margin-top: 10px;
+ width: 100%;
+ display: inline-block;
+ text-align: center;
+ color:#242424 ;
+ font-size: 12px;
+}
+.folder-upload-text button{
+ margin-left: 10px;
+ font-size: 12px;
+}
+.folder-upload-type{
+ color:#A4B2C6 ;
+ font-size: 10px;
+ width: 100%;
+ display: inline-block;
+ text-align: center;
+}
+.upload-table .table thead th{
+ border-top: 0px !important;
+ border-bottom: 0px !important;
+}
+.upload-table .table{
+ margin-bottom: 0px !important;
+}
+.nav-tabs .nav-link{
+ position: relative;
+}
+.nav-tabs .nav-link.tab-done::after{
+ content: "\f058";
+ position: absolute;
+ font-family: 'FontAwesome';
+ left: 3px;
+ font-size: 16px;
+ top: 11px;
+ color: #66BB00;
+}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
.page-title{
Code Review / ccsdk / cds.git / commitdiff
