[Inspector] Make Response tab faster

src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx

@@ -9,48 +9,35 @@
 // We want to allow both right-clicking to open in a new tab and clicking through
 // the "Open in Console" link. We could use `RedirectAppLinks` at the top level
 // but that inserts a div which messes up the layout of the inspector.
-/* eslint-disable @elastic/eui/href-or-on-click */
 
 import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import type { ConnectionRequestParams } from '@elastic/transport';
 import { i18n } from '@kbn/i18n';
 import { XJsonLang } from '@kbn/monaco';
-import { compressToEncodedURIComponent } from 'lz-string';
-import React, { useCallback } from 'react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
+import React from 'react';
 import { CodeEditor } from '@kbn/code-editor';
-import { InspectorPluginStartDeps } from '../../../../plugin';
+import { RequestCodeViewerLinks } from './req_code_viewer_links';
 
 interface RequestCodeViewerProps {
   indexPattern?: string;
   requestParams?: ConnectionRequestParams;
   json: string;
+  includeOpenInAppLinks: boolean;
 }
 
 const copyToClipboardLabel = i18n.translate('inspector.requests.copyToClipboardLabel', {
   defaultMessage: 'Copy to clipboard',
 });
 
-const openInConsoleLabel = i18n.translate('inspector.requests.openInConsoleLabel', {
-  defaultMessage: 'Open in Console',
-});
-
-const openInSearchProfilerLabel = i18n.translate('inspector.requests.openInSearchProfilerLabel', {
-  defaultMessage: 'Open in Search Profiler',
-});
-
 /**
  * @internal
  */
 export const RequestCodeViewer = ({
   indexPattern,
   requestParams,
   json,
+  includeOpenInAppLinks,
 }: RequestCodeViewerProps) => {
-  const { services } = useKibana<InspectorPluginStartDeps>();
-
-  const navigateToUrl = services.application?.navigateToUrl;
-
   function getValue() {
     if (!requestParams) {
       return json;
@@ -65,32 +52,6 @@ export const RequestCodeViewer = ({
 
   const value = getValue();
 
-  const devToolsDataUri = compressToEncodedURIComponent(value);
-  const consoleHref = services.share.url.locators
-    .get('CONSOLE_APP_LOCATOR')
-    ?.useUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` });
-  // Check if both the Dev Tools UI and the Console UI are enabled.
-  const canShowDevTools =
-    services.application?.capabilities?.dev_tools.show && consoleHref !== undefined;
-  const shouldShowDevToolsLink = !!(requestParams && canShowDevTools);
-  const handleDevToolsLinkClick = useCallback(
-    () => consoleHref && navigateToUrl && navigateToUrl(consoleHref),
-    [consoleHref, navigateToUrl]
-  );
-
-  const searchProfilerDataUri = compressToEncodedURIComponent(json);
-  const searchProfilerHref = services.share.url.locators
-    .get('SEARCH_PROFILER_LOCATOR')
-    ?.useUrl({ index: indexPattern, loadFrom: `data:text/plain,${searchProfilerDataUri}` });
-  // Check if both the Dev Tools UI and the SearchProfiler UI are enabled.
-  const canShowsearchProfiler =
-    services.application?.capabilities?.dev_tools.show && searchProfilerHref !== undefined;
-  const shouldShowsearchProfilerLink = !!(indexPattern && canShowsearchProfiler);
-  const handleSearchProfilerLinkClick = useCallback(
-    () => searchProfilerHref && navigateToUrl && navigateToUrl(searchProfilerHref),
-    [searchProfilerHref, navigateToUrl]
-  );
-
   return (
     <EuiFlexGroup
       direction="column"
@@ -119,37 +80,13 @@ export const RequestCodeViewer = ({
               </EuiCopy>
             </div>
           </EuiFlexItem>
-          {shouldShowDevToolsLink && (
-            <EuiFlexItem grow={false}>
-              <div>
-                <EuiButtonEmpty
-                  size="xs"
-                  flush="right"
-                  iconType="wrench"
-                  href={consoleHref}
-                  onClick={handleDevToolsLinkClick}
-                  data-test-subj="inspectorRequestOpenInConsoleButton"
-                >
-                  {openInConsoleLabel}
-                </EuiButtonEmpty>
-              </div>
-            </EuiFlexItem>
-          )}
-          {shouldShowsearchProfilerLink && (
-            <EuiFlexItem grow={false}>
-              <div>
-                <EuiButtonEmpty
-                  size="xs"
-                  flush="right"
-                  iconType="visBarHorizontal"
-                  href={searchProfilerHref}
-                  onClick={handleSearchProfilerLinkClick}
-                  data-test-subj="inspectorRequestOpenInSearchProfilerButton"
-                >
-                  {openInSearchProfilerLabel}
-                </EuiButtonEmpty>
-              </div>
-            </EuiFlexItem>
+          {includeOpenInAppLinks && (
+            <RequestCodeViewerLinks
+              requestParams={requestParams}
+              indexPattern={indexPattern}
+              json={json}
+              value={value}
+            />
           )}
         </EuiFlexGroup>
       </EuiFlexItem>

src/plugins/inspector/public/views/requests/components/details/req_code_viewer_links.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
+ * 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.
+ */
+
+// We want to allow both right-clicking to open in a new tab and clicking through
+// the "Open in Console" link. We could use `RedirectAppLinks` at the top level
+// but that inserts a div which messes up the layout of the inspector.
+/* eslint-disable @elastic/eui/href-or-on-click */
+
+import { EuiButtonEmpty, EuiFlexItem } from '@elastic/eui';
+import type { ConnectionRequestParams } from '@elastic/transport';
+import { i18n } from '@kbn/i18n';
+import { compressToEncodedURIComponent } from 'lz-string';
+import React, { useCallback } from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { InspectorPluginStartDeps } from '../../../../plugin';
+
+interface RequestCodeViewerLinksProps {
+  indexPattern?: string;
+  requestParams?: ConnectionRequestParams;
+  json: string;
+  value: string;
+}
+
+const openInConsoleLabel = i18n.translate('inspector.requests.openInConsoleLabel', {
+  defaultMessage: 'Open in Console',
+});
+
+const openInSearchProfilerLabel = i18n.translate('inspector.requests.openInSearchProfilerLabel', {
+  defaultMessage: 'Open in Search Profiler',
+});
+
+/**
+ * @internal
+ */
+export const RequestCodeViewerLinks = ({
+  indexPattern,
+  requestParams,
+  json,
+  value,
+}: RequestCodeViewerLinksProps) => {
+  const { services } = useKibana<InspectorPluginStartDeps>();
+
+  const navigateToUrl = services.application?.navigateToUrl;
+
+  const devToolsDataUri = compressToEncodedURIComponent(value);
+  const consoleHref = services.share.url.locators
+    .get('CONSOLE_APP_LOCATOR')
+    ?.useUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` });
+  // Check if both the Dev Tools UI and the Console UI are enabled.
+  const canShowDevTools =
+    services.application?.capabilities?.dev_tools.show && consoleHref !== undefined;
+  const shouldShowDevToolsLink = !!(requestParams && canShowDevTools);
+  const handleDevToolsLinkClick = useCallback(
+    () => consoleHref && navigateToUrl && navigateToUrl(consoleHref),
+    [consoleHref, navigateToUrl]
+  );
+
+  const searchProfilerDataUri = compressToEncodedURIComponent(json);
+  const searchProfilerHref = services.share.url.locators
+    .get('SEARCH_PROFILER_LOCATOR')
+    ?.useUrl({ index: indexPattern, loadFrom: `data:text/plain,${searchProfilerDataUri}` });
+  // Check if both the Dev Tools UI and the SearchProfiler UI are enabled.
+  const canShowsearchProfiler =
+    services.application?.capabilities?.dev_tools.show && searchProfilerHref !== undefined;
+  const shouldShowsearchProfilerLink = !!(indexPattern && canShowsearchProfiler);
+  const handleSearchProfilerLinkClick = useCallback(
+    () => searchProfilerHref && navigateToUrl && navigateToUrl(searchProfilerHref),
+    [searchProfilerHref, navigateToUrl]
+  );
+
+  return (
+    <>
+      {shouldShowDevToolsLink && (
+        <EuiFlexItem grow={false}>
+          <div>
+            <EuiButtonEmpty
+              size="xs"
+              flush="right"
+              iconType="wrench"
+              href={consoleHref}
+              onClick={handleDevToolsLinkClick}
+              data-test-subj="inspectorRequestOpenInConsoleButton"
+            >
+              {openInConsoleLabel}
+            </EuiButtonEmpty>
+          </div>
+        </EuiFlexItem>
+      )}
+      {shouldShowsearchProfilerLink && (
+        <EuiFlexItem grow={false}>
+          <div>
+            <EuiButtonEmpty
+              size="xs"
+              flush="right"
+              iconType="visBarHorizontal"
+              href={searchProfilerHref}
+              onClick={handleSearchProfilerLinkClick}
+              data-test-subj="inspectorRequestOpenInSearchProfilerButton"
+            >
+              {openInSearchProfilerLabel}
+            </EuiButtonEmpty>
+          </div>
+        </EuiFlexItem>
+      )}
+    </>
+  );
+};

src/plugins/inspector/public/views/requests/components/details/req_details_request.tsx

@@ -26,6 +26,7 @@ export class RequestDetailsRequest extends Component<DetailViewProps> {
         indexPattern={this.props.request.stats?.indexPattern?.value}
         requestParams={this.props.request.response?.requestParams}
         json={JSON.stringify(json, null, 2)}
+        includeOpenInAppLinks
       />
     );
   }

src/plugins/inspector/public/views/requests/components/details/req_details_response.tsx

@@ -24,6 +24,11 @@ export class RequestDetailsResponse extends Component<DetailViewProps> {
       return null;
     }
 
-    return <RequestCodeViewer json={JSON.stringify(responseJSON, null, 2)} />;
+    return (
+      <RequestCodeViewer
+        json={JSON.stringify(responseJSON, null, 2)}
+        includeOpenInAppLinks={false}
+      />
+    );
   }
 }