You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flink.apache.org by gr...@apache.org on 2016/11/30 21:49:54 UTC
[09/10] flink git commit: [FLINK-3719][web frontend] Moving the
barrier between graph and stats
[FLINK-3719][web frontend] Moving the barrier between graph and stats
This closes #2467
Project: http://git-wip-us.apache.org/repos/asf/flink/repo
Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/bd62fe14
Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/bd62fe14
Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/bd62fe14
Branch: refs/heads/master
Commit: bd62fe14ac3e8c382b72c7c16ce1f0a6ee7db77d
Parents: 16c08b5
Author: Ivan Mushketyk <iv...@gmail.com>
Authored: Fri Sep 2 22:22:00 2016 +0100
Committer: Greg Hogan <co...@greghogan.com>
Committed: Wed Nov 30 15:46:16 2016 -0500
----------------------------------------------------------------------
LICENSE | 1 +
flink-runtime-web/web-dashboard/app/index.jade | 2 +-
.../web-dashboard/app/partials/jobs/job.jade | 2 +-
.../app/partials/jobs/job.plan.jade | 39 +-
.../app/scripts/modules/jobs/jobs.ctrl.coffee | 2 +-
.../app/scripts/modules/jobs/jobs.dir.coffee | 34 +-
.../web-dashboard/app/styles/graph.styl | 1 +
.../web-dashboard/app/styles/index.styl | 60 +++-
.../web-dashboard/app/styles/job.styl | 3 +-
.../assets/images/grips/horizontal.png | Bin 0 -> 2753 bytes
.../assets/images/grips/vertical.png | Bin 0 -> 91 bytes
flink-runtime-web/web-dashboard/bower.json | 3 +-
flink-runtime-web/web-dashboard/gulpfile.js | 10 +-
.../web-dashboard/web/css/index.css | 35 +-
.../web/images/grips/horizontal.png | Bin 0 -> 2753 bytes
.../web-dashboard/web/images/grips/vertical.png | Bin 0 -> 91 bytes
flink-runtime-web/web-dashboard/web/index.html | 2 +-
flink-runtime-web/web-dashboard/web/js/index.js | 17 +-
.../web-dashboard/web/js/vendor.js | 355 ++++++++++++++++++-
.../web-dashboard/web/partials/jobs/job.html | 2 +-
.../web/partials/jobs/job.plan.html | 38 +-
21 files changed, 528 insertions(+), 78 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/LICENSE
----------------------------------------------------------------------
diff --git a/LICENSE b/LICENSE
index f7699da..c2e75c0 100644
--- a/LICENSE
+++ b/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.
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/index.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/index.jade b/flink-runtime-web/web-dashboard/app/index.jade
index ceb5079..3faedc2 100644
--- a/flink-runtime-web/web-dashboard/app/index.jade
+++ b/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')
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/partials/jobs/job.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.jade
index d8b4d4a..981f244 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.jade
+++ b/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")
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.jade
index 646fdf0..5db0640 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.jade
+++ b/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")
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
index 5b18377..2bcbc13 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
+++ b/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()
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee
index fa97c42..8cd00f4 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee
+++ b/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
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/styles/graph.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/graph.styl b/flink-runtime-web/web-dashboard/app/styles/graph.styl
index 6de87c2..85cdc07 100644
--- a/flink-runtime-web/web-dashboard/app/styles/graph.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/graph.styl
@@ -18,6 +18,7 @@
svg.graph
overflow hidden
+ height: 100%
g
&.type-TK
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/styles/index.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/index.styl b/flink-runtime-web/web-dashboard/app/styles/index.styl
index 29990dc..d7e977d 100644
--- a/flink-runtime-web/web-dashboard/app/styles/index.styl
+++ b/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,7 +186,7 @@ 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
@@ -174,7 +194,7 @@ sidebar-width-small = 160px
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%
+
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/app/styles/job.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/job.styl b/flink-runtime-web/web-dashboard/app/styles/job.styl
index fa21d0e..e0b11fc 100644
--- a/flink-runtime-web/web-dashboard/app/styles/job.styl
+++ b/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
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/assets/images/grips/horizontal.png
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/assets/images/grips/horizontal.png b/flink-runtime-web/web-dashboard/assets/images/grips/horizontal.png
new file mode 100644
index 0000000..64a40ae
Binary files /dev/null and b/flink-runtime-web/web-dashboard/assets/images/grips/horizontal.png differ
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/assets/images/grips/vertical.png
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/assets/images/grips/vertical.png b/flink-runtime-web/web-dashboard/assets/images/grips/vertical.png
new file mode 100644
index 0000000..0ac8fa1
Binary files /dev/null and b/flink-runtime-web/web-dashboard/assets/images/grips/vertical.png differ
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/bower.json
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/bower.json b/flink-runtime-web/web-dashboard/bower.json
index 445d32a..e251f3e 100644
--- a/flink-runtime-web/web-dashboard/bower.json
+++ b/flink-runtime-web/web-dashboard/bower.json
@@ -22,7 +22,8 @@
"moment-duration-format": "1.3.0",
"qtip2": "2.2.1",
"angular-drag-and-drop-lists": "^1.4.0",
- "nvd3": "^1.8.4"
+ "nvd3": "^1.8.4",
+ "Split.js": "1.0.6"
},
"overrides": {
"dagre-d3": {
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/gulpfile.js
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/gulpfile.js b/flink-runtime-web/web-dashboard/gulpfile.js
index 4264c70..2b34e59 100644
--- a/flink-runtime-web/web-dashboard/gulpfile.js
+++ b/flink-runtime-web/web-dashboard/gulpfile.js
@@ -56,11 +56,17 @@ gulp.task('set-production', function() {
gulp.task('fonts', function() {
return gulp.src(paths.vendor + "font-awesome/fonts/*")
+ .pipe(plumber())
+ .pipe(gulp.dest(paths.assets + 'fonts'));
+});
+
+gulp.task('images', function() {
+ return gulp.src(paths.vendor + "Split.js/grips/*")
.pipe(plumber())
- .pipe(gulp.dest(paths.assets + 'fonts'));
+ .pipe(gulp.dest(paths.assets + 'images/grips'));
});
-gulp.task('assets', ['fonts'], function() {
+gulp.task('assets', ['fonts', 'images'], function() {
return gulp.src(paths.assets + "**")
.pipe(plumber())
.pipe(gulp.dest(paths.dest));
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/web/css/index.css
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/web/css/index.css b/flink-runtime-web/web-dashboard/web/css/index.css
index b017b49..caae991 100644
--- a/flink-runtime-web/web-dashboard/web/css/index.css
+++ b/flink-runtime-web/web-dashboard/web/css/index.css
@@ -15,6 +15,24 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+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;
@@ -71,6 +89,7 @@
overflow: hidden;
margin-left: 0;
padding-top: 70px;
+ height: 100%;
-webkit-transition: 400ms;
-moz-transition: 400ms;
-o-transition: 400ms;
@@ -523,9 +542,10 @@ livechart {
border: 1px solid #ddd;
position: relative;
margin-bottom: 20px;
+ height: 100%;
}
.canvas-wrapper .main-canvas {
- height: 400px;
+ height: 100%;
overflow: hidden;
}
.canvas-wrapper .main-canvas .zoom-buttons {
@@ -552,6 +572,7 @@ livechart {
}
svg.graph {
overflow: hidden;
+ height: 100%;
}
svg.graph g.type-TK > rect {
fill: #00ffd0;
@@ -783,3 +804,15 @@ svg.graph .node-label {
#job-submit {
width: 100px;
}
+#content-inner {
+ height: 100%;
+}
+#job-panel {
+ overflow-y: auto;
+}
+#details {
+ height: 100%;
+}
+#node-details {
+ height: 100%;
+}
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/web/images/grips/horizontal.png
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/web/images/grips/horizontal.png b/flink-runtime-web/web-dashboard/web/images/grips/horizontal.png
new file mode 100644
index 0000000..64a40ae
Binary files /dev/null and b/flink-runtime-web/web-dashboard/web/images/grips/horizontal.png differ
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/web/images/grips/vertical.png
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/web/images/grips/vertical.png b/flink-runtime-web/web-dashboard/web/images/grips/vertical.png
new file mode 100644
index 0000000..0ac8fa1
Binary files /dev/null and b/flink-runtime-web/web-dashboard/web/images/grips/vertical.png differ
http://git-wip-us.apache.org/repos/asf/flink/blob/bd62fe14/flink-runtime-web/web-dashboard/web/index.html
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/web/index.html b/flink-runtime-web/web-dashboard/web/index.html
index e3055b3..fa640fc 100644
--- a/flink-runtime-web/web-dashboard/web/index.html
+++ b/flink-runtime-web/web-dashboard/web/index.html
@@ -51,7 +51,7 @@ limitations under the License.
</div>
</div>
<div id="content" ng-class="{ 'sidebar-visible': sidebarVisible }">
- <div ui-view="main"></div>
+ <div id="main" ui-view="main"></div>
</div>
</body>
</html>
\ No newline at end of file