diff options
Diffstat (limited to 'ecd-app-overlay/src/main/webapp/app/ecdapp/home')
16 files changed, 1509 insertions, 0 deletions
diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/appDS2.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/appDS2.js new file mode 100644 index 0000000..80ee672 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/appDS2.js @@ -0,0 +1,30 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +/* Angular application for the EC Dashboard web UI */ +var appDS2 = angular.module("abs", + [ + 'ngCookies', 'ngRoute', 'ngMessages', + 'ui.bootstrap', 'ui.bootstrap.modal', + 'b2b.att', + 'modalServices' + ] + ); diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/controller-service.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/controller-service.js new file mode 100644 index 0000000..6c4c45d --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/controller-service.js @@ -0,0 +1,69 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +appDS2.factory('ControllerService', function ($http, $q, $log) { + return { + /** + * Gets ECOMP-C Endpoint objects. + * No provision for pagination here. + * @return {JSON} Response object from remote side + */ + getControllers: function() { + // cache control for IE + var cc = "?cc=" + new Date().getTime().toString(); + return $http({ + method: 'GET', + url: 'controllers' + cc, + cache: false, + responseType: 'json' + }).then(function(response) { + if (response.data == null || typeof response.data != 'object') + return $q.reject('ControllerService.getControllers: response.data null or not object'); + else + return response.data; + }, + function(error) { + $log.error('ControllerService.getControllers failed: ' + JSON.stringify(error)); + return $q.reject(error.statusText); + }); + }, + + setControllerSelection: function(row) { + // $log.debug('ControllerService.setControllerSelection: invoked with ' + JSON.stringify(row)); + return $http({ + method: 'POST', + url: 'controllers', + data: row, + responseType: 'json' + }).then(function(response) { + if (response.data == null || typeof response.data != 'object') + return $q.reject('ControllerService.setControllerSelection: response.data null or not object'); + else + return response.data; + }, + function(error) { + $log.error('ControllerService.setControllerSelection failed: ' + JSON.stringify(error)); + return $q.reject(error.statusText); + }); + } + + }; +}); diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/controller_table.html b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/controller_table.html new file mode 100644 index 0000000..c2a0ca9 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/controller_table.html @@ -0,0 +1,85 @@ +<div id="page-content"> + + <h1 class="heading-page" id="controllers">ECOMP-C Instances</h1> + + <!-- show progress indicator --> + <div ng-show="ecdapp.isDataLoading"> + <div class="span" style="margin-bottom:20px;"> + <i class="icon-primary-spinner small" role="img" aria-label="Please wait while the content loads"></i> + Please wait while the content loads. + </div> + </div> + + <div ng-hide="ecdapp.isDataLoading"> + + <div id="button-search-row"> + <div style="float:right;"> + <div class="form-field form-field__small"> + <input + type="text" + placeholder="Search Controllers" + ng-model="ecdapp.searchString"/> + </div> + </div> + </div> + + <div ng-show="ecdapp.isRequestFailed"> + <span class="ecd-error-message">{{ecdapp.errMsg}}</span> + </div> + + <div ng-hide="ecdapp.isRequestFailed"> + + <div + b2b-table + id="controllers-table" + class="b2b-table-div" + table-data="ecdapp.tableData" + search-string="ecdapp.searchString" + current-page="ecdapp.currentPageIgnored" + next-sort="ecdapp.nextSortIgnored"> + + <table> + + <thead b2b-table-row type="header"> + <tr id="th-header-row"> + <th b2b-table-header sortable="false">Selected</th> + <th b2b-table-header key="name">Name</th> + <th b2b-table-header key="url">URL</th> + </tr> + </thead> + + <tbody b2b-table-row type="body" row-repeat="rowData in ecdapp.tableData"> + <tr id="tr-rowData"> + <td b2b-table-body> + <label class="radio"> + <input + type="radio" + name="ecdSelGroup" + title="rowData.url" + ng-value="rowData.url" + ng-model="ecdapp.radiobutton.url" + ng-change="ecdapp.selectController(rowData);"> + <i class="skin"></i> + <span></span> + </label> + </td> + <td b2b-table-body + ng-bind="rowData.name"/> + <td b2b-table-body + ng-bind="rowData.url"/> + </tr> + </tbody> + </table> + </div> + + <!-- no pagination --> + + </div> + + <div style="height: 10px;"> + <!-- space between page number and black footer --> + </div> + + </div><!-- loading --> + +</div><!-- page content --> diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd-router.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd-router.js new file mode 100644 index 0000000..8b23121 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd-router.js @@ -0,0 +1,99 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +appDS2.config(function($routeProvider) { + $routeProvider + .when('/orgchart', { + /* horizontal layout */ + templateUrl: 'app/ecdapp/home/tree_view.html', + controller : 'treeViewController' + }) + .when('/tosca', { + templateUrl: 'app/ecdapp/cloudify/tosca_table.html', + controller : 'toscaTableController' + }) + .when('/bp', { + templateUrl: 'app/ecdapp/cloudify/blueprint_table.html', + controller : 'blueprintTableController' + }) + .when('/dep', { + templateUrl: 'app/ecdapp/cloudify/deployment_table.html', + controller : 'deploymentTableController' + }) + .when('/exe', { + templateUrl: 'app/ecdapp/cloudify/execution_table.html', + controller : 'executionTableController' + }) + .when('/sh', { + templateUrl: 'app/ecdapp/consul/service_health_table.html', + controller : 'serviceHealthTableController' + }) + .when('/nh', { + templateUrl: 'app/ecdapp/consul/node_table.html', + controller : 'nodeTableController' + }) + .when('/dc', { + templateUrl: 'app/ecdapp/consul/datacenter_table.html', + controller : 'datacenterTableController' + }) + .when('/profile/:profileId', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/self_profile.html', + controller: 'selfProfileController' + }) + .when('/profile_search', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/profile_searchDS2.html', + controller : "profileSearchCtrlDS2" + }) + .when('/post_search', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/post.html', + controller: 'postController' + }) + .when('/self_profile', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-profile/self_profile.html', + controller: 'selfProfileController' + }) + .when('/role_list', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/role_list.html', + controller : 'adminController' + }) + .when('/role_function_list', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/role-function.html', + controller : "adminController" + }) + .when('/jcs_admin', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/jcs_admin.html', + controller: 'adminController' + }) + .when('/admin_menu_edit', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/admin-menu-edit.html', + controller: 'AdminMenuEditController' + }) + .when('/usage_list', { + templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-admin/usage.html', + controller: 'usageListControllerDS2' + }) + .otherwise({ + templateUrl: 'app/ecdapp/home/executions_view.html', + controller : 'executionsViewController' + }) + ; + +});
\ No newline at end of file diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd-style.css b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd-style.css new file mode 100644 index 0000000..e08fc31 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd-style.css @@ -0,0 +1,20 @@ +/* Styles for ECOMP Controller Dashboard */ + +.ecd-error-message { + font-size: 14px; + font-weight: bold; + color: red; +} + +.ecd-icon-display { + font-size: 18px; +} + +.ecd-icon-action { + font-size: 18px; +} + +.ecd-icon-action:hover { + color: red; + text-decoration: none; +}
\ No newline at end of file diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd_popup_templates.html b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd_popup_templates.html new file mode 100644 index 0000000..fe4d505 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd_popup_templates.html @@ -0,0 +1,65 @@ +<script type="text/ng-template" id="ecd_title_text_ok_modal.html"> +<div> + <div class="b2b-modal-header ng-scope in"> + <h2 id="myModalLabel" modal-title="">{{msg.title}}</h2> + <div ng-class="msg.icon" style="font-size: 36px;"></div> + <div class="corner-button in"> + <button type="button" class="close" aria-label="Close" + ng-click="$dismiss('cancel')"></button> + </div> + </div> + <div class="b2b-modal-body ng-scope ng-isolate-scope in" tabindex="0" + role="region" aria-label="Modal header text content"> + <p style="word-wrap: break-word;">{{msg.text}}</p> + </div> + <div class="b2b-modal-footer ng-scope ng-isolate-scope in"> + <div class="cta-button-group in"> + <button class="btn btn-alt btn-small" type="button" + ng-click="$dismiss('cancel')">OK</button> + </div> + </div> +</div> +</script> + +<script type="text/ng-template" id="ecd_title_text_ok_cancel_modal.html"> +<div> + <div class="b2b-modal-header ng-scope in"> + <h2 id="myModalLabel" modal-title="">{{msg.title}}</h2> + <div ng-class="msg.icon" style="font-size: 36px;"></div> + <div class="corner-button in"> + <button type="button" class="close" aria-label="Close" + ng-click="$dismiss('cancel')"></button> + </div> + </div> + <div class="b2b-modal-body ng-scope ng-isolate-scope in" tabindex="0" + role="region" aria-label="Modal text content"> + <p style="word-wrap: break-word;">{{msg.text}}</p> + </div> + <div class="b2b-modal-footer ng-scope ng-isolate-scope in"> + <div class="cta-button-group in"> + <button class="btn btn-alt btn-small" type="button" + ng-click="$close()">OK</button> + <button class="btn btn-small" type="button" + ng-click="$dismiss('cancel')">Cancel</button> + </div> + </div> +</div> +</script> + +<script type="text/ng-template" id="modal_warning.html"> + <div class="modal__warning font-showcase" > + <div class="modal__header"> + <h2 class="font-showcase-font-name">{{message.title}}</h2> + <div class="modal__header--icon"></div> + </div> + <div class="divider-container"><hr> </div> + <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/></div> + <div class="modal__footer"> + <button class="button button--primary button--small" + href="javascript:void(0)" + ng-click="$dismiss()"> + Dismiss + </button> + </div> + </div> +</script> diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd_spa.html b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd_spa.html new file mode 100644 index 0000000..e715e05 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecd_spa.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<!-- ECOMP Controller Dashboard single-page application using B2B/DS2. --> +<html> + <head> + <meta charset="UTF-8"> + <title>ECOMP-C Dashboard</title> + <link rel="icon" type="image/ico" href="app/ecdapp/images/onap_32x32.ico" /> + + <!-- Third-party scripts from EPSDK overlay --> + <script src="app/fusion/external/angular-1.4.8/angular.js"></script> + <script src="app/fusion/external/angular-1.4.8/angular-cookies.js"></script> + <script src="app/fusion/external/angular-1.4.8/angular-messages.js"></script> + <script src="app/fusion/external/angular-1.4.8/angular-route.js"></script> + <script src="app/fusion/external/angular-1.4.8/angular-sanitize.js"></script> + <script src="app/fusion/external/angular-1.4.8/angular-touch.js"></script> + <script src="app/fusion/external/jquery/dist/jquery.min.js"></script> + <script src="app/fusion/external/javascript-detect-element-resize/jquery.resize.js"></script> + <script src="app/fusion/external/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> + + <!-- Third-party scripts from app --> + <script src="app/ecdapp/external/bootstrap.min.js" type="text/javascript"></script> + <!-- https://github.com/jeremyfa/yaml.js --> + <script src="app/ecdapp/external/yaml.js" type="text/javascript"></script> + + <script src="app/fusion/external/b2b/js/b2b-angular/b2b-library.min.js"></script> + <!-- Tweaked CSS --> + <link rel="stylesheet" type="text/css" href="app/fusion/external/b2b/css/b2b-angular/b2b-angular.css"> + <link rel="stylesheet" type="text/css" href="app/fusion/external/b2b/css/b2b-angular/font_icons.css"> + + <!-- icons in open source --> + <link rel="stylesheet" type="text/css" href="app/fusion/external/ds2/css/digital-ng-library/ionicons.css"> + <link rel="stylesheet" type="text/css" href="app/fusion/external/ds2/css/digital-ng-library/ecomp-ionicons.css"> + + <link rel="stylesheet" type="text/css" href="app/fusion/styles/ecomp.css"> + + <!-- main app --> + <script src="app/ecdapp/home/modal-service.js"></script> + <script src="app/ecdapp/home/appDS2.js"></script> + + <!-- directives and services --> + <script src="app/fusion/scripts/DS2-services/userInfoServiceDS2.js"></script> + <script src="app/fusion/scripts/DS2-services/headerServiceDS2.js"></script> + <script src="app/fusion/scripts/DS2-services/manifestService.js"></script> + <script src="app/fusion/scripts/DS2-directives/footer.js"></script> + <script src="app/fusion/scripts/DS2-directives/ds2Header.js"></script> + <script src="app/fusion/scripts/DS2-services/leftMenuServiceDS2.js"></script> + <script src="app/fusion/scripts/DS2-directives/ds2LeftMenu.js"></script> + <script src="app/fusion/scripts/DS2-directives/b2b-leftnav-ext.js"></script> + + <!-- ECD home --> + <script src="app/ecdapp/home/tree-view-controller.js"></script> + <script src="app/ecdapp/home/tree-view-directive.js"></script> + <script src="app/ecdapp/home/controller-service.js"></script> + <script src="app/ecdapp/home/ecompc-instances-controller.js"></script> + <script src="app/ecdapp/home/executions-view-controller.js"></script> + <link rel="stylesheet" href="app/ecdapp/home/tree-view-style.css"/> + <link rel="stylesheet" href="app/ecdapp/home/ecd-style.css"/> + + <!-- Cloudify --> + <script src="app/ecdapp/cloudify/blueprint-service.js"></script> + <script src="app/ecdapp/cloudify/deployment-service.js"></script> + <script src="app/ecdapp/cloudify/execution-service.js"></script> + <script src="app/ecdapp/cloudify/tosca-table-controller.js"></script> + <script src="app/ecdapp/cloudify/blueprint-controllers.js"></script> + <script src="app/ecdapp/cloudify/deployment-controllers.js"></script> + <script src="app/ecdapp/cloudify/execution-table-controller.js"></script> + + <!-- Consul --> + <script src="app/ecdapp/consul/service-health-service.js"></script> + <script src="app/ecdapp/consul/service-controllers.js"></script> + <script src="app/ecdapp/consul/node-table-controller.js"></script> + <script src="app/ecdapp/consul/node-health-service.js"></script> + <script src="app/ecdapp/consul/node-services-controller.js"></script> + <script src="app/ecdapp/consul/datacenter-table-controller.js"></script> + <script src="app/ecdapp/consul/datacenter-health-service.js"></script> + + <!-- user admin pages --> + <script src="app/fusion/scripts/DS2-services/adminService.js"></script> + <script src="app/fusion/scripts/DS2-services/ds2-profile/selfProfileService.js"></script> + <script src="app/fusion/scripts/DS2-services/profileServiceDS2.js"></script> + <script src="app/fusion/scripts/DS2-controllers/ds-profile/post-controller.js"></script> + <script src="app/fusion/scripts/DS2-controllers/ds2-profile/self-profile-controller.js"></script> + <script src="app/fusion/scripts/DS2-services/postSearch.js"></script> + <script src="app/fusion/scripts/DS2-controllers/profile-search-controller-DS2.js"></script> + + <!-- app admin pages --> + <script src="app/fusion/scripts/DS2-services/adminMenuService.js"></script> + <script src="app/fusion/scripts/DS2-controllers/admin-controller.js"></script> + <script src="app/fusion/scripts/DS2-controllers/admin-menu-edit.js"></script> + <script src="app/fusion/scripts/DS2-controllers/usage-list-controller.js"></script> + <script src="app/fusion/scripts/DS2-controllers/fn-menu-add-popup-controller.js"></script> + + <!-- main page --> + <script src="app/ecdapp/home/ecd-router.js"></script> + + <style> + .csep-root1{ + background: white; + } + .dropdown-submenu { + position: relative; + } + + .dropdown-submenu .dropdown-menu { + top: 0; + left: 100%; + margin-top: -1px; + } + </style> + + </head> + <body class="appBody" ng-app="abs"> + <!-- double quotation marks are required for the popup templates - values are string literals --> + <div ng-include src="'app/ecdapp/home/ecd_popup_templates.html'"></div> + <div ng-include src="'app/ecdapp/home/ecompc_instances_popup.html'"></div> + <div ng-include src="'app/ecdapp/cloudify/blueprint_popups.html'"></div> + <div ng-include src="'app/ecdapp/cloudify/deployment_popups.html'"></div> + <div ng-include src="'app/ecdapp/consul/service_popups.html'"></div> + <div ng-include src="'app/ecdapp/consul/node_popups.html'"></div> + <div ds2-header id="header" class="header-container"></div> + <div ds2-menu id="menu-container" class="menu-container"></div> + <div ng-view id="rightContentProfile" class="content-container"></div> + <div ds2-footer class="footer-container"></div> + </body> +</html> diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecompc-instances-controller.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecompc-instances-controller.js new file mode 100644 index 0000000..f07d1b3 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecompc-instances-controller.js @@ -0,0 +1,70 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +appDS2.controller('selectEcompcController', function( + $scope, $rootScope, $log, $modalInstance, message, ControllerService) { + + // message brings the table items + + 'use strict'; + + // Set to true for verbose output + var debug = false; + + // this object holds data and functions + $scope.ecdapp = {}; + $scope.ecdapp.tableData = message.items; + + // Populate the model that drives the radio buttons. + // Radio buttons require a model with the value of the button + // that is selected. The data comes across with a boolean + // indicator on each row, selected or not, which is useless + // for driving the radio buttons. This model uses the URL + // as the unique value. + $scope.ecdapp.radiobutton = { + url : null + }; + for (var rowNum in message.items) { + let row = message.items[rowNum]; + if (debug) + $log.debug('selectEcompcController: row is ' + JSON.stringify(row)); + if (row.selected) + $scope.ecdapp.radiobutton.url = row.url; + } + + /** + * Handles a click on radio button to select a controller. + */ + $scope.ecdapp.selectController = function(row) { + if (debug) + $log.debug('selectController: row is ' + JSON.stringify(row)); + if (row == null || row.url == null) + $log.error('selectController invoked with bad argument'); + else + ControllerService.setControllerSelection(row).then(function(data) { + $rootScope.$broadcast('controllerChange', {name: row.name}) + }, + function(error) { + $log.error('selectController failed: ' + error); + }); + }; + +}); diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecompc_instances_popup.html b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecompc_instances_popup.html new file mode 100644 index 0000000..bc523aa --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/ecompc_instances_popup.html @@ -0,0 +1,86 @@ +<script type="text/ng-template" id="ecompc_instances_popup.html"> +<style> + .ecd-parameter-table + { + border: 1px; + width: 550px; + height: 225px; + overflow: auto; + } + .modal + { + display:block + } + .radio input:checked + .skin:after{ + height: 22px; + width: 22px; + } + .close-button + { + background: #0568ae; + color: #ffffff;"; + } + +</style> + + <div class="b2b-modal-header ng-scope"> + <h1 class="heading-page" id="controllerInstance">Select ECOMP-C Instance</h1> + <div class="corner-button in"> + <button type="button" class="close" aria-label="Close" + ng-click="$dismiss('cancel')"></button> + </div> + </div> + + <div class="b2b-modal-body ng-scope ng-isolate-scope" tabindex="0" + role="region" aria-label="Modal body content"> + + <div b2b-table + id="controllers-modal" + class="b2b-table-div" + table-data="ecdapp.tableData" + search-string="ecdapp.searchString" + current-page="ecdapp.currentPageIgnored" + next-sort="ecdapp.nextSortIgnored"> + <table> + <thead b2b-table-row type="header"> + <tr id="th-header-row"> + <th b2b-table-header sortable="false">Selected</th> + <th b2b-table-header key="name">Name</th> + <th b2b-table-header key="url">URL</th> + </tr> + </thead> + + <tbody b2b-table-row type="body" row-repeat="rowData in ecdapp.tableData"> + <tr id="tr-rowData"> + <td b2b-table-body> + <label class="radio"> + <input + type="radio" + name="ecdSelGroup" + title="rowData.url" + ng-value="rowData.url" + ng-model="ecdapp.radiobutton.url" + ng-change="ecdapp.selectController(rowData);"> + <i class="skin"></i> + <span></span> + </label> + </td> + <td b2b-table-body + ng-bind="rowData.name"/> + <td b2b-table-body + ng-bind="rowData.url"/> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="b2b-modal-footer ng-scope ng-isolate-scope"> + <div class="cta-button-group in"> + <button class="btn btn-small close-button" type="button" ng-click="$close()"> + Close + </button> + </div> + </div> + +</script> diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/executions-view-controller.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/executions-view-controller.js new file mode 100644 index 0000000..4b28fed --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/executions-view-controller.js @@ -0,0 +1,122 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +appDS2.controller('executionsViewController', function($scope, $rootScope, ControllerService, $modal, ExecutionService, $log) { + + $scope.parent = { 'blueprint_id': 'Root', 'parent': 'parent' }; + $scope.ecdapp = {}; + $scope.ecdapp.isDataLoading = false; + $scope.controllersList = []; + $scope.controllerCall; + var debug = false; + + var getControllers = function(){ + $scope.ecdapp.isDataLoading = true; + ControllerService.getControllers().then(function(jsonObj) { + if (debug) + $log.debug("verticalComponentController.getControllers succeeded: " + JSON.stringify(jsonObj)); + // Empty + $scope.controllersList.length = 0; + // Refill + jsonObj.filter(function(d) { + $scope.controllersList.push(d); + if (d.selected){ + $scope.parent.blueprint_id = d.name; + $scope.controllerCallDone = true; + } + return; + }); + $scope.ecdapp.isDataLoading = false; + }, function(error) { + $scope.ecdapp.isDataLoading = false; + alert('Failed to load controllers. Please retry.'); + $log.error("verticalComponentController.getControllers failed: " + error); + }); + }; + + $rootScope.$on('controllerChange', function(e, d){ + $scope.parent.blueprint_id = d.name; + }); + + $scope.ecdapp.loadTable = function(status) { + $scope.ecdapp.isDataLoading = true; + + // Empty list and create the root controller item + $scope.orgChartData = []; + + ExecutionService.getExecutionsByStatus(status).then( + function(jsonObj) { + + if (jsonObj.error) { + $log.error("verticalComponentController.loadTable failed: " + + jsonObj.error); + $scope.ecdapp.isRequestFailed = true; + $scope.ecdapp.errMsg = jsonObj.error; + } else { + $scope.ecdapp.isRequestFailed = false; + $scope.ecdapp.errMsg = null; + for (var i=0; i < jsonObj.items.length; i++) { + $scope.orgChartData.push(jsonObj.items[i]); + } + $scope.$broadcast('listenEvent', {data: $scope.orgChartData} ); + setTimeout(function(){$('.child-item').popover()}, 0); + } + $scope.status = status; + $scope.ecdapp.isDataLoading = false; + }, + function(error) { + $log.error("verticalComponentController.loadTable failed: " + + error); + $scope.ecdapp.isRequestFailed = true; + $scope.ecdapp.errMsg = error; + $scope.ecdapp.isDataLoading = false; + }); + }; + + $scope.showEcompCInstancesModalPopup = function() { + var modalInstance = $modal.open({ + templateUrl : 'ecompc_instances_popup.html', + controller : 'selectEcompcController', + windowClass: 'modal-docked', + sizeClass: 'modal-medium', + resolve : { + message : function() { + return { items: $scope.controllersList } + } + } + }); + }; + + $scope.showsubDropdown = function(e){ + $('#submenu').toggle(); + e.stopPropagation(); + e.preventDefault(); + } + + $scope.closeSubMenu = function(){ + $('#submenu').css({display:'none'}) + } + + // Initialize the page + getControllers(); + $scope.ecdapp.loadTable('active'); + $scope.showOrgTable = true; +}); diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/executions_view.html b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/executions_view.html new file mode 100644 index 0000000..f527b2f --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/executions_view.html @@ -0,0 +1,165 @@ +<link rel="stylesheet" href="app/ecdapp/external/bootstrap.min.css" /> +<style> +.csep-root1 { + background: white; +} + +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu .dropdown-menu { + top: 0; + left: 100%; + margin-top: -1px; +} + +.parent-item { + box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8); + -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8); + -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8); + background: #efefef; + padding: 15px; + cursor: pointer; +} + +.child-item { + box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8); + -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8); + -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8); + background: #efefef; + padding: 15px; +} + +.button-style { + padding: 2px 5px; + width: auto; + margin: 3px; + min-width: 15px; +} + +.no-padding { + padding: 0 !important; +} + +.line-height { + height: 2.5em; +} + +.activeStatus { + background: #0568ae; +} + +.activeStatus a { + color: #FFF; +} + +.popover { + width: 400px; +} +</style> + +<div id="page-content"> + <h4 class="heading-page" id="controllers">OOM Managed Executions</h4> + + <div ng-show="ecdapp.isDataLoading"> + <i class="icon-primary-spinner small" role="img" + aria-label="Please wait while the content loads"></i> + Please wait while the content loads. + </div> + + <div class="table-responsive col-sm-12" + style="position: relative; left: 150px;" ng-if="controllerCallDone"> + <div class="col-sm-12"> + <div class="col-sm-4 no-padding" style="margin-top: 20px;"> + <div class="col-sm-12 no-padding" style="display: flex;"> + <div class="parent-item col-sm-10 no-padding"> + <div class="col-sm-12 no-padding line-height"> + <div class="col-xs-10 no-padding text-center"> + <b>{{parent.blueprint_id}}</b> + </div> + <div class="col-xs-2 no-padding dropdown"> + <button + class="btn btn-default button-style icon-controls-gear dropdown-toggle" + data-toggle="dropdown" ng-click="closeSubMenu()"></button> + <ul class="dropdown-menu"> + <li class="dropdown-submenu"> + <a href="javascript:void(0);" tabindex="-1" + ng-click="showsubDropdown($event)"> + Execution Status<span class="icon-controls-right pull-right" style="position: absolute;margin-right: 60px; padding-left: 50px;"></span> + </a> + <ul class="dropdown-menu" id="submenu"> + <li ng-class="{activeStatus: status == 'active'}"><a + href="javascript:void(0);" + ng-click="ecdapp.loadTable('active')">Active</a></li> + <li ng-class="{activeStatus: status == 'cancelled'}"><a + href="javascript:void(0);" + ng-click="ecdapp.loadTable('cancelled')">Cancelled</a></li> + <li ng-class="{activeStatus: status == 'failed'}"><a + href="javascript:void(0);" + ng-click="ecdapp.loadTable('failed')">Failed</a></li> + <li ng-class="{activeStatus: status == 'started'}"><a + href="javascript:void(0);" + ng-click="ecdapp.loadTable('started')">Started</a></li> + <li ng-class="{activeStatus: status == 'terminated'}"><a + href="javascript:void(0);" + ng-click="ecdapp.loadTable('terminated')">Terminated</a></li> + </ul></li> + <li><a href="javascript:void(0);" + ng-click="showEcompCInstancesModalPopup()">Select ECOMP-C + Instance...</a></li> + </ul> + </div> + </div> + <div> + <img src="app/ecdapp/images/ecomp-login-550x360.jpg"> + </div> + <div class="col-sm-12 text-center line-height"> + <span ng-if="orgChartData.length"></span> + </div> + </div> + <div class="col-sm-2 no-padding" ng-if="orgChartData.length"> + <span + style="position: absolute; width: 100%; border: 1px solid #333; top: 50%;"></span> + </div> + </div> + </div> + + <div class="col-sm-4 no-padding" style="margin-top: 20px;"> + <div class="col-sm-12 no-padding" style="position: absolute; margin-top: -23px; margin-left: 54px;" ng-if="orgChartData.length > 0"> + <b>Status: {{status}}</b> + </div> + <div class="col-sm-12 no-padding" style="margin-top: 100px;" ng-if="orgChartData.length == 0 && status"> + <b>No components found with status {{status}}</b> + </div> + <div class="col-sm-12 no-padding" ng-if="orgChartData.length" + ng-repeat="item in orgChartData" + style="display: flex; padding-bottom: 20px !important; border-left: 1px solid #333;"> + <div class="col-sm-2 no-padding"> + <span ng-if="$index == 0" + style="position: absolute; height: 50%; width: 100%; border-left: 2px solid #FFF; left: -2%;"></span> + <span + style="position: absolute; width: 100%; border: 1px solid #333; top: 50%;"></span> + <span ng-if="$index == orgChartData.length-1" + style="position: absolute; top: 50%; width: 100%; height: calc(50% + 20px); left: -5%; border-left: 2px solid #FFFFFF;"></span> + </div> + <div class="col-sm-10 no-padding child-item" + id="callToggle{{$index}}" data-toggle='popover' + data-placement='right' data-trigger='hover' + data-content="Execution Id: {{item.id}}"> + <div class="col-sm-12 no-padding line-height"> + <div class="col-xs-12 no-padding text-center"> + <b>{{item.blueprint_id}}</b> + </div> + </div> + <div> + <img src="app/ecdapp/images/ecomp.png"> + </div> + <div class="col-sm-12 text-center line-height"></div> + </div> + </div> + </div> + </div> + </div> + +</div>
\ No newline at end of file diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/modal-service.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/modal-service.js new file mode 100644 index 0000000..07b5d77 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/modal-service.js @@ -0,0 +1,97 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +angular.module("modalServices",[]).service('modalService', ['$modal', function ($modal) { + + /* + * Defines the same functions available in DS1 using DS2 icons etc. + * Relies on templates defined in ecd_popup_templates.html + */ + + var ModalInstanceCtrl = function ($scope, $modalInstance, $rootScope, items) { + // Pass thru to template as object "msg" + $scope.msg = items; + + $scope.cancel = function () { + $modalInstance.dismiss('cancel'); + }; + }; + + this.showIconTitleTextOkModal = function (icon, title, text) { + var modalInstance = $modal.open({ + templateUrl: 'ecd_title_text_ok_modal.html', + controller: ModalInstanceCtrl, + sizeClass: 'modal-small', + resolve: { + items: function () { + return { + icon: icon, + title: title, + text: text + }; + } + } + }); + }; + + this.showFailure = function (title, text) { + this.showIconTitleTextOkModal('icon-primary-alert', title, text); + }; + + this.showSuccess = function (title, text) { + this.showIconTitleTextOkModal('icon-primary-approval', title, text); + }; + + /* Replicate modals defined by ds2-modal/modalService.js */ + errorPopUp = function(text) { + this.showFailure('Error', text); + }; + successPopUp = function(text) { + this.showSuccess('Success', text); + }; + + this.popupConfirmWin = function(title, text, callback) { + var modalInstance = $modal.open({ + templateUrl: 'ecd_title_text_ok_cancel_modal.html', + controller: ModalInstanceCtrl, + sizeClass: 'modal-small', + resolve: { + items: function () { + return { + icon: 'icon-primary-questionmark', + title: title, + text: text + }; + } + } + }); + var args = Array.prototype.slice.call(arguments, 0); + args.splice(0, 3); + modalInstance.result.then(function(){ + callback.apply(null, args); + }, function() { + // + })['finally'](function(){ + modalInstance = undefined; + }); + }; + + }]); diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-controller.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-controller.js new file mode 100644 index 0000000..577ebe1 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-controller.js @@ -0,0 +1,134 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +appDS2.controller('treeViewController',function( + $scope, $rootScope, $log, $modal, ExecutionService, ControllerService){ + + 'use strict'; + + // Set to true for verbose output + var debug = false; + + // this object holds all app data and functions + $scope.ecdapp = {}; + $scope.ecdapp.isDataLoading = false; + $scope.ecdapp.isRequestFailed = false; + $scope.orgChart = true; + $scope.status = ''; + var selectedItem = { + name: '' + }; + // Initial data as eye candy + $scope.orgChartData = [ { 'blueprint_id': 'Root', 'parent': 'parent' } ]; + var controllersList = []; + + var getControllers = function(){ + ControllerService.getControllers().then(function(jsonObj) { + if (debug) + $log.debug("treeViewController.getControllers succeeded: " + JSON.stringify(jsonObj)); + // Empty + controllersList.length = 0; + // Refill + jsonObj.filter(function(d) { + controllersList.push(d); + if (d.selected) + selectedItem = d; + return; + }); + $scope.ecdapp.loadTable(); + }, function(error) { + alert('Failed to load controllers. Please retry.'); + $log.error("treeViewController.getControllers failed: " + error); + }); + } + + /** + * Called from the directive when user picks a status value. + */ + $scope.ecdapp.loadTable = function(status) { + $scope.ecdapp.isDataLoading = true; + $scope.status = status; + // Empty list and create the root controller item + $scope.orgChartData.length = 0; + $scope.orgChartData.push({ + "blueprint_id": selectedItem.name, + "parent": "parent" + }); + ExecutionService.getExecutionsByStatus(status).then( + function(jsonObj) { + if (jsonObj.error) { + $log.error("treeViewController.loadTable failed: " + + jsonObj.error); + $scope.ecdapp.isRequestFailed = true; + $scope.ecdapp.errMsg = jsonObj.error; + } else { + $scope.ecdapp.isRequestFailed = false; + $scope.ecdapp.errMsg = null; + for (var i=0; i < jsonObj.items.length; i++) { + $scope.orgChartData.push(jsonObj.items[i]); + } + $scope.$broadcast('listenEvent', {data: $scope.orgChartData} ); + } + $scope.ecdapp.isDataLoading = false; + }, + function(error) { + $log.error("treeViewController.loadTable failed: " + + error); + $scope.ecdapp.isRequestFailed = true; + $scope.ecdapp.errMsg = error; + $scope.ecdapp.isDataLoading = false; + }); + }; + + // Listens for change of the selected controller + $rootScope.$on('controllerChange', function(e, d){ + $scope.orgChartData[0].blueprint_id = d.name; + $scope.$broadcast('listenEvent', {data: $scope.orgChartData}); + }) + + // Shows popup with list of controllers + $scope.ecdapp.showEcompCInstancesModalPopup = function() { + var modalInstance = $modal.open({ + templateUrl : 'ecompc_instances_popup.html', + controller : 'selectEcompcController', + windowClass: 'modal-docked', + sizeClass: 'modal-medium', + resolve : { + message : function() { + return { items: controllersList } + } + } + }); + modalInstance.result.then(function(response) { + // Always reload the table + // $log.debug('modalInstance: reloading controllers'); + getControllers('active'); + }, + function(error) { + // Should never happen + $log.error('modalInstance: ERROR!?'); + }); + }; + + // Populate the table on load. + getControllers('active'); + +}); diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-directive.js b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-directive.js new file mode 100644 index 0000000..64b41ec --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-directive.js @@ -0,0 +1,186 @@ +/******************************************************************************* + * =============LICENSE_START========================================================= + * + * ================================================================================= + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + *******************************************************************************/ +(function() { + 'use strict'; + + appDS2.directive("orgChart", supervisorOrgChart); + supervisorOrgChart.$inject = ['$http', '$templateCache', 'ExecutionService']; + + function supervisorOrgChart($http, $templateCache, ExecutionService) { + return { + restrict: 'E', + scope: { + data: '=', + getCall: '&', + modalCall: '&', + status: '=' + }, + + link: function(scope, elem, attrs) { + + scope.$on('listenEvent', function(event, data) { + data = data.data; + scope.data = data; + $('.jOrgChart').remove(); + drawOrgChart(data); + }); + + + var items = [], + mCheck = []; + var currentZoom = 100; + var data = scope.data; + var selectedStatus = scope.status; + function statusSelectoin(status){ + $('#statusclick li').removeClass('active'); + scope.getCall()(status); + } + + function drawOrgChart(data, supervisorOrg) { + items = []; + var itemHtml = ""; + for(var i=0; i<data.length; i++){ + loops(data[i]); + } + function loops(root) { + var className; + if (root.parent == "parent") { + items.push("<li class='root '>" + + "<div><div class='label_node' style='position:relative'>" + + "<span class='' style='position:absolute; left:1px; top:5px'>"+ + "<div class='dropdown dd_"+root.id+"'>"+ + "<div style='float: right;'>"+ + "<button id='dd_"+root.id+"' class='btn btn-default dropdown-toggle icon-misc-filter' type='button' data-toggle='dropdown'>"+ + "</button>"+ + "<ul class='dropdown-menu' id='statusclick'>"+ + "<li id='active'>Active</li>"+ + "<li id='cancelled'>Cancelled</li>"+ + "<li id='terminated'>Terminated</li>"+ + "<li id='failed'>Failed</li>"+ + "</ul>"+ + "</div>"+ + "</div>"+ + "</span>"+ + "<span style='position: absolute; font-size: 12px; left:30px; top:10px' class='title-span'>" + root.blueprint_id + "</span>"+ + "<button id='dd_"+root.id+"' style='margin-top: 5px; position: absolute; right: 2px;' class='openmodal btn btn-default dropdown-toggle icon-controls-gear' " + + "type='button' data-toggle='dropdown'>"+ + "</button>"+ + "</div></div></br>"+ + "<div style='padding-top:25px'><img src='app/ecdapp/images/ecomp-login-550x360.jpg' width='180' height='100'></div>"+ + "<div class='expandBtn'><span id='exp_"+root.id+"'><i class='icon-controls-add-maximize'></i></span></div><ul>"); + } else { + itemHtml = "<li class='child'>"+ + "<div style='padding-top:3px'><span class='label_node'>"+ + + "<span class='title-span'>" + root.blueprint_id + "</span>"+ + "<span class='icon-span ddIcon'>"+ + "<div class='dropdown dd_"+root.id+"'>"+ + "<div style='float: right; margin-top: -14px;'>"+ + "<button id='dd_"+root.id+"' class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'><i class='icon-people-preview'></i>"+ + "<span id='dd_"+root.id+"'></span></button>"+ + "<ul class='dropdown-menu'>"+ + "<li><a tabindex='-1' href='javascript:void(0);'>Execution Id: " + root.id + "</a></li>"+ + "<li><a tabindex='-1' href='javascript:void(0);'>Health Check Status: </a></li>"+ + "<li><a tabindex='-1' href='javascript:void(0);'>Please click here for more information </a></li>"+ + "</ul>"+ + "</div>"+ + "</div>"+ + "</span>"+ + "</span></div></br>"+ + "<div style='padding-top:35px'><img src='app/ecdapp/images/ecomp.png' width='180' height='100'></div></li>"; + items.push(itemHtml); + } + } // End the generate html code + + items.push('</ul></li>'); + var listElem = $("<ul/>", { + "class": "org", + "style": "float:right;", + html: items.join("") + }).appendTo(elem); + + var opts = { + chartElement: elem, + rowcolor: false + }; + //elem.html(''); + $(elem).find(".org").jOrgChart(opts); + listElem.remove(); + + setTimeout(function(){ + $('.dropdown .dropdown-toggle').on("click", function(e){ + var cls = '.'+ e.target.id; + var subcls = cls + ' a.test'; + if($(cls).hasClass('open')){ + $(cls).removeClass('open'); + $(subcls).next('ul').css({display: 'none'}); + } else{ + $(cls).addClass('open'); + } + }); + + $('.dropdown-submenu a.test').on("mouseover", function(e){ + console.log("hi"); + $('#'+e.target.id).next('ul').toggle(); + }); + + $('#statusclick li').click(function(event){ + statusSelectoin(event.target.id); + }) + + $('.openmodal').click(function(event){ + openModal(); + }) + + $(document).on('click','.expandBtn', function(event, data) { + event.stopImmediatePropagation() + var $this = $(this); + var $tr = $this.closest("tr"); + if ($tr.hasClass('contracted')) { + $(this).addClass('fa-minus').removeClass('fa-plus'); + $tr.removeClass('contracted').addClass('expanded'); + $tr.nextAll("tr").css('visibility', ''); + } else { + $(this).addClass('fa-plus').removeClass('fa-minus'); + $tr.removeClass('expanded').addClass('contracted'); + $tr.nextAll("tr").css('visibility', 'hidden'); + } + }); + + var selectedStatus = scope.status; + if(selectedStatus){ + $('#'+selectedStatus).addClass('active'); + } + + function openModal(){ + scope.modalCall()(); + } + + },0); + } + + drawOrgChart(data); + + }, + }; + }; +})();
\ No newline at end of file diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-style.css b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-style.css new file mode 100644 index 0000000..5a3e056 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree-view-style.css @@ -0,0 +1,132 @@ +/* Basic styling */ + +::-webkit-scrollbar +{ + width: 12px; /* for vertical scrollbars */ + height: 7px; /* for horizontal scrollbars */ +} + +::-webkit-scrollbar-track +{ + background: rgba(0, 0, 0, 0.1); +} + +::-webkit-scrollbar-thumb +{ + background: rgba(0, 0, 0, 0.5); +} + +.orgChart .label_node{ + padding-bottom: 5px; +} + +.orgChart .icon-span{ + float:left;width:25px; + padding-top: 3px; +} +.orgChart .title-span{ + width:110px;float:left; font-size:14px; + padding-top: 3px; +} + +/* Draw the lines */ +.jOrgChart{ + position: relative; + /* left: 245px; */ + width:100%; + min-width: 100%; + overflow-x: auto; + +} +.jOrgChart .line { + height : 20px; + width : 4px; +} + +.jOrgChart .down { + background-color : black; + margin : 0px auto; +} + +.jOrgChart .top { + border-top : 3px solid black; +} + +.jOrgChart button{ + min-width : 20px; + width : 20px; + height : 20px; + padding : 0; +} + +.jOrgChart .dropdown{ + display: inline-block; +} + +.jOrgChart .downloadIcon{ + position: relative; + left: 1px; + float:left; +} + +.jOrgChart .ddIcon{ + position: relative; + float: right; + top: 6px; +} + +.jOrgChart .left { + border-right : 2px solid black; +} + +.jOrgChart .right { + border-left : 2px solid black; +} + +/* node cell */ +.jOrgChart td { + text-align : center; + vertical-align : top; + padding : 0 !important; + border : none; + border-bottom : 1px solid white; +} + +/* The node */ +.jOrgChart .node { + background-color : #efefef; + display : inline-block; + width : 180px; + height : 200px; + z-index : 10; + margin : 0 2px; +} + +.expandBtn { + background-color: #efefef; + padding-top:9px; +} + +/* jQuery drag 'n drop */ + +.drag-active { + border-style : dotted !important; +} + +.drop-hover { + border-style : solid !important; + border-color : #E05E00 !important; +} + +#statusclick{ + padding: 0 !important +} + +#statusclick li { + padding :5px; +} + +#statusclick li.active{ + background: #337ab7; + color: white; +}
\ No newline at end of file diff --git a/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree_view.html b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree_view.html new file mode 100644 index 0000000..76cfc87 --- /dev/null +++ b/ecd-app-overlay/src/main/webapp/app/ecdapp/home/tree_view.html @@ -0,0 +1,24 @@ +<!-- Included bootstrap files at a page level to avoid issues with DS2 library --> +<script src="app/ecdapp/external/bootstrap.min.js"></script> +<link rel="stylesheet" href="app/ecdapp/external/bootstrap.min.css"/> + +<div id="page-content"> + + <org-chart data=orgChartData status="status" showOrgTable="showOrgTable" get-call="ecdapp.loadTable" modal-call="ecdapp.showEcompCInstancesModalPopup"> + </org-chart> + <div ng-show="ecdapp.isDataLoading"> + <div class="text-center" style="margin-bottom:20px;"> + <i class="icon-primary-spinner small" role="img" aria-label="Please wait while the content loads"></i> + Please wait while the content loads. + </div> + </div> + <div ng-hide="ecdapp.isDataLoading"> + <div ng-if="orgChartData.length == 1" class="col-xs-12 text-center" style="position:relative;"> + <b>No components found</b> + </div> + </div> + <div ng-show="ecdapp.isRequestFailed"> + <span class="ecd-error-message">{{ecdapp.errMsg}}</span> + </div> + +</div> |