2022-07-06 06:08:45 +00:00
< page-header
ng-if="ctrl.state.viewReady"
title="'Kubernetes features configuration'"
breadcrumbs="[
{ label:'Environments', link:'portainer.endpoints' },
2022-08-12 18:22:45 +00:00
{
2022-07-06 06:08:45 +00:00
label:ctrl.endpoint.Name,
2022-08-12 18:22:45 +00:00
link: 'portainer.endpoints.endpoint',
2022-07-06 06:08:45 +00:00
linkParams:{id: ctrl.endpoint.Id}
},
'Kubernetes configuration'
]"
reload="true"
>
< / page-header >
2020-07-05 23:21:03 +00:00
< 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 >
2020-08-17 00:27:06 +00:00
< form class = "form-horizontal" name = "kubernetesClusterSetupForm" >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Networking < / div >
2020-08-04 22:08:11 +00:00
2020-07-05 23:21:03 +00:00
< div class = "form-group" >
2022-07-22 02:16:50 +00:00
< div class = "col-sm-12 text-muted small" >
< p > Enabling the load balancer feature will allow users to expose application they deploy over an external IP address assigned by cloud provider. < / p >
< p class = "mt-1 vertical-center" >
< pr-icon icon = "'alert-circle'" mode = "'warning'" feather = "true" > < / pr-icon >
2020-07-05 23:21:03 +00:00
Ensure that your cloud provider allows you to create load balancers if you want to use this feature. Might incur costs.
< / p >
2022-07-22 02:16:50 +00:00
< / div >
2020-08-17 00:27:06 +00:00
2020-07-05 23:21:03 +00:00
< div class = "col-sm-12" >
2022-08-12 18:22:45 +00:00
< label class = "control-label text-left col-sm-5 col-lg-4 px-0" > Allow users to use external load balancer < / label >
2022-07-22 02:16:50 +00:00
< label class = "switch mb-0 col-sm-8" >
< input type = "checkbox" ng-model = "ctrl.formValues.UseLoadBalancer" / > < span class = "slider round" data-cy = "kubeSetup-loadBalancerToggle" > < / span >
2021-09-24 01:00:55 +00:00
< / label >
2020-07-05 23:21:03 +00:00
< / div >
2020-08-04 22:08:11 +00:00
< / div >
2020-08-12 23:30:23 +00:00
< div class = "form-group" >
2022-08-12 18:22:45 +00:00
< div class = "col-sm-12 text-muted small mt-4" >
2022-07-22 02:16:50 +00:00
< p > Configuring ingress controllers will allow users to expose application they deploy over a HTTP route. < / p >
< p class = "mt-1 vertical-center" >
< pr-icon icon = "'alert-circle'" mode = "'warning'" feather = "true" > < / pr-icon >
2020-08-20 00:51:14 +00:00
Ingress classes must be manually specified for each controller you want to use in the cluster. Make sure that each controller is running inside your cluster.
2020-08-12 23:30:23 +00:00
< / p >
2022-07-22 02:16:50 +00:00
< / div >
2020-08-20 00:51:14 +00:00
< / div >
< div class = "form-group" >
2020-08-12 23:30:23 +00:00
< div class = "col-sm-12" >
2020-08-20 00:51:14 +00:00
< label class = "control-label text-left" > Ingress controller< / label >
2022-07-22 02:16:50 +00:00
< span class = "label label-default interactive vertical-center" style = "margin-left: 10px" ng-click = "ctrl.addIngressClass()" data-cy = "kubeSetup-congifIngressButton" >
< pr-icon icon = "'plus'" feather = "true" size = "'sm'" class = "vertical-center" > < / pr-icon > configure ingress controller
2020-08-20 00:51:14 +00:00
< / span >
2020-08-12 23:30:23 +00:00
< / div >
2020-08-17 00:27:06 +00:00
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-inline" style = "margin-top: 10px" >
< div ng-repeat-start = "ingressClass in ctrl.formValues.IngressClasses" style = "margin-top: 2px" >
2020-08-20 00:51:14 +00:00
< div class = "col-sm-7 input-group input-group-sm" ng-class = "{ striked: ingressClass.NeedsDeletion }" >
< span class = "input-group-addon" > Ingress class< / span >
< input
type="text"
class="form-control"
name="ingress_class_name_{{ $index }}"
ng-model="ingressClass.Name"
placeholder="nginx"
ng-pattern="/^[a-z]([-a-z0-9]*[a-z0-9])?$/"
ng-change="ctrl.onChangeIngressClassName($index)"
required
2021-09-24 01:00:55 +00:00
data-cy="kubeSetup-ingressClassName"
2020-08-20 00:51:14 +00:00
/>
< / div >
< div class = "col-sm-3 input-group input-group-sm" ng-class = "{ striked: ingressClass.NeedsDeletion }" >
< span class = "input-group-addon" > Type< / span >
< select
class="form-control"
name="ingress_class_type_{{ $index }}"
ng-model="ingressClass.Type"
ng-options="value as value for (key, value) in ctrl.IngressClassTypes"
required
2021-09-24 01:00:55 +00:00
data-cy="kubeSetup-ingressType"
2020-08-20 00:51:14 +00:00
>
< option selected disabled hidden value = "" > Select a type< / option >
< / select >
< / div >
< div class = "col-sm-1 input-group input-group-sm" >
2021-09-24 01:00:55 +00:00
< button
ng-if="!ingressClass.NeedsDeletion"
2022-07-22 02:16:50 +00:00
class="btn btn-dangerlight btn-only-icon"
2021-09-24 01:00:55 +00:00
type="button"
ng-click="ctrl.removeIngressClass($index)"
data-cy="kubeSetup-deleteIngress"
>
2022-07-22 02:16:50 +00:00
< pr-icon icon = "'trash-2'" feather = "true" > < / pr-icon >
2020-08-20 00:51:14 +00:00
< / button >
2022-07-22 02:16:50 +00:00
< button ng-if = "ingressClass.NeedsDeletion" class = "btn btn-only-icon btn-light" type = "button" ng-click = "ctrl.restoreIngressClass($index)" >
< pr-icon icon = "'rotate-ccw'" feather = "true" > < / pr-icon >
2020-08-20 00:51:14 +00:00
< / button >
< / div >
< / div >
2020-08-17 00:27:06 +00:00
2020-08-20 00:51:14 +00:00
< div
ng-repeat-end
ng-show="
kubernetesClusterSetupForm['ingress_class_name_' + $index].$invalid ||
kubernetesClusterSetupForm['ingress_class_type_' + $index].$invalid ||
ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined
"
>
< div class = "col-sm-7 input-group" >
< div
2022-07-22 02:16:50 +00:00
class="small"
2022-01-17 05:53:32 +00:00
style="margin-top: 5px"
2020-08-20 00:51:14 +00:00
ng-if="kubernetesClusterSetupForm['ingress_class_name_' + $index].$invalid || ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined"
>
< div ng-messages = "kubernetesClusterSetupForm['ingress_class_name_'+$index].$error" >
2022-07-22 02:16:50 +00:00
< p ng-message = "required" class = "vertical-center text-muted"
>< pr-icon icon = "'alert-triangle'" mode = "'warning'" feather = "true" > < / pr-icon > Ingress class name is required.< /p
>
< p ng-message = "pattern" class = "vertical-center text-muted"
>< pr-icon icon = "'alert-triangle'" mode = "'warning'" feather = "true" > < / pr-icon > This field must consist of lower case alphanumeric characters or '-', start
with an alphabetic character, and end with an alphanumeric character (e.g. 'my-name', or 'abc-123').< /p
2020-08-20 00:51:14 +00:00
>
< / div >
2022-07-22 02:16:50 +00:00
< p ng-if = "ctrl.state.duplicates.ingressClasses.refs[$index] !== undefined" class = "vertical-center text-muted" >
< pr-icon icon = "'alert-triangle'" mode = "'warning'" feather = "true" > < / pr-icon > This ingress class is already defined.
2020-08-20 00:51:14 +00:00
< / p >
< / div >
< / div >
< div class = "col-sm-3 input-group" >
2022-07-22 02:16:50 +00:00
< div class = "small" style = "margin-top: 5px" ng-if = "kubernetesClusterSetupForm['ingress_class_type_' + $index].$invalid" >
2020-08-20 00:51:14 +00:00
< div ng-messages = "kubernetesClusterSetupForm['ingress_class_type_'+$index].$error" >
2022-07-22 02:16:50 +00:00
< p ng-message = "required" class = "vertical-center text-muted"
>< pr-icon icon = "'alert-triangle'" mode = "'warning'" feather = "true" > < / pr-icon > Ingress class type is required.< /p
>
2020-08-20 00:51:14 +00:00
< / div >
< / div >
< / div >
2020-08-17 00:27:06 +00:00
< / div >
2020-08-12 23:30:23 +00:00
< / div >
< / div >
2020-08-20 09:24:12 +00:00
< div class = "form-group" ng-if = "ctrl.hasTraefikIngress()" >
< span class = "col-sm-12 text-muted small" >
< p >
2022-01-17 05:53:32 +00:00
< i class = "fa fa-flask blue-icon" aria-hidden = "true" style = "margin-right: 2px" > < / i >
2020-08-20 09:24:12 +00:00
Traefik support is experimental.
< / p >
< / span >
< / div >
2021-11-02 20:57:21 +00:00
<!-- auto update window -->
2022-07-22 02:16:50 +00:00
< div class = "col-sm-12 form-section-title" > Change Window Settings < / div >
2021-11-02 20:57:21 +00:00
< div class = "form-group" >
< div class = "col-sm-12" >
< por-switch-field
2021-12-14 19:14:53 +00:00
checked="ctrl.state.autoUpdateSettings.Enabled"
name="'disableSysctlSettingForRegularUsers'"
label="'Enable Change Window'"
feature-id="ctrl.limitedFeatureAutoWindow"
tooltip="'Specify a timeframe during which automatic updates can occur in this environment.'"
on-change="(ctrl.onToggleAutoUpdate)"
2022-08-12 18:22:45 +00:00
label-class="'col-sm-5 col-lg-4 px-0 !m-0'"
2022-07-22 02:16:50 +00:00
switch-class="'col-sm-8'"
2021-11-02 20:57:21 +00:00
>
< / por-switch-field >
< / div >
< / div >
2022-07-22 02:16:50 +00:00
< time-window-picker ng-show = "ctrl.state.autoUpdateSettings.Enabled" time-window = "ctrl.state.autoUpdateSettings" time-zone = "ctrl.state.timeZone" > < / time-window-picker >
<!-- #region SECURITY -->
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Security < / div >
2020-12-14 01:31:59 +00:00
< div class = "form-group" >
< span class = "col-sm-12 text-muted small" >
By default, all the users have access to the default namespace. Enable this option to set accesses on the default namespace.
< / span >
< / div >
2022-07-22 02:16:50 +00:00
2020-12-14 01:31:59 +00:00
< div class = "form-group" >
< div class = "col-sm-12" >
2022-08-12 18:22:45 +00:00
< label class = "control-label text-left col-sm-5 col-lg-4 px-0" > Restrict access to the default namespace < / label >
2022-07-22 02:16:50 +00:00
< label class = "switch col-sm-8" >
< input type = "checkbox" ng-model = "ctrl.formValues.RestrictDefaultNamespace" / > < span class = "slider round" data-cy = "kubeSetup-restrictDefaultNsToggle" > < / span >
2021-09-24 01:00:55 +00:00
< / label >
2020-12-14 01:31:59 +00:00
< / div >
< / div >
2022-07-22 02:16:50 +00:00
<!-- #endregion -->
2020-12-14 01:31:59 +00:00
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Resources and Metrics < / div >
2020-12-14 01:31:59 +00:00
< div class = "form-group" >
2022-07-22 02:16:50 +00:00
< div class = "col-sm-12 text-muted small" >
< p >
By ENABLING resource over-commit, you are able to assign more resources to namespaces than is physically available in the cluster. This may lead to unexpected
deployment failures if there is insufficient resource to service demand.
< / p >
< p class = "mt-1 vertical-center" >
< pr-icon icon = "'alert-circle'" mode = "'warning'" feather = "true" > < / pr-icon >
2020-12-14 01:31:59 +00:00
By DISABLING resource over-commit (highly recommended), you are only able to assign resources to namespaces that are less (in aggregate) than the cluster total
minus any system resource reservation.
< / p >
2022-07-22 02:16:50 +00:00
< / div >
2020-12-14 01:31:59 +00:00
< div class = "col-sm-12" >
2021-10-06 06:24:26 +00:00
< por-switch-field
2021-12-14 19:14:53 +00:00
data-cy="'kubeSetup-resourceOverCommitToggle'"
label="'Allow resource over-commit'"
name="'resource-over-commit-switch'"
feature-id="ctrl.limitedFeature"
checked="ctrl.formValues.EnableResourceOverCommit"
on-change="(ctrl.onChangeEnableResourceOverCommit)"
2022-08-12 18:22:45 +00:00
label-class="'col-sm-5 col-lg-4 px-0 !m-0'"
2022-07-22 02:16:50 +00:00
switch-class="'col-sm-8'"
2021-10-06 06:24:26 +00:00
>< / por-switch-field >
2020-12-14 01:31:59 +00:00
< / div >
2020-08-04 22:08:11 +00:00
< / div >
< div class = "form-group" >
2022-07-22 02:16:50 +00:00
< div class = "col-sm-12 text-muted small" >
< p > Enabling this feature will allow users to use specific features like autoscaling and to see container and node resource usage. < / p >
< p class = "vertical-center mt-1" >
< pr-icon icon = "'alert-circle'" mode = "'warning'" feather = "true" > < / pr-icon >
2021-08-11 13:03:10 +00:00
Ensure that < a href = "https://kubernetes.io/docs/tasks/debug-application-cluster/resource-metrics-pipeline/#metrics-server" target = "_blank" > metrics server< / a > or
< a href = "https://github.com/kubernetes-sigs/prometheus-adapter" target = "_blank" > prometheus< / a > is running inside your cluster.
2020-08-04 22:08:11 +00:00
< / p >
2022-07-22 02:16:50 +00:00
< / div >
2020-08-04 22:08:11 +00:00
< / div >
< div class = "form-group" >
< div class = "col-sm-12" >
2022-08-12 18:22:45 +00:00
< label class = "control-label text-left col-sm-5 col-lg-4 px-0" > Enable features using the metrics API < / label >
2022-07-22 02:16:50 +00:00
< label class = "switch col-sm-8" >
< input type = "checkbox" ng-model = "ctrl.formValues.UseServerMetrics" ng-change = "ctrl.enableMetricsServer()" / >
< span class = "slider round" data-cy = "kubeSetup-metricsToggle" > < / span >
2021-04-29 01:10:14 +00:00
< / label >
< / div >
2022-01-17 05:53:32 +00:00
< div ng-if = "ctrl.state.metrics.pending && ctrl.state.metrics.userClick" class = "col-sm-12 small text-muted" style = "margin-top: 5px" >
2022-08-12 18:22:45 +00:00
Checking metrics API... < pr-icon icon = "'loader'" feather = "true" class-name = "'ml-0.5'" > < / pr-icon >
2021-04-29 01:10:14 +00:00
< / div >
< div
ng-if="!ctrl.state.metrics.pending & & ctrl.state.metrics.isServerRunning & & ctrl.state.metrics.userClick"
2022-07-22 02:16:50 +00:00
class="col-sm-12 small text-muted vertical-center"
2022-01-17 05:53:32 +00:00
style="margin-top: 5px"
2021-04-29 01:10:14 +00:00
>
2022-07-22 02:16:50 +00:00
< pr-icon icon = "'check'" mode = "'success'" feather = "true" > < / pr-icon > Successfully reached metrics API
2021-04-29 01:10:14 +00:00
< / div >
< div
ng-if="!ctrl.state.metrics.pending & & !ctrl.state.metrics.isServerRunning & & ctrl.state.metrics.userClick"
2022-07-22 02:16:50 +00:00
class="col-sm-12 small text-muted vertical-center mt-2"
2021-04-29 01:10:14 +00:00
>
2022-07-22 02:16:50 +00:00
< pr-icon icon = "'x'" mode = "'danger'" feather = "true" > < / pr-icon > Unable to reach metrics API, make sure metrics server is properly deployed inside that cluster.
2020-08-04 22:08:11 +00:00
< / div >
2020-07-05 23:21:03 +00:00
< / div >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Available storage options < / div >
2020-07-05 23:21:03 +00:00
< div class = "form-group" ng-if = "!ctrl.storageClassAvailable()" >
2022-07-22 02:16:50 +00:00
< div class = "col-sm-12 small text-muted vertical-center" >
< pr-icon icon = "'alert-circle'" mode = "'warning'" feather = "true" > < / pr-icon >
2020-07-05 23:21:03 +00:00
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
2020-08-07 04:40:24 +00:00
policy to configure and if the volume expansion capability is supported.
2020-07-05 23:21:03 +00:00
< / 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()" >
2022-01-17 05:53:32 +00:00
< div style = "margin-top: 10px" class = "col-sm-12" >
< table class = "table" style = "table-layout: fixed" >
2020-07-05 23:21:03 +00:00
< tbody >
< tr class = "text-muted" >
< td > Storage< / td >
< td > Shared access policy< / td >
2020-08-07 04:40:24 +00:00
< td > Volume expansion< / td >
2020-07-05 23:21:03 +00:00
< / tr >
< tr ng-repeat = "class in ctrl.StorageClasses" >
< td >
2022-08-12 18:22:45 +00:00
< div class = "flex-row vertical-center" >
2022-07-22 02:16:50 +00:00
< label class = "switch mr-2 mb-0" >
< input type = "checkbox" ng-model = "class.selected" / > < span class = "slider round" data-cy = "kubeSetup-storageToggle{{ class.Name }}" > < / span >
2021-09-24 01:00:55 +00:00
< / label >
2020-07-05 23:21:03 +00:00
< 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'}"
2021-09-24 01:00:55 +00:00
data-cy="kubeSetup-storageAccessSelect{{ class.Name }}"
2020-07-05 23:21:03 +00:00
>
< / span >
< / td >
2020-08-07 04:40:24 +00:00
< td >
2022-01-17 05:53:32 +00:00
< div style = "margin: 5px" >
2022-07-22 02:16:50 +00:00
< label class = "switch mr-2 mb-0"
>< input type = "checkbox" ng-model = "class.AllowVolumeExpansion" / > < span
class="slider round"
data-cy="kubeSetup-storageExpansionToggle{{ class.Name }}"
>< / span >
2021-09-24 01:00:55 +00:00
< / label >
2020-08-07 04:40:24 +00:00
< / div >
< / td >
2020-07-05 23:21:03 +00:00
< / tr >
< / tbody >
< / table >
< / div >
< div class = "col-sm-12" >
2022-07-22 02:16:50 +00:00
< span ng-if = "!ctrl.hasValidStorageConfiguration()" class = "text-muted small vertical-center mt-2" >
< pr-icon icon = "'alert-circle'" mode = "'warning'" feather = "true" > < / pr-icon >
2020-07-05 23:21:03 +00:00
Shared access policy configuration required
< / span >
< / div >
< / div >
2022-01-17 05:53:32 +00:00
< div class = "col-sm-12 form-section-title" > Actions < / div >
2020-07-05 23:21:03 +00:00
<!-- actions -->
< div class = "form-group" >
< div class = "col-sm-12" >
< button
type="submit"
2022-08-12 18:22:45 +00:00
class="btn btn-primary btn-sm !ml-0"
2020-07-05 23:21:03 +00:00
ng-click="ctrl.configure()"
2020-08-17 00:27:06 +00:00
ng-disabled="ctrl.state.actionInProgress || !kubernetesClusterSetupForm.$valid || !ctrl.hasValidStorageConfiguration()"
2020-07-05 23:21:03 +00:00
button-spinner="ctrl.state.actionInProgress"
2021-09-05 10:03:48 +00:00
analytics-on
analytics-if="ctrl.restrictDefaultToggledOn()"
analytics-category="kubernetes"
analytics-event="kubernetes-configure"
analytics-properties="{ metadata: { restrictAccessToDefaultNamespace: ctrl.formValues.RestrictDefaultNamespace } }"
2021-09-24 01:00:55 +00:00
data-cy="kubeSetup-saveConfigurationButton"
2020-07-05 23:21:03 +00:00
>
< 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 >
