mirror of https://github.com/portainer/portainer
84 lines
3.1 KiB
HTML
84 lines
3.1 KiB
HTML
|
<rd-header>
|
||
|
|
<rd-header-title title="Swarm visualizer">
|
||
|
|
<a data-toggle="tooltip" title="Refresh" ui-sref="swarm.visualizer" ui-sref-opts="{reload: true}">
|
||
|
|
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
<i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
|
||
|
|
</rd-header-title>
|
||
|
|
<rd-header-content>
|
||
|
|
<a ui-sref="swarm">Swarm</a> > <a ui-sref="swarm.visualizer">Cluster visualizer</a>
|
||
|
|
</rd-header-content>
|
||
|
|
</rd-header>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<rd-widget>
|
||
|
|
<rd-widget-header icon="fa-object-group" title="Cluster information">
|
||
|
|
<div class="pull-right">
|
||
|
|
<button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = true;" ng-if="!state.ShowInformationPanel">Show</button>
|
||
|
|
<button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = false;" ng-if="state.ShowInformationPanel">Hide</button>
|
||
|
|
</div>
|
||
|
|
</rd-widget-header>
|
||
|
|
<rd-widget-body ng-if="state.ShowInformationPanel">
|
||
|
|
<table class="table">
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Nodes</td>
|
||
|
|
<td>{{ nodes.length }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Services</td>
|
||
|
|
<td>{{ services.length }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Tasks</td>
|
||
|
|
<td>{{ tasks.length }}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<form class="form-horizontal">
|
||
|
|
<div class="col-sm-12 form-section-title">
|
||
|
|
Filters
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<label class="control-label text-left">
|
||
|
|
Only display running tasks
|
||
|
|
</label>
|
||
|
|
<label class="switch" style="margin-left: 20px;">
|
||
|
|
<input type="checkbox" ng-model="state.DisplayOnlyRunningTasks"><i></i>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</rd-widget-body>
|
||
|
|
</rd-widget>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row" ng-if="visualizerData">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<rd-widget>
|
||
|
|
<rd-widget-header icon="fa-object-group" title="Cluster visualizer"></rd-widget-header>
|
||
|
|
<rd-widget-body>
|
||
|
|
<div class="visualizer_container">
|
||
|
|
<div class="node" ng-repeat="node in visualizerData.nodes track by $index">
|
||
|
|
<div class="node_info">
|
||
|
|
<div><b>{{ node.Hostname }}</b></div>
|
||
|
|
<div>{{ node.Role }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="tasks">
|
||
|
|
<div class="task task_{{ task.Status.State | visualizerTask }}" ng-repeat="task in node.Tasks | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">
|
||
|
|
<div class="service_name">{{ task.ServiceName }}</div>
|
||
|
|
<div>Image: {{ task.Spec.ContainerSpec.Image | hideshasum }}</div>
|
||
|
|
<div>Status: {{ task.Status.State }}</div>
|
||
|
|
<div>Update: {{ task.Updated | getisodate }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</rd-widget-body>
|
||
|
|
</rd-widget>
|
||
|
|
</div>
|
||
|
|
</div>
|