portainer/app/directives/serviceList/porServiceList.html

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-header icon="fa-list-alt" title="Associated services">
        <div class="pull-right">
          Items per page:
          <select ng-model="$ctrl.state.pagination_count" ng-change="$ctrl.changePaginationCount()">
            <option value="0">All</option>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </div>
      </rd-widget-header>
      <rd-widget-taskbar classes="col-sm-12">
        <div class="pull-right">
          <input type="text" id="filter" ng-model="$ctrl.state.filter" placeholder="Filter..." class="form-control input-sm" />
        </div>
      </rd-widget-taskbar>
      <rd-widget-body classes="no-padding">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>
                  <a ng-click="$ctrl.order('Name')">
                    Name
                    <span ng-show="$ctrl.sortType === 'Name' && !$ctrl.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="$ctrl.sortType === 'Name' && $ctrl.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
                <th>
                  <a ng-click="$ctrl.order('Image')">
                    Image
                    <span ng-show="$ctrl.sortType === 'Image' && !$ctrl.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="$ctrl.sortType === 'Image' && $ctrl.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
                <th>
                  <a ng-click="$ctrl.order('Mode')">
                    Scheduling mode
                    <span ng-show="$ctrl.sortType === 'Mode' && !$ctrl.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="$ctrl.sortType === 'Mode' && $ctrl.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
                <th>
                  <a ng-click="$ctrl.order('Ports')">
                    Published Ports
                    <span ng-show="$ctrl.sortType === 'Ports' && !$ctrl.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="$ctrl.sortType === 'Ports' && $ctrl.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
                <th>
                  <a ng-click="$ctrl.order('UpdatedAt')">
                    Updated at
                    <span ng-show="$ctrl.sortType === 'UpdatedAt' && !$ctrl.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="$ctrl.sortType === 'UpdatedAt' && $ctrl.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr dir-paginate="service in $ctrl.services | filter:$ctrl.state.filter | orderBy:$ctrl.sortType:$ctrl.sortReverse | itemsPerPage:$ctrl.state.pagination_count" pagination-id="services_list">
                <td><a ui-sref="service({id: service.Id})">{{ service.Name }}</a></td>
                <td>{{ service.Image | hideshasum }}</td>
                <td>
                  {{ service.Mode }}
                  <code data-toggle="tooltip" title="Replicas">{{ service.Tasks | runningtaskscount }}</code>
                  /
                  <code data-toggle="tooltip" title="Replicas">{{ service.Mode === 'replicated' ? service.Replicas : ($ctrl.nodes | availablenodecount) }}</code>
                </td>
                <td>
                  <a ng-if="service.Ports && service.Ports.length > 0" ng-repeat="p in service.Ports" class="image-tag" ng-href="http://{{$ctrl.state.publicURL}}:{{p.PublishedPort}}" target="_blank">
                    <i class="fa fa-external-link" aria-hidden="true"></i> {{ p.PublishedPort }}:{{ p.TargetPort }}
                  </a>
                  <span ng-if="!service.Ports || service.Ports.length === 0" >-</span>
                </td>
                <td>
                  {{ service.UpdatedAt|getisodate }}
                </td>
              </tr>
              <tr ng-if="!$ctrl.services">
                <td colspan="5" class="text-center text-muted">Loading...</td>
              </tr>
              <tr ng-if="($ctrl.services | filter:$ctrl.state.filter | orderBy:$ctrl.sortType:$ctrl.sortReverse | itemsPerPage: $ctrl.state.pagination_count).length === 0">
                <td colspan="5" class="text-center text-muted">No services available.</td>
              </tr>
            </tbody>
          </table>
          <div ng-if="$ctrl.services" class="pull-left pagination-controls">
            <dir-pagination-controls pagination-id="services_list"></dir-pagination-controls >
          </div>
        </div>
      </rd-widget-body>
    <rd-widget>
  </div>
</div>