diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/automated-upgrade/automated-upgrade-ui-components')
12 files changed, 276 insertions, 0 deletions
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(); + } + + +} |