Add addon configure dialog

This commit is contained in:
Johannes Zellner
2018-11-20 16:53:42 +01:00
parent d01c46bfee
commit 6e46240fd7
3 changed files with 100 additions and 0 deletions
+34
View File
@@ -1,3 +1,36 @@
<div class="modal fade" id="addonConfigureModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Configure {{ addonConfigure.addon.name }}</h4>
</div>
<div class="modal-body">
<form name="addonConfigureForm" role="form" novalidate ng-submit="addonConfigure.submit()" autocomplete="off">
<fieldset>
<p class="has-error text-center" ng-show="addonConfigure.error">{{ addonConfigure.error }}</p>
<div class="form-group">
<label class="control-label" for="memoryLimit">Memory Limit <sup><a ng-href="/" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> : <b>{{ addonConfigure.memoryLimit / 1024 / 1024 + 'MB' }}</b></label>
<br/>
<div style="padding: 0 10px;">
<slider id="memoryLimit" ng-model="addonConfigure.memoryLimit" step="134217728" tooltip="hide" ticks="addonConfigure.memoryTicks" ticks-snap-bounds="67108864"></slider>
</div>
</div>
<input class="ng-hide" type="submit" ng-disabled="addonConfigureForm.$invalid || addonConfigure.busy"/>
</fieldset>
</form>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="addonConfigure.submit()" ng-disabled="addonConfigureForm.$invalid || addonConfigure.busy">
<i class="fa fa-circle-notch fa-spin" ng-show="addonConfigure.busy"></i> Save
</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="text-left">
@@ -54,6 +87,7 @@
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + addon.name }}" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
<button class="btn btn-xs btn-default" ng-click="addonConfigure.show(addon)" uib-tooltip="Configure" ng-show="addon.config.memory"><i class="fa fa-pencil-alt"></i></button>
<button class="btn btn-xs btn-success" ng-click="startAddon(addon.name)" uib-tooltip="Start" ng-show="addon.status === 'inactive'"><i class="fa fa-play"></i></button>
<button class="btn btn-xs btn-danger" ng-click="stopAddon(addon.name)" uib-tooltip="Stop" ng-show="addon.status === 'active'"><i class="fa fa-stop"></i></button>
</td>
+62
View File
@@ -5,6 +5,7 @@
angular.module('Application').controller('AddonsController', ['$scope', '$location', '$interval', 'Client', function ($scope, $location, $interval, Client) {
Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
$scope.config = Client.getConfig();
$scope.ready = false;
$scope.addons = {};
@@ -38,6 +39,67 @@ angular.module('Application').controller('AddonsController', ['$scope', '$locati
});
};
$scope.addonConfigure = {
error: null,
busy: false,
addon: null,
// form model
memoryLimit: 0,
memoryTicks: [],
show: function (addon) {
$scope.addonConfigure.reset();
$scope.addonConfigure.addon = addon;
$scope.addonConfigure.memoryLimit = addon.config.memory;
// TODO improve those
$scope.addonConfigure.memoryTicks = [];
// create ticks starting from manifest memory limit. the memory limit here is currently split into ram+swap (and thus *2 below)
// TODO: the *2 will overallocate since 4GB is max swap that cloudron itself allocates
$scope.addonConfigure.memoryTicks = [];
var npow2 = Math.pow(2, Math.ceil(Math.log($scope.config.memory)/Math.log(2)));
for (var i = 256; i <= (npow2*2/1024/1024); i *= 2) {
if (i >= (addon.config.memory/1024/1024 || 0)) $scope.addonConfigure.memoryTicks.push(i * 1024 * 1024);
}
$('#addonConfigureModal').modal('show');
},
submit: function () {
$scope.addonConfigure.busy = true;
$scope.addonConfigure.error = null;
Client.configureAddon($scope.addonConfigure.addon.name, $scope.addonConfigure.memoryLimit, function (error) {
$scope.addonConfigure.busy = false;
if (error) {
$scope.addonConfigure.error = error.message;
return;
}
$('#addonConfigureModal').modal('hide');
$scope.addonConfigure.reset();
// reload the addon
refresh($scope.addonConfigure.addon.name);
});
},
reset: function () {
$scope.addonConfigure.busy = false;
$scope.addonConfigure.error = null;
$scope.addonConfigure.addon = null;
$scope.addonConfigure.memoryLimit = 0;
$scope.addonConfigure.memoryTicks = [];
$scope.addonConfigureForm.$setPristine();
$scope.addonConfigureForm.$setUntouched();
}
};
Client.onReady(function () {
Client.getAddons(function (error, result) {
if (error) return Client.error(error);