apps: rework portBindings

ports is REST API input . Map of env var to the host port
portBinding is the database structure. Map of env var to host port, count, type etc

also, rename portCount -> count in various places to keep things consistent

dashboard/src/views/app.html

@@ -626,17 +626,17 @@
             <p class="text-small text-warning" ng-show="clone.domain.provider === 'noop' || clone.domain.provider === 'manual'" ng-bind-html="'appstore.installDialog.manualWarning' | tr:{ location: ((clone.subdomain ? clone.subdomain + '.' : '') + clone.domain.domain) }"></p>
 
             <div class="has-error text-center" ng-show="clone.error.port">{{ clone.error.port }}</div>
-            <div ng-repeat="(env, info) in clone.portBindingsInfo">
+            <div ng-repeat="(env, info) in clone.portInfo">
               <ng-form name="portInfo_form">
                 <div class="form-group" ng-class="{ 'has-error': (!clone.itemName{{$index}}.$dirty && clone.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
-                  <label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="clone.portBindingsEnabled[env]">
+                  <label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="clone.portsEnabled[env]">
                     {{ info.title }}
                     <sup>
                       <a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{info.description}} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})"><i class="fa fa-question-circle"></i></a>
                     </sup>
                     <small style="padding-left: 5px;" ng-show="info.readOnly">{{ 'appstore.installDialog.portReadOnly' | tr }}</small>
                   </label>
-                  <input type="number" class="form-control" ng-model="clone.portBindings[env]" ng-disabled="!clone.portBindingsEnabled[env]" ng-readonly="info.readOnly" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
+                  <input type="number" class="form-control" ng-model="clone.ports[env]" ng-disabled="!clone.portsEnabled[env]" ng-readonly="info.readOnly" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
                   <p class="text-small text-warning text-bold" ng-show="clone.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p>
                 </div>
               </ng-form>
@@ -932,18 +932,18 @@
               </div>
 
               <div class="has-error text-center" ng-show="location.error.port">{{ location.error.port }}</div>
-              <div ng-repeat="(env, info) in location.portBindingsInfo">
+              <div ng-repeat="(env, info) in location.portInfo">
                 <ng-form name="portInfo_form">
                   <div class="form-group" ng-class="{ 'has-error': (!portInfo_form.itemName{{$index}}.$dirty && location.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
-                    <label class="control-label" style="width: 100%" for="locationPortInput{{env}}"><input type="checkbox" ng-model="location.portBindingsEnabled[env]">
+                    <label class="control-label" style="width: 100%" for="locationPortInput{{env}}"><input type="checkbox" ng-model="location.portsEnabled[env]">
                       {{ info.title }}
                       <sup>
-                        <a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{info.description}} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})"><i class="fa fa-question-circle"></i></a>
+                        <a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{info.description}}. {{info.portCount >=1 ? (info.portCount + ' ports. ') : ''}} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})"><i class="fa fa-question-circle"></i></a>
                       </sup>
                       <small style="padding-left: 5px;" ng-show="info.readOnly">{{ 'appstore.installDialog.portReadOnly' | tr }}</small>
-                      <span ng-show="info.portCount" style="display: block; float: right">({{ info.portCount }} ports) {{ location.portBindings[env] }} to {{ location.portBindings[env] + info.portCount - 1 }}</span>
+                      <span ng-show="info.portCount" style="display: block; float: right">{{ location.ports[env] }} to {{ location.ports[env] + info.portCount - 1 }} ({{ info.portCount }} ports)</span>
                     </label>
-                    <input type="number" class="form-control" ng-model="location.portBindings[env]" ng-disabled="!location.portBindingsEnabled[env]" ng-readonly="info.readOnly" id="locationPortInput{{env}}" later-name="itemName{{$index}}" min="{{HOST_PORT_MIN}}" max="{{HOST_PORT_MAX}}" required>
+                    <input type="number" class="form-control" ng-model="location.ports[env]" ng-disabled="!location.portsEnabled[env]" ng-readonly="info.readOnly" id="locationPortInput{{env}}" later-name="itemName{{$index}}" min="{{HOST_PORT_MIN}}" max="{{HOST_PORT_MAX}}" required>
                     <p class="text-small text-warning text-bold" ng-show="location.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p>
                   </div>
                 </ng-form>

dashboard/src/views/app.js

@@ -305,9 +305,9 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         secondaryDomains: {},
         redirectDomains: [],
         aliasDomains: [],
-        portBindings: {},
-        portBindingsEnabled: {},
-        portBindingsInfo: {},
+        ports: {},
+        portsEnabled: {},
+        portInfo: {},
 
         addRedirectDomain: function (event) {
             event.preventDefault();
@@ -369,18 +369,18 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
                 };
             });
 
