github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(service-details): add the ability to edit the labels associated to a service

pull/340/head
Glowbal 2016-11-10 03:38:49 +01:00 committed by Anthony Lapenna
parent c1ffd02491
commit d924d340d7
2 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/service/service.html
View File

@ -106,15 +106,35 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr ng-if="service.Labels"> <tr>
<td>Labels</td> <td>Labels</td>
<td> <td>
<table class="table table-bordered table-condensed"> <div class="form-group">
<tr ng-repeat="(k, v) in service.Labels"> <div class="col-sm-11">
<td>{{ k }}</td> <span class="label label-default interactive" ng-click="addLabel(service)">
<td>{{ v }}</td> <i class="fa fa-plus-circle" aria-hidden="true"></i> label
</tr> </span>
</table> </div>
<!-- labels-input-list -->
<div class="col-sm-11 form-inline" style="margin-top: 10px;">
<div ng-repeat="label in service.ServiceLabels" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(service, label)">
</div>
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeLabel(service, $index)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</span>
</div>
</div>
</div>
<!-- !labels-input-list -->
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

33
app/components/service/serviceController.js
View File

@ -39,6 +39,17 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
$scope.updateEnvironmentVariable = function updateEnvironmentVariable(service, variable) { $scope.updateEnvironmentVariable = function updateEnvironmentVariable(service, variable) {
service.hasChanges = service.hasChanges || variable.value !== variable.originalValue; service.hasChanges = service.hasChanges || variable.value !== variable.originalValue;
}; };
$scope.addLabel = function addLabel(service) {
service.hasChanges = true;
service.ServiceLabels.push({ key: '', value: '', originalValue: '' });
};
$scope.removeLabel = function removeLabel(service, index) {
var removedElement = service.ServiceLabels.splice(index, 1);
service.hasChanges = service.hasChanges || removedElement !== null;
};
$scope.updateLabel = function updateLabel(service, label) {
service.hasChanges = service.hasChanges || label.value !== label.originalValue;
};
$scope.cancelChanges = function changeServiceImage(service) { $scope.cancelChanges = function changeServiceImage(service) {
Object.keys(previousServiceValues).forEach(function(attribute) { Object.keys(previousServiceValues).forEach(function(attribute) {
@ -48,6 +59,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
previousServiceValues = {}; // clear out all changes previousServiceValues = {}; // clear out all changes
// clear out environment variable changes // clear out environment variable changes
service.EnvironmentVariables = translateEnvironmentVariables(service.Env); service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
service.hasChanges = false; service.hasChanges = false;
}; };
@ -57,6 +69,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
var config = ServiceHelper.serviceToConfig(service.Model); var config = ServiceHelper.serviceToConfig(service.Model);
config.Name = service.newServiceName; config.Name = service.newServiceName;
config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables); config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceLabels);
config.TaskTemplate.ContainerSpec.Image = service.newServiceImage; config.TaskTemplate.ContainerSpec.Image = service.newServiceImage;
config.Mode.Replicated.Replicas = service.Replicas; config.Mode.Replicated.Replicas = service.Replicas;
@ -96,6 +109,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
service.newServiceImage = service.Image; service.newServiceImage = service.Image;
service.newServiceReplicas = service.Replicas; service.newServiceReplicas = service.Replicas;
service.EnvironmentVariables = translateEnvironmentVariables(service.Env); service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
$scope.service = service; $scope.service = service;
Task.query({filters: {service: [service.Name]}}, function (tasks) { Task.query({filters: {service: [service.Name]}}, function (tasks) {
@ -157,5 +171,24 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
return []; return [];
} }
function translateLabelsToServiceLabels(Labels) {
var labels = [];
if (Labels) {
Object.keys(Labels).forEach(function(key) {
labels.push({ key: key, value: Labels[key], originalValue: Labels[key], added: true});
});
}
return labels;
}
function translateServiceLabelsToLabels(labels) {
var Labels = {};
if (labels) {
labels.forEach(function(label) {
Labels[label.key] = label.value;
});
}
return Labels;
}
fetchServiceDetails(); fetchServiceDetails();
}]); }]);