[Inspector Views] [Request View] - Migrate inspector_views to new platform

src/legacy/core_plugins/inspector_views/public/index.scss

@@ -8,4 +8,6 @@
 //   insChart__legend-isLoading
 
 @import 'data/index';
-@import 'requests/index';
+
+// Temporary reference
+@import '../../../../plugins/inspector/public/views/index';

src/legacy/core_plugins/inspector_views/public/register_views.js

@@ -18,9 +18,6 @@
  */
 
 import { DataView } from './data/data_view';
-import { RequestsView } from './requests/requests_view';
-
 import { viewRegistry } from 'ui/inspector';
 
 viewRegistry.register(DataView);
-viewRegistry.register(RequestsView);

src/plugins/inspector/public/adapters/request/types.ts

@@ -52,11 +52,13 @@ export interface RequestParams {
 }
 
 export interface RequestStatistics {
-  [key: string]: {
-    label: string;
-    description?: string;
-    value: any;
-  };
+  [key: string]: RequestStatistic;
+}
+
+export interface RequestStatistic {
+  label: string;
+  description?: string;
+  value: any;
 }
 
 export interface Response {

src/plugins/inspector/public/plugin.tsx

@@ -24,6 +24,8 @@ import { InspectorViewRegistry } from './view_registry';
 import { Adapters, InspectorOptions, InspectorSession } from './types';
 import { InspectorPanel } from './ui/inspector_panel';
 
+import { RequestsView } from './views';
+
 export interface Setup {
   registerView: InspectorViewRegistry['register'];
 
@@ -66,6 +68,8 @@ export class InspectorPublicPlugin implements Plugin<Setup, Start> {
   public async setup(core: CoreSetup) {
     this.views = new InspectorViewRegistry();
 
+    this.views.register(RequestsView);
+
     return {
       registerView: this.views!.register.bind(this.views),
 

src/legacy/core_plugins/inspector_views/public/requests/details/index.js → src/plugins/inspector/public/views/index.ts

@@ -17,6 +17,4 @@
  * under the License.
  */
 
-export * from './req_details_request';
-export * from './req_details_response';
-export * from './req_details_stats';
+export { RequestsView } from './requests';

src/legacy/core_plugins/inspector_views/public/requests/details/req_details_response.js → src/plugins/inspector/public/views/requests/components/details/index.ts

@@ -17,24 +17,6 @@
  * under the License.
  */
 
-import React from 'react';
-import {
-  EuiCodeBlock,
-} from '@elastic/eui';
-
-function RequestDetailsResponse(props) {
-  return (
-    <EuiCodeBlock
-      language="json"
-      paddingSize="s"
-      isCopyable
-      data-test-subj="inspectorResponseBody"
-    >
-      { JSON.stringify(props.request.response.json, null, 2) }
-    </EuiCodeBlock>
-  );
-}
-
-RequestDetailsResponse.shouldShow = (request) => request.response && request.response.json;
-
-export { RequestDetailsResponse };
+export { RequestDetailsRequest } from './req_details_request';
+export { RequestDetailsResponse } from './req_details_response';
+export { RequestDetailsStats } from './req_details_stats';

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

@@ -0,0 +1,49 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { EuiCodeBlock } from '@elastic/eui';
+import { Request } from '../../../../adapters/request/types';
+import { RequestDetailsProps } from '../types';
+
+export class RequestDetailsRequest extends Component<RequestDetailsProps> {
+  static propTypes = {
+    request: PropTypes.object.isRequired,
+  };
+
+  static shouldShow = (request: Request) => Boolean(request && request.json);
+
+  render() {
+    if (!this.props.request) {
+      return null;
+    }
+
+    return (
+      <EuiCodeBlock
+        language="json"
+        paddingSize="s"
+        isCopyable
+        data-test-subj="inspectorRequestBody"
+      >
+        {JSON.stringify(this.props.request.json, null, 2)}
+      </EuiCodeBlock>
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { EuiCodeBlock } from '@elastic/eui';
+import { Request } from '../../../../adapters/request/types';
+import { RequestDetailsProps } from '../types';
+
+export class RequestDetailsResponse extends Component<RequestDetailsProps> {
+  static propTypes = {
+    request: PropTypes.object.isRequired,
+  };
+
+  static shouldShow = (request: Request) =>
+    Boolean(RequestDetailsResponse.getResponseJson(request));
+
+  static getResponseJson = (request: Request) => (request.response ? request.response.json : null);
+
+  render() {
+    const responseJSON = RequestDetailsResponse.getResponseJson(this.props.request);
+
+    if (!responseJSON) {
+      return null;
+    }
+
+    return (
+      <EuiCodeBlock
+        language="json"
+        paddingSize="s"
+        isCopyable
+        data-test-subj="inspectorResponseBody"
+      >
+        {JSON.stringify(responseJSON, null, 2)}
+      </EuiCodeBlock>
+    );
+  }
+}