Jenkins User Experience Special Interest Group, 25 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Hands On: Beautify the UI of Jenkins reporter plugins

Description

In order to improve the look and feel of reporter plugins (like JUnit, Code Coverage, Static Analysis, etc.) it makes sense to use some modern JavaScript libraries and components. This presentation by Ullrich Hafner introduces a few new UI components that can be used by plugin authors to provide a rich user interface for reports in Jenkins.

The following new components are shown in the session:
* bootstrap4-api-plugin: Bootstrap is the world’s most popular front-end component library to build responsive, mobile-first projects on the web.
* data-tables-api-plugin: DataTables is a highly flexible tool, built upon the foundations of progressive enhancement, that adds a lot of features to any HTML table.
* echarts-api-plugin: ECharts is an open-sourced JavaScript visualization tool to create intuitive, interactive, and highly-customizable charts.
* font-awesome-api-plugin: Font Awesome has vector icons and social logos, it is the web’s most popular icon set and toolkit with currently more than 1,500 free icons.

Links:
* Blogpost: https://www.jenkins.io/blog/2020/03/17/ui-plugins/
* Hackfest page: https://www.jenkins.io/events/online-hackfest/2020-uiux/
* Meetup page: https://www.meetup.com/Jenkins-online-meetup/events/270767392/

A

Okay, we are live uh so welcome uh to the jenkins developer meetup session. uh We have urea huffner, uh who will present how to beautify uh the user interface of your jenkins, plugins and specifically about a useless user interface of reported plugins.

A

So only the floor is yours.

B

Okay, so thank you. um Okay, oleg already introduced me. My name is uli. I'm the author of the warnings plugin, I'm yeah. That's, I think, I'm a really long time contributor to jenkins I'm. I think I'm active more than 12 years now, and one of my plugins I've created in jenkins is the warnings plugin so just to get an impression. uh I've shared my screen. This is the warnings plugin and today I will not focus on the plugin itself.

B

I will show you how you can use the components you are seeing here in your own plugins or if you are not an owner of a plugin, maybe you can use one of these components to enhance any other plug-in with a pull request, for instance.

B

So, um what's the content of the plug-ins you see, there is a they look a little bit different than the rest of the jenkins plugins, and I would like to show you how you can use these components in your plugins.

B

So, um to begin with, the warnings plug-in started here in with this new user interface by a bachelor thesis, uh one of my students converted the old static analysis toolkit into a new plugin, which used a lot of new javascript libraries.

B

What I have done in the last couple of months is to split these ui components into several other plugins, and here is a small yeah component diagram, so you can see it the warnings plug-in or it started, with everything in the warnings plug-in. But now I separated all these screen extra components, so these components can now be used by other plugins as well. So we have e charts data tables, jquery, etc.

B

I will introduce all these new components now in the next few minutes, so um this components are basically all javascript components and, for instance, I'll start with font asm. This is a not really a library for java scripting, it's just a library for icons. So when I develop my plugins, I already noted uh I need an icon for some visualization and the jenkins icons we have. There was a very limited.

B

I think we only have about 50 icons and if you want to use some different icons, you need to get these icons somewhere and rather than copying all these icons into a plugin. I think it would make more sense to reuse these icons for font awesome. For instance, we are currently exploring on the user interface group. Another icon set the good google material icons, so I think both icon sets can be used to improve the look and feel of jenkins.

B

So if you need a new icon, for instance, you just use the search box and yeah, for instance, if you want a user, I can you just search for user, and then you see, we need to press the free button, the all these icons you can use in your interface in order to use these icons in your interface, and this is the the same for all the components I will show you today.

B

You have um your counterpart jenkins plugin. This is the font asm jenkins plugin, which includes all these icons for you. So, in order to use these icons in jenkins, you don't need to download the javascript library or the sprites or the png icons. You just have a reference to the new font, awesome jenkins, plugin, and then you can reuse these icons with a single code.

B

So all the plugins I'm showing today are just quite similar. We have a small documentation on the plugin page, so this is the github plugin page for the font, asm api plugin, and you will find here some examples what you can do with the plugin and some yeah usage guidelines so for fonts and these icons. The usage guideline is quite simple. uh What we need is a a dependency to this new library in the jenkins pom.

