Jenkins User Experience Special Interest Group, 27 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Jenkins UX SIG Meeting 27 Oct 2021

Description

Jenkins user experience special interest group from Oct 27, 2021. Includes a discussion of color definition and how to transmit the color definitions between the Javascript on the front end and the Java code on the back end, and a demonstration of the user interface improvements that Jan Faracik has made and is proposing as part of current pull requests.

01:15 - Color definitions and communicating colors between front end and back end - Ullrich Hafner
13:22 - User interface improvements demonstration - Jan Faracik

A

Okay, welcome it's. This is the jenkins documentation, or this is jenkins user experience. Special interest group we've got attending today, julie, hoffner, felix tim, jacob alex. I apologize. I regularly misspell your last name, so I I omitted it for now. I'll put it in later, when I get it correct, it's okay, uh oh good and we've got patty mcclatchy, it looks like so proposed. Agenda was colors in jenkins with uli, um and then I had recent ui improvements in core. uh If we're lucky john faracich will join us and then we'll we'll.

A

Let him talk to it instead and pending ui improvements so or tim. If you'd like to talk to those topics, are there other topics you'd like to put on the agenda before we start working through the agenda.

A

Okay, great, then, let's, then, let's go ahead and so wooly is there anything you want to share, or is this more of a discussion topic that you'd like.

B

It's more of a kind of discussion topic, so I think the only things we can share are the links that I put on the agenda. So I think the background is um basically this pull request, where I should make a review- and this remembered me that I had in my plugins a similar problem.

B

That means we have some colors and we need these colors in the server side on the java side, and we have the ui side where we have a lot of colors as well, and I wondered how we can get these colors in sync, so that we have the same colors on the javascript side and the same colors on the server side.

B

This is one thing, and the other thing is that we and that these colors should not be fixed in the way, because we have a dark theme and I had what is the difference. Other a light stream and these colors should be look different on both themes. So I I'm wondering how we can, in the future, discuss this things a little bit more, that we have colors that look good for both kind of themes.

B

So this is basically the topic uh I wanted to discuss a little bit, so I think it's quite easy. On the on the client side we can use. You know these new variables in css, but I'm not sure how we can use these colors in charts as well and how we can use these colors in our site. So this is more yeah a question. I'm not sure how to say. If someone has an idea how we can put it all together that it works both on the client and on the server side.

B

C

I would say avoid it as much as we can, but again there are some things that are generated server side, um but it's moving to client side, a better fix in general yeah, which has been kind of always been kind of what we've been doing.

A

So so tim to to be clear on that, so your idea is to avoid color definition on the server side as much as possible.

C

Yeah, the other way is another way is to pass it from the client side to the server side, which was a suggestion by daniel beck for fixing some of the theming issues.

C

So past the resolved value for the colors somehow down to the server as query parameters or something.

D

A

So are there cases where, where that technique is infeasible or would not work, are there places where we'd say? Hey can't do that.

C

I'm sure all of it could be moved to the client side. It's just a matter of time and also that some of these graphs are bundled in core and core doesn't have things like e-charts at the moment.

A

Okay, so some of the graphs then would need to be split from core.

C

Either split from core or bundle e charts in core.

A

C

um Whether it's a probably bundled in a self-contained way just for those pages and not as a library for everyone, I would assume.

B

And one thing for the charts: if we're using e-charts in the client side, several parts of such a chart is still produced in the server side in the java model site in in java. So currently I'm using charts, but some values of the model are still produced on the server side.

B

For instance, I'm for the code coverage view I'm rendering the percentage of the your code coverage in green, different green levels- and this is currently done on the server side, because yeah and I'm not sure if this makes sense to put everything on the client side, because then we need to create these models on the client side as well so yeah, which means that we need to write a lot of more javascripting code and yeah, which is yeah. It's not com, yeah, it's a kind of different way to create new views in jenkins.

B

I'm not sure if we're gonna walk this way.

E

I have a maybe a silly question, but is it seen as a bad thing in jenkins to move it to the client side and use javascript.

B

Yeah, I don't think that it's a bad thing so.

B

The problem is, I think, most of our developers are java developers and the tooling for java is always more major with respect to testing code coverage etc on the java side and not on the java scripting site. So.

C

B

Is why everybody's using java and not javascript, which is let's say, some kind of evil language for me?.

E

Understandable.

A

