Related stream service

UI skeleton for related streams

Basic UI for detailed stream info page

Finalize the basic UI

Author: BoykoAlex

ui/app/scripts/routes.js

@@ -183,6 +183,15 @@ define(['./app'], function (dashboard) {
         feature: 'streamsEnabled'
       }
      })
+    .state('home.streams.detailedStream', {
+      url : 'streams/definitions/{streamName}',
+      templateUrl : streamTemplatesPath + '/detailed-stream.html',
+      controller: 'DetailedStreamController',
+      data:{
+        authenticate: true,
+        feature: 'streamsEnabled'
+      }
+    })
 
     .state('home.jobs.tabs.definitions', {
       url : '/definitions',

ui/app/scripts/stream/controllers.js

@@ -54,6 +54,12 @@ define(['angular'], function (angular) {
               $injector.invoke(propertiesDialogController, this, {'$scope': $scope, '$modalInstance': $modalInstance, 'cell': cell, 'streamInfo': streamInfo});
           });
       }])
+      .controller('DetailedStreamController',
+          ['$scope','$injector', function ($scope, $injector) {
+              require(['stream/controllers/detailed-stream'], function (detailedStreamController) {
+                  $injector.invoke(detailedStreamController, this, {'$scope': $scope});
+              });
+          }])
       .controller('DefinitionDeployController',
           ['$scope', '$injector', function ($scope, $injector) {
             require(['stream/controllers/definition-deploy'], function (streamDefinitionDeployController) {

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

@@ -94,6 +94,9 @@ define(['model/pageable'], function (Pageable) {
       $scope.deployStream = function (streamDefinition) {
         $state.go('home.streams.deployStream', {definitionName: streamDefinition.name});
       };
+      $scope.detailed = function(streamDefinition) {
+        $state.go('home.streams.detailedStream', {streamName: streamDefinition.name});
+      };
       $scope.undeployStream = function (streamDefinition) {
         utils.$log.info('Undeploying Stream ' + streamDefinition.name);
         utils.$log.info(streamService);

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

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+/**
+ * Stream definition detailed graph controller
+ *
+ * @author Alex Boyko
+ */
+define(function(require) {
+    'use strict';
+
+    var angular = require('angular');
+
+    return ['DataflowUtils', '$scope', '$state', '$stateParams', 'StreamService',
+        function (utils, $scope, $state, $stateParams, streamService) {
+
+            $scope.back = function() {
+                $state.go('home.streams.tabs.definitions');
+            };
+
+            $scope.streamName = $stateParams.streamName;
+
+            streamService.getRelatedDefinitions($scope.streamName, true).then(function(results) {
+                var streams = results.data._embedded.streamDefinitionResourceList;
+                if (streams && angular.isArray(streams) && streams.length > 0) {
+                    var dsl = '';
+                    streams.forEach(function(stream) {
+                        dsl += stream.name + '=' + stream.dslText + '\n';
+                    });
+                    $scope.definition = {
+                        text: dsl,
+                        name: $scope.streamName
+                    };
+                } else {
+                    $scope.definition = {
+                        text: '',
+                        name: $scope.streamName
+                    };
+                }
+                $scope.flo.updateGraphRepresentation();
+            });
+
+            $scope.$apply();
+
+        }
+    ];
+});

ui/app/scripts/stream/services.js

@@ -53,6 +53,15 @@ define(function(require) {
               url: $rootScope.dataflowServerUrl + '/streams/definitions/' + streamName
             });
           },
+          getRelatedDefinitions: function(streamName, nested) {
+            return $http({
+              method: 'GET',
+              url: $rootScope.dataflowServerUrl + '/streams/definitions/' + streamName + '/related',
+              params: {
+                nested: nested
+              }
+            });
+          },
           deploy: function (streamDefinition, properties) {
             $log.info('Deploy Stream ' + streamDefinition.name);
             return $resource($rootScope.dataflowServerUrl + '/streams/deployments/' + streamDefinition.name, null, {

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

@@ -31,7 +31,7 @@
         <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>
-        <th colspan="3" class="text-center">Actions</th>
+        <th colspan="4" class="text-center">Actions</th>
     </tr>
     </thead>
     <tbody>
@@ -43,6 +43,11 @@
         <td>{{item.name}}</td>
         <td>{{item.dslText}}</td>
         <td>{{item.status}}</td>
+        <td class="action-column">
+            <button type="button" ng-click="detailed(item)" class="btn btn-default">
+                <span class="glyphicon glyphicon-info-sign"></span> Details
+            </button>
+        </td>
         <td class="action-column">
             <button type="button" ng-click="undeployStream(item)"
                     ng-disabled="item.status === 'deploying' || item.status === 'undeployed'"

ui/app/scripts/stream/views/detailed-stream.html

@@ -0,0 +1,7 @@
+<h1>{{streamName}}</h1>
+<flo-editor disable-properties="true" palette-size="170" metamodel-service-name="StreamMetamodelService" init-read-only-canvas="true"
+            render-service-name="StreamRenderService" ng-init="flo.noPalette=true; canvasControls={zoom:true}; paperPadding=65;">
+</flo-editor>
+<div class="text-center" style="padding-top:20px;">
+    <button class="btn btn-default" ng-click="back()">Back</button>
+</div>