B

You need to add this dependency and in order to use such an icon, you just need a jelly tag where you can use, for instance, this icon in your jelly fuse.

B

I will show you some more details on how to use these plugins later on. So, first of all, just to get the impression what different kind of plugins are available, so the font asm plugin, is yeah. Just simply just provides fonts.

C

So really yeah is there a catalog, then of the font. Awesome icons that are available inside the the plugin is that what you're seeing here.

B

Yeah, no, this isn't just a subset. We have. uh The catalog is available online on the fontaison site. So so all the things.

C

In the free set here are included in the jenkins plugin.

B

B

1588, so even for you can search for cobit and you find some new icons if you need to use them. So it's really a lot of icons, so there are also some vendor icons like so github, and so this is really nice, because normally you have a little bit problems with licensing, and so this is a free font which can be used by open source projects and yeah.

B

I used a lot of these icons in my plugin, because yeah developing icons is quite hard and it's better.

A

B

Some to choose from so this is the simplest component. It has no logic in it. Just some icons. um The next component I would like to show is a more complex component. This is the charting library I'm using to display trend charts. This charting library is also only in javascript.

B

That means everything is rendered on the client side, the size and currently in jenkins, all charts are rendered on the master node, which is some kind of heavy uh because yeah, if you have a large project and a lot of client requests to the master, then it's really hard that the master needs to deliver all these png images.

B

With this library you yeah, of course, we need the master as well to at least get the data from it, but the rendering, if it's in small images or large images, is all done on the client side using this javascript library, the number of charts is enormous, so just give you an impression, you can have everything what you want.

B

um What I'm using currently is the pie chart a donut chart and some line charts but they're a student of mine used some kind of scattered charts, so there are all possibilities you can use.

B

So this is the library I'm using, and this library is also provided by a companion plugin. This is the e-charts api plug-in, and this this plug-in is quite similar to the yeah. The font asm plug-in it's just it bundles the javascripting library, and it adds some more additional classes to yeah to write charts within java.

B

So um maybe it would be it's a little bit clearer if we switch one moment to the architecture of jenkins. So uh jenkins is on the left side here, the server side we are running in chatty.

B

Most users are running in chatty, so we have somehow jenkins core and a lot of other plugins and the warnings plugin is running within jenkins.

B

And now, if you want to show charts uh within uh jenkins, you need this e-charts api plug-in, which is deployed on jenkins server side, and when you deploy this plug-in, you also get the counterpart on the client side on your laptop. That means you're. In a browser in chrome or in firefox, it doesn't matter, then you get these javascripting libraries and what you also get. This is not shown here. You get a kind of data model within java.

B

That means you don't need to create charts using some javascript things or just the json model you can have charts rendered within java. This is, I will show later in the demo, so with e-charts. I think everything you need when you want to draw charts is available here, so it's really powerful.

B

I also think it's quite uh impressive. For instance, we have here a chart where you have to zoom. This is nothing you need to uh program on your own. You just can use it it's built in.

B

We have the possibility, for instance, to toggle by date, where you see the build results are now shown not on the build number. Rather on the date you achieve warnings or not so it's kind of flexible these tools and yeah. If you need some other charts, for instance, here you can simply switch a line chart or a new versus fixed warnings chart. So there are a lot of different options available if you use this echart's library.

B

The next uh component, with with with uh I also introduced, is um bootstrap. I think jenkins, uh already includes bootstrap at least some parts of it, a bootstrap three. What I'm using now is bootstrap 4 and I think, within the next couple of weeks, bootstrap 5 is arriving.

B

So this is a really big and large component library to create uh yeah nice javascripting, your user interfaces. So what I'm using is not so many details up to now, but just to show you a little bit uh things what you can do. There are a lot of components one can use, so we have, for instance, a carousel watch, I'm using um where you can switch between the slides. You can have a drop downs, etc. There are really many features that you can use.

B

I must say I I don't use so many features up to now it. So what I'm using is cards so to present results a little bit in you know some nicer user interface. Let's see the example, so these things you see the severities distribution or the reverence comparison. These are cards which have a nice border and yeah.

