EUIify Discover sidebar

[nreese]

discFieldChooser angular directive needs to be replaced by React component's that utilize EUI.

DiscoverSidebar component

props

• indexPatternList - array of index pattern titles and ids pairs
• selectedIndexPattern - selected IndexPattern instance
• selectedFields - array of selected field name strings (called 'columns' in angular directive)
• onChangeIndexPattern - callback function that takes new index pattern id
• onAddField - callback function that takes field name string
• onRemoveField - callback function that takes field name string
• onAddFilter - callback function
• hits - array of Elasticsearch hit documents

render

render IndexPatternSelect

// use selectedFields and indexPattern.fields to create selected fieldsList
render SelectedFields

// use selectedFields, indexPattern.fields, and hits to create unselected fieldsList
render AvailableFields

IndexPatternSelect component

props

• indexPatternList - array of index pattern titles and ids pairs
• selectedIndexPatternId - id of selected index pattern
• onChangeIndexPattern - callback function that takes new index pattern id

render

if single index pattern in indexPatternList
  render index pattern title
else
  render index pattern select input

SelectedFields component

props

• fieldsList - array of selected Field object instances
• getFieldDetails - function that returns an object with the following properties
• onAddField - callback function that takes field name string
• onRemoveField - callback function that takes field name string
• onAddFilter - callback function

render

render DiscoverField for each item in fieldsList

AvailableFields component

props

• fieldsList - array of un-selected Field object instances
• getFieldDetails - function that returns an object with the following properties
• onAddField - callback function that takes field name string
• onRemoveField - callback function that takes field name string
• onAddFilter - callback function

state

• isFieldFilterVisible
• fieldFilter
  • aggregatable - undefined, true, or false. Filter fields by aggregatable property when set. Unset value is undefined.
  • hideMissingFields - boolean. true be default
  • name - string. Undefined by default. Filter fields by name property. Remove fields that do not contain name substring.
  • searchable - undefined, true, or false. Filter fields by searchable property when set. Unset value is undefined.
  • type - 'any', 'string', 'date', 'number', '_source', 'ip', 'geo_point', 'unknown'. Filter fields by type property when set. Unset value is any

render

render FieldFilter visibility toggle button
if state.isFieldFilterVisible
  render FieldFilter

// filter fieldsList by state.filter

// group fieldsList into popular and un-popular lists
render DiscoverField for each item in popularList
render DiscoverField for each item in unpopularList

FieldFilter component

props

• aggregatable
• hideMissingFields
• nameFilter
• searchable
• type
• onFilterPropChange - callback function that takes filter property name and new value

Render

render filter form

DiscoverField component

props

• field - Field instance
• isSelected - boolean
• onAddField - callback function that takes field name string
• onRemoveField - callback function that takes field name string
• onAddFilter - callback function
• getFieldDetails - function that returns an object with the following properties. Note: Field details are not passed directly into props because it is expensive to calculate and only want to calculate on demand.
  • buckets - array of objects
    • count
    • display
    • percent
    • value
  • exists
  • missing
  • total
  • visualizeUrl

state
fieldDetails - fetched by calling props.getFieldDetails when field name is clicked

render

render field name
if isSelected
  render remove button
if !isSelected
  render add button
if state.fieldDetails
  render field details