flink-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From u..@apache.org
Subject [1/3] flink git commit: [FLINK-5608] [webfrontend] Cancel button stays visible in narrow windows
Date Tue, 31 Jan 2017 12:54:01 GMT
Repository: flink
Updated Branches:
  refs/heads/master c9191eb8c -> 294c082e8


[FLINK-5608] [webfrontend] Cancel button stays visible in narrow windows

- Most importantly, the Cancel and Stop buttons have been changed to
float right, and will only wrap downward if pushed out by the job name
- Also combined the job name and job id into a single horizontal
element, reducing the overall horizontal space taken by the main
navbar components in the job view, making the main navbar components
less likely to wrap downward and be overlapped by the secondary navbar.
- Moved global job status counts to be right-most so it wraps before
the job-specific information, and it's now hidden on medium width
(992px - 1900px) to save horizontal space
- Compiled code has been rebuilt


Project: http://git-wip-us.apache.org/repos/asf/flink/repo
Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/7c9c0992
Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/7c9c0992
Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/7c9c0992

Branch: refs/heads/master
Commit: 7c9c099267bb2ad7ad8d31bca09b262f27f12b34
Parents: c9191eb
Author: Shannon Carey <rehevkor5@gmail.com>
Authored: Tue Jan 31 13:41:05 2017 +0100
Committer: Ufuk Celebi <uce@apache.org>
Committed: Tue Jan 31 13:52:16 2017 +0100

----------------------------------------------------------------------
 .../web-dashboard/app/partials/jobs/job.jade    | 37 ++++++++++++--------
 .../web-dashboard/app/styles/index.styl         | 17 ++++++++-
 2 files changed, 38 insertions(+), 16 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flink/blob/7c9c0992/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 981f244..c96a96a 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.jade
@@ -19,16 +19,27 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main(ng-if="job")
   #fold-button.btn.btn-default.navbar-btn.pull-left(ng-click='showSidebar()')
     i.fa.fa-navicon
 
-  .navbar-title
-    indicator-primary(status="{{job.state}}")
-    | {{ job.name }}
+  .navbar-title-job
+    .container-fluid.no-padding
+      .row.no-margin
+        .col-xs-1.no-padding
+          indicator-primary(status="{{job.state}}")
+        .col-xs-11.no-padding
+          .row
+            .col-xs-12.job-name
+              | {{ job.name }}
+          .row
+            .col-xs-12.job-id
+              | {{ job.jid }}
 
-  .navbar-info.first.last.hidden-xs.hidden-sm
-    | {{ job.jid }}
 
-  .navbar-info.first.last
-    .label-group
-      bs-label(status="{{status}}" ng-repeat="(status, value) in job['status-counts']") {{value}}
+  .navbar-info.last.first.pull-right(ng-if!="job.isStoppable && job.state=='RUNNING'")
+    span.navbar-info-button.btn.btn-default(ng-click="stopJob($event)")
+      | Stop
+
+  .navbar-info.last.first.pull-right(ng-if="job.state=='RUNNING' || job.state=='CREATED'
|| job.state=='RESTARTING'")
+    span.navbar-info-button.btn.btn-default(ng-click="cancelJob($event)")
+      | Cancel
 
   .navbar-info.first.last.hidden-xs.hidden-sm
     | {{ job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
@@ -39,13 +50,9 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main(ng-if="job")
   .navbar-info.last.first(ng-if="job.duration > -1" title="{{job.duration | humanizeDuration:false}}")
     | {{job.duration | humanizeDuration:true}}
 
-  .navbar-info.last.first(ng-if="job.state=='RUNNING' || job.state=='CREATED' || job.state=='RESTARTING'")
-    span.navbar-info-button.btn.btn-default(ng-click="cancelJob($event)")
-      | Cancel
-
-  .navbar-info.last.first(ng-if!="job.isStoppable && job.state=='RUNNING'")
-    span.navbar-info-button.btn.btn-default(ng-click="stopJob($event)")
-      | Stop
+  .navbar-info.first.last.hidden-xs.hidden-sm
+    .label-group
+      bs-label(status="{{status}}" ng-repeat="(status, value) in job['status-counts']") {{value}}
 
 nav.navbar.navbar-default.navbar-fixed-top.navbar-main-additional(ng-if="job")
   ul.nav.nav-tabs

http://git-wip-us.apache.org/repos/asf/flink/blob/7c9c0992/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 cbea5bf..3fe6b9e 100644
--- a/flink-runtime-web/web-dashboard/app/styles/index.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/index.styl
@@ -293,7 +293,7 @@ span.icon-wrapper
   overflow: auto
 
 .navbar-main, .navbar-secondary, .navbar-main-additional, .panel.panel-multi, .navbar-secondary-additional
-  .navbar-title, .panel-title
+  .navbar-title, .navbar-title-job, .panel-title
     float: left
     font-size: 18px
     padding: 12px 20px 13px 10px
@@ -465,6 +465,21 @@ pre
   .navbar-title
     padding: 12px 20px 13px 20px
 
+.navbar-main
+  .navbar-title-job
+    padding: 8px 20px 8px 20px
+    .indicator-primary
+      padding: 8px 0 0 0
+    .no-padding
+      padding: 0
+    .no-margin
+      margin: 0
+    .job-name
+      font-size: 14px
+    .job-id
+      color: #999
+      font-size: 11px
+
 livechart
   width: 30%
   height: 30%


Mime
View raw message