routes.html

<project-header class="top-header"></project-header>
<project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div class="middle-container">
      <div class="middle-header header-toolbar">
        <div class="container-fluid">
          <div class="page-header page-header-bleed-right page-header-bleed-left">
            <div class="pull-right" ng-if="project && ('routes' | canI : 'create')">
              <a ng-href="project/{{project.metadata.name}}/create-route" class="btn btn-default">Create Route</a>
            </div>
            <h1>
              Routes
              <span class="page-header-link">
                <a ng-href="{{'routes' | helpLink}}" target="_blank">
                  Learn More <i class="fa fa-external-link" aria-hidden="true"></i>
                </a>
              </span>
            </h1>
          </div>
          <div ng-if="!renderOptions.showGetStarted" 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">
          <alerts alerts="alerts"></alerts>
          <div class="row">
            <div class="col-md-12">
              <table class="table table-bordered table-hover table-mobile">
                <thead>
                  <tr>
                    <th>{{customNameHeader || 'Name'}}</th>
                    <th>Hostname</th>
                    <th>Routes To</th>
                    <th>Target Port</th>
                    <th>TLS Termination</th>
                  </tr>
                </thead>
                <tbody ng-if="(routes | hashSize) == 0">
                  <tr><td colspan="5"><em>{{emptyMessage || 'No routes to show'}}</em></td></tr>
                </tbody>
                <tbody ng-if="(routes | hashSize) > 0">
                  <tr ng-repeat="route in routes | orderObjectsByDate : true">
                    <td data-title="{{ customNameHeader || 'Name' }}">
                      <a href="{{route | navigateResourceURL}}">{{route.metadata.name}}</a>
                      <route-warnings ng-if="route.spec.to.kind !== 'Service' || services"
                                      route="route"
                                      service="services[route.spec.to.name]">
                      </route-warnings>
                    </td>
                    <td data-title="Hostname">
                      <span ng-if="(route | isWebRoute)" class="word-break">
                        <a href="{{route | routeWebURL}}" target="_blank">{{route | routeLabel}}</a>
                      </span>
                      <span ng-if="!(route | isWebRoute)" class="word-break">
                        {{route | routeLabel}}
                      </span>
                      <span ng-if="!route.status.ingress" data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
                        <status-icon status="'Pending'"></status-icon>
                        <span class="sr-only">Pending</span>
                      </span>
                    </td>
                    <td data-title="Routes To">
                      <span ng-if="route.spec.to.kind !== 'Service'">{{route.spec.to.kind}}: {{route.spec.to.name}}</span>
                      <span ng-if="route.spec.to.kind === 'Service'"><a ng-href="{{route.spec.to.name | navigateResourceURL : 'Service': route.metadata.namespace}}">{{route.spec.to.name}}</a></span>
                    </td>
                    <!-- Add non-breaking space to empty cells. Otherwise, table-mobile layout is broken. -->
                    <td data-title="Target Port">
                      <span ng-if="route.spec.port.targetPort">
                        <span ng-if="route.spec.to.kind !== 'Service'">{{route.spec.port.targetPort}}</span>
                        <!-- Show the short display port in the table, but the long in the title attr. -->
                        <span ng-if="route.spec.to.kind === 'Service'"
                              ng-attr-title="{{route | routeTargetPortMapping : services[route.spec.to.name]}}">
                          {{route.spec.port.targetPort}}
                        </span>
                      </span>
                      <span ng-if="!route.spec.port.targetPort">&nbsp;</span>
                    </td>
                    <!-- Use shorter Termination title for table-mobile to avoid overlapping text. -->
                    <td data-title="Termination">
                      {{route.spec.tls.termination | humanizeTLSTermination}}
                      <span ng-if="!route.spec.tls.termination">&nbsp;</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
</project-page>