1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00

feat(application): Add the ability to use existing volumes when creating an application (#4044)

* feat(applications): update UI to use existing volumes

* feat(application): Add the ability to use existing volumes when creating an application

* feat(application): Existing persisted folders should default to associated volumes

* feat(application): add form validation to existing volume

* feat(application): remove the ability to use an existing volume with statefulset application

* feat(k8s/applications): minor UI update

* feat(k8s/application): minor UI update

* feat(volume): allow to increase volume size and few other things

* feat(volumes): add the ability to allow volume expansion

* fix(storage): fix the storage patch request

* fix(k8s/applications): remove conflict leftover

* feat(k8s/configure): minor UI update

* feat(k8s/volume): minor UI update

* fix(storage): change few things

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>
This commit is contained in:
Maxime Bajeux 2020-08-07 06:40:24 +02:00 committed by GitHub
parent b9c2bf487b
commit 61f97469ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 436 additions and 40 deletions

View file

@ -41,14 +41,66 @@
<td>Provisioner</td>
<td>{{ ctrl.volume.PersistentVolumeClaim.StorageClass.Provisioner ? ctrl.volume.PersistentVolumeClaim.StorageClass.Provisioner : '-' }}</td>
</tr>
<tr>
<td>Size</td>
<td>{{ ctrl.volume.PersistentVolumeClaim.Storage }}</td>
</tr>
<tr>
<td>Creation date</td>
<td>{{ ctrl.volume.PersistentVolumeClaim.CreationDate | getisodate }}</td>
</tr>
<tr>
<td>Size</td>
<td ng-if="!ctrl.state.increaseSize">
{{ ctrl.volume.PersistentVolumeClaim.Storage }}
<button
type="button"
class="btn btn-sm btn-primary"
ng-click="ctrl.state.increaseSize = true"
ng-if="ctrl.volume.PersistentVolumeClaim.StorageClass.AllowVolumeExpansion"
>Increase size</button
>
</td>
<td ng-if="ctrl.state.increaseSize">
<form name="kubernetesVolumeUpdateForm">
<div class="form-inline">
<div class="input-group input-group-sm">
<input
type="number"
class="form-control"
name="size"
ng-model="ctrl.state.volumeSize"
placeholder="20"
ng-min="0"
ng-change="ctrl.onChangeSize()"
required
/>
<span class="input-group-addon" style="padding: 0;">
<select
ng-model="ctrl.state.volumeSizeUnit"
ng-change="ctrl.onChangeSize()"
ng-options="unit for unit in ctrl.state.availableSizeUnits"
style="width: 100%; height: 100%;"
></select>
</span>
</div>
<button type="button" class="btn btn-sm btn-primary" ng-disabled="!ctrl.sizeIsValid()" ng-click="ctrl.updateVolume()">
Update size
</button>
<button type="button" class="btn btn-sm btn-default" ng-click="ctrl.state.increaseSize = false">
Cancel
</button>
</div>
<div class="form-inline">
<div class="small text-warning" style="margin-top: 5px;" ng-show="ctrl.state.volumeSizeError || kubernetesVolumeUpdateForm.size.$invalid">
<div ng-messages="kubernetesVolumeUpdateForm.size.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
<p ng-show="ctrl.state.volumeSizeError && !kubernetesVolumeUpdateForm.size.$invalid"
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> The new size must be greater than the actual size.</p
>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>

View file

@ -2,10 +2,23 @@ import angular from 'angular';
import _ from 'lodash-es';
import KubernetesVolumeHelper from 'Kubernetes/helpers/volumeHelper';
import KubernetesEventHelper from 'Kubernetes/helpers/eventHelper';
import filesizeParser from 'filesize-parser';
class KubernetesVolumeController {
/* @ngInject */
constructor($async, $state, Notifications, LocalStorage, KubernetesVolumeService, KubernetesEventService, KubernetesNamespaceHelper, KubernetesApplicationService) {
constructor(
$async,
$state,
Notifications,
LocalStorage,
KubernetesVolumeService,
KubernetesEventService,
KubernetesNamespaceHelper,
KubernetesApplicationService,
KubernetesPersistentVolumeClaimService,
ModalService,
KubernetesPodService
) {
this.$async = $async;
this.$state = $state;
this.Notifications = Notifications;
@ -15,10 +28,14 @@ class KubernetesVolumeController {
this.KubernetesEventService = KubernetesEventService;
this.KubernetesNamespaceHelper = KubernetesNamespaceHelper;
this.KubernetesApplicationService = KubernetesApplicationService;
this.KubernetesPersistentVolumeClaimService = KubernetesPersistentVolumeClaimService;
this.ModalService = ModalService;
this.KubernetesPodService = KubernetesPodService;
this.onInit = this.onInit.bind(this);
this.getVolume = this.getVolume.bind(this);
this.getVolumeAsync = this.getVolumeAsync.bind(this);
this.updateVolumeAsync = this.updateVolumeAsync.bind(this);
this.getEvents = this.getEvents.bind(this);
this.getEventsAsync = this.getEventsAsync.bind(this);
}
@ -44,9 +61,57 @@ class KubernetesVolumeController {
return KubernetesVolumeHelper.isUsed(this.volume);
}
onChangeSize() {
if (this.state.volumeSize) {
const size = filesizeParser(this.state.volumeSize + this.state.volumeSizeUnit);
if (this.state.oldVolumeSize > size) {
this.state.volumeSizeError = true;
} else {
this.volume.PersistentVolumeClaim.Storage = size;
this.state.volumeSizeError = false;
}
}
}
sizeIsValid() {
return !this.state.volumeSizeError && this.state.oldVolumeSize !== this.volume.PersistentVolumeClaim.Storage;
}
/**
* VOLUME
*/
async updateVolumeAsync(redeploy) {
try {
this.volume.PersistentVolumeClaim.Storage = this.state.volumeSize + this.state.volumeSizeUnit.charAt(0) + 'i';
await this.KubernetesPersistentVolumeClaimService.patch(this.oldVolume.PersistentVolumeClaim, this.volume.PersistentVolumeClaim);
this.Notifications.success('Volume successfully updated');
if (redeploy) {
const promises = _.flatten(
_.map(this.volume.Applications, (app) => {
return _.map(app.Pods, (item) => this.KubernetesPodService.delete(item));
})
);
await Promise.all(promises);
this.Notifications.success('Applications successfully redeployed');
}
this.$state.reload();
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to update volume.');
}
}
updateVolume() {
this.ModalService.confirmRedeploy(
'One or multiple applications are currently using this volume.</br> For the change to be taken into account these applications will need to be redeployed. Do you want us to reschedule it now?',
(redeploy) => {
return this.$async(this.updateVolumeAsync, redeploy);
}
);
}
async getVolumeAsync() {
try {
const [volume, applications] = await Promise.all([
@ -55,6 +120,10 @@ class KubernetesVolumeController {
]);
volume.Applications = KubernetesVolumeHelper.getUsingApplications(volume, applications);
this.volume = volume;
this.oldVolume = angular.copy(volume);
this.state.volumeSize = parseInt(volume.PersistentVolumeClaim.Storage.slice(0, -2));
this.state.volumeSizeUnit = volume.PersistentVolumeClaim.Storage.slice(-2);
this.state.oldVolumeSize = filesizeParser(volume.PersistentVolumeClaim.Storage);
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve volume');
}
@ -101,6 +170,11 @@ class KubernetesVolumeController {
namespace: this.$transition$.params().namespace,
name: this.$transition$.params().name,
eventWarningCount: 0,
availableSizeUnits: ['MB', 'GB', 'TB'],
increaseSize: false,
volumeSize: 0,
volumeSizeUnit: 'GB',
volumeSizeError: false,
};
this.state.activeTab = this.LocalStorage.getActiveTab('volume');