luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Allow ${} interpolation for template URLs

This commit is contained in:
radiantly 2021-10-15 15:37:51 +05:30
parent 55dd52cb17
commit 79ba05b2a6
No known key found for this signature in database
GPG Key ID: 6B113D80D68C409C
3 changed files with 141 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/packages/consul-ui/app/helpers/render-template.js
View File

@ -1,8 +1,15 @@
import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
// simple mustache regexp `/{{item.Name}}/`
const templateRe = /{{([A-Za-z.0-9_-]+)}}/g;
// regexp that matches {{item.Name}} or ${item.Name}
// what this regex does
// (?:\$|\{) - Match either $ or {
// \{ - Match {
// ([a-z.0-9_-]+) - Capturing group
// (?:(?<=\$\{[^{]+) - Use a positive lookbehind to assert that ${ was matched previously
// |\} ) - or match a }
// \} - Match }
const templateRe = /(?:\$|\{)\{([a-z.0-9_-]+)(?:(?<=\$\{[^{]+)|\})\}/gi;
let render;
export default class RenderTemplateHelper extends Helper {
@service('encoder') encoder;

128
ui/packages/consul-ui/tests/integration/helpers/render-template-test.js
View File

@ -94,7 +94,133 @@ module('Integration | Helper | render-template', function(hooks) {
result: 'http://localhost/?=%23Na%2Fme',
},
].forEach(item => {
test('it renders', async function(assert) {
test('it renders {{}} style interpolation`', async function(assert) {
this.set('template', item.href);
this.set('vars', item.vars);
await render(hbs`{{render-template template vars}}`);
assert.equal(this.element.textContent.trim(), item.result);
});
});
[
{
href: 'http://localhost/?=${Name}/${ID}',
vars: {
Name: 'name',
ID: 'id',
},
result: 'http://localhost/?=name/id',
},
{
href: 'http://localhost/?=${Name}/${ID}',
vars: {
Name: '{{Name}}',
ID: '{{ID}}',
},
result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
},
{
href: 'http://localhost/?=${deep.Name}/${deep.ID}',
vars: {
deep: {
Name: '{{Name}}',
ID: '{{ID}}',
},
},
result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
},
{
href: 'http://localhost/?=${}/${}',
vars: {
Name: 'name',
ID: 'id',
},
// If you don't pass actual variables then nothing
// gets replaced and nothing is URL encoded
result: 'http://localhost/?=${}/${}',
},
{
href: 'http://localhost/?=${Service_Name}/${Meta-Key}',
vars: {
Service_Name: 'name',
['Meta-Key']: 'id',
},
result: 'http://localhost/?=name/id',
},
{
href: 'http://localhost/?=${Service_Name}/${Meta-Key}',
vars: {
WrongPropertyName: 'name',
['Meta-Key']: 'id',
},
result: 'http://localhost/?=/id',
},
{
href: 'http://localhost/?=${.Name}',
vars: {
['.Name']: 'name',
},
result: 'http://localhost/?=',
},
{
href: 'http://localhost/?=${.}',
vars: {
['.']: 'name',
},
result: 'http://localhost/?=',
},
{
href: 'http://localhost/?=${deep..Name}',
vars: {
deep: {
Name: 'Name',
ID: 'ID',
},
},
result: 'http://localhost/?=',
},
{
href: 'http://localhost/?=${deep.Name}',
vars: {
deep: {
Name: '#Na/me',
ID: 'ID',
},
},
result: 'http://localhost/?=%23Na%2Fme',
},
].forEach(item => {
test('it renders ${} style interpolation', async function(assert) {
this.set('template', item.href);
this.set('vars', item.vars);
await render(hbs`{{render-template template vars}}`);
assert.equal(this.element.textContent.trim(), item.result);
});
});
[
{
href: 'http://localhost/?=${Name}/{{ID}}',
vars: {
Name: 'name',
ID: 'id',
},
result: 'http://localhost/?=name/id',
},
{
href: 'http://localhost/?=${Name}}/{{ID}',
vars: {
Name: 'name',
ID: 'id',
},
result: 'http://localhost/?=name}/{{ID}',
},
].forEach(item => {
test('it renders both styles of interpolation when used together', async function(assert) {
this.set('template', item.href);
this.set('vars', item.vars);

8
website/content/docs/agent/options.mdx
View File

@ -2174,9 +2174,11 @@ bind_addr = "{{ GetPrivateInterfaces | include \"network\" \"10.0.0.0/8\" | attr
The placeholders available are:
- `{{Service.Name}}` - Replaced with the current service's name.
- `{{Service.Namespace}}` - Replaced with the current service's namespace or empty if namespaces are not enabled.
- `{{Datacenter}}` - Replaced with the current service's datacenter.
- `{{Service.Name}}` or `${Service.Name}` - Replaced with the current service's name.
- `{{Service.Namespace}}` or `${Service.Namespace}` - Replaced with the current service's namespace or empty if namespaces are not enabled.
- `{{Datacenter}}` or `${Datacenter}` - Replaced with the current service's datacenter.
~> **Note:** The `${}` style interpolation is only available from Consul TBD.
- `ui_dir` - **This field is deprecated in Consul 1.9.0. See the [`ui_config.dir`](#ui_config_dir) field instead.**
Equivalent to the [`-ui-dir`](#_ui_dir) command-line