ui: ServiceInstance.Name should be the Service.Name, never the Service.ID (#9316)

* ui: ServiceInstance.Name should be the Service.Name, never the ID

The ServiceInstance.ID should try Service.ID and fallback to
Service.Name, not ServiceInstance.Name. ServiceInstance.Name is just an
alias to Service.Name which is always set.

ui/packages/consul-ui/app/models/service-instance.js

@@ -19,7 +19,11 @@ export default class ServiceInstance extends Model {
   @attr('number') SyncTime;
   @attr() meta;
 
-  @or('Service.ID', 'Service.Service') Name;
+  // The name is the Name of the Service (the grouping of instances)
+  @alias('Service.Service') Name;
+
+  // If the ID is blank fallback to the Service.Service (the Name)
+  @or('Service.ID', 'Service.Service') ID;
   @or('Service.Address', 'Node.Service') Address;
 
   @alias('Service.Tags') Tags;

ui/packages/consul-ui/tests/acceptance/dc/services/show.feature

@@ -112,4 +112,5 @@ Feature: dc / services / show: Show Service
       dc: dc1
       service: service-0
     ---
-    And I see href on the metricsAnchor like "https://example.com?service-0-with-id&dc1"
+    # The Metrics dashboard should use the Service.Name not the ID
+    And I see href on the metricsAnchor like "https://example.com?service-0&dc1"