Migrate status page app to core

docs/developer/architecture/code-exploration.asciidoc

@@ -186,11 +186,6 @@ WARNING: Missing README.
 Replaces the legacy ui/share module for registering share context menus.
 
 
-- {kib-repo}blob/{branch}/src/plugins/status_page[statusPage]
-
-WARNING: Missing README.
-
-
 - {kib-repo}blob/{branch}/src/plugins/telemetry/README.md[telemetry]
 
 Telemetry allows Kibana features to have usage tracked in the wild. The general term "telemetry" refers to multiple things:

src/core/public/core_app/core_app.ts

@@ -24,15 +24,19 @@ import {
   AppNavLinkStatus,
   AppMountParameters,
 } from '../application';
-import { HttpSetup, HttpStart } from '../http';
-import { CoreContext } from '../core_system';
-import { renderApp, setupUrlOverflowDetection } from './errors';
-import { NotificationsStart } from '../notifications';
-import { IUiSettingsClient } from '../ui_settings';
+import type { HttpSetup, HttpStart } from '../http';
+import type { CoreContext } from '../core_system';
+import type { NotificationsSetup, NotificationsStart } from '../notifications';
+import type { IUiSettingsClient } from '../ui_settings';
+import type { InjectedMetadataSetup } from '../injected_metadata';
+import { renderApp as renderErrorApp, setupUrlOverflowDetection } from './errors';
+import { renderApp as renderStatusApp } from './status';
 
 interface SetupDeps {
   application: InternalApplicationSetup;
   http: HttpSetup;
+  injectedMetadata: InjectedMetadataSetup;
+  notifications: NotificationsSetup;
 }
 
 interface StartDeps {
@@ -47,7 +51,7 @@ export class CoreApp {
 
   constructor(private readonly coreContext: CoreContext) {}
 
-  public setup({ http, application }: SetupDeps) {
+  public setup({ http, application, injectedMetadata, notifications }: SetupDeps) {
     application.register(this.coreContext.coreId, {
       id: 'error',
       title: 'App Error',
@@ -56,7 +60,20 @@ export class CoreApp {
         // Do not use an async import here in order to ensure that network failures
         // cannot prevent the error UI from displaying. This UI is tiny so an async
         // import here is probably not useful anyways.
-        return renderApp(params, { basePath: http.basePath });
+        return renderErrorApp(params, { basePath: http.basePath });
+      },
+    });
+
+    if (injectedMetadata.getAnonymousStatusPage()) {
+      http.anonymousPaths.register('/status');
+    }
+    application.register(this.coreContext.coreId, {
+      id: 'status',
+      title: 'Server Status',
+      appRoute: '/status',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      mount(params: AppMountParameters) {
+        return renderStatusApp(params, { http, notifications });
       },
     });
   }

src/plugins/status_page/public/index.ts → src/core/public/core_app/status/components/index.ts

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import { PluginInitializer } from 'kibana/public';
-import { StatusPagePlugin, StatusPagePluginSetup, StatusPagePluginStart } from './plugin';
-
-export const plugin: PluginInitializer<StatusPagePluginSetup, StatusPagePluginStart> = () =>
-  new StatusPagePlugin();
+export { MetricTile, MetricTiles } from './metric_tiles';
+export { ServerStatus } from './server_status';
+export { StatusTable } from './status_table';

src/legacy/core_plugins/status_page/public/components/metric_tiles.js → src/core/public/core_app/status/components/metric_tiles.tsx

@@ -17,53 +17,43 @@
  * 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 React, { FunctionComponent } from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiCard } from '@elastic/eui';
+import { formatNumber, Metric } from '../lib';
 
 /*
-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} />;
-  }
-}
+ * Displays a metric with the correct format.
+ */
+export const MetricTile: FunctionComponent<{ metric: Metric }> = ({ metric }) => {
+  const { name } = metric;
+  return (
+    <EuiCard
+      data-test-subj={`serverMetric-${formatMetricId(metric)}`}
+      layout="horizontal"
+      title={formatMetric(metric)}
+      description={name}
+    />
+  );
+};
 
 /*
-Wrapper component that simply maps each metric to MetricTile inside a FlexGroup
-*/
-const MetricTiles = ({ metrics }) => (
+ * Wrapper component that simply maps each metric to MetricTile inside a FlexGroup
+ */
+export const MetricTiles: FunctionComponent<{ metrics: Metric[] }> = ({ metrics }) => (
   <EuiFlexGrid columns={3}>
     {metrics.map((metric) => (
-      <EuiFlexItem key={metric.name}>
+      <EuiFlexItem key={metric.name} data-test-subj="serverMetric">
         <MetricTile metric={metric} />
       </EuiFlexItem>
     ))}
   </EuiFlexGrid>
 );
 
-MetricTiles.propTypes = {
-  metrics: PropTypes.arrayOf(MetricPropType).isRequired,
+const formatMetric = ({ value, type }: Metric) => {
+  const metrics = Array.isArray(value) ? value : [value];
+  return metrics.map((metric) => formatNumber(metric, type)).join(', ');
 };
 
-export default MetricTiles;
+const formatMetricId = ({ name }: Metric) => {
+  return name.toLowerCase().replace(' ', '');
+};

src/legacy/core_plugins/status_page/public/components/server_status.test.js → src/core/public/core_app/status/components/server_status.test.tsx

@@ -19,15 +19,17 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import ServerStatus from './server_status';
+import { ServerStatus } from './server_status';
 
 const STATE = {
   id: 'green',
   title: 'Green',
   uiColor: 'secondary',
+  state: 'green',
+  message: '',
 };
 
 test('render', () => {
   const component = shallow(<ServerStatus serverState={STATE} name="My Computer" />);
-  expect(component).toMatchSnapshot(); // eslint-disable-line
+  expect(component).toMatchSnapshot();
 });

src/legacy/core_plugins/status_page/public/components/server_status.js → src/core/public/core_app/status/components/server_status.tsx

@@ -17,22 +17,34 @@
  * under the License.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import { State as StatePropType } from '../lib/prop_types';
+import React, { FunctionComponent } from 'react';
 import { EuiText, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiBadge } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import type { FormattedStatus } from '../lib';
 
-const ServerState = ({ name, serverState }) => (
+interface ServerStateProps {
+  name: string;
+  serverState: FormattedStatus['state'];
+}
+
+export const ServerStatus: FunctionComponent<ServerStateProps> = ({ name, serverState }) => (
   <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" style={{ flexGrow: 0 }}>
     <EuiFlexItem grow={false}>
       <EuiTitle>
-        <h2>
+        <h2 data-test-subj="serverStatusTitle">
           <FormattedMessage
-            id="statusPage.serverStatus.statusTitle"
+            id="core.statusPage.serverStatus.statusTitle"
             defaultMessage="Kibana status is {kibanaStatus}"
             values={{
-              kibanaStatus: <EuiBadge color={serverState.uiColor}>{serverState.title}</EuiBadge>,
+              kibanaStatus: (
+                <EuiBadge
+                  data-test-subj="serverStatusTitleBadge"
+                  color={serverState.uiColor}
+                  aria-label={serverState.title}
+                >
+                  {serverState.title}
+                </EuiBadge>
+              ),
             }}
           />
         </h2>
@@ -45,10 +57,3 @@ const ServerState = ({ name, serverState }) => (
     </EuiFlexItem>
   </EuiFlexGroup>
 );
-
-ServerState.propTypes = {
-  name: PropTypes.string.isRequired,
-  serverState: StatePropType.isRequired,
-};
-
-export default ServerState;

src/legacy/core_plugins/status_page/public/components/status_table.test.js → src/core/public/core_app/status/components/status_table.test.tsx

@@ -19,12 +19,13 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import StatusTable from './status_table';
+import { StatusTable } from './status_table';
 
 const STATE = {
   id: 'green',
   uiColor: 'secondary',
   message: 'Ready',
+  title: 'green',
 };
 
 test('render', () => {

src/core/public/core_app/status/components/status_table.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { EuiBasicTable, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import type { FormattedStatus } from '../lib';
+
+interface StatusTableProps {
+  statuses?: FormattedStatus[];
+}
+
+const tableColumns = [
+  {
+    field: 'state',
+    name: '',
+    render: (state: FormattedStatus['state']) => (
+      <EuiIcon type="dot" aria-hidden color={state.uiColor} />
+    ),
+    width: '32px',
+  },
+  {
+    field: 'id',
+    name: i18n.translate('core.statusPage.statusTable.columns.idHeader', {
+      defaultMessage: 'ID',
+    }),
+  },
+  {
+    field: 'state',
+    name: i18n.translate('core.statusPage.statusTable.columns.statusHeader', {
+      defaultMessage: 'Status',
+    }),
+    render: (state: FormattedStatus['state']) => <span>{state.message}</span>,
+  },
+];
+
+export const StatusTable: FunctionComponent<StatusTableProps> = ({ statuses }) => {
+  if (!statuses) {
+    return null;
+  }
+  return (
+    <EuiBasicTable<FormattedStatus>
+      columns={tableColumns}
+      items={statuses}
+      rowProps={({ state }) => ({
+        className: `status-table-row-${state.uiColor}`,
+      })}
+      data-test-subj="statusBreakdown"
+    />
+  );
+};

src/core/public/core_app/status/index.ts

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

src/legacy/core_plugins/status_page/public/lib/format_number.test.js → src/core/public/core_app/status/lib/format_number.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import formatNumber from './format_number';
+import { formatNumber } from './format_number';
 
 describe('format byte', () => {
   test('zero', () => {

src/legacy/core_plugins/status_page/public/lib/format_number.js → src/core/public/core_app/status/lib/format_number.ts

@@ -19,7 +19,7 @@
 
 import numeral from '@elastic/numeral';
 
-export default function formatNumber(num, which) {
+export function formatNumber(num: number, which?: string) {
   let format = '0.00';
   let postfix = '';
   switch (which) {

src/core/public/core_app/status/lib/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+export { formatNumber } from './format_number';
+export { loadStatus, Metric, FormattedStatus, ProcessedServerResponse } from './load_status';