Merge pull request #89 from caskdata/feature/flows

Feature/flows status (flow diagrams)
cdapio · Feb 11, 2015 · ebc93be · ebc93be
2 parents b1d01d5 + a5fc9f0
commit ebc93be
Show file tree

Hide file tree

Showing 16 changed files with 176 additions and 71 deletions.
diff --git a/app/directives/flow-graph/flow.js b/app/directives/flow-graph/flow.js
@@ -9,33 +9,41 @@ module.directive('myFlowGraph', function () {
     },
     link: function (scope, elem, attr) {
 
-      var nodes = scope.model.nodes;
-      var edges = scope.model.edges;
+      scope.$watch('model', function(newVal, oldVal) {
+        if (angular.isObject(newVal) && Object.keys(newVal).length) {
+          scope.render();
+        }
+      });
 
-      var inner = d3.select('g');
+      scope.render = function (){
+        var nodes = scope.model.nodes;
+        var edges = scope.model.edges;
 
-      var renderer = new dagreD3.render();
-      var g = new dagreD3.graphlib.Graph();
+        var inner = d3.select('g');
 
-      g.setGraph({
-        nodesep: 70,
-        ranksep: 30,
-        rankdir: 'LR',
-        marginx: 30,
-        marginy: 30
-      })
-        .setDefaultEdgeLabel(function () { return {}; });
+        var renderer = new dagreD3.render();
+        var g = new dagreD3.graphlib.Graph();
 
-      angular.forEach(nodes, function (node) {
-        g.setNode(node, { label: node });
-      });
+        g.setGraph({
+          nodesep: 70,
+          ranksep: 30,
+          rankdir: 'LR',
+          marginx: 30,
+          marginy: 30
+        })
+          .setDefaultEdgeLabel(function () { return {}; });
 
-      angular.forEach(edges, function (edge) {
-        g.setEdge(edge.sourceName, edge.targetName);
-      });
+        angular.forEach(nodes, function (node) {
+          g.setNode(node, { label: node });
+        });
+
+        angular.forEach(edges, function (edge) {
+          g.setEdge(edge.sourceName, edge.targetName);
+        });
 
-      renderer(inner, g);
+        renderer(inner, g);
+      }
 
     }
   };
-});
+});
diff --git a/app/features/flows/controllers/detail-ctrl.js b/app/features/flows/controllers/detail-ctrl.js
@@ -6,15 +6,18 @@ angular.module(PKG.name + '.feature.flows')
             '/flows/' +
             $state.params.programId;
 
