-
Notifications
You must be signed in to change notification settings - Fork 13.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
A nice CacheLabel React component (#2628)
Introducing a nice component as a label that show when data was loaded from cache, when the cache was taken (in humanize duration as in `a few minutes ago`) in a tooltip, and it can act as a button that can trigger a force-refresh. While working on it, it became clear that it was going to be hard to use this component in the Dashboard view since it's not pure React. I'm planning on refactoring the dashboard view with proper React/Redux and introducing the CachedLabel component at that point. While digging around in the Dashboard view I realized that there was a bunch on unused code around managing timers that was used in explorev1 and decided to rip it out.
- Loading branch information
1 parent
23aeee5
commit 787daf6
Showing
6 changed files
with
108 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import { Label } from 'react-bootstrap'; | ||
| import moment from 'moment'; | ||
| import TooltipWrapper from './TooltipWrapper'; | ||
|
|
||
| const propTypes = { | ||
| onClick: PropTypes.func, | ||
| cachedTimestamp: PropTypes.string, | ||
| className: PropTypes.string, | ||
| }; | ||
|
|
||
| class CacheLabel extends React.PureComponent { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| tooltipContent: '', | ||
| hovered: false, | ||
| }; | ||
| } | ||
|
|
||
| updateTooltipContent() { | ||
| const cachedText = this.props.cachedTimestamp ? ( | ||
| <span> | ||
| Loaded data cached <b>{moment(this.props.cachedTimestamp).fromNow()}</b> | ||
| </span>) : | ||
| 'Loaded from cache'; | ||
|
|
||
| const tooltipContent = ( | ||
| <span> | ||
| {cachedText}. | ||
| Click to force-refresh | ||
| </span> | ||
| ); | ||
| this.setState({ tooltipContent }); | ||
| } | ||
|
|
||
| mouseOver() { | ||
| this.updateTooltipContent(); | ||
| this.setState({ hovered: true }); | ||
| } | ||
|
|
||
| mouseOut() { | ||
| this.setState({ hovered: false }); | ||
| } | ||
|
|
||
| render() { | ||
| const labelStyle = this.state.hovered ? 'primary' : 'default'; | ||
| return ( | ||
| <TooltipWrapper | ||
| tooltip={this.state.tooltipContent} | ||
| label="cache-desc" | ||
| > | ||
| <Label | ||
| className={this.props.className} | ||
| bsStyle={labelStyle} | ||
| style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }} | ||
| onClick={this.props.onClick} | ||
| onMouseOver={this.mouseOver.bind(this)} | ||
| onMouseOut={this.mouseOut.bind(this)} | ||
| > | ||
| cached <i className="fa fa-refresh" /> | ||
| </Label> | ||
| </TooltipWrapper>); | ||
| } | ||
| } | ||
| CacheLabel.propTypes = propTypes; | ||
|
|
||
| export default CacheLabel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
superset/assets/spec/javascripts/components/CachedLabel_spec.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
| import { expect } from 'chai'; | ||
| import { describe, it } from 'mocha'; | ||
| import { shallow } from 'enzyme'; | ||
| import { Label } from 'react-bootstrap'; | ||
|
|
||
| import CachedLabel from '../../../javascripts/components/CachedLabel'; | ||
|
|
||
| describe('CachedLabel', () => { | ||
| const defaultProps = { | ||
| onClick: () => {}, | ||
| cachedTimestamp: '2017-01-01', | ||
| }; | ||
|
|
||
| it('is valid', () => { | ||
| expect( | ||
| React.isValidElement(<CachedLabel {...defaultProps} />), | ||
| ).to.equal(true); | ||
| }); | ||
| it('renders', () => { | ||
| const wrapper = shallow( | ||
| <CachedLabel {...defaultProps} />, | ||
| ); | ||
| expect(wrapper.find(Label)).to.have.length(1); | ||
| }); | ||
| }); |