Show pod details

[jelly]

Show the port details of a pod using a popover.

---

Pod CPU, memory, port and volume details

Podman now shows the CPU and memory usage of a pod. The amount port and volume mappings of a pod are now shown with a popover showing the exact detailed mapping.

[marusak]

based on the last image, when there are no ports, the height is somewhat weird, isn't it?

[jelly]

based on the last image, when there are no ports, the height is somewhat weird, isn't it?

Yes, that's why it's still draft :)

[jelly]

@garrett pushed a new version which looks like this:

[marusak]

Nice, thanks! I am not super happy with the design. It seems to create one sentence with pod group CPU Memory. I think that making labels CPU and Memory bold would help with reading of it. Also memory can be empty, that is not a good practice. Can we either not show the label either or show 0MB?

[garrett]

Here's how it'd work right now, as-is:

(Note the larger text for the pod group name, which I've used in every mockup so far, but isn't in this PR.)

And it would flow on mobile to be something like this:

Closest to a summary I've seen in PF is using icons + numbers in tables like this demo:
https://www.patternfly.org/v4/demos/primary-detail/react-demos/primary-detail-full-page/

We'd have to have the right icons if we use icons. But the icons might not be self-explanitory and they're not consistent with the lists of the containers — or anywhere else in Cockpit — so I'm hesitant to suggest them.

[garrett]

There seems to be too much padding on the right and top of the pod group? It's odd.

I've trimmed it a little and modified the screenshot a little (including bumping up the pod's heading) and have this:

Here's what it would look like with icons (the ones PF specifies for each type of item):

Obviously, they'd have to have some kind of hover tooltip to explain what each represents. And the linked ones with a popover would probably say "click to expand" or something as well. And on mobile, we'd need to expand the name and not show the tooltips, as hover isn't really possible on mobile.

(The icons actually don't look too bad?)

[jelly]

Ok, let's implement the icons design, I'm not 100% sure how we would implement the changing of components for the mobile view. Currently I can only think of adding an resize eventlistener or using a special class which hides/shows components depending on the using display: block and PF's breakpoints.

[garrett]

Why not the hidden utility class in a breakpoint, just for the text? (Or perhaps we might need the opposite, depending on what the breakpoint means.)

Mobile doesn't support hover, so we could just ignore the hover tooltips, as they won't show. But the text will.

[jelly]

Some progress, yes icons need to be aligned...

[jelly]

Unrelated issue:

[garrett]

Which issue? I see a few.

1. Title is truncated, with no way to see what it is.
   • This can be always set to wrap by changing the white-space: nowrap; to white-space: break-spaces;
   • line-clamp could help here by letting it be a specified number of lines before truncating (instead of just 1), but it's still under a -webkit- prefix and requires a bunch of wacky other bits of CSS to have it work. However, it does work cross browser in a reliable, supported manner. https://css-tricks.com/almanac/properties/l/line-clamp/ (This is incompatible with the above suggestion, which is simpler and fine as long as the line doesn't run too long.)
2. Modal is missing content to explain what it will do and to what it will do it to.
3. There's no need to have "Confirm ..." in the modal. That's redundant.
   • https://www.patternfly.org/v4/components/modal/design-guidelines/#confirmation-dialogs
   • I thought there were guidelines for writing modal confirmations, but I couldn't (quickly) find them. You can see in the demo that there shouldn't be a redundant title. The entire point of the modal is to ask for confirmation. I guess https://www.patternfly.org/v4/ux-writing/ux-writing-best-practices#use-positive-action-oriented-language kind of covers it in a way? (Especially in the "Be clear and concise" section.)

[jelly]

# testCommitUser (__main__.TestApplication)
cp: cannot stat '/var/lib/containers/storage/overlay/compat4181880111': No such file or directory
Traceback (most recent call last):
  File "/usr/lib64/python3.10/unittest/case.py", line 546, in _callSetUp
    self.setUp()
  File "/work/bots/make-checkout-workdir/test/check-application", line 56, in setUp
    self.restore_dir("/var/lib/containers", reboot_safe=True)
  File "/work/bots/make-checkout-workdir/test/common/testlib.py", line 1904, in restore_dir
    self.machine.execute("mkdir -p %(vm_tmpdir)s && cp -a %(path)s/ %(backup)s/" % {
  File "/work/bots/make-checkout-workdir/bots/machine/machine_core/ssh_connection.py", line 307, in execute
    res = subprocess.run(command_line,
  File "/usr/lib64/python3.10/subprocess.py", line 524, in run
    raise CalledProcessError(retcode, process.args,
subprocess.CalledProcessError: Command '['env', '-u', 'LANGUAGE', 'LC_ALL=C', 'ssh', '-p', '2401', '-o', 'StrictHostKeyChecking=no', '-o', 'UserKnownHostsFile=/dev/null', '-o', 'IdentitiesOnly=yes', '-o', 'BatchMode=yes', '-o', 'PKCS11Provider=none', '-o', 'LogLevel=ERROR', '-l', 'root', '127.0.0.2', '-o', 'ControlPath=/tmp/.cockpit-test-resources/ssh-%h-%p-%r-11716', 'set -e;', 'mkdir -p /var/lib/cockpittest && cp -a /var/lib/containers/ /var/lib/cockpittest/_var_lib_containers/']' returned non-zero exit status 1.
Journal extracted to TestApplication-testCommitUser-debian-testing-127.0.0.2-2401-FAIL.log.gz
Traceback (most recent call last):
  File "/work/bots/make-checkout-workdir/test/check-application", line 56, in setUp
    self.restore_dir("/var/lib/containers", reboot_safe=True)
  File "/work/bots/make-checkout-workdir/test/common/testlib.py", line 1904, in restore_dir
    self.machine.execute("mkdir -p %(vm_tmpdir)s && cp -a %(path)s/ %(backup)s/" % {
  File "/work/bots/make-checkout-workdir/bots/machine/machine_core/ssh_connection.py", line 307, in execute
    res = subprocess.run(command_line,
  File "/usr/lib64/python3.10/subprocess.py", line 524, in run
    raise CalledProcessError(retcode, process.args,
subprocess.CalledProcessError: Command '['env', '-u', 'LANGUAGE', 'LC_ALL=C', 'ssh', '-p', '2401', '-o', 'StrictHostKeyChecking=no', '-o', 'UserKnownHostsFile=/dev/null', '-o', 'IdentitiesOnly=yes', '-o', 'BatchMode=yes', '-o', 'PKCS11Provider=none', '-o', 'LogLevel=ERROR', '-l', 'root', '127.0.0.2', '-o', 'ControlPath=/tmp/.cockpit-test-resources/ssh-%h-%p-%r-11716', 'set -e;', 'mkdir -p /var/lib/cockpittest && cp -a /var/lib/containers/ /var/lib/cockpittest/_var_lib_containers/']' returned non-zero exit status 1.

# Result testCommitUser (__main__.TestApplication) failed
# 1 TEST FAILED [2s on 1-cockpit-11]
not ok 6 /work/bots/make-checkout-workdir/test/check-application TestApplication.testCommitUser [ND@2]

# testPruneUnusedImagesSystem (__main__.TestApplication)
cp: cannot stat '/var/lib/containers/storage/overlay/opaque-bug-check3855566078': No such file or directory

# testBasicUser (__main__.TestApplication)
cp: cannot stat '/var/lib/containers/storage/overlay/compat828855375': No such file or directory
Traceback (most recent call last):

Debian testing is a flakerino

[marusak]

Nice, thank you!

[marusak]

Thank you!