in src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js [96:300]
renderRow(row) {
const defaults = {
fields: '',
template: '',
index_pattern: '*',
query_string: { query: '', language: getDefaultQueryLanguage() },
};
const model = { ...defaults, ...row };
const handleChange = (part) => {
const fn = collectionActions.handleChange.bind(null, this.props);
fn(_.assign({}, model, part));
};
const togglePanelActivation = () => {
handleChange({
hidden: !model.hidden,
});
};
const htmlId = htmlIdGenerator(model.id);
const handleAdd = collectionActions.handleAdd.bind(null, this.props, newAnnotation);
const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
return (
<div className="tvbAnnotationsEditor" key={model.id}>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false}>
<ColorPicker
disableTrash={true}
onChange={handleChange}
name="color"
value={model.color}
/>
</EuiFlexItem>
<EuiFlexItem className="tvbAggRow__children">
<EuiFlexGroup responsive={false} wrap={true} gutterSize="m">
<EuiFlexItem>
<EuiFormRow
id={htmlId('indexPattern')}
label={
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.indexPatternLabel"
defaultMessage="Index pattern (required)"
/>
}
fullWidth
>
<EuiFieldText
onChange={this.handleChange(model, 'index_pattern')}
value={model.index_pattern}
fullWidth
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
id={htmlId('timeField')}
label={
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.timeFieldLabel"
defaultMessage="Time field (required)"
/>
}
fullWidth
>
<FieldSelect
restrict={RESTRICT_FIELDS}
value={model.time_field}
onChange={this.handleChange(model, 'time_field')}
indexPattern={model.index_pattern}
fields={this.props.fields}
fullWidth
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiFlexGroup responsive={false} wrap={true} gutterSize="m">
<EuiFlexItem>
<EuiFormRow
id={htmlId('queryString')}
label={
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.queryStringLabel"
defaultMessage="Query string"
/>
}
fullWidth
>
<QueryBarWrapper
query={{
language: model.query_string.language || getDefaultQueryLanguage(),
query: model.query_string.query || '',
}}
onChange={(query) => this.handleQueryChange(model, query)}
indexPatterns={[model.index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormLabel>
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.ignoreGlobalFiltersLabel"
defaultMessage="Ignore global filters?"
/>
</EuiFormLabel>
<EuiSpacer size="m" />
<YesNo
value={model.ignore_global_filters}
name="ignore_global_filters"
onChange={handleChange}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormLabel>
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.ignorePanelFiltersLabel"
defaultMessage="Ignore panel filters?"
/>
</EuiFormLabel>
<EuiSpacer size="xs" />
<YesNo
value={model.ignore_panel_filters}
name="ignore_panel_filters"
onChange={handleChange}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiFlexGroup responsive={false} wrap={true} gutterSize="m">
<EuiFlexItem>
<EuiFormRow
id={htmlId('icon')}
label={
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.iconLabel"
defaultMessage="Icon (required)"
/>
}
>
<IconSelect value={model.icon} onChange={this.handleChange(model, 'icon')} />
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
id={htmlId('fields')}
label={
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.fieldsLabel"
defaultMessage="Fields (required - comma separated paths)"
/>
}
fullWidth
>
<EuiFieldText
onChange={this.handleChange(model, 'fields')}
value={model.fields}
fullWidth
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
id={htmlId('rowTemplate')}
label={
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.rowTemplateLabel"
defaultMessage="Row template (required)"
/>
}
helpText={
<span>
<FormattedMessage
id="visTypeTimeseries.annotationsEditor.rowTemplateHelpText"
defaultMessage="eg.{rowTemplateExample}"
values={{ rowTemplateExample: <EuiCode>{'{{field}}'}</EuiCode> }}
/>
</span>
}
fullWidth
>
<EuiFieldText
onChange={this.handleChange(model, 'template')}
value={model.template}
fullWidth
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<AddDeleteButtons
onAdd={handleAdd}
onDelete={handleDelete}
togglePanelActivation={togglePanelActivation}
isPanelActive={!model.hidden}
/>
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
}