diff options
author | ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/view-models/tabs | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/view-models/tabs')
4 files changed, 0 insertions, 480 deletions
diff --git a/catalog-ui/src/app/view-models/tabs/general-tab.less b/catalog-ui/src/app/view-models/tabs/general-tab.less deleted file mode 100644 index 936b3e3414..0000000000 --- a/catalog-ui/src/app/view-models/tabs/general-tab.less +++ /dev/null @@ -1,122 +0,0 @@ -.sdc-general-tab { - - display: flex; - min-height: 100%; - flex-flow: column; - - .sdc-edit-icon { - .sprite; - .e-sdc-small-icon-pencil; - } - .sdc-general-tab-title { - - .f-color.a; - .f-type._14_m; - padding: 0px 0px 15px 20px; - border-bottom: 1px solid @main_color_o; - } - - .sdc-general-tab-sub-title { - - .f-color.a; - .f-type._14_m; - padding: 15px 20px 15px 20px; - - } - - //scrollbar - .general-tab-scrollbar-container { - - .perfect-scrollbar; - width: 100%; - } - - //plus minus expand collapse - .general-tab-expand-collapse { - - &.expanded { - .expand-collapse-title { - .expand-collapse-title-icon { - .expand-collapse-minus-icon; - } - } - } - - .expand-collapse-title { - - padding: 8px 20px 4px 20px; - cursor: pointer; - &:hover { - background-color: @main_color_o; - } - - .expand-collapse-title-icon { - .hand; - .sprite-new; - .expand-collapse-plus-icon; - } - .expand-collapse-title-text { - max-width: 225px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-left: 10px; - line-height: 15px; - } - } - .selected { - background-color: @main_color_a; - .f-color.p; - } - - } - - .expand-collapse-sub-title { - max-width: 190px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 10px 0 0 43px; - - } - - //resizable view - .resizable-container { - - flex: 1 1 auto; - display: flex; - flex-direction: column; - height: 90%; - - .resizable-section { - min-height: 50px; - flex: 1; - display: flex; - flex-flow: column; - &.resizable { - flex: 0 0 300px; - } - } - - //this is the resizable icon custom design for the angular resizable directive - .rg-top { - span { - margin-top: -5px; - &:before { - border-top: 1px dotted @main_color_m; - content: ''; - display: inline-block; - width: 39px; - height: 6px; - } - - border-top: 1px dotted @main_color_m; - border-bottom: 1px dotted @main_color_m; - width: 39px; - height: 4px; - } - } - } -} diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts deleted file mode 100644 index f752e3dba7..0000000000 --- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts +++ /dev/null @@ -1,134 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {ModalsHandler} from "app/utils"; -import {PropertyModel, DisplayModule, Component, ComponentInstance, Tab, Module} from "app/models"; -import {ExpandCollapseListData} from "app/directives/utils/expand-collapse-list-header/expand-collapse-list-header"; - -interface IComponentInstancesMap { - [key:string]: ComponentInstance -} - -export interface IHierarchyScope extends ng.IScope { - component:Component; - selectedIndex:number; - selectedModule:DisplayModule; - singleTab:Tab; - isLoading:boolean; - expandCollapseArtifactsList:ExpandCollapseListData; - expandCollapsePropertiesList:ExpandCollapseListData; - selectedInstanceId:string; - componentInstancesMap:IComponentInstancesMap; - - onModuleSelected(module:Module, selectedIndex:number, componentInstanceId?:string):void; - onModuleNameChanged(module:DisplayModule):void; - updateHeatName():void; - loadInstanceModules(instance:ComponentInstance):ng.IPromise<boolean>; - openEditPropertyModal(property:PropertyModel, filteredProperties:Array<PropertyModel>):void; -} - -export class HierarchyViewModel { - - static '$inject' = [ - '$scope', - '$q', - 'ModalsHandler' - ]; - - constructor(private $scope:IHierarchyScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) { - this.$scope.component = this.$scope.singleTab.data; - this.$scope.isLoading = false; - this.$scope.expandCollapseArtifactsList = new ExpandCollapseListData(); - this.$scope.expandCollapsePropertiesList = new ExpandCollapseListData(); - this.$scope.componentInstancesMap = <IComponentInstancesMap>{}; - this.initScopeMethods(); - } - - private initScopeMethods():void { - - let collapseModuleData = ():void => { - this.$scope.expandCollapseArtifactsList.expandCollapse = false; - this.$scope.expandCollapsePropertiesList.expandCollapse = false; - this.$scope.expandCollapseArtifactsList.orderByField = "artifactName"; - this.$scope.expandCollapsePropertiesList.orderByField = "name"; - }; - - this.$scope.onModuleSelected = (module:Module, selectedIndex:number, componentInstanceId?:string):void => { - - let onSuccess = (module:DisplayModule) => { - console.log("Module Loaded: ", module); - this.$scope.selectedModule = module; - this.$scope.isLoading = false; - collapseModuleData(); - }; - - let onFailed = () => { - this.$scope.isLoading = false; - }; - - this.$scope.selectedIndex = selectedIndex; - if (!this.$scope.selectedModule || (this.$scope.selectedModule && this.$scope.selectedModule.uniqueId != module.uniqueId)) { - this.$scope.isLoading = true; - if (this.$scope.component.isService()) { - this.$scope.selectedInstanceId = componentInstanceId; - this.$scope.component.getModuleInstanceForDisplay(componentInstanceId, module.uniqueId).then(onSuccess, onFailed); - } else { - this.$scope.component.getModuleForDisplay(module.uniqueId).then(onSuccess, onFailed); - } - } - - const componentInstances: Array<ComponentInstance> = this.$scope.component.componentInstances || []; - (<string[]>_.values(module.members)).forEach((memberId) => { - if (!(memberId in this.$scope.componentInstancesMap)) { - const compInstance = componentInstances.find((c) => c.uniqueId === memberId); - if (compInstance) { - this.$scope.componentInstancesMap[compInstance.uniqueId] = compInstance; - } - } - }); - }; - - this.$scope.updateHeatName = () => { - this.$scope.isLoading = true; - - let originalName:string = this.$scope.selectedModule.name; - - let onSuccess = (module:Module) => { - console.log("Module name updated:", module.name); - this.$scope.selectedModule.name = module.name; - this.$scope.isLoading = false; - }; - - let onFailed = () => { - this.$scope.isLoading = false; - this.$scope.selectedModule.name = originalName; - }; - - this.$scope.selectedModule.updateName(); - this.$scope.component.updateGroupMetadata(new DisplayModule(this.$scope.selectedModule)).then(onSuccess, onFailed); - }; - - this.$scope.openEditPropertyModal = (property:PropertyModel, filteredProperties:Array<PropertyModel>):void => { - this.ModalsHandler.openEditModulePropertyModal(property, this.$scope.component, this.$scope.selectedModule, filteredProperties).then(() => { - }); - } - } -} diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html deleted file mode 100644 index 423cbcd1f0..0000000000 --- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html +++ /dev/null @@ -1,123 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="sdc-general-tab hierarchy-tab" ng-class=""> - <loader data-display="isLoading" relative="true" size="medium"></loader> - <div class="sdc-general-tab-title" data-tests-id="tab-header" translate="DEPLOYMENT_TAB_TITLE"></div> - - <div class="resizable-container"> - <div data-ng-if="!component.isService()"class="resizable-section"> - - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" - class="general-tab-scrollbar-container"> - <div class="sdc-general-tab-sub-title" data-tests-id="tab-sub-header">{{component.name}}</div> - <expand-collapse expanded-selector=".hierarchy-module-member-list.{{$index}}" - class="general-tab-expand-collapse" is-close-on-init="true" - data-tests-id="hierarchy-module-{{$index}}" - data-ng-repeat-start="module in component.modules"> - <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module, $index)"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips - tooltip-content="{{module.name}}"></span> - - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="hierarchy-module-member-list {{$index}}"> - <div ng-repeat="memberId in ::module.members track by $index"> - <div class="expand-collapse-sub-title" tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div> - </div> - </div> - </perfect-scrollbar> - </div> - <div data-ng-if="component.isService()"class="resizable-section"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" - class="general-tab-scrollbar-container"> - <expand-collapse expanded-selector=".hierarchy-modules-list.{{$index}}" - class="general-tab-expand-collapse" is-close-on-init="true" - data-tests-id="hierarchy-instance-{{$index}}" - - data-ng-repeat-start="instance in component.componentInstances"> - <div class="expand-collapse-title first-level" data-tests-id="hierarchy-instance-{{$index}}-title"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="instance.name" tooltips - tooltip-content="{{instance.name}}"></span> - - </div> - </expand-collapse> - <!--TODO: Rachel : --> - <div data-ng-repeat-end="" class="hierarchy-modules-list {{$index}}"> - <expand-collapse expanded-selector=".outer-index-{{$parent.$index}}.hierarchy-module-member-list.{{$index}}" - class="general-tab-expand-collapse" is-close-on-init="true" - data-tests-id="hierarchy-module-{{$index}}" - data-ng-repeat-start="module in instance.groupInstances"> - <div class="expand-collapse-title second-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index && selectedInstanceId === instance.uniqueId}" data-ng-click="onModuleSelected(module, $index, instance.uniqueId)"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips tooltip-content="{{module.name}}"></span> - - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="outer-index-{{$parent.$index}} hierarchy-module-member-list {{$index}}"> - <div ng-repeat="memberId in ::module.members track by $index"> - <div class="expand-collapse-sub-title" tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div> - </div> - </div> - </div> - </perfect-scrollbar> - </div> - - <div resizable r-directions="['top']" r-flex="true" ng-if="selectedModule" class="resizable-section module-data-container" data-tests-id="selected-module-data"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" - class="general-tab-scrollbar-container"> - <div class="module-data"> - <div> - <div class="module-name module-text-overflow" data-tests-id="selected-module-name" tooltips tooltip-content="{{selectedModule.name}}">{{selectedModule.name}}</div> - <div class="edit-name-container" data-ng-if="!component.isService()"> - <edit-name-popover header="Edit Module Name" direction="auto top" module="selectedModule" on-save="updateHeatName()" ng-class="{'disabled': isViewOnly}" class="sdc-edit-icon" data-tests-id="edit-name-popover-icon"></edit-name-popover> - </div> - </div> - <div class="" data-tests-id="selected-module-group-uuid" tooltips tooltip-content="{{selectedModule.groupUUID}}"><span class="bold">Module ID:</span><br><span class="small-font">{{selectedModule.groupUUID}}</span></div> - <div class="" data-tests-id="selected-module-group-customization-uuid" data-ng-if="component.isService() && isViewOnly" tooltips tooltip-content="{{selectedModule.customizationUUID}}"><span class="bold">Customization ID:</span ><br><span class="small-font">{{selectedModule.customizationUUID}}</span></div> - <div class="" data-tests-id="selected-module-group-invariant-uuid" tooltips tooltip-content="{{selectedModule.invariantUUID}}"><span class="bold">Invariant UUID:</span><span class="small-font">{{selectedModule.invariantUUID}}</span></div> - <div data-tests-id="selected-module-version"><span class="bold">Version:</span> {{selectedModule.version}}</div> - <div data-tests-id="selected-module-is-base"><span class="bold">IsBase:</span> {{selectedModule.isBase}}</div> - - </div> - <expand-collapse-list-header title="Properties" expand-collapse-list-data="expandCollapsePropertiesList"></expand-collapse-list-header> - <div ng-repeat="property in filteredProperties=(selectedModule.properties | filter: expandCollapsePropertiesList.filter | orderBy:expandCollapsePropertiesList.orderByField) track by $index" data-ng-if="expandCollapsePropertiesList.expandCollapse"> - <div class="list-item property-data" data-ng-class="{'last':$last}"> - <div class="property-name module-text-overflow" data-tests-id="selected-module-property-name"> - <span tooltips tooltip-content="{{property.name}}" - data-ng-class="{'hand': !isViewOnly}" - data-ng-click="!isViewOnly && openEditPropertyModal(property, filteredProperties)">{{property.name}}</span> - </div> - <div class="module-text-overflow property-info" data-tests-id="selected-module-property-type"> Type: {{property.type}}</div> - <div class="module-text-overflow property-info" data-tests-id="selected-module-property-schema-type">Value: {{property.value}}</div> - </div> - </div> - <expand-collapse-list-header title="Artifacts" expand-collapse-list-data="expandCollapseArtifactsList"></expand-collapse-list-header> - <div ng-repeat="artifact in selectedModule.artifacts| filter: expandCollapseArtifactsList.filter | orderBy:expandCollapseArtifactsList.orderByField track by $index" data-ng-if="expandCollapseArtifactsList.expandCollapse"> - <div class="list-item artifact-data" data-ng-class="{'last':$last}"> - <div class="artifact-name module-text-overflow" data-tests-id="selected-module-artifact-name" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</div> - <div class="module-text-overflow" tooltips data-tests-id="selected-module-artifact-uuid" tooltip-content="{{artifact.artifactUUID}}">UUID: {{artifact.artifactUUID}}</div> - <div data-tests-id="selected-module-artifact-version">Version: {{artifact.artifactVersion}}</div> - </div> - </div> - </perfect-scrollbar> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less deleted file mode 100644 index dee0eeb38b..0000000000 --- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less +++ /dev/null @@ -1,101 +0,0 @@ -.hierarchy-tab{ - width: 100%; - .hierarchy-module-list-container{ - padding: 0px 20px 0px 20px; - } - .module-data-container{ - - width: 100%; - height: 100%; - background-color: #e6f6fb; - border: 1px solid #009fdb; - border-top: 4px solid #009fdb; - box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32); - - .module-data { - - .selectable; - .module-name { - .f-type._14_m; - width: 87%; - } - .f-type._14_r; - .f-color.a; - padding: 10px 0px 10px 0px; - margin: 0px 20px 0px 20px; - //border-bottom: 1px solid rgba(0, 159, 219, 0.6); - - .small-font{ - font-size: 12px; - } - } - - .list-item{ - padding: 10px 0px 10px 0px; - margin: 0px 20px 0px 20px; - &:not(.last){ - border-bottom: 1px solid rgba(0, 159, 219, 0.6); - } - } - - .artifact-data{ - .selectable; - .f-type._12_r; - .f-color.m; - .artifact-name { - .f-type._14_r; - font-weight: bold; - } - } - - .property-data{ - .property-name{ - width: 100%; - .f-type._14_m; - font-weight: 400; - color: @main_color_a; - } - .property-info{ - color: @func_color_s; - .f-type._14_r; - width: 100%; - } - } - - .module-text-overflow { - max-width: 240px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - //display: inline-block; - } - } - - .hierarchy-modules-list{ - .expand-collapse-title{ - .expand-collapse-title-text{ - max-width: 202px; - } - } - } - - .hierarchy-module-member-list { - overflow: hidden; - background-color: @main_color_p; - } - - .edit-name-container { - float: right; - border-left: 1px solid #5cc1e7; - height: 20px; - width: 12%; - - .sdc-edit-icon { - float: right; - cursor: pointer; - position: relative; - top: 4px; - right: 5px; - } - } -} |