+    $scope.activeRuns = 0;
+
     dataSrc.poll({
       _cdapNsPath: basePath + '/runs'
     }, function(res) {
-        $scope.activeRuns = res.map(function(r) {
-          return (r.status === 'RUNNING'? 1: 0);
-        })
-          .reduce(function(prev, curr) {
-            return prev + curr;
-          });
+        var count = 0;
+        angular.forEach(res, function(runs) {
+          if (runs.status === 'RUNNING') {
+            count += 1;
+          }
+        });
+        $scope.activeRuns = count;
       });
 
     dataSrc.poll({

diff --git a/app/features/flows/controllers/tabs/runs/status-ctrl.js b/app/features/flows/controllers/tabs/runs/status-ctrl.js
@@ -0,0 +1,41 @@
+angular.module(PKG.name + '.feature.flows')
+  .controller('FlowsDetailRunStatusController', function($state, $scope, MyDataSource) {
+    var dataSrc = new MyDataSource($scope),
+        basePath = '/apps/' + $state.params.appId + '/flows/' + $state.params.programId;
+    $scope.data = {};
+    $scope.status = null;
+    $scope.duration = null;
+    $scope.startTime = null;
+    dataSrc.request({
+      _cdapNsPath: basePath
+    })
+      .then(function(res) {
+        var nodes = [];
+        angular.forEach(res.connections, function(conn) {
+          if (conn.sourceType === 'STREAM') {
+            nodes.push(conn.sourceName);
+          }
+        });
+
+        nodes = nodes.concat(Object.keys(res.flowlets));
+
+        $scope.data = {
+          nodes: nodes,
+          edges: res.connections
+        };
+      });
+
+
+    dataSrc.poll({
+      _cdapNsPath: basePath + '/runs'
+    }, function(res) {
+        angular.forEach(res, function(run) {
+          if (run.runid === $state.params.runId) {
+            $scope.status = run.status;
+            $scope.duration = (run.end? run.end - run.start: Date.now() - run.start);
+            $scope.startTime = run.start;
+          }
+        });
+      });
+
+  });
diff --git a/app/features/flows/routes.js b/app/features/flows/routes.js
@@ -53,35 +53,36 @@ angular.module(PKG.name + '.feature.flows')
             })
               .state('flows.detail.runs.detail.status', {
                 url: '/status',
-                template: '<div> Status: {{$state.params.runId}} </div>',
+                templateUrl: '/assets/features/flows/templates/tabs/runs/status.html',
+                controller: 'FlowsDetailRunStatusController',
                 ncyBreadcrumb: {
                   skip: true
                 }
               })
               .state('flows.detail.runs.detail.flowlets', {
                 url: '/flowlets',
-                template: '<div> Flowlets: {{$state.params.runId}} </div>',
+                templateUrl: '/assets/features/flows/templates/tabs/runs/flowlets.html',
                 ncyBreadcrumb: {
                   skip: true
                 }
               })
               .state('flows.detail.runs.detail.data', {
                 url: '/data',
-                template: '<div> Data: {{$state.params.runId}} </div>',
+                templateUrl: '/assets/features/flows/templates/tabs/runs/data.html',
                 ncyBreadcrumb: {
                   skip: true
                 }
               })
               .state('flows.detail.runs.detail.configuration', {
                 url: '/configuration',
-                template: '<div> Configuration: {{$state.params.runId}} </div>',
+                templateUrl: '/assets/features/flows/templates/tabs/runs/configuration.html',
                 ncyBreadcrumb: {
                   skip: true
                 }
               })
               .state('flows.detail.runs.detail.log', {
                 url: '/log',
-                template: '<div> Log: {{$state.params.runId}} </div>',
+                templateUrl: '/assets/features/flows/templates/tabs/runs/log.html',
                 ncyBreadcrumb: {
                   skip: true
                 }

diff --git a/app/features/flows/templates/detail.html b/app/features/flows/templates/detail.html
@@ -10,16 +10,12 @@ <h4 ng-if="activeRuns < 2" ng-bind="activeRuns + ' Active run'"> </h4>
     <h4 ng-if="activeRuns > 2" ng-bind="activeRuns + ' Active runs'"> </h4>
   </div>
   <div class="col-sm-6 text-right h4">
-    <div ng-show="status == 'RUNNING'"
-         class="btn btn-default btn-md"
-         ng-click="toggleFlow('stop')">
-      <span class="fa fa-stop"> </span>
-    </div>
 
-    <div ng-show="status == 'STOPPED'"
+    <div ng-show="status != 'start' && status != 'stop'"
+         ng-disabled = "status == 'RUNNING'"
          class="btn btn-default btn-md"
          ng-click="toggleFlow('start')">
-      <span class="fa fa-play"> </span>
+      <span class="fa fa-play"> Start a new run</span>
     </div>
     <div ng-show="status == 'start' || status == 'stop'"
          class="btn btn-default btn-md">

diff --git a/app/features/flows/templates/tabs/history.html b/app/features/flows/templates/tabs/history.html
@@ -1 +1,3 @@
-<h2> Flows -> History </h2>
+<div class="well well-lg text-center h2">
+  <div> Flows: History - Work In Progress</div>
+</div>
diff --git a/app/features/flows/templates/tabs/metadata.html b/app/features/flows/templates/tabs/metadata.html
@@ -1 +1,3 @@
-<h2> Flows -> Metadata </h2>
+<div class="well well-lg text-center h2">
+  <div> Flows: Metadata - Work In Progress</div>
+</div>
diff --git a/app/features/flows/templates/tabs/resources.html b/app/features/flows/templates/tabs/resources.html
@@ -1 +1,3 @@
-<h2> Flows -> Resources </h2>
+<div class="well well-lg text-center h2">
+  <div> Flows: Resources - Work In Progress</div>
+</div>
diff --git a/app/features/flows/templates/tabs/runs/configuration.html b/app/features/flows/templates/tabs/runs/configuration.html
@@ -0,0 +1,3 @@
+<div class="well well-lg text-center h2">
+  <div> Flow: Configuration - Work In Progress for Run:{{$state.params.runId}}</div>
+</div>
diff --git a/app/features/flows/templates/tabs/runs/data.html b/app/features/flows/templates/tabs/runs/data.html
@@ -0,0 +1,3 @@
+<div class="well well-lg text-center h2">
+  <div> Flow: Data - Work In Progress for Run:{{$state.params.runId}}</div>
+</div>
diff --git a/app/features/flows/templates/tabs/runs/flowlets.html b/app/features/flows/templates/tabs/runs/flowlets.html
@@ -0,0 +1,3 @@
+<div class="well well-lg text-center h2">
+  <div> Flow: Flowlets - Work In Progress for Run:{{$state.params.runId}}</div>
+</div>
diff --git a/app/features/flows/templates/tabs/runs/log.html b/app/features/flows/templates/tabs/runs/log.html
@@ -0,0 +1,3 @@
+<div class="well well-lg text-center h2">
+  <div> Flow: Logs - Work In Progress for Run:{{$state.params.runId}}</div>
+</div>
diff --git a/app/features/flows/templates/tabs/runs/status.html b/app/features/flows/templates/tabs/runs/status.html
@@ -0,0 +1,33 @@
+<div class="row h4">
+  <div class="col-sm-3">
+    <span> Status </span>
+    <div ng-bind="status"></div>
+  </div>
+  <div class="col-sm-3">
+    <span> Started </span>
+    <div ng-bind="startTime"></div>
+  </div>
+  <div class="col-sm-3">
+    <span> Duration </span>
+    <div ng-bind="duration"></div>
+  </div>
+  <div class="col-sm-3 text-right">
+    <div ng-show="status == 'RUNNING'"
+         class="btn btn-default btn-md"
+         ng-click="toggleFlow('stop')">
+      <span class="fa fa-stop"> </span>
+    </div>
+
+    <div ng-show="status == 'STOPPED' || status == 'COMPLETED'"
+          ng-disabled="true"
+         class="btn btn-default btn-md"
+         ng-click="toggleFlow('start')">
+      <span class="fa fa-play"> </span>
+    </div>
+    <div ng-show="status == 'start' || status == 'stop'"
+         class="btn btn-default btn-md">
+      <span class="fa fa-refresh fa-spin"></span>
+    </div>
+  </div>
+</div>
+<my-flow-graph data-model="data"></my-flow-graph>
diff --git a/app/features/flows/templates/tabs/schedules.html b/app/features/flows/templates/tabs/schedules.html
@@ -1 +1,3 @@
-<h2> Flows -> Schedules </h2>
+<div class="well well-lg text-center h2">
+  <div> Flows: Schedules - Work In Progress</div>
+</div>
diff --git a/app/features/foo/edwin.html b/app/features/foo/edwin.html
@@ -1,3 +1,3 @@
 <h1>Graph</h1>
 
-<my-flow-graph model="data"></my-flow-graph>
+<my-flow-graph data-model="data"></my-flow-graph>
diff --git a/app/features/foo/routes.js b/app/features/foo/routes.js
@@ -14,33 +14,36 @@ angular.module(PKG.name+'.feature.foo')
       .state('test-edwin', {
         url: '/test/edwin',
         templateUrl: '/assets/features/foo/edwin.html',
-        controller: function ($scope) {
-          $scope.data = {
-            nodes: [
-              'one',
-              'two',
-              'three',
-              'four',
-              'five',
-              'whew',
-              'err',
-              'six',
-              'seven'
-            ],
-            edges: [
-              { sourceName: 'one', targetName: 'three' },
-              { sourceName: 'two', targetName: 'three' },
-              { sourceName: 'three', targetName: 'four' },
-              { sourceName: 'three', targetName: 'five'},
-              { sourceName: 'whew', targetName: 'seven'},
-              { sourceName: 'four', targetName: 'seven' },
-              { sourceName: 'six', targetName: 'seven'},
-              { sourceName: 'err', targetName: 'seven'},
-              { sourceName: 'five', targetName: 'six' },
-              { sourceName: 'two', targetName: 'seven'},
-              { sourceName: 'four', targetName: 'six'}
-            ]
-          };
+        controller: function ($scope, $timeout) {
+          $scope.data = {};
+          $timeout(function() {
+            $scope.data = {
+              nodes: [
+                'one',
+                'two',
+                'three',
+                'four',
+                'five',
+                'whew',
+                'err',
+                'six',
+                'seven'
+              ],
+              edges: [
+                { sourceName: 'one', targetName: 'three' },
+                { sourceName: 'two', targetName: 'three' },
+                { sourceName: 'three', targetName: 'four' },
+                { sourceName: 'three', targetName: 'five'},
+                { sourceName: 'whew', targetName: 'seven'},
+                { sourceName: 'four', targetName: 'seven' },
+                { sourceName: 'six', targetName: 'seven'},
+                { sourceName: 'err', targetName: 'seven'},
+                { sourceName: 'five', targetName: 'six' },
+                { sourceName: 'two', targetName: 'seven'},
+                { sourceName: 'four', targetName: 'six'}
+              ]
+            };
+          }, 3000);
         }
       })