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

<div class="col-sm-12 form-section-title"> Publishing the application </div>
<div class="col-sm-12 !p-0">
  <div class="small">
    <p class="text-muted vertical-center">
      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
      <span>Publish your application by creating a ClusterIP service for it, which you may then expose via <a target="_blank" ui-sref="kubernetes.ingresses">an ingress</a>.</span>
    </p>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12 form-inline">
    <div class="col-sm-6" style="padding-left: 0px">
      <select
        class="form-control"
        ng-model="$ctrl.state.selected"
        ng-options="item.typeValue as item.typeName for item in $ctrl.state.serviceType"
        data-cy="k8sAppCreate-publishingModeDropdown"
      ></select>
      <button type="button" class="btn btn-md btn-default vertical-center !ml-0" ng-click="$ctrl.addEntry( $ctrl.state.selected )" data-cy="k8sAppCreate-createServiceButton">
        <span
          class="interactive vertical-center"
          tooltip-append-to-body="true"
          tooltip-placement="top"
          tooltip-class="portainer-tooltip"
          uib-tooltip="Different service types expose the deployment in alternate ways.
          ClusterIP exposes it within the cluster (for internal access only).
          NodePort exposes it (on a high port) across all nodes.
          LoadBalancer exposes it via an external load balancer."
        >
          <pr-icon icon="'plus'" size="'sm'" feather="true"></pr-icon> Create service
        </span>
      </button>
    </div>
  </div>
</div>

<div class="form-group">
  <div class="col-sm-12 form-inline" style="margin-top: 20px" ng-repeat="service in $ctrl.formValues.Services">
    <div>
      <div class="text-muted vertical-center">
        <pr-icon ng-if="$ctrl.serviceType(service.Type) === 'ClusterIP'" icon="'list'" feather="true"></pr-icon>
        <pr-icon ng-if="$ctrl.serviceType(service.Type) === 'LoadBalancer'" icon="'svg-dataflow'"></pr-icon>
        <pr-icon ng-if="$ctrl.serviceType(service.Type) === 'NodePort'" icon="'list'" feather="true"></pr-icon>
        {{ $ctrl.serviceType(service.Type) }}
      </div>
      <kube-services-item-view
        node-port-services="$ctrl.nodePortServices"
        form-services="$ctrl.formValues.Services"
        service="$ctrl.formValues.Services[$index]"
        is-edit="$ctrl.isEdit"
        loadbalancer-enabled="$ctrl.loadbalancerEnabled"
      ></kube-services-item-view>
      <button
        type="button"
        class="btn btn-sm btn-dangerlight space-right vertical-center"
        style="margin-left: 0; margin-top: 10px"
        ng-click="$ctrl.deleteService( $index )"
        data-cy="k8sConfigCreate-removeButton"
      >
        <pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon> Remove
      </button>
    </div>

    <div ng-if="$ctrl.formValues.Services[$index].Ingress && $ctrl.formValues.OriginalIngresses.length === 0">
      <div class="text-muted">
        <pr-icon icon="'svg-route'" class-name="'mr-0.5'"></pr-icon>
        Ingress
      </div>
      <div ng-if="$ctrl.isAdmin()" class="small">
        <p class="text-warning pt-2 vertical-center">
          <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress is not configured in this namespace, select another namespace or click
          <a ui-sref="kubernetes.cluster.setup">here</a> to configure ingress.
        </p>
      </div>
      <div ng-if="!$ctrl.isAdmin()" class="small">
        <p class="text-warning pt-2 vertical-center">
          <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Ingress is not configured in this namespace, select another namespace or contact your
          administrator.
        </p>
      </div>
      <button
        type="button"
        class="btn btn-sm btn-dangerlight space-right vertical-center"
        style="margin-left: 0; margin-top: 10px"
        ng-click="$ctrl.deleteService( $index )"
        data-cy="k8sConfigCreate-removeButton"
      >
        <pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon> Remove
      </button>
    </div>
  </div>
</div>