So ready?
Okay.
So, yeah, I have a huge disclaimer before I start.
It's that this talk I'm giving now, it was supposed to be done by Carla, who drives this
effort in Rehat.
So, yeah, she was explaining me a lot of things, a lot of things that I hope I will remember.
So, yeah, and also if you have challenging questions, we will probably need to get redirected to Carla somehow.
So this is all about the web UI, the free API web UI.
Okay. So, yes, I just would like to go quickly through the agenda.
So I'm planning to, on doing a very quick overview of the background and historical context.
Then I'll talk about the main motivation for the chain.
We will see the technology stack transition from the current one to the new one.
And this some stack transition not only applies to the technology or the components,
but also has implications on the whole testing framework and documentation.
So then if there is no demo effect, we will have a look to the modern UI from a live and public instance
that all of you will be able to access as well.
And you can play, if you have your laptop on, you will be able to play with it as well as we speak.
And finally, yeah, before the Q&A, we will have a look to the future roadmap because this is a working progress.
We haven't implemented all the functionality yet.
We have big pieces, but it's not ready yet and we are working in upstream, you know.
And what is more important, we will also cover how you can contribute to it as well.
And then, yes, this is kind of the background.
Free API is an identity management solution combining Linux, 3D9DS, MIT, Kervos, NTP, DNR, DocTag, Certificate System.
I mean, one of the most important aspects is that it provides a centralized authentication authorization
built on top of very well-known open source components, as you know.
And it consists of a web interface, the web UI, and a command line administration tools.
And, yeah, the very first version was released in August 2007, so it's been a while, the first version.
And at that point in time, yeah, in the very beginning, one of the main goals, it was simply to have party TV between the UI and the click commands
so that you get the same stuff from the web UI and also from the click commands.
So that was one of the main goals at the very beginning, very long time ago.
And the first implementation was based on Turbogears, which is, as you know, probably a Python web framework,
consisting of Seral, WS-GNA components that this is still active if I'm not mistaken.
So there is still activity in GitHub.
So this web UI consisted of some sort of a tool wrapper,
capable of interacting with the IPA server through the IPA IPI commands.
And it was capable of sending IPA server commands, fetch the data, and modify before displaying.
So very basic thing.
So as you can imagine, during those days, no React, no Angular, so they had yet to emerge.
It was a plain JavaScript in the end.
And there was a lot of limitations, like it was necessary to optimize the number of HTTP requests
and also minimize on how the JavaScript files exist.
So in the end, we ended up using a lot of files for the web UI.
So the first significant evolution of the web UI was driving by the Dojo library.
So with the help of this library, it was possible to transform free API JavaScript packages in AMD modules
so that it was possible to build into a single file, and this was helping a lot with performance.
We managed to reduce all this inside number of JavaScript files to be processes.
And then around 2014, all the styles and guidelines for UI, for UX, for the web UI, you know, were adjusted.
This was done to align with the Red Hat, Common User, Environment, RQ, you know,
which later became the pattern fly.
The pattern fly that you know today comes from the Red Hat Common User and Environment.
So basically, pattern fly is a set of best practices to provide users
and unify them into the experience when navigating through the UI.
So, yeah, and this is how it looks like the current web UI, the one that you can see today.
So, yeah, so this is why we summarize somehow why are we changing it
and what are the main motivations for this change.
First of all, the current web UI is following pattern fly 2 and it's unsupported.
So, some of the functionality that we need, this is kind of blocking us somehow
to implement new features in the web UI because we are still following the pattern fly 2.
So, it makes evolving the UI very difficult and what is more important is to stop using outdated tools and libraries
like the Dojo library that I was talking about before that is going to be replaced by React.
So, and then how are we doing, yeah, and this slide is somehow trying to summarize how are we going to do this.
So, it's basically following some sort of guiding principles.
So, the most important thing for us is to minimize the disruption with our assistant users.
So, this is like when you go to the supermarket and the location of all the products is changed.
Every time you go to the supermarket you are unable to find the things because they change the things so that you spend more time on the supermarket and buy more things.
So, we are not going to follow that strategy.
So, in the new web UI you will find all the things in the same place.
So, we will focus more on improving the components and yeah.
So, then now you can see the technical stack transition that we are making.
Okay, on the left you can see the current web UI, all the technologies we are using there and this is what we are moving now.
Okay, so the first one is pattern fly from the version 2 to the version 5.
Okay, these are all the guidelines I was mentioning at the beginning and best practices.
Okay, then we are going to move from dojo to react which is more modular content and is based on components and is kind of the modern way.
And another one which is a very important piece is how we test the web UI.
We are currently using PyTest and we are going to replace that by Cypress and Cucumber.
As you know these two technologies follow the behavior driving test.
They are more human readable. It is super easy to test with Cucumber and Cypress and yeah, this is an important change as well.
So, okay, yeah, let's start with the comparison between the old one and the new one.
So, the most significant one I think is the navigation bar.
So, instead of having it there and the sub task, now we have it on the left bar and it is very well organized in the sense that all the sections,
they depend on each other. We have three levels now and then you can collapse and expand as you go.
So, this is kind of a huge improvement.
And then, and it is always visible and now you have the ability also to hide it and have more space for the other bar.
Another big change in this comparison is that the settings form and now we implemented a very cool thing here is the jumping links that we have here.
Okay, so you have them available all the time and then you can click on them and then they will move you to the correct view.
So, another one is that all these buttons, they are floating buttons and they will stay there all the time.
So, also the tables, they are kind of refactored now and this is now much more clear as you can see, you know.
So, another one is the scrolling. This is another important one because in the old one, when you were scrolling through all the list of users, for instance,
I mean, you lose the navigation bar. I mean, the whole UI was scrolling. So, now this is not happening anymore.
And now you can scroll and then you will have all the time the navigation bar there. Okay.
So, this is a very nice improvement as well. Yes.
So, let's continue then about modernizing the UI. So, this is kind of the architecture. We're following.
Okay. So, on the left part you have the front end. You have the modern web UI is sitting on React.
Okay. The React is kind of umbrella for all those libraries. From top to bottom. Then we have butterfly 5 that we already talked about that.
The testing libraries, it's capable of connecting with the testing libraries with Cypress and Cucumber.
Then we have the React router library that this is providing the multi-paging functionality.
And this is because React's only built single-page applications. So, this library provides the feeling of moving through multiple pages.
Okay. So, this is why we are using that one. And as you can see, we have the internalization one here, but with dots.
With dots because we haven't implemented yet. This is not available. But it is on our plan and we need to investigate and see what will be the design.
How can we connect that library also with React so that we can also cover different languages and stuff like that.
And then the communication layer is one of the most important libraries that we are using. It's using RTK query library.
And we are using this one because the connection with the IPA server is through RPC.
This is one of the best libraries to do so. So, basically, from the modern web UI, from the forms, we are kind of collecting the data.
And then we send an API call to the IPA server. Then we grab the response back and then we process the data that we show in the web UI.
This is the way it works somehow. Yeah, basically, this RTK query is capable of performing group operations in JSON RPC.
That's the whole idea. So, yeah, let's continue.
Yeah, this is about the testing framework I was mentioning at the beginning. So, we moved from PyTest to Cucumber and Cypress using the behavioral driving development.
This method that you know is more human readable and then implemented tests now.
Super easy, but you are going to see that with this sample, this side-to-side comparison. This is the old version. This is PyTest.
And this is the new one. It's more oriented on the user. So, you just describe what do you want to do in the web UI.
Like adding a user. Okay, I open the side menu. I click on this and click on that. And this is the test. All right.
And even better, I think I have a video. It was done by Michal Polovka, one of my colleagues. He's working on this.
Yeah, it's working. Let's reproduce it. So, this bit is really kind of...
Yeah, you are going to see now how one test is executed. This is going very fast because it's supposed to be fully automated, you know.
You see? And the good thing about this is that if everything... If something fails at some step, it will freeze there.
It will wait until you have a look and you will see exactly the step that is failing with all the locks and stuff like that. So, it's amazing.
Yeah. So, with this framework, it's kind of really fun to implement tests now, you know.
Yes. All these tests are obviously running in the GitHub project. We have enabled GitHub actions. And yeah, it's really easy to implement this. Okay.
So, if we continue... If this is working...
So, yeah. This is the same video, right? Yeah. Okay. So, now, yes. Let's have a look.
So, before this presentation, I deployed a public instance in EC2 Amazon Web Services. So, I did a trick with the...
Well, we have a trick to expose the modern UI, okay? Because we haven't implemented yet the login page for the modern UI.
So, we are reusing the old one to login. Once you login, you can access to the other one. So, let me try.
But yeah, you can access, try to access with the laptop and you can start playing it and start adding users if you like or whatever.
So, on my end, I'm going to try to access it now. So, yeah.
So, this is...
Modern UI.
So, yeah. So, yeah. This is the modern... I mean, the demo instance, but it's loading the old one. Because I need to login here first.
So, do you know the credentials? I guess it was in the slide. Okay. Admin and secret 123.
So, this is supposed to work. Yeah, this is the old one. Okay. So, now, I'm going to access to the modern UI.
And then I just need to change here.
Yeah, and this will give access... No, wait. Modern...
Yeah, this is the modern one. So, if I open it a little bit.
So, one of the cool things that Carla told me to show is that all the... is that this web UI is very dynamic thanks to React and pattern flying.
Okay. And for instance, if I go here and inspect, you can see how dynamic is the new one.
For instance, we start reducing the size. You see how all the things are getting little there.
And it's kind of... For instance, now the panel disappears because of... to have more space.
But if you continue doing so, it will... all the entries, it will appear like some sort of cart. Okay.
So, yeah. So, this is gradually improving a lot of things here. So, yes.
So, what I mentioned in the mock-ups that you have in the navigation, you can collapse, you can hide the one.
I mean, the entire navigation if you like. And you have three levels. You can go for more sections. And, yeah.
So, yeah. So, this is... there are available. And don't trust too much from this instance because I reset every night with one of these nice automations in the Amazon Web Services that destroyed the instance and then recreated again.
But, yeah, you can play with it. So, let's continue with the presentation then.
Yes. Yes, I embedded another video where Carlisle is playing way much more things than I. Okay. So, you have available in the slides. This is pointing to a YouTube video.
So, where she basically is playing in a lot of content. Okay.
That you can also watch if you like. And she's using a model, an instance with a lot of data populated so that you will see more content there.
All right. So, yeah. Then, as part of future roadmap, what is next? I mean, the situation of the project. I mean, we implemented two major sections in the new YPI already,
but we need to keep implementing new pages and functionality. So, it is on the roadmap to improve the routing and somehow figure out how to add direct links to pages.
This was in the old one, but not in the new one. And we need to investigate. Also, we need to explore because the new web UI is capable of sorting the data or listing a lot of entry records.
And we have limitations with held up. So, this is something that is still open and we need to test performance with that and see how can we improve the internalization that I was mentioning before is still missing.
Also, we would love to implement a new login page, but in this new login page, we will, yeah, we would love to enable new authentication types.
Like, for instance, if you have been in the other talks, passwordless external IDP, all this type of stuff, we will implement it in the new login page.
Okay. And also, there is another topic, which is for a little bit for the future.
Once we have the project more advanced is how are we going to adapt all those external plugins that user or the community, they have kind of plugins that they are able to connect to the web UI.
And then we need to provide a solution for them as well. And, yeah, and the last thing is that we are driving all this initiative all this product in GitHub.
We are engaged a lot with the community. And so, I can show you in the GitHub project, we have GitHub project, sorry.
So that we didn't strive for in the sense that it's super easy to contribute to the project. I mean, if you are, if you like these technologies, and you will love to work with the Red Hat Web UI team.
So you will be able to do so. This is the project and then it's super simple. You just follow whatever is in the read me file and then in terms of one minute, you can get all the development environment in your own laptop.
And, oh yeah, I see. Wow.
I miss the time. Yeah, so everything is well explained. I mean, with background you can bring up and yeah. So, sorry.
So I think that was the last slide. Yeah, the next is kind of, yeah, how to contribute, but I already explained that. So there are open discussions as well. And yeah.
So, yeah, that was it then.
So I guess we don't have time for questions or.
Yeah, that's a good question. I mean, so the development is happening in upstream. So it's very easy to follow what is happening there. Right.
And let's say that there are three main sections in the Web UI project. We have implemented two of them. I mean, the most difficult one was the first one.
Implement the first one because you need to take the decisions or investigate about things. But now almost all the things are sorted out and we are speeding a lot with the project.
And we believe that maybe by the end of the year we will see the new one.
We will see. But we can speed up if we get more contribution. Thank you.