B

What we also have is these caruses here, where you can switch between different things. This is also provided by bootstrap and there are many, many other things. Actually I'm not aware already. So there are so many things you can reuse if you use this component, so you.

C

Did not have to create explicit code to do the complicated switching that happens in that carousel. It's all bootstrap for you, yeah! That's.

B

True, everything is annotated with diffs, where you have some ids and you bootstrap is already doing the switching for you.

B

In order to use bootstrap, it's the same again, you need my plugin, the corresponding bootstrap for jenkins plug-in, and this plug-in basically provides you. The java scripting part, the css part and the model which is behind some of these components.

B

One thing what is quite interesting for bootstrap: it is already uh providing two very important things when you design new user interfaces. So one thing is: it provides a layout grid um in jenkins. We already use bootstrap 3 grid and yeah, I'm using the same thing with bootstrap 4., and it looks a bit boring, maybe here, but the grid just divides the screen into 12 columns and with this grid you can place any component within the script by saying, okay, it should be here in position.

B

For instance, you can say: okay, the first six columns should be filled by this content and the next six columns should be filled by this, so you can basically create. I showed you in the example to say: okay, this is, I think, it's four columns. This is four columns, and this is eight columns, and this block on the bottom is all 12 columns. So you can create different user interfaces using the script and it works here quite easily.

B

So maybe you can have a look at another example. This is uh another plug-in I'm using in my uh during my university courses to automatically grade a student assignments. So when the students fill up their solutions, they get a score from me, which counts the number of failed unit tests. The code coverage, the pit mutation coverage and static analysis results, and these five boxes are also distributed with the bootstrap grid and bootstrap even is it's, I'm not sure. If it's now visible, if I switch the screen, do we see still the chrome browser? Okay, fine?

B

So what you see the layout automatically changes and what you have with bootstrap? You can define different layouts for different screen resolutions, for instance, when you make the screen smaller, I'm not sure how you suddenly see a totally new view arrives, and this is uh that my screen's resolution is now. I don't know about 1500 pixels, and then you can choose different user interfaces regarding the size of the screen, so it makes things quite easily to be seen on tablets or on even on mobile phones.

B

The problem is the rest of jenkins. Is not that aware of mobile phones yet so it's not so helpful if only one page works like that, but I think in the future we can use these components more easily. For all other jenkins plugins as well.

A

And that's why we have such hectares. Yes, we can improve the situation. A lot.

C

Yeah that would feel really nice, so bootstrap did the you. You did the definitional part. I wanted to change from this to this style, but bootstrap handled the fact that that needed to occur and all the code complexity inside of it yeah.

B

Yeah, that means everything um I think I I will show it later on uh how it looks in in the jelly file so uh yeah, then we can have a look, uh how you can change that later on.

C

I you you just you just use the sort of a jenkins keyword there, so this is. This is actually expressed in the jelly files. This is expressed in the jenkins ui expressions not having to code separate javascript, I'm not I'm not using some.

B

You don't need any javascript for bootstrap excellent, thank you and we will see it later on. If I show some details on how to code it.

B

So let's see bootstrap yeah a lot of components. uh The last component, I think, which is also quite helpful, at least for my plugin, the warnings plugin, I'm showing a lot of tabular data and the jenkins tables are, let's say, quite limited.

B

So what was very helpful to use this data tables component and this component? It provides pagination search ordering a lot of different things, I'm not using everything yet, but just also switch to the plugin to see what you can do you have. You can switch between the number of entries and see only 10 entries, so you can search by text. Okay, there's nothing with errors.

B

Maybe, let's search for something different, so you see you if you can search, it is automatically adapting the table content while sorting- and this is something jenkins also has, but you can also uh call ups and expand a table column. So it's quite impressive. What this thing is can do for you and actually yeah you, you don't need to write javascript. The plugin will also uh assist you with that part.

B

So what we basically do is we need to write a model for this, but this is something I will show you in the source code now.

B

