Improvements to template & rca views

1. Added exit button to both views
2. In template view, added an option
A  to view the yaml contents

Change-Id: I610eb23c769c03d0cde5138351c4c48d8bcdb03d

vitragedashboard/static/dashboard/project/alarmList/alarmList.controller.js

@@ -5,9 +5,9 @@
     .module('horizon.dashboard.project.vitrage')
     .controller('AlarmListController', AlarmListController);
 
-  AlarmListController.$inject = ['$scope', '$modal', 'vitrageTopologySrv','$interval'];
+  AlarmListController.$inject = ['$scope', 'modalSrv', 'vitrageTopologySrv','$interval'];
 
-  function AlarmListController($scope, $modal, vitrageTopologySrv,$interval) {
+  function AlarmListController($scope, modalSrv, vitrageTopologySrv,$interval) {
     var alarmList = this;
     alarmList.alarms = [];
     alarmList.ialarms = [];
@@ -33,7 +33,7 @@
     }
     $scope.$on('$destroy',function(){
       alarmList.stopCollectData();
-    })
+    });
 
     alarmList.autoRefreshChanged = function(){
       if (alarmList.checkboxAutoRefresh){
@@ -42,7 +42,7 @@
       }else{
         stopCollectData();
       }
-    }
+    };
 
     function getData() {
       vitrageTopologySrv.getAlarms('all').then(function(result){
@@ -61,7 +61,7 @@
         }}
       };
 
-      $modal.open(modalOptions);
+      modalSrv.show(modalOptions);
     }
   }
 

vitragedashboard/static/dashboard/project/components/alarms/alarms.directive.js

@@ -13,10 +13,10 @@ function hzAlarms() {
     controllerAs: 'alarmsCtrl'
   };
 
-  AlarmsController.$inject = ['$scope', '$modal', 'vitrageTopologySrv'];
+  AlarmsController.$inject = ['$scope', 'modalSrv', 'vitrageTopologySrv'];
   return directive;
 
-  function AlarmsController($scope, $modal, vitrageTopologySrv) {
+  function AlarmsController($scope, modalSrv, vitrageTopologySrv) {
     var alarmsCtrl = this;
 
     $scope.$watch('selected', function(newData, oldData) {
@@ -39,7 +39,7 @@ function hzAlarms() {
         }}
       };
 
-      $modal.open(modalOptions);
+      modalSrv.show(modalOptions);
     }
   }
 }

vitragedashboard/static/dashboard/project/components/rca/rcaContainer.controller.js

@@ -5,13 +5,17 @@
     .module('horizon.dashboard.project.vitrage')
     .controller('RcaContainerController', RcaContainerController);
 
-  RcaContainerController.$inject = ['alarm', '$scope', 'vitrageTopologySrv'];
+  RcaContainerController.$inject = ['alarm', '$scope', 'modalSrv', 'vitrageTopologySrv'];
 
-  function RcaContainerController(alarm, $scope, vitrageTopologySrv) {
+  function RcaContainerController(alarm, $scope, modalSrv, vitrageTopologySrv) {
     var vm = this;
     $scope.STATIC_URL = STATIC_URL;
     vm.isLoading = true;
 
+    $scope.closeModal = function () {
+      modalSrv.close();
+    };
+
     var getData = function() {
       vm.isLoading = true;
       vitrageTopologySrv.getRootCauseAnalysis(alarm.vitrage_id)

vitragedashboard/static/dashboard/project/components/rca/rootCauseAnalysisGraph.directive.js

@@ -242,7 +242,7 @@ function hzRootCauseAnalysisGraph($filter) {
 
     scope.onCenterGraph = function() {
       centerGraph(false);
-    }
+    };
   }
 }
 

vitragedashboard/static/dashboard/project/components/rca/rootCauseAnalysisGraph.html

@@ -1,5 +1,8 @@
 <div class="root-cause-analysis-graph"  id="root-cause-analysis-graph">
-    <i class="center-button fa fa-refresh" ng-click="onCenterGraph()"></i>
+    <div class="controls">
+        <i class="fa fa-refresh" ng-click="onCenterGraph()"></i>
+        <i class="fa fa-times" ng-click="closeModal()"></i>
+    </div>
     <svg>
         <g class="diagram"></g>
     </svg>

vitragedashboard/static/dashboard/project/components/rca/rootCauseAnalysisGraph.scss

@@ -54,9 +54,18 @@
   #arrowhead {
     fill: #656a70 !important;
   }
+
   .fa{
     display: inline;
   }
