Bug 1366191 - Hard to copy hostname of the machine from the recipe view
Summary: Hard to copy hostname of the machine from the recipe view
Keywords:
Status: CLOSED CURRENTRELEASE
Alias: None
Product: Beaker
Classification: Community
Component: web UI
Version: 23
Hardware: Unspecified
OS: Unspecified
unspecified
medium vote
Target Milestone: 24.0
Assignee: Dan Callaghan
QA Contact: tools-bugs
URL:
Whiteboard:
: 1368148 (view as bug list)
Depends On:
Blocks: 1362595
TreeView+ depends on / blocked
 
Reported: 2016-08-11 09:30 UTC by Jan Stourac
Modified: 2019-10-10 17:06 UTC (History)
6 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Environment:
Last Closed: 2017-02-21 18:49:50 UTC


Attachments (Terms of Use)
screenshot of option 1 (112.53 KB, image/png)
2016-11-21 05:33 UTC, Dan Callaghan
no flags Details
screenshot of option 2 (111.57 KB, image/png)
2016-11-21 05:34 UTC, Dan Callaghan
no flags Details
screenshot of option 2 with menu expanded (124.24 KB, image/png)
2016-11-21 05:35 UTC, Dan Callaghan
no flags Details

Description Jan Stourac 2016-08-11 09:30:52 UTC
Description of problem:
Since Beaker 23 it became a little bit harder to quickly copy-paste hostname of the machine from recipe view. Now it is very easy when selecting machine hostname to also select space in front of the text. But what is really annoying is the dot '.' sign at the end of the hostname text. :)

So there is e.g. something like this:

on test09-64.sysmgmt.lab.eng.rdu2.redhat.com.

It would be very nice if at least final dot is removed :)

Version-Release number of selected component (if applicable):
Beaker 23


How reproducible:
Always

Steps to Reproduce:
1.
2.
3.

Actual results:
on test09-64.sysmgmt.lab.eng.rdu2.redhat.com.

Expected results:
Well some more user friendly way how to copy-paste hostname of the machine.

Additional info:

Comment 1 Dan Callaghan 2016-08-12 02:55:52 UTC
Well the period is there because it is a whole sentence, I don't think we should take it away just to make it easier to select the hostname...

It might be enough to just add some horizontal margin around the hyperlink. Selecting hyperlinks (without clicking them) is already kind of hard anyway but I'm not sure if there is any particularly good solution. We could consider adding a copy-to-clipboard button using https://github.com/zenorocha/clipboard.js but that might be overkill.

