re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

20 files changed, 839 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-models/ui-component-to-upgrade.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-models/ui-component-to-upgrade.ts
new file mode 100644
index 0000000000..97fb71e210
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-models/ui-component-to-upgrade.ts
@@ -0,0 +1,103 @@
+import {ComponentState} from "../../../../utils/constants";
+import {IDependenciesServerResponse} from "../../../services/responses/dependencies-server-response";
+import {UiBaseObject} from "../../../../models/ui-models/ui-base-object";
+
+/**
+ * Created by ob0695 on 5/1/2018.
+ */
+export enum AutomatedUpgradeInstanceType {
+    VF, SERVICE_PROXY, ALLOTTED_RESOURCE
+}
+export class ServiceContainerToUpgradeUiObject extends UiBaseObject {
+
+    icon:string;
+    version:string;
+    isLock:boolean; // true if service is in check-out or ceritification-in-progress
+    vspInstances:Array<VspInstanceUiObject>; // list of instances of the vsp contain in the service - intances can be vf, proxy or allotted
+    isAlreadyUpgrade:boolean; // true if all instances is in latest version
+
+    constructor(componentToUpgrade:IDependenciesServerResponse) {
+        super(componentToUpgrade.uniqueId, componentToUpgrade.type, componentToUpgrade.name);
+        this.icon = componentToUpgrade.icon;
+        this.version = componentToUpgrade.version;
+        this.isAlreadyUpgrade = true;
+        this.isLock = componentToUpgrade.state === ComponentState.CERTIFICATION_IN_PROGRESS || componentToUpgrade.state === ComponentState.NOT_CERTIFIED_CHECKOUT;
+        this.vspInstances = [];
+    }
+
+    public addVfInstance = (vsp: IDependenciesServerResponse, latestVersion:string):void => {
+        let isNeededUpgrade = parseInt(vsp.version) < parseInt(latestVersion);
+        this.vspInstances.push(new VspInstanceUiObject(vsp.uniqueId, vsp.name, vsp.version, vsp.icon));
+        if (isNeededUpgrade) {
+            this.isAlreadyUpgrade = false;
+        }
+    }
+
+    public addProxyInstance = (vsp: IDependenciesServerResponse, isNeededUpgrade:boolean, instanceName:string):void => {
+        this.vspInstances.push(new ProxyVspInstanceUiObject(vsp.uniqueId, vsp.name, vsp.version, vsp.icon, instanceName));
+        if (isNeededUpgrade) {
+            this.isAlreadyUpgrade = false;
+        }
+    }
+
+    public addAllottedResourceInstance = (vsp: IDependenciesServerResponse, isNeededUpgrade:boolean, instanceName:string, vfName:string, vfId:string):void => {
+        this.vspInstances.push(new AllottedResourceInstanceUiObject(vsp.uniqueId, vsp.name, vsp.version, vsp.icon, instanceName, vfName, vfId));
+        if (isNeededUpgrade) {
+            this.isAlreadyUpgrade = false;
+        }
+    }
+
+    public addMultipleInstances = (vsp: IDependenciesServerResponse, vspLatestVersion:string, instancesNames:Array<string>, allottedOriginVf: IDependenciesServerResponse):void => {
+        _.forEach(instancesNames, (instanceName:string) => {
+            let isNeededUpgrade = parseInt(vsp.version) < parseInt(vspLatestVersion);
+            if (allottedOriginVf) {
+                this.addAllottedResourceInstance(vsp, isNeededUpgrade, instanceName, allottedOriginVf.name, allottedOriginVf.uniqueId);
+            } else {
+                this.addProxyInstance(vsp, isNeededUpgrade, instanceName);
+            }
+        })
+    }
+}
+
+export class VspInstanceUiObject {
+
+    vspName:string;
+    vspVersion:string;
+    vspId:string;
+    icon:string;
+    instanceType:AutomatedUpgradeInstanceType;
+
+    constructor(uniqueId:string, vspName:string, vspVersion:string, icon:string) {
+        this.vspId = uniqueId;
+        this.vspName = vspName;
+        this.vspVersion = vspVersion;
+        this.icon = icon;
+        this.instanceType = AutomatedUpgradeInstanceType.VF;
+    }
+}
+
+export class ProxyVspInstanceUiObject extends VspInstanceUiObject {
+
+    instanceName:string;
+
+    constructor(uniqueId:string, vspName:string, vspVersion:string, icon:string, instanceName: string) {
+        super(uniqueId, vspName, vspVersion, icon);
+        this.instanceName = instanceName;
+        this.instanceType = AutomatedUpgradeInstanceType.SERVICE_PROXY;
+    }
+}
+
+export class AllottedResourceInstanceUiObject extends VspInstanceUiObject {
+
+    instanceName:string;
+    originVfName:string;
+    originVfId:string;
+
+    constructor(uniqueId:string, vspName:string, vspVersion:string, icon:string, instanceName:string, originVfName:string, originVfId:string) {
+        super(uniqueId, vspName, vspVersion, icon)
+        this.instanceName = instanceName;
+        this.originVfId = originVfId;
+        this.originVfName = originVfName;
+        this.instanceType = AutomatedUpgradeInstanceType.ALLOTTED_RESOURCE;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-status/automated-upgrade-status.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-status/automated-upgrade-status.component.html
new file mode 100644
index 0000000000..12a3b72b92
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-status/automated-upgrade-status.component.html
@@ -0,0 +1,10 @@
+<div class="automated-upgrade-component">
+    <span innerHTML="{{statusText}}"> </span>
+    <div class="components-to-upgrade-list">
+        <ul>
+            <li class="components-to-upgrade-list-item " *ngFor="let component of upgradedComponentsList">
+                <upgrade-list-status-item [upgradedComponent]="component" [upgradeComponentStatus]="upgradeStatusMap[component.name]"></upgrade-list-status-item>
+            </li>
+        </ul>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-status/automated-upgrade-status.component.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-status/automated-upgrade-status.component.ts
new file mode 100644
index 0000000000..0bc342ce65
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-status/automated-upgrade-status.component.ts
@@ -0,0 +1,24 @@
+/**
+ * Created by ob0695 on 4/24/2018.
+ */
+import {Component, Input} from "@angular/core";
+import Dictionary = _.Dictionary;
+import {AutomatedUpgradeStatusResponse} from "../../../services/responses/automated-upgrade-response";
+import {ServiceContainerToUpgradeUiObject} from "../automated-upgrade-models/ui-component-to-upgrade";
+
+@Component({
+    selector: 'automated-upgrade-status',
+    templateUrl: './automated-upgrade-status.component.html',
+    styleUrls: ['./../automated-upgrade.component.less']
+})
+export class AutomatedUpgradeStatusComponent {
+
+    @Input() upgradedComponentsList: Array<ServiceContainerToUpgradeUiObject>;
+    @Input() upgradeStatusMap: Dictionary<AutomatedUpgradeStatusResponse>;
+    @Input() statusText: string;
+
+    constructor () {
+
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.html
new file mode 100644
index 0000000000..2a03d94c8c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.html
@@ -0,0 +1,25 @@
+<ul class="list-item-inner-content">
+    <li *ngFor="let vspInstance of vspInstances" class="first-line">
+        <div [ngSwitch]="vspInstance.instanceType">
+
+            <div *ngSwitchCase="automatedUpgradeType.VF">
+                <upgrade-line-item arrowName="arrow2-right-child" text="{{vspInstance.vspName}} ({{vspInstance.vspVersion}})"></upgrade-line-item>
+            </div>
+
+            <div *ngSwitchCase="automatedUpgradeType.SERVICE_PROXY">
+                <upgrade-line-item arrowName="arrow2-right-child" prefix="Service Proxy: " text="{{vspInstance.instanceName}}"></upgrade-line-item>
+                <div class="second-line">
+                    <upgrade-line-item arrowName="arrow2-right-child" icon="{{vspInstance.icon}}" text="{{ vspInstance.vspName }} ({{vspInstance.vspVersion}})"></upgrade-line-item>
+                </div>
+            </div>
+
+            <div *ngSwitchCase="automatedUpgradeType.ALLOTTED_RESOURCE">
+                <upgrade-line-item class="allotted-resource-line" arrowName="arrow2-right-child" prefix=" VNF: " text="{{vspInstance.originVfName}}"></upgrade-line-item>
+                <upgrade-line-item arrowName="arrow2-right" prefix=" VFC: " text="{{vspInstance.instanceName}}"></upgrade-line-item>
+                <div class="second-line">
+                    <upgrade-line-item arrowName="arrow2-right-child" icon="vspInstance.icon" prefix=" VFC: " text="{{ vspInstance.vspName }} ({{vspInstance.vspVersion}})"></upgrade-line-item>
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.less b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.less
new file mode 100644
index 0000000000..24f8107e84
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.less
@@ -0,0 +1,25 @@
+@import "./../../../../../../assets/styles/override";
+
+.list-item-inner-content {
+  .first-line {
+
+    padding: 2px 20px 2px 65px;
+    border-bottom: 1px solid @sdcui_color_silver;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .second-line {
+    padding-left: 45px;
+    font-weight: bold;
+  }
+
+  .allotted-resource-line {
+
+    float: left;
+    margin-right: 15px;
+
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.ts
new file mode 100644
index 0000000000..0fa467c3ae
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component.ts
@@ -0,0 +1,24 @@
+/**
+ * Created by ob0695 on 5/7/2018.
+ */
+/**
+ * Created by ob0695 on 5/2/2018.
+ */
+import {Component, Input} from "@angular/core";
+import {
+    VspInstanceUiObject,
+    AutomatedUpgradeInstanceType
+} from "../../automated-upgrade-models/ui-component-to-upgrade";
+
+
+@Component({
+    selector: 'upgrade-list-item-inner-content',
+    templateUrl: './list-item-inner-content.component.html',
+    styleUrls: ['./list-item-inner-content.component.less']
+})
+export class UpgradeListItemInnerContent {
+
+    @Input() vspInstances:Array<VspInstanceUiObject>;
+
+    automatedUpgradeType = AutomatedUpgradeInstanceType;
+}
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-order-pipe/list-item-order-pipe.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-order-pipe/list-item-order-pipe.ts
new file mode 100644
index 0000000000..abebe0bdd8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/list-item-order-pipe/list-item-order-pipe.ts
@@ -0,0 +1,42 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {ServiceContainerToUpgradeUiObject} from "../../automated-upgrade-models/ui-component-to-upgrade";
+
+/*
+ This filter needs to return all not upgraded components sorted by name first, after that all upgraded components sorted by name
+ And in the end all the locked components sorted by name
+ */
+
+@Pipe({
+    name: 'upgradeListItemOrderBy'
+})
+export class UpgradeListItemOrderPipe implements PipeTransform {
+
+    private orderByName = (firstName:string, secondName:string):number => {
+        var textA = firstName.toLocaleLowerCase();
+        var textB = secondName.toLocaleLowerCase();
+        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+    }
+
+    transform(array:Array<ServiceContainerToUpgradeUiObject>):Array<ServiceContainerToUpgradeUiObject> {
+        array.sort((first:ServiceContainerToUpgradeUiObject, second:ServiceContainerToUpgradeUiObject) => {
+            if (first.isLock && second.isLock) {
+                return this.orderByName(first.name, second.name);
+            } else if (first.isLock) {
+                return 1;
+            } else if (second.isLock) {
+                return -1;
+            } else {
+                if (first.isAlreadyUpgrade && second.isAlreadyUpgrade) {
+                    return this.orderByName(first.name, second.name);
+                } else if (first.isAlreadyUpgrade) {
+                    return 1;
+                } else if (second.isAlreadyUpgrade) {
+                    return -1;
+                } else {
+                    return this.orderByName(first.name, second.name);
+                }
+            }
+        });
+        return array;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.html
new file mode 100644
index 0000000000..e848283f67
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.html
@@ -0,0 +1,6 @@
+<div class="upgrade-line-item">
+    <svg-icon *ngIf="arrowName" name="{{arrowName}}" size="medium" mode="secondary"></svg-icon>
+    <div *ngIf="icon" class="line-item-icon small sprite-services-icons {{icon}}"></div>
+    <span *ngIf="prefix" class="line-item-prefix">{{prefix}}</span>
+    <span class="line-item-text">{{text}}</span>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.less b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.less
new file mode 100644
index 0000000000..d558e881c2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.less
@@ -0,0 +1,17 @@
+.upgrade-line-item{
+
+  display: flex;
+  align-items: center;
+
+  .line-item-icon {
+    margin-left: 10px;
+  }
+
+  .line-item-prefix {
+    margin-left: 7px;
+  }
+
+  .line-item-text {
+    margin-left: 7px;
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.ts
new file mode 100644
index 0000000000..b256d7efe8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from "@angular/core";
+
+@Component({
+    selector: 'upgrade-line-item',
+    templateUrl: './upgrade-line-item.component.html',
+    styleUrls: ['./upgrade-line-item.component.less']
+})
+
+export class UpgradeLineItemComponent {
+
+    @Input() arrowName:string;
+    @Input() icon:string;
+    @Input() prefix:string;
+    @Input() text:string;
+    
+    constructor() {
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.html
new file mode 100644
index 0000000000..c6d3add7e6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.html
@@ -0,0 +1,13 @@
+<div class="components-to-upgrade-list-item">
+    <div class="component-to-upgrade-data">
+        <div class="component-to-upgrade-icon small sprite-services-icons {{upgradedComponent.icon}}"></div>
+        <span class="component-to-upgrade-name">{{upgradedComponent.name}} ({{upgradedComponent.version}})</span>
+        <svg-icon-label class="upgraded-component-status" *ngIf="upgradeComponentStatus.status === 'OK'"
+                        name="success-circle-o" mode="success" size="medium" clickable="false"></svg-icon-label>
+        <svg-icon-label class="upgraded-component-status" *ngIf="upgradeComponentStatus.status !== 'OK'"
+                        name="x-circle-o" mode="error"
+                        size="medium" [label]="'Update Failed'" clickable="false" disabled="false" labelPlacement="left"></svg-icon-label>
+    </div>
+
+    <upgrade-list-item-inner-content [vspInstances]="upgradedComponent.vspInstances"></upgrade-list-item-inner-content>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.ts
new file mode 100644
index 0000000000..726bc67fcf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from "@angular/core";
+import {AutomatedUpgradeStatusResponse} from "../../../../services/responses/automated-upgrade-response";
+import {ServiceContainerToUpgradeUiObject} from "../../automated-upgrade-models/ui-component-to-upgrade";
+
+@Component({
+    selector: 'upgrade-list-status-item',
+    templateUrl: './upgrade-list-status-item.component.html',
+    styleUrls: ['./../upgrade-list-item.component.less']
+})
+export class UpgradeListItemStatusComponent {
+
+    @Input() upgradedComponent: ServiceContainerToUpgradeUiObject;
+    @Input() upgradeComponentStatus: AutomatedUpgradeStatusResponse;
+
+    constructor () {
+
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item.component.less b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item.component.less
new file mode 100644
index 0000000000..4507929b7f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item.component.less
@@ -0,0 +1,44 @@
+@import "./../../../../../assets/styles/override";
+
+.components-to-upgrade-list-item {
+  border: 1px solid @sdcui_color_light-gray;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.11);
+  margin-bottom: 10px;
+  line-height: 40px;
+
+  .component-to-upgrade-data {
+    display: flex;
+    background-color: @sdcui_color_light-silver;
+    height: 40px;
+    padding: 0 10px;
+    align-items: center;
+
+    .component-to-upgrade-icon {
+      margin-left: 26px;
+    }
+
+    .component-to-upgrade-name {
+      margin-left: 8px;
+    }
+
+    .component-to-upgrade-checkbox {
+      height: 24px; // Workaround can not vertical center
+    }
+
+    .upgraded-component-status {
+      margin-left: auto;
+    }
+  }
+
+  .vsp-data {
+    align-items: center;
+    display: flex;
+    border-bottom: 1px solid @sdcui_color_silver;
+    padding: 0 10px 0 64px;
+    .vsp-data-label {
+      color: @sdcui_color_text-black;
+      margin-left: 7px;
+      font-weight: 600;
+    }
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.html
new file mode 100644
index 0000000000..6e6af0cd1c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.html
@@ -0,0 +1,19 @@
+<div class="components-to-upgrade-list-item ">
+    <div class="component-to-upgrade-data">
+        <sdc-checkbox class="component-to-upgrade-checkbox"
+                      *ngIf="!componentToUpgrade.isAlreadyUpgrade && !componentToUpgrade.isLock"
+                      [checked]="true"
+                      [disabled]="disabled"
+                      (checkedChange)="onComponentChecked(componentToUpgrade.uniqueId)">
+        </sdc-checkbox>
+        <svg-icon *ngIf="componentToUpgrade.isAlreadyUpgrade" name="success-circle-o" mode="success"
+                  size="medium"></svg-icon>
+        <svg-icon *ngIf="!componentToUpgrade.isAlreadyUpgrade && componentToUpgrade.isLock" name="locked" mode="info"
+                  size="small"></svg-icon>
+        <div class="component-to-upgrade-icon small sprite-services-icons {{componentToUpgrade.icon}}"></div>
+        <span class="component-to-upgrade-name">{{componentToUpgrade.name}} ({{componentToUpgrade.version}})</span>
+    </div>
+
+    <upgrade-list-item-inner-content [vspInstances]="componentToUpgrade.vspInstances"></upgrade-list-item-inner-content>
+
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.ts
new file mode 100644
index 0000000000..806b83126f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component.ts
@@ -0,0 +1,23 @@
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import {ServiceContainerToUpgradeUiObject, AutomatedUpgradeInstanceType} from "../../automated-upgrade-models/ui-component-to-upgrade";
+
+@Component({
+    selector: 'upgrade-list-item',
+    templateUrl: './upgrade-list-item.component.html',
+    styleUrls: ['./../upgrade-list-item.component.less']
+})
+export class UpgradeListItemComponent {
+
+    @Input() componentToUpgrade:ServiceContainerToUpgradeUiObject;
+    @Input() disabled: boolean;
+    @Output() onCheckedChange:EventEmitter<any> = new EventEmitter<any>();
+
+    constructor() {
+    }
+
+    onComponentChecked = ():void => {
+        this.onCheckedChange.emit();
+    }
+    
+    
+}
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.html b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.html
new file mode 100644
index 0000000000..67e7f08436
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.html
@@ -0,0 +1,25 @@
+<div class="automated-upgrade-component">
+
+    <div *ngIf="certificationStatusText" class="certification-status">
+        <svg-icon-label
+                name="success-circle-o"
+                mode="success"
+                size="medium"
+                clickable="false"
+                disabled="false"
+                labelPlacement="right">
+        </svg-icon-label>
+        <span class="certification-status-text">{{certificationStatusText}}</span>
+    </div>
+
+    <div>
+        <span innerHTML="{{informationText}}"> </span>
+        <div class="components-to-upgrade-list">
+            <ul>
+                <li *ngFor="let component of componentsToUpgrade | upgradeListItemOrderBy">
+                    <upgrade-list-item (onCheckedChange)= "onComponentSelected(component.uniqueId)" [disabled]="disabled" [componentToUpgrade]="component"></upgrade-list-item>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.less b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.less
new file mode 100644
index 0000000000..2ab21303d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.less
@@ -0,0 +1,23 @@
+.automated-upgrade-component {
+
+   min-height: 280px;
+  .certification-status {
+    border: 1px solid #4ca90c;
+    border-left: 5px solid #4ca90c;
+    margin-bottom: 20px;
+    padding: 5px 5px 5px 10px;
+    font-weight: bold;
+    display: flex;
+    line-height: 21px;
+
+    .certification-status-text {
+      padding-left: 5px;
+    }
+  }
+  .components-to-upgrade-list {
+
+    overflow: auto;
+    max-height: 300px;
+    margin-top: 15px;
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.ts
new file mode 100644
index 0000000000..9ae73497ef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.component.ts
@@ -0,0 +1,65 @@
+/**
+ * Created by ob0695 on 4/18/2018.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Component, Input, Inject, forwardRef} from "@angular/core";
+import {TranslateService} from "../../shared/translator/translate.service";
+import {ServiceContainerToUpgradeUiObject} from "./automated-upgrade-models/ui-component-to-upgrade";
+import {AutomatedUpgradeService} from "./automated-upgrade.service";
+
+@Component({
+    selector: 'upgrade-vsp',
+    templateUrl: './automated-upgrade.component.html',
+    styleUrls: ['./automated-upgrade.component.less'],
+    providers: [TranslateService]
+})
+export class AutomatedUpgradeComponent {
+
+    @Input() componentsToUpgrade: Array<ServiceContainerToUpgradeUiObject>;
+    @Input() certificationStatusText: string;
+    @Input() informationText: string;
+    @Input() disabled: string;
+    private selectedComponentsToUpgrade: Array<string> = [];
+
+    constructor (@Inject(forwardRef(() => AutomatedUpgradeService)) private automatedUpgradeService: AutomatedUpgradeService) {
+    }
+
+    ngOnInit(): void  { // We need to check all elements that needed upgrade as default
+        this.selectedComponentsToUpgrade = _.filter(this.componentsToUpgrade, (componentToUpgrade:ServiceContainerToUpgradeUiObject) => {
+                return !componentToUpgrade.isAlreadyUpgrade && !componentToUpgrade.isLock;
+        }).map(element => element.uniqueId)
+    }
+
+    onComponentSelected  = (uniqueId:string):void => {
+
+        if(this.selectedComponentsToUpgrade.indexOf(uniqueId) > -1) {
+            this.selectedComponentsToUpgrade = _.without(this.selectedComponentsToUpgrade, uniqueId);
+        } else  {
+            this.selectedComponentsToUpgrade.push(uniqueId);
+        }
+        if(this.selectedComponentsToUpgrade.length === 0) {
+            this.automatedUpgradeService.changeUpgradeButtonState(true);
+        } else {
+            this.automatedUpgradeService.changeUpgradeButtonState(false);
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.module.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.module.ts
new file mode 100644
index 0000000000..19f6412071
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.module.ts
@@ -0,0 +1,34 @@
+/**
+ * Created by ob0695 on 4/18/2018.
+ */
+import { NgModule } from "@angular/core";
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+import {CommonModule} from "@angular/common";
+import {AutomatedUpgradeStatusComponent} from "./automated-upgrade-status/automated-upgrade-status.component";
+import {AutomatedUpgradeComponent} from "./automated-upgrade.component";
+import {UpgradeListItemComponent} from "./automated-upgrade-ui-components/upgrade-list-item/upgrade-list-item.component";
+import {UpgradeListItemStatusComponent} from "./automated-upgrade-ui-components/upgrade-list-item-status/upgrade-list-status-item.component";
+import {TranslateService} from "../../shared/translator/translate.service";
+import {UpgradeListItemInnerContent} from "./automated-upgrade-ui-components/list-item-inner-content/list-item-inner-content.component";
+import {UpgradeLineItemComponent} from "./automated-upgrade-ui-components/upgrade-line-item/upgrade-line-item.component";
+import {UpgradeListItemOrderPipe} from "./automated-upgrade-ui-components/list-item-order-pipe/list-item-order-pipe";
+
+@NgModule({
+    declarations: [
+        AutomatedUpgradeStatusComponent,
+        UpgradeListItemComponent,
+        UpgradeListItemStatusComponent,
+        AutomatedUpgradeComponent,
+        UpgradeListItemInnerContent,
+        UpgradeLineItemComponent,
+        UpgradeListItemOrderPipe
+    ],
+    imports: [CommonModule, SdcUiComponentsModule],
+    exports: [],
+    entryComponents: [
+        AutomatedUpgradeComponent, AutomatedUpgradeStatusComponent
+    ],
+    providers: [TranslateService]
+})
+export class AutomatedUpgradeModule {
+}   
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.service.ts b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.service.ts
new file mode 100644
index 0000000000..0acfececaa
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade.service.ts
@@ -0,0 +1,279 @@
+import {SdcUiComponents} from "sdc-ui/lib/angular";
+import {Injectable, Inject} from "@angular/core";
+import {IModalConfig} from "sdc-ui/lib/angular/modals/models/modal-config";
+import {AutomatedUpgradeComponent} from "./automated-upgrade.component";
+import {Component} from "../../../models/components/component";
+import {ComponentServiceNg2} from "../../services/component-services/component.service";
+import {GeneralStatus, ComponentType} from "../../../utils/constants";
+import {IDependenciesServerResponse} from "../../services/responses/dependencies-server-response";
+import {AutomatedUpgradeStatusComponent} from "./automated-upgrade-status/automated-upgrade-status.component";
+import {AutomatedUpgradeStatusResponse} from "../../services/responses/automated-upgrade-response";
+import Dictionary = _.Dictionary;
+import {TranslateService, ITranslateArgs} from "../../shared/translator/translate.service";
+import {
+    ServiceContainerToUpgradeUiObject,
+    AllottedResourceInstanceUiObject, VspInstanceUiObject
+} from "./automated-upgrade-models/ui-component-to-upgrade";
+
+export interface IAutomatedUpgradeRequestObj {
+    serviceId:string;
+    resourceId?:string;
+}
+
+export enum Placement {
+    left = "left"
+}
+
+@Injectable()
+export class AutomatedUpgradeService {
+
+    private vspComponent:Component;
+    private uiComponentsToUpgrade:Array<ServiceContainerToUpgradeUiObject>;
+    private componentType:string;
+
+    constructor(private modalService:SdcUiComponents.ModalService,
+                private componentService:ComponentServiceNg2,
+                private translateService:TranslateService) {
+    }
+
+
+    public convertToServerRequest = (selectedServices:Array<string>):Array<IAutomatedUpgradeRequestObj> => {
+
+        let automatedRequest:Array<IAutomatedUpgradeRequestObj> = [];
+        _.forEach(selectedServices, (serviceId:string) => {
+            let serviceToUpgrade:ServiceContainerToUpgradeUiObject = _.find(this.uiComponentsToUpgrade, (service:ServiceContainerToUpgradeUiObject) => {
+                return serviceId === service.uniqueId;
+            });
+
+            if (serviceToUpgrade.vspInstances[0] instanceof AllottedResourceInstanceUiObject) { // If this is allotted resource instances, we need to take the origin vf id (all the instances have the save origin vspId
+                automatedRequest.push({
+                    serviceId: serviceId,
+                    resourceId: (<AllottedResourceInstanceUiObject> serviceToUpgrade.vspInstances[0]).originVfId
+                });
+            } else {
+                automatedRequest.push({serviceId: serviceId});
+            }
+        });
+        return automatedRequest;
+    }
+
+    private getStatusText = (statusMap:Dictionary<AutomatedUpgradeStatusResponse>):string => {
+        let failedUpgraded = _.filter(_.flatMap(statusMap), (upgradeStatus:AutomatedUpgradeStatusResponse) => {
+            return upgradeStatus.status !== GeneralStatus.OK
+        });
+
+        if (failedUpgraded.length > 0) {
+            return this.getTextByComponentType("_UPGRADE_STATUS_FAIL");
+        }
+        return this.getTextByComponentType("_UPGRADE_STATUS_SUCCESS");
+    }
+
+    private disabledAllModalButtons = ():void => {
+        this.modalService.getCurrentInstance().innerModalContent.instance.disabled = true;
+        this.modalService.getCurrentInstance().buttons[0].show_spinner = true;
+        this.modalService.getCurrentInstance().buttons[1].disabled = true;
+    }
+
+    public changeUpgradeButtonState = (isDisabled:boolean):void => {
+        if (this.modalService.getCurrentInstance().buttons[0].disabled !== isDisabled) {
+            this.modalService.getCurrentInstance().buttons[0].disabled = isDisabled;
+        }
+    }
+
+    //TODO We will need to replace this function after sdc-ui modal new design, this is just a workaround
+    public automatedUpgrade = ():void => {
+
+        let selectedServices = this.modalService.getCurrentInstance().innerModalContent.instance.selectedComponentsToUpgrade;
+        this.disabledAllModalButtons();
+        this.componentService.automatedUpgrade(this.vspComponent.componentType, this.vspComponent.uniqueId, this.convertToServerRequest(selectedServices)).subscribe((automatedUpgradeStatus:any) => {
+
+            if (automatedUpgradeStatus.status === GeneralStatus.OK) {
+
+                let statusMap:Dictionary<AutomatedUpgradeStatusResponse> = _.keyBy(automatedUpgradeStatus.componentToUpgradeStatus, 'name');
+                // In the status modal we only showing the upgraded component that the user selected, not the entire list
+                let upgradedComponent:Array<ServiceContainerToUpgradeUiObject> = _.filter(this.uiComponentsToUpgrade, (component:ServiceContainerToUpgradeUiObject) => {
+                    return selectedServices.indexOf(component.uniqueId) > -1;
+                });
+
+                _.forEach(upgradedComponent, (upgradedComponent:ServiceContainerToUpgradeUiObject) => { // If upgrade success we need to upgrade the version  all success
+                    if (statusMap[upgradedComponent.name].status === GeneralStatus.OK) {
+                        upgradedComponent.version = statusMap[upgradedComponent.name].version;
+                        _.forEach(upgradedComponent.vspInstances, (instance:VspInstanceUiObject) => {
+                            instance.vspVersion = this.vspComponent.version;
+                        });
+                    }
+                });
+
+                let statusModalTitle = this.getTextByComponentType("_UPGRADE_STATUS_TITLE");
+                this.modalService.getCurrentInstance().setTitle(statusModalTitle);
+                this.modalService.getCurrentInstance().getButtons().splice(0, 1); // Remove the upgrade button
+                this.modalService.getCurrentInstance().buttons[0].disabled = false; // enable close again
+                this.modalService.getCurrentInstance().innerModalContent.destroy();
+                this.modalService.createInnnerComponent(AutomatedUpgradeStatusComponent, {
+                    upgradedComponentsList: upgradedComponent,
+                    upgradeStatusMap: statusMap,
+                    statusText: this.getStatusText(statusMap)
+                });
+            }
+        });
+    }
+
+    public isAlreadyAdded = (uniqueId:string):ServiceContainerToUpgradeUiObject => {
+        let componentToUpgrade = _.find(this.uiComponentsToUpgrade, (componentToUpgrade:ServiceContainerToUpgradeUiObject) => {
+            return componentToUpgrade.uniqueId === uniqueId;
+        });
+        return componentToUpgrade;
+    }
+
+    public initVfUpgradeData = (serviceToUpgrade:IDependenciesServerResponse, vsp:IDependenciesServerResponse) => {
+
+        let existed = this.isAlreadyAdded(serviceToUpgrade.uniqueId);
+        if (existed) { // We will take the VF with the lower version existed - only one exist all the time in vf upgrade
+            if (vsp.version < existed.vspInstances[0].vspVersion) {
+                existed.vspInstances = [];
+                existed.addVfInstance(vsp, this.vspComponent.version);
+            }
+        } else {
+            let dependencyUiObj:ServiceContainerToUpgradeUiObject = new ServiceContainerToUpgradeUiObject(serviceToUpgrade);
+            dependencyUiObj.addVfInstance(vsp, this.vspComponent.version);
+            this.uiComponentsToUpgrade.push(dependencyUiObj);
+        }
+    }
+
+    // Service data will create instances of proxy or allotted resources
+    public initServiceUpgradeData = (serviceToUpgrade:IDependenciesServerResponse, vsp:IDependenciesServerResponse, instanceNames:Array<string>, allottedOriginVf?:IDependenciesServerResponse) => {
+
+        let existedService = this.isAlreadyAdded(serviceToUpgrade.uniqueId);
+        if (existedService) {
+            existedService.addMultipleInstances(vsp, this.vspComponent.version, instanceNames, allottedOriginVf);
+        }
+        else {
+            let dependencyUiObj:ServiceContainerToUpgradeUiObject = new ServiceContainerToUpgradeUiObject(serviceToUpgrade);
+            dependencyUiObj.addMultipleInstances(vsp, this.vspComponent.version, instanceNames, allottedOriginVf);
+            this.uiComponentsToUpgrade.push(dependencyUiObj);
+        }
+    }
+
+    /*
+     The server return response of 3 level nested object
+     First level - Vsp data by version
+     Each vsp have a decencies (the services contains the vsp - By default this is vf upgrade
+     If instancesNames exist - this can be proxy or allotted
+     If we have second layer of dependencies than this is allotted
+     Since we display the data the opposite way the BE return, this function will order the data in order to display it
+     */
+    public convertToComponentsToUpgradeUiObjArray = (dependenciesServerResponse:Array<IDependenciesServerResponse>):void => {
+
+        this.uiComponentsToUpgrade = [];
+
+        _.forEach(dependenciesServerResponse, (vsp:IDependenciesServerResponse) => { // 3 nested levels - 1 level for vf, 2 level proxy, 3 levels allotted
+            if (vsp.dependencies) {
+                _.forEach(vsp.dependencies, (dependency:IDependenciesServerResponse) => {
+                    if (dependency.instanceNames) { // Init service upgrade data
+                        if (dependency.dependencies) {
+                            _.forEach(dependency.dependencies, (serviceContainer:IDependenciesServerResponse) => { // Initiate allotted_resource instances
+                                this.initServiceUpgradeData(serviceContainer, vsp, dependency.instanceNames, dependency);
+                            });
+                        } else { //Init service_proxy instances
+                            this.initServiceUpgradeData(dependency, vsp, dependency.instanceNames);
+                        }
+                    } else { // Init vf upgrade data
+                        this.initVfUpgradeData(dependency, vsp);
+                    }
+                })
+            }
+        });
+    }
+
+    public isAllComponentsUpgraded = ():boolean => {
+        let isAllComponentUpgrade = _.filter(this.uiComponentsToUpgrade, (component:ServiceContainerToUpgradeUiObject) => {
+            return !component.isAlreadyUpgrade;
+        });
+        return isAllComponentUpgrade.length === 0;
+    }
+
+    public isAllComponentsLocked = ():boolean => {
+        let unLockedComponents = _.filter(this.uiComponentsToUpgrade, (component:ServiceContainerToUpgradeUiObject) => {
+            return !component.isLock;
+        });
+        return unLockedComponents.length === 0;
+    }
+
+    public isUpgradeNeeded = ():boolean => {
+        let neededUpgradeList = _.filter(this.uiComponentsToUpgrade, (component:ServiceContainerToUpgradeUiObject) => {
+            return !component.isLock && !component.isAlreadyUpgrade;
+        });
+        return neededUpgradeList.length > 0;
+    }
+
+    private getTextByComponentType (textLabel: string, params?:ITranslateArgs) {
+        return this.translateService.translate(this.componentType + textLabel, params);
+    }
+    public getInformationTextToDisplay = ():string => {
+
+        let isAllComponentsUpgraded = this.isAllComponentsUpgraded();
+        let isAllComponentsLocked = this.isAllComponentsLocked();
+        let params = {vspName: this.vspComponent.name, vspVersion: this.vspComponent.version};
+
+        if (this.uiComponentsToUpgrade.length === 0) {
+            return this.getTextByComponentType("_NOTHING_TO_UPGRADE", params);
+        }
+
+        switch (true) {
+            
+            case this.isUpgradeNeeded():
+            {
+                return this.getTextByComponentType("_AUTOMATED_UPGRADE_WITH_COMPONENTS_TO_UPGRADE", params);
+            }
+            case  !this.isUpgradeNeeded() && isAllComponentsLocked:
+            {
+                return this.getTextByComponentType("_AUTOMATED_UPGRADE_ALL_COMPONENTS_LOCKED", params);
+            }
+            case !this.isUpgradeNeeded() && !isAllComponentsLocked && isAllComponentsUpgraded:
+            {
+                return this.getTextByComponentType("_AUTOMATED_UPGRADE_ALL_COMPONENTS_UPGRADED", params);
+            }
+            case !this.isUpgradeNeeded() && !isAllComponentsLocked && !isAllComponentsUpgraded:
+            {
+                return this.getTextByComponentType("_AUTOMATED_UPGRADE_ALL_COMPONENTS_LOCKED", params);
+            }
+        }
+    }
+
+    public openAutomatedUpgradeModal = (componentsToUpgrade:Array<IDependenciesServerResponse>, component:Component, isAfterCertification?:boolean):void => {
+
+        this.vspComponent = component;
+        this.componentType = this.vspComponent.isResource() ? ComponentType.RESOURCE : ComponentType.SERVICE;
+
+        this.convertToComponentsToUpgradeUiObjArray(componentsToUpgrade);
+        let informationalText = this.getInformationTextToDisplay();
+        let modalTitle = this.getTextByComponentType("_UPGRADE_TITLE");
+        let certificationText = isAfterCertification ? this.getTextByComponentType("_CERTIFICATION_STATUS_TEXT", {resourceName: this.vspComponent.name}) : undefined;
+
+        let upgradeVspModalConfig:IModalConfig = {
+            title: modalTitle,
+            size: "md",
+            type: "custom",
+            testId: "upgradeVspModal",
+            buttons: [
+                {
+                    text: this.vspComponent.isResource() ? "UPGRADE" : "UPDATE",
+                    spinner_position: Placement.left,
+                    size: 'sm',
+                    callback: this.automatedUpgrade,
+                    closeModal: false,
+                    disabled: !this.isUpgradeNeeded(),
+
+                },
+                {text: 'CLOSE', size: 'sm', closeModal: true, type: 'secondary'}
+            ]
+        };
+
+        this.modalService.openCustomModal(upgradeVspModalConfig, AutomatedUpgradeComponent, {
+            componentsToUpgrade: this.uiComponentsToUpgrade,
+            informationText: informationalText,
+            certificationStatusText: certificationText
+        });
+    }
+}
+