Read-only stream graph definition and deploy state graph colouring

Author: BoykoAlex

ui/app/images/collapsed.svg

@@ -42,6 +42,12 @@ define(['angular'], function (angular) {
               $injector.invoke(createStreamsDialogController, this, {'$scope': $scope, '$modalInstance': $modalInstance, 'definitionData': definitionData});
           });
       }])
+      .controller('StreamController',
+          ['$scope','$injector', function ($scope, $injector) {
+              require(['stream/controllers/stream'], function (streamController) {
+                  $injector.invoke(streamController, this, {'$scope': $scope});
+              });
+          }])
       .controller('PropertiesDialogController',
       ['$scope','$injector', '$modalInstance', 'cell', 'streamInfo', function ($scope, $injector, $modalInstance, cell, streamInfo) {
           require(['stream/controllers/properties-dialog'], function (propertiesDialogController) {

ui/app/images/expanded.svg

@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2014 the original author or authors.
+ * Copyright 2013-2016 the original author or authors.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,11 +18,17 @@
  * Stream Definition controller
  *
  * @author Ilayaperumal Gopinathan
+ * @author Alex Boyko
  */
 define(['model/pageable'], function (Pageable) {
   'use strict';
-  return ['$scope', 'StreamService', 'DataflowUtils', '$timeout', '$rootScope', '$state',
-    function ($scope, streamService, utils, $timeout, $rootScope, $state) {
+
+  var EXPANDED_STATE_COOKIE_KEY = 'stremDefs.expandedState';
+
+  return ['$scope', 'StreamService', 'DataflowUtils', '$timeout', '$rootScope', '$state', '$cookieStore',
+    function ($scope, streamService, utils, $timeout, $rootScope, $state, $cookieStore) {
+
+      var getStreamDefinitions;
 
       function loadStreamDefinitions(pageable, showGrowl) {
         //utils.$log.info('pageable', pageable);
@@ -37,7 +43,7 @@ define(['model/pageable'], function (Pageable) {
                 $scope.pageable.items = result._embedded.streamDefinitionResourceList;
               }
               $scope.pageable.total = result.page.totalElements;
-              var getStreamDefinitions = $timeout(function() {
+              getStreamDefinitions = $timeout(function() {
                 loadStreamDefinitions($scope.pageable, false);
               }, $rootScope.pageRefreshTime);
               $scope.$on('$destroy', function(){
@@ -49,11 +55,37 @@ define(['model/pageable'], function (Pageable) {
         );
       }
 
+      var expandedState = $cookieStore.get(EXPANDED_STATE_COOKIE_KEY) || {};
+
       $scope.pageable = new Pageable();
       $scope.pagination = {
         current: 1
       };
 
+      $scope.toggleExpanded = function(name) {
+        if (expandedState[name]) {
+          delete expandedState[name];
+        } else {
+          expandedState[name] = true;
+        }
+      };
+
+      $scope.isExpanded = function(name) {
+        return expandedState[name];
+      };
+
+      $scope.collapsePage = function() {
+        $scope.pageable.items.forEach(function(item) {
+            delete expandedState[item.name];
+        });
+      };
+
+      $scope.expandPage = function() {
+        $scope.pageable.items.forEach(function(item) {
+          expandedState[item.name] = true;
+        });
+      };
+
       $scope.pageChanged = function(newPage) {
         $scope.pageable.pageNumber = newPage-1;
         loadStreamDefinitions($scope.pageable);
@@ -84,6 +116,7 @@ define(['model/pageable'], function (Pageable) {
         streamService.destroy(streamDefinition).$promise.then(
             function () {
               utils.growl.success('Destroy Request Sent.');
+              delete expandedState[streamDefinition.name];
               streamDefinition.inactive = true;
               $scope.closeModal();
             },
@@ -94,6 +127,18 @@ define(['model/pageable'], function (Pageable) {
         );
       };
 
+      $scope.$on('$destroy', function() {
+        if (Object.keys(expandedState).length === 0) {
+          $cookieStore.remove(EXPANDED_STATE_COOKIE_KEY);
+        } else {
+          $cookieStore.put(EXPANDED_STATE_COOKIE_KEY, expandedState);
+        }
+        if (getStreamDefinitions) {
+          $timeout.cancel(getStreamDefinitions);
+        }
+      });
+
       loadStreamDefinitions($scope.pageable);
+
     }];
 });

ui/app/scripts/stream/controllers.js

@@ -0,0 +1,140 @@
+/*
+ * Copyright 2016 the original author or authors.
+ *
+ * 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.
+ */
+
+define(function (require) {
+    'use strict';
+
+    var joint = require('joint');
+
+    var ANIMATION_DURATION = 1500;
+
+    var statusToFilter = {
+        undeployed: 'grayscale',
+        deploying: 'grayscale',
+        partial: 'grayscale',
+        incomplete: 'orangescale',
+        failed: 'redscale'
+    };
+
+    return ['$scope', function ($scope) {
+
+        function isFlashing() {
+            return $scope.item.status === 'deploying' || $scope.item.status === 'partial';
+        }
+
+        // End of transition callback
+        function endTransition(cell, transition) {
+            // Consider only at animations that are done on appropriate color filter
+            if (transition === 'attrs/.shape/filter/args/amount') {
+                // Color filter turned off -> remove colour filter
+                if (cell.attr('.shape/filter/args/amount') === 0) {
+                    cell.attr('.shape/filter', null);
+                }
+                // Remove end of transition event callback
+                cell.off('transition:end', endTransition);
+                if (isFlashing()) {
+                    // Switch on/off colour filter if shape should be flashing
+                    transitionFilter(cell, cell.attr('.shape/filter') ? undefined : statusToFilter[$scope.item.status]);
+                }
+            }
+        }
+
+        // Stop colour filter animation
+        function stopAnimation(cell) {
+            // Remove end of transition event callback
+            cell.off('transition:end', endTransition);
+            // Stop the colour filter animation
+            cell.stopTransitions('attrs/.shape/filter/args/amount');
+        }
+
+        // Transitions between filters applying animation where appropriate
+        function transitionFilter(cell, newFilter) { // jshint ignore:line
+            var oldFilter = cell.attr('.shape/filter/name');
+            if (newFilter !== oldFilter) {
+                if (!oldFilter) {
+                    stopAnimation(cell);
+                    cell.attr('.shape/filter', {name: newFilter, args: {amount: 0}});
+                    cell.transition('attrs/.shape/filter/args/amount', 1, {
+                        delay: 0,
+                        duration: ANIMATION_DURATION,
+                        valueFunction: joint.util.interpolate.number,
+                        timingFunction: joint.util.timing.quad
+                    });
+                    cell.on('transition:end', endTransition);
+                } else if (!newFilter) {
+                    // Ensure that filter amount is set explicitly!
+                    stopAnimation(cell);
+                    cell.attr('.shape/filter/args/amount', 1);
+                    cell.transition('attrs/.shape/filter/args/amount', 0, {
+                        delay: 0,
+                        duration: ANIMATION_DURATION,
+                        valueFunction: joint.util.interpolate.number,
+                        timingFunction: joint.util.timing.quad
+                    });
+                    cell.on('transition:end', endTransition);
+                } else {
+                    cell.attr('.shape/filter', {name: newFilter});
+                }
+            }
+        }
+
+        // Initial setting of the colour feedback for an app shape
+        function initAppColouring(cell) {
+            // Check if it one the apps, destination or tap shapes
+            if (cell.attr('metadata/group')) {
+                // Stop any color filter animation if there is any in progress
+                stopAnimation(cell);
+                // Unset color filter
+                cell.removeAttr('.shape/filter');
+                var status = $scope.item.status;
+                var filter = statusToFilter[status];
+                // If filter needs to be applied, do so.
+                if (filter) {
+                    if (isFlashing()) {
+                        // If shape needs to be flashed, start animation of the color filter.
+                        transitionFilter(cell, filter);
+                    } else {
+                        // Otherwise, set the colour filter
+                        cell.attr('.shape/filter', {name: filter});
+                    }
+                }
+            }
+        }
+
+        // Assign the right color filter to graph cells based on module status
+        // Graph is populated once meta-model promise is resolved, hence at this moment there might be no graph
+        // contents. Therefore, just add a listener to track when cells are added to the graph and adjust the color
+        // filter for the newly added cell.
+        $scope.flo.getGraph().on('add', function (cell) {
+            initAppColouring(cell);
+        });
+
+        $scope.$watch(function () {
+            return $scope.item.status;
+        }, function (newValue, oldValue) {
+            if (newValue !== oldValue) {
+                $scope.flo.getGraph().getElements().forEach(function (cell) {
+                    transitionFilter(cell, statusToFilter[$scope.item.status]);
+                });
+            }
+        });
+
+        $scope.flo.getGraph().getElements().forEach(function (cell) {
+            initAppColouring(cell);
+        });
+
+    }];
+});

ui/app/scripts/stream/controllers/definitions.js

@@ -1,16 +1,33 @@
 <div class="row">
     <div class="col-md-12">
         <div class="col-md-12 table-filter">
-            <div class="col-md-4 col-md-offset-8">
-                <input type="text" class="form-control" ng-model="filterQuery" id="filterTable"
-                       placeholder="Quick filter">
-            </div>
+            <table class="col-lg-12 tab-content-header">
+                <tr>
+                    <td class="col-xs-8">
+                        <button type="button" ng-click="expandPage();"
+                                class="btn btn-default"
+                        ><span class="glyphicon glyphicon-collapse-down"></span>
+                            Expand All
+                        </button>
+                        <button type="button" ng-click="collapsePage();"
+                                class="btn btn-default"
+                        ><span class="glyphicon glyphicon-expand"></span>
+                            Collapse All
+                        </button>
+                    </td>
+                    <td>
+                        <input type="text" class="form-control" ng-model="filterQuery" id="filterTable"
+                               placeholder="Quick filter">
+                    </td>
+                </tr>
+            </table>
         </div>
     </div>
 </div>
-<table class="table table-striped table-hover">
+<table class="table table-double-striped table-hover">
     <thead>
     <tr>
+        <th></th>
         <th>Name</th>
         <th>Definition</th>
         <th>Status <a class="status-help" dataflow-popover=".status-help-content" title="Available Deployment Statuses"><span class="glyphicon glyphicon-question-sign"></span></a></th>
@@ -19,7 +36,10 @@
     </thead>
     <tbody>
 
-    <tr dir-paginate="item in pageable.items | itemsPerPage: pageable.pageSize | filter:filterQuery" total-items="pageable.total" ng-show="!item.inactive">
+    <tr dir-paginate-start="item in pageable.items | itemsPerPage: pageable.pageSize | filter:filterQuery track by item.name" total-items="pageable.total" ng-show="!item.inactive">
+        <td>
+            <button class="collapse-handle-button" ng-click="toggleExpanded(item.name)" ng-class="{on:isExpanded(item.name)}"></button>
+        </td>
         <td>{{item.name}}</td>
         <td>{{item.dslText}}</td>
         <td>{{item.status}}</td>
@@ -44,6 +64,12 @@
             </button>
         </td>
     </tr>
+    <tr dir-paginate-end ng-show="!item.inactive">
+        <td ng-if="isExpanded(item.name)" colspan="7" ng-class="{undeployed: item.status !== 'deployed'}">
+            <flo-editor ng-controller="StreamController" init-read-only-canvas="true" metamodel-service-name="StreamMetamodelService" render-service-name="StreamRenderService" init-read-only-canvas="true"
+                        ng-init="paperPadding=65; definition.text=item.dslText; flo.noPalette=true; canvasControls={zoom:true};"></flo-editor>
+        </td>
+    </tr>
     </tbody>
 </table>
 <dir-pagination-controls template-url="scripts/directives/dirPagination.tpl.html"

ui/app/scripts/stream/controllers/stream.js

@@ -302,3 +302,12 @@ input.btn.ng-invalid {
 .IntNode .box {
   stroke: @spring-green;
 }
+
+.table .flow-view {
+  height: 225px;
+}
+
+.undeployed .canvas {
+  border-color: @spring-grey;
+}
+

ui/app/scripts/stream/views/definitions.html

@@ -363,6 +363,30 @@ hr {
   margin: 5px 0px 5px 0px;
 }
 
+.collapse-handle-button {
+  width: 24px;
+  height: 24px;
+  background: transparent url(../images/collapsed.svg) no-repeat;
+  border: 0px;
+  outline: none;
+}
+
+.collapse-handle-button.on {
+  background-image: url(../images/expanded.svg);
+}
+
+.table-double-striped > tbody > tr:nth-child(4n-1) > td {
+  background-color: @spring-light-grey;
+}
+
+.table-double-striped > tbody > tr:nth-child(4n) > td {
+  background-color: @spring-light-grey;
+}
+
+.table-double-striped > tbody > tr:nth-child(2n) > td {
+  border-top-width: 0px;
+}
+
 @import (less) "../lib/spring-flo/spring-flo.css";
 
 @import "analytics.less";