-            $scope.location.portBindingsInfo = angular.extend({}, app.manifest.tcpPorts, app.manifest.udpPorts); // Portbinding map only for information
+            $scope.location.portInfo = angular.extend({}, app.manifest.tcpPorts, app.manifest.udpPorts); // Portbinding map only for information
             $scope.location.redirectDomains = app.redirectDomains.map(function (a) { return { subdomain: a.subdomain, domain: $scope.domains.filter(function (d) { return d.domain === a.domain; })[0] };});
             $scope.location.aliasDomains = app.aliasDomains.map(function (a) { return { subdomain: a.subdomain, domain: $scope.domains.filter(function (d) { return d.domain === a.domain; })[0] };});
 
             // fill the portBinding structures. There might be holes in the app.portBindings, which signalizes a disabled port
-            for (var env in $scope.location.portBindingsInfo) {
+            for (var env in $scope.location.portInfo) {
                 if (app.portBindings && app.portBindings[env]) {
-                    $scope.location.portBindings[env] = app.portBindings[env];
-                    $scope.location.portBindingsEnabled[env] = true;
+                    $scope.location.ports[env] = app.portBindings[env].hostPort;
+                    $scope.location.portsEnabled[env] = true;
                 } else {
-                    $scope.location.portBindings[env] = $scope.location.portBindingsInfo[env].defaultValue || 0;
-                    $scope.location.portBindingsEnabled[env] = false;
+                    $scope.location.ports[env] = $scope.location.portInfo[env].defaultValue || 0;
+                    $scope.location.portsEnabled[env] = false;
                 }
             }
         },
@@ -400,11 +400,11 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
                 };
             }
 
-            // only use enabled ports from portBindings
-            var portBindings = {};
-            for (var env in $scope.location.portBindings) {
-                if ($scope.location.portBindingsEnabled[env]) {
-                    portBindings[env] = $scope.location.portBindings[env];
+            // only use enabled ports
+            var ports = {};
+            for (var env in $scope.location.ports) {
+                if ($scope.location.portsEnabled[env]) {
+                    ports[env] = $scope.location.ports[env];
                 }
             }
 
@@ -412,7 +412,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
                 overwriteDns: !!overwriteDns,
                 subdomain: $scope.location.subdomain,
                 domain: $scope.location.domain.domain,
-                portBindings: portBindings,
+                ports: ports,
                 secondaryDomains: secondaryDomains,
                 redirectDomains: $scope.location.redirectDomains.map(function (a) { return { subdomain: a.subdomain, domain: a.domain.domain };}),
                 aliasDomains: $scope.location.aliasDomains.map(function (a) { return { subdomain: a.subdomain, domain: a.domain.domain };})
@@ -1794,9 +1794,9 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         secondaryDomains: {},
         needsOverwrite: false,
         overwriteDns: false,
-        portBindings: {},
-        portBindingsInfo: {},
-        portBindingsEnabled: {},
+        ports: {},
+        portsEnabled: {},
+        portInfo: {},
 
         show: function (backup) {
             var app = $scope.app;
@@ -1818,11 +1818,11 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
                 };
             }
 
-            $scope.clone.portBindingsInfo = angular.extend({}, backup.manifest.tcpPorts, backup.manifest.udpPorts);   // Portbinding map only for information
+            $scope.clone.portInfo = angular.extend({}, backup.manifest.tcpPorts, backup.manifest.udpPorts);   // Portbinding map only for information
             // set default ports
-            for (var env in $scope.clone.portBindingsInfo) {
-                $scope.clone.portBindings[env] = $scope.clone.portBindingsInfo[env].defaultValue || 0;
-                $scope.clone.portBindingsEnabled[env] = true;
+            for (var env in $scope.clone.portInfo) {
+                $scope.clone.ports[env] = $scope.clone.portInfo[env].defaultValue || 0;
+                $scope.clone.portsEnabled[env] = true;
             }
 
             $('#appCloneModal').modal('show');
@@ -1839,11 +1839,11 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
                 };
             }
 
