Request & Response in Tracing. Closes #255

Author: timsuchanek

packages/graphql-playground/src/components/Playground.tsx

@@ -694,7 +694,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
                     isActive={index === selectedSessionIndex}
                     permission={session.permission}
                     serviceInformation={this.state.serviceInformation}
-                    tracingSupported={this.state.tracingSupported}
+                    tracingSupported={Boolean(this.state.tracingSupported)}
                   />
                 </div>
               ))}

packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx

@@ -122,6 +122,8 @@ export interface State {
   isWaitingForResponse: boolean
   selectedVariableNames: string[]
   responseExtensions: any
+  currentQueryStartTime?: Date
+  currentQueryEndTime?: Date
 }
 
 export interface SimpleProps {
@@ -667,6 +669,9 @@ export class GraphQLEditor extends React.PureComponent<
                       this.state.responseExtensions &&
                       this.state.responseExtensions.tracing
                     }
+                    startTime={this.state.currentQueryStartTime}
+                    endTime={this.state.currentQueryEndTime}
+                    tracingSupported={this.props.tracingSupported}
                   />
                 </div>
               </div>
@@ -948,6 +953,7 @@ export class GraphQLEditor extends React.PureComponent<
         isWaitingForResponse: true,
         responses: [{ date: null, time: new Date() }],
         operationName,
+        currentQueryStartTime: new Date(),
       } as State)
 
       // _fetchQuery may return a subscription.
@@ -988,6 +994,7 @@ export class GraphQLEditor extends React.PureComponent<
               isWaitingForResponse: false,
               responses,
               responseExtensions: extensions,
+              currentQueryEndTime: new Date(),
             } as State)
           }
         },

packages/graphql-playground/src/components/Playground/ResponseTracing.tsx

@@ -23,6 +23,8 @@ export interface TracingFormat {
 export interface Props {
   tracing?: TracingFormat
   tracingSupported?: boolean
+  startTime?: Date
+  endTime?: Date
 }
 
 const TracingWrapper = styled.div`
@@ -47,19 +49,47 @@ const TracingRows = styled.div`
 
 export default class ResponseTracing extends React.Component<Props, {}> {
   render() {
-    const { tracing, tracingSupported } = this.props
+    const { tracing, tracingSupported, startTime, endTime } = this.props
+    // console.log(this.props)
+    const requestMs =
+      tracing && startTime
+        ? Math.abs(new Date(tracing.startTime).getTime() - startTime.getTime())
+        : 0
+    const responseMs =
+      tracing && endTime
+        ? Math.abs(endTime.getTime() - new Date(tracing.endTime).getTime())
+        : 0
+    const requestDuration = 1000 * 1000 * requestMs
+    const maxLeft = tracing
+      ? tracing.execution.resolvers.reduce((max, curr) => {
+          if (curr.startOffset > max) {
+            return curr.startOffset
+          }
+          return max
+        }, 0)
+      : 0
     return (
       <TracingWrapper>
         {tracing ? (
           <TracingRows>
+            <TracingRow
+              path={['Request']}
+              startOffset={0}
+              duration={requestDuration}
+            />
             {tracing.execution.resolvers.map(res => (
               <TracingRow
                 key={res.path.join('.')}
                 path={res.path}
-                startOffset={res.startOffset}
+                startOffset={res.startOffset + requestDuration}
                 duration={res.duration}
               />
             ))}
+            <TracingRow
+              path={['Response']}
+              startOffset={maxLeft + requestDuration}
+              duration={1000 * 1000 * responseMs}
+            />
           </TracingRows>
         ) : tracingSupported ? (
           <NotSupported>