portainer/app/kubernetes/views/resource-pools/create/createResourcePool.html

<kubernetes-view-header title="Create a resource pool" state="kubernetes.resourcePools.new" view-ready="ctrl.state.viewReady">
  <a ui-sref="kubernetes.resourcePools">Resource pools</a> &gt; Create a resource pool
</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-lg-12 col-md-12 col-xs-12">
      <rd-widget>
        <rd-widget-body>
          <form class="form-horizontal" autocomplete="off" name="resourcePoolCreationForm">
            <!-- name-input -->
            <div class="form-group">
              <label for="pool_name" class="col-sm-1 control-label text-left">Name</label>
              <div class="col-sm-11">
                <input
                  type="text"
                  class="form-control"
                  name="pool_name"
                  ng-model="ctrl.formValues.Name"
                  ng-pattern="/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/"
                  ng-change="ctrl.onChangeName()"
                  placeholder="my-project"
                  required
                  auto-focus
                />
              </div>
            </div>
            <div class="form-group" ng-show="resourcePoolCreationForm.pool_name.$invalid || ctrl.state.isAlreadyExist">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="resourcePoolCreationForm.pool_name.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                  <p ng-message="pattern"
                    ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field must consist of lower case alphanumeric characters, '-' or '.', and must start and end
                    with an alphanumeric character.</p
                  >
                </div>
                <p ng-if="ctrl.state.isAlreadyExist"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A resource pool with the same name already exists.</p>
              </div>
            </div>
            <!-- !name-input -->
            <div class="col-sm-12 form-section-title">
              Quota
            </div>
            <!-- quotas-switch -->
            <div class="form-group">
              <div class="col-sm-12 small text-muted">
                <p>
                  <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                  A resource pool segments the underyling physical Kubernetes cluster into smaller virtual clusters. You should assign a capped limit of resources to this pool or
                  disable for the safe operation of your platform.
                </p>
              </div>
              <div class="col-sm-12">
                <label class="control-label text-left">
                  Resource assignment
                </label>
                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="ctrl.formValues.hasQuota" /><i></i> </label>
              </div>
            </div>
            <div class="form-group" ng-if="ctrl.formValues.hasQuota && !ctrl.isQuotaValid()">
              <span class="col-sm-12 text-warning small">
                <p> <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-right: 2px;"></i> At least a single limit must be set for the quota to be valid. </p>
              </span>
            </div>
            <!-- !quotas-switch -->
            <div ng-if="ctrl.formValues.hasQuota">
              <div class="col-sm-12 form-section-title">
                Resource limits
              </div>
              <div>
                <!-- memory-limit-input -->
                <div class="form-group">
                  <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
                    Memory
                  </label>
                  <div class="col-sm-3">
                    <slider
                      model="ctrl.formValues.MemoryLimit"
                      floor="ctrl.defaults.MemoryLimit"
                      ceil="ctrl.state.sliderMaxMemory"
                      step="128"
                      ng-if="ctrl.state.sliderMaxMemory"
                    ></slider>
                  </div>
                  <div class="col-sm-2">
                    <input
                      name="memory_limit"
                      type="number"
                      min="{{ ctrl.defaults.MemoryLimit }}"
                      max="{{ ctrl.state.sliderMaxMemory }}"
                      class="form-control"
                      ng-model="ctrl.formValues.MemoryLimit"
                      id="memory-limit"
                      required
                    />
                  </div>
                  <div class="col-sm-4">
                    <p class="small text-muted" style="margin-top: 7px;">
                      Maximum memory usage (<b>MB</b>)
                    </p>
                  </div>
                </div>
                <div class="form-group" ng-show="resourcePoolCreationForm.memory_limit.$invalid">
                  <div class="col-sm-12 small text-warning">
                    <div ng-messages="resourcePoolCreationForm.pool_name.$error">
                      <p
                        ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Value must be between {{ ctrl.defaults.MemoryLimit }} and {{ ctrl.state.sliderMaxMemory }}</p
                      >
                    </div>
                  </div>
                </div>
                <!-- !memory-limit-input -->
                <!-- cpu-limit-input -->
                <div class="form-group">
                  <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px;">
                    CPU
                  </label>
                  <div class="col-sm-5">
                    <slider
                      model="ctrl.formValues.CpuLimit"
                      floor="ctrl.defaults.CpuLimit"
                      ceil="ctrl.state.sliderMaxCpu"
                      step="0.1"
                      precision="2"
                      ng-if="ctrl.state.sliderMaxCpu"
                    ></slider>
                  </div>
                  <div class="col-sm-4" style="margin-top: 20px;">
                    <p class="small text-muted">
                      Maximum CPU usage
                    </p>
                  </div>
                </div>
                <!-- !cpu-limit-input -->
              </div>
            </div>
            <!-- actions -->
            <div class="col-sm-12 form-section-title">
              Actions
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="button"
                  class="btn btn-primary btn-sm"
                  ng-disabled="!resourcePoolCreationForm.$valid || ctrl.state.actionInProgress || (ctrl.formValues.hasQuota && !ctrl.isQuotaValid()) || !ctrl.isValid()"
                  ng-click="ctrl.createResourcePool()"
                  button-spinner="ctrl.state.actionInProgress"
                >
                  <span ng-hide="ctrl.state.actionInProgress">Create resource pool</span>
                  <span ng-show="ctrl.state.actionInProgress">Creation in progress...</span>
                </button>
              </div>
            </div>
            <!-- !actions -->
          </form>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>