aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models/tabs
diff options
context:
space:
mode:
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.ts98
-rw-r--r--catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html107
-rw-r--r--catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less101
4 files changed, 428 insertions, 0 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
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<boolean>;
+ 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 @@
+<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.groups">
+ <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module.uniqueId, $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="(memberName, value) in ::module.members track by $index">
+ <div class="expand-collapse-sub-title" tooltips tooltip-content="{{memberName}}">{{memberName}}</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.uniqueId, $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="(memberName, value) in ::module.members track by $index">
+ <div class="expand-collapse-sub-title" tooltips tooltip-content="{{memberName}}">{{memberName}}</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 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)">{{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
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;
+ }
+ }
+}