services.html

<div class="middle">
  <div class="middle-header header-toolbar">
    <div class="container-fluid">
      <div class="page-header page-header-bleed-right page-header-bleed-left">
        <h1>
          Services
          <span class="page-header-link">
            <a ng-href="{{'services' | helpLink}}" target="_blank">
              Learn More <i class="fa fa-external-link" aria-hidden="true"></i>
            </a>
          </span>
        </h1>
      </div>
      <div ng-if="(services | hashSize) > 0 || filterWithZeroResults" class="data-toolbar">
        <div class="data-toolbar-filter">
          <project-filter></project-filter>
        </div>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div ng-if="(services | hashSize) == 0">
            <p ng-if="!servicesLoaded">
              Loading...
            </p>
            <div ng-if="servicesLoaded" class="empty-state-message text-center">
              <div ng-if="!filterWithZeroResults">
                <h2>No services.</h2>
                <p>No services have been added to project {{projectName}}.</p>
              </div>
              <div ng-if="filterWithZeroResults">
                <h2>The filter is hiding all services. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
              </div>
            </div>
          </div>
          <table ng-if="(services | hashSize) > 0" class="table table-bordered table-mobile table-layout-fixed">
            <colgroup>
              <col class="col-sm-3">
            </colgroup>
            <thead>
              <tr>
                <th>Name</th>
                <th>Cluster IP</th>
                <th>External IP</th>
                <th>Ports</th>
                <th>Selector</th>
                <th>Age</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="service in services | orderObjectsByDate : true">
                <td data-title="Name"><a href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a></td>
                <td data-title="Cluster IP">{{service.spec.clusterIP}}</td>
                <td data-title="External IP">
                  <span ng-if="!service.status.loadBalancer.ingress.length"><em>none</em></span>
                  <span ng-repeat="ingress in service.status.loadBalancer.ingress | limitTo: 4">{{ingress.ip}}<span ng-if="!$last">,
                  </span></span><span ng-if="service.status.loadBalancer.ingress.length === 5">,
                    {{service.status.loadBalancer.ingress[4].ip}}</span><span ng-if="service.status.loadBalancer.ingress.length > 5">,
                    and {{service.status.loadBalancer.ingress.length - 4}} others</span>
                </td>
                <td data-title="Ports">
                  <span ng-if="!service.spec.ports.length"><em>none</em></span>
                  <span ng-repeat="portMapping in service.spec.ports | limitTo: 4">{{portMapping.port}}/{{portMapping.protocol}}<span ng-if="!$last">,
                  </span></span><span ng-if="service.spec.ports.length === 5">,
                    {{service.spec.ports[4].port}}/{{service.spec.ports[4].protocol}}</span><span ng-if="service.spec.ports.length > 5">,
                    and {{service.spec.ports.length - 4}} others</span>
                </td>
                <td data-title="Selector">
                  <span ng-if="!service.spec.selector"><em>none</em></span>
                  <span ng-repeat="(selectorLabel, selectorValue) in service.spec.selector">{{selectorLabel}}={{selectorValue}}<span ng-show="!$last">, </span></span>
                </td>
                <td data-title="Age"><span am-time-ago="service.metadata.creationTimestamp" am-without-suffix="true"></span></td>
              </tr>
            </tbody>
          </table>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>