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:19 UTC
[47/51] [abbrv] flink git commit: [FLINK-2357] [web dashboard]
Timeline for running tasks
[FLINK-2357] [web dashboard] Timeline for running tasks
Project: http://git-wip-us.apache.org/repos/asf/flink/repo
Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/6d873e60
Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/6d873e60
Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/6d873e60
Branch: refs/heads/master
Commit: 6d873e60cf63a24157a4b0f5026c34833da46401
Parents: 7138cd5
Author: Piotr Godek <pi...@gmail.com>
Authored: Thu Aug 27 23:25:13 2015 +0200
Committer: Stephan Ewen <se...@apache.org>
Committed: Thu Sep 17 14:21:52 2015 +0200
----------------------------------------------------------------------
.../jobs/job.plan.node.accumulators.jade | 18 +++
.../app/partials/jobs/job.plan.node.jade | 116 ++--------------
.../partials/jobs/job.plan.node.properties.jade | 110 +++++++++++++++
.../partials/jobs/job.plan.node.subtasks.jade | 47 +++++++
.../app/partials/jobs/running-jobs.jade | 8 +-
.../web-dashboard/app/partials/overview.jade | 8 +-
.../web-dashboard/app/scripts/index.coffee | 19 +++
.../app/scripts/modules/jobs/jobs.ctrl.coffee | 3 +
.../app/scripts/modules/jobs/jobs.dir.coffee | 21 +--
.../app/scripts/modules/jobs/jobs.svc.coffee | 41 +++---
.../web-dashboard/app/styles/index.styl | 17 ++-
.../web-dashboard/web/css/index.css | 41 ++++--
flink-runtime-web/web-dashboard/web/js/index.js | 108 ++++++++++-----
.../jobs/job.plan.node.accumulators.html | 20 +++
.../web/partials/jobs/job.plan.node.html | 138 ++-----------------
.../partials/jobs/job.plan.node.properties.html | 131 ++++++++++++++++++
.../partials/jobs/job.plan.node.subtasks.html | 53 +++++++
.../web/partials/jobs/running-jobs.html | 4 +
.../web-dashboard/web/partials/overview.html | 4 +
19 files changed, 593 insertions(+), 314 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade
new file mode 100644
index 0000000..a50b134
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade
@@ -0,0 +1,18 @@
+//
+ 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.
+
+h1 Accumulators
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.jade
index a554b89..f72f412 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.jade
@@ -28,113 +28,23 @@
bs-label(status="{{status}}" ng-repeat="(index, status) in stateList") {{node.vertex.tasks[status]}}
.panel-heading.clearfix
- .panel-info.first.last(ng-if="node.description")
- span {{ node.description | humanizeTaskName }}
+ .panel-info.thin.last(ng-if="node.description")
+ span {{ vertex.name | humanizeTaskName }}
+ //- span {{ node.description | humanizeTaskName }}
- .panel-body
- table.table.table-hover.table-clickable
- thead
- tr
- th Name
- th Status
+ nav.navbar.navbar-default.navbar-secondary-additional
+ ul.nav.nav-tabs
+ li(ui-sref-active='active')
+ a(ui-sref=".subtasks") Subtasks
- tbody
- tr(ng-repeat="vertex in node.vertex.groupvertex.groupmembers")
- td {{ vertex.name | humanizeTaskName }}
- td
- bs-label(status="{{vertex.vertexstatus}}") {{vertex.vertexstatus}}
+ li(ui-sref-active='active')
+ a(ui-sref=".properties") Properties
-//-----------------------------------------------------------------
+ li(ui-sref-active='active')
+ a(ui-sref=".accumulators") Accumulators
-.row(ng-if="node")
- .col-sm-6.col-md-4
- table.table.table-properties(ng-if="node.optimizer_properties.global_properties")
- thead
- tr
- th(colspan="2")
- | Global Data Properties
+ .panel-body.clean
+ div(ui-view="nodeTab")
- tbody
- tr(ng-repeat="property in node.optimizer_properties.global_properties")
- td {{property.name}}
- td(table-property value="property.value")
- table.table.table-properties(ng-if="node.optimizer_properties.local_properties")
- thead
- tr
- th(colspan="2")
- | Local Data Properties
- tbody
- tr(ng-repeat="property in node.optimizer_properties.local_properties")
- td {{property.name}}
- td(table-property value="property.value")
-
- .visible-xs.visible-sm
- table.table.table-properties
- thead
- tr
- th(colspan="2")
- | Properties
-
- tbody
- tr
- td Operator
- td(table-property value="node.operator_strategy")
-
- tr
- td Parallelism
- td(table-property value="node.parallelism")
-
-
- .hidden-sm.col-md-4
- table.table.table-properties
- thead
- tr
- th(colspan="2")
- | Properties
-
- tbody
- tr
- td Operator
- td(table-property value="node.operator_strategy")
-
- tr
- td Parallelism
- td(table-property value="node.parallelism")
-
-
- table.table.table-properties(ng-if="node.optimizer_properties.estimates")
- thead
- tr
- th(colspan="2")
- | Size Estimates
-
- tbody
- tr(ng-repeat="property in node.optimizer_properties.estimates")
- td {{property.name}}
- td(table-property value="property.value")
-
- .col-sm-6.col-md-4
- .visible-xs.visible-sm
- table.table.table-properties(ng-if="node.optimizer_properties.estimates")
- thead
- tr
- th(colspan="2")
- | Size Estimates
-
- tbody
- tr(ng-repeat="property in node.optimizer_properties.estimates")
- td {{property.name}}
- td(table-property value="property.value")
-
- table.table.table-properties(ng-if="node.optimizer_properties.costs")
- thead
- tr
- th(colspan="2")
- | Cost Estimates
-
- tbody
- tr(ng-repeat="property in node.optimizer_properties.costs")
- td {{property.name}}
- td(table-property value="property.value")
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade
new file mode 100644
index 0000000..19d5c0d
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade
@@ -0,0 +1,110 @@
+//
+ 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.
+
+
+.row(ng-if="node")
+ .col-sm-6.col-md-4
+ table.table.table-properties(ng-if="node.optimizer_properties.global_properties")
+ thead
+ tr
+ th(colspan="2")
+ | Global Data Properties
+
+ tbody
+ tr(ng-repeat="property in node.optimizer_properties.global_properties")
+ td {{property.name}}
+ td(table-property value="property.value")
+
+ table.table.table-properties(ng-if="node.optimizer_properties.local_properties")
+ thead
+ tr
+ th(colspan="2")
+ | Local Data Properties
+
+ tbody
+ tr(ng-repeat="property in node.optimizer_properties.local_properties")
+ td {{property.name}}
+ td(table-property value="property.value")
+
+ .visible-xs.visible-sm
+ table.table.table-properties
+ thead
+ tr
+ th(colspan="2")
+ | Properties
+
+ tbody
+ tr
+ td Operator
+ td(table-property value="node.operator_strategy")
+
+ tr
+ td Parallelism
+ td(table-property value="node.parallelism")
+
+
+ .hidden-sm.col-md-4
+ table.table.table-properties
+ thead
+ tr
+ th(colspan="2")
+ | Properties
+
+ tbody
+ tr
+ td Operator
+ td(table-property value="node.operator_strategy")
+
+ tr
+ td Parallelism
+ td(table-property value="node.parallelism")
+
+
+ table.table.table-properties(ng-if="node.optimizer_properties.estimates")
+ thead
+ tr
+ th(colspan="2")
+ | Size Estimates
+
+ tbody
+ tr(ng-repeat="property in node.optimizer_properties.estimates")
+ td {{property.name}}
+ td(table-property value="property.value")
+
+ .col-sm-6.col-md-4
+ .visible-xs.visible-sm
+ table.table.table-properties(ng-if="node.optimizer_properties.estimates")
+ thead
+ tr
+ th(colspan="2")
+ | Size Estimates
+
+ tbody
+ tr(ng-repeat="property in node.optimizer_properties.estimates")
+ td {{property.name}}
+ td(table-property value="property.value")
+
+ table.table.table-properties(ng-if="node.optimizer_properties.costs")
+ thead
+ tr
+ th(colspan="2")
+ | Cost Estimates
+
+ tbody
+ tr(ng-repeat="property in node.optimizer_properties.costs")
+ td {{property.name}}
+ td(table-property value="property.value")
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
new file mode 100644
index 0000000..d20b889
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
@@ -0,0 +1,47 @@
+//
+ 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.
+
+table.table.table-hover.table-clickable
+ thead
+ tr
+ th Start Time
+ th End Time
+ th Duration
+ //- th Name
+ th Bytes read
+ th Records read
+ th Bytes written
+ th Records written
+ th Tasks
+ th Status
+
+ tbody
+ tr
+ td {{ vertex['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
+ td {{ vertex['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
+ td {{ vertex.duration }} ms
+ //- td {{ vertex.name | humanizeTaskName }}
+ td {{ vertex.metrics['read-bytes'] }}
+ td {{ vertex.metrics['read-records'] }}
+ td {{ vertex.metrics['write-bytes'] }}
+ td {{ vertex.metrics['write-records'] }}
+ td
+ .label-group
+ bs-label(status="{{status}}" ng-repeat="(index, status) in stateList") {{vertex.tasks[status]}}
+
+ td
+ bs-label(status="{{vertex.status}}") {{vertex.status}}
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/flink-runtime-web/web-dashboard/app/partials/jobs/running-jobs.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/running-jobs.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/running-jobs.jade
index 73ded56..e0c500b 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/running-jobs.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/running-jobs.jade
@@ -27,8 +27,8 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
thead
tr
th Start Time
- //- th End Time
- //- th Duration
+ th End Time
+ th Duration
th Job Name
th Job ID
th Tasks
@@ -37,8 +37,8 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
tbody
tr(ng-repeat="job in jobs" ui-sref="single-job.plan({ jobid: job.jid })")
td {{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
- //- td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
- //- td {{job.duration}} ms
+ td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
+ td {{job.duration}} ms
td {{job.name}}
td {{job.jid}}
td.label-group
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/flink-runtime-web/web-dashboard/app/partials/overview.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/overview.jade b/flink-runtime-web/web-dashboard/app/partials/overview.jade
index 87f8f57..846d833 100644
--- a/flink-runtime-web/web-dashboard/app/partials/overview.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/overview.jade
@@ -87,8 +87,8 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
thead
tr
th Start Time
- //- th End Time
- //- th Duration
+ th End Time
+ th Duration
th Job Name
th Job ID
th Tasks
@@ -97,8 +97,8 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
tbody
tr(ng-repeat="job in runningJobs" ui-sref="single-job.plan({ jobid: job.jid })")
td {{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
- //- td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
- //- td {{job.duration}} ms
+ td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
+ td {{job.duration}} ms
td {{job.name}}
td {{job.jid}}
td.label-group
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/flink-runtime-web/web-dashboard/app/scripts/index.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/index.coffee b/flink-runtime-web/web-dashboard/app/scripts/index.coffee
index d7db7e0..63b5bf2 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/index.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/index.coffee
@@ -88,11 +88,30 @@ angular.module('flinkApp', ['ui.router', 'angularMoment'])
.state "single-job.plan.node",
url: "/vertex/{nodeid}"
+ abstract: true
views:
node:
templateUrl: "partials/jobs/job.plan.node.html"
controller: 'JobPlanNodeController'
+ .state "single-job.plan.node.subtasks",
+ url: ""
+ views:
+ nodeTab:
+ templateUrl: "partials/jobs/job.plan.node.subtasks.html"
+
+ .state "single-job.plan.node.properties",
+ url: "/properties"
+ views:
+ nodeTab:
+ templateUrl: "partials/jobs/job.plan.node.properties.html"
+
+ .state "single-job.plan.node.accumulators",
+ url: "/properties"
+ views:
+ nodeTab:
+ templateUrl: "partials/jobs/job.plan.node.accumulators.html"
+
.state "single-job.timeline",
url: "/timeline"
views:
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/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 d6ffdb0..d74f781 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
@@ -67,6 +67,9 @@ angular.module('flinkApp')
JobsService.getNode($scope.nodeid).then (data) ->
$scope.node = data
+ JobsService.getVertex($scope.nodeid).then (data) ->
+ $scope.vertex = data
+
# --------------------------------------
.controller 'JobTimelineVertexController', ($scope, $state, $stateParams, JobsService) ->
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/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 bf10799..b0f9bae 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,16 +120,17 @@ angular.module('flinkApp')
angular.forEach data.vertices, (vertex) ->
- testData.push
- times: [
- label: translateLabel(vertex.name)
- color: "#d9f1f7"
- borderColor: "#62cdea"
- starting_time: vertex['start-time']
- ending_time: vertex['end-time']
- link: vertex.id
- type: 'regular'
- ]
+ if vertex['start-time'] > -1
+ testData.push
+ times: [
+ label: translateLabel(vertex.name)
+ color: "#d9f1f7"
+ borderColor: "#62cdea"
+ starting_time: vertex['start-time']
+ ending_time: vertex['end-time']
+ link: vertex.id
+ type: 'regular'
+ ]
chart = d3.timeline().stack().click((d, i, datum) ->
if d.link
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/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 6624b4f..2290261 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
@@ -66,19 +66,22 @@ angular.module('flinkApp')
when 'total' then 'black'
else 'default'
+ @setEndTimes = (list) ->
+ angular.forEach list, (job, jobKey) ->
+ unless job['end-time'] > -1
+ job['end-time'] = job['start-time'] + job['duration']
+
@listJobs = ->
deferred = $q.defer()
$http.get flinkConfig.jobServer + "/joboverview"
- .success (data, status, headers, config) ->
-
- angular.forEach data, (list, listKey) ->
-
+ .success (data, status, headers, config) =>
+ angular.forEach data, (list, listKey) =>
switch listKey
- when 'running' then jobs.running = list
- when 'finished' then jobs.finished = list
- when 'cancelled' then jobs.cancelled = list
- when 'failed' then jobs.failed = list
+ when 'running' then jobs.running = @setEndTimes(list)
+ when 'finished' then jobs.finished = @setEndTimes(list)
+ when 'cancelled' then jobs.cancelled = @setEndTimes(list)
+ when 'failed' then jobs.failed = @setEndTimes(list)
deferred.resolve(jobs)
notifyObservers()
@@ -96,24 +99,26 @@ angular.module('flinkApp')
deferreds.job = $q.defer()
$http.get flinkConfig.jobServer + "/jobs/" + jobid
- .success (data, status, headers, config) ->
- # data.time = Date.now()
+ .success (data, status, headers, config) =>
+ # console.log data.vertices
+ @setEndTimes(data.vertices)
+ # console.log data.vertices
- $http.get flinkConfig.jobServer + "/jobs/" + jobid + "/vertices"
- .success (vertices) ->
- data = angular.extend(data, vertices)
+ # $http.get flinkConfig.jobServer + "/jobs/" + jobid + "/vertices"
+ # .success (vertices) ->
+ # data = angular.extend(data, vertices)
# $http.get flinkConfig.jobServer + "/jobsInfo?get=job&job=" + jobid
# .success (oldVertices) ->
# data.oldV = oldVertices[0]
- $http.get flinkConfig.jobServer + "/jobs/" + jobid + "/config"
- .success (jobConfig) ->
- data = angular.extend(data, jobConfig)
+ $http.get flinkConfig.jobServer + "/jobs/" + jobid + "/config"
+ .success (jobConfig) ->
+ data = angular.extend(data, jobConfig)
- currentJob = data
+ currentJob = data
- deferreds.job.resolve(data)
+ deferreds.job.resolve(data)
deferreds.job.promise
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/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 608dc3a..295bc47 100644
--- a/flink-runtime-web/web-dashboard/app/styles/index.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/index.styl
@@ -73,6 +73,13 @@ sidebar-width = 250px
.nav-tabs
margin: 0 -20px
padding: 0 20px
+
+ .navbar-secondary-additional
+ border: none
+ padding: 0 20px
+ margin-bottom: 0
+ .nav-tabs
+ margin: 0 -20px
&.sidebar-visible
margin-left: sidebar-width
@@ -129,7 +136,7 @@ sidebar-width = 250px
.navbar-secondary
overflow: auto
-.navbar-main, .navbar-secondary, .navbar-main-additional, .panel.panel-multi
+.navbar-main, .navbar-secondary, .navbar-main-additional, .panel.panel-multi, .navbar-secondary-additional
.navbar-title, .panel-title
float: left
font-size: 18px
@@ -173,8 +180,12 @@ sidebar-width = 250px
background-color: #fdfdfd
color: #999
font-size: 13px
+
+ &.clean
+ color: inherit
+ font-size: inherit
-.navbar-main-additional
+.navbar-main-additional, .navbar-secondary-additional
min-height: 40px
background-color: #fdfdfd
@@ -276,6 +287,6 @@ pre.exception
.navbar-main, .navbar-main-additional
left: sidebar-width
- .navbar-main, .navbar-secondary, .navbar-main-additional
+ .navbar-main, .navbar-secondary, .navbar-main-additional, .navbar-secondary-additional
.navbar-title
padding: 12px 20px 13px 20px
http://git-wip-us.apache.org/repos/asf/flink/blob/6d873e60/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 438ff1b..8d4f45c 100644
--- a/flink-runtime-web/web-dashboard/web/css/index.css
+++ b/flink-runtime-web/web-dashboard/web/css/index.css
@@ -84,6 +84,14 @@
margin: 0 -20px;
padding: 0 20px;
}
+#content .navbar-secondary-additional {
+ border: none;
+ padding: 0 20px;
+ margin-bottom: 0;
+}
+#content .navbar-secondary-additional .nav-tabs {
+ margin: 0 -20px;
+}
#content.sidebar-visible {
margin-left: 250px;
}
@@ -143,10 +151,12 @@
.navbar-secondary .navbar-title,
.navbar-main-additional .navbar-title,
.panel.panel-multi .navbar-title,
+.navbar-secondary-additional .navbar-title,
.navbar-main .panel-title,
.navbar-secondary .panel-title,
.navbar-main-additional .panel-title,
-.panel.panel-multi .panel-title {
+.panel.panel-multi .panel-title,
+.navbar-secondary-additional .panel-title {
float: left;
font-size: 18px;
padding: 12px 20px 13px 10px;
@@ -157,10 +167,12 @@
.navbar-secondary .navbar-info,
.navbar-main-additional .navbar-info,
.panel.panel-multi .navbar-info,
+.navbar-secondary-additional .navbar-info,
.navbar-main .panel-info,
.navbar-secondary .panel-info,
.navbar-main-additional .panel-info,
-.panel.panel-multi .panel-info {
+.panel.panel-multi .panel-info,
+.navbar-secondary-additional .panel-info {
float: left;
font-size: 14px;
padding: 15px 15px 15px 15px;
@@ -173,10 +185,12 @@
.navbar-secondary .navbar-info .overflow,
.navbar-main-additional .navbar-info .overflow,
.panel.panel-multi .navbar-info .overflow,
+.navbar-secondary-additional .navbar-info .overflow,
.navbar-main .panel-info .overflow,
.navbar-secondary .panel-info .overflow,
.navbar-main-additional .panel-info .overflow,
-.panel.panel-multi .panel-info .overflow {
+.panel.panel-multi .panel-info .overflow,
+.navbar-secondary-additional .panel-info .overflow {
position: absolute;
display: block;
-o-text-overflow: ellipsis;
@@ -190,20 +204,24 @@
.navbar-secondary .navbar-info.first,
.navbar-main-additional .navbar-info.first,
.panel.panel-multi .navbar-info.first,
+.navbar-secondary-additional .navbar-info.first,
.navbar-main .panel-info.first,
.navbar-secondary .panel-info.first,
.navbar-main-additional .panel-info.first,
-.panel.panel-multi .panel-info.first {
+.panel.panel-multi .panel-info.first,
+.navbar-secondary-additional .panel-info.first {
border-left: 1px solid #e7e7e7;
}
.navbar-main .navbar-info.last,
.navbar-secondary .navbar-info.last,
.navbar-main-additional .navbar-info.last,
.panel.panel-multi .navbar-info.last,
+.navbar-secondary-additional .navbar-info.last,
.navbar-main .panel-info.last,
.navbar-secondary .panel-info.last,
.navbar-main-additional .panel-info.last,
-.panel.panel-multi .panel-info.last {
+.panel.panel-multi .panel-info.last,
+.navbar-secondary-additional .panel-info.last {
border-right: none;
}
.panel.panel-multi .panel-heading {
@@ -218,11 +236,17 @@
color: #999;
font-size: 13px;
}
-.navbar-main-additional {
+.panel.panel-multi .panel-body.clean {
+ color: inherit;
+ font-size: inherit;
+}
+.navbar-main-additional,
+.navbar-secondary-additional {
min-height: 40px;
background-color: #fdfdfd;
}
-.navbar-main-additional .navbar-info {
+.navbar-main-additional .navbar-info,
+.navbar-secondary-additional .navbar-info {
font-size: 13px;
padding: 10px 15px 10px 15px;
}
@@ -437,7 +461,8 @@ svg.graph .node-label {
}
.navbar-main .navbar-title,
.navbar-secondary .navbar-title,
- .navbar-main-additional .navbar-title {
+ .navbar-main-additional .navbar-title,
+ .navbar-secondary-additional .navbar-title {
padding: 12px 20px 13px 20px;
}
}