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

Preserve open state of schema tree children

pull/10616/head
Christopher Henn 2018-06-08 13:59:06 -07:00
parent 7740e3375b
commit e657b052c2
5 changed files with 88 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
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--children"> <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>
<TagList db={db} service={service} tags={this.tags} filter={[]} />
</div> </div>
) <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

76
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,44 +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--children"> <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"
value={searchTerm}
onChange={this.onSearch}
/>
{this.isSearching && (
<LoadingSpinner style={this.spinnerStyle} />
)}
</div>
{this.count}
</div>
{this.isLoading && <LoaderSkeleton />}
{!this.isLoading && (
<TagValueList
db={db}
service={service}
values={tagValues}
tagKey={tagKey}
filter={filter}
onLoadMoreValues={this.handleLoadMoreValues}
isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
shouldShowMoreValues={limit < count}
loadMoreCount={this.loadMoreCount}
/> />
)} {this.isSearching && <LoadingSpinner style={this.spinnerStyle} />}
</div>
{this.count}
</div> </div>
)} {this.isLoading && <LoaderSkeleton />}
{!this.isLoading && (
<TagValueList
db={db}
service={service}
values={tagValues}
tagKey={tagKey}
filter={filter}
onLoadMoreValues={this.handleLoadMoreValues}
isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
shouldShowMoreValues={limit < count}
loadMoreCount={this.loadMoreCount}
/>
)}
</div>
</div> </div>
) )
} }
@ -313,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'}`}>
<div className="flux-schema--children"> {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> </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)
) )
} }
} }

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

@ -27,6 +27,10 @@ $flux-tree-gutter: 11px;
} }
} }
.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;