So is there a, is there a? How do we? How do we approach that or prototype it is? It is code coverage the example we could use to test drive that or is there another place where we could test these ideas about moving more and more client side, more and more color definition to client side.

B

I'm not sure I think we have these references below. uh There are all links which are yeah somewhat uh relevant, so, for instance, we have in the cheer unit plugin.

B

This is a trench, a little bit lower where we have where I changed the color from blue to green, and this is currently under the server's server side, but this could be easily on this client side. This is not really a problem.

B

But um I think the problem is a little bit bigger because, typically, if you have you have colorblind problems, so some body does not see a difference between red and green, so we need to make these colors changeable in a way. So I think rendering on the client side is just one point, and the other point is: how do we provide a way to customize these colors.

B

And maybe one step further, which colors should we use at all? So we need a kind of semantic model of colors which we don't have yet so we started with a color palette, but a color palette does not make sense in my way where we use it. So we have colors with semantics with failed stage with successful or with a coverage of 50 or 70, and this is not handled by a color palette.

B

So a color palette is a kind of a generic thing when you're working with excel or something like that that you want to a nice chart, but not a chart with semantics in it.

B

Felix you have a question.

F

Yeah I mean I was just going to be, I'm asking to be a bit pragmatic and imagine we don't need to to leave the japan world and we just say that maybe color specific, look and feel for themes is not that important for charts and stuff.

F

Maybe the the short term solution, and maybe it's acceptable or long term could be to just say. Okay, we have a specific endorsed, set the finest constants in jenkins core for light versions of graphs and then another set of colors for dark versions. And then we start with that and then see how that solves.

F

It will not work for all light themes and it will not work for all dark themes, but should we work for the at least the two defaults, and I think, uh and I think that would be viable, maybe that plugins could reach out to those. I don't know, I'm just throwing an idea out there.

F

Choosing the colors- I don't I I don't have an opinion on that. We, the cement and about the semantics we do have. uh We do have a success on colors with semantics. It may not be the most color blind. It will not result in the most colorblind friendly chart, though.

F

I have nothing else to contribute to the discussion. Okay,.

A

So so it feels like there's more to be discussed there. I I've, I think we may have hit the point where we need uli and others to have conversations possibly patty and others about hey. How would we approach this further uh felix? I know you had to drop off at half past and I wanted to be sure we got to to jan's topic. Julie. Are you okay? If we pause this discussion for now, that's.

B

Fine, I just want to make us aware of the problem and we need to continuously improve that one.

A

Fine, thank you thanks. So so I assume that the that what tim mentioned of daniel's suggestions there's a conversation going on out in a public forum somewhere about the possibilities here, and we can continue in that location.

B

Yes, that's a good idea, maybe it's helpful. I started a thread on the community. Then we can link each other in there.

A

That sounds like a great idea.

A

Excellent. Thank you.

A

So the next topic that we put on the agenda was recent ui improvements and john. Maybe I don't know if you want to share a screen or if you want to just talk about it or or how you'd like to approach it.

A

Maybe you could give us some highlights what your, what your, what your vision is and how it's, how it's evolving, etc sure um hi everyone.

D

um My first time here so just kind of bearings um happy to share my screen. If that's all right, uh all right.

D

Can everyone see my desktop? Yes, thank you sweet, um so what I've done at the moment, I've made a kind of vertical slice wherever I've been working on jenkins, so every kind of test branch I've made I've kind of chucked into one massive branch. um So it's got all the changes, I'm kind of eventually going to propose and the ones I have proposed already. um So it's it's not finished and it's it's definitely going to be a little bit buggy. um But but this is it really so you've got the table there.

D

um You've got a kind of new kind of format of buttons and which I pulled out of the forms merge request. um Just so I can have one merge request focused on updating the buttons and hopefully killing off the the ui buttons as much as possible.

D

um So done a fair bit of work, there kind of killing off the the make button javascript stuff that was really kind of gnarly.

D

um We also done a fair bit of work, just trying to kind of separate the bits that we can't kind of pull out to see. If that makes sense, um so I go to manage ui. um There's. There's bits like the uh segment administrative monitors uh button or if you click it, that's still reliant on you who you are, um but everyday buttons have been detached fully.

D

um So I guess I should start from the beginning really anyway. um This is the table for those that haven't seen it um it's kind of built from the scratch um over the ground up really um a little bit more modern than the old table.

D

