From 4c81f2f7ccd7f09d1c6d87de7d4412620c2d9bef Mon Sep 17 00:00:00 2001 From: loganhz Date: Mon, 26 Feb 2018 17:44:20 +0800 Subject: [PATCH] workload port --- .../container/form-ports/component.js | 105 +++++----- .../container/form-ports/template.hbs | 184 ++++++++++-------- .../container/new-edit/template.hbs | 41 ++-- .../components/input-random-port/component.js | 36 ++++ .../components/input-random-port/template.hbs | 5 + .../components/input-random-port/component.js | 1 + translations/en-us.yaml | 23 ++- 7 files changed, 240 insertions(+), 155 deletions(-) create mode 100644 lib/shared/addon/components/input-random-port/component.js create mode 100644 lib/shared/addon/components/input-random-port/template.hbs create mode 100644 lib/shared/app/components/input-random-port/component.js diff --git a/lib/shared/addon/components/container/form-ports/component.js b/lib/shared/addon/components/container/form-ports/component.js index dee4f6bbb..d89922715 100644 --- a/lib/shared/addon/components/container/form-ports/component.js +++ b/lib/shared/addon/components/container/form-ports/component.js @@ -5,8 +5,8 @@ import Component from '@ember/component'; import layout from './template'; const protocolOptions = [ - {label: 'TCP', value: 'TCP'}, - {label: 'UDP', value: 'UDP'} + { label: 'TCP', value: 'TCP' }, + { label: 'UDP', value: 'UDP' } ]; export default Component.extend({ @@ -14,46 +14,34 @@ export default Component.extend({ intl: service(), initialPorts: null, - showIp: null, + showNaming: null, editing: false, + kindChoices: null, ports: null, - protocolOptions : protocolOptions, + protocolOptions: protocolOptions, init() { this._super(...arguments); - - let ports = get(this, 'initialPorts'); - if ( ports ) { - ports = ports.map((obj) => { - const out = obj.cloneForNew() - set(out, 'existing', true); - - if ( get(obj, 'hostIP') ) { - set(this, 'showIp', true); - } - - return out; - }); - } else { - ports = []; - } - - set(this, 'ports', ports); + this.initPorts(); + this.initKindChoices(); }, actions: { addPort() { - this.get('ports').pushObject(get(this,'store').createRecord({ + this.get('ports').pushObject(get(this, 'store').createRecord({ type: 'containerPort', containerPort: '', - hostPort: '', - hostIP: '', - protocol: 'TCP' + dnsName: '', + hostIp: '', + kind: 'HostPort', + name: '', + protocol: 'TCP', + sourcePort: '', })); next(() => { - if ( this.isDestroyed || this.isDestroying ) { + if (this.isDestroyed || this.isDestroying) { return; } @@ -65,44 +53,53 @@ export default Component.extend({ this.get('ports').removeObject(obj); }, - showIp() { - this.set('showIp', true); + showNaming() { + this.set('showNaming', true); }, }, - portsChanged: observer('ports.@each.{containerPort,hostPort,hostIP,protocol}', function() { + initPorts: function () { + let ports = get(this, 'initialPorts'); + if (ports) { + ports = ports.map((obj) => { + const out = obj.cloneForNew() + set(out, 'existing', true); + + if (get(obj, 'dnsName') || get(obj, 'name')) { + set(this, 'showNaming', true); + } + + return out; + }); + } else { + ports = []; + } + + set(this, 'ports', ports); + }, + + initKindChoices: function () { + const kindChoices = this.get('store').getById('schema', 'containerport').get('resourceFields.kind').options.sort(); + set(this, 'kindChoices', kindChoices.map(k => { + return { + translationKey: `formPorts.kind.${k}`, + value: k + }; + })); + }, + + portsChanged: observer('ports.@each.{containerPort,dnsName,hostIp,kind,name,protocol,sourcePort}', function() { const errors = []; - const seen = {}; const intl = get(this, 'intl'); const ports = get(this, 'ports'); ports.forEach((obj) => { - let hostIP = obj.hostIP; let containerPort = obj.containerPort; - let hostPort = obj.hostPort; - let protocol = obj.protocol; - - errors.pushObjects(obj.validationErrors()); - - if ( !containerPort && (hostPort || hostIP) ) { + if ( !containerPort ) { errors.push(intl.t('formPorts.error.privateRequired')); } - - if ( hostIP && !hostPort ) { - errors.push(intl.t('formPorts.error.publicRequired')); - } - - if ( hostPort ) { - const key = '['+ (hostIP||'0.0.0.0') + ']:' + hostPort + '/' + protocol; - if ( seen[key] ) { - errors.push(intl.t('formPorts.error.'+(hostIP ? 'mixedIpPort' : 'mixedPort'), { - ip: hostIP, - port: hostPort, - proto: protocol - })); - } else { - seen[key] = true; - } + if ( !obj.sourcePort ) { + delete obj['sourcePort']; } }); diff --git a/lib/shared/addon/components/container/form-ports/template.hbs b/lib/shared/addon/components/container/form-ports/template.hbs index d724c98ac..6160e1a33 100644 --- a/lib/shared/addon/components/container/form-ports/template.hbs +++ b/lib/shared/addon/components/container/form-ports/template.hbs @@ -1,85 +1,104 @@
- {{#if (and ports.length (not showIp))}} + {{#if (and ports.length (not showNaming))}} {{#if editing}}
- - {{t 'formPorts.showIpLink'}} + + {{t 'formPorts.showNamingLink'}}
{{/if}} {{/if}} {{#if ports.length}} - - - - {{#if showIp}} - +
+ + + - {{/if}} - - - - - - - - - - - {{#each ports as |port|}} - - {{#if showIp}} - + + + + + {{#if showNaming}} + + + + + {{/if}} + + + + + {{#each ports as |port|}} + + + + - {{/if}} - - - - - + + - + - + + + + {{/if}} + - - {{/each}} - -
- {{#if port.existing}} - {{#if port.hostIP}} - {{port.hostIP}} - {{else}} - {{t 'generic.any'}} - {{/if}} + {{t 'formPorts.sourcePort.label'}}{{t 'formPorts.containerPort.label'}}{{#if editing}}{{field-required}}{{/if}}{{t 'formPorts.protocol.label'}}{{t 'formPorts.name.label'}}{{t 'formPorts.dnsName.label'}} 
+ {{#if editing}} + {{new-select + classNames="form-control" + optionValuePath="value" + optionLabelPath="translationKey" + localizedLabel=true + content=kindChoices + value=port.kind + }} {{else}} - {{#if editing}} - {{input class="form-control input-sm" type="text" value=port.hostIP placeholder=(t 'formPorts.hostIp.placeholder')}} + {{#if port.kind}} + {{port.kind}} {{else}} - {{#if port.hostIP}} - {{port.hostIP}} - {{else}} - {{t 'generic.na'}} - {{/if}} + {{t 'generic.na'}} + {{/if}} + {{/if}} +   + {{#if (eq port.kind "HostPort")}} + {{#if editing}} + {{input-random-port min="30000" max="32767" value=port.sourcePort placeholder="formPorts.nodePort.placeholder"}} + {{else if port.sourcePort}} + {{port.sourcePort}} + {{else}} + {{t 'generic.random'}} + {{/if}} + {{else if (eq port.kind "NodePort")}} +
+ {{#if editing}} +
+ {{input class="form-control input-sm" type="text" value=port.hostIp placeholder=(t 'formPorts.hostIp.placeholder')}} +
+
+ : +
+
+ {{input-integer class="form-control input-sm" min="1" max="65535" value=port.sourcePort placeholder=(t 'formPorts.sourcePort.placeholder')}} +
+ {{else if port.hostIp}} + {{port.hostIp}}:{{port.sourcePort}} + {{else}} + {{port.sourcePort}} + {{/if}} +
+ {{else}} + {{#if editing}} + {{input-integer class="form-control input-sm" min="1" max="65535" value=port.sourcePort placeholder=(t 'formPorts.sourcePort.placeholder')}} + {{else}} + {{port.sourcePort}} {{/if}} - {{/if}} 		  - {{#if editing}} - {{input-integer class="form-control input-sm public" min="1" max="65535" value=port.hostPort placeholder=(t 'formPorts.hostPort.placeholder')}} - {{else}} - {{port.hostPort}} - {{/if}} -   - {{#if port.existing}} -
{{port.containerPort}}
- {{else}} + 		{{#if editing}} - {{input-integer class="form-control input-sm" min="1" max="65535" value=port.containerPort placeholder=(t 'formPorts.containerPort.placeholder')}} + {{input-integer class="form-control input-sm public" min="1" max="65535" value=port.containerPort placeholder=(t 'formPorts.containerPort.placeholder')}} {{else}} {{port.containerPort}} {{/if}} - {{/if}} -    - {{#if port.existing}} -
{{upper-case port.protocol}}
- {{else}} + 		{{#if editing}} {{new-select class="form-control input-sm" @@ -89,29 +108,42 @@ {{else}} {{port.protocol}} {{/if}} - {{/if}} - - {{#if port.existing}} -   - {{else}} + {{#if showNaming}} +   + {{#if editing}} + {{input class="form-control input-sm" type="text" value=port.name placeholder=(t 'formPorts.name.placeholder')}} + {{else}} + {{port.name}} + {{/if}} +   + {{#if editing}} + {{input class="form-control input-sm" type="text" value=port.dnsName placeholder=(t 'formPorts.dnsName.placeholder')}} + {{else}} + {{port.dnsName}} + {{/if}} + {{#if editing}} {{/if}} - {{/if}} -
-{{else}} - {{#unless editing}} - {{t 'formPorts.noPorts'}} - {{/unless}} -{{/if}} + + + {{/each}} + + + {{else}} + {{#unless editing}} + {{t 'formPorts.noPorts'}} + {{/unless}} + {{/if}}
diff --git a/lib/shared/addon/components/container/new-edit/template.hbs b/lib/shared/addon/components/container/new-edit/template.hbs index 2e6b6cb8d..0c75b1f25 100644 --- a/lib/shared/addon/components/container/new-edit/template.hbs +++ b/lib/shared/addon/components/container/new-edit/template.hbs @@ -54,28 +54,27 @@
-
- {{container/form-ports - initialPorts=launchConfig.ports - changed=(action (mut launchConfig.ports)) - errors=portErrors + {{container/form-ports + initialPorts=launchConfig.ports + changed=(action (mut launchConfig.ports)) + errors=portErrors + editing=true + }} +
+
+
+ {{form-key-value + initialMap=launchConfig.environment + changed=(action (mut launchConfig.environment)) + allowEmptyValue=true editing=true - }} -
-
- {{form-key-value - initialMap=launchConfig.environment - changed=(action (mut launchConfig.environment)) - allowEmptyValue=true - editing=true - header=(t 'newContainer.environment.label') - addActionLabel="newContainer.environment.addAction" - keyLabel="newContainer.environment.keyLabel" - keyPlaceholder="newContainer.environment.keyPlaceholder" - valueLabel="newContainer.environment.valueLabel" - valuePlaceholder="newContainer.environment.valuePlaceholder" - }} -
+ header=(t 'newContainer.environment.label') + addActionLabel="newContainer.environment.addAction" + keyLabel="newContainer.environment.keyLabel" + keyPlaceholder="newContainer.environment.keyPlaceholder" + valueLabel="newContainer.environment.valueLabel" + valuePlaceholder="newContainer.environment.valuePlaceholder" + }}
diff --git a/lib/shared/addon/components/input-random-port/component.js b/lib/shared/addon/components/input-random-port/component.js new file mode 100644 index 000000000..1172608ec --- /dev/null +++ b/lib/shared/addon/components/input-random-port/component.js @@ -0,0 +1,36 @@ +import { set, get } from '@ember/object'; +import Component from '@ember/component'; +import layout from './template'; +import { next } from '@ember/runloop'; + +export default Component.extend({ + layout, + + showEdit: false, + + min: '1', + max: '65535', + value: null, + placeholder: null, + + init() { + this._super(...arguments); + if (get(this, 'value')) { + set(this, 'showEdit', true); + } + }, + + actions: { + showEdit() { + set(this, 'showEdit', true); + + next(() => { + if (this.isDestroyed || this.isDestroying) { + return; + } + + this.$('INPUT').last()[0].focus(); + }); + } + } +}); diff --git a/lib/shared/addon/components/input-random-port/template.hbs b/lib/shared/addon/components/input-random-port/template.hbs new file mode 100644 index 000000000..a2ee9b02e --- /dev/null +++ b/lib/shared/addon/components/input-random-port/template.hbs @@ -0,0 +1,5 @@ +{{#if showEdit}} + {{input-integer class="form-control input-sm" min=min max=max value=value placeholder=(t placeholder)}} +{{else}} +
{{t 'generic.random'}}
+{{/if}} \ No newline at end of file diff --git a/lib/shared/app/components/input-random-port/component.js b/lib/shared/app/components/input-random-port/component.js new file mode 100644 index 000000000..5b527e193 --- /dev/null +++ b/lib/shared/app/components/input-random-port/component.js @@ -0,0 +1 @@ +export { default } from 'shared/components/input-random-port/component'; diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 04f880b39..5cbb9e9c3 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -66,6 +66,7 @@ generic: ports: Ports remove: Remove role: Role + random: Random save: Save saved: Saved saving: Saving @@ -2400,24 +2401,38 @@ formNetwork: formPorts: header: Port Mapping addAction: Add Port + kind: + label: Publish on + HostPort: Every node + NodePort: Nodes running the pod + ClusterIP: Internal cluster IP + LoadBalancer: Load Balancer hostIp: label: Host IP - placeholder: "Default: All" - hostPort: - label: Host Port + placeholder: "Optional: Host IP e.g. 1.2.3.4" + sourcePort: + label: Source Port placeholder: "e.g. 80" + nodePort: + placeholder: "e.g. 30000" containerPort: label: Container Port placeholder: "e.g. 8080" protocol: label: Protocol + name: + label: Name + placeholder: "e.g. backend" + dnsName: + label: DNS Name + placeholder: "e.g. example" noPorts: This container has no port maps. error: privateRequired: Private Container Port is required for each port rule. publicRequired: Public Host Port is required if Host IP is specified. mixedIpPort: "Port {ip}:{port}/{proto} has more than one mapping." mixedPort: "Port {port}/{proto} has more than one mapping." - showIpLink: Customize Host IPs + showNamingLink: Show Port Naming Options formScale: label: Scale