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

refactor(app): placement form section [EE-6386] (#10818)
Some checks are pending
ci / build_images (map[arch:amd64 platform:linux]) (push) Waiting to run
Details
ci / build_images (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
Details
ci / build_images (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
Details
ci / build_images (map[arch:arm64 platform:linux]) (push) Waiting to run
Details
ci / build_manifests (push) Blocked by required conditions
Details
/ triage (push) Waiting to run
Details
Lint / Run linters (push) Waiting to run
Details
Test / test-client (push) Waiting to run
Details
Test / test-server (map[arch:amd64 platform:linux]) (push) Waiting to run
Details
Test / test-server (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
Details
Test / test-server (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
Details
Test / test-server (map[arch:arm64 platform:linux]) (push) Waiting to run
Details

Browse source 
Co-authored-by: testa113 <testa113>
This commit is contained in:
Ali 2024-01-03 11:00:50 +13:00 • committed by GitHub
parent 2d77e71085
commit 9fc7187e24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 349 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

103
app/kubernetes/views/applications/create/createApplication.html
View file

@ -475,105 +475,16 @@
></auto-scaling-form-section>
</div>
<!-- #endregion -->
<div class="mt-4 mb-2" ng-if="ctrl.formValues.DeploymentType === ctrl.ApplicationDeploymentTypes.REPLICATED">
<div class="col-sm-12 control-label !mb-2 !p-0 text-left"> Placement preferences and constraints </div>
<!-- #region PLACEMENTS -->
<div class="form-group">
<div class="col-sm-12 small text-muted vertical-center !mb-2" ng-if="ctrl.formValues.Placements.length > 0">
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
<div> Deploy this application on nodes that respect <b>ALL</b> of the following placement rules. Placement rules are based on node labels. </div>
</div>
<div class="col-sm-12 form-inline">
<div ng-repeat-start="placement in ctrl.formValues.Placements" class="!mb-2">
<div class="col-sm-5 input-group mr-2" ng-class="{ striked: placement.NeedsDeletion }">
<select
class="form-control !rounded"
ng-model="placement.Label"
ng-options="label as (label.Key | kubernetesNodeLabelHumanReadbleText) for label in ctrl.nodesLabels"
ng-change="ctrl.onChangePlacementLabel($index)"
ng-disabled="ctrl.isEditAndNotNewPlacement($index)"
data-cy="k8sAppCreate-placementLabel_{{ $index }}"
>
</select>
</div>
<div class="col-sm-5 input-group mr-2" ng-class="{ striked: placement.NeedsDeletion }">
<select
class="form-control !rounded"
ng-model="placement.Value"
ng-options="value for value in placement.Label.Values"
ng-disabled="ctrl.isEditAndNotNewPlacement($index)"
data-cy="k8sAppCreate-placementName_{{ $index }}"
>
</select>
</div>
<div class="col-sm-1 input-group">
<button
ng-if="!placement.NeedsDeletion"
class="btn btn-md btn-dangerlight btn-only-icon !ml-0"
type="button"
ng-click="ctrl.removePlacement($index)"
data-cy="k8sAppCreate-deletePlacementButton"
>
<pr-icon icon="'trash-2'" size="'md'"></pr-icon>
</button>
<button
ng-if="placement.NeedsDeletion"
class="btn btn-sm btn-light btn-only-icon !ml-0"
type="button"
ng-click="ctrl.restorePlacement($index)"
data-cy="k8sAppCreate-restorePlacementButton"
>
<pr-icon icon="'rotate-cw'" size="'md'"></pr-icon>
</button>
</div>
</div>
<div ng-repeat-end ng-show="ctrl.state.duplicates.placements.refs[$index] !== undefined">
<div class="col-sm-5 input-group">
<div class="small text-warning" ng-if="ctrl.state.duplicates.placements.refs[$index] !== undefined">
<p class="vertical-center" ng-if="ctrl.state.duplicates.placements.refs[$index] !== undefined">
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This label is already defined.
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<span class="btn btn-primary btn-sm btn btn-sm btn-light mb-2 !ml-0 mt-2" ng-click="ctrl.addPlacement()">
<pr-icon icon="'plus'" size="'sm'"></pr-icon> Add rule
</span>
</div>
</div>
<div ng-if="ctrl.showPlacementPolicySection()">
<div class="form-group">
<div class="col-sm-12">
<label class="control-label text-left">Placement policy</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 small text-muted"> Specify the policy associated to the placement rules. </div>
</div>
<box-selector
ng-if="ctrl.formValues.Placements.length"
options="ctrl.placementOptions"
slim="true"
value="ctrl.formValues.PlacementType"
on-change="(ctrl.onChangePlacementType)"
radio-name="'placementType'"
></box-selector>
</div>
</div>
<!-- #endregion -->
</div>
<placement-form-section
ng-if="ctrl.formValues.DeploymentType === ctrl.ApplicationDeploymentTypes.REPLICATED"
values="{placements: ctrl.formValues.Placements, placementType: ctrl.formValues.PlacementType}"
on-change="(ctrl.onChangePlacements)"
></placement-form-section>
<!-- kubernetes services options -->
<div ng-if="ctrl.formValues.ResourcePool">
<div class="mb-8" ng-if="ctrl.formValues.ResourcePool">
<kube-services-form
on-change="(ctrl.onServicesChange)"
values="ctrl.formValues.Services"

68
app/kubernetes/views/applications/create/createApplicationController.js
View file

@ -13,14 +13,12 @@ import {
KubernetesApplicationPublishingTypes,
KubernetesApplicationQuotaDefaults,
KubernetesApplicationTypes,
KubernetesApplicationPlacementTypes,
KubernetesDeploymentTypes,
} from 'Kubernetes/models/application/models';
import {
KubernetesApplicationEnvironmentVariableFormValue,
KubernetesApplicationFormValues,
KubernetesApplicationPersistedFolderFormValue,
KubernetesApplicationPlacementFormValue,
KubernetesFormValidationReferences,
} from 'Kubernetes/models/application/formValues';
import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHelper';
@ -36,7 +34,6 @@ import { confirmUpdateAppIngress } from '@/react/kubernetes/applications/CreateV
import { confirm, confirmUpdate, confirmWebEditorDiscard } from '@@/modals/confirm';
import { buildConfirmButton } from '@@/modals/utils';
import { ModalType } from '@@/modals';
import { placementOptions } from '@/react/kubernetes/applications/CreateView/placementTypes';
class KubernetesCreateApplicationController {
/* #region CONSTRUCTOR */
@ -80,13 +77,10 @@ class KubernetesCreateApplicationController {
this.ApplicationDeploymentTypes = KubernetesApplicationDeploymentTypes;
this.ApplicationDataAccessPolicies = KubernetesApplicationDataAccessPolicies;
this.ApplicationPublishingTypes = KubernetesApplicationPublishingTypes;
this.ApplicationPlacementTypes = KubernetesApplicationPlacementTypes;
this.ApplicationTypes = KubernetesApplicationTypes;
this.ServiceTypes = KubernetesServiceTypes;
this.KubernetesDeploymentTypes = KubernetesDeploymentTypes;
this.placementOptions = placementOptions;
this.state = {
appType: this.KubernetesDeploymentTypes.APPLICATION_FORM,
updateWebEditorInProgress: false,
@ -148,7 +142,6 @@ class KubernetesCreateApplicationController {
this.onDataAccessPolicyChange = this.onDataAccessPolicyChange.bind(this);
this.onChangeDeploymentType = this.onChangeDeploymentType.bind(this);
this.supportGlobalDeployment = this.supportGlobalDeployment.bind(this);
this.onChangePlacementType = this.onChangePlacementType.bind(this);
this.onServicesChange = this.onServicesChange.bind(this);
this.onEnvironmentVariableChange = this.onEnvironmentVariableChange.bind(this);
this.onConfigMapsChange = this.onConfigMapsChange.bind(this);
@ -157,12 +150,14 @@ class KubernetesCreateApplicationController {
this.onChangeResourceReservation = this.onChangeResourceReservation.bind(this);
this.onChangeReplicaCount = this.onChangeReplicaCount.bind(this);
this.onAutoScaleChange = this.onAutoScaleChange.bind(this);
this.onChangePlacements = this.onChangePlacements.bind(this);
}
/* #endregion */
onChangePlacementType(value) {
this.$scope.$evalAsync(() => {
this.formValues.PlacementType = value;
onChangePlacements(values) {
return this.$async(async () => {
this.formValues.Placements = values.placements;
this.formValues.PlacementType = values.placementType;
});
}
@ -410,50 +405,6 @@ class KubernetesCreateApplicationController {
}
/* #endregion */
/* #region PLACEMENT UI MANAGEMENT */
addPlacement() {
const placement = new KubernetesApplicationPlacementFormValue();
const label = this.nodesLabels[0];
placement.Label = label;
placement.Value = label.Values[0];
this.formValues.Placements.push(placement);
this.onChangePlacement();
}
restorePlacement(index) {
this.formValues.Placements[index].NeedsDeletion = false;
this.onChangePlacement();
}
removePlacement(index) {
if (this.state.isEdit && !this.formValues.Placements[index].IsNew) {
this.formValues.Placements[index].NeedsDeletion = true;
} else {
this.formValues.Placements.splice(index, 1);
}
this.onChangePlacement();
}
// call all validation functions when a placement is added/removed/restored
onChangePlacement() {
this.onChangePlacementLabelValidate();
}
onChangePlacementLabel(index) {
this.formValues.Placements[index].Value = this.formValues.Placements[index].Label.Values[0];
this.onChangePlacementLabelValidate();
}
onChangePlacementLabelValidate() {
const state = this.state.duplicates.placements;
const source = _.map(this.formValues.Placements, (p) => (p.NeedsDeletion ? undefined : p.Label.Key));
const duplicates = KubernetesFormValidationHelper.getDuplicates(source);
state.refs = duplicates;
state.hasRefs = Object.keys(duplicates).length > 0;
}
/* #endregion */
/* #region SERVICES UI MANAGEMENT */
onServicesChange(services) {
return this.$async(async () => {
@ -675,15 +626,6 @@ class KubernetesCreateApplicationController {
}
/* #endregion */
isEditAndNotNewPlacement(index) {
return this.state.isEdit && !this.formValues.Placements[index].IsNew;
}
showPlacementPolicySection() {
const placements = _.filter(this.formValues.Placements, { NeedsDeletion: false });
return placements.length !== 0;
}
isNonScalable() {
const scalable = this.supportScalableReplicaDeployment();
const global = this.supportGlobalDeployment();