um Just minimize that um one of the things that it does kind of do is use for new icons. um So I mentioned these ion icons, um so it's a new kind of slim icon for jenkins.

D

um That's that the buttons there we've got new tabs, um but they don't really look like tabs they're kind of more of a switcher kind of format. So, let's see how that kind of plays out. um If we go to the new forms, um this branch has kind of the renewal forms. Changes that haven't been pushed.

D

Sorry put your hand up.

C

F

Yeah, so about the icons quick question: um did you grade the size of the library and did you intend of replacing the material icons fully.

D

That would be the plan yet to replace them. um Eventually um I mean it's not. I think material icons are too crazily used on jenkins from what I've seen. um So it shouldn't be a massive job. I don't think no.

F

uh We are using very little material icons. Suddenly we cannot remove them and remove them uh for context. The icons we did was were at first and then angry, and then uh google pulled the rag under us and removed the material sprites.

F

uh So that's an issue, uh but I mean it should be rather easy to locate which plugins are using the material icons and update them. um No.

C

I don't think so.

F

And yeah: well I mean we can just leave them for compatibility, but I I do support just having a comprehensive set of icons. uh I was reluctant to uh to work with bootstrap icons because they I they they were so it was huge. The icon front, it was huge and jenkins already has like a what four megabyte five megabyte from asset payload. uh If the iconic fund weights another 600k on top of it, it may not be that good. But yes, if the size is reasonable. I think it's great.

F

I just wanted to comment that on the icons no.

D

I'm not too sure how large the icon set is right now um I'll need to check that, um but right now the way it works is uh we have a tag to load the svg, and then that gets cached um in just like a uh hashmap on jenkins.

F

D

Just for constantly not loading the file.

F

Okay, I I I will dig it up. I will look deeper into the pr uh and to see how the how do you surf this to see? If I can see and yeah, I will look at the tables here, a bit more. Let's go.

D

um So this is the kind of continuation of the forms. um Pr, so we've got pretty about 90 of the forms elements um kind of changed over now, so the text area is done and the select box is done.

D

um The check box is what the check boxes. Yeah check boxes are also done now, so they kind of animate like so. um Some selects are custom, um so can't touch those annoyingly.

F

If you end up looking into what I suggested about looking into the uh setting input class modifying that one directly, uh I haven't no, I'm interrupting that yeah yeah. I would just just look into that. Maybe expand it with the css variables, because that.

C

F

Everywhere um I just yeah, yes, was I suggesting even on.

C

F

Stuff, it's used, except on the change, password fields.

F

So the changes I see in the buttons were those done by theming purely oh yeah. These are just.

D

uh That they're new buttons, sorry new versions, yeah.

F

Okay, but I mean those are existing yahoo ui classes, but with the just the css variables changed, they'll be new classes.

D

So all I've done is just done a command f just to go over the old buttons. um When I was thinking of having like a javascript, um let's go javascript file just to change over any uh existing buttons on page mode.

F

Okay, uh I I I would suggest you verify that with the, for example, with drop downs, because I mess up with yahoo ui stuff in interruptions. Yeah.

D

D

um There was a drop down on this page that I've been playing with. I just lost it uh here. We.

F

Go downs still.

D

F

Yeah, it's for example there it's missing the the arrow, for example. So I think that would be valuable. Yeah yeah.

C

F

Agree, um I I can ask questions going a bit of topic. Sorry, because I I need to live in like seven minutes um once and when we work on this, uh I'm not sure. If you're aware, uh like two years ago, we were, I started working on for a year or so in this I and what I think it really helped was I created a document uh to strategize it to outline what steps we were going to take and what stuff and then well.

F

We did have a designer to this sort of discuss the designs we try to do. We just share them and we try to avoid lots of design by committee stuff, but what I would suggest it could help if you could put together a document or something uh outlining uh outlining your vision like what steps you're going to make uh to something more comprehensive to see just so that everybody can see a roadmap in mind, and maybe yes, people just can't pick up contributions for that roadmap, um because that would make it easier for everybody.

F

I think uh I don't know uh and also especially we did share. I think poorly I'm going to go ahead and admit that we did it poorly, but we did try to share design resources so and from what I've seen here, I I mean you must have design resources. These look very design. Specs like these. This looks so consistent and so good that the I mean do you have design docks for this? uh No, no design docks yet. Okay,.

D

I'd love to create some.

F

