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

275 lines
14 KiB
HTML

<page-header
ng-if="$ctrl.state.viewReady"
title="'Create a namespace'"
breadcrumbs="[{ label:'Namespaces', link:'kubernetes.resourcePools' }, 'Create a namespace']"
reload="true"
></page-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">
<!-- #region NAME INPUT -->
<div class="form-group">
<label for="pool_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
<div class="col-sm-8">
<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"
data-cy="k8sNamespaceCreate-namespaceNameInput"
required
auto-focus
/>
<span class="help-block">
<div class="form-group" ng-show="resourcePoolCreationForm.pool_name.$invalid || $ctrl.state.isAlreadyExist || $ctrl.state.hasPrefixKube">
<div class="col-sm-12 small text-warning">
<div ng-messages="resourcePoolCreationForm.pool_name.$error">
<p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>This field is required.</p>
<p class="vertical-center" ng-message="pattern"
><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field must consist of lower case alphanumeric characters or '-', and
contain at most 63 characters, and must start and end with an alphanumeric character.</p
>
</div>
<p class="vertical-center" ng-if="$ctrl.state.hasPrefixKube"
><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Prefix "kube-" is reserved for Kubernetes system namespaces.</p
>
<p class="vertical-center" ng-if="$ctrl.state.isAlreadyExist">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> A namespace with the same name already exists.
</p>
</div>
</div>
</span>
</div>
</div>
<!-- #endregion -->
<div class="col-sm-12 form-section-title"> Quota </div>
<!-- #region QUOTA -->
<!-- quotas-switch -->
<div class="form-group">
<div class="col-sm-12 small text-muted">
<p class="vertical-center">
<pr-icon class="vertical-center" icon="'info'" feather="true" mode="'primary'"></pr-icon>
A namespace segments the underlying physical Kubernetes cluster into smaller virtual clusters. You should assign a capped limit of resources to this namespace or
disable for the safe operation of your platform.
</p>
</div>
<div class="col-sm-12">
<por-switch-field
data-cy="'k8sNamespaceCreate-resourceAssignmentToggle'"
label="'Resource assignment'"
label-class="'col-sm-3 col-lg-2'"
name="'k8s-resourcepool-resourcequota'"
checked="$ctrl.formValues.HasQuota"
on-change="($ctrl.onToggleResourceQuota)"
></por-switch-field>
</div>
</div>
<!-- !quotas-switch -->
<div ng-if="$ctrl.formValues.HasQuota">
<div class="col-sm-12 form-section-title"> Resource limits </div>
<div>
<div class="form-group">
<span class="col-sm-12 small text-warning" ng-switch on="$ctrl.formValues.HasQuota && !$ctrl.isQuotaValid()">
<p class="vertical-center mb-0" ng-switch-when="true"
><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> At least a single limit must be set for the quota to be
valid.
</p>
<p class="vertical-center mb-0" ng-switch-default></p>
</span>
</div>
<!-- memory-limit-input -->
<div class="form-group flex flex-row !mb-0">
<label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left"> Memory limit (MB) </label>
<div class="col-xs-6">
<slider
model="$ctrl.formValues.MemoryLimit"
floor="$ctrl.defaults.MemoryLimit"
ceil="$ctrl.state.sliderMaxMemory"
step="128"
ng-if="$ctrl.state.sliderMaxMemory"
data-cy="k8sNamespaceCreate-memoryLimitSlider"
>
</slider>
</div>
<div class="col-sm-2 vertical-center">
<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"
data-cy="k8sNamespaceCreate-memoryLimitInput"
required
/>
</div>
</div>
<div class="flex flex-row w-full">
<span class="col-sm-3 col-lg-2"></span>
<span class="help-block col-sm-9 col-lg-10">
<div ng-show="resourcePoolCreationForm.memory_limit.$invalid">
<div class="small text-warning">
<div ng-messages="resourcePoolCreationForm.pool_name.$error">
<p class="vertical-center"
><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between
{{ $ctrl.defaults.MemoryLimit }} and
{{ $ctrl.state.sliderMaxMemory }}
</p>
</div>
</div>
</div>
</span>
</div>
<!-- !memory-limit-input -->
<!-- cpu-limit-input -->
<div class="form-group flex flex-row">
<label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left"> CPU limit </label>
<div class="col-xs-8">
<slider
model="$ctrl.formValues.CpuLimit"
floor="$ctrl.defaults.CpuLimit"
ceil="$ctrl.state.sliderMaxCpu"
step="0.1"
precision="2"
ng-if="$ctrl.state.sliderMaxCpu"
data-cy="k8sNamespaceCreate-cpuLimitSlider"
>
</slider>
</div>
</div>
<!-- !cpu-limit-input -->
</div>
</div>
<!-- #endregion -->
<!-- #region LOAD-BALANCERS -->
<div class="col-sm-12 form-section-title"> Load balancers </div>
<div class="form-group">
<span class="col-sm-12 text-muted small vertical-center">
<pr-icon icon="'info'" feather="true" mode="'primary'" class="vertical-center"></pr-icon>
You can set a quota on the amount of external load balancers that can be created inside this namespace. Set this quota to 0 to effectively disable the use of load
balancers in this namespace.
</span>
</div>
<div class="form-group">
<div class="col-sm-12">
<por-switch-field
data-cy="'k8sNamespaceCreate-loadBalancerQuotaToggle'"
label="'Load Balancer quota'"
label-class="'col-sm-3 col-lg-2'"
name="'k8s-resourcepool-lbquota'"
feature-id="$ctrl.LBQuotaFeatureId"
checked="$ctrl.formValues.UseLoadBalancersQuota"
on-change="($ctrl.onToggleLoadBalancerQuota)"
></por-switch-field>
</div>
</div>
<!-- #endregion -->
<div ng-if="$ctrl.state.ingressAvailabilityPerNamespace">
<!-- #region INGRESSES -->
<div class="col-sm-12 form-section-title"> Networking </div>
<ingress-class-datatable
ng-if="$ctrl.state.ingressAvailabilityPerNamespace"
on-change-availability="($ctrl.onChangeIngressControllerAvailability)"
ingress-controllers="$ctrl.ingressControllers"
description="'Enable the ingress controllers that users can select when publishing applications in this namespace.'"
no-ingress-controller-label="'No ingress controllers found in the cluster. Go to the cluster setup view to configure and allow the use of ingress controllers in the cluster.'"
view="'namespace'"
></ingress-class-datatable>
<!-- #endregion -->
</div>
<!-- #region REGISTRIES -->
<div class="col-sm-12 form-section-title"> Registries </div>
<div class="form-group">
<div class="col-sm-12 small text-muted">
<p class="vertical-center">
<pr-icon icon="'info'" mode="'primary'" feather="true"></pr-icon>
Define which registries can be used by users who have access to this namespace.
</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label text-left !pt-0" for="registries-selector"> Select registries </label>
<div class="col-sm-8 col-lg-9">
<span class="small text-muted" ng-if="!$ctrl.registries.length && $ctrl.state.isAdmin">
No registries available. Head over to the <a ui-sref="portainer.registries">registry view</a> to define a container registry.
</span>
<span class="small text-muted" ng-if="!$ctrl.registries.length && !$ctrl.state.isAdmin">
No registries available. Contact your administrator to create a container registry.
</span>
<create-namespace-registries-selector
input-id="'registries-selector'"
value="$ctrl.formValues.Registries"
on-change="($ctrl.onRegistriesChange)"
options="$ctrl.registries"
>
</create-namespace-registries-selector>
</div>
</div>
<!-- #endregion -->
<!-- #region STORAGES -->
<div class="col-sm-12 form-section-title"> Storage </div>
<div class="form-group">
<span class="col-sm-12 text-muted small vertical-center">
<pr-icon icon="'info'" mode="'primary'" feather="true"></pr-icon>
Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to effectively
prevent the usage of a specific storage option inside this namespace.
</span>
</div>
<div class="col-sm-12 form-section-title vertical-center">
<pr-icon icon="'svg-route'"></pr-icon>
standard
</div>
<storage-class-switch value="sc.Selected" name="sc.Name" on-change="(ctrl.onToggleStorageQuota)" authorization="K8sResourcePoolDetailsW"></storage-class-switch>
<!-- #endregion -->
<!-- summary -->
<kubernetes-summary-view ng-if="resourcePoolCreationForm.$valid && !$ctrl.isCreateButtonDisabled()" form-values="$ctrl.formValues"></kubernetes-summary-view>
<!-- !summary -->
<div class="col-sm-12 form-section-title"> Actions </div>
<!-- #region ACTIONS -->
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm !ml-0"
ng-disabled="!resourcePoolCreationForm.$valid || $ctrl.isCreateButtonDisabled()"
ng-click="$ctrl.createResourcePool()"
button-spinner="$ctrl.state.actionInProgress"
>
<span ng-hide="$ctrl.state.actionInProgress" data-cy="k8sNamespace-createNamespaceButton">Create namespace</span>
<span ng-show="$ctrl.state.actionInProgress">Creation in progress...</span>
</button>
</div>
</div>
<!-- #endregion -->
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>