Merge pull request #3582 from weaveworks/3581-raw-report-time-travel-context

Use Time Travel context when downloading raw reports

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

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

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);

client/app/styles/_base.scss

@@ -1769,6 +1769,7 @@ a {
 
   &-item {
     height: 40px;
+    .soft { opacity: 0.6; }
   }
 
   button {