From 050017085ed1203d2054999b909a65f1b88bd9c2 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 14 Mar 2019 15:54:50 +0100
Subject: [PATCH] Use Time Travel context when downloading raw reports.

---
 app/api_report.go                             |  3 +-
 .../components/troubleshooting-menu.js        | 28 ++++++++++---------
 client/app/scripts/utils/web-api-utils.js     | 10 +++++--
 client/app/styles/_base.scss                  |  1 +
 4 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/api_report.go b/app/api_report.go
index c7cc0c5f6..5c8b0dff6 100644
--- a/app/api_report.go
+++ b/app/api_report.go
@@ -13,7 +13,8 @@ import (
 // Raw report handler
 func makeRawReportHandler(rep Reporter) CtxHandlerFunc {
 	return func(ctx context.Context, w http.ResponseWriter, r *http.Request) {
-		rawReport, err := rep.Report(ctx, time.Now())
+		timestamp := deserializeTimestamp(r.URL.Query().Get("timestamp"))
+		rawReport, err := rep.Report(ctx, timestamp)
 		if err != nil {
 			respondWith(w, http.StatusInternalServerError, err)
 			return
diff --git a/client/app/scripts/components/troubleshooting-menu.js b/client/app/scripts/components/troubleshooting-menu.js
index 54c88e8ab..2e0f7895b 100644
--- a/client/app/scripts/components/troubleshooting-menu.js
+++ b/client/app/scripts/components/troubleshooting-menu.js
@@ -6,7 +6,7 @@ import {
   resetLocalViewState,
   clickDownloadGraph
 } from '../actions/app-actions';
-import { getApiPath } from '../utils/web-api-utils';
+import { getReportUrl } from '../utils/web-api-utils';
 
 class DebugMenu extends React.Component {
   constructor(props, context) {
@@ -21,9 +21,7 @@ class DebugMenu extends React.Component {
   }
 
   render() {
-    const reportDownloadUrl = process.env.WEAVE_CLOUD
-      ? `${getApiPath()}/api/report`
-      : 'api/report';
+    const { pausedAt } = this.props;
     return (
       <div className="troubleshooting-menu-wrapper">
         <div className="troubleshooting-menu">
@@ -32,14 +30,13 @@ class DebugMenu extends React.Component {
             <div className="troubleshooting-menu-item">
               <a
                 className="footer-icon"
-                href={reportDownloadUrl}
-                download
                 title="Save raw data as JSON"
+                href={getReportUrl(pausedAt)}
+                download
               >
                 <i className="fa fa-code" />
-                <span className="description">
-                  Save raw data as JSON
-                </span>
+                <span className="description">Save raw data as JSON</span>
+                {pausedAt && <span className="soft"> ({pausedAt})</span>}
               </a>
             </div>
             <div className="troubleshooting-menu-item">
@@ -49,9 +46,8 @@ class DebugMenu extends React.Component {
                 title="Save canvas as SVG (does not include search highlighting)"
               >
                 <i className="fa fa-download" />
-                <span className="description">
-                  Save canvas as SVG (does not include search highlighting)
-                </span>
+                <span className="description">Save canvas as SVG</span>
+                <span className="soft"> (does not include search highlighting)</span>
               </button>
             </div>
             <div className="troubleshooting-menu-item">
@@ -90,7 +86,13 @@ class DebugMenu extends React.Component {
   }
 }
 
-export default connect(null, {
+function mapStateToProps(state) {
+  return {
+    pausedAt: state.get('pausedAt'),
+  };
+}
+
+export default connect(mapStateToProps, {
   clickDownloadGraph,
   resetLocalViewState,
   toggleTroubleshootingMenu
diff --git a/client/app/scripts/utils/web-api-utils.js b/client/app/scripts/utils/web-api-utils.js
index 7cbd1ff13..dfbb2096d 100644
--- a/client/app/scripts/utils/web-api-utils.js
+++ b/client/app/scripts/utils/web-api-utils.js
@@ -48,9 +48,11 @@ let createWebsocketAt = null;
 let firstMessageOnWebsocketAt = null;
 let continuePolling = true;
 
-export function buildUrlQuery(params = makeMap(), state) {
+export function buildUrlQuery(params = makeMap(), state = null) {
   // Attach the time travel timestamp to every request to the backend.
-  params = params.set('timestamp', state.get('pausedAt'));
+  if (state) {
+    params = params.set('timestamp', state.get('pausedAt'));
+  }
 
   // Ignore the entries with values `null` or `undefined`.
   return params.map((value, param) => {
@@ -99,6 +101,10 @@ export function getApiPath(pathname = window.location.pathname) {
   return basePath(pathname);
 }
 
+export function getReportUrl(timestamp) {
+  return `${getApiPath()}/api/report?${buildUrlQuery(makeMap({ timestamp }))}`;
+}
+
 function topologiesUrl(state) {
   const activeTopologyOptions = activeTopologyOptionsSelector(state);
   const optionsQuery = buildUrlQuery(activeTopologyOptions, state);
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 2ffb71c58..b55831f41 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1769,6 +1769,7 @@ a {
 
   &-item {
     height: 40px;
+    .soft { opacity: 0.6; }
   }
 
   button {