 Welcome everyone this is the Jenkins user experience special interest group it's the 15th of September 2021 thrilled to have everyone here reminder that we abide by the Jenkins code of conduct be nice to each other while we're interacting etc. So by way of agenda review I had proposed to put a poll request monitoring plugin status in hopes that Simon would be able to join us. He isn't here so I'm going to move that down further. Yeah. Skip that topic or great. Yeah, and if we can if we if he's available, Uli as far as I understand it he may have completed his master's program now and is out out in the working world. Not yet. I think he wanted to just to continue with the master because he has now a bachelor and then the next step is the master. But he said that he's not sure if he really starts it so let's see. Okay, got it so that so the project he was working actually was a bachelor project not a master project. Yes, got it. Thank you thanks for the clarity. Alright so I wanted to give Uli some time to talk about the code coverage UI improvements that he's envisioning and that have started discussion already in the community thread. And then I had put a placeholder in to talk about pipeline graph view. What I was thinking of doing is I can just show, show that and we can use it as a talk topic. So that, so that Jake and Patty can see where it's going as a possible blue ocean replacement. Anything else that should be on our agenda for today. Okay, Uli. And I think the best thing would be if I share my screen. Okay, let me stop sharing and there we go. Okay, now you should see the code coverage view the old one. I'm planning to rewrite a lot of the code coverage plug in the next couple of weeks. And a student of our university is trying to improve the coverage plug in as well. Not on the UI side but on the model side. What we want to introduce is some kind of a delta coverage computation. Currently you see the code coverage of your project in the current state. But what is more interesting for me is to provide some details about the data coverage from a pull request. You see how many or how you improve the coverage or decrease the coverage, which lines you covered which lines you did not cover from the current pull request, not the overall project. So, maybe here in this diagram you already have this chart which is a little bit meaningless you have always the straight lines. But nothing really happens and that's if you are in a project with good shape. A small request will not change very much so we should more focus on the data. And in order to visualize the data we need to change the model, because the model currently computes the totals and that's all. And in order to compute some deltas we need to change the model. So this is planned starting from October. And in order to have a good start for this project I tried to refactor the code coverage API plug in. And I refactoring it, both on the model side and on the UI side. So the screen you are seeing now is the current implementation which is on our CI instance available to everybody. And what we see here is basically we have a trend chart in this details view we have this over coverage view. This screen needs a little bit improvement I think so I started to refactor it. And what I've done is I basically added two different things so the first thing is I added a code coverage trend chart. The refresh is broken okay, still a bug so it's not yet finished. So what I added is first of all a code coverage trend chart where you see the how the line and branch coverage is behaving in your project. And this is one thing which I have added already. And I'm also using each charts and chart configuration that I'm using in the warnings plugin. So yeah, all these charts are now look quite similar. So what I have removed from the main screen is the. Yeah, the project views should show the trend of your project and not the current state. So here you see the trend. And when you want to see the current state you need to select one of your bills and click, and then you see the new details view. And this detail view is a little bit expanded or extended so what I tried to introduce here is, first of all I'm using also bootstrap here to show the elements in some cards. I still need to rearrange it a little bit so this is not yet finished because first of all I wanted to build the building blocks and then I need to see how to show on a big screen now to show on a small screen. So that is not yet finished so I just implemented the parts. And the first part is, this is already part of the existing plugin, just an overview. But for me as an architect this overview is not what I'm quite interested I'm more interested in the detail view for my classes. So what I have added is this chart where you see all your classes in a tree. So, yeah, maybe this needs a bit explanation it's a little bit complicated describe it so you have two things you need to look at. So first of all we have packages. For instance here we have the IO Jenkins plugins forensics minor package and here we have the next package. So we have packages and the building blocks are classes, and the coloring of these classes show the code coverage in percentage. So a green means we have about 90% code coverage. The red one means we have zero code coverage and so on. So the coloring still needs to be improved. So this is my first attempt just to see that you have a feeling which class has how many code coverage. So, so, what is maybe I. Sorry, I switched into another report where we see it a little bit better in another project for me. So this is a project that has a really good code coverage. For me as an architect it's important to see which parts need to be improved. So I can focus on the red things here. The green is everything fine so I don't have to look into so but here we have some red market. So if I press here, we have this tree chart which navigates to these classes which have no code coverage currently, or which have a bad code coverage this one has 75% but this one has 100%. So I can select more easily, which are the pain points in my project, and which are, let's say, the good things. So this needs a little bit more investigation for bigger projects so I'm using it currently for my projects only so it's, you can't see the names anymore for the classes, but you can always click into the details and then it is zooming automatically and make it smaller and you move around. This is already provided by each chart so this is nothing I programmed this is just from the library I'm using. So, sorry, yeah. That zoom that zoom and pan functionality you've got just because you'd already chosen to use each charts as the, as the implementation. Yes. Thank you for free. And the only thing what I provided is a tree model where I render my project in a tree and each note has a coverage. So I have a note for the project and note for the packages and a note for the files and note for the classes. I'm not here at the class at the file level, but if you want to go into details you could also see the, the classes and the methods, if you want, but I did not use it yet so because for me, or when I'm looking at my projects I'm more interested in, in the classes, and not in the methods. So this is a totally new view, which is a wonderful thing. And that view is a thing of beauty to me I'm used to using that kind of a view to look at this space use on my computer. And I love those those sorts of views because they helped me very quickly identify. So the size of the block is the, is the number of lines in the source file. Yes, good idea that I forgot to mention that. Yes, the number of lines. Okay, so the, so the, when I see a big red block here that's hitting to me low coverage, large source file, a small red block is low coverage small source file. Okay, great. Wow. This is something the library does for me so I just provide the tree. And the tree has two values the number of lines of the class, and the other value is the percentage of percentage of coverage. So what not what is not yet implemented would be something if I click here it would be helpful if I see more details for the selected file. But I didn't get it yet, because currently the click is interpreted for the zoom. So, I need to figure out how to I can register and additionally went. Okay, so, so I was curious what the action was the action you took to do the zoom is actually a click, not something with a scroll. Okay, so then you can use my my on my zoom bar here on my Mac I can use bigger and as to make the pinch and pan how hard we call it yeah. And but you can also click and then the selected element will be put into the middle or in the center. So this few is for the idea of this few is also used by cover cover all and these, I don't know, let's say, let me show you. Sorry. The idea behind these views is from code car, where we can see our code coverage from open source project values a sunburst diagram but it's kind of similar. So, I think it would be helpful if we have this in Jenkins as well and not so we don't need an external provider for this information. Okay. So, so in order for me to see that. So I, you mentioned that you tend to focus on on the, the which things are most in need of coverage, I tend to focus on I think what's the next section down the coverage detail of all files. I tend to look at the statement level, but, but I think what you're saying is I wouldn't be able to click in the coverage overview yet, but I can see statement level by clicking in the coverage details of all files. Yeah. Yes, this is the third few. Actually, as I already mentioned in the beginning, I'm not sure how to place these three views if I use different panels on the left and right, or if I use tabs. So this needs to be looked at, I'm not sure how to make this, but the hopes of this and the third part is kind of similar to the warnings plug in where you see all your files in a table. So, so now here, this is only 40 files is a small project maybe we go back to the my other project. So here we have, let's say 300 files. And if you want to see the coverage of this files is the same as in the one is that you can select for, for instance, press eclipse here in the search field and then you have all your four classes which somehow about the eclipse and then you see in in a short few of the line coverage and the branch coverage of these elements. So, this is something which is maybe better to work with this table you because you want to look at your files you may you can sort the files by, let's buy coverage. So, yeah, it depends on what you're trying to achieve. And here you see the finance and here you can also. Let's, let's look some up here. Take this one. If you select them, then you go into now the source queue. Seems to be still a bug I already implemented that sorry. Let's see if it's here. But the concept is that I would be able to see the source code in that through one click from the coverage details. Okay. Since I'm currently developing very heavily this is an old state of which is which not have which has not the source code available yet but this one has so sorry for jumping back and forth. So this is just a different project where I enabled the source code few. And, and here if you click on, for instance, this file you see the source code few, and this is the few I've taken from the old plugin though this is not no new implementation I just put it in a card to make it a little bit prettier, but the rest is the old few. So here you see the green parts are the lines which are covered and the red ones, which are not covered. But I did not change this this is basically the same code as before. The idea is it now we have just two levels of fuse, because in the old plug in we had the level of project and a group and package and source code and you need to click, I think seven steps until you see the source code. And a lot of people didn't find the source code because they didn't know how where to click. Okay, you need to configure it. That's a point but if you configured it is really hard to find. And now you have just to clicks or not to clicks but to fuse you have the top level view with this three parts. And then you can click on any source code. It doesn't matter click here and you see immediately your source code. So that's basically the changes I made to the user interface. I think there are a lot of small things which need to be improved now. So, yeah, layout, how to show it on a small screen and a big screen but yeah I think I wanted to start with a building blocks to make them ready. And then we need to improve step by step. And so where where would you like feedback on these kind of things I know you'd started the conversation community Jenkins.io is, is that and is, are you at a point where you want people to play with the code or you're still deep in development and aren't ready yet for anyone else to experiment with it. Yeah. Currently it's not yet for. Currently it's not yet ready to be used by someone else. So, I thought it would be helpful to discuss it in community but then I noticed. I even posted it in the channel of the code coverage API but nobody responded so I thought it's maybe better if the people can see it on their machines and then report about what to change. So, my plan currently is to finish it in a in a stable way by the end of this month. And then I want to publish it in a new public release of the plugin. And I would like to provide it as kind of. I would like to have the old screen in place and add the new screen as an additional screen. So you see the old results. And if you are not happy with the new results you still see the old results, but you can see the new results and can already have a look at it. I will maybe I add a feature flag to disable it or something like that. And we can have both use side by side so nobody else misses something which was working before. And we can discuss it on a live object it's better than on slides or something else. This looks brilliant really thank you. What an improvement to the to the experience I'm one of those embarrassed people who asked to say I didn't use the new plugin for line level coverage viewing because I couldn't find the link to click. I failed to understand that it was even there and so I kept using the old one. And now you've shown that hey I can switch to the new one and use it. Thanks. Any different other questions from for this thing. I really questions but I just shocked and impressed by this because this is just awesome one of the products I used to manage was a code coverage tool for mainframe source code so it was cobalt and assembler and stuff like that but the visualization is so powerful. I did echo Patty's question in the chat there she asked you know is there a need to see all three at the same time. All three views like if you go back one screen to the more chart view. Yeah I think this is awesome. Yeah, I'm blown away. This is really good and as someone who is, you know, probably my last two jobs was the first two jobs in my 10 year career of using code coverage for unit tests, which I'm sad to say. This looks really great and when you were talking about, you know, for the cards, do you do tabs, do you do columns, do you do accordions. Can you give me think of the, you know, do you actually need to see all three of them at the exact same time or could you do some type of like toggle to say, like, if I, you know, because we, I think probably all three of us have a different use use case that we would be viewing this and is it something that I could say you know I'm an architect I need to see it at this level let me turn that on and now I can see that panel on the UI. Or do you know are we thinking we'll know everyone needs to see all three of these at the same time because they give different levels of detail. But I think it looks really good and I'm curious actually if you are thinking that this will you're going to release it for October you thinking this would be something that would be an interesting use for Hacktoberfest maybe to help you with some of that alignment stuff for for seeing all of the graphs. It would be fine yeah, I think we need always need a lot a lot of good opportunities for people to help in October first so this is UX user interface thing. And sometimes we only have Java programmers sometimes we have only C programmers and sometimes we have Java script programmers and here they could help very much. I wonder if you'd be willing really Saturday morning October 2, we're going to do the contributor summit for Europe and Asia Pacific that'll also be our introduction to Hacktoberfest. Would you be interested in presenting a segment on this, both as, hey, here's something new we've got. And if you're open to contributions from others. You could then describe how they could contribute now if you're not open if you're not not at the point where you're ready for others to contribute that's okay too. But are you interested in in that or is it still premature. No, I think the good thing is, it is, I want to develop in side by side so you can't break anything cause. Yeah. I have the old few. And my student starts in October as well so it needs to be ready. And I want to have it in a good shape the project so. And I think there are a lot of small improvements where I actually don't have the time so I'm happy that it is now working and so if someone else has the idea. Let me show a small example so what I have prepared here is this table where I have two columns which are called line coverage where we have the color and for instance the percentage in the number. This is fine for me now to, to make the student happy to start his work, but in order to have a good UI it would be helpful if we can combine these fuse and, and this takes a little bit time for someone. But you don't have to have much knowledge about the whole project so some UI skills would be helpful and then you can make a better column for instance. Or you can add some tool tips here or some small things there are a lot of things you can help. So I think it would be good if I presented here on on the on Saturday was it on morning in my time or morning in morning your time 7am utc. So early morning your time middle middle dark of my night, but intentionally focused on reaching India in the middle of the day. Okay, yeah, that would be fine. I will can make a demo and some at some topics. Excellent. Oh, that would be great. Thank you well at what that super launched a hacktoberfest and a good thing for the contributor summit to show. Look, here's here's a, an exciting piece of user interface improvement that's happening and here's somebody leading it. Great. Thank you. Julie question for you and maybe this is a naive dumb question but it have you thought of maybe combining these bottom two views. But that makes sense one I mean as you keep digging down into the into the more graphical one. You know eventually you get to the the line coverage of the of the class or of the of the of the methods. So instead of like two views here. Have you, has that crossed your mind or is that a dumb question. That's, I think it's, I think it's helpful to have this tree view. And on the other side, I'm using in the warnings plugin quite a lot often they're only the table. So I'm sometimes I don't need charts at all. I'm just want to sort by by coverage and select the things which maybe we click here where I see immediately which file needs to be improved. So, I think both views, typically show the same information in a different way this is the tabular way, and this is the tree way. So let's run it again. So, I think it makes sense to show either this one or this one and not both together. So, maybe it's helpful to have a toggle or a tap so one user prefers the tree view, and the other users prefer the table view. So, yeah, actually, I'm not really sure. Yeah, I mean, yeah, that was kind of my thought is two tabs right some people are more visual people want just the raw data table view so now that's great with the with the background in the in the top visual with that change to green if all the boxes were green inside of it. Yeah, this is the package. The line coverage of the packages only 35% so it's really bad, maybe we can skip to the good project. So here you see the, this level is 95% and therefore it's green. So, I experimented a lot of with the colors it's really hard to find colors. And then I noticed these few is not colorblind safe. So, if someone is colorblind you don't want to see a difference between red and green. So I got the table. Yeah. I think, at least for now we have a table. Be an idea. And yeah, maybe we need to make the palette somehow configurable, which it is not yet. So just the first implementation will be a fixed palette but I think we can improve it by making it configurable. So one can select, for instance, a totally different color, or even not here green and red, we can just choose the red and white for what white is good and red is bad or something like that so yeah. Awesome. So this, this particular project looks like it's got on the order of hundreds of hundreds of classes what about a project the size of Jenkins core for instance with probably thousands of classes is this kind of presentation. Is the is the coverage overview by package and file, does it shrink and and expand based on the size of the thing. Yeah, you see here it's on this part here, you only have the blocks. And I don't know how it will look like if you are having Jenkins, but we need to try. I never tried it as I just use it in my projects. But maybe we need to. Maybe we can have some triggers to show only packages if we are in Jenkins or in a project with a lot of classes. So on the coverage details the search field that you used earlier seems crucial to me because frequently I know, I know a specific class or substring that I want to be looking for is that is that a viable thing to include in the visual in the graphical representation in the upper in the in the coverage overview by package and file or not really it doesn't make sense to do a tree view of us of a subset. You mean here. Yeah. Yeah. This would be an option as well. Yeah. You have not only this, I'm currently using a tree with one root. But I think one we can place a thing it's called forest with a lot of roots. And maybe we have a filter with where we select the package for instance and show only the package which has been searched by. Thank you. Okay, so, so it sounds like there's a lot of flexibility available and some concepts are some powerful concepts they're excellent. And I think that way you're kind of just talking about that search feature on that more visual one. And in the aid and in your bigger projects right like in, you know, with that one with all the tiny little squares you don't know, you know where it's at you'd be searching quite a bed for the one you're looking for, you probably know. I have a better idea of, you know, I do have to where it is but if you can search and it would almost do that zoom in for you. That would be really cool. And I think what would be also helpful is, and this is the master thesis we are starting now. If we look at difference or the changes you actually made in one pull request. So maybe we show only blank blocks is here and only the green and red boxes other boxes where which have been changed in a pull request for instance, this would something else. And the Delta coverage concept sounds sounds really challenging to me in terms of presentation because you're trying to you're telling me, you're trying to convey to me that this pull request that I just the just arrived had a change from a base branch right so that's, that's now how do you present to me, which things are unchanged which things went down and which things went went which things improved. It's very similar. You know I know IDEs and things like that when you make code changes right they have the compare view and shows the older, the older source and the newer source and it has the line, you know connections as to what exactly changed I think something like that might be useful to show the Delta view. This is beautiful. Thank you very very much is there other that you you wanted to describe on this other things that you wanted to discuss. I think currently not. I think the discussion will start if I roll it out and everybody can use it and then we see this is missing or. Yeah, I think it's the best thing to test it on your own project. Super. And I'll go ahead and I'm going to put you into the into the contributor summit as a as a topic to be discussed and highlighted as new capabilities coming and Hacktoberfest contribution interested so that people who are seeing it say I if I want to do Hacktoberfest I should attend, and especially in this case it looks like JavaScript skills would be a good thing here and UI skills so if they want to do UI things this is, this is a good place to be as opposed to not the get plug in that's Java only that kind of thing good. Excellent. Thanks very much. And I think that covers all the topics we had given the time that we're at I'm prone to. So we could do pipeline graph you if you'd like I could show quickly where it's at but I'm not sure that I'm the best demonstrator of it I'm happy to show it. But if you'd like to see that we can we can do a brief discussion of that, or we could just call that we're done for today and and go forward what's your preference. You know maybe we can take it offline and we you know we can set something up and go through it but okay. Yeah, I think I'm good for today. Great. Uli are you okay if we already know the few. Great so a demonstration of pipeline graph you to you isn't much of a help. So, so Jake you and I I'll take you up separately and we'll show it separately then. That's fine. That's, that's excellent. Great. Thanks very much for for your work on code coverage. I propose then let's go ahead and call it a close for today and we will, we'll meet again we won't meet in two weeks because that collides directly with with DevOps world. But we will meet again regular schedule I believe would now be four or six weeks from now is that right really. I think six weeks. So six weeks out because we meet once a month. We would of course meet October two, not as you exit but as part of the contributor summit. That's fine. Great. All right. Thanks everybody. Thank you very very much I'll post the recording. It may be a while I'm badly behind on posting recordings. Thanks everybody. Okay, bye.