Use DownloadFileButton to download Fuel capacity report

Change-Id: Ic6cfc25679274550d411d688368b6fc265902542

static/styles/main.less

@@ -3073,6 +3073,11 @@ input[type=range] {
   .table {
     table-layout: fixed;
   }
+  .btn-download-capacity {
+    .glyphicon {
+      margin-right: 5px;
+    }
+  }
 }
 
 .notifications-page {

static/translations/core.json

@@ -969,7 +969,7 @@
                 "total_number_unalloc_nodes": "Total number of unallocated nodes",
                 "node_role": "Node role(s)",
                 "nodes_with_config": "Number of nodes with this configuration",
-                "download_report": "Download a report",
+                "download_report": "Download Report",
                 "loading": "Loading..."
             },
             "dialog": {

static/views/capacity_page.js

@@ -19,7 +19,7 @@ import i18n from 'i18n';
 import React from 'react';
 import models from 'models';
 import {backboneMixin, pollingMixin} from 'component_mixins';
-import {ProgressBar, Table} from 'views/controls';
+import {ProgressBar, Table, DownloadFileButton} from 'views/controls';
 
 var CapacityPage = React.createClass({
   mixins: [
@@ -95,11 +95,19 @@ var LicenseUsage = React.createClass({
             _.values(capacityReport.roles_stat))}
           tableClassName={tableClassName}
         />
-        <a href='/api/capacity/csv' target='_blank' className='btn btn-info'>
-          <i className='glyphicon glyphicon-download-alt' />
-          &nbsp;
-          {i18n('capacity_page.download_report')}
-        </a>
+        <DownloadFileButton
+          url='/api/capacity/csv'
+          headers={{Accept: 'text/csv'}}
+          className='btn btn-info btn-download-capacity'
+          fileName='fuel-capacity-audit.csv'
+          showProgressBar='inline'
+          label={
+            <span>
+              <i className='glyphicon glyphicon-download-alt' />
+              {i18n('capacity_page.download_report')}
+            </span>
+          }
+        />
       </div>
     );
   }