open clusters tab

elastic · Sep 27, 2023 · cc15c68 · cc15c68
1 parent b3ef76d
commit cc15c68
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 87 deletions.
diff --git a/src/plugins/data/public/search/warnings/extract_warnings.ts b/src/plugins/data/public/search/warnings/extract_warnings.ts
@@ -70,7 +70,8 @@ export function extractWarnings(
           },
           {
             options: {
-              requestId: inspector?.id,
+              initialRequestId: inspector?.id,
+              initialTabs: ['clusters', 'response'],
             }
           }
         );

diff --git a/src/plugins/inspector/public/views/requests/components/request_details.tsx b/src/plugins/inspector/public/views/requests/components/request_details.tsx
@@ -6,33 +6,32 @@
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiTab, EuiTabs } from '@elastic/eui';
+import { Request } from '../../../../common/adapters/request/types';
 
 import {
   ClustersView,
   RequestDetailsRequest,
   RequestDetailsResponse,
   RequestDetailsStats,
 } from './details';
-import { RequestDetailsProps } from './types';
 
-interface RequestDetailsState {
-  availableDetails: DetailViewData[];
-  selectedDetail: DetailViewData | null;
+interface Props {
+  initialTabs?: string[];
+  request: Request;
 }
 
-export interface DetailViewData {
+interface DetailViewData {
   name: string;
   label: string;
   component: any;
 }
 
 const DETAILS: DetailViewData[] = [
   {
-    name: 'Statistics',
+    name: 'statistics',
     label: i18n.translate('inspector.requests.statisticsTabLabel', {
       defaultMessage: 'Statistics',
     }),
@@ -46,87 +45,71 @@ const DETAILS: DetailViewData[] = [
     component: ClustersView,
   },
   {
-    name: 'Request',
+    name: 'request',
     label: i18n.translate('inspector.requests.requestTabLabel', {
       defaultMessage: 'Request',
     }),
     component: RequestDetailsRequest,
   },
   {
-    name: 'Response',
+    name: 'response',
     label: i18n.translate('inspector.requests.responseTabLabel', {
       defaultMessage: 'Response',
     }),
     component: RequestDetailsResponse,
   },
 ];
 
-export class RequestDetails extends Component<RequestDetailsProps, RequestDetailsState> {
-  static propTypes = {
-    request: PropTypes.object.isRequired,
-  };
-
-  state = {
-    availableDetails: [],
-    selectedDetail: null,
-  };
-
-  static getDerivedStateFromProps(nextProps: RequestDetailsProps, prevState: RequestDetailsState) {
-    const selectedDetail = prevState && prevState.selectedDetail;
-    const availableDetails = DETAILS.filter(
+export function RequestDetails(props: Props) {
+  const [availableDetails, setAvailableDetails] = useState<DetailViewData[]>([]);
+  const [selectedDetail, setSelectedDetail] = useState<DetailViewData | null>(null);
+
+  useEffect(() => {
+    const nextAvailableDetails = DETAILS.filter(
       (detail: DetailViewData) =>
-        !detail.component.shouldShow || detail.component.shouldShow(nextProps.request)
+        detail.component.shouldShow?.(props.request)
     );
+    setAvailableDetails(nextAvailableDetails);
+
     // If the previously selected detail is still available we want to stay
     // on this tab and not set another selectedDetail.
-    if (selectedDetail && availableDetails.includes(selectedDetail)) {
-      return { availableDetails };
+    if (selectedDetail && nextAvailableDetails.find(({ name }) => name === selectedDetail.name)) {
+      return;
     }
 
-    return {
-      availableDetails,
-      selectedDetail: availableDetails[0],
-    };
-  }
+    const firstDetail = nextAvailableDetails.length ? nextAvailableDetails[0] : null;
+    const initialTabName = props.initialTabs
+      ? props.initialTabs.find(tabName => {
+          return nextAvailableDetails.some(({ name }) => tabName === name);
+      })
+      : undefined;
+    const initialDetail = initialTabName
+      ? nextAvailableDetails.find(({ name }) => initialTabName === name)
+      : undefined;
 
-  selectDetailsTab = (detail: DetailViewData) => {
-    if (detail !== this.state.selectedDetail) {
-      this.setState({
-        selectedDetail: detail,
-      });
-    }
-  };
-
-  static getSelectedDetailComponent(detail: DetailViewData | null) {
-    return detail ? detail.component : null;
-  }
+    const nextSelectedDetail = !selectedDetail && initialDetail ? initialDetail : firstDetail;
+    setSelectedDetail(nextSelectedDetail);
+  }, [props.initialTabs, props.request]);
 
-  renderDetailTab = (detail: DetailViewData) => {
-    return (
-      <EuiTab
-        key={detail.name}
-        isSelected={detail === this.state.selectedDetail}
-        onClick={() => this.selectDetailsTab(detail)}
-        data-test-subj={`inspectorRequestDetail${detail.name}`}
-      >
-        {detail.label}
-      </EuiTab>
-    );
-  };
-
-  render() {
-    const { selectedDetail, availableDetails } = this.state;
-    const DetailComponent = RequestDetails.getSelectedDetailComponent(selectedDetail);
-
-    if (!availableDetails.length || !DetailComponent) {
-      return null;
-    }
-
-    return (
-      <>
-        <EuiTabs size="s">{this.state.availableDetails.map(this.renderDetailTab)}</EuiTabs>
-        <DetailComponent request={this.props.request} />
-      </>
-    );
-  }
+  return selectedDetail ? (
+    <>
+      <EuiTabs size="s">
+        {availableDetails.map(detail => (
+          <EuiTab
+            key={detail.name}
+            isSelected={detail.name === selectedDetail.name}
+            onClick={() => {
+              if (detail.name !== selectedDetail.name) {
+                setSelectedDetail(detail);
+              }
+            }}
+            data-test-subj={`inspectorRequestDetail${detail.name}`}
+          >
+            {detail.label}
+          </EuiTab>
+        ))}
+      </EuiTabs>
+      <selectedDetail.component request={props.request} />
+    </>
+  ) : null;
 }
diff --git a/src/plugins/inspector/public/views/requests/components/requests_view.tsx b/src/plugins/inspector/public/views/requests/components/requests_view.tsx
@@ -31,7 +31,8 @@ function getInitialRequest(requests: Request[], initialRequestId?: string) {
 }
 
 interface RequestViewOptions {
-  requestId?: string;
+  initialRequestId?: string;
+  initialTabs?: string[];
 }
 
 interface RequestSelectorState {
@@ -48,7 +49,7 @@ export class RequestsViewComponent extends Component<InspectorViewProps, Request
     const requests = this.getRequests();
     this.state = {
       requests,
-      request: getInitialRequest(requests, (this.props.options as RequestViewOptions).requestId),
+      request: getInitialRequest(requests, (this.props.options as RequestViewOptions | undefined)?.initialRequestId),
     };
   }
 
@@ -178,7 +179,7 @@ export class RequestsViewComponent extends Component<InspectorViewProps, Request
 
         <EuiSpacer size="m" />
 
-        {this.state.request && <RequestDetails request={this.state.request} />}
+        {this.state.request && <RequestDetails initialTabs={(this.props.options as RequestViewOptions | undefined)?.initialTabs} request={this.state.request} />}
       </>
     );
   }

diff --git a/src/plugins/inspector/public/views/requests/components/types.ts b/src/plugins/inspector/public/views/requests/components/types.ts