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 {
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -44,3 +44,11 @@
|
|||
.top-1 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.top-2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.top-3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 class="col-md-12 margin-bottom-20">
|
||||
{{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>
|
||||
{{#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}}
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<h4 class="text-center">No service configurations available!</h4>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="panel panel-default">
|
||||
<h4 class="text-center">No service configurations available!</h4>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue