Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

4 files changed, 358 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/tabs/general-tab.less b/catalog-ui/app/scripts/view-models/tabs/general-tab.less
new file mode 100644
index 0000000000..a8b4f5b9be
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/tabs/general-tab.less
@@ -0,0 +1,131 @@
+.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 0px;
+        margin: 0px 20px 0px 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;
+
+                    &:hover {
+                        .expand-collapse-minus-icon.hover;
+                    }
+                }
+            }
+        }
+
+        .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;
+                &:hover {
+                    .expand-collapse-plus-icon.hover;
+                }
+
+            }
+            .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-left: 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/app/scripts/view-models/tabs/hierarchy/hierarchy-view-model.ts b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view-model.ts
new file mode 100644
index 0000000000..bd59199eb4
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view-model.ts
@@ -0,0 +1,99 @@
+/*-
+ * ============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=========================================================
+ */
+/**
+ * Created by obarda on 7/28/2016.
+ */
+/**
+ * Created by obarda on 4/4/2016.
+ */
+/// <reference path="../../../references"/>
+module Sdc.ViewModels {
+    'use strict';
+    import Module = Sdc.Models.Module;
+
+    export interface IHierarchyScope extends ng.IScope {
+        component:Models.Components.Component;
+        selectedIndex: number;
+        selectedModule:Models.DisplayModule;
+        singleTab:Models.Tab;
+        templateUrl:string;
+        isLoading:boolean;
+
+        onModuleSelected(moduleId:string, selectedIndex: number):void;
+        onModuleNameChanged(module:Models.DisplayModule):void;
+        updateHeatName():void;
+    }
+
+    export class HierarchyViewModel {
+
+        static '$inject' = [
+            '$scope'
+        ];
+
+        constructor(private $scope:IHierarchyScope) {
+            this.$scope.component = this.$scope.singleTab.data;
+            this.$scope.isLoading = false;
+            this.initScopeMethods();
+        }
+
+        private initScopeMethods():void {
+
+            this.$scope.templateUrl = '/app/scripts/view-models/tabs/hierarchy/edit-module-name-popover.html';
+            this.$scope.onModuleSelected = (moduleId:string, selectedIndex: number):void => {
+
+                let onSuccess = (module:Models.DisplayModule) => {
+                    console.log("Module Loaded: ", module);
+                    this.$scope.selectedModule = module;
+                    this.$scope.isLoading = false;
+                };
+
+                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;
+                    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:Models.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 Models.DisplayModule(this.$scope.selectedModule)).then(onSuccess, onFailed);
+            };
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html
new file mode 100644
index 0000000000..971105c191
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html
@@ -0,0 +1,57 @@
+<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="HIERARCHY_TAB_TITLE"></div>
+    <div class="sdc-general-tab-sub-title" data-tests-id="tab-sub-header">{{component.name}}</div>
+
+    <div class="resizable-container">
+        <div class="resizable-section">
+            <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true"
+                               class="general-tab-scrollbar-container">
+
+                <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" 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  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">
+                            <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="module-text-overflow" data-tests-id="selected-module-group-uuid" tooltips tooltip-content="{{selectedModule.groupUUID}}"> Module ID: {{selectedModule.groupUUID}}</div>
+                    <div class="module-text-overflow"  data-tests-id="selected-module-is-base" tooltips tooltip-content="{{selectedModule.invariantUUID}}">Invariant UUID: {{selectedModule.invariantUUID}}</div>
+                    <div data-tests-id="selected-module-version">Version: {{selectedModule.version}}</div>
+                    <div data-tests-id="selected-module-is-base">IsBase: {{selectedModule.isBase}}</div>
+
+                </div>
+                <div ng-repeat="artifact in selectedModule.artifacts track by $index">
+                    <div class="artifact-data">
+                        <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/app/scripts/view-models/tabs/hierarchy/hierarchy.less b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy.less
new file mode 100644
index 0000000000..5e8572678d
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/tabs/hierarchy/hierarchy.less
@@ -0,0 +1,71 @@
+.hierarchy-tab{
+
+    .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);
+        }
+
+        .artifact-data{
+            .selectable;
+            .f-type._12_r;
+            .f-color.m;
+
+            padding: 10px 0px 10px 0px;
+            margin: 0px 20px 0px 20px;
+            border-bottom: 1px solid rgba(0, 159, 219, 0.6);
+            .artifact-name {
+                .f-type._14_r;
+                font-weight: bold;
+            }
+        }
+
+        .module-text-overflow {
+            max-width: 240px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+        }
+    }
+
+
+    .hierarchy-module-member-list {
+        overflow: hidden;
+    }
+
+    .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;
+        }
+    }
+}