| {{! |
| * 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. |
| }} |
| |
| {{breadcrumb-bar breadcrumbs=breadcrumbs}} |
| |
| {{#if model}} |
| |
| <div class="col-md-12 container-fluid"> |
| <div class="row"> |
| <div class="col-lg-6 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| Cluster Resource Usage By Applications |
| </div> |
| <div class="container-fluid donut-chart" id="appusage-donut-chart"> |
| {{app-usage-donut-chart data=model.apps |
| showLabels=true |
| parentId="appusage-donut-chart" |
| ratio=0.5 |
| maxHeight=400}} |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-lg-6 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| Cluster Resource Usage By Leaf Queues |
| </div> |
| <div class="container-fluid donut-chart" id="queueusage-donut-chart"> |
| {{queue-usage-donut-chart data=model.queues |
| showLabels=true |
| parentId="queueusage-donut-chart" |
| ratio=0.5 |
| maxHeight=400}} |
| </div> |
| </div> |
| </div> |
| </div> |
| <hr> |
| |
| <div class="row"> |
| <div class="col-lg-4 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| Finished Apps From All Users |
| </div> |
| <div class="container-fluid" id="finishedapps-donut-chart"> |
| {{donut-chart data=model.clusterMetrics.firstObject.getFinishedAppsDataForDonutChart |
| showLabels=true |
| parentId="finishedapps-donut-chart" |
| ratio=0.6 |
| maxHeight=350 |
| colorTargets="good warn error"}} |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-lg-4 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| Running Apps From All Users |
| </div> |
| <div class="container-fluid" id="runningapps-donut-chart"> |
| {{donut-chart data=model.clusterMetrics.firstObject.getRunningAppsDataForDonutChart |
| showLabels=true |
| parentId="runningapps-donut-chart" |
| ratio=0.6 |
| maxHeight=350 |
| colorTargets="warn good"}} |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <hr> |
| <div class="row"> |
| <!-- When getAllResourceTypesDonutChart is not null, use it to show per-resource-type usages. Otherwise only show |
| vcore/memory usage from metrics --> |
| {{#if model.clusterMetrics.firstObject.getAllResourceTypesDonutChart}} |
| {{#each |
| model.clusterMetrics.firstObject.getAllResourceTypesDonutChart as |perTypeUsage|}} |
| <div class="col-lg-4 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| {{perTypeUsage.name}} - Usages |
| </div> |
| <div class="container-fluid" id="resource-type-{{perTypeUsage.id}}"> |
| {{donut-chart |
| data=perTypeUsage.data |
| showLabels=true |
| parentIdPrefix="resource-type-" |
| id=perTypeUsage.id |
| ratio=0.6 |
| unit=perTypeUsage.unit |
| type="resource" |
| maxHeight=350 |
| colorTargets="good" |
| colorTargetReverse=true}} |
| </div> |
| </div> |
| </div> |
| {{/each}} |
| {{else}} |
| <div class="col-lg-4 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| Resource - Memory |
| </div> |
| <div class="container-fluid" id="mem-donut-chart"> |
| {{donut-chart |
| data=model.clusterMetrics.firstObject.getMemoryDataForDonutChart |
| showLabels=true |
| parentId="mem-donut-chart" |
| ratio=0.6 |
| maxHeight=350 |
| colorTargets="good" |
| colorTargetReverse=true |
| type="memory"}} |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-lg-4 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| Resource - VCores |
| </div> |
| <div class="container-fluid" id="vcore-donut-chart"> |
| {{donut-chart |
| data=model.clusterMetrics.firstObject.getVCoreDataForDonutChart |
| showLabels=true |
| parentId="vcore-donut-chart" |
| ratio=0.6 |
| maxHeight=350 |
| colorTargets="good" |
| colorTargetReverse=true}} |
| </div> |
| </div> |
| </div> |
| {{/if}} |
| |
| </div> |
| <div class="row"> |
| <div class="col-lg-6 container-fluid"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| Node Managers |
| </div> |
| <div class="container-fluid" id="nodes-donut-chart"> |
| {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart |
| showLabels=true |
| parentId="nodes-donut-chart" |
| ratio=0.6 |
| maxHeight=350 |
| colorTargets="good error warn"}} |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| {{/if}} |
| |
| |
| {{outlet}} |