portainer/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html

<div class="datatable">
  <!-- table title and action menu -->
  <div class="toolBar !flex-col gap-1">
    <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap !p-0 w-full">
      <!-- title -->
      <div class="toolBarTitle vertical-center">
        <div class="widget-icon space-right">
          <pr-icon icon="'svg-dataflow'" class-name="'[&>*]:mr-0.5'"></pr-icon>
        </div>
        Port mappings
      </div>
      <div class="searchBar vertical-center !mr-0 min-w-[300px]">
        <pr-icon icon="'search'" class-name="'icon !h-3'"></pr-icon>
        <input
          type="text"
          class="searchInput"
          ng-model="$ctrl.state.textFilter"
          ng-change="$ctrl.onTextFilterChange()"
          placeholder="Search for a port mapping..."
          auto-focus
          ng-model-options="{ debounce: 300 }"
        />
      </div>
      <!-- actions -->
      <div data-cy="k8sApp-portTableSettings" class="settings">
        <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
          <span uib-dropdown-toggle aria-label="Settings">
            <pr-icon icon="'more-vertical'" class-name="'icon !mr-0 !h-4'"></pr-icon>
          </span>
          <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
            <div class="tableMenu">
              <div class="menuHeader"> Table settings </div>
              <div class="menuContent">
                <div>
                  <div class="md-checkbox" ng-if="$ctrl.isAdmin">
                    <input id="applications_setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
                    <label for="applications_setting_show_system">Show system resources</label>
                  </div>
                  <div class="md-checkbox">
                    <input
                      id="setting_auto_refresh"
                      type="checkbox"
                      ng-model="$ctrl.settings.repeater.autoRefresh"
                      ng-change="$ctrl.onSettingsRepeaterChange()"
                      data-cy="k8sApp-autoRefreshCheckbox-port"
                    />
                    <label for="setting_auto_refresh">Auto refresh</label>
                  </div>
                  <div ng-if="$ctrl.settings.repeater.autoRefresh">
                    <label for="settings_refresh_rate"> Refresh rate </label>
                    <select
                      id="settings_refresh_rate"
                      ng-model="$ctrl.settings.repeater.refreshRate"
                      ng-change="$ctrl.onSettingsRepeaterChange()"
                      class="small-select"
                      data-cy="k8sApp-refreshRateDropdown-port"
                    >
                      <option value="10">10s</option>
                      <option value="30">30s</option>
                      <option value="60">1min</option>
                      <option value="120">2min</option>
                      <option value="300">5min</option>
                    </select>
                    <span>
                      <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
                    </span>
                  </div>
                </div>
              </div>
              <div>
                <a type="button" class="btn btn-sm btn-default btn-sm" ng-click="$ctrl.settings.open = false;" data-cy="k8sApp-tableSettingsCloseButton-port">Close</a>
              </div>
            </div>
          </div>
        </span>
      </div>
    </div>
    <!-- info text -->
    <div class="flex flex-row w-full">
      <span class="small text-muted mt-1 vertical-center" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
        <pr-icon icon="'info'" mode="'primary'"></pr-icon>
        System resources are hidden, this can be changed in the table settings.
      </span>
    </div>
  </div>
  <!-- table -->
  <div class="table-responsive">
    <table class="table table-hover nowrap-cells">
      <thead>
        <tr>
          <th>
            <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()" class="flex no-wrap min-w-max">
              <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'" class-name="'icon'"></pr-icon>
              <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'" class-name="'icon'"></pr-icon>
            </div>
          </th>
          <th>
            <table-column-header
              col-title="'Application'"
              can-sort="true"
              is-sorted="$ctrl.state.orderBy === 'Name'"
              is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
              ng-click="$ctrl.changeOrderBy('Name')"
            ></table-column-header>
          </th>
          <th>
            <table-column-header col-title="'Publishing mode'" can-sort="false"></table-column-header>
          </th>
          <th>
            <table-column-header
              col-title="'Exposed port'"
              can-sort="true"
              is-sorted="$ctrl.state.orderBy === 'TargetPort'"
              is-sorted-desc="$ctrl.state.orderBy === 'TargetPort' && $ctrl.state.reverseOrder"
              ng-click="$ctrl.changeOrderBy('TargetPort')"
            ></table-column-header>
          </th>
          <th>
            <table-column-header
              col-title="'Container port'"
              can-sort="true"
              is-sorted="$ctrl.state.orderBy === 'Port'"
              is-sorted-desc="$ctrl.state.orderBy === 'Port' && $ctrl.state.reverseOrder"
              ng-click="$ctrl.changeOrderBy('Port')"
            ></table-column-header>
          </th>
          <th>
            <table-column-header col-title="'HTTP route'" can-sort="false"></table-column-header>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- main rows -->
        <!-- dir-paginate-start track by $index -->
        <tr
          dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter: $ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
          ng-class="{ active: item.Checked, 'datatable-highlighted': item.Highlighted }"
          ng-click="$ctrl.expandItem(item, !item.Expanded)"
          pagination-id="$ctrl.tableKey"
        >
          <!-- expandable -->
          <td>
            <div ng-if="$ctrl.itemCanExpand(item)">
              <pr-icon ng-if="item.Expanded" icon="'chevron-down'" class-name="'icon'"></pr-icon>
              <pr-icon ng-if="!item.Expanded" icon="'chevron-right'" class-name="'icon'"></pr-icon>
            </div>
          </td>
          <!-- Application -->
          <td>
            <a ui-sref="kubernetes.applications.application({ name: item.Name, namespace: item.ResourcePool })">{{ item.Name }}</a>
            <span class="label label-info image-tag label-margins" ng-if="$ctrl.isSystemNamespace(item)">system</span>
            <span class="label label-primary image-tag label-margins" ng-if="!$ctrl.isSystemNamespace(item) && $ctrl.isExternalApplication(item)">external</span>
          </td>
          <!-- Publishing mode -->
          <td>
            <!-- LB -->
            <span ng-if="item.ServiceType === $ctrl.KubernetesServiceTypes.LOAD_BALANCER">
              <span><pr-icon icon="'share-2'" class-name="'icon'"></pr-icon> LoadBalancer </span>
              <span class="text-muted small ml-5">
                <span ng-if="item.LoadBalancerIPAddress">{{ item.LoadBalancerIPAddress }}</span>
                <span ng-if="!item.LoadBalancerIPAddress">pending</span>
              </span>
            </span>
            <!-- Internal -->
            <span ng-if="item.ServiceType === $ctrl.KubernetesServiceTypes.CLUSTER_IP"> <pr-icon icon="'list'"></pr-icon> ClusterIP </span>
            <!-- Cluster -->
            <span ng-if="item.ServiceType === $ctrl.KubernetesServiceTypes.NODE_PORT"> <pr-icon icon="'list'" class-name="'icon'"></pr-icon> NodePort </span>
          </td>
          <!-- Exposed port -->
          <td>
            <span ng-if="!$ctrl.itemCanExpand(item)">
              {{ item.Ports[0].Port }}
              <a class="vertical-center" ng-if="item.LoadBalancerIPAddress" ng-href="http://{{ item.LoadBalancerIPAddress }}:{{ item.Ports[0].Port }}" target="_blank" class="ml-1">
                <pr-icon icon="'external-link'" class-name="'icon'"></pr-icon> access
              </a>
            </span>
          </td>
          <!-- Container port -->
          <td>
            <span ng-if="!$ctrl.itemCanExpand(item)"> {{ item.Ports[0].TargetPort }}/{{ item.Ports[0].Protocol }} </span>
          </td>
          <!-- HTTP route -->
          <td>
            <span ng-if="!$ctrl.itemCanExpand(item)">
              <span ng-if="!$ctrl.portHasIngressRules(item.Ports[0])">-</span>
              <span ng-if="$ctrl.portHasIngressRules(item.Ports[0])">
                <span
                  ng-if="!$ctrl.ruleCanBeDisplayed(item.Ports[0].IngressRules[0])"
                  class="text-muted cursor-pointer"
                  tooltip-append-to-body="true"
                  tooltip-placement="bottom"
                  tooltip-class="portainer-tooltip"
                  uib-tooltip="Ingress controller IP address not available yet"
                  >pending
                </span>
                <span ng-if="$ctrl.ruleCanBeDisplayed(item.Ports[0].IngressRules[0])">
                  <a ng-href="{{ $ctrl.buildIngressRuleURL(item.Ports[0].IngressRules[0]) }}" target="_blank">
                    {{ $ctrl.buildIngressRuleURL(item.Ports[0].IngressRules[0]) | stripprotocol }}
                  </a>
                </span>
              </span>
            </span>
          </td>
        </tr>
        <!-- sub rows -->
        <tr ng-show="item.Expanded" ng-repeat-start="port in item.Ports" ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }">
          <td ng-if="!$ctrl.portHasIngressRules(port)"></td>
          <td ng-if="!$ctrl.portHasIngressRules(port)">-</td>
          <td ng-if="!$ctrl.portHasIngressRules(port)">-</td>
          <td ng-if="!$ctrl.portHasIngressRules(port)">
            {{ port.Port }}
            <a ng-if="item.LoadBalancerIPAddress" ng-href="http://{{ item.LoadBalancerIPAddress }}:{{ port.Port }}" target="_blank" class="ml-1">
              <pr-icon icon="'external-link'"></pr-icon> access
            </a>
          </td>
          <td ng-if="!$ctrl.portHasIngressRules(port)">{{ port.TargetPort }}/{{ port.Protocol }}</td>
          <td ng-if="!$ctrl.portHasIngressRules(port)">-</td>
        </tr>
        <tr
          ng-show="item.Expanded"
          ng-repeat-end
          ng-repeat="rule in port.IngressRules"
          ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
        >
          <td></td>
          <td>-</td>
          <td>-</td>
          <td>
            {{ port.Port }}
            <a ng-if="item.LoadBalancerIPAddress" ng-href="http://{{ item.LoadBalancerIPAddress }}:{{ port.Port }}" target="_blank" class="ml-1">
              <pr-icon icon="'external-link'"></pr-icon>access
            </a>
          </td>
          <td>{{ port.TargetPort }}/{{ port.Protocol }}</td>
          <td>
            <span
              ng-if="!$ctrl.ruleCanBeDisplayed(rule)"
              class="text-muted cursor-pointer"
              tooltip-append-to-body="true"
              tooltip-placement="bottom"
              tooltip-class="portainer-tooltip"
              uib-tooltip="Ingress controller IP address not available yet"
              >pending
            </span>
            <span ng-if="$ctrl.ruleCanBeDisplayed(rule)">
              <a ng-href="{{ $ctrl.buildIngressRuleURL(rule) }}" target="_blank">
                {{ $ctrl.buildIngressRuleURL(rule) | stripprotocol }}
              </a>
            </span>
          </td>
        </tr>
        <tr class="!h-0" dir-paginate-end></tr>
        <!-- no dataset -->
        <tr ng-if="!$ctrl.dataset">
          <td colspan="6" class="text-center text-muted">Loading...</td>
        </tr>
        <!-- no values in filtered dataset -->
        <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
          <td colspan="6" class="text-center text-muted">No application port mapping available.</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="footer pl-5" ng-if="$ctrl.dataset">
    <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
    <div class="paginationControls">
      <form class="form-inline">
        <span class="limitSelector">
          <span class="mr-1"> Items per page </span>
          <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
            <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>
        </span>
        <dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
      </form>
    </div>
  </div>
</div>