Add template show to templates list

Change-Id: I30d8ebb47f9845afa7fd2b8106aeae00333e6eb7

vitrageclient/api/rest/vitrage.py

@@ -103,10 +103,10 @@ class Rca(generic.View):
 class Templates(generic.View):
     """API for vitrage templates."""
 
-    url_regex = r'vitrage/template/'
+    url_regex = r'vitrage/template/(?P<template_id>.+|default)/$'
 
     @rest_utils.ajax()
-    def get(self, request):
+    def get(self, request, template_id):
         """Get a single template with the vitrage id.
 
         The following get template may be passed in the GET
@@ -116,4 +116,4 @@ class Templates(generic.View):
         The result is a template object.
         """
 
-        return api.vitrage.templates(request)
+        return api.vitrage.templates(request, template_id)

vitrageclient/api/vitrage.py

@@ -43,5 +43,7 @@ def rca(request, alarm_id):
     return vitrageclient(request).rca.get(alarm_id=alarm_id)
 
 
-def templates(request):
+def templates(request, template_id='all'):
-    return vitrageclient(request).template.list()
+    if template_id == 'all':
+        return vitrageclient(request).template.list()
+    return vitrageclient(request).template.show(template_id)

vitragedashboard/static/app/core/openstack-service-api/vitrage.service.js

@@ -2,8 +2,8 @@
   'use strict';
 
   angular
-    .module('horizon.app.core.openstack-service-api')
+      .module('horizon.app.core.openstack-service-api')
-    .factory('horizon.app.core.openstack-service-api.vitrage', vitrageAPI);
+      .factory('horizon.app.core.openstack-service-api.vitrage', vitrageAPI);
 
   vitrageAPI.$inject = [
     'horizon.framework.util.http.service',
@@ -34,9 +34,9 @@
       }
 
       return apiService.get('/api/vitrage/topology/', config)
-        .error(function () {
+          .error(function () {
-          toastService.add('error', gettext('Unable to fetch the Vitrage Topology service.'));
+            toastService.add('error', gettext('Unable to fetch the Vitrage Topology service.'));
-        });
+          });
     }
 
     function getAlarms(vitrage_id) {
@@ -44,23 +44,23 @@
         vitrage_id = 'all';
       }
       return apiService.get('/api/vitrage/alarm/'+vitrage_id)
-        .error(function () {
+          .error(function () {
-          toastService.add('error', gettext('Unable to fetch the Vitrage Alarms service.'));
+            toastService.add('error', gettext('Unable to fetch the Vitrage Alarms service.'));
-        });
+          });
     }
 
     function getRca(alarm_id) {
       return apiService.get('/api/vitrage/rca/'+alarm_id)
-        .error(function () {
+          .error(function () {
-          toastService.add('error', gettext('Unable to fetch the Vitrage RCA service.'));
+            toastService.add('error', gettext('Unable to fetch the Vitrage RCA service.'));
-        });
+          });
     }
 
-    function getTemplates() {
+    function getTemplates(template_id) {
-      return apiService.get('/api/vitrage/template/')
+      return apiService.get('/api/vitrage/template/'+template_id)
-        .error(function () {
+          .error(function () {
-          toastService.add('error', gettext('Unable to fetch the Vitrage Templates service.'));
+            toastService.add('error', gettext('Unable to fetch the Vitrage Templates service.'));
-        });
+          });
     }
 
   }

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

@@ -0,0 +1,32 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('horizon.dashboard.project.vitrage')
+    .controller('TemplateContainerController', TemplateContainerController);
+
+  TemplateContainerController.$inject = ['template', '$scope', 'vitrageTopologySrv'];
+
+  function TemplateContainerController(template, $scope, vitrageTopologySrv) {
+    var vm = this;
+    $scope.STATIC_URL = STATIC_URL;
+    vm.isLoading = true;
+
+    var getData = function() {
+      vm.isLoading = true;
+      vitrageTopologySrv.getTemplates(template.uuid)
+        .then(
+          function success(result) {
+            $scope.data = result.data;
+          },
+          function error(result) {
+            console.log('Error in Template Show:', result);
+          }
+        )
+    };
+
+    getData();
+
+  }
+
+})();

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

