Add a copy icon entries in KeyValuesTable (jaegertracing#204)

Signed-off-by: Everett Ross <reverett@uber.com>

packages/jaeger-ui/package.json

@@ -53,6 +53,7 @@
     "query-string": "^5.0.0",
     "raven-js": "^3.22.1",
     "react": "^16.3.2",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dimensions": "^1.3.0",
     "react-dom": "^16.3.2",
     "react-ga": "^2.4.1",

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.css

@@ -40,6 +40,19 @@ limitations under the License.
   width: 125px;
 }
 
+.KeyValueTable--copyColumn {
+  text-align: right;
+}
+
+.KeyValueTable--copyIcon {
+  visibility: hidden;
+  cursor: copy;
+}
+
+tr:hover > .KeyValueTable--copyColumn > .KeyValueTable--copyIcon {
+  visibility: unset;
+}
+
 .KeyValueTable--body > tr > td {
   padding: 0.25rem 0.5rem;
   vertical-align: top;

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.js

@@ -17,6 +17,7 @@
 import * as React from 'react';
 import jsonMarkup from 'json-markup';
 import { Dropdown, Icon, Menu } from 'antd';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import type { KeyValuePair, Link } from '../../../../types/trace';
 
 import './KeyValuesTable.css';
@@ -96,6 +97,11 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
               <tr key={`${row.key}-${i}`}>
                 <td className="KeyValueTable--keyColumn">{row.key}</td>
                 <td>{valueMarkup}</td>
+                <td className="KeyValueTable--copyColumn">
+                  <CopyToClipboard text={JSON.stringify(row, null, 2)}>
+                    <Icon className="KeyValueTable--copyIcon" type="copy" />
+                  </CopyToClipboard>
+                </td>
               </tr>
             );
           })}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js

@@ -15,6 +15,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Dropdown } from 'antd';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import KeyValuesTable from './KeyValuesTable';
 
@@ -40,6 +41,16 @@ describe('<KeyValuesTable>', () => {
     });
   });
 
+  it('renders a Copy icon for each data element', () => {
+    const trs = wrapper.find('tr');
+    expect(trs.length).toBe(data.length);
+    trs.forEach((tr, i) => {
+      const copyColumn = tr.find('.KeyValueTable--copyColumn');
+      expect(copyColumn.find(CopyToClipboard).prop('text')).toBe(JSON.stringify(data[i], null, 2));
+      expect(copyColumn.find({ type: 'copy' }).length).toBe(1);
+    });
+  });
+
   it('renders a single link correctly', () => {
     wrapper.setProps({
       linksGetter: (array, i) =>

yarn.lock

@@ -1,3 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
 
 
@@ -2701,6 +2702,13 @@ copy-template-dir@1.3.0:
     readdirp "^2.0.0"
     run-parallel "^1.1.4"
 
+copy-to-clipboard@^3:
+  version "3.0.8"
+  resolved "https://unpm.uberinternal.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+  integrity sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==
+  dependencies:
+    toggle-selection "^1.0.3"
+
 copy-webpack-plugin@4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.3.1.tgz#19ba6370bf6f8e263cbd66185a2b79f2321a9302"
@@ -10208,6 +10216,14 @@ react-app-rewired@^1.4.0:
     cross-spawn "^5.1.0"
     dotenv "^4.0.0"
 
+react-copy-to-clipboard@^5.0.1:
+  version "5.0.1"
+  resolved "https://unpm.uberinternal.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
+  integrity sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-deep-force-update@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.1.tgz#bcd31478027b64b3339f108921ab520b4313dc2c"
@@ -12316,6 +12332,11 @@ to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://unpm.uberinternal.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toposort@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"