YARN-7825. [UI2] Maintain constant horizontal application info bar for Application Attempt page. Contributed by Akhil PB.

(cherry picked from commit 228dc192f1)

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss

@@ -739,6 +739,14 @@ div.loggedin-user {
   }
 }
 
+.no-border-bottom {
+  border-bottom: none;
+}
+
+.margin-bottom-20 {
+  margin-bottom: 20px;
+}
+
 .diagnostic-info {
   pre {
     margin-bottom: 0;

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss

@@ -20,9 +20,9 @@
 @import 'variables.scss';
 
 .yarn-compose-box {
-  position: fixed;
+  position: absolute;
-  bottom: 0;
+  top: 50px;
-  top: 0px;
+  bottom: 40px;
   right: 0px;
   background-color: $yarn-panel-bg;
   border: 1px solid $yarn-border-color;

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss

@@ -44,3 +44,11 @@
 .top-1 {
   margin-top: 5px;
 }
+
+.top-2 {
+  margin-top: 10px;
+}
+
+.top-3 {
+  margin-top: 20px;
+}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app-attempt.hbs

@@ -19,30 +19,70 @@
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="row container-fluid">
-  <div class="col-md-2">
+
-    <div class="panel panel-default">
+  <div class="col-md-12">
-      <div class="panel-heading">
-        Application Attempt
-      </div>
-      <div class="panel-body">
-        <ul class="nav nav-pills nav-stacked" id="stacked-menu">
-          <ul class="nav nav-pills nav-stacked collapse in">
-            {{#link-to 'yarn-app-attempt' tagName="li"}}
-              {{#link-to 'yarn-app-attempt' model.attempt.id}}Attempt Info{{/link-to}}
-            {{/link-to}}
-          </ul>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-10">
     <div class="row container-fluid">
       {{#if model.attempt}}
         <div class="panel panel-default">
-          <div class="panel-heading">
+          <div class="panel-body">
-            Attempt Information
+            <div class="flex">
+              <div>
+                <h3 class="top-2">{{model.attempt.id}}</h3>
+                <div class="muted-text">{{model.attempt.appMasterContainerId}}</div>
+                {{#if model.attempt.attemptState}}
+                  {{em-table-simple-status-cell class="top-1" content=model.attempt.attemptState}}
+                {{/if}}
+                {{#if (or model.attempt.attemptStartedTime model.attempt.validatedFinishedTs)}}
+                <div class="flex yarn-tooltip" title="Elapsed Time: {{model.attempt.elapsedTime}}">
+                  {{#if model.attempt.attemptStartedTime}}
+                  <div class="top-1 tail-2" >
+                    <i class="glyphicon glyphicon-time glyphicon-gray" />
+                    Started at {{model.attempt.attemptStartedTime}}
+                  </div>
+                  {{/if}}
+                  {{#if model.attempt.validatedFinishedTs}}
+                  <div class="top-1">
+                    <i class="glyphicon glyphicon-time glyphicon-gray" />
+                    Finished at {{model.attempt.validatedFinishedTs}}
+                  </div>
+                  {{/if}}
+                </div>
+                {{/if}}
+              </div>
+              <div class="flex-right">
+                <div class="top-2">
+                  <span>AM Host: </span>
+                  <strong class="yarn-tooltip" title="{{model.attempt.amNodeId}}">{{model.attempt.amNodeId}}</strong>
+                </div>
+                {{#if model.attempt.nodeHttpAddress}}
+                 <div class="top-1">
+                  <span>AM Node WebUI: </span>
+                  <strong class="yarn-tooltip" title="{{model.attempt.nodeHttpAddress}}">
+                    <a href="{{model.attempt.masterNodeURL}}">{{model.attempt.nodeHttpAddress}}</a>
+                  </strong>
+                </div>
+                {{/if}}
+                {{#if model.attempt.logsLink}}
+                <div class="top-1">
+                  <span>Log: </span>
+                  <strong>
+                    <a href="{{prepend-protocol model.attempt.logsLink}}" target="_blank">{{model.attempt.logsLink}}</a>
+                  </strong>
+                </div>
+                {{/if}}
+              </div>
+            </div>
+            {{#if model.attempt.diagnosticsInfo}}
+            <div class="panel panel-default top-3">
+              <div class="panel-heading">
+                Diagnostic Info for {{model.attempt.id}}
+              </div>
+              <div class="diagnostic-info">
+                <pre>{{model.attempt.diagnosticsInfo}}</pre>
+              </div>
+            </div>
+            {{/if}}
           </div>
-          {{app-attempt-table attempt=model.attempt}}
         </div>
       {{/if}}
     </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/configs.hbs

@@ -16,13 +16,11 @@
 * limitations under the License.
 }}
 
-<div class="col-md-12" style="margin-bottom: 15px;">
+<div class="col-md-12 margin-bottom-20">
-  <div class="col-md-12">
   {{metrics-table metrics=model.metrics type="Service"}}
 </div>
-</div>
+
 {{#if model.configs}}
-  <div class="col-md-12">
 <div class="panel panel-default">
   <div class="panel-heading">
     <div class="panel-title">Service Configurations</div>
@@ -46,11 +44,8 @@
     </table>
   </div>
 </div>
-  </div>
 {{else}}
-  <div class="col-md-12">
 <div class="panel panel-default">
   <h4 class="text-center">No service configurations available!</h4>
 </div>
-  </div>
 {{/if}}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/info.hbs

@@ -36,7 +36,7 @@
 {{/if}}
 
 {{#if model.app.diagnostics}}
-  <div class="col-md-12">
+  <div class="col-md-12 margin-bottom-20">
     {{#if model.app.isFailed}}
       <div class="panel panel-danger">
         <div class="panel-heading">

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-component-instance.hbs

@@ -18,26 +18,8 @@
 
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
+<div class="container-fluid">
   <div class="col-md-12 container-fluid">
-  <div class="row">
-
-    <div class="col-md-2 container-fluid">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          Component
-        </div>
-        <div class="panel-body">
-          <ul class="nav nav-pills nav-stacked collapse in">
-            {{#link-to 'yarn-component-instance.info' tagName="li" class=(if (eq target.currentPath 'yarn-component-instance.info') "active")}}
-              {{#link-to 'yarn-component-instance.info' componentName instanceName (query-params service=serviceName appid=appId)}}Information{{/link-to}}
-            {{/link-to}}
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-md-10 container-fluid">
       {{outlet}}
   </div>
 </div>
-</div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-component-instances.hbs

@@ -18,16 +18,11 @@
 
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
-<div class="col-md-12 container-fluid">
+<div class="container-fluid">
-  <div class="row">
-
-    <div class="col-md-2 container-fluid">
   <div class="panel panel-default">
-        <div class="panel-heading">
+    <div class="panel-heading no-border-bottom">
-          Component
+      <div class="clearfix">
-        </div>
+        <ul class="nav nav-pills collapse in">
-        <div class="panel-body">
-          <ul class="nav nav-pills nav-stacked collapse in">
           {{#link-to 'yarn-component-instances.info' tagName="li" class=(if (eq target.currentPath 'yarn-component-instances.info') "active")}}
             {{#link-to 'yarn-component-instances.info' componentName (query-params service=serviceName appid=appId)}}Information{{/link-to}}
           {{/link-to}}
@@ -37,9 +32,7 @@
         </ul>
       </div>
     </div>
-    </div>
+    <div class="panel-body">
-
-    <div class="col-md-10 container-fluid">
       {{outlet}}
     </div>
   </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs

@@ -32,7 +32,10 @@
     {{#if model.apps}}
       {{em-table columns=columns rows=model.apps  definition=tableDefinitio}}
     {{else}}
+      <br>
+      <div class="panel panel-default">
         <h4 align = "center">Could not find any applications from this cluster</h4>
+      </div>
     {{/if}}
   </div>
 </div>