summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/browseSdc
diff options
context:
space:
mode:
authorSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
committerSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
commitff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch)
treeaae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/browseSdc
parentc72d565bb58226b20625b2bce5f0019046bee649 (diff)
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/browseSdc')
-rw-r--r--vid-webpack-master/src/app/browseSdc/browseSdc.component.html26
-rw-r--r--vid-webpack-master/src/app/browseSdc/browseSdc.component.scss59
-rw-r--r--vid-webpack-master/src/app/browseSdc/browseSdc.component.ts176
-rw-r--r--vid-webpack-master/src/app/browseSdc/browseSdc.module.ts35
-rw-r--r--vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.component.ts29
-rw-r--r--vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.css4
-rw-r--r--vid-webpack-master/src/app/browseSdc/previous-versions/previous-versions.html18
-rw-r--r--vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html26
-rw-r--r--vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss40
-rw-r--r--vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts59
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()" >&times;</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);
+ }
+}