So these are the four main components on which I'm using in my plugins. That means the charting library, the bootstrap for the layout and the tables for showing such tables. One component I haven't extracted yet so just to have a look at this. What I'm also using is prism to render the source code um yeah. This is on my agenda to extract it from the warnings plugin.

B

So it would be helpful if all of our plugins would use the same component here like code coverage or mutation coverage or yeah, even the workspace navigator in jenkins, where you can open the source files. It would be helpful if you could use this library to render the source code.

C

And it looks like prism is uh language language aware, so it would highlight java correctly.

B

Yeah, of course, and you have different themes, so yeah everything works out of the box as well. Here it's already included in the warnings plug-in and um yeah, but I still need to have some work to extract it, so everybody can use it and yeah that's. The reason is because it's not only the javascript, which is important. I think I think what also is quite important. Is the java model behind it.

B

So um all these plugins that I'm using in the warnings plugin I have enhanced them with something which I call a model or a java model behind it. So I'm not sure if everybody is familiar with swing, I think swing was one of the first components in java or user interface, components which split the user interface from the model.

B

So we have the user interface part and on the other side we have a java model, which does nothing now about the user interface, and I'm also trying to use that part so that every chart is using a java model, and you are just writing code in java and the user interface will show this model automatically. So you don't need to program anything different than java, so no javascript is needed for the charts and the same is for the tables.

B

I've created a java table model class for jenkins, where you can implement these rows and columns, and then everything is automatically rendered in this javascripting library and you just need to fill in the java code and know javascript.

B

So this is yeah, maybe the introduction, uh and now I would like to show some details in the code on so we see how is everything working so the first thing I want to show you is: uh let's show on this screen. uh This is a top view of uh yeah a job, and here you see the number of builds and on the right side yeah.

B

This is one thing, one of the pain points in jenkins, so many so many space and all charts are here on the right side and what I would like to show you is how you can create these charts with e-charts, and in order to do so, I need to go to intellij and I'll switch to the.

B

Okay, so favorite, so I need to rearrange my screen a little bit. So hopefully everybody can see the text, um so I want to start with trend charts if you are writing a floating box. So it's a little bit know how is required to follow this uh session.

B

um In order to write a trend chart on the project page, you need to write a floating box, dot jelly file and in order to show a trend chart in it now you only need to provide one line of code within jelly. At least this line of code says okay, I want to write a trend, chart and yeah. This trend chart is.

B

Defined in my charting plug-in, which basically does the diffs that are required to those to show the trend, so this diff here is actually the trend that is rendered by e-charts and in order to show the chart, we need some javascript. But this is nothing you need to program. This is already provided for you. That means the only thing what you need to provide is the trend model.

B

That means on the java side, of course, somehow the data needs to arrive, and this trend model is a method within your class that shows this chart that needs to return the model, and this chart is kind of easy to create that things. So typically, we have, let's say a job action, this project action in within jenkins, so I just switched to tank inspect these.

B

uh These charts are basically the result of a job action and in order to follow it- and maybe I show you a one class diagram- so this one here- so it's a little bit easier to understand.

B

So in jenkins, we have a job and a job has a build or a run, and each run contains a set of actions and the same structure we have in a plug-in. So we have a job action which renders a job and we have a build action which renders the build and each build action contains the build results for one build for the git plug-in. We have the commits for the warnings plug-in. We have the warnings and for the code coverage plug-in, we have the coverage results.

B

So this is the structure we need and for this job action we actually generate the chart graph and in order to generate the graph, we need.

B

To implement one method- and this is the lines chart, model method and yeah- I can show you some details- how this looks like, um maybe it's easier to see how such a chart is generated. So this is uh sorry. This is a pie, chart wrong.

A

B

So, let's show, let's show you uh an action that shows some information about the git commits in your job and in order to create such a chart, you need to create somehow in java the trend chart. So I think I can show you the implementation, because it's quite simple, I think the details within one hour. It's really hard to show all the details just to give you an impression. So in order to create a chart, we need to define the axis labels.

B

We need to define the build numbers that are available and then we need to create some kind of a series which contains all the points we want to show, and this is everything you need to write in java. So, in order to create such charts, you need to write one yeah chart java class and what you also need is one, uh let's say, a serious data where you can say. I want one class that plots one point in my chart, so maybe we show, I show you it's on the screen.