+
+  .controls {
+    padding: 15px;
+    float: right;
+    font-size:30px;
+    cursor: pointer;
+  }
+
   .center-button {
     float: right;
     margin: 10px 10px 0 0;

vitragedashboard/static/dashboard/project/components/template/templateContainer.controller.js

@@ -5,22 +5,29 @@
     .module('horizon.dashboard.project.vitrage')
     .controller('TemplateContainerController', TemplateContainerController);
 
-  TemplateContainerController.$inject = ['template', '$scope', 'vitrageTopologySrv'];
+  TemplateContainerController.$inject = ['$scope', 'modalSrv', 'vitrageTopologySrv', 'template'];
 
-  function TemplateContainerController(template, $scope, vitrageTopologySrv) {
+  function TemplateContainerController($scope, modalSrv, vitrageTopologySrv, template) {
     var vm = this;
     $scope.STATIC_URL = STATIC_URL;
     vm.isLoading = true;
 
     var getData = function() {
       vm.isLoading = true;
+
+      $scope.closeModal = function () {
+          modalSrv.close();
+      };
+
       vitrageTopologySrv.getTemplates(template.uuid)
         .then(
           function success(result) {
+            $scope.yaml_view = false;
             $scope.data = result.data;
+            $scope.str_data = JSON.stringify(result.data, null, 4);
           },
           function error(result) {
-            console.log('Error in Template Show:', result);
+            console.error('Error in Template Show:', result);
           }
         )
     };

vitragedashboard/static/dashboard/project/components/template/templateContainer.html

@@ -1,38 +1,46 @@
 <div class="template-container">
-    <h2 class="tabbed"><b>Template: </b>{$ data.metadata.name $}</h2>
-    <div class="definition-block">
-        <h3>Entities</h3>
-        <div ng-repeat="entity in data.definitions.entities | orderBy: 'entity.category' track by entity.entity.template_id">
-            <details>
-                <summary>{$ entity.entity.template_id $}</summary>
-                <div class="tabbed">
-                    <ul>
-                        <li ng-repeat="(property, value) in entity.entity track by $index">
-                            <b>{$ property $}:</b> {$ value $}
-                        </li>
-                    </ul>
-                </div>
-            </details>
-        </div>
-        <br>
+    <div class="controls">
+        <i class="fa" ng-class="{'fa-file-text':!yaml_view, 'fa-list':yaml_view}" ng-click="yaml_view = !yaml_view;"></i>
+        <i class="fa fa-times" ng-click="closeModal()"></i>
     </div>
-    <div class="definition-block">
-        <h3>Relationships</h3>
-        <div ng-repeat="rel in data.definitions.relationships track by rel.relationship.template_id">
-            <details>
-                <summary>{$ rel.relationship.template_id $}</summary>
-                <div class="tabbed">
-                    <ul>
-                        <li ng-repeat="(property, value) in rel.relationship track by $index">
-                            <b>{$ property $}:</b> {$ value $}
-                        </li>
-                    </ul>
-                </div>
-            </details>
+    <h2 class="tabbed">
+        <b>Template: </b>
+        <span id="template_name">{$ data.metadata.name $}</span>
+    </h2>
+    <div ng-hide="yaml_view">
+        <div class="definition-block">
+            <h3>Entities</h3>
+            <div ng-repeat="entity in data.definitions.entities | orderBy: 'entity.category' track by entity.entity.template_id">
+                <details>
+                    <summary>{$ entity.entity.template_id $}</summary>
+                    <div class="tabbed">
+                        <ul>
+                            <li ng-repeat="(property, value) in entity.entity track by $index">
+                                <b>{$ property $}:</b> {$ value $}
+                            </li>
+                        </ul>
+                    </div>
+                </details>
+            </div>
+            <br>
         </div>
-        <br>
-    </div>
-    <div class="definition-block">
+        <div class="definition-block">
+            <h3>Relationships</h3>
+            <div ng-repeat="rel in data.definitions.relationships track by rel.relationship.template_id">
+                <details>
+                    <summary>{$ rel.relationship.template_id $}</summary>
+                    <div class="tabbed">
+                        <ul>
+                            <li ng-repeat="(property, value) in rel.relationship track by $index">
+                                <b>{$ property $}:</b> {$ value $}
+                            </li>
+                        </ul>
+                    </div>
+                </details>
+            </div>
+            <br>
+        </div>
+        <div class="definition-block">
         <h3>Scenarios</h3>
             <div ng-repeat="scenario in data.scenarios track by $index">
                 <details>
@@ -59,4 +67,10 @@
             </div>
         <br>
     </div>
+    </div>
+    <div ng-show="yaml_view" class="definition-block">
+        <pre contentEditable="false">
+            {$ str_data $}
+        </pre>
+    </div>
 </div>

vitragedashboard/static/dashboard/project/components/template/templateContainer.scss

@@ -18,8 +18,19 @@
   }
 }
 
+.controls {
+  padding: 15px;
+  float: right;
+  font-size:30px;
+  cursor: pointer;
+}
+
+.fa{
+  display: inline;
+}
+
 .tabbed {
-  padding-left:2em;
+  padding-left:1em;
 }
 
 .definition-block {
@@ -36,6 +47,10 @@
   summary:focus {
     outline: none;
   }
+
+  pre {
+    color: #000;
+  }
 }
 
 

vitragedashboard/static/dashboard/project/services/modal.service.js

@@ -0,0 +1,29 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('horizon.dashboard.project.vitrage')
+        .service('modalSrv', ModalSrv);
+
+    ModalSrv.$inject = ['$modal'];
+
+    function ModalSrv($modal) {
+        var modalInstance = null;
+
+        function show(modalOptions) {
+            modalInstance = $modal.open(modalOptions);
+        }
+
+        function close() {
+            if(modalInstance) {
+                modalInstance.close();
+                modalInstance = null;
+            }
+        }
+
+        return {
+            show: show,
+            close: close
+        }
+    }
+})();

