diff options
Diffstat (limited to 'vid-webpack-master/src/app/browseSdc')
10 files changed, 472 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/browseSdc/browseSdc.component.html b/vid-webpack-master/src/app/browseSdc/browseSdc.component.html new file mode 100644 index 000000000..7ffd7931c --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/browseSdc.component.html @@ -0,0 +1,26 @@ +<div> + + <span class="statusLine" [hidden]="!isSpinnerVisible"> + <img src="./img/spinner.gif"/> + </span> + <span class="statusLine" [hidden]="!isProgressVisible"> + <label>Status:</label><span class="status"><span [hidden]="!error"><font color='red'><b>Error: </b></font></span>{{status}}</span> + </span> + <br><br> + <div> + <input class="form-control search-query" placeholder="Filter..." data-tests-id="browseFilter" type="text" [(ngModel)]="filterQuery" size="20" style="width: 250px;"> + </div> + + <h1 class="heading1" style="margin-top:20px;">Browse SDC Service Models</h1> + <div style="margin-top:30px"> + <button (click)="deploy()">deploy</button> + <vid-table + [options]="tableOptions" + [filterQuery]="filterQuery" + (clickEvent)="clickAction($event)"> + Loading table... + </vid-table> + </div> +</div> + + diff --git a/vid-webpack-master/src/app/browseSdc/browseSdc.component.scss b/vid-webpack-master/src/app/browseSdc/browseSdc.component.scss new file mode 100644 index 000000000..0d1678a94 --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/browseSdc.component.scss @@ -0,0 +1,59 @@ +div[ng-controller=ServiceModelController] .popupContents { + text-align: left; +} + +div[ng-controller=ServiceModelController] .statusLine { + vertical-align: center; +} + +div[ng-controller=ServiceModelController] .statusLine img { + width: 20px; + margin: 10px; +} + +div[ng-controller=ServiceModelController] .status { + margin-left: 5px; +} + +div[ng-controller=ServiceModelController] .feedback { + height: 35px; + vertical-align: center; +} + +div[ng-controller=ServiceModelController] .progress { + margin: 0px 10px; + font-weight: bold; +} + +div[ng-controller=ServiceModelController] .error { + width: 630px; + font-weight: bold; + font-size: 16px; + color: red; + margin: 0px 10px 0px 45px; +} + +div[ng-controller=ServiceModelController] .error img { + width: 25px; + margin: 0px 10px; +} + +div[ng-controller=ServiceModelController] .buttonRow { + text-align: center; + margin-bottom: 10px; +} + +div[ng-controller=ServiceModelController] .log { + width: 700px; + height: 500px; + border: solid black 1px; + text-align: left !important; + margin: 10px; + padding: 10px; + overflow: auto; +} + + +.previous-versions-button { + width: 113px; +} diff --git a/vid-webpack-master/src/app/browseSdc/browseSdc.component.ts b/vid-webpack-master/src/app/browseSdc/browseSdc.component.ts new file mode 100644 index 000000000..46f37dc2e --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/browseSdc.component.ts @@ -0,0 +1,176 @@ +import {Component, Input, OnInit} from '@angular/core'; +import * as _ from 'lodash'; +import {SdcService} from '../services/sdc.service'; +import {DialogService} from 'ng2-bootstrap-modal'; +import {Constants} from '../shared/utils/constants'; +import {CustomTableColumnDefinition, CustomTableOptions} from './vid-table/vid-table.component'; +import {ServicePopupComponent} from "../components/service-popup/service-popup.component"; +import { PreviousVersionsComponent } from './previous-versions/previous-versions.component'; + +@Component({ + selector: 'browse-sdc', + templateUrl: './browseSdc.component.html', + styleUrls: ['./browseSdc.component.scss'] +}) + + +export class BrowseSdcComponent implements OnInit { + + isSpinnerVisible = false; + isProgressVisible = false; + error: boolean; + status: string; + // table + + private basicColumns: CustomTableColumnDefinition[]; + @Input () filterQuery = ''; + tableOptions: CustomTableOptions; + private wholeData: any[]; + + constructor(private _sdcService: SdcService, private dialogService: DialogService) {} + + initTableOptions() { + this.basicColumns = [ + { displayName: 'Action', key: 'action', type: 'button' , text: 'deploy', action: 'deploy' }, + { displayName: 'UUID', key: 'uuid', filter: 'text'}, + { displayName: 'invariantUUID', key: 'invariantUUID', filter: 'text'}, + { displayName: 'Name', key: 'name', filter: 'text'}, + { displayName: 'Version', key: 'version', filter: 'text'}, + { displayName: 'Category', key: 'category', filter: 'text'}, + { displayName: 'Distribution Status', key: 'distributionStatus', filter: 'text'}, + { displayName: 'Last Updated By', key: 'lastUpdaterUserId', filter: 'text'}, + { displayName: 'Tosca Model', key: 'toscaModelUrl', filter: 'text'} + ]; + + let columns: CustomTableColumnDefinition[] = this.basicColumns.concat( + {displayName: 'Action', key: 'actions', type: 'button', text: 'Previous Versions', + showCondition: 'hasPreviousVersion', action: 'loadPreviousData' } + ); + + this.tableOptions = { + data: [], + columns: columns, + config: { + sortBy: 'name', + sortOrder: 'asc', + pageSize: 10, + pageNumber: 1, + totalCount: 0, + totalPages: 0, + maxSize: 10, + showSelectCheckbox: true, + showSelectAll: true, + showSort: true, + clientSort: true, + clientPaging: true, + // displayPager: true, + // displayPageSize: true, + stickyHeader: true, + stickyHeaderOffset: 0, + stickyContainer: '.table1-container' + }, + }; + } + private deploy(service: any): void { + if (service) { + console.log('this row uuid:' + service.uuid); + } + + this.dialogService.addDialog(ServicePopupComponent, { + }) + } + + private filterDataWithHigherVersion(serviceData) { + let delimiter = '$$'; + let filterDataServices = {}; + for (let i = 0; i < serviceData.length; i++) { + let index = serviceData[i].invariantUUID.trim() + delimiter + serviceData[i].name.trim(); + if (!filterDataServices[index]) { + filterDataServices[index] = { + service: serviceData[i], + hasPreviousVersion: false + }; + } else { + filterDataServices[index].hasPreviousVersion = true; + if (parseFloat(serviceData[i].version.trim()) > parseFloat(filterDataServices[index].service.version.trim())) { + filterDataServices[index].service = serviceData[i]; + } + } + } + return Object.keys(filterDataServices).map(function (key) { + let service = filterDataServices[key].service; + service.hasPreviousVersion = filterDataServices[key].hasPreviousVersion; + return service; + }); + } + + private initData() { + this.isProgressVisible = true; + this.isSpinnerVisible = true; + console.log('getServicesModels: '); + this._sdcService.getServicesModels().subscribe( + // onNext() function + value => this.getServiceCallback(value), + // onError() function + error => this.getServiceOnError(error), + // onComplete() function + () => console.log('completed') + ); + } + + private getServiceCallback(responseBody: any): void { + console.log('response is ' , responseBody); + this.wholeData = responseBody.services; + this.tableOptions.data = this.filterDataWithHigherVersion(responseBody.services); + this.isSpinnerVisible = false; + this.isProgressVisible = false; + } + private getServiceOnError(error: any): void { + console.log('error is ' , error); + this.status = Constants.Status.FAILED_SERVICE_MODELS_ASDC; + this.error = true; + this.isSpinnerVisible = false; + } + + private loadPreviousVersionData(service): void { + let previousVersionData: any[] = _.filter(this.wholeData, function(item) { + return item.invariantUUID === service.invariantUUID && item.name === service.name && service.version !== item.version; + }); + + let modalTableOptions: CustomTableOptions = { + data: previousVersionData, + columns: this.basicColumns, + config: { + sortBy: 'version', + sortOrder: 'desc'} + }; + // open modal + this.dialogService.addDialog(PreviousVersionsComponent, { + title: service.name + ' - Previous Version', + tableOptions: modalTableOptions + }) + .subscribe( service => { + if (service) { + this.deploy(service); + } + }); + } + + + public clickAction(row) { + switch (row.actionName) { + case 'loadPreviousData': + this.loadPreviousVersionData(row); + break; + case 'deploy': + this.deploy(row); + break; + } + } + + ngOnInit() { + console.log('Browse SDC Service Models'); + this.initTableOptions(); + this.initData(); + } +} diff --git a/vid-webpack-master/src/app/browseSdc/browseSdc.module.ts b/vid-webpack-master/src/app/browseSdc/browseSdc.module.ts new file mode 100644 index 000000000..b7dd78e54 --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/browseSdc.module.ts @@ -0,0 +1,35 @@ + +import { NgModule } from '@angular/core'; +import {BrowseSdcComponent} from './browseSdc.component'; +import {VidTableComponent} from './vid-table/vid-table.component'; +import {SdcService} from '../services/sdc.service'; +import {CommonModule} from '@angular/common'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {DataTableModule} from 'angular2-datatable'; +import {BootstrapModalModule} from 'ng2-bootstrap-modal'; +import {PreviousVersionsComponent} from './previous-versions/previous-versions.component'; +import {ServicePopupComponent} from '../components/service-popup/service-popup.component'; +import {ServiceInstanceDetailsComponent} from "../components/service-popup/service-instance-details/service-instance-details.component"; +import {TooltipModule} from 'ngx-tooltip'; +import {InputsModule} from "../modules/inputs.module"; +import {VnfPopupComponent} from "../components/vnf-popup/vnf-popup.components"; +import {VnfInstanceDetailsComponent} from "../components/vnf-popup/vnf-instance-details/vnf-instance-details.component"; +import { VnfInstanceDetailsService } from '../components/vnf-popup/vnf-instance-details/vnf-instance-details.service'; +import { SharedModule } from '../shared/shared.module'; +import { ServiceInstanceDetailsService } from '../components/service-popup/service-instance-details/service-instance-details.service'; +import { ServicePopupService } from '../components/service-popup/service-popup.service'; +import { DataFilterPipe } from '../shared/pipes/data-filter.pipe'; + + +@NgModule({ + imports: [CommonModule, FormsModule, ReactiveFormsModule, BootstrapModalModule, DataTableModule, TooltipModule, InputsModule, SharedModule.forRoot()], + providers: [SdcService, VnfInstanceDetailsService, ServiceInstanceDetailsService, ServicePopupService], + declarations: [BrowseSdcComponent, VidTableComponent, DataFilterPipe, PreviousVersionsComponent, + ServicePopupComponent, ServiceInstanceDetailsComponent, VnfPopupComponent, VnfInstanceDetailsComponent + ], + entryComponents: [BrowseSdcComponent, PreviousVersionsComponent, ServicePopupComponent, VnfPopupComponent], + exports: [ ] + +}) + +export class BrowseSdcModule { } diff --git a/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.component.ts b/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.component.ts new file mode 100644 index 000000000..8faf04d6c --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.component.ts @@ -0,0 +1,29 @@ +import { Component } from '@angular/core'; +import { DialogComponent, DialogService } from 'ng2-bootstrap-modal'; +import { CustomTableOptions } from '../vid-table/vid-table.component'; + +export interface PreviousVersionsModel { + + title: string; + tableOptions: CustomTableOptions; +} + +@Component({ + selector: 'previous-versions', + templateUrl: 'previous-versions.html', + styleUrls: ['previous-versions.css'] +}) +export class PreviousVersionsComponent extends DialogComponent<PreviousVersionsModel, boolean> implements PreviousVersionsModel { + + title: string; + tableOptions: CustomTableOptions; + + constructor(dialogService: DialogService) { + super(dialogService); + } + + public deploy(row) { + this.result = row; + this.close(); + } +} diff --git a/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.css b/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.css new file mode 100644 index 000000000..92bcbd100 --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.css @@ -0,0 +1,4 @@ +.modal-dialog { + width: 1145px; + font-size: 11px; +} diff --git a/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.html b/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.html new file mode 100644 index 000000000..68209b8e8 --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.html @@ -0,0 +1,18 @@ +<div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" (click)="close()" >×</button> + <h4 class="modal-title">{{title}}</h4> + </div> + <div class="modal-body"> + <vid-table + [options]="tableOptions" + (clickEvent)="deploy($event)"> + Loading table... + </vid-table> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" (click)="close()" >Cancel</button> + </div> + </div> +</div> diff --git a/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html new file mode 100644 index 000000000..5650e5d35 --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html @@ -0,0 +1,26 @@ +<table class="table table-hover table-striped table-sortable" [mfData]="options.data | dataFilter : filterQuery" #mf="mfDataTable" [(mfSortBy)]="options.config.sortBy" [(mfSortOrder)]="options.config.sortOrder" [mfRowsOnPage]="10"> + <thead> + <tr> + <th *ngFor="let column of options.columns"> + <mfDefaultSorter by="{{column.key}}"> {{column.displayName}}</mfDefaultSorter> + </th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of mf.data"> + <td *ngFor="let column of options.columns" > + <button class="btn btn-primary" *ngIf="column.type==='button' && (!column.showCondition || row[column.showCondition])" title="{{column.text}}" (click)="clickBtn(row, column.action)"> + {{column.text}} + </button> + {{row[column.key]}} + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td colspan="5"> + <mfBootstrapPaginator [rowsOnPageSet]="[10,15,20]"></mfBootstrapPaginator> + </td> + </tr> + </tfoot> +</table> diff --git a/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss new file mode 100644 index 000000000..f34887987 --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss @@ -0,0 +1,40 @@ +table > thead > tr > th { + cursor: pointer; + position: relative; + background-image: none; + color: #fff; + background-color: #666; + a{ + color: #fff; + } +} + +.table-sortable > thead > tr > th:after, +.table-sortable > thead > tr > th.sort-false:after, +.table-sortable > thead > tr > th.sort-true:after { + font-family: FontAwesome; + padding-left: 5px; +} + +.table-sortable > thead > tr > th:after { + content: "\f0dc"; + color: #ddd; +} +.table-sortable > thead > tr > th.sort-false:after { + content: "\f0de"; + color: #767676; +} +.table-sortable > thead > tr > th.sort-true:after { + content: "\f0dd"; + color: #767676; +} +//.table-sortable > tbody > td > +.table-sortable { + tbody{ + td{ + .btn-primary{ + min-width: 100px; + } + } + } +} diff --git a/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts new file mode 100644 index 000000000..aa2030908 --- /dev/null +++ b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts @@ -0,0 +1,59 @@ +/** + * Created by cp2122 on 1/2/2018. + */ +import { Component, Input, EventEmitter, Output } from '@angular/core'; +export class CustomTableColumnDefinition { + public displayName = ''; + public key = ''; + public type? = 'text'; + public text? = ''; // for button + public action? = ''; // for button - callback + public showCondition? = ''; // for button + // public binding = ''; + public filter? = ''; + // public computedClass: any; + // public isComputed = false; + // public isAnchor = false; + // public srefBinding = ''; +} + +export class CustomTableConfig { + public sortBy = ''; + public sortOrder = 'desc'; + public pageSize? = 10; + public pageNumber? = 1; + public totalCount? = 0; + public totalPages? = 0; + public maxSize? = 10; + public showSelectCheckbox? = false; + public showSelectAll? = true; + public showSort? = true; + public clientSort? = true; + public clientPaging? = true; + public stickyHeader? = true; + public stickyHeaderOffset? = 0; + public stickyContainer? = ''; +} + +export class CustomTableOptions { + public data: any[]; + public columns: Array<CustomTableColumnDefinition>; + public config: CustomTableConfig; + // public callbacks: any; +} +@Component({ + selector: 'vid-table', + styleUrls: ['./vid-table.component.scss'], + templateUrl: './vid-table.component.html' +}) + +export class VidTableComponent { + @Input() options: CustomTableOptions; + @Input() filterQuery = ''; + + @Output() clickEvent = new EventEmitter<any>(); + clickBtn(row, actionName) { + row.actionName = actionName; + this.clickEvent.emit(row); + } +} |