Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3609 from influxdata/flux/cache-metaqueries 

Preserve schema tree children open state
pull/10616/head
Chris Henn 2018-06-08 14:30:34 -07:00 committed by GitHub
parent 28c69ff92d e657b052c2
commit 0f4116147a
5 changed files with 91 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/flux/components/DatabaseListItem.tsx
View File

@ -85,25 +85,23 @@ class DatabaseListItem extends PureComponent<Props, State> {
const {db, service} = this.props const {db, service} = this.props
const {isOpen, searchTerm} = this.state const {isOpen, searchTerm} = this.state
if (isOpen) { return (
return ( <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
<> <div className="flux-schema--filter">
<div className="flux-schema--filter"> <input
<input className="form-control input-xs"
className="form-control input-xs" placeholder={`Filter within ${db}`}
placeholder={`Filter within ${db}`} type="text"
type="text" spellCheck={false}
spellCheck={false} autoComplete="off"
autoComplete="off" value={searchTerm}
value={searchTerm} onClick={this.handleInputClick}
onClick={this.handleInputClick} onChange={this.onSearch}
onChange={this.onSearch} />
/> </div>
</div> <TagList db={db} service={service} tags={this.tags} filter={[]} />
<TagList db={db} service={service} tags={this.tags} filter={[]} /> </div>
</> )
)
}
} }
private handleClickCopy = e => { private handleClickCopy = e => {

12
ui/src/flux/components/TagList.tsx
View File

@ -12,17 +12,7 @@ interface Props {
filter: SchemaFilter[] filter: SchemaFilter[]
} }
interface State { export default class TagList extends PureComponent<Props> {
isOpen: boolean
}
export default class TagList extends PureComponent<Props, State> {
constructor(props) {
super(props)
this.state = {isOpen: false}
}
public render() { public render() {
const {db, service, tags, filter} = this.props const {db, service, tags, filter} = this.props

80
ui/src/flux/components/TagListItem.tsx
View File

@ -66,7 +66,14 @@ export default class TagListItem extends PureComponent<Props, State> {
public render() { public render() {
const {tagKey, db, service, filter} = this.props const {tagKey, db, service, filter} = this.props
const {tagValues, searchTerm, loadingMore, count, limit} = this.state const {
tagValues,
searchTerm,
loadingMore,
count,
limit,
isOpen,
} = this.state
return ( return (
<div className={this.className}> <div className={this.className}>
@ -83,46 +90,37 @@ export default class TagListItem extends PureComponent<Props, State> {
</div> </div>
</CopyToClipboard> </CopyToClipboard>
</div> </div>
{this.state.isOpen && ( <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
<> <div className="flux-schema--header" onClick={this.handleInputClick}>
<div <div className="flux-schema--filter">
className="flux-schema--header" <input
onClick={this.handleInputClick} className="form-control input-xs"
> placeholder={`Filter within ${tagKey}`}
<div className="flux-schema--filter"> type="text"
<input spellCheck={false}
className="form-control input-xs" autoComplete="off"
placeholder={`Filter within ${tagKey}`} value={searchTerm}
type="text" onChange={this.onSearch}
spellCheck={false} />
autoComplete="off" {this.isSearching && <LoadingSpinner style={this.spinnerStyle} />}
value={searchTerm}
onChange={this.onSearch}
/>
{this.isSearching && (
<LoadingSpinner style={this.spinnerStyle} />
)}
</div>
{this.count}
</div> </div>
{this.isLoading && <LoaderSkeleton />} {this.count}
{!this.isLoading && ( </div>
<> {this.isLoading && <LoaderSkeleton />}
<TagValueList {!this.isLoading && (
db={db} <TagValueList
service={service} db={db}
values={tagValues} service={service}
tagKey={tagKey} values={tagValues}
filter={filter} tagKey={tagKey}
onLoadMoreValues={this.handleLoadMoreValues} filter={filter}
isLoadingMoreValues={loadingMore === RemoteDataState.Loading} onLoadMoreValues={this.handleLoadMoreValues}
shouldShowMoreValues={limit < count} isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
loadMoreCount={this.loadMoreCount} shouldShowMoreValues={limit < count}
/> loadMoreCount={this.loadMoreCount}
</> />
)} )}
</> </div>
)}
</div> </div>
) )
} }
@ -315,7 +313,7 @@ export default class TagListItem extends PureComponent<Props, State> {
return ( return (
!isOpen && !isOpen &&
(loadingAll === RemoteDataState.NotStarted || (loadingAll === RemoteDataState.NotStarted ||
loadingAll !== RemoteDataState.Error) loadingAll === RemoteDataState.Error)
) )
} }

60
ui/src/flux/components/TagValueListItem.tsx
View File

@ -48,7 +48,7 @@ class TagValueListItem extends PureComponent<Props, State> {
public render() { public render() {
const {db, service, value} = this.props const {db, service, value} = this.props
const {searchTerm} = this.state const {searchTerm, isOpen} = this.state
return ( return (
<div className={this.className} onClick={this.handleClick}> <div className={this.className} onClick={this.handleClick}>
@ -65,35 +65,33 @@ class TagValueListItem extends PureComponent<Props, State> {
</div> </div>
</CopyToClipboard> </CopyToClipboard>
</div> </div>
{this.state.isOpen && ( <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
<> {this.isLoading && <LoaderSkeleton />}
{this.isLoading && <LoaderSkeleton />} {!this.isLoading && (
{!this.isLoading && ( <>
<> {!!this.tags.length && (
{!!this.tags.length && ( <div className="flux-schema--filter">
<div className="flux-schema--filter"> <input
<input className="form-control input-xs"
className="form-control input-xs" placeholder={`Filter within ${value}`}
placeholder={`Filter within ${value}`} type="text"
type="text" spellCheck={false}
spellCheck={false} autoComplete="off"
autoComplete="off" value={searchTerm}
value={searchTerm} onClick={this.handleInputClick}
onClick={this.handleInputClick} onChange={this.onSearch}
onChange={this.onSearch} />
/> </div>
</div> )}
)} <TagList
<TagList db={db}
db={db} service={service}
service={service} tags={this.tags}
tags={this.tags} filter={this.filter}
filter={this.filter} />
/> </>
</> )}
)} </div>
</>
)}
</div> </div>
) )
} }
@ -177,7 +175,7 @@ class TagValueListItem extends PureComponent<Props, State> {
return ( return (
!isOpen && !isOpen &&
(loading === RemoteDataState.NotStarted || (loading === RemoteDataState.NotStarted ||
loading !== RemoteDataState.Error) loading === RemoteDataState.Error)
) )
} }
} }

6
ui/src/style/components/time-machine/flux-explorer.scss
View File

@ -22,11 +22,15 @@ $flux-tree-gutter: 11px;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
padding-left: 0; padding-left: 0;
> .flux-schema-tree { > .flux-schema--children > .flux-schema-tree {
padding-left: $flux-tree-indent; padding-left: $flux-tree-indent;
} }
} }
.flux-schema--children.hidden {
display: none;
}
.flux-schema-tree__empty { .flux-schema-tree__empty {
height: $flux-tree-indent; height: $flux-tree-indent;
display: flex; display: flex;