Merge pull request #5777 from hashicorp/ui-staging

ui: Dashboard URL refinements

ui-v2/app/components/templated-anchor.js

@@ -60,7 +60,7 @@ export default Component.extend({
       if (typeof vars !== 'undefined' && typeof value !== 'undefined') {
         value = value.replace(templateRe, function(match, group) {
           try {
-            return get(vars, group) || '';
+            return encodeURIComponent(get(vars, group) || '');
           } catch (e) {
             return '';
           }

ui-v2/app/routes/dc/services/show.js

@@ -15,9 +15,11 @@ export default Route.extend({
   model: function(params) {
     const repo = get(this, 'repo');
     const settings = get(this, 'settings');
+    const dc = this.modelFor('dc').dc.Name;
     return hash({
-      item: repo.findBySlug(params.name, this.modelFor('dc').dc.Name),
+      item: repo.findBySlug(params.name, dc),
       urls: settings.findBySlug('urls'),
+      dc: dc,
     });
   },
   setupController: function(controller, model) {

ui-v2/app/templates/dc/services/show.hbs

@@ -34,7 +34,7 @@
     {{/block-slot}}
     {{#block-slot 'actions'}}
       {{#if urls.service}}
-        {{#templated-anchor href=urls.service vars=(hash Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
+        {{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
       {{/if}}
     {{/block-slot}}
     {{#block-slot 'content'}}

ui-v2/app/templates/settings.hbs

@@ -16,12 +16,12 @@
         <fieldset>
           <h2>Dashboard Links</h2>
           <p>
-            Add a link to the service detail page in the UI to get quick access to a service-wide metrics dashboard. Enter the dashboard URL into the field below. You can use the placeholder {{Service.Name}} which will be replaced with the name of the service currently being viewed.
+          Add a link to the service detail page in the UI to get quick access to a service-wide metrics dashboard. Enter the dashboard URL into the field below. You can use the placeholders <code>{{'{{Datacenter}}'}}</code> and <code>{{'{{Service.Name}}'}}</code> which will be replaced with the name of the datacenter/service currently being viewed.
           </p>
           <label class="type-text">
             <span>Link template for services</span>
             <input type="text" name="urls[service]" value={{item.urls.service}} onchange={{action 'change'}} onkeypress={{action 'key'}} onkeydown={{action 'key'}} />
-            <em>e.g. https://grafana.example.com/d/1/consul-service-mesh&amp;orgid=1&amp;service-name={{ '{{Service.Name}}' }}</em>
+            <em>e.g. https://grafana.example.com/d/1/consul-service-mesh&amp;orgid=1&amp;datacenter={{ '{{Datacenter}}' }}&amp;service-name={{ '{{Service.Name}}' }}</em>
           </label>
         </fieldset>
         <fieldset>

ui-v2/tests/acceptance/dc/services/show.feature

@@ -89,3 +89,16 @@ Feature: dc / services / show: Show Service
       - "2.2.2.2:8000"
       - "3.3.3.3:8888"
     ---
+  Scenario: Given a dashboard template has been set
+    Given 1 datacenter model with the value "dc1"
+    And settings from yaml
+    ---
+    consul:urls:
+      service: https://consul.io?service-name={{Service.Name}}&dc={{Datacenter}}
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    And I see href on the dashboardAnchor like "https://consul.io?service-name=service-0&dc=dc1"

ui-v2/tests/integration/components/templated-anchor-test.js

@@ -21,7 +21,7 @@ test('it renders', function(assert) {
         Name: '{{Name}}',
         ID: '{{ID}}',
       },
-      result: 'http://localhost/?={{Name}}/{{ID}}',
+      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
     },
     {
       href: 'http://localhost/?={{deep.Name}}/{{deep.ID}}',
@@ -31,7 +31,7 @@ test('it renders', function(assert) {
           ID: '{{ID}}',
         },
       },
-      result: 'http://localhost/?={{Name}}/{{ID}}',
+      result: 'http://localhost/?=%7B%7BName%7D%7D/%7B%7BID%7D%7D',
     },
     {
       href: 'http://localhost/?={{}}/{{}}',
@@ -39,6 +39,8 @@ test('it renders', function(assert) {
         Name: 'name',
         ID: 'id',
       },
+      // If you don't pass actual variables then nothing
+      // gets replaced and nothing is URL encoded
       result: 'http://localhost/?={{}}/{{}}',
     },
     {
@@ -81,6 +83,16 @@ test('it renders', function(assert) {
       },
       result: 'http://localhost/?=',
     },
+    {
+      href: 'http://localhost/?={{deep.Name}}',
+      vars: {
+        deep: {
+          Name: '#Na/me',
+          ID: 'ID',
+        },
+      },
+      result: 'http://localhost/?=%23Na%2Fme',
+    },
   ].forEach(item => {
     this.set('item', item);
     this.render(hbs`

ui-v2/tests/pages/dc/services/show.js

@@ -5,6 +5,9 @@ export default function(visitable, attribute, collection, text, filter) {
     instances: collection('#instances [data-test-tabular-row]', {
       address: text('[data-test-address]'),
     }),
+    dashboardAnchor: {
+      href: attribute('href', '[data-test-dashboard-anchor]'),
+    },
     filter: filter,
   };
 }