Comment 2 matt jia 2016-08-12 04:12:35 UTC
(In reply to Dan Callaghan from comment #1)
> Well the period is there because it is a whole sentence, I don't think we
> should take it away just to make it easier to select the hostname...
> 
> It might be enough to just add some horizontal margin around the hyperlink.
> Selecting hyperlinks (without clicking them) is already kind of hard anyway
> but I'm not sure if there is any particularly good solution. We could
> consider adding a copy-to-clipboard button using
> https://github.com/zenorocha/clipboard.js but that might be overkill.

I guess we could use this css trick

https://css-tricks.com/almanac/properties/u/user-select/

An example code is:

  http://codepen.io/chriscoyier/pen/ZGKYxj

Comment 3 matt jia 2016-08-12 04:17:15 UTC
(In reply to matt jia from comment #2)

>> https://css-tricks.com/almanac/properties/u/user-select/
> 
> An example code is:
> 
>   http://codepen.io/chriscoyier/pen/ZGKYxj

Codepen does not allow me to save code without signing in...

https://jsfiddle.net/uunxpcb0/

Comment 4 Jan Stourac 2016-08-12 06:18:51 UTC
(In reply to Dan Callaghan from comment #1)
> Well the period is there because it is a whole sentence, I don't think we
> should take it away just to make it easier to select the hostname...
... or simply put back previous appearance instead of newly introduced sentence:
Distro <name_of_the_used_distro>
System <system_hostname>

I understand that removing that period breaks current sentence but UX first, please. I don't know whether I am the only one but I copy hostnames very, very, very often to ssh to that machine. I admid I might be kind of spoiled child but current change makes it very annoying to focus to copy properly (or fix pasted text in terminal instead).

> 
> It might be enough to just add some horizontal margin around the hyperlink.
> Selecting hyperlinks (without clicking them) is already kind of hard anyway
> but I'm not sure if there is any particularly good solution. We could
> consider adding a copy-to-clipboard button using
> https://github.com/zenorocha/clipboard.js but that might be overkill.
Yeah, that also came up to my mind yesterday, but was not sure about it either. Although I guess it is possible solution.

Comment 5 Jan Stourac 2016-08-12 06:22:18 UTC
(In reply to matt jia from comment #3)
> (In reply to matt jia from comment #2)
> 
> >> https://css-tricks.com/almanac/properties/u/user-select/
> > 
> > An example code is:
> > 
> >   http://codepen.io/chriscoyier/pen/ZGKYxj
> 
> Codepen does not allow me to save code without signing in...
> 
> https://jsfiddle.net/uunxpcb0/

That is really cool Matt! It works in Firefox 48 browser just fine. Unfortunatelly it is not working in Chrome (52.0.2743.116) browser for me which I use as my main browser :( .

Comment 6 Roman Joost 2016-08-18 03:14:49 UTC
It's tricky to select a link. I thought about a drop-down menu for the system link as well:

Behaviour:

* users can hover over the system link and see a drop down menu
* moving the mouse down allows to select the menu items
(note: Not sure how easy that is to implement to avoid flickering and it's still easy to select menu items. Otherwise you'll have to click on the system itself to have a drop down)

Items:
If we include Bug 1362595, we could show system related actions:

* report problem
* copy hostname
* go to system page

Comment 7 Roman Joost 2016-08-22 05:54:13 UTC
*** Bug 1368148 has been marked as a duplicate of this bug. ***

Comment 8 Dan Callaghan 2016-08-23 23:45:41 UTC
(In reply to Roman Joost from comment #6)
> * report problem
> * copy hostname
> * go to system page

Another one that has been requested in the past is: go to http://thesystemitself assuming there is something running on there.

So this seems like a neat approach. However in the past we have rejected the idea of menus activated by hovering, based on the fact that I personally hate them :-) and also Bootstrap itself does not use them because they are a poor user experience in many cases (difficult to reliably trigger, don't work on touch interfaces, etc).

Comment 9 Michael Petlan 2016-09-08 13:46:36 UTC
I don't want to look as the "complaining guy" all the time, however, I'd like to suggest using the simplest possible solutions for simple issues.

I would be very happy if elinks/lynx/wget were still considered as potential clients too, so the UI was usable within them as well. I think there still are few people, who prefer text over graphics and keyboard over mouse... Furthermore, simple pages are also easily parseable, thus usable in any other possible automation you can imagine (just e.g., I have a tool for log downloading...).

Even this Bugzilla page is not fully supported in elinks, since non-comment changes, such as "qa_ack+" are generated by JS (no clue why), so I cannot see them... It would be really cool, if I could get rid of Firefox (and large browsers) at work completely (which is unfortunately not possible).

Comment 10 Roman Joost 2016-09-19 23:40:37 UTC
We had another chat about it had the following action points:

Idea 1:

* Hostname remains a link
* Add a copy-to-clipboard button (Gerrit style)

Idea 2:

* Make the hostname not a link
* Add a drop down menu next to it providing:
  * report problem
  * copy hostname
  * go to system page
  * go to http://thesystemitself 
* Check if we can find a good balance between the size of the button and its positioning.

Whoever picks this is encouraged to try both ideas and check which one works better layout/functionality wise.

Comment 11 Hui Wang 2016-10-25 08:01:36 UTC
https://gerrit.beaker-project.org/#/c/5360/
I just implemented the first idea.

Comment 12 Michael Petlan 2016-11-03 14:30:17 UTC
It would be also cool, if the hostname was visible on the JOB page, just by each of the recipe:

Now it is:

  RS:2594729                                        [Clone] [Waive]
-------------------------------------------------------------------
  R:3216945  Server RHEL-7.2 Server ppc64le                   100%

How it might look like:

  RS:2594729                                        [Clone] [Waive]
-------------------------------------------------------------------
  R:3216945  Server RHEL-7.2 Server ppc64le  ibm-p8.eng.rh.c  100%


We have arch/distro there, so why not the hostname?

Comment 13 Dan Callaghan 2016-11-04 00:25:50 UTC
(In reply to Michael Petlan from comment #12)

It was always supposed to be there, just missing due to a typo: bug 1362596. Fixed in 23.3.

Comment 14 Dan Callaghan 2016-11-21 05:33:35 UTC
Created attachment 1222296 [details]
screenshot of option 1

Option 1 (copy-to-clipboard button beside the link):
http://gerrit.beaker-project.org/5447

Comment 15 Dan Callaghan 2016-11-21 05:34:46 UTC
Created attachment 1222297 [details]
screenshot of option 2

Option 2 (drop-down menu):
http://gerrit.beaker-project.org/5449

Comment 16 Dan Callaghan 2016-11-21 05:35:16 UTC
Created attachment 1222298 [details]
screenshot of option 2 with menu expanded

Comment 17 Dan Callaghan 2016-11-21 05:36:35 UTC
The drop-down menu doesn't include an item for "report a problem", that can be implemented separately after this as part of bug 1362595.

Comment 18 Dan Callaghan 2016-11-21 21:54:11 UTC
(In reply to Dan Callaghan from comment #15)
> Created attachment 1222297 [details]
> screenshot of option 2

So on the whole, I prefer this option, because it gives us a nice solution of where to put all the different system actions that we want on the recipe page, without occupying more and more space jamming a toolbar or something in there.

One downside with that particular design is that it ends up looking exactly like a <select/> combo box which might be confusing. Maybe we can style it differently, for example removing the grey border around the hostname?

Comment 19 Dan Callaghan 2016-12-15 04:07:30 UTC
We have gone back and forth on this a little bit... The more I stared at option 2 the more I felt it looks confusing, distracting, and messy, and that we should instead find a better way of handling that "recipe quick summary" box instead of just cramming more and more functionality into it.

However Roman points out that, even if it's not perfect, the dropdown in option 2 is still a usability improvement over what we have now. Therefore we will ship it in 24.0 with a view towards improving the design of that box in future.

Comment 21 Hui Wang 2017-01-12 01:59:01 UTC
Verified this issue.
Copy system name, view system details and report problem are cool.
But the link http://thesystemitself will go to a page has nothing.
It's no any meaning at that moment and it is confusing. So how about hiding this link?

Comment 22 Dan Callaghan 2017-01-12 03:11:43 UTC
Finally found it... the bug description was not very helpful.

(In reply to Hui Wang from comment #21)
> But the link http://thesystemitself will go to a page has nothing.
> It's no any meaning at that moment and it is confusing. So how about hiding
> this link?

This was requested in bug 1323154, which actually we can put ON_QA now. It was done as part of the patch for this bug.

It is expected that if your recipe doesn't install some web app, then linking to http://$THESYSTEM is going to just point nowhere.

If we can come up with a better label for that menu item I'm open to changing it, but I think what we have now is clear enough: View http://ibm-x3250m4-18.rhts.eng.example.com

Comment 23 Hui Wang 2017-01-12 03:41:35 UTC
Verified this issue.
The result is PASS.
Beaker 24.0.git.241.4eb2414 

All of the following functions work well.
  * report problem
  * copy hostname
  * go to system page
  * go to http://thesystemitself

Comment 24 Dan Callaghan 2017-02-21 18:49:50 UTC
Beaker 24.0 has been released.

Comment 25 bbbootstrap 2019-10-10 17:05:20 UTC
(In reply to Jan Stourac from comment #4)
> (In reply to Dan Callaghan from comment #1)
> > Well the period is there because it is a whole sentence, I don't think we
> > should take it away just to make it easier to select the hostname...
> ... or simply put back previous appearance instead of newly introduced
> sentence:
> Distro <name_of_the_used_distro>
> System <system_hostname>
> 
> I understand that removing that period breaks current sentence but UX first,
>, please. I don't know whether I am the only one but I copy hostnames very,
> very, very often to ssh to that machine. I admit I might be kind of spoiled
> child but current change makes it very annoying to focus to copy properly
> (or fix pasted text in terminal instead).
> 
> > 
> > It might be enough to just add some horizontal margin around the hyperlink.
> > Selecting hyperlinks (without clicking them) is already kind of hard anyway
> > but I'm not sure if there is any particularly good solution. We could
> > consider adding a copy-to-clipboard button using
> > https://bbbootstrap.com but that might be overkill.
> Yeah, that also came up to my mind yesterday, but was not sure about it
> either. Although I guess it is possible solution.

-----------------------------------------------------

I agree


Note You need to log in before you can comment on or make changes to this bug.