I have created custom plugin in Kibana. In my plugin I have a requirement in which I have to create a dynamic tree view. Which would enable user to add/remove nodes from tree view at runtime. It would also be helpful if we could implement click event on the node and get to know which node is clicked.
The "public" / browser-side of a Kibana plugin can render anything to the DOM so this is really up to you to decide how you'd like to implement such a UI component. We recommend using React since you'll be able to use several helper methods used by other Kibana plugins. You can take a look at EUI's tree view https://elastic.github.io/eui/#/navigation/tree-view but there might be other React components better suited to your needs.
I have developed dynamic treeview using https://elastic.github.io/eui/#/navigation/tree-view as shown in below screen shot. When user clicks on any button 'And', 'Or' and 'Query', it gets added to the tree view.
But on editing I am not able to access the clicked node either to edit it or move its position or delete that particular node. Can you help me in how to achieve editing of node in dynamically generated tree view.
ERROR in ./public/components/correlation-rule/new-correlation.tsx
│ Module not found: Error: Can't resolve '@elastic/eui/src-docs/src/views/tree_view/tree_view_props' in '/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule'
│ resolve '@elastic/eui/src-docs/src/views/tree_view/tree_view_props' in '/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule'
│ Parsed request is a module
│ using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./public/components/correlation-rule)
│ Field 'browser' doesn't contain a valid alias configuration
│ resolve as module
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule/node_modules doesn't exist or is not a directory
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/node_modules doesn't exist or is not a directory
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/node_modules doesn't exist or is not a directory
│ /home/praveer/Praveer/kibana_7.9/plugins/node_modules doesn't exist or is not a directory
│ /home/praveer/Praveer/node_modules doesn't exist or is not a directory
│ /home/praveer/node_modules doesn't exist or is not a directory
│ /home/node_modules doesn't exist or is not a directory
│ /node_modules doesn't exist or is not a directory
│ looking for modules in /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules
│ using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./node_modules)
│ Field 'browser' doesn't contain a valid alias configuration
│ looking for modules in /home/praveer/Praveer/kibana_7.9/node_modules
│ using description file: /home/praveer/Praveer/kibana_7.9/package.json (relative path: ./node_modules)
│ Field 'browser' doesn't contain a valid alias configuration
│ using description file: /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/package.json (relative path: ./src-docs/src/views/tree_view/tree_view_props)
│ no extension
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
│ .js
│ Field 'browser' doesn't contain a valid alias configuration
│ using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props)
│ no extension
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js doesn't exist
│ .ts
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
│ .js
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts doesn't exist
│ .tsx
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js doesn't exist
│ .ts
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx doesn't exist
│ json
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts doesn't exist
│ .tsx
│ Field 'browser' doesn't contain a valid alias configuration
│ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson doesn't exist
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx doesn't exist
│ json
│ Field 'browser' doesn't contain a valid alias configuration
│ as directory
│ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson doesn't exist
│ as directory
│ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule/node_modules]
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/node_modules]
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/node_modules]
│ [/home/praveer/Praveer/kibana_7.9/plugins/node_modules]
│ [/home/praveer/Praveer/node_modules]
│ [/home/praveer/node_modules]
│ [/home/node_modules]
│ [/node_modules]
│ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props]
│ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js]
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props]
│ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts]
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js]
│ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx]
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts]
│ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson]
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx]
│ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson]
│ @ ./public/components/correlation-rule/new-correlation.tsx 5:0-92 707:55-70
│ @ ./public/components/app.tsx
│ @ ./public/application.tsx
│ @ ./public/plugin.ts
If you could provide with some examples or links for documentation it would be helpful.
Check here the version where this compoenent has been released
Check package.json of your Kibana dev env to see if kibana is using the minimum release version of eui that contain the desired component
I went through your example. Using call back we can call any method, but mine requirement is to either delete or edit (add children to the clicked node). So for that I would need either the node on which user has clicked or it's id so that either by using getElementById or by getting the whole node I can manipulate the node.
In callback how can we pass the clicked node details?
This would certainly be easier if building the tree from a generated array rather than a static array.
Let me know if this works. If not, we can look to update EUI to automatically provide the node id as part of callback, but this would not be available in Kibana until the 7.11 release at the earliest.
Thanks for the help, it worked. I would recommend to update EUI so that callback would return the clicked node. As currently we have to iterate through each node using recursive function to update the node. If we could get the clicked node then it would be a lot more easier as we just need to update the clicked node, and also would be faster.
Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant
logo are trademarks of the
Apache Software Foundation
in the United States and/or other countries.