-            // only use enabled ports from portBindings
-            var finalPortBindings = {};
-            for (var env in $scope.clone.portBindings) {
-                if ($scope.clone.portBindingsEnabled[env]) {
-                    finalPortBindings[env] = $scope.clone.portBindings[env];
+            // only use enabled ports
+            var finalPorts = {};
+            for (var env in $scope.clone.ports) {
+                if ($scope.clone.portsEnabled[env]) {
+                    finalPorts[env] = $scope.clone.ports[env];
                 }
             }
 
@@ -1851,7 +1851,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
                 subdomain: $scope.clone.subdomain,
                 domain: $scope.clone.domain.domain,
                 secondaryDomains: secondaryDomains,
-                portBindings: finalPortBindings,
+                ports: finalPorts,
                 backupId: $scope.clone.backup.id,
                 overwriteDns: $scope.clone.overwriteDns
             };

dashboard/src/views/appstore.html

@@ -69,17 +69,17 @@
             </div>
 
             <div class="has-error text-center" ng-show="appInstall.error.port">{{ appInstall.error.port }}</div>
-            <div ng-repeat="(env, info) in appInstall.portBindingsInfo">
+            <div ng-repeat="(env, info) in appInstall.portInfo">
               <ng-form name="portInfo_form">
                 <div class="form-group" ng-class="{ 'has-error': (!appInstallForm.itemName{{$index}}.$dirty && appInstall.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
-                  <label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="appInstall.portBindingsEnabled[env]">
+                  <label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="appInstall.portsEnabled[env]">
                     {{ info.title }}
                     <sup>
-                      <a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{info.description}} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})"><i class="fa fa-question-circle"></i></a>
+                      <a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{info.description}}. {{info.portCount >=1 ? (info.portCount + ' ports. ') : ''}} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})"><i class="fa fa-question-circle"></i></a>
                     </sup>
                     <small style="padding-left: 5px;" ng-show="info.readOnly">{{ 'appstore.installDialog.portReadOnly' | tr }}</small>
                   </label>
-                  <input type="number" class="form-control" ng-model="appInstall.portBindings[env]" ng-disabled="!appInstall.portBindingsEnabled[env]" ng-readonly="info.readOnly" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
+                  <input type="number" class="form-control" ng-model="appInstall.ports[env]" ng-disabled="!appInstall.portsEnabled[env]" ng-readonly="info.readOnly" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
                   <p class="text-small text-warning text-bold" ng-show="appInstall.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p>
                 </div>
               </ng-form>

dashboard/src/views/appstore.js

@@ -122,7 +122,8 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
         subdomain: '',
         domain: null, // object and not the string
         secondaryDomains: {},
-        portBindings: {},
+        ports: {},
+        portsEnabled: {},
         mediaLinks: [],
         certificateFile: null,
         certificateFileName: '',
@@ -147,7 +148,7 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
             $scope.appInstall.subdomain = '';
             $scope.appInstall.domain = null;
             $scope.appInstall.secondaryDomains = {};
-            $scope.appInstall.portBindings = {};
+            $scope.appInstall.ports = {};
             $scope.appInstall.state = 'appInfo';
             $scope.appInstall.mediaLinks = [];
             $scope.appInstall.certificateFile = null;
@@ -218,9 +219,9 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
                 };
             }
 
-            $scope.appInstall.portBindingsInfo = angular.extend({}, $scope.appInstall.app.manifest.tcpPorts, $scope.appInstall.app.manifest.udpPorts);   // Portbinding map only for information
-            $scope.appInstall.portBindings = {};                            // This is the actual model holding the env:port pair
-            $scope.appInstall.portBindingsEnabled = {};                     // This is the actual model holding the enabled/disabled flag
+            $scope.appInstall.portInfo = angular.extend({}, $scope.appInstall.app.manifest.tcpPorts, $scope.appInstall.app.manifest.udpPorts);   // Portbinding map only for information
+            $scope.appInstall.ports = {};                            // This holds the env:port pair
+            $scope.appInstall.portsEnabled = {};                     // This holds the enabled/disabled flag
 
             var manifest = app.manifest;
             $scope.appInstall.optionalSso = !!manifest.optionalSso;
@@ -232,8 +233,8 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
             // set default ports
             var allPorts = angular.extend({}, $scope.appInstall.app.manifest.tcpPorts, $scope.appInstall.app.manifest.udpPorts);
             for (var env in allPorts) {
-                $scope.appInstall.portBindings[env] = allPorts[env].defaultValue || 0;
-                $scope.appInstall.portBindingsEnabled[env] = true;
+                $scope.appInstall.ports[env] = allPorts[env].defaultValue || 0;
+                $scope.appInstall.portsEnabled[env] = true;
             }
 
             $('#appInstallModal').modal('show');
@@ -253,11 +254,11 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
                 };
             }
 
-            // only use enabled ports from portBindings
-            var finalPortBindings = {};
-            for (var env in $scope.appInstall.portBindings) {
-                if ($scope.appInstall.portBindingsEnabled[env]) {
-                    finalPortBindings[env] = $scope.appInstall.portBindings[env];
+            // only use enabled ports from ports
+            var finalPorts = {};
+            for (var env in $scope.appInstall.ports) {
+                if ($scope.appInstall.portsEnabled[env]) {
+                    finalPorts[env] = $scope.appInstall.ports[env];
                 }
             }
 
@@ -273,7 +274,7 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
                 subdomain: $scope.appInstall.subdomain || '',
                 domain: $scope.appInstall.domain.domain,
                 secondaryDomains: secondaryDomains,
-                portBindings: finalPortBindings,
+                ports: finalPorts,
                 accessRestriction: finalAccessRestriction,
                 cert: $scope.appInstall.certificateFile,
                 key: $scope.appInstall.keyFile,