216 lines
12 KiB
HTML
216 lines
12 KiB
HTML
<filter-bar class="content-filter">
|
|
<div class="content-filter-link pull-right" ng-if="settings.canChangeConnection">
|
|
<a tabindex="0" id="kubernetes-change-connection" ng-click="changeAuth()" title="Connection Settings">
|
|
<i class="fa fa-wrench"></i>
|
|
</a>
|
|
</div>
|
|
</filter-bar>
|
|
|
|
<div class="container-cards-pf dashboard-cards" ng-if="settings.flavor != 'openshift'">
|
|
<div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
|
|
<kubernetes-service-graph id="graphs">
|
|
</kubernetes-service-graph>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-cards-pf dashboard-cards">
|
|
<div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
|
|
<h2 class="card-pf-title">{{pods.length}} <span translate>Pods</span></h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.pods.Pending.length"
|
|
title="Pending pods">
|
|
<span class="spinner spinner-sm"></span>{{status.pods.Pending.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.pods.Failed.length"
|
|
title="Failed pods">
|
|
<span class="pficon pficon-error-circle-o"></span>{{status.pods.Failed.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.pods.Unknown.length"
|
|
title="Pods with unknown status">
|
|
<span class="pficon pficon-warning-triangle-o"></span>{{status.pods.Unknown.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification"
|
|
ng-if="!status.pods.Pending.length && !status.pods.Failed.length && !status.pods.Unknown.length">
|
|
<span ng-if="pods.length > 0">
|
|
<span class="pficon pficon-ok"></span>
|
|
<span class="card-pf-aggregate-status-text" translate>All running</span>
|
|
</span>
|
|
<span ng-if="pods.length == 0">
|
|
<span class="card-pf-aggregate-status-text" translate>No pods deployed</span>
|
|
</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
|
|
<h2 class="card-pf-title">{{volumes.length}} <span translate>Volumes</span></h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Pending.length"
|
|
title="Pending volumes">
|
|
<span class="spinner spinner-sm"></span>{{status.volumes.Pending.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Released.length"
|
|
title="Released volumes awaiting cleanup">
|
|
<span class="pficon pficon-warning-triangle-o"></span>{{status.volumes.Released.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Failed.length"
|
|
title="Volumes that have failed">
|
|
<span class="pficon pficon-error-circle-o"></span>{{status.volumes.Failed.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.volumes.Available.length"
|
|
title="Available volumes not yet in use">
|
|
<span class="pficon pficon-ok"></span>{{status.volumes.Available.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification"
|
|
ng-if="!status.volumes.Pending.length && !status.volumes.Released.length && !status.volumes.Failed.length && !status.volumes.Available.length">
|
|
<span ng-if="volumes.length > 0">
|
|
<span class="pficon pficon-ok"></span><span class="card-pf-aggregate-status-text"
|
|
translate>All in use</span>
|
|
</span>
|
|
<span ng-if="volumes.length == 0">
|
|
<span class="card-pf-aggregate-status-text"
|
|
translate>No volumes in use</span>
|
|
</span>
|
|
</span>
|
|
</p>
|
|
<p class="pvc-notice" ng-if="status.volumes.PendingClaims.length">
|
|
<span class="card-pf-aggregate-status-notification">
|
|
<span class="pficon pficon-info"></span>
|
|
<a tabindex="0" href="#{{ viewUrl('volumes', true) }}">
|
|
<span class="card-pf-aggregate-status-text">{{status.volumes.PendingClaims.length}}</span>
|
|
<span class="card-pf-aggregate-status-text" translate>pending volume claims</span>
|
|
</a>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-pf card-pf-aggregate-status card-pf-accented dashboard-status">
|
|
<h2 class="card-pf-title">{{nodes.length}} <span translate>Nodes</span></h2>
|
|
<div class="card-pf-body">
|
|
<p class="card-pf-aggregate-status-notifications">
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.nodes.Pending.length"
|
|
title="Pending nodes">
|
|
<span class="spinner spinner-sm"></span>{{status.nodes.Pending.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.nodes.Terminated.length"
|
|
title="Terminated nodes">
|
|
<span class="pficon pficon-warning-triangle-o"></span>{{status.nodes.Terminated.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.nodes.NotReady.length"
|
|
title="Nodes that are not ready">
|
|
<span class="pficon pficon-error-circle-o"></span>{{status.nodes.NotReady.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification" ng-if="status.nodes.OutOfDisk.length"
|
|
title="Out of disk space">
|
|
<span class="pficon pficon-volume"></span>{{status.nodes.OutOfDisk.length}}
|
|
</span>
|
|
<span class="card-pf-aggregate-status-notification"
|
|
ng-if="!status.nodes.Pending.length && !status.nodes.Terminated.length && !status.nodes.NotReady.length && !status.nodes.OutofDisk.length">
|
|
<span ng-if="nodes.length > 0">
|
|
<span class="pficon pficon-ok"></span><span class="card-pf-aggregate-status-text"
|
|
translate>All healthy</span>
|
|
</span>
|
|
<span ng-if="nodes.length == 0">
|
|
<span class="pficon pficon-warning-triangle-o"></span>
|
|
<span class="card-pf-aggregate-status-text" translate>No nodes in cluster</span>
|
|
</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-cards-pf dashboard-cards">
|
|
<div class="card-pf card-pf-double" id="service-list">
|
|
<div class="card-pf-heading">
|
|
<div class="pull-right">
|
|
<button class="btn btn-default fa fa-check" id="services-enable-change" title="Change"
|
|
ng-click="toggleServiceChange()" ng-class="{ active: editServices }"></button>
|
|
<button class="btn btn-primary" id="deploy-app" ng-click="deploy(namespaces(), namespace)"
|
|
translate>Deploy</button>
|
|
</div>
|
|
<h2 class="card-pf-title" translate>Services</h2>
|
|
</div>
|
|
<div class="card-pf-body">
|
|
<div class="well blank-slate-pf spacious" ng-if="servicesState() == 'failed'">
|
|
<div class="blank-slate-pf-icon">
|
|
<i ng-if="failure.status == 403" class="fa fa-lock"></i>
|
|
<i ng-if="failure.status != 403" class="fa fa-exclamation-circle"></i>
|
|
</div>
|
|
<h3 translate>Could not list services</h3>
|
|
<p>{{failure.message}}</p>
|
|
</div>
|
|
<div class="well blank-slate-pf spacious" ng-if="servicesState() == 'empty'">
|
|
<div class="blank-slate-pf-icon">
|
|
<i class="fa fa-rocket"></i>
|
|
</div>
|
|
<h3>No services present</h3>
|
|
<p translate>You can deploy an application to your cluster.</p>
|
|
</div>
|
|
<table class="listing-ct dashboard-list" ng-if="servicesState() == 'ready'"
|
|
ng-class="{editable: editServices}">
|
|
<thead>
|
|
<tr>
|
|
<th translate>Name</th>
|
|
<th translate>Address</th>
|
|
<th translate>Containers</th>
|
|
<th translate ng-if="settings.flavor == 'openshift'">Project</th>
|
|
<th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
|
|
<th class="status"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="listing-ct-item"
|
|
ng-repeat="service in services track by service.metadata.uid"
|
|
data-name="{{service.metadata.name}}"
|
|
ng-class="{'highlight-ct': service.metadata.uid == highlighted}"
|
|
ng-click="jumpService($event, service)"
|
|
ng-mouseover="highlight(service.metadata.uid)" ng-mouseout="highlight(null)"
|
|
ng-if="!(service.metadata.namespace == 'default' && service.metadata.name == 'kubernetes')">
|
|
<td>{{service.metadata.name}}</td>
|
|
<td><kubernetes-address ng-init="item = service"></td>
|
|
<td class="containers">{{serviceContainers(service)}}</td>
|
|
<td>{{service.metadata.namespace}}</td>
|
|
<td class="status">
|
|
<button title="Adjust" class="btn btn-default adjust-service pficon pficon-edit"
|
|
data-id="{{id}}" ng-click="modifyService(service)"></button>
|
|
<span kubernetes-status-icon status="serviceStatus(service)"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-pf" id="node-list">
|
|
<div class="card-pf-heading">
|
|
<div class="pull-right">
|
|
<button title="Add Kubernetes Node" id="add-node" class="btn btn-primary fa fa-plus"
|
|
ng-click="addNode()"></button>
|
|
</div>
|
|
<h2 class="card-pf-title" translate>Nodes</h2>
|
|
</div>
|
|
<div class="card-pf-body">
|
|
<table class="listing-ct dashboard-list">
|
|
<thead>
|
|
<tr>
|
|
<th translate>Name</th>
|
|
<th translate>Containers</th>
|
|
<th class="status"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-click="navigateNode(node)" ng-repeat="node in nodes" class="listing-ct-item">
|
|
<td>{{node.metadata.name}}</td>
|
|
<td class="containers">{{nodeContainers(node)}}</td>
|
|
<td class="status">
|
|
<span kubernetes-status-icon status="nodeStatusIcon(node)"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|