ui: Moves dashboard buttons to use localStorage rather than meta data

1. Removes dashboard button from node detail and service instance detail pages 2. Adds very basic settings page to enable input of templatable url 3. Uses new localStorage based template for url interpolation
hashicorp · Apr 30, 2019 · d8d21c6 · d8d21c6
1 parent fc67f89
commit d8d21c6
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/ui-v2/app/controllers/settings.js b/ui-v2/app/controllers/settings.js
@@ -23,6 +23,13 @@ export default Controller.extend({
           set(this, 'item.client.blocking', !blocking);
           this.send('update', get(this, 'item'));
           break;
+        case 'urls[service]':
+          if (typeof get(this, 'item.urls') === 'undefined') {
+            set(this, 'item.urls', {});
+          }
+          set(this, 'item.urls.service', target.value);
+          this.send('update', get(this, 'item'));
+          break;
       }
     },
   },

diff --git a/ui-v2/app/routes/dc/services/show.js b/ui-v2/app/routes/dc/services/show.js
@@ -5,6 +5,7 @@ import { get } from '@ember/object';
 
 export default Route.extend({
   repo: service('repository/service'),
+  settings: service('settings'),
   queryParams: {
     s: {
       as: 'filter',
@@ -13,8 +14,10 @@ export default Route.extend({
   },
   model: function(params) {
     const repo = get(this, 'repo');
+    const settings = get(this, 'settings');
     return hash({
       item: repo.findBySlug(params.name, this.modelFor('dc').dc.Name),
+      urls: settings.findBySlug('urls'),
     });
   },
   setupController: function(controller, model) {

diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs
@@ -26,9 +26,6 @@
         }}
     {{/block-slot}}
     {{#block-slot 'actions'}}
-      {{#if item.Meta.consul-dashboard-url}}
-        {{#templated-anchor href=item.Meta.consul-dashboard-url vars=item rel="external"}}Open in Dashboard{{/templated-anchor}}
-      {{/if}}
       {{#feedback-dialog type='inline'}}
           {{#block-slot 'action' as |success error|}}
               {{#copy-button success=(action success) error=(action error) clipboardText=item.Address title='copy IP address to clipboard'}}

diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs
@@ -55,11 +55,6 @@
   {{/if}}
 {{/if}}
     {{/block-slot}}
-    {{#block-slot 'actions'}}
-      {{#if item.Meta.consul-dashboard-url}}
-        {{#templated-anchor href=item.Meta.consul-dashboard-url vars=item rel="external"}}Open in Dashboard{{/templated-anchor}}
-      {{/if}}
-    {{/block-slot}}
     {{#block-slot 'content'}}
         {{tab-nav
             items=(compact

diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs
@@ -33,8 +33,8 @@
       }}
     {{/block-slot}}
     {{#block-slot 'actions'}}
-      {{#if item.Service.Meta.consul-dashboard-url}}
-        {{#templated-anchor href=item.Service.Meta.consul-dashboard-url vars=item.Service rel="external"}}Open in Dashboard{{/templated-anchor}}
+      {{#if urls.service}}
+        {{#templated-anchor href=urls.service vars=(hash Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
       {{/if}}
     {{/block-slot}}
     {{#block-slot 'content'}}

diff --git a/ui-v2/app/templates/settings.hbs b/ui-v2/app/templates/settings.hbs
@@ -10,6 +10,17 @@
                 These settings are specific to the Consul web UI. They are saved to local storage and persist through browser usage and visits.
             </p>
             <form>
+                <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.
+                    </p>
+                      <label class="type-text">
+                        <span>Link template for services</span>
+                        <input type="text" name="urls[service]" value={{item.urls.service}} onchange={{action 'change'}} />
+                        <em>e.g. https://grafana.example.com/d/1/consul-service-mesh&amp;orgid=1&amp;service-name={{ '{{Service.Name}}' }}</em>
+                      </label>
+                </fieldset>
                 <fieldset>
                     <h2>Blocking Queries</h2>
                     <p>Automatically get updated catalog information without refreshing the page. Any changes made to services and nodes would be reflected in real time.</p>