mirror of https://github.com/portainer/portainer
460 lines
24 KiB
HTML
460 lines
24 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-muted">
|
|
<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-muted" 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-muted">
|
|
<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 -->
|
|
|
|
<!-- #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 -->
|
|
|
|
<div ng-if="$ctrl.state.canUseIngress">
|
|
<div class="col-sm-12 form-section-title"> Ingresses </div>
|
|
<!-- #region INGRESSES -->
|
|
<div class="form-group" ng-if="$ctrl.formValues.IngressClasses.length === 0">
|
|
<div class="col-sm-12 small text-muted">
|
|
The ingress feature must be enabled in the
|
|
<a ui-sref="kubernetes.cluster.setup">environment configuration view</a> to be able to register ingresses inside this namespace.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" ng-if="$ctrl.formValues.IngressClasses.length > 0">
|
|
<div class="col-sm-12 small text-muted">
|
|
<p class="vertical-center">
|
|
<pr-icon icon="'info'" mode="'primary'" feather="true"></pr-icon>
|
|
Enable and configure ingresses available to users when deploying applications.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" ng-repeat-start="ic in $ctrl.formValues.IngressClasses track by ic.IngressClass.Name">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<span class="text-muted vertical-center"><pr-icon icon="'svg-route'"></pr-icon> {{ ic.IngressClass.Name }}</span>
|
|
<hr class="mt-2 mb-0" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-3 col-lg-2">
|
|
<label class="control-label text-left"> Allow users to use this ingress </label>
|
|
</div>
|
|
<div class="col-sm-8 pt-2">
|
|
<label class="switch">
|
|
<input type="checkbox" ng-model="ic.Selected" /><span class="slider round" data-cy="namespaceCreate-ingressToggle{{ ic.IngressClass.Name }}"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="ic.Selected">
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<label class="control-label text-left">
|
|
Hostnames
|
|
<portainer-tooltip
|
|
message="'Hostnames associated to the ingress inside this namespace. Users will be able to expose and access their applications over the ingress via one of these hostname.'"
|
|
>
|
|
</portainer-tooltip>
|
|
</label>
|
|
<span class="label label-default interactive" ng-click="$ctrl.addHostname(ic)" data-cy="namespaceCreate-addHostButton{{ ic.IngressClass.Name }}">
|
|
<pr-icon icon="'plus'" feather="true"></pr-icon> add hostname
|
|
</span>
|
|
</div>
|
|
<div class="col-sm-12 pt-4">
|
|
<div ng-repeat="item in ic.Hosts track by $index">
|
|
<div class="form-inline">
|
|
<div class="col-sm-8 input-group input-group-sm pt-2">
|
|
<span class="input-group-addon required">Hostname</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
name="hostname_{{ ic.IngressClass.Name }}_{{ $index }}"
|
|
ng-model="item.Host"
|
|
ng-change="$ctrl.onChangeIngressHostname()"
|
|
placeholder="foo"
|
|
pattern="[\*a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*"
|
|
required
|
|
data-cy="namespaceCreate-hostnameInput{{ ic.IngressClass.Name }}_{{ $index }}"
|
|
/>
|
|
</div>
|
|
<div class="col-sm-1 input-group input-group-sm !pt-2" ng-if="$index > 0">
|
|
<button class="btn btn-md btn-dangerlight btn-only-icon" type="button" ng-click="$ctrl.removeHostname(ic, $index)">
|
|
<pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="small text-muted pt-1"
|
|
ng-show="
|
|
resourcePoolCreationForm['hostname_' + ic.IngressClass.Name + '_' + $index].$invalid ||
|
|
$ctrl.state.duplicates.ingressHosts.refs[ic.IngressClass.Name][$index] !== undefined
|
|
"
|
|
>
|
|
<ng-messages for="resourcePoolCreationForm['hostname_' + ic.IngressClass.Name + '_' + $index].$error">
|
|
<p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Hostname 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 must start and end with an alphanumeric character (e.g. 'example.com').
|
|
</p>
|
|
</ng-messages>
|
|
<p class="vertical-center" ng-if="$ctrl.state.duplicates.ingressHosts.refs[ic.IngressClass.Name][$index] !== undefined">
|
|
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This hostname is already used.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-repeat-end class="form-group" ng-if="ic.Selected">
|
|
<div class="col-sm-12 small text-muted">
|
|
<p class="vertical-center">
|
|
<pr-icon icon="'info'" mode="'primary'" feather="true"></pr-icon>
|
|
You can specify a list of annotations that will be associated to the ingress.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-sm-12">
|
|
<label class="control-label text-left">Annotations </label>
|
|
<label class="control-label text-left">
|
|
<span class="label label-default interactive" ng-click="$ctrl.addAnnotation(ic)" data-cy="namespaceCreate-addAnnotation{{ ic.IngressClass.Name }}">
|
|
<pr-icon icon="'plus'" feather="true"></pr-icon> add annotation
|
|
</span>
|
|
<portainer-tooltip
|
|
message="'Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type.'"
|
|
>
|
|
</portainer-tooltip>
|
|
</label>
|
|
<label class="control-label text-left">
|
|
<span
|
|
class="label label-default interactive"
|
|
ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
|
|
ng-click="$ctrl.addRewriteAnnotation(ic)"
|
|
data-cy="namespaceCreate-addAnnotation{{ ic.IngressClass.Name }}"
|
|
>
|
|
<pr-icon icon="'plus'" feather="true"></pr-icon> add rewrite annotation
|
|
</span>
|
|
<portainer-tooltip
|
|
ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
|
|
message="'When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to.'"
|
|
>
|
|
</portainer-tooltip>
|
|
</label>
|
|
<label class="control-label text-left">
|
|
<span
|
|
class="label label-default interactive"
|
|
ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
|
|
ng-click="$ctrl.addUseregexAnnotation(ic)"
|
|
data-cy="namespaceCreate-addAnnotation{{ ic.IngressClass.Name }}"
|
|
>
|
|
<pr-icon icon="'plus'" feather="true"></pr-icon> add regular expression annotation
|
|
</span>
|
|
<portainer-tooltip
|
|
ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
|
|
message="'Enable use of regular expressions in ingress paths (set in the ingress details of an application). Use this along with rewrite-target to specify the regex capturing group to be replaced, e.g. path regex of ^/foo/(,*) and rewrite-target of /bar/$1 rewrites example.com/foo/account to example.com/bar/account.'"
|
|
>
|
|
</portainer-tooltip>
|
|
</label>
|
|
</div>
|
|
<div class="col-sm-12 form-inline pt-4">
|
|
<div class="pt-2" ng-repeat="annotation in ic.Annotations track by $index">
|
|
<div class="input-group col-sm-5 input-group-sm">
|
|
<span class="input-group-addon">Key</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
ng-model="annotation.Key"
|
|
placeholder="{{
|
|
ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX
|
|
? 'e.g. nginx.ingress.kubernetes.io/enable-rewrite-log'
|
|
: 'e.g. traefik.ingress.kubernetes.io/router.priority'
|
|
}}"
|
|
required
|
|
data-cy="namespaceCreate-annotationKey{{ ic.IngressClass.Name }}"
|
|
/>
|
|
</div>
|
|
<div class="input-group input-group-sm col-sm-5">
|
|
<span class="input-group-addon">Value</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
ng-model="annotation.Value"
|
|
placeholder="{{ ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX ? 'e.g. true or false' : 'e.g. 42' }}"
|
|
required
|
|
data-cy="namespaceCreate-annotationValue{{ ic.IngressClass.Name }}"
|
|
/>
|
|
</div>
|
|
<div class="input-group input-group-sm col-sm-1">
|
|
<button
|
|
class="btn btn-md btn-dangerlight btn-only-icon"
|
|
type="button"
|
|
ng-click="$ctrl.removeAnnotation(ic, $index)"
|
|
data-cy="namespaceCreate-deleteAnnotationButton{{ ic.IngressClass.Name }}"
|
|
>
|
|
<pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- #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"> 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>
|
|
<span
|
|
isteven-multi-select
|
|
ng-if="$ctrl.registries.length"
|
|
input-model="$ctrl.registries"
|
|
output-model="$ctrl.formValues.Registries"
|
|
button-label="Name"
|
|
item-label="Name"
|
|
tick-property="Checked"
|
|
helper-elements="filter"
|
|
search-property="Name"
|
|
translation="{nothingSelected: 'Select one or more registries', search: 'Search...'}"
|
|
data-cy="namespaceCreate-registrySelect"
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- #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>
|