[Monitoring] Address shard allocation color mismatch (#34086) (#35422)

* Address mismatch and add a couple starter tests

* More tests and fixing a bug

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/__snapshots__/shard.test.js.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shard should show for assigned primary shards 1`] = `
+<div
+  className="shard primary started master"
+  data-shard-classification="shard primary started master 0"
+  data-shard-tooltip="Started"
+  data-test-subj="shardIcon"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <EuiBadge
+    color="primary"
+    iconSide="left"
+  >
+    0
+  </EuiBadge>
+</div>
+`;
+
+exports[`Shard should show for assigned replica shards 1`] = `
+<div
+  className="shard replica started master"
+  data-shard-classification="shard replica started master 0"
+  data-shard-tooltip="Started"
+  data-test-subj="shardIcon"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <EuiBadge
+    color="secondary"
+    iconSide="left"
+  >
+    0
+  </EuiBadge>
+</div>
+`;
+
+exports[`Shard should show for initializing shards 1`] = `
+<div
+  className="shard primary initializing master"
+  data-shard-classification="shard primary initializing master 0"
+  data-shard-tooltip="Initializing"
+  data-test-subj="shardIcon"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <EuiBadge
+    color="default"
+    iconSide="left"
+  >
+    0
+  </EuiBadge>
+</div>
+`;
+
+exports[`Shard should show for relocating shards 1`] = `
+<div
+  className="shard primary relocating master"
+  data-shard-classification="shard primary relocating master 0"
+  data-shard-tooltip="Relocating"
+  data-test-subj="shardIcon"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <EuiBadge
+    color="accent"
+    iconSide="left"
+  >
+    0
+  </EuiBadge>
+</div>
+`;
+
+exports[`Shard should show unassigned primary shards 1`] = `
+<div
+  className="shard primary unassigned emergency master"
+  data-shard-classification="shard primary unassigned emergency master 0"
+  data-shard-tooltip="Unassigned"
+  data-test-subj="shardIcon"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <EuiBadge
+    color="danger"
+    iconSide="left"
+  >
+    0
+  </EuiBadge>
+</div>
+`;
+
+exports[`Shard should show unassigned replica shards 1`] = `
+<div
+  className="shard replica unassigned"
+  data-shard-classification="shard replica unassigned 0"
+  data-shard-tooltip="Unassigned"
+  data-test-subj="shardIcon"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <EuiBadge
+    color="warning"
+    iconSide="left"
+  >
+    0
+  </EuiBadge>
+</div>
+`;

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js

@@ -13,25 +13,34 @@ import { i18n } from '@kbn/i18n';
 import { EuiToolTip, EuiBadge } from '@elastic/eui';
 
 function getColor(classes) {
-  return classes.split(' ').reduce((color, cls) => {
-    if (color) {
-      return color;
-    }
+  const classList = classes.split(' ');
 
-    switch (cls) {
-      case 'primary':
-        return 'hollow';
-      case 'replica':
-        return 'secondary';
-      case 'relocation':
-        return 'accent';
-      case 'initializing':
-        return 'default';
-      case 'emergency':
-      case 'unassigned':
-        return 'danger';
+  if (classList.includes('emergency')) {
+    return 'danger';
+  }
+
+  if (classList.includes('unassigned')) {
+    if (classList.includes('replica')) {
+      return 'warning';
     }
-  }, null);
+    return 'danger';
+  }
+
+  if (classList.includes('relocating')) {
+    return 'accent';
+  }
+
+  if (classList.includes('initializing')) {
+    return 'default';
+  }
+
+  if (classList.includes('primary')) {
+    return 'primary';
+  }
+
+  if (classList.includes('replica')) {
+    return 'secondary';
+  }
 }
 
 export class Shard extends React.Component {

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.test.js

@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Shard } from './shard';
+
+describe('Shard', () => {
+  it('should show unassigned primary shards', () => {
+    const props = {
+      shard: {
+        state: 'UNASSIGNED',
+        primary: true,
+        shard: 0,
+        tooltip_message: 'Unassigned',
+        type: 'shard',
+        master: true
+      }
+    };
+
+    const component = shallow(<Shard {...props}/>);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should show unassigned replica shards', () => {
+    const props = {
+      shard: {
+        state: 'UNASSIGNED',
+        primary: false,
+        shard: 0,
+        tooltip_message: 'Unassigned',
+        type: 'shard',
+        master: false
+      }
+    };
+
+    const component = shallow(<Shard {...props}/>);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should show for assigned primary shards', () => {
+    const props = {
+      shard: {
+        state: 'STARTED',
+        primary: true,
+        shard: 0,
+        tooltip_message: 'Started',
+        type: 'shard',
+        master: true
+      }
+    };
+
+    const component = shallow(<Shard {...props}/>);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should show for assigned replica shards', () => {
+    const props = {
+      shard: {
+        state: 'STARTED',
+        primary: false,
+        shard: 0,
+        tooltip_message: 'Started',
+        type: 'shard',
+        master: true
+      }
+    };
+
+    const component = shallow(<Shard {...props}/>);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should show for relocating shards', () => {
+    const props = {
+      shard: {
+        state: 'RELOCATING',
+        primary: true,
+        shard: 0,
+        tooltip_message: 'Relocating',
+        type: 'shard',
+        master: true
+      }
+    };
+
+    const component = shallow(<Shard {...props}/>);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should show for initializing shards', () => {
+    const props = {
+      shard: {
+        state: 'INITIALIZING',
+        primary: true,
+        shard: 0,
+        tooltip_message: 'Initializing',
+        type: 'shard',
+        master: true
+      }
+    };
+
+    const component = shallow(<Shard {...props}/>);
+    expect(component).toMatchSnapshot();
+  });
+});