From c690ee0d4807cb7b179c8923bf5c7f621a1e69fb Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 1 Nov 2021 18:14:35 +0100
Subject: [PATCH 1/2] feat(ui): allow to download queries as CSV

---
 ui/src/admin/containers/QueriesPage.js | 34 +++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/ui/src/admin/containers/QueriesPage.js b/ui/src/admin/containers/QueriesPage.js
index 22c07c048..4f25b374f 100644
--- a/ui/src/admin/containers/QueriesPage.js
+++ b/ui/src/admin/containers/QueriesPage.js
@@ -23,6 +23,8 @@ import {
 } from 'src/admin/actions/influxdb'
 
 import {notify as notifyAction} from 'shared/actions/notifications'
+import {Button, IconFont, ComponentStatus} from 'src/reusable_ui'
+import moment from 'moment'
 
 class QueriesPage extends Component {
   constructor(props) {
@@ -55,7 +57,16 @@ class QueriesPage extends Component {
       <div className="panel panel-solid">
         <div className="panel-heading">
           <h2 className="panel-title">{title}</h2>
-          <div style={{float: 'right'}}>
+          <div style={{float: 'right', display: 'flex'}}>
+            <div style={{marginRight: '5px'}}>
+              <Button
+                customClass="csv-export"
+                text="CSV"
+                icon={IconFont.Download}
+                status={ComponentStatus.Default}
+                onClick={this.downloadCSV}
+              />
+            </div>
             <AutoRefreshDropdown
               selected={updateInterval}
               onChoose={this.changeRefreshInterval}
@@ -136,6 +147,27 @@ class QueriesPage extends Component {
     const {source, killQuery} = this.props
     killQuery(source.links.proxy, query)
   }
+
+  downloadCSV = () => {
+    const queries = this.props.queries || {}
+    const csv = queries.reduce((acc, val) => {
+      const db = val.database.replace(/"/g, '""')
+      const query = val.query.replace(/"/g, '""')
+      return `${acc}"${db}","${query}",${val.duration}${'\n'}`
+    }, 'database,query,duration\n')
+    const blob = new Blob([csv], {type: 'text/csv'})
+    const a = document.createElement('a')
+
+    a.href = window.URL.createObjectURL(blob)
+    a.target = '_blank'
+    a.download = `${moment().format(
+      'YYYY-MM-DD-HH-mm-ss'
+    )} Chronograf Queries.csv`
+
+    document.body.appendChild(a)
+    a.click()
+    a.parentNode.removeChild(a)
+  }
 }
 
 const {arrayOf, func, string, shape} = PropTypes

From c647470251c43dcd7477a6c05518516ceb7c813d Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 1 Nov 2021 18:41:01 +0100
Subject: [PATCH 2/2] chore: update changelog

---
 CHANGELOG.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5692cbdfe..8ff415c9d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,13 @@
 ## v1.9.2
 
+### Features
+
+1. [#5831](https://github.com/influxdata/chronograf/pull/5831): Add download button on query management page.
+
 ### Bug Fixes
 
 1. [#5830](https://github.com/influxdata/chronograf/pull/5830): Repair enforcement of one organization between multiple tabs.
- 
+
 ### Other
 
 1. [#5824](https://github.com/influxdata/chronograf/pull/5824): Move from `gogo/protobuf` to `google.golang.org/protobuf` for wire format messages.