aquasecurity / trivy-azure-pipelines-task

An Azure Pipelines Task for trivy
https://marketplace.visualstudio.com/items?itemName=AquaSecurityOfficial.trivy-official
MIT License
46 stars 32 forks source link

Visual issues with output results #77

Open a-poluyanov opened 2 weeks ago

a-poluyanov commented 2 weeks ago

I actively use your extension for my Azure DevOps server and I ask you to answer, do you want to improve its visual part?

  1. For example, I have 12 services being collected for my release, here are my test screenshots, note that there are 12 scans. At first, everything looks normal enough?

    img1
  2. But as soon as we want to look at all these 12 scans - real hell begins!

    img2
  3. My first suggestion: Give the ability to rewrite the names of the tabs, so that it is clearer, since the name of the image that we are scanning is already on every corner and it would be convenient if the tabs reflected the short name of the service - which we are scanning. Look, this already makes the view more compact, you can simply add a variable tabName

    - task: AquaSecurityOfficial.trivy-official.custom-build-release-task.trivy@1
    displayName: 'Scan all vulnerabilitie1s'
    inputs:
      version: $(TrivyVersion)
      docker: $(InDocker)
      image: 'docker-registry.my-company.io/projects/test/superset-superset:2.1.0-test'
      tabName: 'superset-superset:2.1.0-test' #This
      ignoreUnfixed: true
      exitCode: 0
      options: '--scanners vuln --cache-dir /tmp/trivy-cache --report all'
    img3
  4. But that's not all, it doesn't solve the problem that the tabs go to the right endlessly, I suggest doing it this way I solved it by changing

    <div aria-posinset="1" aria-selected="true" aria-setsize="12" class="bolt-tab focus-treatment flex-noshrink selected" data-focuszone="focuszone-2" id="__bolt-tab-0" role="tab" tabindex="0"></div>

    Here you need to remove class flex-noshrink and add this style to your Tabs.css on line 123

    .bolt-tabbar-tabs.tall .bolt-tab {
    # Your other parameters
    flex-shrink: 2;
    }
    img4
  5. And I also don't understand why you're making an indent here? We don't have that much space to just take it away.

    img5

    I suggest changing this value from 100px to 20px

The final version looks like this and it becomes much more convenient, what do you think? If you need help with the finalization and you are ready to accept it, I can create a Pull Request to your repository.

img6