Convert status page to EUI (#21491)

* Convert the status_page plugin to EUI

* Fix uiColor for disabled state

src/core_plugins/status_page/index.js

@@ -24,7 +24,8 @@ export default function (kibana) {
         title: 'Server Status',
         main: 'plugins/status_page/status_page',
         hidden: true,
-        url: '/status'
+        url: '/status',
+        styleSheetPath: `${__dirname}/public/index.scss`
       }
     }
   });

src/core_plugins/status_page/public/components/__snapshots__/metric_tiles.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`byte metric 1`] = `
+<EuiCard
+  description="Heap Total"
+  layout="horizontal"
+  textAlign="center"
+  title="1.50 GB"
+  titleElement="span"
+/>
+`;
+
+exports[`float metric 1`] = `
+<EuiCard
+  description="Load"
+  layout="horizontal"
+  textAlign="center"
+  title="4.05, 3.37, 3.12"
+  titleElement="span"
+/>
+`;
+
+exports[`general metric 1`] = `
+<EuiCard
+  description="A metric"
+  layout="horizontal"
+  textAlign="center"
+  title="1.80"
+  titleElement="span"
+/>
+`;
+
+exports[`millisecond metric 1`] = `
+<EuiCard
+  description="Response Time Max"
+  layout="horizontal"
+  textAlign="center"
+  title="1234.00 ms"
+  titleElement="span"
+/>
+`;

src/core_plugins/status_page/public/components/__snapshots__/server_status.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render 1`] = `
+<EuiFlexGroup
+  alignItems="center"
+  component="div"
+  direction="row"
+  gutterSize="l"
+  justifyContent="spaceBetween"
+  responsive={true}
+  style={
+    Object {
+      "flexGrow": 0,
+    }
+  }
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  >
+    <EuiTitle
+      size="m"
+    >
+      <h2>
+        Kibana status is 
+        <EuiBadge
+          color="secondary"
+          iconSide="left"
+        >
+          Green
+        </EuiBadge>
+      </h2>
+    </EuiTitle>
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  >
+    <EuiText
+      grow={true}
+    >
+      <p>
+        My Computer
+      </p>
+    </EuiText>
+  </EuiFlexItem>
+</EuiFlexGroup>
+`;

src/core_plugins/status_page/public/components/__snapshots__/status_table.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render 1`] = `
+<EuiBasicTable
+  columns={
+    Array [
+      Object {
+        "field": "state",
+        "name": "",
+        "render": [Function],
+        "width": "32px",
+      },
+      Object {
+        "field": "id",
+        "name": "ID",
+      },
+      Object {
+        "field": "state",
+        "name": "Status",
+        "render": [Function],
+      },
+    ]
+  }
+  data-test-subj="statusBreakdown"
+  items={
+    Array [
+      Object {
+        "id": "plugin:1",
+        "state": Object {
+          "id": "green",
+          "message": "Ready",
+          "uiColor": "secondary",
+        },
+      },
+    ]
+  }
+  noItemsMessage="No items found"
+  responsive={true}
+  rowProps={[Function]}
+/>
+`;

src/core_plugins/status_page/public/components/metric_tiles.js

@@ -0,0 +1,82 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import formatNumber from '../lib/format_number';
+import React, { Component } from 'react';
+import { Metric as MetricPropType } from '../lib/prop_types';
+import PropTypes from 'prop-types';
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiCard,
+} from '@elastic/eui';
+
+
+/*
+Displays a metric with the correct format.
+*/
+export class MetricTile extends Component {
+  static propTypes = {
+    metric: MetricPropType.isRequired
+  };
+
+  formattedMetric() {
+    const { value, type } = this.props.metric;
+
+    const metrics = [].concat(value);
+    return metrics.map(function (metric) {
+      return formatNumber(metric, type);
+    }).join(', ');
+  }
+
+  render() {
+    const { name } = this.props.metric;
+
+    return (
+      <EuiCard
+        layout="horizontal"
+        title={this.formattedMetric()}
+        description={name}
+      />
+    );
+  }
+}
+
+/*
+Wrapper component that simply maps each metric to MetricTile inside a FlexGroup
+*/
+const MetricTiles = ({
+  metrics
+}) => (
+  <EuiFlexGrid columns={3}>
+    {
+      metrics.map(metric => (
+        <EuiFlexItem key={metric.name}>
+          <MetricTile metric={metric} />
+        </EuiFlexItem>
+      ))
+    }
+  </EuiFlexGrid>
+);
+
+MetricTiles.propTypes = {
+  metrics: PropTypes.arrayOf(MetricPropType).isRequired
+};
+
+export default MetricTiles;

src/core_plugins/status_page/public/components/metric_tiles.test.js

@@ -0,0 +1,79 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { MetricTile } from './metric_tiles';
+
+const GENERAL_METRIC = {
+  name: 'A metric',
+  value: 1.8
+  // no type specified
+};
+
+const BYTE_METRIC = {
+  name: 'Heap Total',
+  value: 1501560832,
+  type: 'byte'
+};
+
+const FLOAT_METRIC = {
+  name: 'Load',
+  type: 'float',
+  value: [
+    4.0537109375,
+    3.36669921875,
+    3.1220703125
+  ]
+};
+
+const MS_METRIC = {
+  name: 'Response Time Max',
+  type: 'ms',
+  value: 1234
+};
+
+test('general metric', () => {
+  const component = shallow(<MetricTile
+    metric={GENERAL_METRIC}
+  />);
+  expect(component).toMatchSnapshot(); // eslint-disable-line
+});
+
+test('byte metric', () => {
+  const component = shallow(<MetricTile
+    metric={BYTE_METRIC}
+  />);
+  expect(component).toMatchSnapshot(); // eslint-disable-line
+});
+
+test('float metric', () => {
+  const component = shallow(<MetricTile
+    metric={FLOAT_METRIC}
+  />);
+  expect(component).toMatchSnapshot(); // eslint-disable-line
+});
+
+test('millisecond metric', () => {
+  const component = shallow(<MetricTile
+    metric={MS_METRIC}
+  />);
+  expect(component).toMatchSnapshot(); // eslint-disable-line
+});
+

src/core_plugins/status_page/public/components/server_status.js

@@ -0,0 +1,65 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { State as StatePropType } from '../lib/prop_types';
+import {
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiBadge,
+} from '@elastic/eui';
+
+const ServerState = ({
+  name,
+  serverState
+}) => (
+  <EuiFlexGroup
+    alignItems="center"
+    justifyContent="spaceBetween"
+    style={{ flexGrow: 0 }}
+  >
+    <EuiFlexItem grow={false}>
+      <EuiTitle>
+        <h2>
+          {'Kibana status is '}
+          <EuiBadge color={serverState.uiColor}>
+            {serverState.title }
+          </EuiBadge>
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiText>
+        <p>
+          {name}
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+ServerState.propTypes = {
+  name: PropTypes.string.isRequired,
+  serverState: StatePropType.isRequired
+};
+
+export default ServerState;