vitragedashboard/static/dashboard/project/templateList/templateList.controller.js

@@ -5,44 +5,16 @@
       .module('horizon.dashboard.project.vitrage')
       .controller('TemplateListController', TemplateListController);
 
-  TemplateListController.$inject = ['$scope', '$modal', 'vitrageTopologySrv','$interval'];
+  TemplateListController.$inject = ['$scope', 'modalSrv', 'vitrageTopologySrv'];
 
-  function TemplateListController($scope, $modal, vitrageTopologySrv,$interval) {
+  function TemplateListController($scope, modalSrv, vitrageTopologySrv) {
     var templateList = this;
     templateList.templates = [];
     templateList.itemplates = [];
-    templateList.$interval = $interval;
-    templateList.checkboxAutoRefresh = true;
     $scope.STATIC_URL = STATIC_URL;
     templateList.templates = [];
-    templateList.templateInterval;
 
     getData();
-    startCollectData();
-
-    function startCollectData() {
-      if (angular.isDefined(templateList.templateInterval)) return;
-      templateList.templateInterval = templateList.$interval(getData,10000);
-    }
-
-    function stopCollectData() {
-      if (angular.isDefined(templateList.templateInterval)) {
-        templateList.$interval.cancel(templateList.templateInterval);
-        templateList.templateInterval = undefined;
-      }
-    }
-    $scope.$on('$destroy',function(){
-      templateList.stopCollectData();
-    })
-
-    templateList.autoRefreshChanged = function(){
-      if (templateList.checkboxAutoRefresh){
-        getData();
-        startCollectData();
-      }else{
-        stopCollectData();
-      }
-    }
 
     function getData() {
       vitrageTopologySrv.getTemplates('all').then(function(result){
@@ -60,7 +32,7 @@
           }}
         };
 
-        $modal.open(modalOptions);
+        modalSrv.show(modalOptions);
       }
     }
   }

vitragedashboard/static/dashboard/project/templateList/templateList.html

@@ -1,8 +1,4 @@
 <div class="template-list" ng-controller="TemplateListController as templateList">
-    <div class="themable-checkbox refreshBtn">
-        <input type="checkbox" ng-model="templateList.checkboxAutoRefresh" id="themable-checkbox" ng-change="templateList.autoRefreshChanged()">
-        <label for="themable-checkbox" translate>Auto Refresh</label>
-    </div>
     <div class="panel panel-default" >
 
         <table st-table='templateList.itemplates' st-safe-src="templateList.templates" class="table-striped table-rsp table-detail modern" hz-table>
@@ -28,7 +24,7 @@
                 <td>{$template.status$}</td>
                 <td>{$template["status details"]$}</td>
                 <td><i class="fa fa-clock-o"></i> {$template.date | date:"yyyy-MM-dd hh:mm:ss"$} </td>
-                <td ng-click="templateList.onShowClick(template)"><i class="fa fa-sitemap"></i></td>
+                <td ng-click="templateList.onShowClick(template)"><i class="fa fa-list"></i></td>
             </tr>
             </tbody>
         </table>

vitragedashboard/static/dashboard/project/vitrage.scss

@@ -1,13 +1,10 @@
-@import 'layout/main/compute/compute';
+@import 'layout/main/compute/compute.scss';
 @import 'alarmList/alarmList.scss';
-@import 'components/sunburst/sunburst';
+@import 'components/sunburst/sunburst.scss';
 @import 'components/alarms/alarms.scss';
 @import 'components/rca/rootCauseAnalysisGraph.scss';
 @import 'components/rca/rcaContainer.scss';
-@import 'components/alarms/alarms';
-@import 'components/rca/rcaContainer';
-@import 'components/rca/rootCauseAnalysisGraph';
-@import 'components/information/information';
+@import 'components/information/information.scss';
 @import 'entities/graph/entities-graph.scss';
 @import 'entities/info/entities-info.scss';
 @import 'entities/toolbox/entities-toolbox.scss';