I have an application with Elasticsearch 7.9.3 and Kibana 7.9.3 with some plugins which are written in plain Angular.js (directives, controllers, templates etc.) and no React code.
I plan on migrating and upgrading to Kibana 7.17 or 8.X, and I am aware of the fact that starting from Kibana 7.10, the plugins written in Angular.js are not supported. I am well aware of the fact that the most encouraged solution in this scenario is to migrate the code to React, but the codebase is pretty stuffed and big and it would be a real pain to rewrite it and it would consume a lot of time for this. Another drawback with this scenario would be the fact that the plugins structure might change sometime in the future again and we'll have to rewrite it again.
Another solution I have been thinking was using <iframe> tags in code to render a decoupled Angular.js plugin. The <iframe> would be used inside a new React plugin and would render a standalone Angular.js old plugin.
This is a potentially good solution, but my question would be if you have encountered these type of problems before and if you could tell what are some potential solutions and approaches to make the migration as easy as possible (e.g. use <iframe> or something similar (better), integrate angualar.js in react code somehow etc.)
As you know, Angular.js has been EOL since the end of 2021, so I'm interested in hearing more about your application and why Angular.js makes the most sense. The iframe approach should work. However, you should consider performance and sizing.
Since iframes can consume more bandwidth than other resources, using many in a single application can slow down the entire application. You may consider application performance testing.
There are also some considerations around size as well. Sizing is often challenging to ensure the iframe size fits the content well. A best practice is to consider sizing using viewport sizing attributes vw and vh, or media queries.
Yes, I'm aware of the fact that Angular.js support has come to an end in 2022, but the reason to find another way than migrating to React is the fact that it might take a lot of time to do so, and time is precious
Of course, iframes are not the ideal solution and the above mentioned problems with this method are some good points. But iframes is a second-to-last resort (last resort being switching to React).
A reason for not migrating to React now is the fact that the architecture of plugins might change again in future and I'd have to port the plugins again to the new arch / solution etc.
This is why I wanted to check with someone from your team if there are any solutions to this (maybe integrate Angular.js in React somehow, or have some support for legacy plugins, etc.)?
That makes a ton of sense as to why you are using Angular.js. The iframe approach should work here. I am not aware of any support for legacy plugins, but I have seen some blog posts around combining Angular.js with React, such as this one but never played around with these approaches myself.
The post you mentioned is for introducing Angular (version >2) in React, which is not really similar to Angular.js (which is version 1.X) and they are very different.
Thank you for your input! I think I will leave the question open for some days until maybe someone else wants to share their thoughts if they have encountered similar situations
As @jessgarson pointed out above, you could embed the content using an iframe. It is indeed a valid approach. I would just make sure you performance test carefully. I did come across this blog that talks about how to use an iframe to embed Angular.JS in Angular. This could also be done with an iframe in a small React plugin. That could be your way to write a React Kibana plugin. But I would watch out for cross-domain issues.
Another option, which I've not tried, is the one in this post using a library with React. It might be worth investigating if that is still a valid approach as the post is from 2020.
I'm very sympathetic to your situation. Having migrated a large codebase from Angular.JS to Angular, and even React, I'm aware that it's a full rewrite. However, the longer you hold onto EOL tech such as Angular.JS the more you expose yourself to potential security vulnerabilities (unless you pay a provider for long term support). And the more interest you accrue on your technical debt.
Let us know what solution you use in the end. Good luck!
Thank you for your comment!
Yes, the iframe approach is a valid option, the only problem with it is that the plugins should still be modified a bit and decoupled from the kibana infrastructure (they share similar UI and so on). It's still going to be a painful switch, but less problematic.
The reason I have made another post is to check if there might be other solutions than iframes, but I don't see another input from other people so I think there aren't any other solutions.
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.
