all files / src/explore/components/ ExploreChartHeader.jsx

76.32% Statements 29/38
42.11% Branches 8/19
40% Functions 2/5
76.32% Lines 29/38
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151                                                                                                                                                                                                                                                    
import React from 'react';
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';
import TooltipWrapper from '../../components/TooltipWrapper';
import Timer from '../../components/Timer';
import CachedLabel from '../../components/CachedLabel';
import { t } from '../../locales';
 
const CHART_STATUS_MAP = {
  failed: 'danger',
  loading: 'warning',
  success: 'success',
};
 
const propTypes = {
  actions: PropTypes.object.isRequired,
  addHistory: PropTypes.func,
  can_overwrite: PropTypes.bool.isRequired,
  can_download: PropTypes.bool.isRequired,
  isStarred: PropTypes.bool.isRequired,
  slice: PropTypes.object,
  table_name: PropTypes.string,
  form_data: PropTypes.object,
  timeout: PropTypes.number,
  chart: PropTypes.shape(chartPropType),
};
 
class ExploreChartHeader extends React.PureComponent {
  runQuery() {
    this.props.actions.runQuery(this.props.form_data, true,
      this.props.timeout, this.props.chart.chartKey);
  }
 
  updateChartTitleOrSaveSlice(newTitle) {
    const isNewSlice = !this.props.slice;
    const params = {
      slice_name: newTitle,
      action: isNewSlice ? 'saveas' : 'overwrite',
    };
    this.props.actions.saveSlice(this.props.form_data, params)
      .then((data) => {
        if (isNewSlice) {
          this.props.actions.createNewSlice(
            data.can_add, data.can_download, data.can_overwrite,
            data.slice, data.form_data);
          this.props.addHistory({ isReplace: true, title: `[chart] ${data.slice.slice_name}` });
        } else {
          this.props.actions.updateChartTitle(newTitle);
        }
      });
  }
 
  renderChartTitle() {
    let title;
    if (Ethis.props.slice) {
      title = this.props.slice.slice_name;
    } else {
      title = t('%s - untitled', this.props.table_name);
    }
    return title;
  }
 
  render() {
    const formData = this.props.form_data;
    const {
      chartStatus,
      chartUpdateEndTime,
      chartUpdateStartTime,
      latestQueryFormData,
      queryResponse } = this.props.chart;
    const chartSucceeded = ['success', 'rendered'].indexOf(this.props.chart.chartStatus) > 0;
    return (
      <div
        id="slice-header"
        className="clearfix panel-title-large"
      >
        <EditableTitle
          title={this.renderChartTitle()}
          canEdit={!this.props.slice || this.props.can_overwrite}
          onSaveTitle={this.updateChartTitleOrSaveSlice.bind(this)}
        />
 
        {this.props.slice &&
        <span>
          <FaveStar
            itemId={this.props.slice.slice_id}
            fetchFaveStar={this.props.actions.fetchFaveStar}
            saveFaveStar={this.props.actions.saveFaveStar}
            isStarred={this.props.isStarred}
          />
 
          <TooltipWrapper
            label="edit-desc"
            tooltip={t('Edit chart properties')}
          >
            <a
              className="edit-desc-icon"
              href={`/slicemodelview/edit/${this.props.slice.slice_id}`}
            >
              <i className="fa fa-edit" />
            </a>
          </TooltipWrapper>
        </span>
        }
        {this.props.chart.sliceFormData &&
          <AlteredSliceTag
            origFormData={this.props.chart.sliceFormData}
            currentFormData={formData}
          />
        }
        <div className="pull-right">
          {chartSucceeded && queryResponse &&
            <RowCountLabel
              rowcount={queryResponse.rowcount}
              limit={formData.row_limit}
            />}
          {chartSucceeded && queryResponse && queryResponse.is_cached &&
            <CachedLabel
              onClick={this.runQuery.bind(this)}
              cachedTimestamp={queryResponse.cached_dttm}
            />}
          <Timer
            startTime={chartUpdateStartTime}
            endTime={chartUpdateEndTime}
            isRunning={chartStatus === 'loading'}
            status={CHART_STATUS_MAP[chartStatus]}
            style={{ fontSize: '10px', marginRight: '5px' }}
          />
          <ExploreActionButtons
            slice={this.props.slice}
            canDownload={this.props.can_download}
            chartStatus={chartStatus}
            latestQueryFormData={latestQueryFormData}
            queryResponse={queryResponse}
          />
        </div>
      </div>
    );
  }
}
 
ExploreChartHeader.propTypes = propTypes;
 
export default ExploreChartHeader;