From ed64b5edff15e702493df21aa3230b81593e6133 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Fri, 9 Jun 2017 03:19:04 +0300 Subject: [SDC-29] catalog 1707 rebase commit. Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando --- .../src/app/view-models/tabs/general-tab.less | 122 +++++++++++++++++++++ .../tabs/hierarchy/hierarchy-view-model.ts | 98 +++++++++++++++++ .../view-models/tabs/hierarchy/hierarchy-view.html | 107 ++++++++++++++++++ .../app/view-models/tabs/hierarchy/hierarchy.less | 101 +++++++++++++++++ 4 files changed, 428 insertions(+) create mode 100644 catalog-ui/src/app/view-models/tabs/general-tab.less create mode 100644 catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts create mode 100644 catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html create mode 100644 catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less (limited to 'catalog-ui/src/app/view-models/tabs') diff --git a/catalog-ui/src/app/view-models/tabs/general-tab.less b/catalog-ui/src/app/view-models/tabs/general-tab.less new file mode 100644 index 0000000000..936b3e3414 --- /dev/null +++ b/catalog-ui/src/app/view-models/tabs/general-tab.less @@ -0,0 +1,122 @@ +.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 new file mode 100644 index 0000000000..7c505512c4 --- /dev/null +++ b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts @@ -0,0 +1,98 @@ +'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"; + +export interface IHierarchyScope extends ng.IScope { + component:Component; + selectedIndex:number; + selectedModule:DisplayModule; + singleTab:Tab; + isLoading:boolean; + expandCollapseArtifactsList:ExpandCollapseListData; + expandCollapsePropertiesList:ExpandCollapseListData; + selectedInstanceId:string; + + onModuleSelected(moduleId:string, selectedIndex:number):void; + onModuleNameChanged(module:DisplayModule):void; + updateHeatName():void; + loadInstanceModules(instance:ComponentInstance):ng.IPromise; + openEditPropertyModal(property: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.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 = (moduleId:string, 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 != moduleId)) { + this.$scope.isLoading = true; + if (this.$scope.component.isService()) { + this.$scope.selectedInstanceId = componentInstanceId; + this.$scope.component.getModuleInstanceForDisplay(componentInstanceId, moduleId).then(onSuccess, onFailed); + } else { + this.$scope.component.getModuleForDisplay(moduleId).then(onSuccess, onFailed); + } + } + }; + + 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):void => { + this.ModalsHandler.openEditModulePropertyModal(property, this.$scope.component, this.$scope.selectedModule).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 new file mode 100644 index 0000000000..9eaa3a0f76 --- /dev/null +++ b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html @@ -0,0 +1,107 @@ +
+ +
+ +
+
+ + +
{{component.name}}
+ +
+
+ + +
+ + +
+
+
{{memberName}}
+
+
+ +
+
+ + +
+
+ + +
+ + +
+ +
+
+ + +
+ + +
+
+
{{memberName}}
+
+
+
+ +
+ +
+ +
+
+
{{selectedModule.name}}
+
+ +
+
+
Module ID:
{{selectedModule.groupUUID}}
+
Customization ID:
{{selectedModule.customizationUUID}}
+
Invariant UUID:{{selectedModule.invariantUUID}}
+
Version: {{selectedModule.version}}
+
IsBase: {{selectedModule.isBase}}
+ +
+ +
+
+
+ {{property.name}} +
+
Type: {{property.type}}
+
Value: {{property.value}}
+
+
+ +
+
+
{{artifact.artifactName}}
+
UUID: {{artifact.artifactUUID}}
+
Version: {{artifact.artifactVersion}}
+
+
+ +
+
+
diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less new file mode 100644 index 0000000000..dee0eeb38b --- /dev/null +++ b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less @@ -0,0 +1,101 @@ +.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; + } + } +} -- cgit 1.2.3-korg