ui: Make only existing services in Upstreams linkabled with hover effect (#7943)

* Create service/exist helper to be used in ListCollection list items

* Make only existing services in Upstreams linkabled with hover effect

ui-v2/app/components/list-collection/index.hbs

@@ -1,6 +1,15 @@
-<EmberNativeScrollable @tagName="ul" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
+<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 onclick={{action 'click'}} style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
+      <li onclick={{action 'click'}} style={{{cell.style}}} class={{if (service/exists cell.item) 'linkable' }}>
+        {{yield cell.item cell.index }}
+      </li>
     {{~/each~}}
 </EmberNativeScrollable>

ui-v2/app/helpers/service/exists.js

@@ -0,0 +1,11 @@
+import { helper } from '@ember/component/helper';
+
+export function serviceExists([item], hash) {
+  if (typeof item.InstanceCount === 'undefined') {
+    return false;
+  }
+
+  return item.InstanceCount > 0;
+}
+
+export default helper(serviceExists);

ui-v2/app/styles/components/composite-row.scss

@@ -6,7 +6,7 @@
   @extend %composite-row;
 }
 /* hoverable rows */
-.consul-upstream-list > ul > li:not(:first-child),
+%composite-row.linkable,
 .consul-gateway-service-list > ul > li:not(:first-child),
 .consul-service-instance-list > ul > li:not(:first-child),
 .consul-service-list > ul > li:not(:first-child) {

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

@@ -7,9 +7,15 @@
       </p>
     {{#let item.Service.Namespace as |nspace|}}
       <ListCollection @items={{gateway.Services}} class="consul-upstream-list" as |item index|>
+      {{#if (service/exists item)}}
         <a data-test-service-name href={{href-to 'dc.services.show' item.Name}}>
           {{item.Name}}
         </a>
+      {{else}}
+        <p data-test-service-name>
+          {{item.Name}}
+        </p>
+      {{/if}}
         <ul>
         {{#if (env 'CONSUL_NSPACES_ENABLED')}}
           {{#if (not-eq item.Namespace nspace)}}

ui-v2/tests/integration/helpers/service/exists-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | service/exists', function(hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function(assert) {
+    this.set('inputValue', { InstanceCount: 3 });
+
+    await render(hbs`{{service/exists inputValue}}`);
+
+    assert.equal(this.element.textContent.trim(), 'true');
+  });
+});