dashboard: use native slider element for app memory and cpu
This commit is contained in:
Johannes Zellner
@@ -995,12 +995,11 @@
|
||||
<form role="form" name="resourcesForm" ng-submit="resources.submitMemoryLimit()" autocomplete="off">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="memoryLimit">{{ 'app.resources.memory.title' | tr }} <sup><a ng-href="https://docs.cloudron.io/apps/#memory-limit" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> : <b>{{ resources.memoryLimit | prettyBinarySize:'Default (256 MiB)' }}</b></label>
|
||||
<div style="padding: 0 10px;">
|
||||
<slider id="memoryLimit" ng-model="resources.memoryLimit" step="134217728" tooltip="hide" ticks="resources.memoryTicks" ticks-snap-bounds="67108864"></slider>
|
||||
</div>
|
||||
<input type="range" id="memoryLimit" ng-model="resources.memoryLimit" step="134217728" min="{{ resources.memoryTicks[0] }}" max="{{ resources.memoryTicks[resources.memoryTicks.length-1] }}" list="memoryLimitTicks" />
|
||||
<datalist id="memoryLimitTicks">
|
||||
<option ng-repeat="limit in resources.memoryTicks" value="{{ limit }}"></option>
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<input class="ng-hide" type="submit" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resourcesForm.$invalid || resources.busy"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1009,9 +1008,7 @@
|
||||
<span ng-show="resources.error.memoryLimit" class="text-danger">{{ 'app.resources.memory.error' | tr }}</span>
|
||||
</div>
|
||||
<div class="col-md-4 text-right">
|
||||
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitMemoryLimit()" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resourcesForm.$invalid || resources.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
|
||||
<i class="fa fa-circle-notch fa-spin" ng-show="resources.busy"></i> {{ 'app.resources.memory.resizeAction' | tr }}
|
||||
</button>
|
||||
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitMemoryLimit()" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resourcesForm.$invalid || resources.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">{{ 'app.resources.memory.resizeAction' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
@@ -1022,21 +1019,22 @@
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="cpuShares">{{ 'app.resources.cpu.title' | tr }} <sup><a ng-href="https://docs.cloudron.io/apps/#cpu-shares" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> : <b>{{ (resources.cpuShares * 100 / 1024 | number:0) + ' %' }}</b></label>
|
||||
<p>{{ 'app.resources.cpu.description' | tr }}</p>
|
||||
<div style="padding: 0 10px;">
|
||||
<slider id="cpuShares" ng-model="resources.cpuShares" ticks="[32, 256, 512, 768, 1024]" step="32" ticks-snap-bounds="32" min="32" max="1024" tooltip="hide"></slider>
|
||||
</div>
|
||||
<input type="range" id="cpuShares" ng-model="resources.cpuShares" step="32" min="32" max="1024" list="cpuSharesTicks" />
|
||||
<datalist id="cpuSharesTicks">
|
||||
<option value="32"></option>
|
||||
<option value="256"></option>
|
||||
<option value="512"></option>
|
||||
<option value="768"></option>
|
||||
<option value="1024"></option>
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<input class="ng-hide" type="submit" ng-disabled="resources.cpuShares === resources.currentCpuShares || resourcesForm.$invalid || resources.busyCpuShares"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-right">
|
||||
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitCpuShares()" ng-disabled="resources.cpuShares === resources.currentCpuShares || resourcesForm.$invalid || resources.busyCpuShares || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
|
||||
<i class="fa fa-circle-notch fa-spin" ng-show="resources.busyCpuShares"></i> {{ 'app.resources.cpu.setAction' | tr }}
|
||||
</button>
|
||||
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitCpuShares()" ng-disabled="resources.cpuShares === resources.currentCpuShares || resourcesForm.$invalid || resources.busy || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">{{ 'app.resources.cpu.setAction' | tr }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -543,17 +543,15 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
|
||||
memoryLimit: 0,
|
||||
memoryTicks: [],
|
||||
|
||||
busyCpuShares: false,
|
||||
currentCpuShares: 0,
|
||||
cpuShares: 0,
|
||||
|
||||
show: function () {
|
||||
var app = $scope.app;
|
||||
$scope.resources.busy = true;
|
||||
|
||||
$scope.resources.error = {};
|
||||
$scope.resources.currentMemoryLimit = app.memoryLimit || app.manifest.memoryLimit || (256 * 1024 * 1024);
|
||||
$scope.resources.memoryLimit = $scope.resources.currentMemoryLimit;
|
||||
$scope.resources.currentCpuShares = $scope.resources.cpuShares = app.cpuShares;
|
||||
|
||||
Client.getAppLimits(app.id, function (error, limits) {
|
||||
if (error) return console.error(error);
|
||||
@@ -569,14 +567,23 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
|
||||
$scope.resources.memoryTicks.unshift(app.manifest.memoryLimit);
|
||||
}
|
||||
});
|
||||
|
||||
// for firefox widget update
|
||||
$timeout(function() {
|
||||
$scope.resources.currentCpuShares = $scope.resources.cpuShares = app.cpuShares;
|
||||
$scope.resources.memoryLimit = $scope.resources.currentMemoryLimit;
|
||||
$scope.resources.busy = false;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
submitMemoryLimit: function () {
|
||||
$scope.resources.busy = true;
|
||||
$scope.resources.error = {};
|
||||
|
||||
var memoryLimit = $scope.resources.memoryLimit === $scope.resources.memoryTicks[0] ? 0 : $scope.resources.memoryLimit;
|
||||
Client.configureApp($scope.app.id, 'memory_limit', { memoryLimit: memoryLimit }, function (error) {
|
||||
const tmp = parseInt($scope.resources.memoryLimit);
|
||||
const memoryLimit = tmp === $scope.resources.memoryTicks[0] ? 0 : tmp;
|
||||
|
||||
Client.configureApp($scope.app.id, 'memory_limit', { memoryLimit }, function (error) {
|
||||
if (error && error.statusCode === 400) {
|
||||
$scope.resources.busy = false;
|
||||
$scope.resources.error.memoryLimit = true;
|
||||
@@ -595,10 +602,10 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
|
||||
},
|
||||
|
||||
submitCpuShares: function () {
|
||||
$scope.resources.busyCpuShares = true;
|
||||
$scope.resources.busy = true;
|
||||
$scope.resources.error = {};
|
||||
|
||||
Client.configureApp($scope.app.id, 'cpu_shares', { cpuShares: $scope.resources.cpuShares }, function (error) {
|
||||
Client.configureApp($scope.app.id, 'cpu_shares', { cpuShares: parseInt($scope.resources.cpuShares) }, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$scope.resources.currentCpuShares = $scope.resources.cpuShares;
|
||||
@@ -606,7 +613,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
|
||||
refreshApp($scope.app.id, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
$timeout(function () { $scope.resources.busyCpuShares = false; }, 1000);
|
||||
$timeout(function () { $scope.resources.busy = false; }, 1000);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user