Skip to content

Commit 6939d25

Browse files
author
Gene Hynson
authored
feat(sub): toggle between static and dynamic measurement (#5054)
1 parent de0262c commit 6939d25

File tree

5 files changed

+242
-80
lines changed

5 files changed

+242
-80
lines changed

‎src/writeData/subscriptions/components/JsonParsingForm.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,6 @@
4444
}
4545
}
4646
}
47+
.static-toggle {
48+
padding-bottom: $cf-space-m;
49+
}

‎src/writeData/subscriptions/components/JsonParsingForm.tsx‎

Lines changed: 97 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
FlexDirection,
1717
FlexBox,
1818
ComponentStatus,
19+
SlideToggle,
20+
InputLabel,
1921
} from '@influxdata/clockface'
2022
import JsonPathInput from 'src/writeData/subscriptions/components/JsonPathInput'
2123

@@ -46,6 +48,9 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
4648
const numberType = 'Number'
4749
const dataTypeList = [stringType, numberType]
4850
const [dataTypeM, setDataTypeM] = useState(stringType)
51+
const [useStaticMeasurement, setUseStaticMeasurement] = useState(
52+
!!formContent.jsonMeasurementKey.name
53+
)
4954
const ruleList = ['field', 'tag']
5055
const [rule, setRule] = useState('')
5156
const defaultJsonFieldTag = {
@@ -173,45 +178,105 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
173178
</Heading>
174179
</FlexBox>
175180
<FlexBox
176-
alignItems={AlignItems.FlexStart}
177181
direction={FlexDirection.Row}
178-
margin={ComponentSize.Large}
179-
className="json-parsing-form__container"
182+
alignItems={AlignItems.Center}
183+
margin={ComponentSize.Medium}
184+
className="static-toggle"
180185
>
181-
<ValidationInputWithTooltip
182-
label="JSON Path"
183-
value={formContent.jsonMeasurementKey.path}
184-
required={true}
185-
validationFunc={() => {
186-
const path = formContent.jsonMeasurementKey.path
187-
return (
188-
handleValidation('Measurement Path', path) ??
189-
handleJsonPathValidation(path)
190-
)
191-
}}
192-
placeholder="eg. $.myJSON.myObject[0].myKey"
193-
name="jsonpath"
194-
onChange={e => {
186+
<InputLabel>JSON Path</InputLabel>
187+
<SlideToggle
188+
active={useStaticMeasurement}
189+
onChange={() => {
190+
setUseStaticMeasurement(!useStaticMeasurement)
195191
updateForm({
196192
...formContent,
197193
jsonMeasurementKey: {
198194
...formContent.jsonMeasurementKey,
199-
path: e.target.value,
195+
name: '',
196+
path: '',
200197
},
201198
})
202199
}}
203-
onBlur={() =>
204-
event(
205-
'completed form field',
206-
{formField: 'jsonMeasurementKey.path'},
207-
{feature: 'subscriptions'}
208-
)
209-
}
210-
edit={edit}
211-
testID="measurement-json-parsing-path"
212-
tooltip={JSON_TOOLTIP}
213-
width="75%"
200+
disabled={!edit}
214201
/>
202+
<InputLabel>Name</InputLabel>
203+
</FlexBox>
204+
<FlexBox
205+
alignItems={AlignItems.FlexStart}
206+
direction={FlexDirection.Row}
207+
margin={ComponentSize.Large}
208+
className="json-parsing-form__container"
209+
>
210+
{useStaticMeasurement ? (
211+
<ValidationInputWithTooltip
212+
label="Name"
213+
value={formContent.jsonMeasurementKey.name}
214+
required={true}
215+
validationFunc={() => {
216+
return handleValidation(
217+
'Measurement Name',
218+
formContent.jsonMeasurementKey.name
219+
)
220+
}}
221+
placeholder="nonDescriptName"
222+
name="name"
223+
onChange={e => {
224+
updateForm({
225+
...formContent,
226+
jsonMeasurementKey: {
227+
...formContent.jsonMeasurementKey,
228+
name: e.target.value,
229+
},
230+
})
231+
}}
232+
onBlur={() =>
233+
event(
234+
'completed form field',
235+
{formField: 'jsonMeasurementKey.name'},
236+
{feature: 'subscriptions'}
237+
)
238+
}
239+
edit={edit}
240+
testID="measurement-json-parsing-name"
241+
tooltip="Provide a static measurement for your messages."
242+
width="75%"
243+
/>
244+
) : (
245+
<ValidationInputWithTooltip
246+
label="JSON Path"
247+
value={formContent.jsonMeasurementKey.path}
248+
required={true}
249+
validationFunc={() => {
250+
const path = formContent.jsonMeasurementKey.path
251+
return (
252+
handleValidation('Measurement Path', path) ??
253+
handleJsonPathValidation(path)
254+
)
255+
}}
256+
placeholder="eg. $.myJSON.myObject[0].myKey"
257+
name="jsonpath"
258+
onChange={e => {
259+
updateForm({
260+
...formContent,
261+
jsonMeasurementKey: {
262+
...formContent.jsonMeasurementKey,
263+
path: e.target.value,
264+
},
265+
})
266+
}}
267+
onBlur={() =>
268+
event(
269+
'completed form field',
270+
{formField: 'jsonMeasurementKey.path'},
271+
{feature: 'subscriptions'}
272+
)
273+
}
274+
edit={edit}
275+
testID="measurement-json-parsing-path"
276+
tooltip={JSON_TOOLTIP}
277+
width="75%"
278+
/>
279+
)}
215280
<div className="json-parsing-form__container__dropdown">
216281
<Form.Label label="Data Type" />
217282
<Dropdown
@@ -221,7 +286,9 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
221286
onClick={onClick}
222287
testID="measurement-json-parsing-type"
223288
status={
224-
edit ? ComponentStatus.Default : ComponentStatus.Disabled
289+
edit && !useStaticMeasurement
290+
? ComponentStatus.Default
291+
: ComponentStatus.Disabled
225292
}
226293
>
227294
{sanitizeType(formContent.jsonMeasurementKey.type) ??

‎src/writeData/subscriptions/components/StringParsingForm.tsx‎

Lines changed: 103 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
ComponentSize,
1616
FlexDirection,
1717
FlexBox,
18+
InputLabel,
19+
SlideToggle,
1820
} from '@influxdata/clockface'
1921
import StringPatternInput from 'src/writeData/subscriptions/components/StringPatternInput'
2022

@@ -43,6 +45,9 @@ interface Props {
4345
const StringParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
4446
const ruleList = ['field', 'tag']
4547
const [rule, setRule] = useState('')
48+
const [useStaticMeasurement, setUseStaticMeasurement] = useState(
49+
!!formContent.stringMeasurement.name
50+
)
4651
const defaultStringFieldTag = {
4752
name: '',
4853
pattern: '',
@@ -169,42 +174,104 @@ const StringParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
169174
Measurement
170175
</Heading>
171176
</FlexBox>
172-
<ValidationInputWithTooltip
173-
label="Regex Pattern to find Measurement"
174-
value={formContent.stringMeasurement.pattern}
175-
required={true}
176-
validationFunc={() => {
177-
const pattern = formContent.stringMeasurement.pattern
178-
return (
179-
handleValidation('Pattern', pattern) ??
180-
handleRegexValidation(pattern)
181-
)
182-
}}
183-
placeholder="eg. a=(\d)"
184-
name="regex"
185-
onChange={e => {
186-
updateForm({
187-
...formContent,
188-
stringMeasurement: {
189-
...formContent.stringMeasurement,
190-
pattern: e.target.value,
191-
},
192-
})
193-
}}
194-
onBlur={() =>
195-
event(
196-
'completed form field',
197-
{
198-
formField: 'stringMeasurement.pattern',
199-
},
200-
{feature: 'subscriptions'}
201-
)
202-
}
203-
edit={edit}
204-
maxLength={255}
205-
testID="measurment-string-parsing-pattern"
206-
tooltip={REGEX_TOOLTIP}
207-
/>
177+
<FlexBox
178+
direction={FlexDirection.Row}
179+
alignItems={AlignItems.Center}
180+
margin={ComponentSize.Medium}
181+
className="static-toggle"
182+
>
183+
<InputLabel>Regex</InputLabel>
184+
<SlideToggle
185+
active={useStaticMeasurement}
186+
onChange={() => {
187+
setUseStaticMeasurement(!useStaticMeasurement)
188+
updateForm({
189+
...formContent,
190+
stringMeasurement: {
191+
...formContent.stringMeasurement,
192+
name: '',
193+
pattern: '',
194+
},
195+
})
196+
}}
197+
disabled={!edit}
198+
/>
199+
<InputLabel>Name</InputLabel>
200+
</FlexBox>
201+
{useStaticMeasurement ? (
202+
<ValidationInputWithTooltip
203+
label="Name"
204+
value={formContent.stringMeasurement.name}
205+
required={true}
206+
validationFunc={() => {
207+
return handleValidation(
208+
'Measurement Name',
209+
formContent.stringMeasurement.name
210+
)
211+
}}
212+
placeholder="nonDescriptName"
213+
name="name"
214+
onChange={e => {
215+
updateForm({
216+
...formContent,
217+
stringMeasurement: {
218+
...formContent.stringMeasurement,
219+
name: e.target.value,
220+
},
221+
})
222+
}}
223+
onBlur={() =>
224+
event(
225+
'completed form field',
226+
{
227+
formField: 'stringMeasurement.name',
228+
},
229+
{feature: 'subscriptions'}
230+
)
231+
}
232+
edit={edit}
233+
maxLength={255}
234+
testID="measurment-string-parsing-name"
235+
tooltip="Provide a static measurement for your messages."
236+
/>
237+
) : (
238+
<ValidationInputWithTooltip
239+
label="Regex Pattern to find Measurement"
240+
value={formContent.stringMeasurement.pattern}
241+
required={true}
242+
validationFunc={() => {
243+
const pattern = formContent.stringMeasurement.pattern
244+
return (
245+
handleValidation('Pattern', pattern) ??
246+
handleRegexValidation(pattern)
247+
)
248+
}}
249+
placeholder="eg. a=(\d)"
250+
name="regex"
251+
onChange={e => {
252+
updateForm({
253+
...formContent,
254+
stringMeasurement: {
255+
...formContent.stringMeasurement,
256+
pattern: e.target.value,
257+
},
258+
})
259+
}}
260+
onBlur={() =>
261+
event(
262+
'completed form field',
263+
{
264+
formField: 'stringMeasurement.pattern',
265+
},
266+
{feature: 'subscriptions'}
267+
)
268+
}
269+
edit={edit}
270+
maxLength={255}
271+
testID="measurment-string-parsing-pattern"
272+
tooltip={REGEX_TOOLTIP}
273+
/>
274+
)}
208275
<div className="line"></div>
209276
</Grid.Column>
210277
{formContent.stringTags.map((_, key) => (

‎src/writeData/subscriptions/context/subscription.create.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const DEFAULT_CONTEXT: SubscriptionCreateContextType = {
3939
topic: '',
4040
dataFormat: 'lineprotocol',
4141
jsonMeasurementKey: {
42-
name: 'measurement',
42+
name: '',
4343
path: '',
4444
type: 'string',
4545
},
@@ -58,7 +58,7 @@ export const DEFAULT_CONTEXT: SubscriptionCreateContextType = {
5858
},
5959
stringMeasurement: {
6060
pattern: '',
61-
name: 'measurement',
61+
name: '',
6262
},
6363
stringFields: [
6464
{

0 commit comments

Comments
 (0)