YARN-7825. [UI2] Maintain constant horizontal application info bar for Application Attempt page. Contributed by Akhil PB.
(cherry picked from commit 228dc192f1)
This commit is contained in:
Sunil G
parent
9bbf494c7f
commit
dd445e0368
|
|
@ -739,6 +739,14 @@ div.loggedin-user {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-border-bottom {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-bottom-20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.diagnostic-info {
|
.diagnostic-info {
|
||||||
pre {
|
pre {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
|
||||||
|
|
@ -20,9 +20,9 @@
|
||||||
@import 'variables.scss';
|
@import 'variables.scss';
|
||||||
|
|
||||||
.yarn-compose-box {
|
.yarn-compose-box {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
bottom: 0;
|
top: 50px;
|
||||||
top: 0px;
|
bottom: 40px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
background-color: $yarn-panel-bg;
|
background-color: $yarn-panel-bg;
|
||||||
border: 1px solid $yarn-border-color;
|
border: 1px solid $yarn-border-color;
|
||||||
|
|
|
||||||
|
|
@ -44,3 +44,11 @@
|
||||||
.top-1 {
|
.top-1 {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-2 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-3 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
@ -19,30 +19,70 @@
|
||||||
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
||||||
|
|
||||||
<div class="row container-fluid">
|
<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">
|
<div class="row container-fluid">
|
||||||
{{#if model.attempt}}
|
{{#if model.attempt}}
|
||||||
<div class="panel panel-default">
|
<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>
|
</div>
|
||||||
{{app-attempt-table attempt=model.attempt}}
|
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,51 @@
|
||||||
{{!
|
{{!
|
||||||
* Licensed to the Apache Software Foundation (ASF) under one
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
* or more contributor license agreements. See the NOTICE file
|
* or more contributor license agreements. See the NOTICE file
|
||||||
* distributed with this work for additional information
|
* distributed with this work for additional information
|
||||||
* regarding copyright ownership. The ASF licenses this file
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
* to you under the Apache License, Version 2.0 (the
|
* to you under the Apache License, Version 2.0 (the
|
||||||
* "License"); you may not use this file except in compliance
|
* "License"); you may not use this file except in compliance
|
||||||
* with the License. You may obtain a copy of the License at
|
* with the License. You may obtain a copy of the License at
|
||||||
*
|
*
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
*
|
*
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* 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"}}
|
||||||
{{metrics-table metrics=model.metrics type="Service"}}
|
</div>
|
||||||
|
|
||||||
|
{{#if model.configs}}
|
||||||
|
<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>
|
</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>
|
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="col-md-12">
|
<div class="panel panel-default">
|
||||||
<div class="panel panel-default">
|
<h4 class="text-center">No service configurations available!</h4>
|
||||||
<h4 class="text-center">No service configurations available!</h4>
|
</div>
|
||||||
</div>
|
{{/if}}
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if model.app.diagnostics}}
|
{{#if model.app.diagnostics}}
|
||||||
<div class="col-md-12">
|
<div class="col-md-12 margin-bottom-20">
|
||||||
{{#if model.app.isFailed}}
|
{{#if model.app.isFailed}}
|
||||||
<div class="panel panel-danger">
|
<div class="panel panel-danger">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
|
|
|
||||||
|
|
@ -18,26 +18,8 @@
|
||||||
|
|
||||||
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
||||||
|
|
||||||
<div class="col-md-12 container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="col-md-12 container-fluid">
|
||||||
|
|
||||||
<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}}
|
{{outlet}}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,28 +18,21 @@
|
||||||
|
|
||||||
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
||||||
|
|
||||||
<div class="col-md-12 container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading no-border-bottom">
|
||||||
<div class="col-md-2 container-fluid">
|
<div class="clearfix">
|
||||||
<div class="panel panel-default">
|
<ul class="nav nav-pills collapse in">
|
||||||
<div class="panel-heading">
|
{{#link-to 'yarn-component-instances.info' tagName="li" class=(if (eq target.currentPath 'yarn-component-instances.info') "active")}}
|
||||||
Component
|
{{#link-to 'yarn-component-instances.info' componentName (query-params service=serviceName appid=appId)}}Information{{/link-to}}
|
||||||
</div>
|
{{/link-to}}
|
||||||
<div class="panel-body">
|
{{#link-to 'yarn-component-instances.configs' tagName="li" class=(if (eq target.currentPath 'yarn-component-instances.configs') "active")}}
|
||||||
<ul class="nav nav-pills nav-stacked collapse in">
|
{{#link-to 'yarn-component-instances.configs' componentName (query-params service=serviceName appid=appId)}}Configurations{{/link-to}}
|
||||||
{{#link-to 'yarn-component-instances.info' tagName="li" class=(if (eq target.currentPath 'yarn-component-instances.info') "active")}}
|
{{/link-to}}
|
||||||
{{#link-to 'yarn-component-instances.info' componentName (query-params service=serviceName appid=appId)}}Information{{/link-to}}
|
</ul>
|
||||||
{{/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>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
<div class="col-md-10 container-fluid">
|
|
||||||
{{outlet}}
|
{{outlet}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<ul class="nav nav-pills collapse in">
|
<ul class="nav nav-pills collapse in">
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,10 @@
|
||||||
{{#if model.apps}}
|
{{#if model.apps}}
|
||||||
{{em-table columns=columns rows=model.apps definition=tableDefinitio}}
|
{{em-table columns=columns rows=model.apps definition=tableDefinitio}}
|
||||||
{{else}}
|
{{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}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue