Let users define labels when creating routes

Author: spadgett

app/scripts/controllers/createRoute.js

@@ -17,13 +17,15 @@ angular.module('openshiftConsole')
                        AuthorizationService,
                        DataService,
                        Navigate,
-                       ProjectsService) {
+                       ProjectsService,
+                       keyValueEditorUtils) {
     $scope.alerts = {};
     $scope.renderOptions = {
       hideFilterWidget: true
     };
     $scope.projectName = $routeParams.project;
     $scope.serviceName = $routeParams.service;
+    $scope.labels = [];
 
     // Prefill route name with the service name.
     $scope.routing = {
@@ -56,24 +58,43 @@ angular.module('openshiftConsole')
           return;
         }
 
-        var labels = {},
-            orderByDisplayName = $filter('orderByDisplayName');
+        var orderByDisplayName = $filter('orderByDisplayName');
 
         DataService.list("services", context, function(services) {
           $scope.services = orderByDisplayName(services.by("metadata.name"));
           $scope.routing.to = {};
           $scope.routing.to.service = _.find($scope.services, function(service) {
             return !$scope.serviceName || service.metadata.name === $scope.serviceName;
           });
-          $scope.$watch('routing.to.service', function() {
-            labels = angular.copy($scope.routing.to.service.metadata.labels);
+          $scope.$watch('routing.to.service', function(service) {
+            var serviceLabels = _.get(service, 'metadata.labels', {});
+            $scope.systemLabels = _.map(serviceLabels, function(value, key) {
+              return {
+                name: key,
+                value: value
+              };
+            });
           });
         });
 
+        $scope.copyServiceLabels = function() {
+          var serviceLabels = _.get($scope, 'routing.to.service.metadata.labels', {});
+          var existing = keyValueEditorUtils.mapEntries(keyValueEditorUtils.compactEntries($scope.labels));
+          var updated = _.assign(existing, serviceLabels);
+          $scope.labels = _.map(updated, function(value, key) {
+            return {
+              name: key,
+              value: value
+            };
+          });
+        };
+
         $scope.createRoute = function() {
           if ($scope.createRouteForm.$valid) {
             $scope.disableInputs = true;
             var serviceName = $scope.routing.to.service.metadata.name;
+            var labels = keyValueEditorUtils.mapEntries(keyValueEditorUtils.compactEntries($scope.labels));
+
             var route = ApplicationGenerator.createRoute($scope.routing, serviceName, labels);
             var alternateServices = _.get($scope, 'routing.alternateServices', []);
             if (!_.isEmpty(alternateServices)) {

app/views/create-route.html

@@ -18,7 +18,7 @@ <h1>Create Route</h1>
                   <div class="help-block">
                     Routing is a way to make your application publicly visible.
                   </div>
-                  <form name="createRouteForm" class="mar-top-xl">
+                  <form name="createRouteForm" class="mar-top-xl osc-form">
                     <div ng-if="!services">Loading...</div>
                     <div ng-if="services">
                       <fieldset ng-disabled="disableInputs">
@@ -27,6 +27,13 @@ <h1>Create Route</h1>
                             services="services"
                             show-name-input="true">
                         </osc-routing>
+                        <label-editor
+                            labels="labels"
+                            expand="true"
+                            can-toggle="false"
+                            help-text="Labels for this route.">
+                        </label-editor>
+                        <a href="" ng-click="copyServiceLabels()">Copy service labels</a>
                         <div class="button-group gutter-top gutter-bottom">
                           <button type="submit"
                               class="btn btn-primary btn-lg"

dist/scripts/scripts.js

@@ -8143,10 +8143,10 @@ details:c("getErrorDetails")(b)
 }
 });
 }));