B

So, in order to plot here we have two points on build 59, and here we have also two for the build 50. That means I need a class that has as input the build number and the build result from the warnings plug-in and it needs to produce two values, and here the values are yeah, 10 or 8. Let's say six for low warnings and two normal warnings, so everything you can encode in java.

B

That means you have this line series where you create all these lines that are visible and you need to plot every point here. So I think it's a little bit hard to describe here without going into detail.

B

So I think, if you're interested in writing, charts, you need to go afterwards into the source code and yeah write your chart on your own. um The important or, what's quite uh helpful, is everything in these charts. um Let's show you in more detail: are you sorry the wrong screen so yeah?

B

um Let's show um these charts, let me navigate to the source.

B

So here are all my charts, um for instance, to show a new versus fixed warnings where you see how many new warnings you have in a build and how many fixed warnings you have to build. You need a new versus fixed builder, and this builder is quite simple.

B

It just has a couple of lines, so the input is a build result in in this case. This is the build result of the static analysis result. If you are plotting something unit tests, you have a unit test result or if you are plotting um something different. You have a different instance here, because it's generalized here and what I just want to compute is: I have one series for the new warnings and one series for the fixed warning, so I just have two points and I will get automatically invoked by my framework.

B

So the only thing what you need to provide is such a class that basically plots two points in the chart and what my plugin does. It calls you for every build where there are revised results available and creates the aggregation as a chart.

B

So um I'm also using this library in my testing courses in university, so I think it takes a little bit to understand everything and to see how you can plot these charts. But I think if you get the point, it's quite simple, but of course there still is a lot of uh abstraction in it. So you need to have a little bit details. You need to look into until you understand everything.

B

So in order to use this chart, this was the beginning of the talk. uh You need to add this thing in the floating box, where you need to define the user interface, and the second thing you need to do is to provide the java model behind these charts.

B

So I think, basically, all charts are quite similar. The pie charts are much simpler because a pie chart just contains here a couple of values which are shown in a in a circle. So, in order to create a pie chart you don't need to have a series you just have. For instance, here we have a pie chart where you show. Let's also show it on the example where we have the new warnings.

B

Sorry, the red ones are the new warnings and the yellow ones are the outstanding warnings and fixed warnings are not available here. In order to create these this chart, you need to create such a class that has three points or points or data models where we have the message which is shown in user interface and the value which is shown to create the number and everything else is automatically rendered here by the plugin, so the tooltip.

B

uh What you see here is what is here in the new warnings, short message, so pie, charts or line charts are quite easily to create and what you also have. Maybe you can see it here?

B

Let's see you can also create tests for it. It's also quite simple: now, if you have it all in java, you have no java scripting, which you see so everything you can write. uh You can also create a tests for and that helps to yeah improve the quality of your plugin as well.

B

So this is the charting part.

B

So I'm not sure if there are questions, I would show you some other details, for instance the bootstrap part. So what to do so.

C

So I'm just a little incredulous. Forgive I'm used to thinking that if I'm going to get a pretty user interface, it's going to have javascript and a pretty user interface with javascript means it's almost untestable to me as a java programmer. But you just said that I, as a java programmer, can use these components and deal with them in java and it will. It will abstract away from me having to worry about checking all the the details of how the javascript behaves etc. That's that's covered that's covered.

B

Yeah excellent, so you can, if you have want to have a look at the plug-in itself, so I never. If you have, you can have a look at the warnings uh plug-in and there is also uh the code coverage link and you can go into details, and then you have this. um Let's say this charging component, where you see everything what which is rendered in the charts is almost by 100 uh card code coverage and the only thing which is not tested uh is the javascript part which is given by the framework.

B

So this is something a plugin author does not need to look at, so you can focus on the model and everything else should be done by the framework. For you, that's excellent. Thank you.

B

So let's go back to some uh a different user interfaces, so one thing we talked in the beginning was uh on how to uh arrange everything on the screen with bootstrap, and I show you how you can do it here in yeah in one uh layout and first of all, I show it the screen in so in order to create this screen.

