[FLINK-5831] [webui] order, search and filter metrics This closes #3369
Project: http://git-wip-us.apache.org/repos/asf/flink/repo Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/3642c5a6 Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/3642c5a6 Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/3642c5a6 Branch: refs/heads/master Commit: 3642c5a607a640dac118e2c87f60e41bd3b5f651 Parents: 3dd5c99 Author: paul <[email protected]> Authored: Mon Feb 20 10:28:14 2017 +0100 Committer: Greg Hogan <[email protected]> Committed: Wed May 10 09:30:27 2017 -0400 ---------------------------------------------------------------------- .../partials/jobs/job.plan.node-list.metrics.jade | 7 ++++++- .../app/scripts/common/filters.coffee | 6 ++++++ .../app/scripts/modules/jobs/jobs.ctrl.coffee | 12 +++++++++++- .../web-dashboard/app/styles/metric.styl | 18 ++++++++++++++++-- flink-runtime-web/web-dashboard/web/css/index.css | 2 +- .../web-dashboard/web/js/hs/index.js | 4 ++-- flink-runtime-web/web-dashboard/web/js/index.js | 4 ++-- .../partials/jobs/job.plan.node-list.metrics.html | 6 +++++- 8 files changed, 49 insertions(+), 10 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flink/blob/3642c5a6/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.metrics.jade ---------------------------------------------------------------------- diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.metrics.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.metrics.jade index f3ec8dc..a1d22e3 100644 --- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.metrics.jade +++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.metrics.jade @@ -28,7 +28,12 @@ nav.navbar.navbar-default.navbar-secondary-additional.navbar-secondary-additiona | span.caret ul.dropdown-menu.dropdown-menu-right.metric-menu - li(ng-repeat="metric in availableMetrics track by $index") + section(class="search") + label(for="search-input") + i(class="fa fa-search" aria-hidden="true") + span(class="sr-only") Search icons + input(type="text" ng-model="metricsFilterQuery" class="metrics-filter" placeholder="Search available metrics...") + li(ng-repeat="metric in availableMetrics | searchMetrics:metricsFilterQuery track by $index") a(ng-click="addMetric(metric)") {{ metric.id | limit }} .dropdown.add-metrics(ng-if="!availableMetrics.length") http://git-wip-us.apache.org/repos/asf/flink/blob/3642c5a6/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee ---------------------------------------------------------------------- diff --git a/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee b/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee index e2b8339..211139f 100644 --- a/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee +++ b/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee @@ -132,3 +132,9 @@ angular.module('flinkApp') return_val = value return return_val ] + +.filter "searchMetrics", -> + (availableMetrics, query)-> + queryRegex = new RegExp(query, "gi") + return (metric for metric in availableMetrics when metric.id.match(queryRegex)) + http://git-wip-us.apache.org/repos/asf/flink/blob/3642c5a6/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 d4315ea..ebe8e98 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 @@ -353,13 +353,23 @@ angular.module('flinkApp') $scope.vertex = data MetricsService.getAvailableMetrics($scope.jobid, $scope.nodeid).then (data) -> - $scope.availableMetrics = data + $scope.availableMetrics = data.sort(alphabeticalSortById) $scope.metrics = MetricsService.getMetricsSetup($scope.jobid, $scope.nodeid).names MetricsService.registerObserver($scope.jobid, $scope.nodeid, (data) -> $scope.$broadcast "metrics:data:update", data.timestamp, data.values ) + alphabeticalSortById = (a, b) -> + A = a.id.toLowerCase() + B = b.id.toLowerCase() + if A < B + return -1 + else if A > B + return 1 + else + return 0 + $scope.dropped = (event, index, item, external, type) -> MetricsService.orderMetrics($scope.jobid, $scope.nodeid, item, index) http://git-wip-us.apache.org/repos/asf/flink/blob/3642c5a6/flink-runtime-web/web-dashboard/app/styles/metric.styl ---------------------------------------------------------------------- diff --git a/flink-runtime-web/web-dashboard/app/styles/metric.styl b/flink-runtime-web/web-dashboard/app/styles/metric.styl index 94c4948..ec0afaf 100644 --- a/flink-runtime-web/web-dashboard/app/styles/metric.styl +++ b/flink-runtime-web/web-dashboard/app/styles/metric.styl @@ -38,9 +38,23 @@ .metric-menu max-height: 300px - max-width: 900px + width: 300px overflow-y: scroll - text-align: right + text-align: left + + .search + label + position: absolute; + top: 15px + left: 22px + input.metrics-filter + height: 30px + padding: 5px 5px 5px 25px + margin: 5px 5px 5px 15px + width: 90% + border-radius: 5px + border: 1px solid #999 + box-shadow: none $metric-row-height = 180px + 85px http://git-wip-us.apache.org/repos/asf/flink/blob/3642c5a6/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 db615b1..6429736 100644 --- a/flink-runtime-web/web-dashboard/web/css/index.css +++ b/flink-runtime-web/web-dashboard/web/css/index.css @@ -1 +1 @@ -#main,#sidebar,body,html{height:100%}#content,#sidebar{-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;-ms-transition:.4s}.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;left:-250px;top:0;bottom:0;width:250px;background:#151515;transition:.4s;-webkit-box-shadow:inset -10px 0 10px rgba(0,0,0,.2);box-shadow:inset -10px 0 10px rgba(0,0,0,.2)}#sidebar.sidebar-visible{left:0}#sidebar .logo{width:auto;height:22px}#sidebar .logo img{display:inline-block}#sidebar .navbar-static-top{overflow:hidden;height:51px}#sidebar .navbar-static-top .navbar-header{width:100%}#sidebar .navbar-brand.navbar-brand-text{font-size:14px;font-weight:700;color:#fff;padding-left:0}#sidebar .nav>li>a{color:#aaa;margin-bottom:1px}#sidebar .nav>li>a:focus,#sidebar .nav>li>a:hover{background-color:rgba(40,40,40,.5)}#sidebar .nav>li>a.acti ve{background-color:rgba(100,100,100,.5)}#content{background-color:#fff;margin-left:0;padding-top:70px;height:100%;transition:.4s}.table .table,.table.table-inner{background-color:transparent}#content .navbar-main,#content .navbar-main-additional{-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;-ms-transition:.4s;transition:.4s}#content .navbar-main-additional{margin-top:51px;border-bottom:none;padding:0 20px}#content .navbar-main-additional .nav-tabs{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}#content.sidebar-visible .navbar-main,#content.sidebar-visible .navbar-main-additional{left:250px}#content #fold-button{display:inline-block;margin-left:20px}#content #content-inner{padding:0 20px 20px}#content #content-inner.has-navbar-main-additional{padding-top:42px}.table#add-file-table span.btn,.table#job- submit-table td>span.btn{padding:2px 4px;font-size:14px}.page-header{margin:0 0 20px}.nav>li>a,.nav>li>a:focus,.nav>li>a:hover{color:#aaa;background-color:transparent;border-bottom:2px solid transparent}.nav>li.active>a,.nav>li.active>a:focus,.nav>li.active>a:hover{color:#000;border-bottom:2px solid #000}.nav.nav-tabs{margin-bottom:20px}.table th{font-weight:400;color:#999}.table td.td-long{width:20%;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.table.table-clickable tr{cursor:pointer}.table.table-properties{table-layout:fixed;white-space:nowrap}.table.table-properties td{width:50%;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.table.table-body-hover>tbody{border-top:none;border-left:2px solid transparent}.table.table-body-hover>tbody.active{border-left:2px solid #000}.table.table-body-hover>tbody.active td.tab-column li.active,.table.table-body-hover>tbody.active td:not(.tab-c olumn),.table.table-body-hover>tbody:hover td.tab-column li.active,.table.table-body-hover>tbody:hover td:not(.tab-column){background-color:#f0f0f0}.table.table-activable td.tab-column,.table.table-activable th.tab-column{border-top:none;width:47px}.table.table-activable td.tab-column{border-right:1px solid #ddd}.table.table-activable td{position:relative}.table.table-no-border td,.table.table-no-border th{border-top:none!important}.table#job-submit-table{table-layout:fixed;white-space:nowrap}.table#job-submit-table td.td-large{width:40%}.table#job-submit-table td{width:15%}.table#job-submit-table td>input{height:28px;font-size:14px}.table#add-file-table{table-layout:fixed}.table#add-file-table span.btn{position:relative;overflow:hidden;border-radius:2px;margin-top:-3px}.table#add-file-table td#add-file-button{width:100px}.table#add-file-table td#add-file-button input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;opacity:0;-ms-filter:"progid:DXImageTransf orm.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);outline:0;cursor:inherit;display:block}.timeline-canvas .timeline-insidelabel,.timeline-canvas .timeline-series,svg.graph .node{cursor:pointer}.table#add-file-table td#add-file-name{width:250px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.table#add-file-table td#add-file-status{width:100%}.table#add-file-table td#add-file-status span.btn-progress-bar{padding:0!important;width:100%;background-color:#f5f5f5;text-align:left}.table#add-file-table td#add-file-status span.btn-progress{padding:2px;font-size:10px}.table span.error-area{color:red}.table span.row-button{padding:1px 2px;margin:0;border:none!important}.table .small-label{text-transform:uppercase;font-size:13px;color:#999}span.icon-wrapper{width:1.2em;display:inline-block}.panel.panel-dashboard .huge{font-size:28px}.panel.panel-lg{font-size:16px}.panel.panel-lg .badge{font-size:14px}.navbar-secondary{overflow:auto}.navbar-main .navbar -title,.navbar-main .navbar-title-job,.navbar-main .panel-title,.navbar-main-additional .navbar-title,.navbar-main-additional .navbar-title-job,.navbar-main-additional .panel-title,.navbar-secondary .navbar-title,.navbar-secondary .navbar-title-job,.navbar-secondary .panel-title,.navbar-secondary-additional .navbar-title,.navbar-secondary-additional .navbar-title-job,.navbar-secondary-additional .panel-title,.panel.panel-multi .navbar-title,.panel.panel-multi .navbar-title-job,.panel.panel-multi .panel-title{float:left;font-size:18px;padding:12px 20px 13px 10px;color:#333;display:inline-block}.navbar-main .navbar-info,.navbar-main .panel-info,.navbar-main-additional .navbar-info,.navbar-main-additional .panel-info,.navbar-secondary .navbar-info,.navbar-secondary .panel-info,.navbar-secondary-additional .navbar-info,.navbar-secondary-additional .panel-info,.panel.panel-multi .navbar-info,.panel.panel-multi .panel-info{float:left;font-size:14px;padding:15px;color:#999;display:inline-b lock;border-right:1px solid #e7e7e7;overflow:hidden}.navbar-main .navbar-info .overflow,.navbar-main .panel-info .overflow,.navbar-main-additional .navbar-info .overflow,.navbar-main-additional .panel-info .overflow,.navbar-secondary .navbar-info .overflow,.navbar-secondary .panel-info .overflow,.navbar-secondary-additional .navbar-info .overflow,.navbar-secondary-additional .panel-info .overflow,.panel.panel-multi .navbar-info .overflow,.panel.panel-multi .panel-info .overflow{position:absolute;display:block;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;height:22px;line-height:22px;vertical-align:middle}.navbar-main .navbar-info.first,.navbar-main .panel-info.first,.navbar-main-additional .navbar-info.first,.navbar-main-additional .panel-info.first,.navbar-secondary .navbar-info.first,.navbar-secondary .panel-info.first,.navbar-secondary-additional .navbar-info.first,.navbar-secondary-additional .panel-info.first,.panel.panel-multi .navbar-info.first,.panel.panel -multi .panel-info.first{border-left:1px solid #e7e7e7}.navbar-main .navbar-info.last,.navbar-main .panel-info.last,.navbar-main-additional .navbar-info.last,.navbar-main-additional .panel-info.last,.navbar-secondary .navbar-info.last,.navbar-secondary .panel-info.last,.navbar-secondary-additional .navbar-info.last,.navbar-secondary-additional .panel-info.last,.panel.panel-multi .navbar-info.last,.panel.panel-multi .panel-info.last{border-right:none}.panel.panel-multi .panel-heading{padding:0}.panel.panel-multi .panel-heading .panel-info.thin{padding:8px 10px}.panel.panel-multi .panel-body{padding:10px;background-color:#fdfdfd;color:#999;font-size:13px}.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-secondary-additional .navbar-info{font-size:13px;padding:10px 15px}.nav-top-affix.affix{width:100%;top:50px;margin-left:-20px;pa dding-left:20px;margin-right:-20px;padding-right:20px;background-color:#fff;z-index:1}.badge-default[href]:focus,.badge-default[href]:hover{background-color:grey}.badge-primary{background-color:#428bca}.badge-primary[href]:focus,.badge-primary[href]:hover{background-color:#3071a9}.badge-success{background-color:#5cb85c}.badge-success[href]:focus,.badge-success[href]:hover{background-color:#449d44}.badge-info{background-color:#5bc0de}.badge-info[href]:focus,.badge-info[href]:hover{background-color:#31b0d5}.badge-warning{background-color:#f0ad4e}.badge-warning[href]:focus,.badge-warning[href]:hover{background-color:#ec971f}.badge-danger{background-color:#d9534f}.badge-danger[href]:focus,.badge-danger[href]:hover{background-color:#c9302c}.indicator{display:inline-block;margin-right:15px}.indicator.indicator-primary{color:#428bca}.indicator.indicator-success{color:#5cb85c}.indicator.indicator-info{color:#5bc0de}.indicator.indicator-warning{color:#f0ad4e}.indicator.indicator-danger{color :#d9534f}pre.exception{border:none;background-color:transparent;padding:0;margin:0}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.nav-tabs.tabs-vertical{position:absolute;left:0;top:0;border-bottom:none;z-index:100}.nav-tabs.tabs-vertical li{float:none;margin-bottom:0;margin-right:-1px}.nav-tabs.tabs-vertical li>a{margin-right:0;border-radius:0;border-bottom:none;border-left:2px solid transparent}.nav-tabs.tabs-vertical li.active>a,.nav-tabs.tabs-vertical li>a:focus,.nav-tabs.tabs-vertical li>a:hover{border-bottom:none;border-left:2px solid #000}.navbar-main .navbar-title,.navbar-main-additional .navbar-title,.navbar-secondary .navbar-title,.navbar-secondary-additional .navbar-title{padding:12px 20px 13px}.navbar-main .navbar-title-job{padding:8px 20px}.navbar-main .navbar-title-job .indicator-primary{padding:8px 0 0}.navbar-main .navbar-title-job .no-padding{padding:0}.navbar-main .navbar-title-job .no-margin{m argin:0}.navbar-main .navbar-title-job .job-name{font-size:14px}.navbar-main .navbar-title-job .job-id{color:#999;font-size:11px}.checkpoint-overview a,svg.graph .node h4{color:#000}livechart{width:30%;height:30%;text-align:center}.canvas-wrapper{border:1px solid #ddd;position:relative;margin-bottom:20px;height:100%}.canvas-wrapper .main-canvas{height:100%;overflow:hidden}.canvas-wrapper .main-canvas .zoom-buttons{position:absolute;top:10px;right:10px}.label-group .label{display:inline-block;padding-left:.4em;padding-right:.4em;margin:0;border-right:1px solid #fff;border-radius:0}.label-group .label.label-black{background-color:#000}.navbar-info-button{padding:3px 4px;font-size:12px;font-family:inherit;margin-top:-2px}svg.graph .edge-label,svg.graph text{font-size:14px}.checkpoints-view{padding-top:1em}.subtask-details .blank{height:2em}.checkpoint-overview td span{padding-left:2em}svg.graph{overflow:hidden;height:100%;width:100%!important}svg.graph g.type-TK>rect{fill:#00ffd0}svg.g raph text{font-weight:300}svg.graph .node>rect{stroke:#999;stroke-width:5px;fill:#fff;margin:0;padding:0}svg.graph .node[active]>rect{fill:#eee}svg.graph .node.node-mirror>rect{stroke:#a8a8a8}svg.graph .node.node-iteration>rect{stroke:#cd3333}svg.graph .node.node-source>rect{stroke:#4ce199}svg.graph .node.node-sink>rect{stroke:#e6ec8b}svg.graph .node.node-normal>rect{stroke:#3fb6d8}svg.graph .node h5{color:#999}svg.graph .edgeLabel rect{fill:#fff}svg.graph .edgePath path{stroke:#333;stroke-width:2px;fill:#333}svg.graph .label{color:#777;margin:0}svg.graph .node-label{display:block;margin:0;text-decoration:none}.timeline{overflow:hidden}.timeline-canvas{overflow:hidden;padding:10px}.timeline-canvas .bar-container{overflow:hidden}.timeline-canvas.secondary .timeline-insidelabel,.timeline-canvas.secondary .timeline-series{cursor:auto}#content .navbar-secondary-additional.navbar-secondary-additional-2 .add-metrics a,.show-pointer{cursor:pointer}.qtip-timeline-bar{font-size:14px;line-hei ght:1.4}#content .navbar-secondary-additional.navbar-secondary-additional-2{margin:-10px -10px 10px;padding:0;border-bottom:1px solid #e4e4e4}#content .navbar-secondary-additional.navbar-secondary-additional-2 .navbar-info{padding-top:12px;padding-bottom:12px}#content .navbar-secondary-additional.navbar-secondary-additional-2 .add-metrics{margin-right:15px;float:right}#content .navbar-secondary-additional.navbar-secondary-additional-2 .add-metrics .btn{margin-top:5px;margin-bottom:5px}#content .navbar-secondary-additional.navbar-secondary-additional-2 .metric-menu{max-height:300px;max-width:900px;overflow-y:scroll;text-align:right}.metric-row{margin:0;min-height:275px;padding:0;list-style-type:none}.metric-row .metric-col{background-color:transparent;width:33.33%;float:left}.metric-row .metric-col.big{width:100%}.metric-row .metric-col .panel{margin-left:5px;margin-right:5px;min-height:265px;margin-bottom:10px}.metric-row .metric-col .panel .panel-body{background-color:transparent;h eight:265px;position:relative}.metric-row .metric-col .panel .panel-body .metric-numeric{text-align:center;margin-top:75px;font-size:40px;font-weight:700}.metric-row .metric-col .panel .panel-heading{padding:0 10px;background-color:transparent;height:41px;line-height:41px;position:relative;overflow:hidden;cursor:pointer}.metric-row .metric-col .panel .panel-heading .metric-title{padding:10px 0}.metric-row .metric-col .panel .panel-heading .buttons{position:absolute;top:0;right:0;padding:0 10px;background-color:#fff}.metric-row .metric-col.dndDraggingSource{display:none}.metric-row .dndPlaceholder{position:relative;background-color:#f0f0f0;min-height:305px;display:block;width:33.33%;float:left;margin-bottom:10px;border-radius:5px}.p-info{padding-left:5px;padding-right:5px}@media (min-width:1024px) and (max-width:1279px){#content #fold-button,#sidebar .navbar-static-top .navbar-brand-text{display:none}#sidebar{left:0;width:160px}#content{margin-left:160px}#content .navbar-main,#conten t .navbar-main-additional{left:160px}.table td.td-long{width:20%}}@media (min-width:1280px){#sidebar{left:0}#content{margin-left:250px}#content #fold-button{display:none}#content .navbar-main,#content .navbar-main-additional{left:250px}.table td.td-long{width:30%}}.legend-box{font-size:10px;width:2em}#total-mem{background-color:#7cb5ec}#heap-mem{background-color:#434348}#non-heap-mem{background-color:#90ed7d}#fetch-plan,#job-submit{width:100px}#content-inner,#details,#node-details{height:100%}#job-panel{overflow-y:auto} \ No newline at end of file +#main,#sidebar,body,html{height:100%}#content,#sidebar{-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;-ms-transition:.4s}.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;left:-250px;top:0;bottom:0;width:250px;background:#151515;transition:.4s;-webkit-box-shadow:inset -10px 0 10px rgba(0,0,0,.2);box-shadow:inset -10px 0 10px rgba(0,0,0,.2)}#sidebar.sidebar-visible{left:0}#sidebar .logo{width:auto;height:22px}#sidebar .logo img{display:inline-block}#sidebar .navbar-static-top{overflow:hidden;height:51px}#sidebar .navbar-static-top .navbar-header{width:100%}#sidebar .navbar-brand.navbar-brand-text{font-size:14px;font-weight:700;color:#fff;padding-left:0}#sidebar .nav>li>a{color:#aaa;margin-bottom:1px}#sidebar .nav>li>a:focus,#sidebar .nav>li>a:hover{background-color:rgba(40,40,40,.5)}#sidebar .nav>li>a.acti ve{background-color:rgba(100,100,100,.5)}#content{background-color:#fff;margin-left:0;padding-top:70px;height:100%;transition:.4s}.table .table,.table.table-inner{background-color:transparent}#content .navbar-main,#content .navbar-main-additional{-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;-ms-transition:.4s;transition:.4s}#content .navbar-main-additional{margin-top:51px;border-bottom:none;padding:0 20px}#content .navbar-main-additional .nav-tabs{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}#content.sidebar-visible .navbar-main,#content.sidebar-visible .navbar-main-additional{left:250px}#content #fold-button{display:inline-block;margin-left:20px}#content #content-inner{padding:0 20px 20px}#content #content-inner.has-navbar-main-additional{padding-top:42px}.table#add-file-table span.btn,.table#job- submit-table td>span.btn{padding:2px 4px;font-size:14px}.page-header{margin:0 0 20px}.nav>li>a,.nav>li>a:focus,.nav>li>a:hover{color:#aaa;background-color:transparent;border-bottom:2px solid transparent}.nav>li.active>a,.nav>li.active>a:focus,.nav>li.active>a:hover{color:#000;border-bottom:2px solid #000}.nav.nav-tabs{margin-bottom:20px}.table th{font-weight:400;color:#999}.table td.td-long{width:20%;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.table.table-clickable tr{cursor:pointer}.table.table-properties{table-layout:fixed;white-space:nowrap}.table.table-properties td{width:50%;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.table.table-body-hover>tbody{border-top:none;border-left:2px solid transparent}.table.table-body-hover>tbody.active{border-left:2px solid #000}.table.table-body-hover>tbody.active td.tab-column li.active,.table.table-body-hover>tbody.active td:not(.tab-c olumn),.table.table-body-hover>tbody:hover td.tab-column li.active,.table.table-body-hover>tbody:hover td:not(.tab-column){background-color:#f0f0f0}.table.table-activable td.tab-column,.table.table-activable th.tab-column{border-top:none;width:47px}.table.table-activable td.tab-column{border-right:1px solid #ddd}.table.table-activable td{position:relative}.table.table-no-border td,.table.table-no-border th{border-top:none!important}.table#job-submit-table{table-layout:fixed;white-space:nowrap}.table#job-submit-table td.td-large{width:40%}.table#job-submit-table td{width:15%}.table#job-submit-table td>input{height:28px;font-size:14px}.table#add-file-table{table-layout:fixed}.table#add-file-table span.btn{position:relative;overflow:hidden;border-radius:2px;margin-top:-3px}.table#add-file-table td#add-file-button{width:100px}.table#add-file-table td#add-file-button input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;opacity:0;-ms-filter:"progid:DXImageTransf orm.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);outline:0;cursor:inherit;display:block}.timeline-canvas .timeline-insidelabel,.timeline-canvas .timeline-series,svg.graph .node{cursor:pointer}.table#add-file-table td#add-file-name{width:250px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.table#add-file-table td#add-file-status{width:100%}.table#add-file-table td#add-file-status span.btn-progress-bar{padding:0!important;width:100%;background-color:#f5f5f5;text-align:left}.table#add-file-table td#add-file-status span.btn-progress{padding:2px;font-size:10px}.table span.error-area{color:red}.table span.row-button{padding:1px 2px;margin:0;border:none!important}.table .small-label{text-transform:uppercase;font-size:13px;color:#999}span.icon-wrapper{width:1.2em;display:inline-block}.panel.panel-dashboard .huge{font-size:28px}.panel.panel-lg{font-size:16px}.panel.panel-lg .badge{font-size:14px}.navbar-secondary{overflow:auto}.navbar-main .navbar -title,.navbar-main .navbar-title-job,.navbar-main .panel-title,.navbar-main-additional .navbar-title,.navbar-main-additional .navbar-title-job,.navbar-main-additional .panel-title,.navbar-secondary .navbar-title,.navbar-secondary .navbar-title-job,.navbar-secondary .panel-title,.navbar-secondary-additional .navbar-title,.navbar-secondary-additional .navbar-title-job,.navbar-secondary-additional .panel-title,.panel.panel-multi .navbar-title,.panel.panel-multi .navbar-title-job,.panel.panel-multi .panel-title{float:left;font-size:18px;padding:12px 20px 13px 10px;color:#333;display:inline-block}.navbar-main .navbar-info,.navbar-main .panel-info,.navbar-main-additional .navbar-info,.navbar-main-additional .panel-info,.navbar-secondary .navbar-info,.navbar-secondary .panel-info,.navbar-secondary-additional .navbar-info,.navbar-secondary-additional .panel-info,.panel.panel-multi .navbar-info,.panel.panel-multi .panel-info{float:left;font-size:14px;padding:15px;color:#999;display:inline-b lock;border-right:1px solid #e7e7e7;overflow:hidden}.navbar-main .navbar-info .overflow,.navbar-main .panel-info .overflow,.navbar-main-additional .navbar-info .overflow,.navbar-main-additional .panel-info .overflow,.navbar-secondary .navbar-info .overflow,.navbar-secondary .panel-info .overflow,.navbar-secondary-additional .navbar-info .overflow,.navbar-secondary-additional .panel-info .overflow,.panel.panel-multi .navbar-info .overflow,.panel.panel-multi .panel-info .overflow{position:absolute;display:block;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;height:22px;line-height:22px;vertical-align:middle}.navbar-main .navbar-info.first,.navbar-main .panel-info.first,.navbar-main-additional .navbar-info.first,.navbar-main-additional .panel-info.first,.navbar-secondary .navbar-info.first,.navbar-secondary .panel-info.first,.navbar-secondary-additional .navbar-info.first,.navbar-secondary-additional .panel-info.first,.panel.panel-multi .navbar-info.first,.panel.panel -multi .panel-info.first{border-left:1px solid #e7e7e7}.navbar-main .navbar-info.last,.navbar-main .panel-info.last,.navbar-main-additional .navbar-info.last,.navbar-main-additional .panel-info.last,.navbar-secondary .navbar-info.last,.navbar-secondary .panel-info.last,.navbar-secondary-additional .navbar-info.last,.navbar-secondary-additional .panel-info.last,.panel.panel-multi .navbar-info.last,.panel.panel-multi .panel-info.last{border-right:none}.panel.panel-multi .panel-heading{padding:0}.panel.panel-multi .panel-heading .panel-info.thin{padding:8px 10px}.panel.panel-multi .panel-body{padding:10px;background-color:#fdfdfd;color:#999;font-size:13px}.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-secondary-additional .navbar-info{font-size:13px;padding:10px 15px}.nav-top-affix.affix{width:100%;top:50px;margin-left:-20px;pa dding-left:20px;margin-right:-20px;padding-right:20px;background-color:#fff;z-index:1}.badge-default[href]:focus,.badge-default[href]:hover{background-color:grey}.badge-primary{background-color:#428bca}.badge-primary[href]:focus,.badge-primary[href]:hover{background-color:#3071a9}.badge-success{background-color:#5cb85c}.badge-success[href]:focus,.badge-success[href]:hover{background-color:#449d44}.badge-info{background-color:#5bc0de}.badge-info[href]:focus,.badge-info[href]:hover{background-color:#31b0d5}.badge-warning{background-color:#f0ad4e}.badge-warning[href]:focus,.badge-warning[href]:hover{background-color:#ec971f}.badge-danger{background-color:#d9534f}.badge-danger[href]:focus,.badge-danger[href]:hover{background-color:#c9302c}.indicator{display:inline-block;margin-right:15px}.indicator.indicator-primary{color:#428bca}.indicator.indicator-success{color:#5cb85c}.indicator.indicator-info{color:#5bc0de}.indicator.indicator-warning{color:#f0ad4e}.indicator.indicator-danger{color :#d9534f}pre.exception{border:none;background-color:transparent;padding:0;margin:0}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.nav-tabs.tabs-vertical{position:absolute;left:0;top:0;border-bottom:none;z-index:100}.nav-tabs.tabs-vertical li{float:none;margin-bottom:0;margin-right:-1px}.nav-tabs.tabs-vertical li>a{margin-right:0;border-radius:0;border-bottom:none;border-left:2px solid transparent}.nav-tabs.tabs-vertical li.active>a,.nav-tabs.tabs-vertical li>a:focus,.nav-tabs.tabs-vertical li>a:hover{border-bottom:none;border-left:2px solid #000}.navbar-main .navbar-title,.navbar-main-additional .navbar-title,.navbar-secondary .navbar-title,.navbar-secondary-additional .navbar-title{padding:12px 20px 13px}.navbar-main .navbar-title-job{padding:8px 20px}.navbar-main .navbar-title-job .indicator-primary{padding:8px 0 0}.navbar-main .navbar-title-job .no-padding{padding:0}.navbar-main .navbar-title-job .no-margin{m argin:0}.navbar-main .navbar-title-job .job-name{font-size:14px}.navbar-main .navbar-title-job .job-id{color:#999;font-size:11px}.checkpoint-overview a,svg.graph .node h4{color:#000}livechart{width:30%;height:30%;text-align:center}.canvas-wrapper{border:1px solid #ddd;position:relative;margin-bottom:20px;height:100%}.canvas-wrapper .main-canvas{height:100%;overflow:hidden}.canvas-wrapper .main-canvas .zoom-buttons{position:absolute;top:10px;right:10px}.label-group .label{display:inline-block;padding-left:.4em;padding-right:.4em;margin:0;border-right:1px solid #fff;border-radius:0}.label-group .label.label-black{background-color:#000}.navbar-info-button{padding:3px 4px;font-size:12px;font-family:inherit;margin-top:-2px}svg.graph .edge-label,svg.graph text{font-size:14px}.checkpoints-view{padding-top:1em}.subtask-details .blank{height:2em}.checkpoint-overview td span{padding-left:2em}svg.graph{overflow:hidden;height:100%;width:100%!important}svg.graph g.type-TK>rect{fill:#00ffd0}svg.g raph text{font-weight:300}svg.graph .node>rect{stroke:#999;stroke-width:5px;fill:#fff;margin:0;padding:0}svg.graph .node[active]>rect{fill:#eee}svg.graph .node.node-mirror>rect{stroke:#a8a8a8}svg.graph .node.node-iteration>rect{stroke:#cd3333}svg.graph .node.node-source>rect{stroke:#4ce199}svg.graph .node.node-sink>rect{stroke:#e6ec8b}svg.graph .node.node-normal>rect{stroke:#3fb6d8}svg.graph .node h5{color:#999}svg.graph .edgeLabel rect{fill:#fff}svg.graph .edgePath path{stroke:#333;stroke-width:2px;fill:#333}svg.graph .label{color:#777;margin:0}svg.graph .node-label{display:block;margin:0;text-decoration:none}.timeline{overflow:hidden}.timeline-canvas{overflow:hidden;padding:10px}.timeline-canvas .bar-container{overflow:hidden}.timeline-canvas.secondary .timeline-insidelabel,.timeline-canvas.secondary .timeline-series{cursor:auto}#content .navbar-secondary-additional.navbar-secondary-additional-2 .add-metrics a,.show-pointer{cursor:pointer}.qtip-timeline-bar{font-size:14px;line-hei ght:1.4}#content .navbar-secondary-additional.navbar-secondary-additional-2{margin:-10px -10px 10px;padding:0;border-bottom:1px solid #e4e4e4}#content .navbar-secondary-additional.navbar-secondary-additional-2 .navbar-info{padding-top:12px;padding-bottom:12px}#content .navbar-secondary-additional.navbar-secondary-additional-2 .add-metrics{margin-right:15px;float:right}#content .navbar-secondary-additional.navbar-secondary-additional-2 .add-metrics .btn{margin-top:5px;margin-bottom:5px}#content .navbar-secondary-additional.navbar-secondary-additional-2 .metric-menu{max-height:300px;width:300px;overflow-y:scroll;text-align:left}#content .search label{position:absolute;top:15px;left:22px}#content .search input.metrics-filter{height:30px;padding:5px 5px 5px 25px;margin:5px 5px 5px 15px;width:90%;border-radius:5px;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.metric-row{margin:0;min-height:275px;padding:0;list-style-type:none}.metric-row .metric-col{background-color:tran sparent;width:33.33%;float:left}.metric-row .metric-col.big{width:100%}.metric-row .metric-col .panel{margin-left:5px;margin-right:5px;min-height:265px;margin-bottom:10px}.metric-row .metric-col .panel .panel-body{background-color:transparent;height:265px;position:relative}.metric-row .metric-col .panel .panel-body .metric-numeric{text-align:center;margin-top:75px;font-size:40px;font-weight:700}.metric-row .metric-col .panel .panel-heading{padding:0 10px;background-color:transparent;height:41px;line-height:41px;position:relative;overflow:hidden;cursor:pointer}.metric-row .metric-col .panel .panel-heading .metric-title{padding:10px 0}.metric-row .metric-col .panel .panel-heading .buttons{position:absolute;top:0;right:0;padding:0 10px;background-color:#fff}.metric-row .metric-col.dndDraggingSource{display:none}.metric-row .dndPlaceholder{position:relative;background-color:#f0f0f0;min-height:305px;display:block;width:33.33%;float:left;margin-bottom:10px;border-radius:5px}.p-info{paddin g-left:5px;padding-right:5px}@media (min-width:1024px) and (max-width:1279px){#content #fold-button,#sidebar .navbar-static-top .navbar-brand-text{display:none}#sidebar{left:0;width:160px}#content{margin-left:160px}#content .navbar-main,#content .navbar-main-additional{left:160px}.table td.td-long{width:20%}}@media (min-width:1280px){#sidebar{left:0}#content{margin-left:250px}#content #fold-button{display:none}#content .navbar-main,#content .navbar-main-additional{left:250px}.table td.td-long{width:30%}}.legend-box{font-size:10px;width:2em}#total-mem{background-color:#7cb5ec}#heap-mem{background-color:#434348}#non-heap-mem{background-color:#90ed7d}#fetch-plan,#job-submit{width:100px}#content-inner,#details,#node-details{height:100%}#job-panel{overflow-y:auto} \ No newline at end of file
