New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

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);
+  }
+}