Replication Primary Dashboard: handle errors (#8845)

* use h3 instead of code elements

* use correct property names for StateDisplay

* WIP

* remove todo

* move cluster states into a map; make status menu icon match cluster state

* show error in state card using the same state map in the cluster model

* whitespace

* move cluster-states into a helper and update usage

* use circle success icon for stream-wals because that is the ideal state

* more refactoring of cluster state display

* use new cluster-states helper

* whitespace

* use clusterStates helper in replication secondary card

* remove extra import

* add default values for when state isn't recognized

* make sure that state exists before getting state details from clusterStates helper

* be more strict when state cannot be found

* use brace expansion to fix linting error

* add tests for error states

* fix text wrapping issue on secondary cards; make titles match mocks

* use unknown if metric isn't foudn

* remove extra border on selectable card when there is an error

* use outline square in status menu for error

ui/lib/core/addon/components/replication-dashboard.js

@@ -8,7 +8,6 @@ export default Component.extend({
   data: null,
   replicationDetails: null,
   isSecondary: null,
-  dr: null,
   isSyncing: computed('replicationDetails', 'isSecondary', function() {
     const { state } = this.replicationDetails;
     const isSecondary = this.isSecondary;

ui/tests/integration/components/replication-primary-card-test.js

@@ -6,7 +6,7 @@ import { CLUSTER_STATES } from 'core/helpers/cluster-states';
 import hbs from 'htmlbars-inline-precompile';
 const resolver = engineResolverFor('replication');
 
-module('Integration | Component | replication-primary-card', function(hooks) {
+module('Integration | Enterprise | Component | replication-primary-card', function(hooks) {
   setupRenderingTest(hooks, { resolver });
 
   test('it renders', async function(assert) {