ui: Redesign - Service Detail Page (#7655)

* Create ConsulServiceInstanceList with styling and test * Implement ConsulServiceInstanceList to Service Detail page * Implement ConsulExternalSource to Services Show page header * Update services/show page object * Update the styling of CompositeRow * Refactor ConsulServiceList component and styling * Update ConsulExternalSource to say 'Registered via...' * Upgrade consul-api-double to patch 2.14.1 * Fix up tests to not use Kind in service models * Update ListCollection with clickFirstAnchor action * Add $typo-size-450 to typography base variables
hashicorp · Apr 21, 2020 · a4857d0 · a4857d0
1 parent e7dfed9
commit a4857d0
Show file tree

Hide file tree

Showing 43 changed files with 403 additions and 291 deletions.
diff --git a/ui-v2/app/components/consul-external-source/index.hbs b/ui-v2/app/components/consul-external-source/index.hbs
@@ -1,17 +1,19 @@
-{{#let (if _externalSource _externalSource (service/external-source item)) as |externalSource|}}
-  {{#if externalSource}}
-    {{#if (has-block)}}
-      {{yield
-        (component 'consul-external-source' item=item _externalSource=externalSource)
-      }}
-    {{else}}
-      <span data-test-external-source={{externalSource}} class="consul-external-source source-{{externalSource}}">
-        {{#if (eq externalSource 'aws')}}
-          <span>Synced from {{uppercase externalSource}}</span>
-        {{else}}
-          <span>Synced from {{capitalize externalSource}}</span>
-        {{/if}}
-      </span>
+{{#if item}}
+  {{#let (if _externalSource _externalSource (service/external-source item)) as |externalSource|}}
+    {{#if externalSource}}
+      {{#if (has-block)}}
+        {{yield
+          (component 'consul-external-source' item=item _externalSource=externalSource)
+        }}
+      {{else}}
+        <span data-test-external-source={{externalSource}} class="consul-external-source source-{{externalSource}}">
+          {{#if (eq externalSource 'aws')}}
+            <span>Registered via {{uppercase externalSource}}</span>
+          {{else}}
+            <span>Registered via {{capitalize externalSource}}</span>
+          {{/if}}
+        </span>
+      {{/if}}
     {{/if}}
-  {{/if}}
-{{/let}}
+  {{/let}}
+{{/if}}
diff --git a/ui-v2/app/components/consul-service-instance-list/index.hbs b/ui-v2/app/components/consul-service-instance-list/index.hbs
@@ -0,0 +1,47 @@
+{{yield}}
+{{#if (gt items.length 0)}}
+  <ListCollection @cellHeight={{73}} @items={{items}} class="consul-service-instance-list" as |item index|>
+    <a href={{href-to routeName item.Service.Service item.Node.Node (or item.Service.ID item.Service.Service)}}>
+      {{item.Service.ID}}
+    </a>
+    <ul>
+      <ConsulExternalSource @item={{item.Service}} as |ExternalSource|>
+        <li>
+          <ExternalSource />
+        </li>
+      </ConsulExternalSource>
+    {{#with (reject-by 'ServiceID' '' item.Checks) as |checks|}}
+      <li class={{service/instance-checks checks}}>
+        {{checks.length}} service checks
+      </li>
+    {{/with}}
+    {{#with (filter-by 'ServiceID' '' item.Checks) as |checks|}}
+      <li class={{service/instance-checks checks}}>
+        {{checks.length}} node checks
+      </li>
+    {{/with}}
+    {{#if (get proxies item.Service.ID)}}
+      <li class="proxy">
+        connected with proxy
+      </li>
+    {{/if}}
+    {{#if (gt item.Node.Node.length 0)}}
+        <li class="node">
+          <a href={{href-to 'dc.nodes.show' item.Node.Node}}>{{item.Node.Node}}</a>
+      </li>
+    {{/if}}
+      <li class="address" data-test-address>
+        {{#if (not-eq item.Service.Address '')}}
+          {{item.Service.Address}}:{{item.Service.Port}}
+        {{else}}
+          {{item.Node.Address}}:{{item.Service.Port}}
+        {{/if}}
+      </li>
+    {{#if (gt item.Service.Tags.length 0)}}
+      <li>
+        <TagList @items={{item.Service.Tags}}/>
+      </li>
+    {{/if}}
+    </ul>
+  </ListCollection>
+{{/if}}
diff --git a/ui-v2/app/components/consul-service-instance-list/index.js b/ui-v2/app/components/consul-service-instance-list/index.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});
diff --git a/ui-v2/app/components/consul-service-list/index.hbs b/ui-v2/app/components/consul-service-list/index.hbs
@@ -1,14 +1,30 @@
 {{yield}}
 {{#if (gt items.length 0)}}
 <ListCollection @cellHeight={{73}} @items={{items}} class="consul-service-list" as |item index|>
-  <a href={{href-to routeName item.Name}}>
-    <span class={{service/health-checks item}}></span>
-    <span>
-      {{item.Name}}
-    </span>
-    <YieldSlot @name="metadata" @params={{block-params item}}>
-      {{yield}}
-    </YieldSlot>
+  <a href={{href-to routeName item.Name}} class={{service/health-checks item}}>
+    {{item.Name}}
   </a>
+  <ul>
+    <ConsulExternalSource @item={{item}} as |ExternalSource|>
+      <li>
+        <ExternalSource />
+      </li>
+    </ConsulExternalSource>
+  {{#if (not-eq item.InstanceCount 0)}}
+    <li>
+      {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}
+    </li>
+  {{/if}}
+  {{#if (get proxies item.Name)}}
+    <li class="proxy">
+      connected with proxy
+    </li>
+  {{/if}}
+  {{#if (gt items.Tags.length 0)}}
+    <li>
+      <TagList @items={{item.Tags}}/>
+    </li>
+  {{/if}}
+  </ul>
 </ListCollection>
 {{/if}}
diff --git a/ui-v2/app/components/consul-service-list/index.js b/ui-v2/app/components/consul-service-list/index.js
@@ -1,6 +1,5 @@
 import Component from '@ember/component';
-import Slotted from 'block-slots';
 
-export default Component.extend(Slotted, {
+export default Component.extend({
   tagName: '',
 });
diff --git a/ui-v2/app/components/list-collection/index.hbs b/ui-v2/app/components/list-collection/index.hbs
@@ -1,6 +1,6 @@
 <EmberNativeScrollable @tagName="ul" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
     <li></li>
     {{~#each _cells as |cell|~}}
-      <li style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
+      <li onclick={{action 'click'}} style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
     {{~/each~}}
 </EmberNativeScrollable>
diff --git a/ui-v2/app/components/list-collection/index.js b/ui-v2/app/components/list-collection/index.js
@@ -45,4 +45,9 @@ export default Component.extend(WithResizing, {
       this.updateScrollPosition();
     }
   },
+  actions: {
+    click: function(e) {
+      return this.dom.clickFirstAnchor(e, 'li');
+    },
+  },
 });
diff --git a/ui-v2/app/controllers/dc/services/index.js b/ui-v2/app/controllers/dc/services/index.js
@@ -21,19 +21,19 @@ export default Controller.extend(WithEventSource, WithSearching, {
   }),
   services: computed('items.[]', function() {
     return this.items.filter(function(item) {
-      return item.Kind === 'consul';
+      return typeof item.Kind === 'undefined';
     });
   }),
   proxies: computed('items.[]', function() {
-    return this.items.filter(function(item) {
-      return item.Kind === 'connect-proxy';
-    });
-  }),
-  withProxies: computed('proxies', function() {
     const proxies = {};
-    this.proxies.forEach(item => {
-      proxies[item.Name.replace('-proxy', '')] = true;
-    });
+    this.items
+      .filter(function(item) {
+        return item.Kind === 'connect-proxy';
+      })
+      .forEach(item => {
+        proxies[item.Name.replace('-proxy', '')] = true;
+      });
+
     return proxies;
   }),
 });
diff --git a/ui-v2/app/controllers/dc/services/show/instances.js b/ui-v2/app/controllers/dc/services/show/instances.js
@@ -3,6 +3,7 @@ import { get, computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import WithSearching from 'consul-ui/mixins/with-searching';
+
 export default Controller.extend(WithSearching, {
   dom: service('dom'),
   items: alias('item.Nodes'),
@@ -23,4 +24,12 @@ export default Controller.extend(WithSearching, {
       .add(this.items)
       .search(get(this, this.searchParams.serviceInstance));
   }),
+  keyedProxies: computed('proxies.[]', function() {
+    const proxies = {};
+    this.proxies.forEach(item => {
+      proxies[item.ServiceProxy.DestinationServiceID] = true;
+    });
+
+    return proxies;
+  }),
 });
diff --git a/ui-v2/app/helpers/service/instance-checks.js b/ui-v2/app/helpers/service/instance-checks.js
@@ -0,0 +1,36 @@
+import { helper } from '@ember/component/helper';
+
+export function healthChecks([items], hash) {
+  let ChecksCritical = 0;
+  let ChecksWarning = 0;
+  let ChecksPassing = 0;
+
+  items.forEach(item => {
+    switch (item.Status) {
+      case 'critical':
+        ChecksCritical += 1;
+        break;
+      case 'warning':
+        ChecksWarning += 1;
+        break;
+      case 'passing':
+        ChecksPassing += 1;
+        break;
+      default:
+        break;
+    }
+  });
+
+  switch (true) {
+    case ChecksCritical !== 0:
+      return 'critical';
+    case ChecksWarning !== 0:
+      return 'warning';
+    case ChecksPassing !== 0:
+      return 'passing';
+    default:
+      return 'empty';
+  }
+}
+
+export default helper(healthChecks);
diff --git a/ui-v2/app/routes/dc/services/show.js b/ui-v2/app/routes/dc/services/show.js
@@ -7,6 +7,7 @@ export default Route.extend({
   repo: service('repository/service'),
   intentionRepo: service('repository/intention'),
   chainRepo: service('repository/discovery-chain'),
+  proxyRepo: service('repository/proxy'),
   settings: service('settings'),
   model: function(params, transition = {}) {
     const dc = this.modelFor('dc').dc.Name;
@@ -16,12 +17,11 @@ export default Route.extend({
       intentions: this.intentionRepo.findByService(params.name, dc, nspace),
       urls: this.settings.findBySlug('urls'),
       dc: dc,
-      nspace: nspace,
     }).then(model => {
-      return hash({
-        chain: ['connect-proxy', 'mesh-gateway'].includes(get(model, 'item.Service.Kind'))
-          ? null
-          : this.chainRepo.findBySlug(params.name, dc, nspace).catch(function(e) {
+      return ['connect-proxy', 'mesh-gateway'].includes(get(model, 'item.Service.Kind'))
+        ? model
+        : hash({
+            chain: this.chainRepo.findBySlug(params.name, dc, nspace).catch(function(e) {
               const code = get(e, 'errors.firstObject.status');
               // Currently we are specifically catching a 500, but we return null
               // by default, so null for all errors.
@@ -38,8 +38,9 @@ export default Route.extend({
                   return null;
               }
             }),
-        ...model,
-      });
+            proxies: this.proxyRepo.findAllBySlug(params.name, dc, nspace),
+            ...model,
+          });
     });
   },
   setupController: function(controller, model) {

diff --git a/ui-v2/app/styles/base/typography/base-variables.scss b/ui-v2/app/styles/base/typography/base-variables.scss
@@ -6,6 +6,7 @@ $typo-size-100: 3.5rem;
 $typo-size-200: 1.8rem;
 $typo-size-300: 1.3rem;
 $typo-size-400: 1.2rem;
+$typo-size-450: 1.125rem;
 $typo-size-500: 1rem;
 $typo-size-600: 0.875rem;
 $typo-size-700: 0.8125rem;

diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss
@@ -115,4 +115,11 @@ main {
   #toolbar-toggle:checked + * {
     display: block;
   }
+  html.template-service.template-show #toolbar-toggle + * {
+    display: block;
+    padding: 4px;
+  }
+  html.template-service.template-show .actions {
+    display: none;
+  }
 }
diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss
@@ -20,6 +20,16 @@
 %app-view-header dt {
   font-weight: bold;
 }
+%app-view-header .title-bar {
+  display: flex;
+  align-items: center;
+}
+%app-view-header .title-bar > h1 {
+  border: 0;
+}
+%app-view-header .title-bar > span {
+  margin-left: 8px;
+}
 /* units */
 %app-view {
   margin-top: 50px;

diff --git a/ui-v2/app/styles/components/composite-row/index.scss b/ui-v2/app/styles/components/composite-row/index.scss
@@ -1,13 +1,13 @@
 @import './layout';
 @import './skin';
-%composite-row a:hover,
-%composite-row a:focus,
-%composite-row a:active {
+%composite-row:hover,
+%composite-row:focus,
+%composite-row:active {
   @extend %composite-row-intent;
 }
-%composite-row > a > span {
+%composite-row > a {
   @extend %composite-row-header;
 }
-%composite-row > a > ul {
+%composite-row > ul {
   @extend %composite-row-detail;
 }
diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss
@@ -1,4 +1,5 @@
-%composite-row a {
+%composite-row {
+  cursor: pointer;
   display: block;
   box-sizing: border-box;
   padding: 12px;
@@ -19,3 +20,6 @@
 %composite-row-detail > li:not(:first-child) {
   margin-left: 12px;
 }
+%composite-row-detail .node::before {
+  margin-top: 2px;
+}