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

fix(slider): use and update react slider EE-4522 (#7987)

Browse source
This commit is contained in:
Ali 2022-11-04 14:12:53 +13:00 • committed by GitHub
parent f94147b07b
commit 9f3d5185b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 154 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/kubernetes/views/resource-pools/create/createResourcePool.html
View file

@ -93,17 +93,18 @@
<div class="form-group flex flex-row !mb-0">
<label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left"> Memory limit (MB) </label>
<div class="col-xs-6">
<slider
model="$ctrl.formValues.MemoryLimit"
floor="$ctrl.defaults.MemoryLimit"
ceil="$ctrl.state.sliderMaxMemory"
<por-slider
min="$ctrl.defaults.MemoryLimit"
max="$ctrl.state.sliderMaxMemory"
step="128"
ng-if="$ctrl.state.sliderMaxMemory"
value="$ctrl.formValues.MemoryLimit"
on-change="($ctrl.handleMemoryLimitChange)"
visible-tooltip="true"
data-cy="k8sNamespaceCreate-memoryLimitSlider"
>
</slider>
></por-slider>
</div>
<div class="col-sm-2 vertical-center">
<div class="col-sm-2 vertical-center pt-6">
<input
name="memory_limit"
type="number"
@ -138,16 +139,16 @@
<div class="form-group flex flex-row">
<label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left"> CPU limit </label>
<div class="col-xs-8">
<slider
model="$ctrl.formValues.CpuLimit"
floor="$ctrl.defaults.CpuLimit"
ceil="$ctrl.state.sliderMaxCpu"
<por-slider
min="$ctrl.defaults.CpuLimit"
max="$ctrl.state.sliderMaxCpu"
step="0.1"
precision="2"
ng-if="$ctrl.state.sliderMaxCpu"
value="$ctrl.formValues.CpuLimit"
on-change="($ctrl.handleCpuLimitChange)"
data-cy="k8sNamespaceCreate-cpuLimitSlider"
>
</slider>
visible-tooltip="true"
></por-slider>
</div>
</div>
<!-- !cpu-limit-input -->

14
app/kubernetes/views/resource-pools/create/createResourcePoolController.js
View file

@ -33,6 +33,8 @@ class KubernetesCreateResourcePoolController {
this.onToggleResourceQuota = this.onToggleResourceQuota.bind(this);
this.onChangeIngressControllerAvailability = this.onChangeIngressControllerAvailability.bind(this);
this.onRegistriesChange = this.onRegistriesChange.bind(this);
this.handleMemoryLimitChange = this.handleMemoryLimitChange.bind(this);
this.handleCpuLimitChange = this.handleCpuLimitChange.bind(this);
}
/* #endregion */
@ -101,6 +103,18 @@ class KubernetesCreateResourcePoolController {
}
}
handleMemoryLimitChange(memoryLimit) {
return this.$async(async () => {
this.formValues.MemoryLimit = memoryLimit;
});
}
handleCpuLimitChange(cpuLimit) {
return this.$async(async () => {
this.formValues.CpuLimit = cpuLimit;
});
}
/* #region CREATE NAMESPACE */
createResourcePool() {
return this.$async(async () => {

30
app/kubernetes/views/resource-pools/edit/resourcePool.html
View file

@ -80,15 +80,18 @@
<div class="form-group flex">
<label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Memory limit (MB) </label>
<div class="col-sm-6">
<slider
model="ctrl.formValues.MemoryLimit"
floor="ctrl.ResourceQuotaDefaults.MemoryLimit"
ceil="ctrl.state.sliderMaxMemory"
<por-slider
min="ctrl.ResourceQuotaDefaults.MemoryLimit"
max="ctrl.state.sliderMaxMemory"
step="128"
ng-if="ctrl.state.sliderMaxMemory"
></slider>
value="ctrl.formValues.MemoryLimit"
on-change="(ctrl.handleMemoryLimitChange)"
visible-tooltip="true"
data-cy="k8sNamespaceEdit-memoryLimitSlider"
></por-slider>
</div>
<div class="col-sm-2 vertical-center">
<div class="col-sm-2 vertical-center pt-6">
<input
name="memory_limit"
type="number"
@ -97,6 +100,7 @@
class="form-control"
ng-model="ctrl.formValues.MemoryLimit"
id="memory-limit"
data-cy="k8sNamespaceEdit-memoryLimitInput"
required
/>
</div>
@ -117,14 +121,16 @@
<div class="form-group">
<label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> CPU limit </label>
<div class="col-sm-8">
<slider
model="ctrl.formValues.CpuLimit"
floor="ctrl.ResourceQuotaDefaults.CpuLimit"
ceil="ctrl.state.sliderMaxCpu"
<por-slider
min="ctrl.ResourceQuotaDefaults.CpuLimit"
max="ctrl.state.sliderMaxCpu"
step="0.1"
precision="2"
ng-if="ctrl.state.sliderMaxCpu"
></slider>
value="ctrl.formValues.CpuLimit"
on-change="(ctrl.handleCpuLimitChange)"
data-cy="k8sNamespaceEdit-cpuLimitSlider"
visible-tooltip="true"
></por-slider>
</div>
</div>
<!-- !cpu-limit-input -->

14
app/kubernetes/views/resource-pools/edit/resourcePoolController.js
View file

@ -69,6 +69,8 @@ class KubernetesResourcePoolController {
this.onToggleStorageQuota = this.onToggleStorageQuota.bind(this);
this.onChangeIngressControllerAvailability = this.onChangeIngressControllerAvailability.bind(this);
this.onRegistriesChange = this.onRegistriesChange.bind(this);
this.handleMemoryLimitChange = this.handleMemoryLimitChange.bind(this);
this.handleCpuLimitChange = this.handleCpuLimitChange.bind(this);
}
/* #endregion */
@ -122,6 +124,18 @@ class KubernetesResourcePoolController {
}
}
handleMemoryLimitChange(memoryLimit) {
return this.$async(async () => {
this.formValues.MemoryLimit = memoryLimit;
});
}
handleCpuLimitChange(cpuLimit) {
return this.$async(async () => {
this.formValues.CpuLimit = cpuLimit;
});
}
showEditor() {
this.state.showEditorTab = true;
this.selectTab(2);