Skip to content

Design | MVC | Group-level Security Dashboard: Security scanner status widget

Problem to solve

Currently, there's no way to see which projects in a group have security scanning enabled and if they're running successfully.

Related JTBD

  • When I'm verifying compliance with our org's security policy, I want awareness into which scanners are enabled across projects so that we don't miss any potential vulnerabilities and prove we're doing our due diligence.

  • When I want to make sure that my security scanners are set up properly, I want awareness of the status of the security jobs in the latest pipeline so that I can ensure my applications are staying protected.

User Stories

As a security analyst/ engineer, I want to...

  • ...see which projects need attention so I can investigate, triage, and take action to prevent future risk

  • ...see how well each project's status complies with our org's security requirements/ standards (HIPAA, SLAs, etc)

  • ...enable/ disable/ configure to several or all projects within a group so that I don’t have to apply the same settings to project individually

Intended users

User experience goal

The user should be able to...

  • view which projects may have problems with whether a security scan ran or the quality of it, at a glance
  • view the status of all security jobs from the most recent pipeline, per project
  • view the most recent pipeline's status where security jobs took place, per project
  • navigate directly from this page to the pipeline page
  • navigate directly from this page to the configuration page
  • filter by project name, scan type, and scan status

MVC Proposal

🎨 Figma link to design handoff: https://www.figma.com/file/yn9sq76JCtDnPUfCR6UYCl/?node-id=1482%3A22781

Overview of the new feature proposal

This adds tabs to the group-level security dashboard. The current/ original content lives on the “Overview” tab and this new security scanner status feature lives on a new tab called “Scan status”, which should have a unique URL from the Overview tab. The table pulls in the latest COMPLETED pipeline info where 1 or more security scanner ran for each project in the group. Each job is represented by an icon from the pipeline status. Given that these are only completed pipelines, we don’t have a need for jobs that are currently running or were cancelled; cancelled pipelines will not show up in this widget. If the scanner is not enabled, no icon appears (it is left blank). Clicking on the project name will take the user to the Security & Compliance > Configuration page of that project. Clicking on the pipeline number or “Pipeline failed” badge takes the user to the pipeline page. Clicking on any icon BESIDES a failed job will also take the user to the pipeline page; clicking on a failed icon should take the user directly to the Failed Jobs tab of the pipeline page. Filter and sorting actions are explained in more detail in the sections below; the filtered search component (as seen on the Issues page) is preferred, but separate static filters can be used for MVC if the filtered search component would delay widget implementation.

See the design section below for proposed designs and specs.

Success criteria

Users can see the results of all security jobs on the latest pipeline run where at least 1 security scan ran, and the outcome of each job and the pipeline itself.

Scope

In a future iteration, the table will pull in the security scanner's enabled/ disabled status, and pipeline and jobs info. See the post-MVC issue (WIP) for more: #325878

Documentation

TBD - We'll need to add this to the following areas (WIP)

cc @rdickenson

Is this a cross-stage feature?

Sync with Secure & Defend and Compliance teams, in addition to CI/CD teams

Links

Brainstorming and prioritization: Mural

Timeline

  • Set context: Identify persona, JTBD, problem to solve, goals, requirements, scope, timeline (1 week)
  • Competitive analysis and user flows (1 week)
  • Design explorations & feedback (2 weeks)
  • Design prototyping (1 week)
  • Research prep: Writer screener questions, script, tasks; have UX Researcher review (1 week)
  • Launch test on usertesting.com, monitor participant qualifications and responses, set up Dovetail project (2 weeks)
  • Affinity diagram and shareout of insights (1 week)
  • Design iterations (if applicable) (1 week)
  • Re-launch test and update Dovetail insights (if applicable) (1 week)
  • Finalize designs and post for final review (1 week)
  • Ping PM and EM when complete, move from workflowdesign to workflowplanning breakdown (n/a)

Total expected time to budget: 3 milestones (~3 months)

Edited by Becka Lippert