B

I think I need to in order to create this screen. uh You need to provide a jelly file that renders this screen, so the corresponding uh jelly file for this screen uh is shown here and in uh in order to use bootstrap grid. You need to provide your whole user interface in such kind of a fluid container which is driven by classes.

B

So you don't need to program anything you just say: okay, my whole screen is uh within this container and then you can say normally you can click it here, maybe not in the presentation mode. um This is, for instance, is the first row here. That means these five components are within one row, so we can define this row here. That means everything is in one row and then we have it's a little bit complex.

B

We have another row and so on, so you can first of all divide the screen into rows and bootstrap will arrange these rows. You can define the the gap between the rows, so maybe it's helpful. Let me show show you in the real screen so.

B

So this is this thing which is rendered afterwards, so there is no yeah way to make the font here bigger. But I can just change these values here, so you can get a bitter, more yeah, a better padding, for instance. So let's yeah it's a little bit too big, but so you can everything uh change just by classes here and what you also define here is.

B

I want to show the next row in within 12 columns, for instance, and I go back to the so what you show I want to show you you can show it in 12, columns or and now you can create different uh settings for different screen layout sizes.

B

So if you want to show it on an l screen- and this is what we see now- the this box is 12 columns, big and if I scale it back one smaller.

B

I am in the xl thing, and now it means okay, I want to all columns should be equal sized and you can have totally different things. So, for instance, you have here. Okay, I want to have six columns if it's a medium display large display six columns and so on. You have a really great flexibility to change the layout. You need in your screen.

B

You even have the chance to totally show different things. So, as you've seen here, I've shown five individual charts if the screen is large enough. But if you are on a smaller screen, it's just one thing you see or another example for the warnings plug-in so here, for instance, we have this uh accordion or this caruso.

B

But if I make the screen normal look on my screen, then we have two charts which are shown side by side. So there you have a lot of possibilities, and I must admit that I am using just two different ones personally on my laptop I'm using a different resolution than when I'm using my monitor, so the warnings plug-in currently is optimized for these two devices.

B

So if you would like to provide a pull request for your screen resolution, please go ahead, and this is one perfect idea for this week to provide a pull request, just to provide a different user interface for different screen resolutions.

B

So I don't know how it looks if you look it on a ipad, for instance, maybe it would make sense to hide this chart altogether. I don't know so. These are things you have in your hand, and this is really the hard work, because normally you need I'm just a single developer, but yeah, I'm not sure how cloudbees is doing this, but normally you need a lot of different displays and need to adapt the screen to different displays. So this is really tough work and a lot of work to do.

C

Yeah, I'm thinking about my chromebook, that is a 13-inch screen and tiny and limited by boundaries in all sorts of ways. Thank you yeah, so so, and and you're interested in different proposals for layouts for those varying geometries.

B

So this is uh yes, a small part of what you can do with bootstrap. um I already said that I'm using just, I don't know five percent of bootstrap, so one thing I'm using is these cards and these cards.

B

I already provided a tag intelli for you, so if you want to show something in a card where you have a title and a chart, a font, a sum icon here on the right and something in the middle, then you can use this bootstrap card tag where you have the title and the icon and everything else is shown automatically for you. So there's no code involved just one new tag that you need to do here, also to create such progress.

B

Charts here, not here sorry on the out here in order to create these charts. You just have one tag here where everything else is already done for you. So I think for months, for these things that I'm using from bootstrap and from the charting library there is a java model available, but for all other things you need to provide the model first. So if you don't use the same charts, you need to have some extra work, but the idea is to yeah to include even more charts if they are required to so yeah.

B

It is an ongoing project, of course,.

B

So um the last thing I think would make sense to to show a little bit is how the the tables are working so um tables. uh You have basically two ways to show tables. The first way is uh the yeah. Let's say old school jenkins way you create tables using diffs and spans and yeah sorry. This is the wrong thing.

B

Let me yeah sorry, I was in the wrong file, so the normal way or the the the old school in jenkins is to create a table ahead, and then we have some kind of for each loop where you can create with telly these tables.

