Change Download JSON button to be a normal link with href. (#3040)

* Change Download JSON button to be a normal link with href.

* Fix proxy

zipkin-lens/README.md

@@ -19,6 +19,9 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br />
 You will also see any lint errors in the console.
 
+By default, API requests are proxied to `http://localhost:9411`. You can change this target using
+the `API_BASE` environment variable, e.g., `API_BASE=http://tracing.company.com npm start`.
+
 ### `npm test`
 
 Launches the test runner in the interactive watch mode.<br />

zipkin-lens/package.json

@@ -51,6 +51,7 @@
     "eslint-plugin-react-hooks": "^1.6.1",
     "fetch-mock": "^7.3.0",
     "history": "^4.10.1",
+    "http-proxy-middleware": "^1.0.3",
     "lodash": "^4.17.14",
     "moment": "^2.24.0",
     "mvy": "0.2.1",
@@ -99,6 +100,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "proxy": "http://localhost:9411"
+  }
 }

zipkin-lens/src/components/TracePage/TraceSummaryHeader.jsx

@@ -106,6 +106,10 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
       ? config.logsUrl.replace(/{traceId}/g, traceSummary.traceId)
       : undefined;
 
+  const traceJsonUrl = traceSummary
+    ? `${api.TRACE}/${traceSummary.traceId}`
+    : undefined;
+
   const archivePostUrl =
     config.archivePostUrl && traceSummary ? config.archivePostUrl : undefined;
 
@@ -180,24 +184,6 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
       });
   }, [archivePostUrl, archiveUrl, traceSummary, enqueueSnackbar]);
 
-  const handleSaveButtonClick = useCallback(() => {
-    if (!traceSummary || !traceSummary.traceId) {
-      return;
-    }
-    fetch(`${api.TRACE}/${traceSummary.traceId}`)
-      .then((resp) => resp.blob())
-      .then((blob) => {
-        const a = document.createElement('a');
-        a.href = window.URL.createObjectURL(blob);
-        a.download = `${traceSummary.traceId}.json`;
-        a.click();
-        // See: https://stackoverflow.com/questions/30694453/blob-createobjecturl-download-not-working-in-firefox-but-works-when-debugging
-        setTimeout(() => {
-          window.URL.revokeObjectURL(a.href);
-        }, 100);
-      });
-  }, [traceSummary]);
-
   const traceInfo = traceSummary ? (
     <Box className={classes.traceInfo}>
       {[
@@ -255,7 +241,9 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
             <Button
               variant="outlined"
               className={classes.actionButton}
-              onClick={handleSaveButtonClick}
+              href={traceJsonUrl}
+              download={traceSummary && `${traceSummary.traceId}.json`}
+              data-testid="download-json-link"
             >
               <FontAwesomeIcon
                 icon={faDownload}

zipkin-lens/src/components/TracePage/TraceSummaryHeader.test.jsx

@@ -19,6 +19,28 @@ import render from '../../test/util/render-with-default-settings';
 import TraceSummaryHeader from './TraceSummaryHeader';
 
 describe('<TraceSummaryHeader />', () => {
+  it('renders download JSON button', () => {
+    const { getByTestId } = render(
+      <TraceSummaryHeader
+        traceSummary={{
+          traceId: '1',
+          spans: [],
+          serviceNameAndSpanCounts: [],
+          duration: 1,
+          durationStr: '1μs',
+          rootSpan: {
+            serviceName: 'service-A',
+            spanName: 'span-A',
+          },
+        }}
+      />,
+    );
+    const downloadJson = getByTestId('download-json-link');
+    expect(downloadJson).toBeInTheDocument();
+    expect(downloadJson).toHaveAttribute('href', '/zipkin/api/v2/trace/1');
+    expect(downloadJson).toHaveAttribute('download', '1.json');
+  });
+
   it('does not render View Logs link with default config', () => {
     const { queryByTestId } = render(
       <TraceSummaryHeader

zipkin-lens/src/setupProxy.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2015-2020 The OpenZipkin Authors
+ *
+ * Licensed 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.
+ */
+
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+const API_BASE = process.env.API_BASE || 'http://localhost:9411';
+
+// Default create-react-app proxy only proxies AJAX requests by looking at Accept headers. We want
+// to proxy any request though, mainly to support the Download JSON button.
+const proxy = createProxyMiddleware(['**/api/**', '**/config.json'], {
+  target: API_BASE,
+  changeOrigin: true,
+});
+
+module.exports = (app) => {
+  app.use('/', proxy);
+};