feat(admin): Replace nested table with raw JSON and copy to clipboard button

snuba/admin/static/clickhouse_queries/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Client from "../api_client";
 import { Table } from "../table";
+import { COLORS } from "../theme";
 
 import {
   ClickhouseNodeData,
@@ -67,6 +68,10 @@ function ClickhouseQueries(props: { api: Client }) {
     });
   }
 
+  function copyText(text: string) {
+    window.navigator.clipboard.writeText(text);
+  }
+
   return (
     <div>
       <form>
@@ -131,15 +136,26 @@ function ClickhouseQueries(props: { api: Client }) {
           headerData={["Query", "Response"]}
           rowData={queryResultHistory.map((queryResult) => [
             <span>{queryResult.input_query}</span>,
-            <Table
-              headerData={queryResult.column_names}
-              rowData={queryResult.rows}
-            />,
+            <div>
+              <div style={jsonStyle}>{JSON.stringify(queryResult)}</div>
+              <button onClick={() => copyText(JSON.stringify(queryResult))}>
+                Copy to clipboard
+              </button>
+            </div>,
           ])}
         />
       </div>
     </div>
   );
 }
 
+const jsonStyle = {
+  padding: 10,
+  border: `1px solid ${COLORS.TABLE_BORDER}`,
+  fontFamily: "monospace",
+  borderRadius: 4,
+  backgroundColor: COLORS.BG_LIGHT,
+  marginBottom: 10,
+};
+
 export default ClickhouseQueries;

snuba/admin/static/theme.tsx

@@ -7,6 +7,7 @@ const COLORS = {
   TEXT_DEFAULT: "black",
   TEXT_LIGHTER: "#464646",
   TEXT_INACTIVE: "#858585",
+  BG_LIGHT: "#E3E3E3",
 };
 
 export { COLORS };