Node listing page

x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js

@@ -0,0 +1,59 @@
+/*
+ * 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 {
+  EuiPage,
+  EuiPageContent,
+  EuiPageBody,
+  EuiSpacer,
+  EuiFlexGrid,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { NodeDetailStatus } from '../node_detail_status';
+import { MonitoringTimeseriesContainer } from '../../chart';
+import { ShardAllocation } from '../shard_allocation/shard_allocation';
+
+export const Node = ({
+  nodeSummary,
+  metrics,
+  scope,
+  kbnUrl,
+  ...props
+}) => {
+  const metricsToShow = [
+    metrics.node_jvm_mem,
+    metrics.node_mem,
+    metrics.node_cpu_metric,
+    metrics.node_load_average,
+    metrics.node_latency,
+    metrics.node_segment_count,
+  ];
+
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContent>
+          <NodeDetailStatus stats={nodeSummary} />
+          <EuiSpacer size="m"/>
+          <EuiFlexGrid columns={2} gutterSize="none">
+            {metricsToShow.map((metric, index) => (
+              <EuiFlexItem key={index} style={{ width: '50%' }}>
+                <MonitoringTimeseriesContainer
+                  series={metric}
+                  {...props}
+                />
+                <EuiSpacer size="m"/>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGrid>
+          <EuiSpacer size="m"/>
+          <ShardAllocation scope={scope} kbnUrl={kbnUrl}/>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};

x-pack/plugins/monitoring/public/components/elasticsearch/node_detail_status/index.js

@@ -26,6 +26,10 @@ function NodeDetailStatusUI({ stats, intl }) {
 
   const metrics = [
     {
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.elasticsearch.nodeDetailStatus.transportAddress',
+        defaultMessage: 'Transport Address',
+      }),
       value: transportAddress,
       'data-test-subj': 'transportAddress'
     },

x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/_shard_allocation.scss → x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss

@@ -80,44 +80,18 @@ monitoring-shard-allocation {
   .shard {
     align-self: center;
     padding: 5px 7px;
-    background-color: $euiColorPrimary;
     font: 10px sans-serif;
     border-left: 1px solid $euiColorEmptyShade;
     position: relative;
-    color: $euiColorGhost;
 
     .shard-tooltip {
       padding: 5px;
       bottom: 25px;
       left: 0;
-      background-color: $euiColorLightShade;
       position: absolute;
-      color: $euiColorDarkShade;
       border: 1px solid $euiColorLightShade;
       white-space: nowrap;
     }
-
-    &.replica {
-      background-color: tintOrShade($euiColorPrimary, 15%, 15%);
-    }
-
-    &.unassigned {
-      background-color: $euiColorMediumShade !important;
-      color: $euiColorFullShade;
-    }
-
-    &.emergency {
-      background-color: $euiColorDanger !important;
-      color: $euiColorFullShade;
-    }
-
-    &.relocating {
-      background-color: $euiColorVis3;
-    }
-
-    &.initializing {
-      background-color: tintOrShade($euiColorVis3, 15%, 15%);
-    }
   }
 
   .legend {

x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/assigned.js → x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js

@@ -9,8 +9,8 @@
 import { get, sortBy } from 'lodash';
 import React from 'react';
 import { Shard } from './shard';
-import { calculateClass } from '../lib/calculateClass';
-import { generateQueryAndLink } from '../lib/generateQueryAndLink';
+import { calculateClass } from '../lib/calculate_class';
+import { generateQueryAndLink } from '../lib/generate_query_and_link';
 import {
   EuiKeyboardAccessible,
 } from '@elastic/eui';

x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/clusterView.js → x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/cluster_view.js

@@ -7,8 +7,8 @@
 
 
 import React from 'react';
-import { TableHead } from './tableHead';
-import { TableBody } from './tableBody';
+import { TableHead } from './table_head';
+import { TableBody } from './table_body';
 import { i18n } from '@kbn/i18n';
 
 export class ClusterView extends React.Component {
@@ -24,7 +24,7 @@ export class ClusterView extends React.Component {
     this.state = {
       labels: props.scope.labels || [],
       showing: props.scope.showing || [],
-      shardStats: props.shardStats,
+      shardStats: props.scope.pageData.shardStats,
       showSystemIndices: props.showSystemIndices,
       toggleShowSystemIndices: props.toggleShowSystemIndices,
       angularChangeUrl: (url) => {
@@ -45,7 +45,7 @@ export class ClusterView extends React.Component {
 
   componentWillMount() {
     this.props.scope.$watch('showing', this.setShowing);
-    this.props.scope.$watch('shardStats', this.setShardStats);
+    this.props.scope.$watch(() => this.props.scope.pageData.shardStats, this.setShardStats);
   }
 
   hasUnassigned = () => {

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

@@ -7,9 +7,32 @@
 
 
 import React from 'react';
-import { calculateClass } from '../lib/calculateClass';
+import { calculateClass } from '../lib/calculate_class';
 import { vents } from '../lib/vents';
 import { i18n } from '@kbn/i18n';
+import { EuiTextColor } from '@elastic/eui';
+
+function getColor(classes) {
+  return classes.split(' ').reduce((color, cls) => {
+    if (color) {
+      return color;
+    }
+
+    switch (cls) {
+      case 'primary':
+        return 'ghost';
+      case 'replica':
+        return 'secondary';
+      case 'relocation':
+        return 'accent';
+      case 'initializing':
+        return 'default';
+      case 'emergency':
+      case 'unassigned':
+        return 'danger';
+    }
+  }, null);
+}
 
 export class Shard extends React.Component {
   static displayName = i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.shardDisplayName', {
@@ -71,6 +94,7 @@ export class Shard extends React.Component {
     }
 
     const classes = calculateClass(shard);
+    const color = getColor(classes);
     const classification = classes + ' ' + shard.shard;
 
     // data attrs for automated testing verification
@@ -83,7 +107,9 @@ export class Shard extends React.Component {
         data-shard-classification={classification}
         data-test-subj="shardIcon"
       >
-        {tooltip}{shard.shard}
+        <EuiTextColor color={color}>
+          {tooltip}{shard.shard}
+        </EuiTextColor>
       </div>
     );
   }

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

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ShardAllocation } from './shard_allocation';

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

@@ -0,0 +1,89 @@
+/*
+ * 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 { EuiTitle, EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { ClusterView } from './components/cluster_view';
+
+export const ShardAllocation = ({
+  scope,
+  kbnUrl,
+  shardStats,
+}) => {
+  const types = [
+    {
+      label: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.primaryLabel', {
+        defaultMessage: 'Primary'
+      }),
+      color: 'primary'
+    },
+    {
+      label: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.replicaLabel', {
+        defaultMessage: 'Replica'
+      }),
+      color: 'secondary'
+    },
+    {
+      label: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.relocatingLabel', {
+        defaultMessage: 'Relocating'
+      }),
+      color: 'accent'
+    },
+    {
+      label: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.initializingLabel', {
+        defaultMessage: 'Initializing'
+      }),
+      color: 'default'
+    },
+    {
+      label: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.unassignedPrimaryLabel', {
+        defaultMessage: 'Unassigned Primary'
+      }),
+      color: 'danger'
+    },
+    {
+      label: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.unassignedReplicaLabel', {
+        defaultMessage: 'Unassigned Replica'
+      }),
+      color: 'warning'
+    },
+  ];
+
+  return (
+    <div className="monCluster">
+      <EuiTitle>
+        <h1>
+          <FormattedMessage
+            id="xpack.monitoring.elasticsearch.shardAllocation.shardLegendTitle"
+            defaultMessage="Shard Legend"
+          />
+        </h1>
+      </EuiTitle>
+      <EuiSpacer size="xs"/>
+      <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+        {
+          types.map(type => (
+            <EuiFlexItem grow={false} key={type.label}>
+              <EuiBadge color={type.color}>
+                {type.label}
+              </EuiBadge>
+            </EuiFlexItem>
+          ))
+        }
+      </EuiFlexGroup>
+      <EuiSpacer size="s"/>
+      <ClusterView
+        scope={scope}
+        shardStats={shardStats}
+        kbnUrl={kbnUrl}
+        showSystemIndices={scope.showSystemIndices}
+        toggleShowSystemIndices={scope.toggleShowSystemIndices}
+      />
+    </div>
+  );
+};

x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/transformers/nodes_by_indices.js → x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/transformers/nodes_by_indices.js

@@ -7,7 +7,7 @@
 
 
 import _ from 'lodash';
-import { hasPrimaryChildren } from '../lib/hasPrimaryChildren';
+import { hasPrimaryChildren } from '../lib/has_primary_children';
 import { decorateShards } from '../lib/decorate_shards';
 
 export function nodesByIndices() {

x-pack/plugins/monitoring/public/directives/all.js

@@ -13,8 +13,6 @@ import './elasticsearch/cluster_status';
 import './elasticsearch/index_summary';
 import './elasticsearch/node_summary';
 import './elasticsearch/ml_job_listing';
-import './elasticsearch/shard_allocation';
-import './elasticsearch/shard_allocation/directives/clusterView';
 import './logstash/cluster_status';
 import './logstash/listing';
 import './logstash/node_summary';