[FLINK-3719][web frontend] Moving the barrier between graph and stats

This closes apache#2467

LICENSE

@@ -233,6 +233,7 @@ The Apache Flink project bundles the following files under the MIT License:
  - moment.js v2.10.6 (http://momentjs.com/docs/) - Copyright (c) 2011-2014 Tim Wood, Iskren Chernev, Moment.js contributors
  - moment-duration-format v1.3.0 (https://github.com/jsmreese/moment-duration-format) - Copyright (c) 2013 John Madhavan-Reese
  - qTip2 v2.2.1 (http://qtip2.com) - Copyright (c) 2012 Craig Michael Thompson
+ - Split.js v1.0.6 (https://nathancahill.github.io/Split.js/) - Copyright (c) 2015 Nathan Cahill
 
 All rights reserved.
 

flink-runtime-web/web-dashboard/app/index.jade

@@ -73,4 +73,4 @@ html(lang='en')
               | Submit new Job
 
     #content(ng-class="{ 'sidebar-visible': sidebarVisible }")
-      div(ui-view='main')
+      #main(ui-view='main')

flink-runtime-web/web-dashboard/app/partials/jobs/job.jade

@@ -62,4 +62,4 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main-additional(ng-if="job")
       a(ui-sref=".config") Configuration
 
 #content-inner.has-navbar-main-additional
-  div(ui-view="details")
+  #details(ui-view="details")

flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.jade

@@ -15,28 +15,31 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 
-.canvas-wrapper
-  div.main-canvas(job-plan, plan="plan", jobid="{{jobid}}", set-node="changeNode(nodeid)")
+split
+  .split#canvas
+    .canvas-wrapper
+      div.main-canvas(job-plan, plan="plan", jobid="{{jobid}}", set-node="changeNode(nodeid)")
 
-.panel.panel-default.panel-multi(ng-if="plan")
-  nav.navbar.navbar-default.navbar-secondary-additional
-    ul.nav.nav-tabs
-      li(ui-sref-active='active')
-        a(ui-sref=".subtasks({nodeid: nodeid})") Subtasks
+  .split#job-panel
+    .panel.panel-default.panel-multi(ng-if="plan")
+      nav.navbar.navbar-default.navbar-secondary-additional
+        ul.nav.nav-tabs
+          li(ui-sref-active='active')
+            a(ui-sref=".subtasks({nodeid: nodeid})") Subtasks
 
-      li(ui-sref-active='active')
-        a(ui-sref=".metrics({nodeid: nodeid})") Metrics
+          li(ui-sref-active='active')
+            a(ui-sref=".metrics({nodeid: nodeid})") Metrics
 
-      li(ui-sref-active='active')
-        a(ui-sref=".taskmanagers({nodeid: nodeid})") TaskManagers
+          li(ui-sref-active='active')
+            a(ui-sref=".taskmanagers({nodeid: nodeid})") TaskManagers
 
-      li(ui-sref-active='active')
-        a(ui-sref=".accumulators({nodeid: nodeid})") Accumulators
+          li(ui-sref-active='active')
+            a(ui-sref=".accumulators({nodeid: nodeid})") Accumulators
 
-      li(ui-sref-active='active')
-        a(ui-sref=".checkpoints({nodeid: nodeid})") Checkpoints
+          li(ui-sref-active='active')
+            a(ui-sref=".checkpoints({nodeid: nodeid})") Checkpoints
 
-      li(ng-if="job.state == 'RUNNING'" ui-sref-active='active')
-        a(ui-sref=".backpressure({nodeid: nodeid})") Back Pressure
+          li(ng-if="job.state == 'RUNNING'" ui-sref-active='active')
+            a(ui-sref=".backpressure({nodeid: nodeid})") Back Pressure
 
-  .panel-body.clean(ui-view="node-details")
+      .panel-body.clean#node-details(ui-view="node-details")

flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee

@@ -89,7 +89,7 @@ angular.module('flinkApp')
 
 # --------------------------------------
 
-.controller 'JobPlanController', ($scope, $state, $stateParams, JobsService) ->
+.controller 'JobPlanController', ($scope, $state, $stateParams, $window, JobsService) ->
   $scope.nodeid = null
   $scope.nodeUnfolded = false
   $scope.stateList = JobsService.stateList()

flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee

@@ -120,7 +120,7 @@ angular.module('flinkApp')
       angular.forEach data, (vertex) ->
         if vertex['start-time'] > -1
           if vertex.type is 'scheduled'
-            testData.push 
+            testData.push
               times: [
                 label: translateLabel(vertex.name)
                 color: "#cccccc"
@@ -130,7 +130,7 @@ angular.module('flinkApp')
                 type: vertex.type
               ]
           else
-            testData.push 
+            testData.push
               times: [
                 label: translateLabel(vertex.name)
                 color: "#d9f1f7"
@@ -168,6 +168,13 @@ angular.module('flinkApp')
     return
 
 # ----------------------------------------------
+.directive 'split', () -> 
+  return compile: (tElem, tAttrs) ->
+      Split(tElem.children(), (
+        sizes: [50, 50]
+        direction: 'vertical'
+      ))
+# ----------------------------------------------
 
 .directive 'jobPlan', ($timeout) ->
   template: "
@@ -204,27 +211,27 @@ angular.module('flinkApp')
 
     scope.zoomIn = ->
       if mainZoom.scale() < 2.99
-        
+
         # Calculate and store new values in zoom object
         translate = mainZoom.translate()
         v1 = translate[0] * (mainZoom.scale() + 0.1 / (mainZoom.scale()))
         v2 = translate[1] * (mainZoom.scale() + 0.1 / (mainZoom.scale()))
         mainZoom.scale mainZoom.scale() + 0.1
         mainZoom.translate [ v1, v2 ]
-        
+
         # Transform svg
         d3mainSvgG.attr "transform", "translate(" + v1 + "," + v2 + ") scale(" + mainZoom.scale() + ")"
 
     scope.zoomOut = ->
       if mainZoom.scale() > 0.31
-        
+
         # Calculate and store new values in mainZoom object
         mainZoom.scale mainZoom.scale() - 0.1
         translate = mainZoom.translate()
         v1 = translate[0] * (mainZoom.scale() - 0.1 / (mainZoom.scale()))
         v2 = translate[1] * (mainZoom.scale() - 0.1 / (mainZoom.scale()))
         mainZoom.translate [ v1, v2 ]
-        
+
         # Transform svg
         d3mainSvgG.attr "transform", "translate(" + v1 + "," + v2 + ") scale(" + mainZoom.scale() + ")"
 
@@ -253,7 +260,7 @@ angular.module('flinkApp')
 
       else
         'node-normal'
-      
+
     # creates the label of a node, in info is stored, whether it is a special node (like a mirror in an iteration)
     createLabelNode = (el, info, maxW, maxH) ->
       # labelValue = "<a href='#/jobs/" + jobid + "/vertex/" + el.id + "' class='node-label " + getNodeType(el, info) + "'>"
@@ -268,21 +275,20 @@ angular.module('flinkApp')
         labelValue += ""
       else
         stepName = el.description
-        
+
         # clean stepName
         stepName = shortenString(stepName)
         labelValue += "<h4 class='step-name'>" + stepName + "</h4>"
-      
+
       # If this node is an "iteration" we need a different panel-body
       if el.step_function?
         labelValue += extendLabelNodeForIteration(el.id, maxW, maxH)
       else
-        
-        # Otherwise add infos    
+
+        # Otherwise add infos
         labelValue += "<h5>" + info + " Node</h5>"  if isSpecialIterationNode(info)
         labelValue += "<h5>Parallelism: " + el.parallelism + "</h5>"  unless el.parallelism is ""
         labelValue += "<h5>Operation: " + shortenString(el.operator_strategy) + "</h5>" unless el.operator is `undefined` or not el.operator_strategy
-
       # labelValue += "</a>"
       labelValue += "</div>"
       labelValue
@@ -397,7 +403,7 @@ angular.module('flinkApp')
         createNode(g, data, el, isParent, maxW, maxH)
 
         existingNodes.push el.id
-        
+
         # create edges from inputs to current node
         if el.inputs?
           for pred in el.inputs
@@ -410,7 +416,7 @@ angular.module('flinkApp')
       for i of data.nodes
         el = data.nodes[i]
         return el  if el.id is nodeID
-        
+
         # look for nodes that are in iterations
         if el.step_function?
           for j of el.step_function

flink-runtime-web/web-dashboard/app/styles/graph.styl

@@ -18,6 +18,7 @@
 
 svg.graph
   overflow hidden
+  height: 100%
 
   g
     &.type-TK

flink-runtime-web/web-dashboard/app/styles/index.styl

@@ -21,6 +21,25 @@
 sidebar-width = 250px
 sidebar-width-small = 160px
 
+html
+  height: 100%
+
+body
+  height: 100%
+
+#main
+  height: 100%
+
+.gutter
+  background-color: transparent
+  background-repeat: no-repeat
+  background-position: 50%
+
+.gutter-vertical
+  cursor: row-resize
+  background-image: url('/images/grips/horizontal.png')
+
+
 #sidebar
   overflow: hidden
   position: fixed
@@ -54,11 +73,11 @@ sidebar-width-small = 160px
     font-weight: bold
     color: #ffffff
     padding-left: 0
-    
+
   .nav > li > a
     color: #aaaaaa
     margin-bottom: 1px
-    
+
     &:hover, &:focus
       background-color: rgba(40, 40, 40, 0.5)
     &.active
@@ -69,6 +88,7 @@ sidebar-width-small = 160px
   overflow: hidden
   margin-left: 0
   padding-top: 70px
+  height: 100%
 
   transition(400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all)
 
@@ -82,7 +102,7 @@ sidebar-width-small = 160px
     .nav-tabs
       margin: 0 -20px
       padding: 0 20px
-      
+
   .navbar-secondary-additional
     border: none
     padding: 0 20px
@@ -114,7 +134,7 @@ sidebar-width-small = 160px
       color: #aaaaaa
       background-color: transparent
       border-bottom: 2px solid transparent
-      
+
     &.active
       > a, > a:hover, > a:focus
         color: #000000
@@ -130,7 +150,7 @@ sidebar-width-small = 160px
   th
     font-weight: normal
     color: #999999
-    
+
   td.td-long
     width: 20%
     white-space: pre-wrap
@@ -142,7 +162,7 @@ sidebar-width-small = 160px
   &.table-clickable
     tr
       cursor: pointer
-        
+
   &.table-inner
     background-color: transparent
 
@@ -166,15 +186,15 @@ sidebar-width-small = 160px
           background-color: #f0f0f0
         td.tab-column li.active
           background-color: #f0f0f0
-      
+
   &.table-activable
     th.tab-column, td.tab-column
       border-top: none
       width: 47px
 
     td.tab-column
       border-right: 1px solid #dddddd
-      
+
     td
       position: relative
 
@@ -289,7 +309,7 @@ span.icon-wrapper
     display: inline-block
     border-right: 1px solid #e7e7e7
     overflow: hidden
-    
+
     .overflow
       position: absolute
       display: block
@@ -307,7 +327,7 @@ span.icon-wrapper
 .panel.panel-multi
   .panel-heading
     padding: 0
-    
+
     .panel-info
       &.thin
         padding: 8px 10px
@@ -317,7 +337,7 @@ span.icon-wrapper
     background-color: #fdfdfd
     color: #999
     font-size: 13px
-    
+
     &.clean
       color: inherit
       font-size: inherit
@@ -340,7 +360,7 @@ span.icon-wrapper
     padding-right: 20px
     background-color: #fff
     z-index: 1
-    
+
 
 .badge-default[href]:hover,
 .badge-default[href]:focus
@@ -426,7 +446,7 @@ pre
       float: none
       margin-bottom: 0
       margin-right: -1px
-      
+
       > a
         margin-right: 0
         border-radius(0)
@@ -436,7 +456,7 @@ pre
       > a:hover, > a:focus
         border-bottom: none
         border-left: 2px solid #000000
-        
+
       &.active
         > a
           border-bottom: none
@@ -460,7 +480,7 @@ livechart
   #sidebar
     left: 0
     width: sidebar-width-small
-    
+
     .navbar-static-top
       .navbar-brand-text
         display: none
@@ -517,5 +537,15 @@ livechart
 #job-submit
   width: 100px
 
+#content-inner
+  height: 100%
 
+#job-panel
+  overflow-y: auto
 
+#details
+  height: 100%
+
+#node-details
+  height: 100%
+

flink-runtime-web/web-dashboard/app/styles/job.styl

@@ -20,9 +20,10 @@
   border: 1px solid #ddd
   position: relative
   margin-bottom: 20px
+  height: 100%
 
   .main-canvas
-    height: 400px
+    height: 100%
     overflow: hidden
 
     .zoom-buttons