Merge pull request #4545 from hashicorp/f-ui-no-leader-error

UI: Specialized No Leader error page

ui/app/adapters/application.js

@@ -3,6 +3,7 @@ import { computed, get } from '@ember/object';
 import RESTAdapter from 'ember-data/adapters/rest';
 import codesForError from '../utils/codes-for-error';
 import removeRecord from '../utils/remove-record';
+import { default as NoLeaderError, NO_LEADER } from '../utils/no-leader-error';
 
 export const namespace = 'v1';
 
@@ -21,6 +22,13 @@ export default RESTAdapter.extend({
     }
   }),
 
+  handleResponse(status, headers, payload) {
+    if (status === 500 && payload === NO_LEADER) {
+      return new NoLeaderError();
+    }
+    return this._super(...arguments);
+  },
+
   findAll() {
     return this._super(...arguments).catch(error => {
       const errorCodes = codesForError(error);

ui/app/controllers/application.js

@@ -4,6 +4,7 @@ import { run } from '@ember/runloop';
 import { observer, computed } from '@ember/object';
 import Ember from 'ember';
 import codesForError from '../utils/codes-for-error';
+import NoLeaderError from '../utils/no-leader-error';
 
 export default Controller.extend({
   config: service(),
@@ -37,6 +38,11 @@ export default Controller.extend({
     return this.get('errorCodes').includes('500');
   }),
 
+  isNoLeader: computed('error', function() {
+    const error = this.get('error');
+    return error instanceof NoLeaderError;
+  }),
+
   throwError: observer('error', function() {
     if (this.get('config.isDev')) {
       run.next(() => {

ui/app/templates/application.hbs

@@ -4,7 +4,12 @@
 {{else}}
   <div class="error-container">
     <div data-test-error class="error-message">
-      {{#if is500}}
+      {{#if isNoLeader}}
+        <h1 data-test-error-title class="title is-spaced">No Cluster Leader</h1>
+        <p data-test-error-message class="subtitle">
+          The cluster has no leader. <a href="https://www.nomadproject.io/guides/outage.html"> Read about Outage Recovery.</a>
+        </p>
+      {{else if is500}}
         <h1 data-test-error-title class="title is-spaced">Server Error</h1>
         <p data-test-error-message class="subtitle">A server error prevented data from being sent to the client.</p>
       {{else if is404}}

ui/app/utils/no-leader-error.js

@@ -0,0 +1,7 @@
+import { AdapterError } from 'ember-data/adapters/errors';
+
+export const NO_LEADER = 'No cluster leader';
+
+export default AdapterError.extend({
+  message: NO_LEADER,
+});

ui/tests/acceptance/application-errors-test.js

@@ -52,3 +52,18 @@ test('the 403 error page links to the ACL tokens page', function(assert) {
     );
   });
 });
+
+test('the no leader error state gets its own error message', function(assert) {
+  server.pretender.get('/v1/jobs', () => [500, {}, 'No cluster leader']);
+
+  JobsList.visit();
+
+  andThen(() => {
+    assert.ok(JobsList.error.isPresent, 'An error is shown');
+    assert.equal(
+      JobsList.error.title,
+      'No Cluster Leader',
+      'The error is specifically for the lack of a cluster leader'
+    );
+  });
+});