Adding rowcount label to explore view header (#4059)

superset/assets/javascripts/explore/components/ExploreChartHeader.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { chartPropType } from '../../chart/chartReducer';
 import ExploreActionButtons from './ExploreActionButtons';
+import RowCountLabel from './RowCountLabel';
 import EditableTitle from '../../components/EditableTitle';
 import AlteredSliceTag from '../../components/AlteredSliceTag';
 import FaveStar from '../../components/FaveStar';
@@ -66,11 +67,12 @@ class ExploreChartHeader extends React.PureComponent {
   }
 
   render() {
+    const formData = this.props.form_data;
     const queryResponse = this.props.chart.queryResponse;
     const data = {
-      csv_endpoint: getExploreUrl(this.props.form_data, 'csv'),
-      json_endpoint: getExploreUrl(this.props.form_data, 'json'),
-      standalone_endpoint: getExploreUrl(this.props.form_data, 'standalone'),
+      csv_endpoint: getExploreUrl(formData, 'csv'),
+      json_endpoint: getExploreUrl(formData, 'json'),
+      standalone_endpoint: getExploreUrl(formData, 'standalone'),
     };
 
     return (
@@ -109,13 +111,20 @@ class ExploreChartHeader extends React.PureComponent {
         {this.props.chart.sliceFormData &&
           <AlteredSliceTag
             origFormData={this.props.chart.sliceFormData}
-            currentFormData={this.props.form_data}
+            currentFormData={formData}
           />
         }
         <div className="pull-right">
+          {this.props.chart.chartStatus === 'success' && queryResponse &&
+            <RowCountLabel
+              rowcount={queryResponse.rowcount}
+              limit={formData.row_limit}
+            />
+          }
           {this.props.chart.chartStatus === 'success' &&
           queryResponse &&
           queryResponse.is_cached &&
+
           <CachedLabel
             onClick={this.runQuery.bind(this)}
             cachedTimestamp={queryResponse.cached_dttm}
@@ -133,7 +142,7 @@ class ExploreChartHeader extends React.PureComponent {
             canDownload={this.props.can_download}
             chartStatus={this.props.chart.chartStatus}
             queryResponse={queryResponse}
-            queryEndpoint={getExploreUrl(this.props.form_data, 'query')}
+            queryEndpoint={getExploreUrl(formData, 'query')}
           />
         </div>
       </div>

superset/assets/javascripts/explore/components/RowCountLabel.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from 'react-bootstrap';
+
+import { t } from '../../locales';
+import { defaultNumberFormatter } from '../../modules/utils';
+import TooltipWrapper from '../../components/TooltipWrapper';
+
+
+const propTypes = {
+  rowcount: PropTypes.number,
+  limit: PropTypes.number,
+};
+
+const defaultProps = {
+};
+
+export default function RowCountLabel({ rowcount, limit }) {
+  const limitReached = rowcount === limit;
+  const bsStyle = (limitReached || rowcount === 0) ? 'warning' : 'default';
+  const formattedRowCount = defaultNumberFormatter(rowcount);
+  const tooltip = (
+    <span>
+      {limitReached &&
+        <div>{t('Limit reached')}</div>}
+      {rowcount}
+    </span>
+  );
+  return (
+    <TooltipWrapper label="tt-rowcount" tooltip={tooltip}>
+      <Label
+        bsStyle={bsStyle}
+        style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
+      >
+        {formattedRowCount} rows
+      </Label>
+    </TooltipWrapper>
+  );
+}
+
+RowCountLabel.propTypes = propTypes;
+RowCountLabel.defaultProps = defaultProps;