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 {isOpen, searchTerm} = this.state
if (isOpen) {
return (
<div className="flux-schema--children">
<div className="flux-schema--filter">
<input
className="form-control input-xs"
placeholder={`Filter within ${db}`}
type="text"
spellCheck={false}
autoComplete="off"
value={searchTerm}
onClick={this.handleInputClick}
onChange={this.onSearch}
/>
</div>
<TagList db={db} service={service} tags={this.tags} filter={[]} />
return (
<div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
<div className="flux-schema--filter">
<input
className="form-control input-xs"
placeholder={`Filter within ${db}`}
type="text"
spellCheck={false}
autoComplete="off"
value={searchTerm}
onClick={this.handleInputClick}
onChange={this.onSearch}
/>
</div>
)
}
<TagList db={db} service={service} tags={this.tags} filter={[]} />
</div>
)
}
private handleClickCopy = e => {

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

@ -12,17 +12,7 @@ interface Props {
filter: SchemaFilter[]
}
interface State {
isOpen: boolean
}
export default class TagList extends PureComponent<Props, State> {
constructor(props) {
super(props)
this.state = {isOpen: false}
}
export default class TagList extends PureComponent<Props> {
public render() {
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() {
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 (
<div className={this.className}>
@ -83,44 +90,37 @@ export default class TagListItem extends PureComponent<Props, State> {
</div>
</CopyToClipboard>
</div>
{this.state.isOpen && (
<div className="flux-schema--children">
<div
className="flux-schema--header"
onClick={this.handleInputClick}
>
<div className="flux-schema--filter">
<input
className="form-control input-xs"
placeholder={`Filter within ${tagKey}`}
type="text"
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}
<div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
<div className="flux-schema--header" onClick={this.handleInputClick}>
<div className="flux-schema--filter">
<input
className="form-control input-xs"
placeholder={`Filter within ${tagKey}`}
type="text"
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}
/>
)}
</div>
</div>
)
}
@ -313,7 +313,7 @@ export default class TagListItem extends PureComponent<Props, State> {
return (
!isOpen &&
(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() {
const {db, service, value} = this.props
const {searchTerm} = this.state
const {searchTerm, isOpen} = this.state
return (
<div className={this.className} onClick={this.handleClick}>
@ -65,35 +65,33 @@ class TagValueListItem extends PureComponent<Props, State> {
</div>
</CopyToClipboard>
</div>
{this.state.isOpen && (
<div className="flux-schema--children">
{this.isLoading && <LoaderSkeleton />}
{!this.isLoading && (
<>
{!!this.tags.length && (
<div className="flux-schema--filter">
<input
className="form-control input-xs"
placeholder={`Filter within ${value}`}
type="text"
spellCheck={false}
autoComplete="off"
value={searchTerm}
onClick={this.handleInputClick}
onChange={this.onSearch}
/>
</div>
)}
<TagList
db={db}
service={service}
tags={this.tags}
filter={this.filter}
/>
</>
)}
</div>
)}
<div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
{this.isLoading && <LoaderSkeleton />}
{!this.isLoading && (
<>
{!!this.tags.length && (
<div className="flux-schema--filter">
<input
className="form-control input-xs"
placeholder={`Filter within ${value}`}
type="text"
spellCheck={false}
autoComplete="off"
value={searchTerm}
onClick={this.handleInputClick}
onChange={this.onSearch}
/>
</div>
)}
<TagList
db={db}
service={service}
tags={this.tags}
filter={this.filter}
/>
</>
)}
</div>
</div>
)
}
@ -177,7 +175,7 @@ class TagValueListItem extends PureComponent<Props, State> {
return (
!isOpen &&
(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 {
height: $flux-tree-indent;
display: flex;