From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../src/app/browseSdc/browseSdc.component.html | 26 +++ .../src/app/browseSdc/browseSdc.component.scss | 59 +++++++ .../src/app/browseSdc/browseSdc.component.ts | 176 +++++++++++++++++++++ .../src/app/browseSdc/browseSdc.module.ts | 35 ++++ .../previous-versions.component.ts | 29 ++++ .../previous-versions/previous-versions.css | 4 + .../previous-versions/previous-versions.html | 18 +++ .../browseSdc/vid-table/vid-table.component.html | 26 +++ .../browseSdc/vid-table/vid-table.component.scss | 40 +++++ .../app/browseSdc/vid-table/vid-table.component.ts | 59 +++++++ 10 files changed, 472 insertions(+) create mode 100644 vid-webpack-master/src/app/browseSdc/browseSdc.component.html create mode 100644 vid-webpack-master/src/app/browseSdc/browseSdc.component.scss create mode 100644 vid-webpack-master/src/app/browseSdc/browseSdc.component.ts create mode 100644 vid-webpack-master/src/app/browseSdc/browseSdc.module.ts create mode 100644 vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.component.ts create mode 100644 vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.css create mode 100644 vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.html create mode 100644 vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html create mode 100644 vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss create mode 100644 vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts (limited to 'vid-webpack-master/src/app/browseSdc') 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 @@ +
+ + + + + + Error: {{status}} + +

+
+ +
+ +

Browse SDC Service Models

+
+ + + Loading table... + +
+
+ + 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 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 @@ +
+
+
+ +

{{title}}

+
+
+ + Loading table... + +
+
+ +
+
+
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 @@ + + + + + + + + + + + + + + + + +
+ {{column.displayName}} +
+ + {{row[column.key]}} +
+ +
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; + 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(); + clickBtn(row, actionName) { + row.actionName = actionName; + this.clickEvent.emit(row); + } +} -- cgit 1.2.3-korg