[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

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

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%