Are you free styling, this whole thing yeah pretty much? Oh, that's amazing, huge respect uh well, but then, just just a bit of a strategy document aligning your vision and basically what we did was where we wanted to work with the plan and where we wanted to stop. uh Certainly, I wanted to stop after iconography overhaul. I needed to stop, after because of tables to deep things, but at.

C

F

Yes, so if you could put together a roadmap, it would be great, at least that's what I think, what does everybody? So what do you all think.

A

So I'm I'm less concerned about the strategy that I am about the rapid progress. So for me I apologize.

C

A

Other direction but in my case.

C

A

Impressed with the progress that I I would love to keep advancing the progress without without at least short-term concern for strategy.

F

No, no, I mean with I don't mean a roadmap, I mean just a. I don't mean a strategy document like you're. Just saying about that point like going with forms going with that and then with the plug-in manager table and that's it or just I mean. Are you going to stop in iconography on that? Are you going to work on the navigation? Are you going to do you plan or did you plan or if not I mean, if you think, that's too much yeah, I'm sure if you're just freestyling the whole thing uh it's fine.

F

Maybe I will continue to review and approve, of course, and try it out. It's going, I'm going to get back to jenkins they're. Looking at this.

C

Yeah I mean for me code talks and I would just focus on the card.

B

C

If you don't have a team behind you, um if you've got a team to help, then some of that's better but yeah. I think.

F

C

I think we're doing fine. I think it's.

F

Looking really.

C

It's looking really really good.

F

I did assume there was a theme behind this because it looks so consistent. uh It looks consistent, so I thought it was a. There was a thing behind it. I may very well. I may give it a shot to the dragon man at your table. Maybe who knows.

C

Reach out, if there's anything that you need a hand on um so happy to help out in this sort of area, I'm terrible at design, but I can implement and fix things and understand jenkins fairly well.

F

Yeah, I really appreciate.

D

F

I can I can do yeah. I I just can't work in large case stuff, but if you just if you just have any, we find any javascript awareness, I encounter quite a few and if you just just said okay, I just created small tickets for a small adjustment. I will be happy to take a few minutes.

D

And one thing that would really benefit. um Is it like a kind of place? I can post any questions, um it's like a group or something.

C

Posted it in the chat, there's a it's a getter channel, which is like a poor man, slack.

A

C

A

Also, there's also.

C

There's also a mailing list, if you want that too, but for just for questions, the chat is normally fine.

A

Yeah, if, if if gitter is not rich enough for you, we could put ourselves onto the cdf slack we could put. You know there are other places. If that will, if that will help, you get the answers. You need, jan.

D

C

Be great yeah I mean we were on slack before, but then this is harder with invites, and you can't just link people to messages so easily right get. It should be fine. You can just sign in with github.

B

And we still have the community, we started to use as well yeah.

C

Right doesn't unicycle.

B

C

There's a forum here as well.

F

Okay, I've got to drop uh so nice meeting. You john, this is amazing. You're doing uh I I looking at your work really makes me wonder what I have done. Why I didn't know this. It looks really good.

F

So congratulations.

F

um Thank you. So yeah cheers everybody bye. Yes,.

A

So, jan you, you oh go ahead. Patty was that you sorry.

E

I was yeah, I was just gonna say I also have to drop, but um jan. I would love to help you with some of the accessibility, color issues.

C

E

So uh because I think we might have a contrast issue on the buttons, it looks really good, um but I'd love to help you with that. I do have to drop, but I uh we could collaborate on getter or um I can.

E

I know felix posted your pr, um so I can also help look at that and suggest a hex color code. That might be a little better. For contrast, sure.

D

That'd be great, thank you.

E

Awesome: okay, bye, y'all.

A

Thanks jen, you mentioned, I think I I'm not. I am the least ui skilled of everybody in this call. So forgive me if this is a foolish question, but you mentioned why ui is that the yahoo ui thing that we've been dreaming of getting rid of, and it sounds like you've actually successfully for button creation stopped using it.

D

For the majority of buttons, yeah um there's still the plugins, which I can't do much about. Sadly, um that use it um unless we kind of make our own kind of drop-in version, if that makes sense um and then kill off the ui completely yeah.

C

um I feel like.

D

C

Won't be using it too much outside of core components. The main one I know of is the credentials plugin, which really needs to re, really needs a ui rewrite.

A

