1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 05:45:22 +02:00

refactor(app): app service form to react [EE-5415] (#8994)

This commit is contained in:
Ali 2023-05-31 17:58:41 +12:00 committed by GitHub
parent 2d05103fed
commit 69776b4863
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 1224 additions and 538 deletions

View file

@ -1144,13 +1144,15 @@
</div>
<!-- kubernetes services options -->
<kube-services-view
form-values="ctrl.formValues"
is-edit="ctrl.state.isEdit"
namespaces="ctrl.allNamespaces"
configurations="ctrl.configurations"
loadbalancer-enabled="ctrl.publishViaLoadBalancerEnabled()"
></kube-services-view>
<kube-services-form
on-change="(ctrl.onServicesChange)"
values="ctrl.formValues.Services"
load-balancer-enabled="ctrl.publishViaLoadBalancerEnabled()"
app-name="ctrl.formValues.Name"
selector="ctrl.formValues.Selector"
validation-context="{nodePortServices: ctrl.state.nodePortServices}"
is-edit-mode="ctrl.state.isEdit"
></kube-services-form>
<!-- kubernetes services options -->
<!-- summary -->
@ -1192,19 +1194,22 @@
</div>
</div>
<!-- kubernetes services options -->
<kube-services-view
namespaces="ctrl.allNamespaces"
form-values="ctrl.formValues"
is-edit="ctrl.state.isEdit"
loadbalancer-enabled="ctrl.publishViaLoadBalancerEnabled()"
></kube-services-view>
<kube-services-form
on-change="(ctrl.onServicesChange)"
values="ctrl.formValues.Services"
load-balancer-enabled="ctrl.publishViaLoadBalancerEnabled()"
app-name="ctrl.formValues.Name"
selector="ctrl.formValues.Selector"
validation-context="{nodePortServices: ctrl.state.nodePortServices}"
is-edit-mode="ctrl.state.isEdit"
></kube-services-form>
<!-- kubernetes services options -->
</div>
<!-- kubernetes summary for external application -->
<kubernetes-summary-view ng-if="ctrl.isExternalApplication()" form-values="ctrl.formValues" old-form-values="ctrl.savedFormValues"></kubernetes-summary-view>
<!-- kubernetes summary for external application -->
<div class="col-sm-12 form-section-title" ng-if="ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.GIT" ng-hide="ctrl.stack.IsComposeFormat"> Actions </div>
<div class="col-sm-12 form-section-title !mt-6" ng-if="ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.GIT" ng-hide="ctrl.stack.IsComposeFormat"> Actions </div>
<!-- #region ACTIONS -->
<div class="form-group" ng-hide="ctrl.stack.IsComposeFormat">
<div class="col-sm-12">

View file

@ -3,6 +3,7 @@ import _ from 'lodash-es';
import filesizeParser from 'filesize-parser';
import * as JsonPatch from 'fast-json-patch';
import { RegistryTypes } from '@/portainer/models/registryTypes';
import { getServices } from '@/react/kubernetes/networks/services/service';
import {
KubernetesApplicationDataAccessPolicies,
@ -133,6 +134,7 @@ class KubernetesCreateApplicationController {
isEdit: this.$state.params.namespace && this.$state.params.name,
persistedFoldersUseExistingVolumes: false,
pullImageValidity: false,
nodePortServices: [],
};
this.isAdmin = this.Authentication.isAdmin();
@ -156,6 +158,7 @@ class KubernetesCreateApplicationController {
this.onChangeDeploymentType = this.onChangeDeploymentType.bind(this);
this.supportGlobalDeployment = this.supportGlobalDeployment.bind(this);
this.onChangePlacementType = this.onChangePlacementType.bind(this);
this.onServicesChange = this.onServicesChange.bind(this);
}
/* #endregion */
@ -453,6 +456,12 @@ class KubernetesCreateApplicationController {
/* #endregion */
/* #region PUBLISHED PORTS UI MANAGEMENT */
onServicesChange(services) {
return this.$async(async () => {
this.formValues.Services = services;
});
}
onServicePublishChange() {
// enable publishing with no previous ports exposed
if (this.formValues.IsPublishingService && !this.formValues.PublishedPorts.length) {
@ -1295,6 +1304,14 @@ class KubernetesCreateApplicationController {
} finally {
this.state.viewReady = true;
}
// get all nodeport services in the cluster, to validate unique nodeports in the form
// this is below the try catch, to not block the page rendering
const allSettledServices = await Promise.allSettled(this.resourcePools.map((namespace) => getServices(this.endpoint.Id, namespace.Namespace.Name)));
const allServices = allSettledServices
.filter((settledService) => settledService.status === 'fulfilled' && settledService.value)
.map((fulfilledService) => fulfilledService.value)
.flat();
this.state.nodePortServices = allServices.filter((service) => service.Type === 'NodePort');
});
}