portainer/app/kubernetes/views/configure/configure.html

<kubernetes-view-header title="Kubernetes features configuration" state="portainer.endpoints.endpoint.kubernetesConfig" view-ready="ctrl.state.viewReady">
  <a ui-sref="portainer.endpoints">Endpoints</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: ctrl.endpoint.Id})">{{ ctrl.endpoint.Name }}</a> &gt; Kubernetes configuration
</kubernetes-view-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body>
          <form class="form-horizontal">
            <div class="col-sm-12 form-section-title">
              Networking
            </div>

            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                Enabling the load balancer feature will allow users to expose application they deploy over an external IP address assigned by cloud provider.
                <p style="margin-top: 2px;">
                  <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                  Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.
                </p>
              </span>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left">
                  Allow users to use external load balancer
                </label>
                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="ctrl.formValues.UseLoadBalancer" /><i></i> </label>
              </div>
            </div>

            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                Enabling the ingress feature will allow users to expose application they deploy over a HTTP route.<br />
                <p style="margin-top: 2px;">
                  <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                  Ingress classes (controllers) must be manually specified for each one you want to use in the cluster. Make sure that each controller is running inside your
                  cluster.
                </p>
              </span>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left">
                  Allow users to use ingress
                </label>
                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="ctrl.formValues.UseIngress" /><i></i> </label>
              </div>
            </div>
            <div class="form-group" ng-if="ctrl.formValues.UseIngress">
              <label for="ingress_classes" class="col-sm-3 col-lg-2 control-label text-left">
                Ingress controllers
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="ingress_classes" ng-model="ctrl.formValues.IngressClasses" placeholder="nginx,gce,traefik" />
              </div>
              <span class="col-sm-12 text-muted small" style="margin-top: 12px;">
                <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                Once configured, ingresses can be created at the resource pool level.
              </span>
            </div>

            <div class="col-sm-12 form-section-title">
              Metrics
            </div>

            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                Enabling this feature will allow users to use specific features that leverage the server metrics component.
                <p style="margin-top: 2px;">
                  <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                  Ensure that <a href="https://kubernetes.io/docs/tasks/debug-application-cluster/resource-metrics-pipeline/#metrics-server" target="_blank">server metrics</a> is
                  running inside your cluster.
                </p>
              </span>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left">
                  Enable features using server metrics
                </label>
                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="ctrl.formValues.UseServerMetrics" /><i></i> </label>
              </div>
            </div>

            <div class="col-sm-12 form-section-title">
              Available storage options
            </div>

            <div class="form-group" ng-if="!ctrl.storageClassAvailable()">
              <div class="col-sm-12 small text-muted">
                <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                Unable to detect any storage class available to persist data. Users won't be able to persist application data inside this cluster.
              </div>
            </div>

            <div class="form-group" ng-if="ctrl.storageClassAvailable()">
              <span class="col-sm-12 text-muted small">
                <p>
                  Select which storage options will be available for use when deploying applications. Have a look at your storage driver documentation to figure out which access
                  policy to configure and if the volume expansion capability is supported.
                </p>
                <p>
                  You can find more information about access modes
                  <a href="https://kubernetes.io/docs/concepts/storage/persistent-volumes/#access-modes" target="_blank">in the official Kubernetes documentation</a>.
                </p>
              </span>
            </div>

            <div class="form-group" ng-if="ctrl.storageClassAvailable()">
              <div style="margin-top: 10px;" class="col-sm-12">
                <table class="table" style="table-layout: fixed;">
                  <tbody>
                    <tr class="text-muted">
                      <td>Storage</td>
                      <td>Shared access policy</td>
                      <td>Volume expansion</td>
                    </tr>
                    <tr ng-repeat="class in ctrl.StorageClasses">
                      <td>
                        <div style="margin: 5px;">
                          <label class="switch" style="margin-right: 10px;"> <input type="checkbox" ng-model="class.selected" /><i></i> </label>
                          <span>{{ class.Name }}</span>
                        </div>
                      </td>
                      <td>
                        <span
                          isteven-multi-select
                          input-model="class.availableAccessModes"
                          output-model="class.AccessModes"
                          button-label="Name"
                          item-label="Description"
                          tick-property="selected"
                          directive-id="{{ class.Name }}"
                          helper-elements=""
                          translation="{nothingSelected: 'Not configured'}"
                        >
                        </span>
                      </td>
                      <td>
                        <div style="margin: 5px;">
                          <label class="switch"><input type="checkbox" ng-model="class.AllowVolumeExpansion" /><i></i> </label>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="col-sm-12">
                <span ng-if="!ctrl.hasValidStorageConfiguration()" style="margin-left: 5px;" class="text-muted small">
                  <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                  Shared access policy configuration required
                </span>
              </div>
            </div>

            <div class="col-sm-12 form-section-title">
              Actions
            </div>
            <!-- actions -->
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="submit"
                  class="btn btn-primary btn-sm"
                  ng-click="ctrl.configure()"
                  ng-disabled="ctrl.state.actionInProgress || !ctrl.hasValidStorageConfiguration()"
                  button-spinner="ctrl.state.actionInProgress"
                >
                  <span ng-hide="ctrl.state.actionInProgress">Save configuration</span>
                  <span ng-show="ctrl.state.actionInProgress">Saving configuration...</span>
                </button>
              </div>
            </div>
          </form>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>