Make sure the dc menu is as useful as possible when things go wrong

1. Check the dc's model for both dcs list and the requested dc.
2. If the dc model doesn't exist use and empty array for dcs and a fake
dc with the Name 'Error' as we can't even trust what is in the
`paramsFor`

ui-v2/app/routes/application.js

@@ -49,9 +49,16 @@ export default Route.extend({
       if (error.status === '') {
         error.message = 'Error';
       }
+      const model = this.modelFor('dc');
       hash({
         error: error,
-        dc: error.status.toString().indexOf('5') !== 0 ? get(this, 'repo').getActive() : null,
+        dc:
+          error.status.toString().indexOf('5') !== 0
+            ? get(this, 'repo').getActive()
+            : model && model.dc
+              ? model.dc
+              : { Name: 'Error' },
+        dcs: model && model.dcs ? model.dcs : [],
       })
         .then(model => {
           removeLoading();

ui-v2/app/templates/error.hbs

@@ -1,7 +1,7 @@
 {{#hashicorp-consul id="wrapper" dcs=dcs dc=dc}}
     {{#app-view class="error show"}}
         {{#block-slot 'header'}}
-            <h1>
+            <h1 data-test-error>
 {{#if error.status }}
                 {{error.status}} ({{error.message}})
 {{else}}

ui-v2/tests/acceptance/dc/services/error.feature

@@ -0,0 +1,27 @@
+@setupApplicationTest
+Feature: dc / services / error
+  Scenario: Arriving at the service page that doesn't exist
+    Given 2 datacenter models from yaml
+    ---
+    - dc-1
+    - dc-2
+    ---
+    When I visit the services page for yaml
+    ---
+      dc: 404-datacenter
+    ---
+    Then I see the text "404 (Page not found)" in "[data-test-error]"
+  Scenario: Arriving at the service page
+    Given 2 datacenter models from yaml
+    ---
+    - dc-1
+    - dc-2
+    ---
+    Given the url "/v1/internal/ui/services" responds with a 500 status
+    When I visit the services page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then I see the text "500 (The backend responded with an error)" in "[data-test-error]"
+    And I click "[data-test-datacenter-selected]"
+    And I see 2 datacenter models

ui-v2/tests/acceptance/steps/dc/services/error-steps.js

@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}

ui-v2/tests/steps.js

@@ -53,6 +53,10 @@ export default function(assert) {
           return create(number, model, data);
         }
       )
+      // TODO: Abstract this away from HTTP
+      .given(['the url "$url" responds with a $status status'], function(url, status) {
+        return api.server.respondWithStatus(url, parseInt(status));
+      })
       // interactions
       .when('I visit the $name page', function(name) {
         currentPage = pages[name];

ui-v2/yarn.lock

@@ -86,8 +86,8 @@
   resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.1.0.tgz#658f9e89208fa23f251ca66c66aeb7241a13f23f"
 
 "@hashicorp/ember-cli-api-double@^1.0.2":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@hashicorp/ember-cli-api-double/-/ember-cli-api-double-1.1.1.tgz#9380fdcf404f30f9d2e2a6422bfd83fe0dbe413f"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/ember-cli-api-double/-/ember-cli-api-double-1.2.0.tgz#aed3a9659abb3f3c56d77e400abc7fcbdcf2b78b"
   dependencies:
     "@hashicorp/api-double" "^1.1.0"
     array-range "^1.0.1"