B

I'm using this approach as well, and this approach works also with with the data tables component. That means these tables here they are all created using jelly files, no data, yet javascript is well required.

B

So the only thing is at the bottom yeah one call is actually is required, it's not really hard, but you need to create this data table. So this is the only javascript code you need to call, and then this plain old html table will automatically be converted into a data table.

B

So the result, if we let's say the fixed warnings, yeah not here wrong, one.

B

Let's see where we have some fixed warnings.

B

So here we have a lot of fixed warnings. That means build.

B

64. and here we have a lot of fixed warnings and if we select the fixed warnings.

B

You see this table and this is uh the data table and it is written in plain html, so I have nothing or the only javascript. Is this part here at the bottom and it is just required so that the data or the data tables library can take this table and enhance it.

B

So everything with searching if you search for this is everything out of the box given for you and you don't have to do anything else, you simply can create your tables in your in the way you did before and just use this kind of thing as a kind of decorator and everything else will be done automatically for you.

B

So this is uh one way you can use it and the other way you can use it. You can use a java model behind it. This is how I am using it for the rest of the tables, so these tables you see here these are built with a java model behind it, and the model you see here is.

B

You need to derive from this details, table model which is adapted from the swing table models and what you basically need to provide is an id, so you we find it in the screen and we need to define the columns so which kind of columns do you have. For instance, we have file column packages and severities and the h column. So this is for every column you, we have some kind of column, definition where we say which is the ordering. uh What is the content, etc?

B

That means this is thing we need to provide, and then we need to provide the rows as data and each row is given by a java object. So here issues, row and these rows are quite of primitive yeah. It's kind of your data transfer object, so you have here package name, category type and severity, which is everything you see here in this row.

B

So in order to create a table model, you need to write simply such a java class, which returns a list of these objects.

B

So the list is done in the base class for you. So, just you need one row which has a selection here, the issue you want to show if you want to show some other data, you need to provide this information here in the in the constructor.

B

So, basically, in order to provide or to show a table, just create this table model with the column definition and with the rows which returns the results.

B

It has also an advantage that you can test everything, so you can provide or create the model using uh unit tests. So everything you show in the user interface is perfectly tested. If you use it this way.

B

So you see, if you have some complex data, you can use a data model behind it, but you still, if you like, can create jelly fuse in the old school way where you mix model and user interface using for each in the jelly file. I don't like this approach because it mixes the user interface with the model but yeah.

B

So these were all these components I wanted to show. Now we have all four components seen so yeah. Are there any additional questions I need to answer.

B

I know it's a lot of heavy stuff and you actually will notice the details only if you really program it in your own plugin, so I'm open for questions afterwards via the chat or will the mailing list or get a channel. um So are there any questions? I can answer.

A

Now uh known for me, uh so I wanted to talk a bit about uh using javascript for jenkins configuration pages, so it was out of scope for this presentation. But if someone is interested, we could just have another session later this week and yeah thanks julie for the great presentation, because there is a lot of techniques we could definitely adopt in jenkins, plugins and maybe even in the jenkins core, though yeah jenkins code is a bit challenging, but yeah.

B

C

So you've prompted newly. I need to explore further that scm, forensics and scm blames, because a certain plug-in that I deal with might benefit significantly from these. Some of these tabular views that you've done there. The the ability to do sorting and subsetting searching narrowing looks very, very attractive.

B

Yeah one of my students developed a plugin to to create forensics from git to see how, because I want to see where, if you want to look at warnings, you want to have look at your files that have a lot of authors and a lot of commits. So you can search by author or sort by author sort by commits, for instance, and this is yeah ongoing research. Let's say.

B

But it currently works only for git. So no, but I don't know if anybody is using a different version- control system in the moment.

A

Yes, they do well. Many systems have bridge methods for git integration yeah. So we are slowly running out of time because we have another session, starting just in three minutes. Okay, I suggest uh to close it down and continue in the chat. Okay. So thanks again to ali for great demo,.

C

Yeah thanks for following me, thank you very much julie that was wonderful.

B

Yeah good to see you, okay, bye,.

A

Bye see you later bye.