@@ -0,0 +1,64 @@
+<div class="template-container">
+    <h2 class="tabbed"><b>Template: </b>{$ data.metadata.name $}</h2>
+    <div class="definition-block">
+        <h3>Entities</h3>
+        <table class="table-striped table-rsp table-detail modern tabbed">
+            <tr>
+                <th>ID</th>
+                <th>Category</th>
+                <th>Type</th>
+            </tr>
+            <tr ng-repeat="entity in data.definitions.entities | orderBy: 'entity.category'">
+                <td> <b>{$ entity.entity.template_id | lowercase$}</b></td>
+                <td>{$ entity.entity.category | lowercase$}</td>
+                <td>{$ entity.entity.type | lowercase$}</td>
+            </tr>
+        </table>
+        <br>
+    </div>
+    <div class="definition-block">
+        <h3>Relationships</h3>
+        <table class="table-striped table-rsp table-detail modern">
+            <tr>
+                <th>ID</th>
+                <th>Source</th>
+                <th>Relationship</th>
+                <th>Target</th>
+            </tr>
+            <tr ng-repeat="relationship in data.definitions.relationships">
+                <td><b>{$ relationship.relationship.template_id | lowercase$}</b></td>
+                <td>{$ relationship.relationship.source | lowercase$}</td>
+                <td>{$ relationship.relationship.relationship_type | lowercase$}</td>
+                <td>{$ relationship.relationship.target | lowercase$}</td>
+            </tr>
+        </table>
+        <br>
+    </div>
+    <div class="definition-block">
+        <h3>Scenarios</h3>
+            <ol class="scenario-list">
+                <li ng-repeat="scenario in data.scenarios">
+                    <h4><b>Scenario: </b>{$ scenario.scenario.condition $}</h4>
+                    <div class="tabbed">
+                        <b>Actions</b>
+                        <ol>
+                            <div  ng-repeat="action in scenario.scenario.actions">
+                                <li>
+                                    <ul>
+                                        <li><b>action:</b> {$ action.action.action_type  | lowercase$}</li>
+                                        <li  ng-repeat="(key, value) in action.action.action_target">
+                                            <b>{$ key $}:</b> {$ value  | lowercase$}
+                                        </li>
+                                        <li ng-repeat="(property, value) in action.action.properties">
+                                            <b>{$ property $}:</b> {$ value  | lowercase$}
+                                        </li>
+                                    </ul>
+                                </li>
+                            </div>
+                        </ol>
+                    </div>
+                </li>
+            </ol>
+        <br>
+    </div>
+</div>

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

@@ -0,0 +1,33 @@
+.template-container {
+  overflow: auto;
+  height: 100%;
+  background: #ffffff;
+  opacity: 0.8;
+
+  ul{
+    padding-left: 0;
+    list-style-type: none;
+  }
+
+  ol.scenario-list {
+    list-style-type: upper-roman;
+  }
+
+  th {
+    font-size: 14px;
+  }
+}
+
+.tabbed {
+  padding-left:2em;
+}
+
+.definition-block {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+
+

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

@@ -42,10 +42,10 @@
       }
     }
 
-    function getTemplates() {
+    function getTemplates(template_id) {
 
       if (vitrageAPI) {
-        return vitrageAPI.getTemplates()
+        return vitrageAPI.getTemplates(template_id)
           .success(function(data) {
             return data;
           })

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

@@ -2,8 +2,8 @@
   'use strict';
 
   angular
-    .module('horizon.dashboard.project.vitrage')
+      .module('horizon.dashboard.project.vitrage')
-    .controller('TemplateListController', TemplateListController);
+      .controller('TemplateListController', TemplateListController);
 
   TemplateListController.$inject = ['$scope', '$modal', 'vitrageTopologySrv','$interval'];
 
@@ -45,9 +45,23 @@
     }
 
     function getData() {
-      vitrageTopologySrv.getTemplates().then(function(result){
+      vitrageTopologySrv.getTemplates('all').then(function(result){
         templateList.templates = result.data;
       });
+
+      templateList.onShowClick = function(template) {
+        var modalOptions = {
+          animation: true,
+          templateUrl: STATIC_URL + 'dashboard/project/components/template/templateContainer.html',
+          controller: 'TemplateContainerController',
+          windowClass: 'app-modal-window',
+          resolve: {template: function() {
+            return template;
+          }}
+        };
+
+        $modal.open(modalOptions);
+      }
     }
   }
 

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

@@ -12,9 +12,10 @@
                 <th st-sort="status">{$ 'Status' | translate $}</th>
                 <th st-sort="details">{$ 'Details' | translate $}</th>
                 <th st-sort="timestamp">{$ 'Timestamp' | translate $}</th>
+                <th>{$ 'Show' | translate $}</th>
             </tr>
             <tr>
-                <th colspan="4">
+                <th colspan="5">
                     <hz-search-bar group-classes="input-group-sm"
                                    icon-classes="fa-search">
                     </hz-search-bar>
@@ -27,6 +28,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>
             </tr>
             </tbody>
         </table>

vitragedashboard/static/dashboard/project/vitrage.scss

@@ -13,6 +13,7 @@
 @import 'entities/toolbox/entities-toolbox.scss';
 @import 'entities/entities.scss';
 @import 'templateList/templateList.scss';
+@import 'components/template/templateContainer.scss';
 
 .red {
   color: #FA3C3C;