diff --git a/ui/admin/app/components/form/worker/create-worker-led/index.hbs b/ui/admin/app/components/form/worker/create-worker-led/index.hbs index 6cf45def8..3a6be3d4f 100644 --- a/ui/admin/app/components/form/worker/create-worker-led/index.hbs +++ b/ui/admin/app/components/form/worker/create-worker-led/index.hbs @@ -45,13 +45,64 @@ /> {{/if}} - + + <:title>{{t 'resources.worker.form.worker_tags.label'}} + <:description>{{t + 'resources.worker.form.worker_tags.help' + }} + <:body> + + + {{#each this.workerTags as |tag index|}} + + + + + + + + + + {{t 'actions.remove'}} + + + + {{/each}} + + + + + + + + + + + {{t 'actions.add'}} + + + + + + + diff --git a/ui/admin/app/components/form/worker/create-worker-led/index.js b/ui/admin/app/components/form/worker/create-worker-led/index.js index c2806dff7..33e776cb1 100644 --- a/ui/admin/app/components/form/worker/create-worker-led/index.js +++ b/ui/admin/app/components/form/worker/create-worker-led/index.js @@ -1,6 +1,18 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { inject as service } from '@ember/service'; +import { action } from '@ember/object'; +import { A } from '@ember/array'; + +class Tag { + @tracked key; + @tracked value; + + constructor(key, value) { + this.key = key; + this.value = value; + } +} export default class FormWorkerCreateWorkerLedComponent extends Component { // =services @@ -11,18 +23,10 @@ export default class FormWorkerCreateWorkerLedComponent extends Component { @tracked clusterId; @tracked ipAddress; @tracked configFilePath; - @tracked workerTags; @tracked initialUpstreams; - - // =methods - - convertCommaSeparatedValuesToArray(input) { - return input - .split(',') - .filter((value) => value.trim()) - .map((value) => `"${value?.trim()}"`) - .join(', '); - } + @tracked workerTags = A([]); + @tracked newWorkerKey; + @tracked newWorkerValue; // =properties @@ -46,10 +50,13 @@ touch ${this.configFilePath || ''}/pki-worker.hcl`; }"`; const tagsText = `tags { - type = [${ - this.workerTags ? this.convertCommaSeparatedValuesToArray(this.workerTags) : '"", ""' - }] + ${ + this.workerTags.length + ? this.getTagConfigString() + : 'key = ["", ""]' + } }`; + const upstreamText = ` initial_upstreams = [${ this.initialUpstreams @@ -109,6 +116,7 @@ boundary server -config="${this.configFilePath || ''}/pki-worker.hcl"`; styleActiveLine: false, }; } + /** * Returns `hcl` configuration object for ``. * @type {Object} @@ -121,4 +129,35 @@ boundary server -config="${this.configFilePath || ''}/pki-worker.hcl"`; styleActiveLine: false, }; } + + //=methods + + convertCommaSeparatedValuesToArray(input) { + return input + .split(',') + .filter((value) => value.trim()) + .map((value) => `"${value?.trim()}"`) + .join(', '); + } + + getTagConfigString() { + return this.workerTags + .map( + (tag) => + `${tag.key} = [${this.convertCommaSeparatedValuesToArray(tag.value)}]` + ) + .join('\n '); + } + + @action + addWorkerTag() { + this.workerTags.pushObject(new Tag(this.newWorkerKey, this.newWorkerValue)); + this.newWorkerKey = ''; + this.newWorkerValue = ''; + } + + @action + removeWorkerTagByIndex(index) { + this.workerTags.removeAt(index); + } }