Merge pull request #5831 from influxdata/5827/queries_csv_download

feat(ui): add download button on query management page

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.

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