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

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;
-  bottom: 0;
-  top: 0px;
+  position: absolute;
+  top: 50px;
+  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="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="col-md-12">
     <div class="row container-fluid">
       {{#if model.attempt}}
         <div class="panel panel-default">
-          <div class="panel-heading">
-            Attempt Information
+          <div class="panel-body">
+            <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

@@ -1,56 +1,51 @@
 {{!
- * 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.
+* 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.
 }}
 
-<div class="col-md-12" style="margin-bottom: 15px;">
-  <div class="col-md-12">
-    {{metrics-table metrics=model.metrics type="Service"}}
-  </div>
+<div class="col-md-12 margin-bottom-20">
+  {{metrics-table metrics=model.metrics type="Service"}}
 </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>
-      </div>
-      <div class="">
-        <table class="table table-hover table-custom-bordered table-custom-stripped table-radius-none table-border-none">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each model.configs as |config|}}
-              <tr>
-                <td>{{config.name}}</td>
-                <td>{{config.value}}</td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
-    </div>
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <div class="panel-title">Service Configurations</div>
   </div>
-{{else}}
-  <div class="col-md-12">
-    <div class="panel panel-default">
-      <h4 class="text-center">No service configurations available!</h4>
-    </div>
+  <div class="">
+    <table class="table table-hover table-custom-bordered table-custom-stripped table-radius-none table-border-none">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each model.configs as |config|}}
+        <tr>
+          <td>{{config.name}}</td>
+          <td>{{config.value}}</td>
+        </tr>
+        {{/each}}
+      </tbody>
+    </table>
   </div>
-{{/if}}
+</div>
+{{else}}
+<div class="panel panel-default">
+  <h4 class="text-center">No service configurations available!</h4>
+</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="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">
+<div class="container-fluid">
+  <div class="col-md-12 container-fluid">
       {{outlet}}
-    </div>
   </div>
 </div>

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

@@ -18,28 +18,21 @@
 
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
-<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-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}}
-            {{#link-to 'yarn-component-instances.configs' tagName="li" class=(if (eq target.currentPath 'yarn-component-instances.configs') "active")}}
-              {{#link-to 'yarn-component-instances.configs' componentName (query-params service=serviceName appid=appId)}}Configurations{{/link-to}}
-            {{/link-to}}
-          </ul>
-        </div>
+<div class="container-fluid">
+  <div class="panel panel-default">
+    <div class="panel-heading no-border-bottom">
+      <div class="clearfix">
+        <ul class="nav nav-pills 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}}
+          {{#link-to 'yarn-component-instances.configs' tagName="li" class=(if (eq target.currentPath 'yarn-component-instances.configs') "active")}}
+            {{#link-to 'yarn-component-instances.configs' componentName (query-params service=serviceName appid=appId)}}Configurations{{/link-to}}
+          {{/link-to}}
+        </ul>
       </div>
     </div>
-
-    <div class="col-md-10 container-fluid">
+    <div class="panel-body">
       {{outlet}}
     </div>
   </div>

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

@@ -60,7 +60,7 @@
         </div>
       </div>
     </div>
-        <div class="panel-heading">
+    <div class="panel-heading">
       <div class="clearfix">
         <ul class="nav nav-pills">
           <ul class="nav nav-pills collapse in">

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}}
-      <h4 align = "center">Could not find any applications from this cluster</h4>
+      <br>
+      <div class="panel panel-default">
+        <h4 align = "center">Could not find any applications from this cluster</h4>
+      </div>
     {{/if}}
   </div>
 </div>