From 03f6cc0acf1671d11a637c9965c2d72b511bb1a0 Mon Sep 17 00:00:00 2001
From: Rahul Ruikar <rahul.ruikar@gmail.com>
Date: Sun, 7 Jan 2018 03:24:51 +1000
Subject: [PATCH] feat(templates): add labels to container template (#1538)

---
 app/components/templates/templates.html       | 29 +++++++++++++++++++
 .../templates/templatesController.js          |  8 +++++
 app/helpers/templateHelper.js                 | 13 ++++++++-
 app/models/api/template.js                    |  4 ++-
 app/services/templateService.js               |  1 +
 5 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/app/components/templates/templates.html b/app/components/templates/templates.html
index 92664fad0..6084d8a3d 100644
--- a/app/components/templates/templates.html
+++ b/app/components/templates/templates.html
@@ -288,6 +288,35 @@
               </div>
             </div>
             <!-- !extra-host -->
+            <!-- Label -->
+            <div class="form-group" >
+              <div class="col-sm-12" style="margin-top: 5px;">
+                <label class="control-label text-left">Labels</label>
+                <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
+                  <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+                </span>
+              </div>
+                <!-- labels-input-list -->
+              <div class="col-sm-12">                
+                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in state.selectedTemplate.Labels" 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.name" placeholder="e.g. com.example.foo">
+                    </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">
+                    </div>
+                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
+                      <i class="fa fa-trash" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+                <!-- !labels-input-list -->
+            </div>
+            <!-- !Label -->            
           </div>
           <!-- !advanced-options -->
           <!-- actions -->
diff --git a/app/components/templates/templatesController.js b/app/components/templates/templatesController.js
index beff4d48f..2901a743f 100644
--- a/app/components/templates/templatesController.js
+++ b/app/components/templates/templatesController.js
@@ -45,6 +45,14 @@ function ($scope, $q, $state, $transition$, $anchorScroll, $filter, ContainerSer
     $scope.state.selectedTemplate.Hosts.splice(index, 1);
   };
 
+  $scope.addLabel = function () {
+    $scope.state.selectedTemplate.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.state.selectedTemplate.Labels.splice(index, 1);
+  };
+
   function validateForm(accessControlData, isAdmin) {
     $scope.state.formValidationError = '';
     var error = '';
diff --git a/app/helpers/templateHelper.js b/app/helpers/templateHelper.js
index d6ad6bc63..288bed577 100644
--- a/app/helpers/templateHelper.js
+++ b/app/helpers/templateHelper.js
@@ -18,7 +18,8 @@ angular.module('portainer.helpers')
         Privileged: false,
         ExtraHosts: []
       },
-      Volumes: {}
+      Volumes: {},
+      Labels: {}
     };
   };
 
@@ -46,6 +47,16 @@ angular.module('portainer.helpers')
     return portConfiguration;
   };
 
+  helper.updateContainerConfigurationWithLabels = function(labelsArray) {
+    var labels = {};
+    labelsArray.forEach(function (l) {
+      if (l.name && l.value) {
+        labels[l.name] = l.value;
+      }
+    });
+    return labels;
+  };
+
   helper.EnvToStringArray = function(templateEnvironment, containerMapping) {
     var env = [];
     templateEnvironment.forEach(function(envvar) {
diff --git a/app/models/api/template.js b/app/models/api/template.js
index 76a77d961..c4d8c3b44 100644
--- a/app/models/api/template.js
+++ b/app/models/api/template.js
@@ -14,7 +14,9 @@ function TemplateViewModel(data) {
   this.Privileged = data.privileged ? data.privileged : false;
   this.Interactive = data.interactive ? data.interactive : false;
   this.RestartPolicy = data.restart_policy ? data.restart_policy : 'always';
+  this.Labels = data.labels ? data.labels : [];
   this.Volumes = [];
+
   if (data.volumes) {
     this.Volumes = data.volumes.map(function (v) {
       // @DEPRECATED: New volume definition introduced
@@ -43,5 +45,5 @@ function TemplateViewModel(data) {
       };
     });
   }
-  this.Hosts = data.hosts ? data.hosts : [];
+  this.Hosts = data.hosts ? data.hosts : []; 
 }
diff --git a/app/services/templateService.js b/app/services/templateService.js
index 89694da59..ca08f756c 100644
--- a/app/services/templateService.js
+++ b/app/services/templateService.js
@@ -54,6 +54,7 @@ angular.module('portainer.services')
     var consoleConfiguration = TemplateHelper.getConsoleConfiguration(template.Interactive);
     configuration.OpenStdin = consoleConfiguration.openStdin;
     configuration.Tty = consoleConfiguration.tty;
+    configuration.Labels = TemplateHelper.updateContainerConfigurationWithLabels(template.Labels);
     return configuration;
   };