Migrate status page app to core

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

@@ -26,7 +26,14 @@ import { formatNumber, Metric } from '../lib';
  */
 export const MetricTile: FunctionComponent<{ metric: Metric }> = ({ metric }) => {
   const { name } = metric;
-  return <EuiCard layout="horizontal" title={formatMetric(metric)} description={name} />;
+  return (
+    <EuiCard
+      data-test-subj={`serverMetric-${formatMetricId(metric)}`}
+      layout="horizontal"
+      title={formatMetric(metric)}
+      description={name}
+    />
+  );
 };
 
 /*
@@ -35,7 +42,7 @@ export const MetricTile: FunctionComponent<{ metric: Metric }> = ({ metric }) =>
 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>
     ))}
@@ -46,3 +53,7 @@ const formatMetric = ({ value, type }: Metric) => {
   const metrics = Array.isArray(value) ? value : [value];
   return metrics.map((metric) => formatNumber(metric, type)).join(', ');
 };
+
+const formatMetricId = ({ name }: Metric) => {
+  return name.toLowerCase().replace(' ', '');
+};

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

@@ -31,12 +31,20 @@ export const ServerStatus: FunctionComponent<ServerStateProps> = ({ name, server
   <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" style={{ flexGrow: 0 }}>
     <EuiFlexItem grow={false}>
       <EuiTitle>
-        <h2>
+        <h2 data-test-subj="serverStatusTitle">
           <FormattedMessage
             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>

src/core/public/core_app/status/status_app.tsx

@@ -116,7 +116,7 @@ export class StatusApp extends Component<StatusAppProps, StatusAppState> {
                 <EuiFlexGroup>
                   <EuiFlexItem grow={false}>
                     <EuiText size="s">
-                      <p>
+                      <p data-test-subj="statusBuildNumber">
                         <FormattedMessage
                           id="core.statusPage.statusApp.statusActions.buildText"
                           defaultMessage="BUILD {buildNum}"
@@ -129,7 +129,7 @@ export class StatusApp extends Component<StatusAppProps, StatusAppState> {
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
                     <EuiText size="s">
-                      <p>
+                      <p data-test-subj="statusBuildHash">
                         <FormattedMessage
                           id="core.statusPage.statusApp.statusActions.commitText"
                           defaultMessage="COMMIT {buildSha}"

test/functional/apps/status_page/index.js → test/functional/apps/status_page/index.ts

@@ -18,8 +18,9 @@
  */
 
 import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['common']);
@@ -31,11 +32,32 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.common.navigateToApp('status_page');
     });
 
-    it('should show the kibana plugin as ready', async function () {
+    it('should show the kibana plugin as ready', async () => {
       await retry.tryForTime(6000, async () => {
         const text = await testSubjects.getVisibleText('statusBreakdown');
         expect(text.indexOf('plugin:kibana')).to.be.above(-1);
       });
     });
+
+    it('should show the build hash and number', async () => {
+      const buildNumberText = await testSubjects.getVisibleText('statusBuildNumber');
+      expect(buildNumberText).to.contain('BUILD ');
+
+      const hashText = await testSubjects.getVisibleText('statusBuildHash');
+      expect(hashText).to.contain('COMMIT ');
+    });
+
+    it('should display the server metrics', async () => {
+      const metrics = await testSubjects.findAll('serverMetric');
+      expect(metrics).to.have.length(6);
+    });
+
+    it('should display the server status', async () => {
+      const titleText = await testSubjects.getVisibleText('serverStatusTitle');
+      expect(titleText).to.contain('Kibana status is');
+
+      const serverStatus = await testSubjects.getAttribute('serverStatusTitleBadge', 'aria-label');
+      expect(serverStatus).to.be('Green');
+    });
   });
 }