Skip to content

Commit b76fad6

Browse files
drdelambredrdelambre
authored
feat: clear script button (#5181)
1 parent 2e01607 commit b76fad6

File tree

6 files changed

+196
-65
lines changed

6 files changed

+196
-65
lines changed

‎src/dataExplorer/components/DataExplorerPage.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,13 @@ const DataExplorerPage: FC = () => {
8181
/>
8282
</Switch>
8383
<GetResources resources={[ResourceType.Variables]}>
84-
<Page.Header fullWidth={true} testID="data-explorer--header">
84+
<Page.Header
85+
fullWidth={true}
86+
className={`${
87+
fluxQueryBuilder ? 'flux-query-builder' : 'data-explorer'
88+
}--header`}
89+
testID="data-explorer--header"
90+
>
8591
<Page.Title title="Data Explorer" />
8692
<FlexBox margin={ComponentSize.Large}>
8793
<FeatureFlag name="newDataExplorer">

‎src/dataExplorer/components/FluxQueryBuilder.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '@influxdata/clockface/dist/variables.scss';
2+
13
.new-data-explorer-rightside {
24
.cf-draggable-resizer--handle > .cf-draggable-resizer--handle-pill1,
35
.cf-draggable-resizer--handle > .cf-draggable-resizer--handle-pill2,
@@ -13,3 +15,14 @@
1315
width: calc(25% - 60px);
1416
}
1517
}
18+
19+
.flux-query-builder--header {
20+
margin-bottom: 0;
21+
}
22+
23+
.flux-query-builder--menu {
24+
padding: $cf-space-2xs 0;
25+
margin-bottom: $cf-space-s;
26+
border-top: 1px solid $cf-grey-15;
27+
border-bottom: 1px solid $cf-grey-15;
28+
}

‎src/dataExplorer/components/FluxQueryBuilder.tsx‎

Lines changed: 64 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,81 @@
1-
import React, {FC} from 'react'
1+
import React, {FC, useContext, useCallback} from 'react'
2+
import {RemoteDataState} from 'src/types'
23

34
// Components
4-
import {DraggableResizer, Orientation} from '@influxdata/clockface'
5-
import {QueryProvider} from 'src/shared/contexts/query'
5+
import {
6+
DraggableResizer,
7+
Orientation,
8+
Button,
9+
IconFont,
10+
} from '@influxdata/clockface'
11+
import {QueryProvider, QueryContext} from 'src/shared/contexts/query'
612
import {EditorProvider} from 'src/shared/contexts/editor'
7-
import {ResultsProvider} from 'src/dataExplorer/components/ResultsContext'
13+
import {
14+
ResultsProvider,
15+
ResultsContext,
16+
} from 'src/dataExplorer/components/ResultsContext'
817
import {SidebarProvider} from 'src/dataExplorer/context/sidebar'
18+
import {
19+
PersistanceProvider,
20+
PersistanceContext,
21+
} from 'src/dataExplorer/context/persistance'
922
import ResultsPane from 'src/dataExplorer/components/ResultsPane'
1023
import Sidebar from 'src/dataExplorer/components/Sidebar'
1124
import Schema from 'src/dataExplorer/components/Schema'
12-
import {useSessionStorage} from 'src/dataExplorer/shared/utils'
1325

1426
// Styles
1527
import './FluxQueryBuilder.scss'
1628

1729
const FluxQueryBuilder: FC = () => {
18-
const [
19-
vertDragPosition,
20-
setVertDragPosition,
21-
] = useSessionStorage('dataExplorer.resize.vertical', [0.25, 0.8])
30+
const {vertical, setVertical, setQuery, setSelection} = useContext(
31+
PersistanceContext
32+
)
33+
const {cancel} = useContext(QueryContext)
34+
const {setStatus, setResult} = useContext(ResultsContext)
35+
36+
const clear = useCallback(() => {
37+
cancel()
38+
setStatus(RemoteDataState.NotStarted)
39+
setResult(null)
40+
setQuery('')
41+
setSelection({bucket: null, measurement: ''})
42+
}, [setQuery, setStatus, setResult, setSelection, cancel])
2243

2344
return (
24-
<QueryProvider>
25-
<ResultsProvider>
26-
<EditorProvider>
27-
<SidebarProvider>
28-
<DraggableResizer
29-
handleOrientation={Orientation.Vertical}
30-
handlePositions={vertDragPosition}
31-
onChangePositions={setVertDragPosition}
32-
>
33-
<DraggableResizer.Panel>
34-
<Schema />
35-
</DraggableResizer.Panel>
36-
<DraggableResizer.Panel
37-
testID="flux-query-builder-middle-panel"
38-
className="new-data-explorer-rightside"
39-
>
40-
<ResultsPane />
41-
</DraggableResizer.Panel>
42-
<DraggableResizer.Panel>
43-
<Sidebar />
44-
</DraggableResizer.Panel>
45-
</DraggableResizer>
46-
</SidebarProvider>
47-
</EditorProvider>
48-
</ResultsProvider>
49-
</QueryProvider>
45+
<EditorProvider>
46+
<SidebarProvider>
47+
<div className="flux-query-builder--menu">
48+
<Button onClick={clear} text="New Script" icon={IconFont.Plus} />
49+
</div>
50+
<DraggableResizer
51+
handleOrientation={Orientation.Vertical}
52+
handlePositions={vertical}
53+
onChangePositions={setVertical}
54+
>
55+
<DraggableResizer.Panel>
56+
<Schema />
57+
</DraggableResizer.Panel>
58+
<DraggableResizer.Panel
59+
testID="flux-query-builder-middle-panel"
60+
className="new-data-explorer-rightside"
61+
>
62+
<ResultsPane />
63+
</DraggableResizer.Panel>
64+
<DraggableResizer.Panel>
65+
<Sidebar />
66+
</DraggableResizer.Panel>
67+
</DraggableResizer>
68+
</SidebarProvider>
69+
</EditorProvider>
5070
)
5171
}
5272

53-
export default FluxQueryBuilder
73+
export default () => (
74+
<QueryProvider>
75+
<ResultsProvider>
76+
<PersistanceProvider>
77+
<FluxQueryBuilder />
78+
</PersistanceProvider>
79+
</ResultsProvider>
80+
</QueryProvider>
81+
)

‎src/dataExplorer/components/ResultsPane.tsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
// Contexts
2121
import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
2222
import {QueryContext} from 'src/shared/contexts/query'
23+
import {PersistanceContext} from 'src/dataExplorer/context/persistance'
2324

2425
// Components
2526
import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
@@ -39,8 +40,6 @@ import {getWindowPeriodVariableFromVariables} from 'src/variables/utils/getWindo
3940

4041
// Constants
4142
import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
42-
import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
43-
import {useSessionStorage} from '../shared/utils'
4443

4544
const FluxMonacoEditor = lazy(() =>
4645
import('src/shared/components/FluxMonacoEditor')
@@ -49,7 +48,7 @@ const FluxMonacoEditor = lazy(() =>
4948
const fakeNotify = notify
5049

5150
const rangeToParam = (timeRange: TimeRange) => {
52-
let timeRangeStart, timeRangeStop
51+
let timeRangeStart: string, timeRangeStop: string
5352

5453
if (!timeRange) {
5554
timeRangeStart = timeRangeStop = null
@@ -82,21 +81,19 @@ const rangeToParam = (timeRange: TimeRange) => {
8281
const ResultsPane: FC = () => {
8382
const {basic, query, cancel} = useContext(QueryContext)
8483
const {status, result, setStatus, setResult} = useContext(ResultsContext)
85-
86-
const [
87-
horizDragPosition,
88-
setHorizDragPosition,
89-
] = useSessionStorage('dataExplorer.resize.horizontal', [0.2])
90-
const [text, setText] = useSessionStorage('dataExplorer.query', '')
91-
const [timeRange, setTimeRange] = useSessionStorage(
92-
'dataExplorer.range',
93-
DEFAULT_TIME_RANGE
94-
)
84+
const {
85+
horizontal,
86+
setHorizontal,
87+
query: text,
88+
setQuery,
89+
range,
90+
setRange,
91+
} = useContext(PersistanceContext)
9592

9693
const download = () => {
9794
event('CSV Download Initiated')
9895
basic(text, {
99-
vars: rangeToParam(timeRange),
96+
vars: rangeToParam(range),
10097
}).promise.then(response => {
10198
if (response.type !== 'SUCCESS') {
10299
return
@@ -109,7 +106,7 @@ const ResultsPane: FC = () => {
109106
const submit = () => {
110107
setStatus(RemoteDataState.Loading)
111108
query(text, {
112-
vars: rangeToParam(timeRange),
109+
vars: rangeToParam(range),
113110
})
114111
.then(r => {
115112
event('resultReceived', {
@@ -130,8 +127,8 @@ const ResultsPane: FC = () => {
130127
}
131128

132129
const timeVars = [
133-
getRangeVariable(TIME_RANGE_START, timeRange),
134-
getRangeVariable(TIME_RANGE_STOP, timeRange),
130+
getRangeVariable(TIME_RANGE_START, range),
131+
getRangeVariable(TIME_RANGE_STOP, range),
135132
]
136133

137134
const variables = timeVars.concat(
@@ -141,8 +138,8 @@ const ResultsPane: FC = () => {
141138
return (
142139
<DraggableResizer
143140
handleOrientation={Orientation.Horizontal}
144-
handlePositions={horizDragPosition}
145-
onChangePositions={setHorizDragPosition}
141+
handlePositions={horizontal}
142+
onChangePositions={setHorizontal}
146143
>
147144
<DraggableResizer.Panel>
148145
<FlexBox
@@ -164,7 +161,7 @@ const ResultsPane: FC = () => {
164161
<FluxMonacoEditor
165162
variables={variables}
166163
script={text}
167-
onChangeScript={setText}
164+
onChangeScript={setQuery}
168165
/>
169166
</Suspense>
170167
</div>
@@ -193,8 +190,8 @@ const ResultsPane: FC = () => {
193190
}
194191
/>
195192
<TimeRangeDropdown
196-
timeRange={timeRange}
197-
onSetTimeRange={(range: TimeRange) => setTimeRange(range)}
193+
timeRange={range}
194+
onSetTimeRange={(range: TimeRange) => setRange(range)}
198195
/>
199196
<SubmitQueryButton
200197
className="submit-btn"

‎src/dataExplorer/context/fluxQueryBuilder.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import React, {
1010
// Context
1111
import {MeasurementsContext} from 'src/dataExplorer/context/measurements'
1212
import {FieldsContext} from 'src/dataExplorer/context/fields'
13+
import {PersistanceContext} from 'src/dataExplorer/context/persistance'
1314
import {TagsContext} from 'src/dataExplorer/context/tags'
1415
import {EditorContext} from 'src/shared/contexts/editor'
1516

@@ -23,10 +24,9 @@ import {
2324
ExecuteCommandInjectTagValue,
2425
ExecuteCommandInjectField,
2526
} from 'src/languageSupport/languages/flux/lsp/utils'
26-
import {useSessionStorage} from 'src/dataExplorer/shared/utils'
2727

2828
const DEBOUNCE_TIMEOUT = 500
29-
let timer
29+
let timer: ReturnType<typeof setTimeout>
3030
type NOOP = () => void
3131
const debouncer = (action: NOOP): void => {
3232
clearTimeout(timer)
@@ -72,10 +72,7 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
7272
const {injectViaLsp} = useContext(EditorContext)
7373

7474
// States
75-
const [selection, setSelection] = useSessionStorage('dataExplorer.schema', {
76-
bucket: null,
77-
measurement: null,
78-
})
75+
const {selection, setSelection} = useContext(PersistanceContext)
7976
const [searchTerm, setSearchTerm] = useState('')
8077

8178
const handleSelectBucket = (bucket: Bucket): void => {

‎src/dataExplorer/context/persistance.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, {FC, createContext} from 'react'
2+
import {TimeRange} from 'src/types'
3+
import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
4+
import {useSessionStorage} from 'src/dataExplorer/shared/utils'
5+
import {Bucket} from 'src/types'
6+
7+
interface MeasurementSelection {
8+
bucket: Bucket
9+
measurement: string
10+
}
11+
12+
interface ContextType {
13+
horizontal: number[]
14+
vertical: number[]
15+
range: TimeRange
16+
query: string
17+
selection: MeasurementSelection
18+
19+
setHorizontal: (val: number[]) => void
20+
setVertical: (val: number[]) => void
21+
setRange: (val: TimeRange) => void
22+
setQuery: (val: string) => void
23+
setSelection: (val: MeasurementSelection) => void
24+
}
25+
26+
const DEFAULT_CONTEXT = {
27+
horizontal: [0.2],
28+
vertical: [0.25, 0.8],
29+
range: DEFAULT_TIME_RANGE,
30+
query: '',
31+
selection: {
32+
bucket: null,
33+
measurement: '',
34+
},
35+
36+
setHorizontal: (_: number[]) => {},
37+
setVertical: (_: number[]) => {},
38+
setRange: (_: TimeRange) => {},
39+
setQuery: (_: string) => {},
40+
setSelection: (_: MeasurementSelection) => {},
41+
}
42+
43+
export const PersistanceContext = createContext<ContextType>(DEFAULT_CONTEXT)
44+
45+
export const PersistanceProvider: FC = ({children}) => {
46+
const [
47+
horizontal,
48+
setHorizontal,
49+
] = useSessionStorage('dataExplorer.resize.horizontal', [
50+
...DEFAULT_CONTEXT.horizontal,
51+
])
52+
const [
53+
vertical,
54+
setVertical,
55+
] = useSessionStorage('dataExplorer.resize.vertical', [
56+
...DEFAULT_CONTEXT.vertical,
57+
])
58+
const [query, setQuery] = useSessionStorage(
59+
'dataExplorer.query',
60+
DEFAULT_CONTEXT.query
61+
)
62+
const [range, setRange] = useSessionStorage(
63+
'dataExplorer.range',
64+
DEFAULT_CONTEXT.range
65+
)
66+
const [selection, setSelection] = useSessionStorage(
67+
'dataExplorer.schema',
68+
JSON.parse(JSON.stringify(DEFAULT_CONTEXT.selection))
69+
)
70+
71+
return (
72+
<PersistanceContext.Provider
73+
value={{
74+
horizontal,
75+
vertical,
76+
range,
77+
query,
78+
selection,
79+
80+
setHorizontal,
81+
setVertical,
82+
setRange,
83+
setQuery,
84+
setSelection,
85+
}}
86+
>
87+
{children}
88+
</PersistanceContext.Provider>
89+
)
90+
}

0 commit comments

Comments
 (0)