Container scanning locations are truncated so the image name is not visible

Summary

On the vulnerability report for container scanning vulnerabilities, the image name, which is the most important part of the location, is not available at a glance

Click to expand 
Thiago Figueiró:red_circle:  23 days ago
While on the topic of triage, I noticed two potential UX improvements: https://youtu.be/ABc8oFQ9RWk (video is private due to security information on the screen).These are sort of in Threat Insights territory, so @Matt Wilson FYI.Scenario: triaging container scanning vulnerabilities for multiple images

    I can’t see the image name at a glance. The way we limit the location is by cutting the middle. This is where the image is. The start of the string is not very useful (they all say registry.gitlab etc). The end of the string is more useful as I can compare the checksum. The middle, which we cut, is the best, since it gives the actual name. Not sure if it’s worth doing anything about it, but there you have it.
    When updating the state of a vulnerability, I want to update all the entries for the same CVE. These are not duplicates since they’re in different images (locations) but, since the assessment result is the same, I want to do all of them. The video shows 2 occurrences but it could be up to the number of images scanned (4 in this repo).

...
Camellia:waxing_gibbous_moon:  21 days ago
@Thiago Figueiró Thank you for this! I think there are space we can improve for sure.For question 1, to help of us understand better, could you give example:

    the end of the string, from where to where of the URL consider as the end of the string?
    the middle part as well, from where to where of the URL consider as the middle of the string? 

This is an example of gitlab registry, for self host user, will their registry URL have the same pattern? If yes, I assume, technically, we can parse them into 3 different parts as we want, right?For question 2, If I understand clearly, you mean if we can sort or filter of CVE, it will solve the problem you mentioned?

Thiago Figueiró:red_circle:  21 days ago
This is one of the images that we see:
registry.gitlab.com/gitlab-org/security-products/analyzers/container-scanning/tmp/grype:c28310a2fbd7577b9eafd51989dfb11113646365The shortened version is: registry.gitlab.com/gitlab-or... 577b9eafd51989dfb11113646365 (depends on browser width).I think the best part to show would be:  grype:c28310a2.This seems to be handled on the FE. We’d need a custom implementation to shorten starting from the “middle”:

    Find the last slash: a.
    Find the last colon: b.
    Display from a to b.
    Add characters to the left of a and to the right of b to fit the screen.

Unless there’s some CSS magic that does this, I suspect the work isn’t worth it. WDYT, @Alexander Turinske?For question 2, it would be sorting by (severity, cve). Right now I think we only sort by severity. This should be easy, so I wrote an issue: https://gitlab.com/gitlab-org/gitlab/-/issues/349164

...
Alexander Turinske  8 days ago
@Thiago Figueiró Thank you for the great ideas and awesome video!For question 1, would it be better to shorten the string from the front for container scanning vulnerabilities?
image.png 
image.png

Thiago Figueiró:red_circle:  8 days ago
Yes, that’s a simple way to handle it and I think it covers most of the cases better!

Alexander Turinske  8 days ago
Oh, @Thiago Figueiró even mentions this in the initial message. :face_palm: Sorry I tried to take the credit from you!
WDYT @Camellia?

...
Camellia:waxing_gibbous_moon:  3 days ago
@Alexander Turinske @Thiago Figueiró This way of shorten works for me! Thx for proposing!

Steps to reproduce

  1. Navigate to a project with container scanning vulnerabilities
  2. View the image locations

Example Project

https://staging.gitlab.com/defend-team-test/container-scanning-with-dependencies/-/dependencies

What is the current bug behavior?

A user can not see the image name in the container scanning vulnerability location on smaller screens

What is the expected correct behavior?

A user can not see the image name in the container scanning vulnerability location on smaller screens

Relevant logs and/or screenshots

Good Bad
image image

Possible fixes

  • frontend move truncation to the front of the string
Edited by Alexander Turinske