You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flink.apache.org by se...@apache.org on 2015/09/17 20:20:12 UTC
[40/51] [abbrv] flink git commit: [FLINK-2357] [web dashboard] Add
auto-refresh to dashboard
[FLINK-2357] [web dashboard] Add auto-refresh to dashboard
Project: http://git-wip-us.apache.org/repos/asf/flink/repo
Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/616b7d56
Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/616b7d56
Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/616b7d56
Branch: refs/heads/master
Commit: 616b7d56f76d32276081b54f1eb10680f9fa0ffd
Parents: c36b3d7
Author: Piotr Godek <pi...@gmail.com>
Authored: Thu Sep 10 00:18:12 2015 +0200
Committer: Stephan Ewen <se...@apache.org>
Committed: Thu Sep 17 14:21:52 2015 +0200
----------------------------------------------------------------------
.../app/scripts/modules/jobs/jobs.ctrl.coffee | 45 ++++--
.../app/scripts/modules/jobs/jobs.dir.coffee | 66 +++++----
.../app/scripts/modules/jobs/jobs.svc.coffee | 32 ++---
.../web-dashboard/app/styles/animate.styl | 18 +++
flink-runtime-web/web-dashboard/web/js/index.js | 140 +++++++++++--------
5 files changed, 185 insertions(+), 116 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flink/blob/616b7d56/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 1e367c9..a5f9594 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
@@ -42,7 +42,7 @@ angular.module('flinkApp')
# --------------------------------------
-.controller 'SingleJobController', ($scope, $state, $stateParams, JobsService, $rootScope) ->
+.controller 'SingleJobController', ($scope, $state, $stateParams, JobsService, $rootScope, flinkConfig, $interval) ->
console.log 'SingleJobController'
$scope.jobid = $stateParams.jobid
@@ -53,10 +53,22 @@ angular.module('flinkApp')
$rootScope.job = data
$rootScope.plan = data.plan
+ refresher = $interval ->
+ JobsService.loadJob($stateParams.jobid).then (data) ->
+ $rootScope.job = data
+ # $rootScope.plan = data.plan
+
+ $scope.$broadcast 'reload'
+
+ , flinkConfig["refresh-interval"]
+
$scope.$on '$destroy', ->
$rootScope.job = null
$rootScope.plan = null
+ $interval.cancel(refresher)
+
+
# --------------------------------------
.controller 'JobPlanController', ($scope, $state, $stateParams, JobsService) ->
@@ -70,13 +82,7 @@ angular.module('flinkApp')
$scope.nodeid = nodeid
$scope.vertex = null
- if $state.is('single-job.plan.overview')
- JobsService.getSubtasks(nodeid).then (data) ->
- $scope.vertex = data
-
- else if $state.is('single-job.plan.accumulators')
- JobsService.getAccumulators(nodeid).then (data) ->
- $scope.vertex = data
+ $scope.$broadcast 'reload'
else
$scope.nodeid = null
@@ -87,25 +93,44 @@ angular.module('flinkApp')
.controller 'JobPlanOverviewController', ($scope, JobsService) ->
console.log 'JobPlanOverviewController'
- if $scope.nodeid and !$scope.vertex.st
+ if $scope.nodeid and (!$scope.vertex or !$scope.vertex.st)
JobsService.getSubtasks($scope.nodeid).then (data) ->
$scope.vertex = data
+ $scope.$on 'reload', (event) ->
+ console.log 'JobPlanOverviewController'
+ if $scope.nodeid
+ JobsService.getSubtasks($scope.nodeid).then (data) ->
+ $scope.vertex = data
+
# --------------------------------------
.controller 'JobPlanAccumulatorsController', ($scope, JobsService) ->
console.log 'JobPlanAccumulatorsController'
- if $scope.nodeid and !$scope.vertex.accumulators
+ if $scope.nodeid and (!$scope.vertex or !$scope.vertex.accumulators)
JobsService.getAccumulators($scope.nodeid).then (data) ->
$scope.vertex = data
+ $scope.$on 'reload', (event) ->
+ console.log 'JobPlanAccumulatorsController'
+ if $scope.nodeid
+ JobsService.getAccumulators($scope.nodeid).then (data) ->
+ $scope.vertex = data
+
# --------------------------------------
.controller 'JobTimelineVertexController', ($scope, $state, $stateParams, JobsService) ->
+ console.log 'JobTimelineVertexController'
+
JobsService.getVertex($stateParams.vertexId).then (data) ->
$scope.vertex = data
+ $scope.$on 'reload', (event) ->
+ console.log 'JobTimelineVertexController'
+ JobsService.getVertex($stateParams.vertexId).then (data) ->
+ $scope.vertex = data
+
# --------------------------------------
.controller 'JobExceptionsController', ($scope, $state, $stateParams, JobsService) ->
http://git-wip-us.apache.org/repos/asf/flink/blob/616b7d56/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 74f616a..60d6224 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
@@ -33,37 +33,45 @@ angular.module('flinkApp')
angular.element(svgEl).attr('width', containerW)
analyzeTime = (data) ->
+ d3.select(svgEl).selectAll("*").remove()
+
testData = []
angular.forEach data.subtasks, (subtask, i) ->
+ console.log data.subtasks
+
+ times = [
+ {
+ label: "Scheduled"
+ color: "#666"
+ borderColor: "#555"
+ starting_time: subtask.timestamps["SCHEDULED"]
+ ending_time: subtask.timestamps["DEPLOYING"]
+ type: 'regular'
+ }
+ {
+ label: "Deploying"
+ color: "#aaa"
+ borderColor: "#555"
+ starting_time: subtask.timestamps["DEPLOYING"]
+ ending_time: subtask.timestamps["RUNNING"]
+ type: 'regular'
+ }
+ ]
+
+ if subtask.timestamps["FINISHED"] > 0
+ times.push {
+ label: "Running"
+ color: "#ddd"
+ borderColor: "#555"
+ starting_time: subtask.timestamps["RUNNING"]
+ ending_time: subtask.timestamps["FINISHED"]
+ type: 'regular'
+ }
+
testData.push {
label: "#{subtask.host} (#{subtask.subtask})"
- times: [
- {
- label: "Scheduled"
- color: "#666"
- borderColor: "#555"
- starting_time: subtask.timestamps["SCHEDULED"]
- ending_time: subtask.timestamps["DEPLOYING"]
- type: 'regular'
- }
- {
- label: "Deploying"
- color: "#aaa"
- borderColor: "#555"
- starting_time: subtask.timestamps["DEPLOYING"]
- ending_time: subtask.timestamps["RUNNING"]
- type: 'regular'
- }
- {
- label: "Running"
- color: "#ddd"
- borderColor: "#555"
- starting_time: subtask.timestamps["RUNNING"]
- ending_time: subtask.timestamps["FINISHED"]
- type: 'regular'
- }
- ]
+ times: times
}
chart = d3.timeline().stack()
@@ -106,6 +114,8 @@ angular.module('flinkApp')
label.replace(">", ">")
analyzeTime = (data) ->
+ d3.select(svgEl).selectAll("*").remove()
+
testData = []
testData.push
@@ -118,7 +128,6 @@ angular.module('flinkApp')
type: 'scheduled'
]
-
angular.forEach data.vertices, (vertex) ->
if vertex['start-time'] > -1
testData.push
@@ -187,6 +196,7 @@ angular.module('flinkApp')
d3tmpSvg = d3.select(mainTmpElement)
# angular.element(mainG).empty()
+ # d3mainSvgG.selectAll("*").remove()
containerW = elem.width()
angular.element(elem.children()[0]).width(containerW)
@@ -420,6 +430,8 @@ angular.module('flinkApp')
return el.step_function[j] if el.step_function[j].id is nodeID
drawGraph = (data) ->
+ # console.log data
+
g = new dagreD3.graphlib.Graph({ multigraph: true, compound: true }).setGraph({
nodesep: 70
edgesep: 0
http://git-wip-us.apache.org/repos/asf/flink/blob/616b7d56/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
index 3142e4f..2ef6a34 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
@@ -67,9 +67,9 @@ angular.module('flinkApp')
else 'default'
@setEndTimes = (list) ->
- angular.forEach list, (job, jobKey) ->
- unless job['end-time'] > -1
- job['end-time'] = job['start-time'] + job['duration']
+ angular.forEach list, (item, jobKey) ->
+ unless item['end-time'] > -1
+ item['end-time'] = item['start-time'] + item['duration']
@listJobs = ->
deferred = $q.defer()
@@ -112,18 +112,6 @@ angular.module('flinkApp')
deferreds.job.promise
- @loadPlan = (jobid) ->
- currentPlan = null
- deferreds.plan = $q.defer()
-
- $http.get flinkConfig.jobServer + "/jobs/" + jobid + "/plan"
- .success (data) ->
- currentPlan = data
-
- deferreds.plan.resolve(data)
-
- deferreds.plan.promise
-
@getNode = (nodeid) ->
seekNode = (nodeid, data) ->
for node in data
@@ -136,7 +124,7 @@ angular.module('flinkApp')
deferred = $q.defer()
- $q.all([deferreds.job.promise]).then (data) =>
+ deferreds.job.promise.then (data) =>
foundNode = seekNode(nodeid, currentJob.plan.nodes)
foundNode.vertex = @seekVertex(nodeid)
@@ -154,13 +142,15 @@ angular.module('flinkApp')
@getVertex = (vertexid) ->
deferred = $q.defer()
- $q.all([deferreds.job.promise]).then (data) =>
+ deferreds.job.promise.then (data) =>
vertex = @seekVertex(vertexid)
$http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid + "/subtasktimes"
- .success (data) ->
+ .success (data) =>
# TODO: change to subtasktimes
vertex.subtasks = data.subtasks
+ @setEndTimes(vertex.subtasks)
+ console.log vertex.subtasks
deferred.resolve(vertex)
@@ -169,7 +159,7 @@ angular.module('flinkApp')
@getSubtasks = (vertexid) ->
deferred = $q.defer()
- $q.all([deferreds.job.promise]).then (data) =>
+ deferreds.job.promise.then (data) =>
vertex = @seekVertex(vertexid)
$http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid
@@ -183,7 +173,7 @@ angular.module('flinkApp')
@getAccumulators = (vertexid) ->
deferred = $q.defer()
- $q.all([deferreds.job.promise]).then (data) =>
+ deferreds.job.promise.then (data) =>
vertex = @seekVertex(vertexid)
$http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid + "/accumulators"
@@ -198,7 +188,7 @@ angular.module('flinkApp')
@loadExceptions = ->
deferred = $q.defer()
- $q.all([deferreds.job.promise]).then (data) =>
+ deferreds.job.promise.then (data) =>
$http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/exceptions"
.success (exceptions) ->
http://git-wip-us.apache.org/repos/asf/flink/blob/616b7d56/flink-runtime-web/web-dashboard/app/styles/animate.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/animate.styl b/flink-runtime-web/web-dashboard/app/styles/animate.styl
index 14fd938..14171a2 100644
--- a/flink-runtime-web/web-dashboard/app/styles/animate.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/animate.styl
@@ -1,3 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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.
+ */
+
// Animate.css - http://daneden.me/animate
// Licensed under the MIT license - http://opensource.org/licenses/MIT