Monitoring Angular directives to use React components

x-pack/plugins/monitoring/public/components/beats/beat/beat.js

@@ -5,8 +5,8 @@
  */
 
 import React, { Fragment } from 'react';
-import { MonitoringTimeseriesContainer } from 'plugins/monitoring/components';
-import { formatMetric } from 'plugins/monitoring/lib/format_number';
+import { MonitoringTimeseriesContainer } from '../../chart';
+import { formatMetric } from '../../../lib/format_number';
 
 function renderTransportAddress(summary) {
   let output = null;

x-pack/plugins/monitoring/public/components/beats/overview/overview.js

@@ -9,7 +9,7 @@ import { LatestActive } from './latest_active';
 import { LatestVersions } from './latest_versions';
 import { LatestTypes } from './latest_types';
 import { Stats } from '../';
-import { MonitoringTimeseriesContainer } from 'plugins/monitoring/components';
+import { MonitoringTimeseriesContainer } from '../../chart';
 import { EuiCallOut } from '@elastic/eui';
 
 function renderLatestActive(latestActive, latestTypes, latestVersions) {

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

@@ -11,7 +11,7 @@ import { LARGE_FLOAT, LARGE_BYTES, LARGE_ABBREVIATED } from '../../../../common/
 import { formatMetric } from '../../../lib/format_number';
 import { ElasticsearchStatusIcon } from '../status_icon';
 import { ClusterStatus } from '../cluster_status';
-import { MonitoringTable } from '../../';
+import { MonitoringTable } from '../../table';
 import { EuiLink } from '@elastic/eui';
 import { KuiTableRowCell, KuiTableRow } from '@kbn/ui-framework/components';
 import { SystemIndicesCheckbox } from './system_indices_checkbox';

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

@@ -10,7 +10,7 @@ import { SORT_ASCENDING } from '../../../../common/constants';
 import { NodeStatusIcon } from '../node';
 import { extractIp } from '../../../lib/extract_ip'; // TODO this is only used for elasticsearch nodes summary / node detail, so it should be moved to components/elasticsearch/nodes/lib
 import { ClusterStatus } from '../cluster_status';
-import { MonitoringTable } from '../../';
+import { MonitoringTable } from '../../table';
 import { MetricCell, OfflineCell } from './cells';
 import { EuiLink, EuiToolTip } from '@elastic/eui';
 import { KuiTableRowCell, KuiTableRow } from '@kbn/ui-framework/components';

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

@@ -7,7 +7,7 @@
 import React, { Fragment } from 'react';
 import { ClusterStatus } from '../cluster_status';
 import { ShardActivity } from '../shard_activity';
-import { MonitoringTimeseriesContainer } from 'plugins/monitoring/components';
+import { MonitoringTimeseriesContainer } from '../../chart';
 
 export function ElasticsearchOverview({
   clusterStatus,

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

@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { MonitoringTimeseriesContainer } from './chart';
-export { MonitoringTable } from './table';
-export { Tooltip } from './tooltip';
+
+/*
+ * This file should only export page-level components for view controllers to
+ * mount React to the DOM
+ */
 export { NoData } from './no_data';
 export { License } from './license';
-export { StatusIcon } from './status_icon';
-export { SummaryStatus } from './summary_status'; // TODO this line can be removed, component is only used by other components
 export { PageLoading } from './page_loading';
 export {
   ElasticsearchOverview,

x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Summary Status Component should allow label to be optional 1`] = `
+<div
+  class="monitoring-summary-status"
+  role="status"
+>
+  <div
+    class="monitoring-summary-status__content"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero monitoring-summary-status__eui-content"
+        data-test-subj="transportAddress"
+      >
+        <strong>
+          127.0.0.1:9300
+        </strong>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero monitoring-summary-status__eui-content"
+        data-test-subj="documentCount"
+      >
+        Documents: 
+        <strong>
+          24.8k
+        </strong>
+      </div>
+      <div
+        class="euiFlexItem monitoring-summary-status__eui-content"
+      >
+        <div
+          class="monitoring-summary-status__status-indicator"
+        >
+          Status: 
+          <span
+            class="kuiStatusText"
+          >
+            <img
+              alt="Status: yellow"
+              data-test-subj="statusIcon"
+              src="../plugins/monitoring/icons/health-yellow.svg"
+            />
+          </span>
+           Yellow
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Summary Status Component should allow status to be optional 1`] = `
+<div
+  class="monitoring-summary-status"
+  role="status"
+>
+  <div
+    class="monitoring-summary-status__content"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero monitoring-summary-status__eui-content"
+        data-test-subj="freeDiskSpace"
+      >
+        Free Disk Space: 
+        <strong>
+          173.9 GB
+        </strong>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero monitoring-summary-status__eui-content"
+        data-test-subj="documentCount"
+      >
+        Documents: 
+        <strong>
+          24.8k
+        </strong>
+      </div>
+      <div
+        class="euiFlexItem monitoring-summary-status__eui-content"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Summary Status Component should render metrics in a summary bar 1`] = `
+<div
+  class="monitoring-summary-status"
+  role="status"
+>
+  <div
+    class="monitoring-summary-status__content"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero monitoring-summary-status__eui-content"
+        data-test-subj="freeDiskSpace"
+      >
+        Free Disk Space: 
+        <strong>
+          173.9 GB
+        </strong>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero monitoring-summary-status__eui-content"
+        data-test-subj="documentCount"
+      >
+        Documents: 
+        <strong>
+          24.8k
+        </strong>
+      </div>
+      <div
+        class="euiFlexItem monitoring-summary-status__eui-content"
+      >
+        <div
+          class="monitoring-summary-status__status-indicator"
+        >
+          Status: 
+          <span
+            class="kuiStatusText"
+          >
+            <img
+              alt="Status: green"
+              data-test-subj="statusIcon"
+              src="../plugins/monitoring/icons/health-green.svg"
+            />
+          </span>
+           Green
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

x-pack/plugins/monitoring/public/components/summary_status/index.js

@@ -4,64 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { isEmpty, capitalize } from 'lodash';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { StatusIcon } from '../';
-
-const wrapChild = ({ label, value, dataTestSubj }, index) => (
-  <EuiFlexItem
-    key={`summary-status-item-${index}`}
-    grow={false}
-    className="monitoring-summary-status__eui-content"
-    data-test-subj={dataTestSubj}
-  >
-    {label ? label + ': ' : null}
-    <strong>{value}</strong>
-  </EuiFlexItem>
-);
-
-const DefaultIconComponent = ({ status }) => (
-  <Fragment>
-    Status: {(
-      <StatusIcon type={status.toUpperCase()} label={`Status: ${status}`} />
-    )}
-  </Fragment>
-);
-
-const StatusIndicator = ({ status, isOnline, IconComponent }) => {
-  if (isEmpty(status)) {
-    return null;
-  }
-
-  return (
-    <div className="monitoring-summary-status__status-indicator">
-      <IconComponent status={status} isOnline={isOnline} />{' '}
-      {capitalize(status)}
-    </div>
-  );
-};
-
-export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, ...props }) {
-  return (
-    <div className="monitoring-summary-status" role="status">
-      <div className="monitoring-summary-status__content" {...props}>
-        <EuiFlexGroup gutterSize="xs" alignItems="center">
-          {metrics.map(wrapChild)}
-
-          <EuiFlexItem
-            grow={true}
-            className="monitoring-summary-status__eui-content"
-          >
-            <StatusIndicator status={status} IconComponent={IconComponent} isOnline={isOnline} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
-    </div>
-  );
-}
-
-SummaryStatus.propTypes = {
-  metrics: PropTypes.array.isRequired
-};
+export { SummaryStatus } from './summary_status';

x-pack/plugins/monitoring/public/components/summary_status/summary_status.js

@@ -0,0 +1,67 @@
+/*
+ * 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, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty, capitalize } from 'lodash';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { StatusIcon } from '../status_icon';
+
+const wrapChild = ({ label, value, dataTestSubj }, index) => (
+  <EuiFlexItem
+    key={`summary-status-item-${index}`}
+    grow={false}
+    className="monitoring-summary-status__eui-content"
+    data-test-subj={dataTestSubj}
+  >
+    {label ? label + ': ' : null}
+    <strong>{value}</strong>
+  </EuiFlexItem>
+);
+
+const DefaultIconComponent = ({ status }) => (
+  <Fragment>
+    Status: {(
+      <StatusIcon type={status.toUpperCase()} label={`Status: ${status}`} />
+    )}
+  </Fragment>
+);
+
+const StatusIndicator = ({ status, isOnline, IconComponent }) => {
+  if (isEmpty(status)) {
+    return null;
+  }
+
+  return (
+    <div className="monitoring-summary-status__status-indicator">
+      <IconComponent status={status} isOnline={isOnline} />{' '}
+      {capitalize(status)}
+    </div>
+  );
+};
+
+export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, ...props }) {
+  return (
+    <div className="monitoring-summary-status" role="status">
+      <div className="monitoring-summary-status__content" {...props}>
+        <EuiFlexGroup gutterSize="xs" alignItems="center">
+          {metrics.map(wrapChild)}
+
+          <EuiFlexItem
+            grow={true}
+            className="monitoring-summary-status__eui-content"
+          >
+            <StatusIndicator status={status} IconComponent={IconComponent} isOnline={isOnline} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    </div>
+  );
+}
+
+SummaryStatus.propTypes = {
+  metrics: PropTypes.array.isRequired
+};