Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

feat(swarm-visualizer): add the swarm-visualizer view (#1190)

Browse source
This commit is contained in:
Anthony Lapenna 2017-09-14 08:04:59 +02:00 • committed by GitHub
parent be4f3ec81d
commit 87825f7ebb
9 changed files with 307 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

83
app/components/swarmVisualizer/swarmVisualizer.html Normal file
View file

@ -0,0 +1,83 @@
<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> &gt; <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>