portainer/app/components/swarmVisualizer/swarmVisualizer.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> &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>
                <div>
                  <b>{{ node.Hostname }}</b>
                  <span class="node_platform">
                    <i class="fa fa-linux" aria-hidden="true" ng-if="node.PlatformOS === 'linux'"></i>
                    <i class="fa fa-windows" aria-hidden="true" ng-if="node.PlatformOS === 'windows'"></i>
                  </span>
                </div>
              </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>