Well, and, and certainly in order to remove yui references from credentials, we would have to have to rework it right. So it's just the way you said it tim, it will require rework and therefore, whatever technique, you're using jan seems like we could. We could consider that in other places as well excellent. Thank you.

C

Yeah everyone, it's very happy to purge yahoo, ui, it's ancient and out of date, and but I don't think we can update it without breakages and that's it's just so old and yeah.

B

C

With prototype.js is horrid, I'm sure you've came across prototype.js.

B

Yeah, it's just broken.

C

Just I I tend to just rewrite stuff in javascript. I don't I don't add the new, I don't add new prototype. I just rewrite it. If I have to do.

D

A

So now now jen. One of the questions for me was that some of your work is already in the next like in the likely next lts baseline. So 2.317 already includes a number of your improvements, and for me that means we have a shameless request that we need to be sure. We test that thing very well and focus on ui. Those of us around can help by looking at ui and looking for things. Is there a particular way you'd prefer to get issue reports? Is it okay?

A

If I just use the jenkins issue tracker or would is there something better for you and jenkins issue shock is great, really, okay, all right, so so, as as people find things, they should just report them through issues.jenkins.io and excellent. Okay,.

D

That'd be awesome um kind of one last thing that I've kind of been playing around with um is trying to overhaul the the tooltips um so right now across jenkins, there's kind of different variations of making tooltips. um So I'm just trying to consolidate that under uh tippy.js.

D

um This is what it looks like. It looks kind of almost identical to how it did before um so. The users shouldn't notice the difference, but as for developers, it's a lot easier to actually create tooltips, um so hover over kind of the weather, icon, you'll get the table, um and one thing I've been looking at extending it to is the the drop downs as well and try and pull it away further from the who you buy stuff.

A

Oh, my god, so much that that looks beautiful. Could you could you do that again? Please, jan, please hover over that. Those of us who endure this particular menu want to see that one more time. Okay, so that that is the thing of beauty you've done. There have.

C

You done the breadcrumbs at the dashboard at the top- it's maybe not the most obvious, but it's not not that one to the left of that that one there could.

D

C

Yeah, oh yeah, that one's a yeah, that's a yahoo ui one that would be great to purge.

D

Yeah, that's uh that's pretty much everything. um I've got on the go right now, um but I'd definitely like to keep uh people more up to date as to what I'm doing, rather than just like chucking, large major quests out in the open. um So I need to find a way of kind of communicating better there yeah! That's that's! That's it really to.

C

Post the stuff in the ux sig, when you want input or feedback for bigger posts, there is a ux sig mailing list as well, which you can either use the ux sig mailing list or the regular jenkins mailing list. If you want to get bigger feedback, but generally we just use the ux chat, um but yeah that looks really good.

D

Thank you, oh yeah, I'll, stop showing if that's all right.

C

A

Yeah, thank you. Thank you very much.

A

So I'm gonna switch back to sharing my screen because I was in the costume thing today and I'm I'm looking horrible. Therefore, let's do whoops.

C

Oh you've been in an accident.

A

Exactly I mean I meant to ask: I was I was supreme leader snoke in my costume, but that this is only a part of it. So, let's, where did it stop the share? Which screen did I just share? Let's try sharing again share screen this one go: okay! Now you should see this all right. Are there other topics we should discuss today, so it feels like we've got a really cool demo from jan. Thank you very much and we we could consider going back to the conversation on colors in jenkins uli.

A

If you would like to spend some time some further time on that topic,.

B

No just it's okay! I just to make us aware that we should discuss it in more detail and I think I'll start a mailing list thread where we can yeah get a little bit more feedback from everybody.

B

Great all, right, excellent.

A

Any other topics then.

B

A

So, jan I and one of the reasons I was asking about this two three, seventeen and two three eighteen is I've. I've got a bug report I'll be submitting. I just need to get enough information to to justify a good bug report. So if I think I think the one I've seen is enough that we'll probably want it back ported to for the lts baseline, but the the purpose. The bug report is to test whether or not it's actually that relevant to others.

A

Thanks again so much for what you've done this is this is brilliant, brilliant work and really energizing. Thank you. Thank you. Any other topics for today.

A

All right, then, let's I think we can go ahead and call an end. I will archive this I'll, save the meeting, notes and upload a copy of the recording to the jenkins youtube channel so that it'll be available so that other people can see the work that's been going on thanks very much everyone all right.

D

Thank you. Bye thanks.