mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 12:25:22 +02:00
feat(k8s/applications): expose applications via ingress (#4136)
* feat(k8s/endpoint): expose ingress controllers on endpoints * feat(k8s/applications): add ability to expose applications over ingress - missing RP and app edits * feat(k8s/application): add validation for ingress routes * feat(k8s/resource-pools): edit available ingress classes * fix(k8s/ingress): var name refactor was partially applied * feat(kubernetes): double validation on RP edit * feat(k8s/application): app edit ingress update + formvalidation + UI rework * feat(k8s/ingress): dictionary for default annotations on ingress creation * fix(k8s/application): temporary fix + TODO dev notice * feat(k8s/application): select default ingress of selected resource pool * feat(k8s/ingress): revert ingressClassName removal * feat(k8s/ingress): admins can now add an host to ingress in a resource pool * feat(k8s/resource-pool): list applications using RP ingresses * feat(k8s/configure): minor UI update * feat(k8s/configure): minor UI update * feat(k8s/configure): minor UI update * feat(k8s/configure): minor UI update * feat(k8s/configure): minor UI update * fix(k8s/ingresses): remove host if undefined * feat(k8s/resource-pool): remove the activate ingresses switch * fix(k8s/resource-pool): edditing an ingress host was deleting all the routes of the ingress * feat(k8s/application): prevent app deploy if no ports to publish and publishing type not internal * feat(k8s/ingress): minor UI update * fix(k8s/ingress): allow routes without prepending / * feat(k8s/application): add form validation on ingress route Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>
This commit is contained in:
xAt0mZ
GitHub
parent
201c3ac143
commit
f91d3f1ca3
31 changed files with 1595 additions and 443 deletions
|
|
@ -10,7 +10,7 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" autocomplete="off" name="resourcePoolCreationForm">
|
||||
<!-- name-input -->
|
||||
<!-- #region 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">
|
||||
|
|
@ -39,10 +39,12 @@
|
|||
<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 -->
|
||||
<!-- #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">
|
||||
|
|
@ -56,16 +58,16 @@
|
|||
<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>
|
||||
<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()">
|
||||
<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 ng-if="ctrl.formValues.HasQuota">
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Resource limits
|
||||
</div>
|
||||
|
|
@ -76,13 +78,8 @@
|
|||
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>
|
||||
<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
|
||||
|
|
@ -106,8 +103,8 @@
|
|||
<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
|
||||
>
|
||||
><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>
|
||||
|
|
@ -118,14 +115,8 @@
|
|||
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>
|
||||
<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">
|
||||
|
|
@ -136,16 +127,67 @@
|
|||
<!-- !cpu-limit-input -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- actions -->
|
||||
<!-- #endregion -->
|
||||
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Ingresses
|
||||
</div>
|
||||
<!-- #region INGRESSES -->
|
||||
<div class="form-group" ng-if="!ctrl.state.canUseIngress">
|
||||
<div class="col-sm-12 small text-muted">
|
||||
The ingress feature must be enabled in the
|
||||
<a ui-sref="portainer.endpoints.endpoint.kubernetesConfig({id: ctrl.endpoint.Id})">endpoint configuration view</a> to be able to register ingresses inside this
|
||||
resource pool.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-if="ctrl.state.canUseIngress">
|
||||
<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>
|
||||
You can enable one or multiple ingresses to be used when deploying an application inside this resource pool.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<table class="table" style="table-layout: fixed;">
|
||||
<tbody>
|
||||
<tr class="text-muted">
|
||||
<td style="width: 33%;">Ingress controller</td>
|
||||
<td style="width: 66%;">
|
||||
Hostname
|
||||
<portainer-tooltip
|
||||
position="bottom"
|
||||
message="Optional hostname associated to the ingress inside this resource pool. Users will be able to expose and access their applications over the ingress via this hostname or via IP address directly if not defined."
|
||||
>
|
||||
</portainer-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat="class in ctrl.formValues.IngressClasses">
|
||||
<td style="width: 33%;">
|
||||
<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 style="width: 66%;">
|
||||
<input class="form-control" ng-model="class.Host" placeholder="host.com" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- #endregion -->
|
||||
|
||||
<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"
|
||||
ng-disabled="!resourcePoolCreationForm.$valid || ctrl.state.actionInProgress || (ctrl.formValues.hasQuota && !ctrl.isQuotaValid()) || !ctrl.isValid()"
|
||||
ng-disabled="!resourcePoolCreationForm.$valid || ctrl.state.actionInProgress || (ctrl.formValues.HasQuota && !ctrl.isQuotaValid()) || !ctrl.isValid()"
|
||||
ng-click="ctrl.createResourcePool()"
|
||||
button-spinner="ctrl.state.actionInProgress"
|
||||
>
|
||||
|
|
@ -154,7 +196,8 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !actions -->
|
||||
|
||||
<!-- #endregion -->
|
||||
</form>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,16 @@ import _ from 'lodash-es';
|
|||
import filesizeParser from 'filesize-parser';
|
||||
import { KubernetesResourceQuotaDefaults } from 'Kubernetes/models/resource-quota/models';
|
||||
import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
|
||||
import { KubernetesResourcePoolFormValues, KubernetesResourcePoolIngressClassFormValue } from 'Kubernetes/models/resource-pool/formValues';
|
||||
|
||||
class KubernetesCreateResourcePoolController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, Notifications, KubernetesNodeService, KubernetesResourcePoolService, Authentication) {
|
||||
constructor($async, $state, Notifications, KubernetesNodeService, KubernetesResourcePoolService, Authentication, EndpointProvider) {
|
||||
this.$async = $async;
|
||||
this.$state = $state;
|
||||
this.Notifications = Notifications;
|
||||
this.Authentication = Authentication;
|
||||
this.EndpointProvider = EndpointProvider;
|
||||
|
||||
this.KubernetesNodeService = KubernetesNodeService;
|
||||
this.KubernetesResourcePoolService = KubernetesResourcePoolService;
|
||||
|
|
@ -53,13 +55,8 @@ class KubernetesCreateResourcePoolController {
|
|||
try {
|
||||
this.checkDefaults();
|
||||
const owner = this.Authentication.getUserDetails().username;
|
||||
await this.KubernetesResourcePoolService.create(
|
||||
this.formValues.Name,
|
||||
owner,
|
||||
this.formValues.hasQuota,
|
||||
this.formValues.CpuLimit,
|
||||
KubernetesResourceReservationHelper.bytesValue(this.formValues.MemoryLimit)
|
||||
);
|
||||
this.formValues.Owner = owner;
|
||||
await this.KubernetesResourcePoolService.create(this.formValues);
|
||||
this.Notifications.success('Resource pool successfully created', this.formValues.Name);
|
||||
this.$state.go('kubernetes.resourcePools');
|
||||
} catch (err) {
|
||||
|
|
@ -87,13 +84,10 @@ class KubernetesCreateResourcePoolController {
|
|||
|
||||
async onInit() {
|
||||
try {
|
||||
const endpoint = this.EndpointProvider.currentEndpoint();
|
||||
this.endpoint = endpoint;
|
||||
this.defaults = KubernetesResourceQuotaDefaults;
|
||||
|
||||
this.formValues = {
|
||||
MemoryLimit: this.defaults.MemoryLimit,
|
||||
CpuLimit: this.defaults.CpuLimit,
|
||||
hasQuota: true,
|
||||
};
|
||||
this.formValues = new KubernetesResourcePoolFormValues(this.defaults);
|
||||
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
|
|
@ -101,6 +95,7 @@ class KubernetesCreateResourcePoolController {
|
|||
sliderMaxCpu: 0,
|
||||
viewReady: false,
|
||||
isAlreadyExist: false,
|
||||
canUseIngress: endpoint.Kubernetes.Configuration.UseIngress,
|
||||
};
|
||||
|
||||
const nodes = await this.KubernetesNodeService.get();
|
||||
|
|
@ -111,6 +106,10 @@ class KubernetesCreateResourcePoolController {
|
|||
});
|
||||
this.state.sliderMaxMemory = KubernetesResourceReservationHelper.megaBytesValue(this.state.sliderMaxMemory);
|
||||
await this.getResourcePools();
|
||||
if (this.state.canUseIngress) {
|
||||
const ingressClasses = endpoint.Kubernetes.Configuration.IngressClasses;
|
||||
this.formValues.IngressClasses = _.map(ingressClasses, (item) => new KubernetesResourcePoolIngressClassFormValue(item));
|
||||
}
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to load view data');
|
||||
} finally {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
import _ from 'lodash-es';
|
||||
|
||||
angular.module('portainer.kubernetes').controller('KubernetesResourcePoolIngressesDatatableController', function ($scope, $controller, DatatableService) {
|
||||
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
|
||||
this.state = Object.assign(this.state, {
|
||||
expandedItems: [],
|
||||
expandAll: false,
|
||||
});
|
||||
|
||||
this.onSettingsRepeaterChange = function () {
|
||||
DatatableService.setDataTableSettings(this.tableKey, this.settings);
|
||||
};
|
||||
|
||||
this.expandItem = function (item, expanded) {
|
||||
if (!this.itemCanExpand(item)) {
|
||||
return;
|
||||
}
|
||||
|
||||
item.Expanded = expanded;
|
||||
if (!expanded) {
|
||||
item.Highlighted = false;
|
||||
}
|
||||
};
|
||||
|
||||
this.itemCanExpand = function (item) {
|
||||
return item.Paths.length > 0;
|
||||
};
|
||||
|
||||
this.hasExpandableItems = function () {
|
||||
return _.filter(this.state.filteredDataSet, (item) => this.itemCanExpand(item)).length;
|
||||
};
|
||||
|
||||
this.expandAll = function () {
|
||||
this.state.expandAll = !this.state.expandAll;
|
||||
_.forEach(this.state.filteredDataSet, (item) => {
|
||||
if (this.itemCanExpand(item)) {
|
||||
this.expandItem(item, this.state.expandAll);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
this.$onInit = function () {
|
||||
this.setDefaults();
|
||||
this.prepareTableFromDataset();
|
||||
|
||||
this.state.orderBy = this.orderBy;
|
||||
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
|
||||
if (storedOrder !== null) {
|
||||
this.state.reverseOrder = storedOrder.reverse;
|
||||
this.state.orderBy = storedOrder.orderBy;
|
||||
}
|
||||
|
||||
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
|
||||
if (textFilter !== null) {
|
||||
this.state.textFilter = textFilter;
|
||||
this.onTextFilterChange();
|
||||
}
|
||||
|
||||
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
|
||||
if (storedFilters !== null) {
|
||||
this.filters = storedFilters;
|
||||
}
|
||||
if (this.filters && this.filters.state) {
|
||||
this.filters.state.open = false;
|
||||
}
|
||||
|
||||
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
|
||||
if (storedSettings !== null) {
|
||||
this.settings = storedSettings;
|
||||
this.settings.open = false;
|
||||
}
|
||||
this.onSettingsRepeaterChange();
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
angular.module('portainer.kubernetes').component('kubernetesResourcePoolIngressesDatatable', {
|
||||
templateUrl: './template.html',
|
||||
controller: 'KubernetesResourcePoolIngressesDatatableController',
|
||||
bindings: {
|
||||
titleText: '@',
|
||||
titleIcon: '@',
|
||||
dataset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<',
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<div class="datatable">
|
||||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar">
|
||||
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
|
||||
<div class="settings">
|
||||
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
|
||||
<span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Table settings</span>
|
||||
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader">
|
||||
Table settings
|
||||
</div>
|
||||
<div class="menuContent">
|
||||
<div>
|
||||
<div class="md-checkbox">
|
||||
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
|
||||
<label for="setting_auto_refresh">Auto refresh</label>
|
||||
</div>
|
||||
<div ng-if="$ctrl.settings.repeater.autoRefresh">
|
||||
<label for="settings_refresh_rate">
|
||||
Refresh rate
|
||||
</label>
|
||||
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
|
||||
<option value="10">10s</option>
|
||||
<option value="30">30s</option>
|
||||
<option value="60">1min</option>
|
||||
<option value="120">2min</option>
|
||||
<option value="300">5min</option>
|
||||
</select>
|
||||
<span>
|
||||
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBar">
|
||||
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
|
||||
<input
|
||||
type="text"
|
||||
class="searchInput"
|
||||
ng-model="$ctrl.state.textFilter"
|
||||
ng-change="$ctrl.onTextFilterChange()"
|
||||
placeholder="Search..."
|
||||
auto-focus
|
||||
ng-model-options="{ debounce: 300 }"
|
||||
/>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover nowrap-cells">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10%;">
|
||||
<a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
|
||||
<i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
|
||||
</a>
|
||||
</th>
|
||||
<th style="width: 45%;">
|
||||
<a ng-click="$ctrl.changeOrderBy('Name')">
|
||||
Ingress
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
</th>
|
||||
<th style="width: 45%;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
|
||||
ng-class="{ active: item.Checked }"
|
||||
ng-style="{ background: item.Highlighted ? '#d5e8f3' : '' }"
|
||||
ng-click="$ctrl.expandItem(item, !item.Expanded)"
|
||||
pagination-id="$ctrl.tableKey"
|
||||
>
|
||||
<td>
|
||||
<a ng-if="$ctrl.itemCanExpand(item)">
|
||||
<i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td colspan="3">{{ item.Name }}</td>
|
||||
</tr>
|
||||
<tr dir-paginate-end ng-show="item.Expanded" ng-repeat="path in item.Paths" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
|
||||
<td colspan="3">
|
||||
<a style="margin-left: 25px;" ng-href="http://{{ path.Host ? path.Host : path.IP }}{{ path.Path }}" target="_blank">
|
||||
{{ path.Host ? path.Host : path.IP }}{{ path.Path }}
|
||||
</a>
|
||||
<i class="fas fa-long-arrow-alt-right" style="margin: 2px;"></i>
|
||||
<a ui-sref="kubernetes.applications.application({ name: path.ApplicationName, namespace: item.Namespace })">{{ path.ApplicationName }}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="!$ctrl.dataset">
|
||||
<td colspan="4" class="text-center text-muted">Loading...</td>
|
||||
</tr>
|
||||
<tr ng-if="$ctrl.state.filteredDataSet.length === 0">
|
||||
<td colspan="4" class="text-center text-muted">No ingresses available.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="footer" ng-if="$ctrl.dataset">
|
||||
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
|
||||
<div class="paginationControls">
|
||||
<form class="form-inline">
|
||||
<span class="limitSelector">
|
||||
<span style="margin-right: 5px;">
|
||||
Items per page
|
||||
</span>
|
||||
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
|
||||
<option value="0">All</option>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</span>
|
||||
<dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
|
|
@ -28,16 +28,16 @@
|
|||
<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>
|
||||
<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()">
|
||||
<div class="form-group" ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable && !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 && ctrl.isAdmin && ctrl.isEditable">
|
||||
<div ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable">
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Resource limits
|
||||
</div>
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
<!-- !cpu-limit-input -->
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="ctrl.formValues.hasQuota">
|
||||
<div ng-if="ctrl.formValues.HasQuota">
|
||||
<kubernetes-resource-reservation
|
||||
ng-if="ctrl.pool.Quota"
|
||||
description="Resource reservation represents the total amount of resource assigned to all the applications deployed inside this resource pool."
|
||||
|
|
@ -120,6 +120,46 @@
|
|||
>
|
||||
</kubernetes-resource-reservation>
|
||||
</div>
|
||||
<div ng-if="ctrl.isAdmin && ctrl.isEditable">
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Ingresses
|
||||
</div>
|
||||
<div class="form-group" ng-if="!ctrl.state.canUseIngress">
|
||||
<div class="col-sm-12 small text-muted">
|
||||
The ingress feature must be enabled in the
|
||||
<a ui-sref="portainer.endpoints.endpoint.kubernetesConfig({id: ctrl.endpoint.Id})">endpoint configuration view</a> to be able to register ingresses inside
|
||||
this resource pool.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-sm-12" ng-if="ctrl.state.canUseIngress">
|
||||
<table class="table" style="table-layout: fixed;">
|
||||
<tbody>
|
||||
<tr class="text-muted">
|
||||
<td style="width: 33%; border-top: 0px;">Ingress controller</td>
|
||||
<td style="width: 66%; border-top: 0px;">
|
||||
Hostname
|
||||
<portainer-tooltip
|
||||
position="bottom"
|
||||
message="Optional hostname associated to the ingress inside this resource pool. Users will be able to expose and access their applications over the ingress via this hostname or via IP address directly if not defined."
|
||||
>
|
||||
</portainer-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat="class in ctrl.formValues.IngressClasses">
|
||||
<td style="width: 33%;">
|
||||
<div style="margin: 5px;">
|
||||
<label class="switch" style="margin-right: 10px;"> <input type="checkbox" ng-model="class.Selected" /><i></i> </label>
|
||||
{{ class.Name }}
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 66%;">
|
||||
<input class="form-control" ng-model="class.Host" placeholder="host.com" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- actions -->
|
||||
<div ng-if="ctrl.isAdmin && ctrl.isEditable" class="col-sm-12 form-section-title">
|
||||
Actions
|
||||
|
|
@ -129,7 +169,7 @@
|
|||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
ng-disabled="!resourcePoolEditForm.$valid || ctrl.state.actionInProgress || (ctrl.formValues.hasQuota && !ctrl.isQuotaValid())"
|
||||
ng-disabled="!resourcePoolEditForm.$valid || ctrl.state.actionInProgress || (ctrl.formValues.HasQuota && !ctrl.isQuotaValid())"
|
||||
ng-click="ctrl.updateResourcePool()"
|
||||
button-spinner="ctrl.state.actionInProgress"
|
||||
>
|
||||
|
|
@ -186,4 +226,19 @@
|
|||
</kubernetes-resource-pool-applications-datatable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-if="ctrl.ingresses && ctrl.ingresses.length > 0">
|
||||
<div class="col-sm-12">
|
||||
<kubernetes-resource-pool-ingresses-datatable
|
||||
dataset="ctrl.ingresses"
|
||||
table-key="kubernetes.resourcepool.ingresses"
|
||||
order-by="Name"
|
||||
refresh-callback="ctrl.getIngresses"
|
||||
loading="ctrl.state.ingressesLoading"
|
||||
title-text="Ingress routes and applications"
|
||||
title-icon="fa-route"
|
||||
>
|
||||
</kubernetes-resource-pool-ingresses-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import angular from 'angular';
|
||||
import _ from 'lodash-es';
|
||||
import * as _ from 'lodash-es';
|
||||
import filesizeParser from 'filesize-parser';
|
||||
import { KubernetesResourceQuota, KubernetesResourceQuotaDefaults } from 'Kubernetes/models/resource-quota/models';
|
||||
import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
|
||||
import KubernetesEventHelper from 'Kubernetes/helpers/eventHelper';
|
||||
import { KubernetesResourcePoolFormValues, KubernetesResourcePoolIngressClassFormValue } from 'Kubernetes/models/resource-pool/formValues';
|
||||
|
||||
class KubernetesResourcePoolController {
|
||||
/* @ngInject */
|
||||
|
|
@ -13,6 +14,8 @@ class KubernetesResourcePoolController {
|
|||
Authentication,
|
||||
Notifications,
|
||||
LocalStorage,
|
||||
EndpointProvider,
|
||||
ModalService,
|
||||
KubernetesNodeService,
|
||||
KubernetesResourceQuotaService,
|
||||
KubernetesResourcePoolService,
|
||||
|
|
@ -20,13 +23,15 @@ class KubernetesResourcePoolController {
|
|||
KubernetesPodService,
|
||||
KubernetesApplicationService,
|
||||
KubernetesNamespaceHelper,
|
||||
ModalService
|
||||
KubernetesIngressService
|
||||
) {
|
||||
this.$async = $async;
|
||||
this.$state = $state;
|
||||
this.Notifications = Notifications;
|
||||
this.Authentication = Authentication;
|
||||
this.LocalStorage = LocalStorage;
|
||||
this.EndpointProvider = EndpointProvider;
|
||||
this.ModalService = ModalService;
|
||||
|
||||
this.KubernetesNodeService = KubernetesNodeService;
|
||||
this.KubernetesResourceQuotaService = KubernetesResourceQuotaService;
|
||||
|
|
@ -35,14 +40,17 @@ class KubernetesResourcePoolController {
|
|||
this.KubernetesPodService = KubernetesPodService;
|
||||
this.KubernetesApplicationService = KubernetesApplicationService;
|
||||
this.KubernetesNamespaceHelper = KubernetesNamespaceHelper;
|
||||
this.ModalService = ModalService;
|
||||
this.KubernetesIngressService = KubernetesIngressService;
|
||||
|
||||
this.onInit = this.onInit.bind(this);
|
||||
this.createResourceQuotaAsync = this.createResourceQuotaAsync.bind(this);
|
||||
this.updateResourcePoolAsync = this.updateResourcePoolAsync.bind(this);
|
||||
this.getEvents = this.getEvents.bind(this);
|
||||
this.getEventsAsync = this.getEventsAsync.bind(this);
|
||||
this.getApplications = this.getApplications.bind(this);
|
||||
this.getApplicationsAsync = this.getApplicationsAsync.bind(this);
|
||||
this.getIngresses = this.getIngresses.bind(this);
|
||||
this.getIngressesAsync = this.getIngressesAsync.bind(this);
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
|
|
@ -83,8 +91,8 @@ class KubernetesResourcePoolController {
|
|||
await this.KubernetesResourceQuotaService.create(quota);
|
||||
}
|
||||
|
||||
hasResourceQuotaBeenReduce() {
|
||||
if (this.formValues.hasQuota) {
|
||||
hasResourceQuotaBeenReduced() {
|
||||
if (this.formValues.HasQuota && this.oldQuota) {
|
||||
const cpuLimit = this.formValues.CpuLimit;
|
||||
const memoryLimit = KubernetesResourceReservationHelper.bytesValue(this.formValues.MemoryLimit);
|
||||
if (cpuLimit < this.oldQuota.CpuLimit || memoryLimit < this.oldQuota.MemoryLimit) {
|
||||
|
|
@ -104,7 +112,7 @@ class KubernetesResourcePoolController {
|
|||
const owner = this.pool.Namespace.ResourcePoolOwner;
|
||||
const quota = this.pool.Quota;
|
||||
|
||||
if (this.formValues.hasQuota) {
|
||||
if (this.formValues.HasQuota) {
|
||||
if (quota) {
|
||||
quota.CpuLimit = cpuLimit;
|
||||
quota.MemoryLimit = memoryLimit;
|
||||
|
|
@ -115,6 +123,25 @@ class KubernetesResourcePoolController {
|
|||
} else if (quota) {
|
||||
await this.KubernetesResourceQuotaService.delete(quota);
|
||||
}
|
||||
|
||||
const promises = _.map(this.formValues.IngressClasses, (c) => {
|
||||
c.Namespace = namespace;
|
||||
const original = _.find(this.savedIngressClasses, { Name: c.Name });
|
||||
if (c.WasSelected === false && c.Selected === true) {
|
||||
return this.KubernetesIngressService.create(c);
|
||||
} else if (c.WasSelected === true && c.Selected === false) {
|
||||
return this.KubernetesIngressService.delete(c);
|
||||
} else if (c.Selected === true && original && original.Host !== c.Host) {
|
||||
const oldIngress = _.find(this.ingresses, { Name: c.Name });
|
||||
const newIngress = angular.copy(oldIngress);
|
||||
newIngress.PreviousHost = original.Host;
|
||||
newIngress.Host = c.Host;
|
||||
|
||||
return this.KubernetesIngressService.patch(oldIngress, newIngress);
|
||||
}
|
||||
});
|
||||
await Promise.all(promises);
|
||||
|
||||
this.Notifications.success('Resource pool successfully updated', this.pool.Namespace.Name);
|
||||
this.$state.reload();
|
||||
} catch (err) {
|
||||
|
|
@ -125,15 +152,25 @@ class KubernetesResourcePoolController {
|
|||
}
|
||||
|
||||
updateResourcePool() {
|
||||
if (this.hasResourceQuotaBeenReduce()) {
|
||||
this.ModalService.confirmUpdate(
|
||||
'Reducing the quota assigned to an "in-use" resource pool may have unintended consequences, including preventing running applications from functioning correctly and potentially even blocking them from running at all.',
|
||||
(confirmed) => {
|
||||
if (confirmed) {
|
||||
return this.$async(this.updateResourcePoolAsync);
|
||||
}
|
||||
const willBeDeleted = _.filter(this.formValues.IngressClasses, { WasSelected: true, Selected: false });
|
||||
const warnings = {
|
||||
quota: this.hasResourceQuotaBeenReduced(),
|
||||
ingress: willBeDeleted.length !== 0,
|
||||
};
|
||||
|
||||
if (warnings.quota || warnings.ingress) {
|
||||
const messages = {
|
||||
quota:
|
||||
'Reducing the quota assigned to an "in-use" resource pool may have unintended consequences, including preventing running applications from functioning correctly and potentially even blocking them from running at all.',
|
||||
ingress: 'Deactivating ingresses may cause applications to be unaccessible. All ingress configurations from affected applications will be removed.',
|
||||
};
|
||||
const displayedMessage = `${warnings.quota ? messages.quota : ''}${warnings.quota && warnings.ingress ? '<br/><br/>' : ''}
|
||||
${warnings.ingress ? messages.ingress : ''}<br/><br/>Do you wish to continue?`;
|
||||
this.ModalService.confirmUpdate(displayedMessage, (confirmed) => {
|
||||
if (confirmed) {
|
||||
return this.$async(this.updateResourcePoolAsync);
|
||||
}
|
||||
);
|
||||
});
|
||||
} else {
|
||||
return this.$async(this.updateResourcePoolAsync);
|
||||
}
|
||||
|
|
@ -180,16 +217,36 @@ class KubernetesResourcePoolController {
|
|||
return this.$async(this.getApplicationsAsync);
|
||||
}
|
||||
|
||||
async getIngressesAsync() {
|
||||
this.state.ingressesLoading = true;
|
||||
try {
|
||||
const namespace = this.pool.Namespace.Name;
|
||||
this.ingresses = await this.KubernetesIngressService.get(namespace);
|
||||
_.forEach(this.ingresses, (ing) => {
|
||||
ing.Namespace = namespace;
|
||||
_.forEach(ing.Paths, (path) => {
|
||||
const application = _.find(this.applications, { ServiceName: path.ServiceName });
|
||||
path.ApplicationName = application && application.Name ? application.Name : '-';
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve ingresses.');
|
||||
} finally {
|
||||
this.state.ingressesLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
getIngresses() {
|
||||
return this.$async(this.getIngressesAsync);
|
||||
}
|
||||
|
||||
async onInit() {
|
||||
try {
|
||||
const endpoint = this.EndpointProvider.currentEndpoint();
|
||||
this.endpoint = endpoint;
|
||||
this.isAdmin = this.Authentication.isAdmin();
|
||||
this.defaults = KubernetesResourceQuotaDefaults;
|
||||
|
||||
this.formValues = {
|
||||
MemoryLimit: this.defaults.MemoryLimit,
|
||||
CpuLimit: this.defaults.CpuLimit,
|
||||
hasQuota: false,
|
||||
};
|
||||
this.formValues = new KubernetesResourcePoolFormValues(this.defaults);
|
||||
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
|
|
@ -204,8 +261,10 @@ class KubernetesResourcePoolController {
|
|||
showEditorTab: false,
|
||||
eventsLoading: true,
|
||||
applicationsLoading: true,
|
||||
ingressesLoading: true,
|
||||
viewReady: false,
|
||||
eventWarningCount: 0,
|
||||
canUseIngress: endpoint.Kubernetes.Configuration.UseIngress,
|
||||
};
|
||||
|
||||
this.state.activeTab = this.LocalStorage.getActiveTab('resourcePool');
|
||||
|
|
@ -225,7 +284,7 @@ class KubernetesResourcePoolController {
|
|||
const quota = pool.Quota;
|
||||
if (quota) {
|
||||
this.oldQuota = angular.copy(quota);
|
||||
this.formValues.hasQuota = true;
|
||||
this.formValues.HasQuota = true;
|
||||
this.formValues.CpuLimit = quota.CpuLimit;
|
||||
this.formValues.MemoryLimit = KubernetesResourceReservationHelper.megaBytesValue(quota.MemoryLimit);
|
||||
|
||||
|
|
@ -240,6 +299,22 @@ class KubernetesResourcePoolController {
|
|||
|
||||
await this.getEvents();
|
||||
await this.getApplications();
|
||||
|
||||
if (this.state.canUseIngress) {
|
||||
await this.getIngresses();
|
||||
const ingressClasses = endpoint.Kubernetes.Configuration.IngressClasses;
|
||||
this.formValues.IngressClasses = _.map(ingressClasses, (item) => {
|
||||
const iClass = new KubernetesResourcePoolIngressClassFormValue(item);
|
||||
const matchingIngress = _.find(this.ingresses, { Name: iClass.Name });
|
||||
if (matchingIngress) {
|
||||
iClass.Selected = true;
|
||||
iClass.WasSelected = true;
|
||||
iClass.Host = matchingIngress.Host;
|
||||
}
|
||||
return iClass;
|
||||
});
|
||||
this.savedIngressClasses = angular.copy(this.formValues.IngressClasses);
|
||||
}
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to load view data');
|
||||
} finally {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue