summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models/tabs
diff options
context:
space:
mode:
authorys9693 <ys9693@att.com>2020-01-19 13:50:02 +0200
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-01-22 12:33:31 +0000
commit16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch)
tree03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/view-models/tabs
parentaa83a2da4f911c3ac89318b8e9e8403b072942e1 (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')
-rw-r--r--catalog-ui/src/app/view-models/tabs/general-tab.less122
-rw-r--r--catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts134
-rw-r--r--catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html123
-rw-r--r--catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less101
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;
- }
- }
-}