portainer/app/components/endpoints/endpoints.html

<rd-header>
  <rd-header-title title="Endpoints">
    <a data-toggle="tooltip" title="Refresh" ui-sref="endpoints" ui-sref-opts="{reload: true}">
      <i class="fa fa-refresh" aria-hidden="true"></i>
    </a>
    <i id="loadEndpointsSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
  </rd-header-title>
  <rd-header-content>Endpoint management</rd-header-content>
</rd-header>

<div class="row" ng-if="!applicationState.application.endpointManagement">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-exclamation-triangle" title="Endpoint management is not available">
      </rd-widget-header>
      <rd-widget-body>
        <span class="small text-muted">Portainer has been started using the <code>--external-endpoints</code> flag.
          Endpoint management via the UI is disabled.
          <span ng-if="applicationState.application.authentication">You can still manage endpoint access.</span>
        </span>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="applicationState.application.endpointManagement">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-plus" title="Add a new endpoint">
      </rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="container_name" ng-model="formValues.Name" placeholder="e.g. docker-prod01">
            </div>
          </div>
          <!-- !name-input -->
          <!-- endpoint-url-input -->
          <div class="form-group">
            <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
              Endpoint URL
              <portainer-tooltip position="bottom" message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."></portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="endpoint_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375">
            </div>
          </div>
          <!-- !endpoint-url-input -->
          <!-- endpoint-public-url-input -->
          <div class="form-group">
            <label for="endpoint_public_url" class="col-sm-3 col-lg-2 control-label text-left">
              Public IP
              <portainer-tooltip position="bottom" message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the endpoint URL."></portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="endpoint_public_url" ng-model="formValues.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com">
            </div>
          </div>
          <!-- !endpoint-public-url-input -->
          <!-- tls-checkbox -->
          <div class="form-group">
            <div class="col-sm-12">
              <label for="tls" class="control-label text-left">
                TLS
                <portainer-tooltip position="bottom" message="Enable this option if you need to specify TLS certificates to connect to the Docker endpoint."></portainer-tooltip>
              </label>
              <label class="switch" style="margin-left: 20px;">
                <input type="checkbox" ng-model="formValues.TLS"><i></i>
              </label>
            </div>
          </div>
          <!-- !tls-checkbox -->
          <!-- tls-certs -->
          <div ng-if="formValues.TLS">
            <!-- ca-input -->
            <div class="form-group">
              <label class="col-sm-2 control-label text-left">TLS CA certificate</label>
              <div class="col-sm-10">
                <button class="btn btn-sm btn-primary" ngf-select ng-model="formValues.TLSCACert">Select file</button>
                <span style="margin-left: 5px;">
                  {{ formValues.TLSCACert.name }}
                  <i class="fa fa-times red-icon" ng-if="!formValues.TLSCACert" aria-hidden="true"></i>
                  <i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
                </span>
              </div>
            </div>
            <!-- !ca-input -->
            <!-- cert-input -->
            <div class="form-group">
              <label for="tls_cert" class="col-sm-2 control-label text-left">TLS certificate</label>
              <div class="col-sm-10">
                <button class="btn btn-sm btn-primary" ngf-select ng-model="formValues.TLSCert">Select file</button>
                <span style="margin-left: 5px;">
                  {{ formValues.TLSCert.name }}
                  <i class="fa fa-times red-icon" ng-if="!formValues.TLSCert" aria-hidden="true"></i>
                  <i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
                </span>
              </div>
            </div>
            <!-- !cert-input -->
            <!-- key-input -->
            <div class="form-group">
              <label class="col-sm-2 control-label text-left">TLS key</label>
              <div class="col-sm-10">
                <button class="btn btn-sm btn-primary" ngf-select ng-model="formValues.TLSKey">Select file</button>
                <span style="margin-left: 5px;">
                  {{ formValues.TLSKey.name }}
                  <i class="fa fa-times red-icon" ng-if="!formValues.TLSKey" aria-hidden="true"></i>
                  <i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
                </span>
              </div>
            </div>
            <!-- !key-input -->
          </div>
          <!-- !tls-certs -->
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name || !formValues.URL || (formValues.TLS && (!formValues.TLSCACert || !formValues.TLSCert || !formValues.TLSKey))" ng-click="addEndpoint()">Add endpoint</button>
              <i id="createEndpointSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
              <span class="text-danger" ng-if="state.error" style="margin: 5px;">
                <i class="fa fa-exclamation-circle" aria-hidden="true"></i> {{ state.error }}
              </span>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-plug" title="Endpoints">
        <div class="pull-right">
          Items per page:
          <select ng-model="state.pagination_count" ng-change="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-lg-12">
        <div class="pull-left" ng-if="applicationState.application.endpointManagement">
          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
        </div>
        <div class="pull-right">
          <input type="text" id="filter" ng-model="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 ng-if="applicationState.application.endpointManagement">
                  <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
                </th>
                <th>
                  <a ui-sref="endpoints" ng-click="order('Name')">
                    Name
                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
                <th>
                  <a ui-sref="endpoints" ng-click="order('URL')">
                    URL
                    <span ng-show="sortType == 'URL' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'URL' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr dir-paginate="endpoint in (state.filteredEndpoints = (endpoints | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
                <td ng-if="applicationState.application.endpointManagement"><input type="checkbox" ng-model="endpoint.Checked" ng-change="selectItem(endpoint)" /></td>
                <td><i class="fa fa-star" aria-hidden="true" ng-if="endpoint.Id === activeEndpoint.Id"></i> {{ endpoint.Name }}</td>
                <td>{{ endpoint.URL | stripprotocol }}</td>
                <td>
                  <span ng-if="applicationState.application.endpointManagement">
                    <a ui-sref="endpoint({id: endpoint.Id})"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
                  </span>
                  <span ng-if="applicationState.application.authentication">
                    <a ui-sref="endpoint.access({id: endpoint.Id})"><i class="fa fa-users" aria-hidden="true" style="margin-left: 7px;"></i> Manage access</a>
                  </span>
              </td>
              </tr>
              <tr ng-if="!endpoints">
                <td colspan="5" class="text-center text-muted">Loading...</td>
              </tr>
              <tr ng-if="endpoints.length == 0">
                <td colspan="5" class="text-center text-muted">No endpoints available.</td>
              </tr>
            </tbody>
          </table>
          <div ng-if="endpoints" class="pull-left pagination-controls">
            <dir-pagination-controls></dir-pagination-controls>
          </div>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>