Skip to content

Commit 772bc4d

Browse files
drdelambredrdelambre
authored
feat: turn on queries for new DE (#4576)
1 parent 36624a4 commit 772bc4d

File tree

4 files changed

+269
-133
lines changed

4 files changed

+269
-133
lines changed

‎src/dataExplorer/components/NewDataExplorer.tsx‎

Lines changed: 21 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,35 @@
1-
import React, {FC, lazy, Suspense, useState, useContext} from 'react'
2-
import {
3-
DraggableResizer,
4-
Orientation,
5-
RemoteDataState,
6-
SpinnerContainer,
7-
TechnoSpinner,
8-
Button,
9-
IconFont,
10-
ComponentStatus,
11-
ComponentSize,
12-
FlexBox,
13-
FlexDirection,
14-
JustifyContent,
15-
} from '@influxdata/clockface'
16-
import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
17-
import Results from 'src/dataExplorer/components/Results'
18-
import {TimeRange} from 'src/types'
19-
import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
20-
import {downloadTextFile} from 'src/shared/utils/download'
21-
import {event} from 'src/cloud/utils/reporting'
22-
import {QueryContext} from 'src/shared/contexts/query'
23-
import {notify} from 'src/shared/actions/notifications'
1+
import React, {FC, useState} from 'react'
2+
import {DraggableResizer, Orientation} from '@influxdata/clockface'
3+
import {QueryProvider} from 'src/shared/contexts/query'
4+
import {ResultsProvider} from 'src/dataExplorer/components/ResultsContext'
5+
import ResultsPane from 'src/dataExplorer/components/ResultsPane'
246

25-
import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
267
import './NewDataExplorer.scss'
278

28-
const FluxMonacoEditor = lazy(() =>
29-
import('src/shared/components/FluxMonacoEditor')
30-
)
31-
329
const INITIAL_VERT_RESIZER_HANDLE = 0.2
33-
const INITIAL_HORIZ_RESIZER_HANDLE = 0.2
34-
const fakeNotify = notify
3510

3611
const NewDataExplorer: FC = () => {
3712
const [vertDragPosition, setVertDragPosition] = useState([
3813
INITIAL_VERT_RESIZER_HANDLE,
3914
])
40-
const [horizDragPosition, setHorizDragPosition] = useState([
41-
INITIAL_HORIZ_RESIZER_HANDLE,
42-
])
43-
const {basic} = useContext(QueryContext)
44-
45-
const [text, setText] = useState('')
46-
const [timeRange, setTimeRange] = useState<TimeRange>(DEFAULT_TIME_RANGE)
47-
48-
const download = () => {
49-
event('CSV Download Initiated')
50-
basic(text).promise.then(response => {
51-
if (response.type !== 'SUCCESS') {
52-
return
53-
}
54-
55-
downloadTextFile(response.csv, 'influx.data', '.csv', 'text/csv')
56-
})
57-
}
58-
59-
const submit = () => {}
6015

6116
return (
62-
<DraggableResizer
63-
handleOrientation={Orientation.Vertical}
64-
handlePositions={vertDragPosition}
65-
onChangePositions={setVertDragPosition}
66-
>
67-
<DraggableResizer.Panel>
68-
<h1>[ schema ]</h1>
69-
</DraggableResizer.Panel>
70-
<DraggableResizer.Panel className="new-data-explorer-rightside">
71-
<DraggableResizer
72-
handleOrientation={Orientation.Horizontal}
73-
handlePositions={horizDragPosition}
74-
onChangePositions={setHorizDragPosition}
75-
>
76-
<DraggableResizer.Panel>
77-
<FlexBox
78-
direction={FlexDirection.Column}
79-
justifyContent={JustifyContent.FlexEnd}
80-
margin={ComponentSize.Small}
81-
style={{height: '100%'}}
82-
>
83-
<div
84-
style={{height: '100%', width: '100%', position: 'relative'}}
85-
>
86-
<Suspense
87-
fallback={
88-
<SpinnerContainer
89-
loading={RemoteDataState.Loading}
90-
spinnerComponent={<TechnoSpinner />}
91-
/>
92-
}
93-
>
94-
<FluxMonacoEditor script={text} onChangeScript={setText} />
95-
</Suspense>
96-
</div>
97-
<div style={{width: '100%'}}>
98-
<FlexBox
99-
direction={FlexDirection.Row}
100-
justifyContent={JustifyContent.FlexEnd}
101-
margin={ComponentSize.Small}
102-
>
103-
<Button
104-
titleText="Download query results as a .CSV file"
105-
text="CSV"
106-
icon={IconFont.Download_New}
107-
onClick={download}
108-
status={
109-
text ? ComponentStatus.Default : ComponentStatus.Disabled
110-
}
111-
/>
112-
<TimeRangeDropdown
113-
timeRange={timeRange}
114-
onSetTimeRange={(range: TimeRange) => setTimeRange(range)}
115-
/>
116-
<SubmitQueryButton
117-
className="submit-btn"
118-
text="Run"
119-
icon={IconFont.Play}
120-
submitButtonDisabled={!text}
121-
queryStatus={RemoteDataState.NotStarted}
122-
onSubmit={submit}
123-
onNotify={fakeNotify}
124-
queryID=""
125-
cancelAllRunningQueries={() => {}}
126-
/>
127-
</FlexBox>
128-
</div>
129-
</FlexBox>
130-
</DraggableResizer.Panel>
131-
<DraggableResizer.Panel>
132-
<Results />
133-
</DraggableResizer.Panel>
134-
</DraggableResizer>
135-
</DraggableResizer.Panel>
136-
</DraggableResizer>
17+
<QueryProvider>
18+
<DraggableResizer
19+
handleOrientation={Orientation.Vertical}
20+
handlePositions={vertDragPosition}
21+
onChangePositions={setVertDragPosition}
22+
>
23+
<DraggableResizer.Panel>
24+
<h1>[ schema ]</h1>
25+
</DraggableResizer.Panel>
26+
<DraggableResizer.Panel className="new-data-explorer-rightside">
27+
<ResultsProvider>
28+
<ResultsPane />
29+
</ResultsProvider>
30+
</DraggableResizer.Panel>
31+
</DraggableResizer>
32+
</QueryProvider>
13733
)
13834
}
13935

‎src/dataExplorer/components/Results.tsx‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import React, {FC, useState} from 'react'
1+
import React, {FC, useState, useContext} from 'react'
22
import {FlexBox, FlexDirection, ComponentStatus} from '@influxdata/clockface'
33

4+
import {RemoteDataState, SimpleTableViewProperties} from 'src/types'
5+
import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
6+
47
import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
58
import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
9+
import {View} from 'src/visualization'
610

711
import './Results.scss'
812

913
// simplified version migrated from src/flows/pipes/Table/view.tsx
1014
const QueryStat: FC = () => {
11-
const results: Record<string, any> = {}
12-
const processTime = 0
15+
const {result, time} = useContext(ResultsContext)
1316

14-
const tableColumn = results?.parsed?.table?.getColumn('table') || []
17+
const tableColumn = result?.parsed?.table?.getColumn('table') || []
1518
const lastTableValue = tableColumn[tableColumn.length - 1] || -1
1619

1720
let tableNum = 0
@@ -28,9 +31,9 @@ const QueryStat: FC = () => {
2831
return (
2932
<div className="query-stat">
3033
<span className="query-stat--bold">{`${tableNum} tables`}</span>
31-
<span className="query-stat--bold">{`${results?.parsed?.table?.length ||
34+
<span className="query-stat--bold">{`${result?.parsed?.table?.length ||
3235
0} rows`}</span>
33-
<span className="query-stat--normal">{`${processTime} ms`}</span>
36+
<span className="query-stat--normal">{`${time} ms`}</span>
3437
</div>
3538
)
3639
}
@@ -48,6 +51,26 @@ const EmptyResults: FC = () => {
4851

4952
const Results: FC = () => {
5053
const [search, setSearch] = useState('')
54+
const {result, status} = useContext(ResultsContext)
55+
56+
let resultView
57+
58+
if (status === RemoteDataState.NotStarted) {
59+
resultView = <EmptyResults />
60+
} else {
61+
resultView = (
62+
<View
63+
loading={status}
64+
properties={
65+
{
66+
type: 'simple-table',
67+
showAll: false,
68+
} as SimpleTableViewProperties
69+
}
70+
result={result.parsed}
71+
/>
72+
)
73+
}
5174

5275
return (
5376
<div className="data-explorer-results">
@@ -59,7 +82,11 @@ const Results: FC = () => {
5982
placeholderText="Search results..."
6083
onSearch={setSearch}
6184
searchTerm={search}
62-
status={ComponentStatus.Disabled}
85+
status={
86+
status === RemoteDataState.Done
87+
? ComponentStatus.Default
88+
: ComponentStatus.Disabled
89+
}
6390
/>
6491
</div>
6592
<QueryStat />
@@ -68,7 +95,7 @@ const Results: FC = () => {
6895
</div>
6996
</FlexBox>
7097
</div>
71-
<EmptyResults />
98+
{resultView}
7299
</FlexBox>
73100
</div>
74101
)

‎src/dataExplorer/components/ResultsContext.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, {FC, createContext, useState} from 'react'
2+
import {FluxResult} from 'src/types/flows'
3+
import {RemoteDataState} from 'src/types'
4+
5+
interface ResultsContextType {
6+
status: RemoteDataState
7+
result: FluxResult
8+
time: number
9+
10+
setStatus: (status: RemoteDataState) => void
11+
setResult: (result: FluxResult) => void
12+
setTime: (time: number) => void
13+
}
14+
15+
export const ResultsContext = createContext<ResultsContextType>({
16+
status: RemoteDataState.NotStarted,
17+
result: {} as FluxResult,
18+
time: 0,
19+
20+
setStatus: _ => {},
21+
setResult: _ => {},
22+
setTime: _ => {},
23+
})
24+
25+
export const ResultsProvider: FC = ({children}) => {
26+
const [result, setResult] = useState<FluxResult>({} as FluxResult)
27+
const [time, setTime] = useState<number>(0)
28+
const [status, setStatus] = useState<RemoteDataState>(
29+
RemoteDataState.NotStarted
30+
)
31+
return (
32+
<ResultsContext.Provider
33+
value={{
34+
status,
35+
result,
36+
time,
37+
38+
setStatus,
39+
setResult,
40+
setTime,
41+
}}
42+
>
43+
{children}
44+
</ResultsContext.Provider>
45+
)
46+
}

0 commit comments

Comments
 (0)