ui: Adds {{Datacenter}} keyword for URL template interpolation (#5768)

1. Includes Datacenter variable for intperolation
2. Amends text on the Settings page to reflect new keyword
3. Adds further acceptance testing around the new dashboard buttons

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/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,
   };
 }