Merge remote-tracking branch 'upstream/main' into ua/backport-depreca…

…tion-logs-improvement

package.json

@@ -551,6 +551,7 @@
     "@types/jsdom": "^16.2.3",
     "@types/json-stable-stringify": "^1.0.32",
     "@types/json5": "^0.0.30",
+    "@types/kbn__ace": "link:bazel-bin/packages/kbn-ace/npm_module_types",
     "@types/license-checker": "15.0.0",
     "@types/listr": "^0.14.0",
     "@types/loader-utils": "^1.1.3",

packages/BUILD.bazel

@@ -76,6 +76,7 @@ filegroup(
   srcs = [
       "//packages/elastic-apm-synthtrace:build_types",
       "//packages/elastic-datemath:build_types",
+      "//packages/kbn-ace:build_types",
   ],
 )
 

packages/kbn-ace/BUILD.bazel

@@ -1,9 +1,10 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
-load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
-load("//src/dev/bazel:index.bzl", "jsts_transpiler")
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
 
 PKG_BASE_NAME = "kbn-ace"
 PKG_REQUIRE_NAME = "@kbn/ace"
+TYPES_PKG_REQUIRE_NAME = "@types/kbn__ace"
 
 SOURCE_FILES = glob(
   [
@@ -78,7 +79,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node", ":tsc_types"],
+  deps = RUNTIME_DEPS + [":target_node"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )
@@ -97,3 +98,20 @@ filegroup(
   ],
   visibility = ["//visibility:public"],
 )
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = TYPES_PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [
+    ":npm_module_types",
+  ],
+  visibility = ["//visibility:public"],
+)

packages/kbn-ace/package.json

@@ -3,6 +3,5 @@
   "version": "1.0.0",
   "private": true,
   "main": "./target_node/index.js",
-  "types": "./target_types/index.d.ts",
   "license": "SSPL-1.0 OR Elastic License 2.0"
 }

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

@@ -9,3 +9,5 @@
 export { MetricTile, MetricTiles } from './metric_tiles';
 export { ServerStatus } from './server_status';
 export { StatusTable } from './status_table';
+export { StatusSection } from './status_section';
+export { VersionHeader } from './version_header';

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

@@ -9,9 +9,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { ServerStatus } from './server_status';
-import { FormattedStatus } from '../lib';
+import { StatusState } from '../lib';
 
-const getStatus = (parts: Partial<FormattedStatus['state']> = {}): FormattedStatus['state'] => ({
+const getStatus = (parts: Partial<StatusState> = {}): StatusState => ({
   id: 'available',
   title: 'Green',
   uiColor: 'success',
@@ -27,6 +27,16 @@ describe('ServerStatus', () => {
     expect(component.find('EuiBadge')).toMatchSnapshot();
   });
 
+  it('renders correctly for yellow state', () => {
+    const status = getStatus({
+      id: 'degraded',
+      title: 'Yellow',
+    });
+    const component = mount(<ServerStatus serverState={status} name="My Computer" />);
+    expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(`"Kibana status is Yellow"`);
+    expect(component.find('EuiBadge')).toMatchSnapshot();
+  });
+
   it('renders correctly for red state', () => {
     const status = getStatus({
       id: 'unavailable',

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

@@ -7,13 +7,14 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiText, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiBadge } from '@elastic/eui';
+import { EuiText, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import type { FormattedStatus } from '../lib';
+import type { StatusState } from '../lib';
+import { StatusBadge } from './status_badge';
 
 interface ServerStateProps {
   name: string;
-  serverState: FormattedStatus['state'];
+  serverState: StatusState;
 }
 
 export const ServerStatus: FunctionComponent<ServerStateProps> = ({ name, serverState }) => (
@@ -26,13 +27,7 @@ export const ServerStatus: FunctionComponent<ServerStateProps> = ({ name, server
             defaultMessage="Kibana status is {kibanaStatus}"
             values={{
               kibanaStatus: (
-                <EuiBadge
-                  data-test-subj="serverStatusTitleBadge"
-                  color={serverState.uiColor}
-                  aria-label={serverState.title}
-                >
-                  {serverState.title}
-                </EuiBadge>
+                <StatusBadge status={serverState} data-test-subj="serverStatusTitleBadge" />
               ),
             }}
           />

src/core/public/core_app/status/components/status_badge.test.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { shallowWithIntl } from '@kbn/test/jest';
+import { StatusBadge, StatusWithoutMessage } from './status_badge';
+
+const getStatus = (parts: Partial<StatusWithoutMessage> = {}): StatusWithoutMessage => ({
+  id: 'available',
+  title: 'Green',
+  uiColor: 'secondary',
+  ...parts,
+});
+
+describe('StatusBadge', () => {
+  it('propagates the correct properties to `EuiBadge`', () => {
+    const status = getStatus();
+
+    const component = shallowWithIntl(<StatusBadge status={status} />);
+
+    expect(component).toMatchInlineSnapshot(`
+      <EuiBadge
+        aria-label="Green"
+        color="secondary"
+      >
+        Green
+      </EuiBadge>
+    `);
+  });
+
+  it('propagates `data-test-subj` if provided', () => {
+    const status = getStatus({
+      id: 'critical',
+      title: 'Red',
+      uiColor: 'danger',
+    });
+
+    const component = shallowWithIntl(
+      <StatusBadge status={status} data-test-subj="my-data-test-subj" />
+    );
+
+    expect(component).toMatchInlineSnapshot(`
+      <EuiBadge
+        aria-label="Red"
+        color="danger"
+        data-test-subj="my-data-test-subj"
+      >
+        Red
+      </EuiBadge>
+    `);
+  });
+});

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

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FC } from 'react';
+import { EuiBadge } from '@elastic/eui';
+import type { StatusState } from '../lib';
+
+export type StatusWithoutMessage = Omit<StatusState, 'message'>;
+
+interface StatusBadgeProps {
+  status: StatusWithoutMessage;
+  'data-test-subj'?: string;
+}
+
+export const StatusBadge: FC<StatusBadgeProps> = (props) => {
+  return (
+    <EuiBadge
+      data-test-subj={props['data-test-subj']}
+      color={props.status.uiColor}
+      aria-label={props.status.title}
+    >
+      {props.status.title}
+    </EuiBadge>
+  );
+};

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FC, useMemo } from 'react';
+import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { FormattedStatus } from '../lib';
+
+interface StatusExpandedRowProps {
+  status: FormattedStatus;
+}
+
+export const StatusExpandedRow: FC<StatusExpandedRowProps> = ({ status }) => {
+  const { original } = status;
+  const statusAsString = useMemo(() => JSON.stringify(original, null, 2), [original]);
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem grow={true}>
+        <EuiCodeBlock
+          language="json"
+          overflowHeight={300}
+          isCopyable
+          paddingSize="none"
+          transparentBackground={true}
+        >
+          {statusAsString}
+        </EuiCodeBlock>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};