portainer/app/kubernetes/components/kube-services/kube-services-item/kube-services-item.html

<ng-form name="serviceForm">
  <div ng-if="$ctrl.isAdmin()" class="small" ng-show="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled">
    <p class="text-warning pt-2 vertical-center">
      <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> No Load balancer is available in this cluster, click
      <a class="hyperlink" ui-sref="kubernetes.cluster.setup">here</a> to configure load balancer.
    </p>
  </div>
  <div ng-if="!$ctrl.isAdmin()" class="small" ng-show="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled">
    <p class="text-warning pt-2 vertical-center">
      <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> No Load balancer is available in this cluster, contact your administrator.
    </p>
  </div>

  <div
    ng-if="
      ($ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && $ctrl.loadbalancerEnabled) ||
      $ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.CLUSTER_IP ||
      $ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.NODE_PORT
    "
  >
    <div ng-show="!$ctrl.multiItemDisable" class="mt-5 mb-5 vertical-center">
      <label class="control-label text-left !pt-0">Published ports</label>
      <span class="label label-default interactive ml-2.5 vertical-center" ng-click="$ctrl.addPort()" data-cy="k8sAppCreate-addNewPortButton">
        <pr-icon icon="'plus'" mode="'alt'" size="'sm'" feather="true"></pr-icon> publish a new port
      </span>
    </div>
    <div ng-repeat="servicePort in $ctrl.servicePorts" class="mt-5 service-form row">
      <div class="form-group !mx-0 !pl-0 col-sm-3">
        <div class="input-group input-group-sm">
          <span class="input-group-addon required">Container port</span>
          <input
            type="number"
            class="form-control"
            name="container_port_{{ $index }}"
            ng-model="servicePort.targetPort"
            placeholder="80"
            ng-min="1"
            ng-max="65535"
            min="1"
            max="65535"
            ng-change="$ctrl.servicePort($index)"
            required
            ng-disabled="$ctrl.originalIngresses.length === 0 || ($ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled)"
            ng-change="$ctrl.onChangeContainerPort()"
            data-cy="k8sAppCreate-containerPort_{{ $index }}"
          />
        </div>
        <span>
          <div class="small mt-1 text-warning" ng-if="$ctrl.state.duplicates.targetPort.refs[$index] !== undefined">
            <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This container port is already used.
          </div>
          <div class="small mt-1 text-warning" ng-messages="serviceForm['container_port_'+$index].$error">
            <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Container port number is required.</p>
            <p class="vertical-center" ng-message="min"
              ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Container port number must be inside the range 1-65535.</p
            >
            <p class="vertical-center" ng-message="max"
              ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Container port number must be inside the range 1-65535.</p
            >
          </div>
        </span>
      </div>

      <div class="form-group !mx-0 !pl-0 col-sm-3">
        <div class="input-group input-group-sm">
          <span class="input-group-addon required">Service port</span>
          <input
            type="number"
            class="form-control"
            name="service_port_{{ $index }}"
            ng-model="servicePort.port"
            placeholder="80"
            ng-min="1"
            ng-max="65535"
            min="1"
            max="65535"
            required
            ng-disabled="$ctrl.originalIngresses.length === 0 || ($ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled)"
            ng-change="$ctrl.onChangeServicePort()"
            data-cy="k8sAppCreate-servicePort_{{ $index }}"
          />
        </div>
        <span>
          <div class="small mt-1 text-warning" ng-if="$ctrl.state.duplicates.servicePort.refs[$index] !== undefined">
            <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This service port is already used.
          </div>
          <div class="small mt-1 text-warning">
            <div ng-messages="serviceForm['service_port_'+$index].$error">
              <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Service port number is required.</p>
              <p class="vertical-center" ng-message="min"
                ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Service port number must be inside the range 1-65535.</p
              >
              <p class="vertical-center" ng-message="max"
                ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Service port number must be inside the range 1-65535.</p
              >
            </div>
          </div>
        </span>
      </div>

      <div class="form-group !mx-0 !pl-0 col-sm-3" ng-if="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.NODE_PORT">
        <div class="input-group input-group-sm">
          <span class="input-group-addon required">Nodeport</span>
          <input
            type="number"
            class="form-control"
            name="node_port_{{ $index }}"
            ng-model="servicePort.nodePort"
            placeholder="30080"
            ng-min="30000"
            ng-max="32767"
            min="30000"
            max="32767"
            required
            ng-change="$ctrl.onChangeNodePort()"
            data-cy="k8sAppCreate-nodeportPort_{{ $index }}"
          />
        </div>
        <div class="w-full">
          <span>
            <div class="small mt-1 text-warning">
              <div ng-messages="serviceForm['node_port_'+$index].$error">
                <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Nodeport is required.</p>
                <p class="vertical-center" ng-message="min"
                  ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Nodeport number must be inside the range 30000-32767 or blank for system
                  allocated.</p
                >
                <p class="vertical-center" ng-message="max"
                  ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Nodeport number must be inside the range 30000-32767 or blank for system
                  allocated.</p
                >
              </div>
            </div>
          </span>
        </div>
      </div>
      <div class="form-group !mx-0 !pl-0 col-sm-3" ng-if="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER">
        <div class="input-group input-group-sm">
          <span class="input-group-addon">Loadbalancer port</span>
          <input
            type="number"
            class="form-control"
            name="loadbalancer_port_{{ $index }}"
            ng-model="servicePort.port"
            placeholder="80"
            ng-min="1"
            ng-max="65535"
            min="1"
            max="65535"
            required
            ng-disabled="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.LOAD_BALANCER && !$ctrl.loadbalancerEnabled"
            data-cy="k8sAppCreate-loadbalancerPort_{{ $index }}"
          />
        </div>
      </div>

      <div class="form-group !mx-0 !pl-0 col-sm-3" ng-if="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.CLUSTER_IP && $ctrl.ingressType">
        <div class="input-group input-group-sm">
          <span class="input-group-addon">Ingress</span>
          <select
            class="form-control"
            name="ingress_port_{{ $index }}"
            ng-model="servicePort.ingress.IngressName"
            required
            ng-disabled="$ctrl.originalIngresses.length === 0"
            ng-options="ingress.Name as ingress.Name for ingress in $ctrl.originalIngresses"
            data-cy="k8sAppCreate-ingressPort_{{ $index }}"
          >
            <option selected disabled hidden value="">Select an ingress</option>
          </select>
        </div>
        <span>
          <div class="small mt-5 text-warning">
            <div ng-messages="serviceForm['ingress_port_'+$index].$error">
              <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress selection is required.</p>
            </div>
          </div>
        </span>
      </div>

      <div class="form-group !mx-0 !pl-0 col-sm-3" ng-if="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.CLUSTER_IP && $ctrl.ingressType">
        <div class="input-group input-group-sm">
          <span class="input-group-addon">Hostname</span>
          <select
            class="form-control"
            name="hostname_port_{{ $index }}"
            ng-model="servicePort.ingress.Host"
            required
            ng-disabled="$ctrl.originalIngresses.length === 0"
            ng-options="host as host for host in ($ctrl.originalIngresses | filter:{ Name: servicePort.ingress.IngressName })[0].Hosts"
            data-cy="k8sAppCreate-hostnamePort_{{ $index }}"
          >
            <option selected disabled hidden value="">Select a hostname</option>
          </select>
        </div>
        <span>
          <div class="small mt-1 text-warning">
            <div ng-messages="serviceForm['hostname_port_'+$index].$error">
              <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Hostname is required.</p>
            </div>
          </div>
        </span>
      </div>

      <div class="form-group !mx-0 !pl-0 col-sm-3 clear-both" ng-if="$ctrl.serviceType === $ctrl.KubernetesApplicationPublishingTypes.CLUSTER_IP && $ctrl.ingressType">
        <div class="input-group input-group-sm">
          <span class="input-group-addon required">Route</span>
          <input
            class="form-control"
            name="ingress_route_{{ $index }}"
            ng-model="servicePort.ingress.Path"
            placeholder="route"
            required
            ng-disabled="$ctrl.originalIngresses.length === 0"
            ng-pattern="/^(\/?[a-zA-Z0-9]+([a-zA-Z0-9-/_]*[a-zA-Z0-9])?|[a-zA-Z0-9]+)|(\/){1}$/"
            data-cy="k8sAppCreate-route_{{ $index }}"
          />
        </div>
        <span>
          <div class="small mt-1 text-warning">
            <div ng-messages="serviceForm['ingress_route_'+$index].$error">
              <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Route is required.</p>
              <p class="vertical-center" ng-message="pattern"
                ><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> This field must consist of alphanumeric characters or the special characters: '-', '_'
                or '/'. It must start and end with an alphanumeric character (e.g. 'my-route', or 'route-123').</p
              >
            </div>
          </div>
        </span>
      </div>

      <div class="form-group !mx-0 !pl-0 col-sm-2">
        <div class="input-group input-group-sm">
          <div class="btn-group btn-group-sm">
            <label
              class="btn btn-light"
              ng-model="servicePort.protocol"
              uib-btn-radio="'TCP'"
              ng-change="ctrl.onChangePortProtocol($index)"
              ng-disabled="ctrl.isProtocolOptionDisabled($index, 'TCP')"
              data-cy="k8sAppCreate-TCPButton_{{ $index }}"
              >TCP</label
            >
            <label
              class="btn btn-light"
              ng-model="servicePort.protocol"
              uib-btn-radio="'UDP'"
              ng-change="ctrl.onChangePortProtocol($index)"
              ng-disabled="ctrl.isProtocolOptionDisabled($index, 'UDP')"
              data-cy="k8sAppCreate-UDPButton_{{ $index }}"
              >UDP</label
            >
          </div>
          <button
            ng-disabled="$ctrl.servicePorts.length === 1"
            ng-show="!$ctrl.multiItemDisable"
            class="btn btn-sm btn-dangerlight btn-only-icon"
            type="button"
            ng-click="$ctrl.removePort($index)"
            data-cy="k8sAppCreate-rmPortButton_{{ $index }}"
          >
            <pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
</ng-form>