First iteration of nearly functional public

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/app_context.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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, { useContext, createContext } from 'react';
+import { HttpSetup, NotificationsSetup } from '../../../../../../../src/core/public';
+
+export interface ContextValue {
+  http: HttpSetup;
+  notifications: NotificationsSetup;
+  licenseEnabled: boolean;
+  formatAngularHttpError: (message: string) => string;
+}
+
+const AppContext = createContext<ContextValue>(null as any);
+
+export const AppContextProvider = ({ children, value }: { children: any; value: ContextValue }) => {
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
+
+export const useAppContext = () => {
+  const ctx = useContext(AppContext);
+  if (ctx == null) {
+    throw new Error(`useAppContext must be called inside AppContextProvider`);
+  }
+  return ctx;
+};

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/boot.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { render, unmountComponentAtNode } from 'react-dom';
+import React from 'react';
+import { HttpStart as Http, NotificationsSetup } from '../../../../../../../src/core/public';
+import { App } from '.';
+
+export interface Dependencies {
+  el: HTMLElement;
+  http: Http;
+  licenseEnabled: boolean;
+  I18nContext: any;
+  notifications: NotificationsSetup;
+  formatAngularHttpError: any;
+}
+
+export type AppDependencies = Omit<Dependencies, 'el'>;
+
+export function boot(deps: Dependencies): () => void {
+  const { el, ...rest } = deps;
+  render(<App {...rest} />, deps.el);
+  return () => unmountComponentAtNode(deps.el);
+}

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/highlight_details/highlight_details.test.tsx → x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/highlight_details_flyout/highlight_details_flyout.test.tsx

@@ -5,9 +5,9 @@
  */
 
 import { registerTestBed } from '../../../../../../../../test_utils';
-import { HighlightDetails, Props } from '.';
+import { HighlightDetailsFlyout, Props } from '.';
 
-describe('Highlight Details Component', () => {
+describe('Highlight Details Flyout', () => {
   it('renders', async () => {
     const props: Props = {
       breakdown: [
@@ -42,7 +42,7 @@ describe('Highlight Details Component', () => {
       time: 100,
     };
 
-    const init = registerTestBed(HighlightDetails);
+    const init = registerTestBed(HighlightDetailsFlyout);
     await init(props);
   });
 });

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/highlight_details_flyout/highlight_details_flyout.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiIconTip,
+  EuiText,
+  EuiCodeBlock,
+} from '@elastic/eui';
+
+import { msToPretty } from '../../utils';
+import { HighlightDetailsTable } from './highlight_details_table';
+import { Operation, Shard } from '../../types';
+
+export interface Props {
+  operation: Operation;
+  shard: Shard;
+  indexName: string;
+  onClose: () => void;
+}
+
+const DefEntry = ({ title, body }: { title: string | JSX.Element; body: string | JSX.Element }) => (
+  <>
+    <dt>{title}</dt>
+    <dd>{body}</dd>
+  </>
+);
+
+export const HighlightDetailsFlyout = ({ indexName, operation, shard, onClose }: Props) => {
+  return (
+    <EuiFlyout onClose={() => onClose()}>
+      <EuiFlyoutHeader hasBorder={true}>
+        <EuiText size="s">{indexName}</EuiText>
+        <EuiText>
+          [{/* shard id */ shard.id[0]}][{/* shard number */ shard.id[2]}]
+        </EuiText>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText>
+          <dl>
+            {/* Type Entry */}
+            <DefEntry
+              title={i18n.translate('xpack.searchProfiler.highlightDetails.typeTitle', {
+                defaultMessage: 'Type',
+              })}
+              body={operation.query_type!}
+            />
+            {/* Description Entry */}
+            <DefEntry
+              title={i18n.translate('xpack.searchProfiler.highlightDetails.descriptionTitle', {
+                defaultMessage: 'Description',
+              })}
+              body={<EuiCodeBlock>{operation.lucene!}</EuiCodeBlock>}
+            />
+            {/* Total Time Entry */}
+            <DefEntry
+              title={
+                <>
+                  {i18n.translate('xpack.searchProfiler.highlightDetails.totalTimeTitle', {
+                    defaultMessage: 'Total Time',
+                  })}
+                  <EuiIconTip
+                    type="iInCircle"
+                    color="subdued"
+                    content={i18n.translate(
+                      'xpack.searchProfiler.highlightDetails.totalTimeTooltip',
+                      {
+                        defaultMessage:
+                          'The total time spent at this query component, inclusive of children',
+                      }
+                    )}
+                  />
+                </>
+              }
+              body={msToPretty(operation.time, 3)}
+            />
+            {/* Self Time Entry */}
+            <DefEntry
+              title={
+                <>
+                  {i18n.translate('xpack.searchProfiler.highlightDetails.selfTimeTooltip', {
+                    defaultMessage: 'Total Time',
+                  })}
+                  <EuiIconTip
+                    type="iInCircle"
+                    color="subdued"
+                    content={i18n.translate(
+                      'xpack.searchProfiler.highlightDetails.totalTimeTooltip',
+                      {
+                        defaultMessage:
+                          'The time spent by this query component alone, exclusive of children',
+                      }
+                    )}
+                  />
+                </>
+              }
+              body={msToPretty(operation.selfTime!, 3)}
+            />
+          </dl>
+          <HighlightDetailsTable breakdown={operation.breakdown} />
+        </EuiText>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/components/highlight_details_flyout/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { HighlightDetailsFlyout, Props } from './highlight_details_flyout';