From ef4872c5a353357951c2f88a0255d4c8c98b5076 Mon Sep 17 00:00:00 2001
From: Felix Li <astralidea@163.com>
Date: Fri, 21 Apr 2023 19:12:16 +0800
Subject: [PATCH] Add a download button in the query UI (#22153)

Signed-off-by: Astralidea <astralidea@163.com>
---
 .../starrocks/http/action/QueryAction.java    |  1 +
 .../starrocks/http/action/WebBaseAction.java  |  2 +-
 webroot/static/starrocks.js                   | 40 +++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 webroot/static/starrocks.js

diff --git a/fe/fe-core/src/main/java/com/starrocks/http/action/QueryAction.java b/fe/fe-core/src/main/java/com/starrocks/http/action/QueryAction.java
index 06470f6d7f5..05b0dcc67c3 100644
--- a/fe/fe-core/src/main/java/com/starrocks/http/action/QueryAction.java
+++ b/fe/fe-core/src/main/java/com/starrocks/http/action/QueryAction.java
@@ -71,6 +71,7 @@ public class QueryAction extends WebBaseAction {
     // Note: we do not show 'Query ID' column in web page
     private void addFinishedQueryInfo(StringBuilder buffer) {
         buffer.append("<h2>Finished Queries</h2>");
+        buffer.append("<button style=\"float:right\" onclick=\"download_query()\">Download CSV</button>");
         buffer.append("<p>This table lists the latest 100 queries</p>");
 
         List<List<String>> finishedQueries = ProfileManager.getInstance().getAllQueries();
diff --git a/fe/fe-core/src/main/java/com/starrocks/http/action/WebBaseAction.java b/fe/fe-core/src/main/java/com/starrocks/http/action/WebBaseAction.java
index 3083868f921..793768f8f8d 100644
--- a/fe/fe-core/src/main/java/com/starrocks/http/action/WebBaseAction.java
+++ b/fe/fe-core/src/main/java/com/starrocks/http/action/WebBaseAction.java
@@ -88,7 +88,7 @@ public class WebBaseAction extends BaseAction {
             + "  <script type=\"text/javascript\" src=\"/static?res=jquery.js\"></script>"
             + "  <script type=\"text/javascript\" src=\"/static?res=jquery.dataTables.js\"></script>"
             + "  <script type=\"text/javascript\" src=\"/static?res=datatables_bootstrap.js\"></script>"
-
+            + "  <script type=\"text/javascript\" src=\"/static?res=starrocks.js\"></script>"
             + "  <script type=\"text/javascript\"> "
             + "    $(document).ready(function() { "
             + "      $('#table_id').dataTable({ "
diff --git a/webroot/static/starrocks.js b/webroot/static/starrocks.js
new file mode 100644
index 00000000000..08d38b4cc77
--- /dev/null
+++ b/webroot/static/starrocks.js
@@ -0,0 +1,40 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you 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.
+
+function download_query() {
+    let tableThs = Array.from($('table th')).map(v=>{return v.textContent})
+    let tableTds = Array.from($('table td')).map(v=>{return v.textContent})
+    let combine = tableThs.concat(tableTds)
+    let csv = ''
+    let colWidth = 9
+    let column = []
+    combine.map((v,i)=>{
+        column.push(v.trim())
+        if((i+1)%colWidth === 0){
+            csv += column.join(",")+'\n'
+            column = []
+        }
+    })
+    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csv);
+    let link = document.createElement("a");
+    let date = new Date().toISOString().replace(/\D/g, '').slice(0, -3)
+    link.href = uri;
+    link.download = "query_" + date + ".csv";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}