-} ]), angular.module("openshiftConsole").controller("CreateRouteController", [ "$filter", "$routeParams", "$scope", "$window", "ApplicationGenerator", "AuthorizationService", "DataService", "Navigate", "ProjectsService", function(a, b, c, d, e, f, g, h, i) {
+} ]), angular.module("openshiftConsole").controller("CreateRouteController", [ "$filter", "$routeParams", "$scope", "$window", "ApplicationGenerator", "AuthorizationService", "DataService", "Navigate", "ProjectsService", "keyValueEditorUtils", function(a, b, c, d, e, f, g, h, i, j) {
 c.alerts = {}, c.renderOptions = {
 hideFilterWidget:!0
-}, c.projectName = b.project, c.serviceName = b.service, c.routing = {
+}, c.projectName = b.project, c.serviceName = b.service, c.labels = [], c.routing = {
 name:c.serviceName || ""
 }, c.breadcrumbs = [ {
 title:c.projectName,
@@ -8156,26 +8156,40 @@ title:"Routes",
 link:"project/" + c.projectName + "/browse/routes"
 }, {
 title:"Create Route"
-} ], i.get(b.project).then(_.spread(function(i, j) {
+} ], i.get(b.project).then(_.spread(function(i, k) {
 if (c.project = i, c.breadcrumbs[0].title = a("displayName")(i), !f.canI("routes", "create", b.project)) return void h.toErrorPage("You do not have authority to create routes in project " + b.project + ".", "access_denied");
-var k = {}, l = a("orderByDisplayName");
-g.list("services", j, function(a) {
+var l = a("orderByDisplayName");
+g.list("services", k, function(a) {
 c.services = l(a.by("metadata.name")), c.routing.to = {}, c.routing.to.service = _.find(c.services, function(a) {
 return !c.serviceName || a.metadata.name === c.serviceName;
-}), c.$watch("routing.to.service", function() {
-k = angular.copy(c.routing.to.service.metadata.labels);
+}), c.$watch("routing.to.service", function(a) {
+var b = _.get(a, "metadata.labels", {});
+c.systemLabels = _.map(b, function(a, b) {
+return {
+name:b,
+value:a
+};
+});
+});
+}), c.copyServiceLabels = function() {
+var a = _.get(c, "routing.to.service.metadata.labels", {}), b = j.mapEntries(j.compactEntries(c.labels)), d = _.assign(b, a);
+c.labels = _.map(d, function(a, b) {
+return {
+name:b,
+value:a
+};
 });
-}), c.createRoute = function() {
+}, c.createRoute = function() {
 if (c.createRouteForm.$valid) {
 c.disableInputs = !0;
-var b = c.routing.to.service.metadata.name, f = e.createRoute(c.routing, b, k), h = _.get(c, "routing.alternateServices", []);
-_.isEmpty(h) || (f.spec.to.weight = _.get(c, "routing.to.weight"), f.spec.alternateBackends = _.map(h, function(a) {
+var b = c.routing.to.service.metadata.name, f = j.mapEntries(j.compactEntries(c.labels)), h = e.createRoute(c.routing, b, f), i = _.get(c, "routing.alternateServices", []);
+_.isEmpty(i) || (h.spec.to.weight = _.get(c, "routing.to.weight"), h.spec.alternateBackends = _.map(i, function(a) {
 return {
 kind:"Service",
 name:_.get(a, "service.metadata.name"),
 weight:a.weight
 };
-})), g.create("routes", null, f, j).then(function() {
+})), g.create("routes", null, h, k).then(function() {
 d.history.back();
 }, function(b) {
 c.disableInputs = !1, c.alerts["create-route"] = {

dist/scripts/templates.js

@@ -4455,12 +4455,15 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"help-block\">\n" +
     "Routing is a way to make your application publicly visible.\n" +
     "</div>\n" +
-    "<form name=\"createRouteForm\" class=\"mar-top-xl\">\n" +
+    "<form name=\"createRouteForm\" class=\"mar-top-xl osc-form\">\n" +
     "<div ng-if=\"!services\">Loading...</div>\n" +
     "<div ng-if=\"services\">\n" +
     "<fieldset ng-disabled=\"disableInputs\">\n" +
     "<osc-routing model=\"routing\" services=\"services\" show-name-input=\"true\">\n" +
     "</osc-routing>\n" +
+    "<label-editor labels=\"labels\" expand=\"true\" can-toggle=\"false\" help-text=\"Additional labels for this route.\">\n" +
+    "</label-editor>\n" +
+    "<a href=\"\" ng-click=\"copyServiceLabels()\">Copy service labels</a>\n" +
     "<div class=\"button-group gutter-top gutter-bottom\">\n" +
     "<button type=\"submit\" class=\"btn btn-primary btn-lg\" ng-click=\"createRoute()\" ng-disabled=\"createRouteForm.$invalid || disableInputs || !createRoute\" value=\"\">Create</button>\n" +
     "<a class=\"btn btn-default btn-lg\" href=\"#\" back>Cancel</a>\n" +