aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/composition/panel/panel-header
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-07-29 16:13:45 +0300
committerMichael Lando <ml636r@att.com>2018-07-29 16:20:34 +0300
commit5b593496b8f1b8e8be8d7d2dbcc223332e65a49b (patch)
tree2f9dfc45191e723da69cf74be7829784e9741b94 /catalog-ui/src/app/ng2/pages/composition/panel/panel-header
parent9200382f2ce7b4bb729aa287d0878004b2d2b4f9 (diff)
re base code
Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/panel/panel-header')
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html14
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less34
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts135
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts51
4 files changed, 234 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
new file mode 100644
index 0000000000..731d6a3855
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.html
@@ -0,0 +1,14 @@
+<div class="component-details-panel-header" data-tests-id="w-sdc-designer-sidebar-head">
+
+ <div class="icon">
+ <div class="large {{iconClassName}}">
+ <div [ngClass]="{'non-certified': nonCertified}" tooltip="Not certified"></div>
+ </div>
+ </div>
+
+ <div class="title" data-tests-id="selectedCompTitle" tooltip="&#8203;{{name}}">{{name}}</div>
+
+ <svg-icon-label *ngIf="!isViewOnly" name="edit-file-o" clickable="true" size="small" class="rename-instance" data-tests-id="renameInstance" (click)="renameInstance()"></svg-icon-label>
+ <svg-icon-label *ngIf="!isViewOnly" name="trash-o" clickable="true" size="small" class="delete-instance" data-tests-id="deleteInstance" (click)="deleteInstance()"></svg-icon-label>
+
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
new file mode 100644
index 0000000000..9bbc765761
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.less
@@ -0,0 +1,34 @@
+/deep/
+.component-details-panel-header {
+ display: flex;
+ flex-direction: row;
+ height: 120px;
+ align-items: center;
+
+ .icon {
+ margin: 0 20px;
+ }
+
+ .title {
+ font-size: 16px;
+ text-overflow: ellipsis;
+ max-width: 180px;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .rename-instance {
+ position: absolute;
+ top: 14px;
+ right: 20px;
+ cursor: pointer;
+ }
+
+ .delete-instance {
+ position: absolute;
+ top: 14px;
+ right: 40px;
+ cursor: pointer;
+ }
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
new file mode 100644
index 0000000000..ab659a3b8f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.component.ts
@@ -0,0 +1,135 @@
+/*-
+ * ============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, AfterViewInit, SimpleChanges, OnInit, OnChanges } from "@angular/core";
+import { SdcUiComponents } from "sdc-ui/lib/angular";
+import { IModalConfig } from 'sdc-ui/lib/angular/modals/models/modal-config';
+import { ZoneInstanceType } from 'app/models/graph/zones/zone-instance';
+import { ValueEditComponent } from './../../../../components/ui/forms/value-edit/value-edit.component';
+import { Component as TopologyTemplate, ComponentInstance, IAppMenu } from "app/models";
+import { PoliciesService } from '../../../../services/policies.service';
+import { GroupsService } from '../../../../services/groups.service';
+import {IZoneService} from "../../../../../models/graph/zones/zone";
+import { EventListenerService, LoaderService } from "../../../../../services";
+import { GRAPH_EVENTS, EVENTS } from "../../../../../utils";
+import { UIZoneInstanceObject } from "../../../../../models/ui-models/ui-zone-instance-object";
+import { ModalButtonComponent } from "sdc-ui/lib/angular/components";
+
+@Component({
+ selector: 'ng2-composition-panel-header',
+ templateUrl: './panel-header.component.html',
+ styleUrls: ['./panel-header.component.less']
+})
+export class CompositionPanelHeaderComponent implements OnInit, OnChanges {
+
+ @Input() topologyTemplate: TopologyTemplate;
+ @Input() selectedZoneInstanceType: ZoneInstanceType;
+ @Input() selectedZoneInstanceId: string;
+ @Input() name: string;
+ @Input() nonCertified: boolean;
+ @Input() isViewOnly: boolean;
+ @Input() isLoading: boolean;
+
+ constructor(private groupsService:GroupsService, private policiesService: PoliciesService,
+ private modalService:SdcUiComponents.ModalService, private eventListenerService:EventListenerService) { }
+
+ private service:IZoneService;
+ private iconClassName: string;
+
+ ngOnInit(): void {
+ this.init();
+ }
+
+ ngOnChanges (changes:SimpleChanges):void {
+ if(changes.selectedZoneInstanceId){
+ this.init();
+ }
+ }
+
+ ngOnDestroy() {
+
+
+ }
+ private init = (): void => {
+ if (this.selectedZoneInstanceType === ZoneInstanceType.POLICY) {
+ this.iconClassName = "sprite-policy-icons policy";
+ this.service = this.policiesService;
+ } else if (this.selectedZoneInstanceType === ZoneInstanceType.GROUP) {
+ this.iconClassName = "sprite-group-icons group";
+ this.service = this.groupsService;
+ } else {
+ this.iconClassName = "sprite-resource-icons defaulticon";
+ }
+ }
+
+ private renameInstance = (): void => {
+ const modalConfig = {
+ title: "Edit Name",
+ size: "sm",
+ type: "custom",
+ testId: "renameInstanceModal",
+ buttons: [
+ {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false},
+ {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true}
+ ] as ModalButtonComponent[]
+ } as IModalConfig;
+ this.modalService.openCustomModal(modalConfig, ValueEditComponent, {name: this.name, validityChangedCallback: this.enableOrDisableSaveButton});
+ };
+
+ private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
+ let saveButton: ModalButtonComponent = this.modalService.getCurrentInstance().getButtonById('saveButton');
+ saveButton.disabled = !shouldEnable;
+ }
+
+ private saveInstanceName = ():void => {
+ let currentModal = this.modalService.getCurrentInstance();
+ let nameFromModal:string = currentModal.innerModalContent.instance.name;
+
+ if(nameFromModal != this.name){
+ currentModal.buttons[0].disabled = true;
+ this.service.updateName(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId, nameFromModal).subscribe((success)=>{
+ this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, nameFromModal);
+ this.modalService.closeModal();
+ }, (error)=> {
+ currentModal.buttons[0].disabled = false;
+ });
+ } else {
+ this.modalService.closeModal();
+ }
+ };
+
+ private deleteInstance = (): void => {
+ let title:string = "Delete Confirmation";
+ let message:string = "Are you sure you would like to delete "+ this.name + "?";
+ this.modalService.openAlertModal(title, message, "OK", this.deleteInstanceConfirmed, "deleteInstanceModal");
+ };
+
+ private deleteInstanceConfirmed = () => {
+ this.eventListenerService.notifyObservers(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
+ this.service.deleteZoneInstance(this.topologyTemplate.componentType, this.topologyTemplate.uniqueId, this.selectedZoneInstanceId).finally(()=> {
+ this.eventListenerService.notifyObservers(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
+ }).subscribe(()=> {
+ let deletedItem:UIZoneInstanceObject = new UIZoneInstanceObject(this.selectedZoneInstanceId, this.selectedZoneInstanceType, this.name);
+ this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, deletedItem);
+ });
+ };
+
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
new file mode 100644
index 0000000000..bde0a14669
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-header/panel-header.module.ts
@@ -0,0 +1,51 @@
+/*-
+ * ============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 { NgModule } from "@angular/core";
+import { HttpModule } from "@angular/http";
+import { FormsModule } from "@angular/forms";
+import { BrowserModule } from "@angular/platform-browser";
+import { CompositionPanelHeaderComponent } from "./panel-header.component";
+import { UiElementsModule } from './../../../../components/ui/ui-elements.module';
+import { ValueEditComponent } from './../../../../components/ui/forms/value-edit/value-edit.component';
+import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
+import { ModalFormsModule } from "app/ng2/components/ui/forms/modal-forms.module";
+
+@NgModule({
+ declarations: [
+ CompositionPanelHeaderComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule,
+ UiElementsModule,
+ SdcUiComponentsModule,
+ ModalFormsModule
+ ],
+ entryComponents: [
+ CompositionPanelHeaderComponent, ValueEditComponent
+ ],
+ exports: [
+ CompositionPanelHeaderComponent
+ ],
+})
+export class CompositionPanelHeaderModule {
+
+}