ROX-34186: Render collection and entity scope in Resources step

[pedrottimark]

Description

Objective

Provide equivalent filter for scheduled reports as view-based reports

Analysis

1. As a potential alternative, I considered auth provider Rules:

   • Key
   • Value
   • Role

2. Seeing 3 fields rememinded me to use compound search filter for both Resources and Filters

   With appropriate configuration:

   Resources: searchFilterConfigForClusterNamespaceDeployment
   Filters: searchFilterConfigForImageVulnerabilityReport already exists

   With pure functions so that resourceScope.entityScope.rules is source of truth, although reusable elements have searchFilter prop.

   • getEntityScopeRulesFromSearchFilterForClusterNamespaceDeployment already exists
   • getSearchFilterFromEntityScopeRulesForClusterNamespaceDeployment

3. Although the round-trip conversion seems to work for Name field with either exact or regex match, key-value for annotation and label deserves closer investigation and unit tests. See Residue item 1.

Solution

1. Add ImageTypeSelect.tsx files because form element was inline.

2. Add CollectionScopeSelect.tsx file because CollectionSelection.tsx

   • Does not support payload/response types (too bad, so sad).
   • Does support integration to create collection, which we can omit.

3. Edit entityScopeRules.ts file.

   • Support cluster and namespace for future virtual machine vulnerability report.
   • Add getSearchFilterFromEntityScopeRules function.

4. Add searchFilterConfig.ts file.

   Because Cluster has additional attributes in results that do not correspond to entity scope,
   specify relevant attributes only to prevent irrelevant attributes from leaking in from results.

5. Add EntityScopeCompoundSearchFilter.tsx file.

   Generic component receives which entites of cluster, namespace, deployment via props.

6. Edit ImageVulnerabilityResourcesStep.tsx file.

   • Render radio buttons for Collection scope and Entity scope
   • Enable or disable CollectionScopeSelect element
   • Enable or disable EntityScopeCompoundSearchFilter elements
     Apologies for so many secondary changes to add isDisabled prop.

7. Edit ImageVulnerabilitiesReviewStep file.

   • Render ImageVulnerabilitiesReportView element for consistency with future view page.

Residue

1. Although the round-trip conversion seems to work for Name field with either exact or regex match, key-value for annotation and label deserves closer investigation and unit tests. See Analysis item 2.

   David might advise how to either reuse or add to searchUtils.ts file

2. Get wording for absence of resources or filters and decide how to display.

   Although collection scope is required even for Watched images only, it seems required for entity scope if Deployed images is selected, but not if Watched images only is selected.

   • Alert element in view
   • Form helper text from validation errors? Or Alert element?

3. To reduce changed files, and because Filters step is in review, follow up with option to hide Clear filters link in compound search filter labels.

4. Form validation! Brad might help,

5. Add file to render view or wizard when ROX_VULNERABILITY_REPORTS_ENHANCED_FILTERING ia enabled.

User-facing documentation

• CHANGELOG.md update is not needed
• documentation PR is not needed

Testing and quality

• the functionality is gated by a feature flag
• CI results are inspected

Automated testing

• added unit tests
• added e2e tests
• added regression tests
• added compatibility tests
• modified existing tests

How I validated my change

1. npm run tsc in ui/apps/platform folder.
2. npm run lint:fast-dev in ui/apps/platform folder.
3. npm run start in ui/apps/platform folder with staging demo as central.

Manual testing

Temporary edit ViewVulnReportPage.tsx files to render wizard for report configuration.

1. Visit /main/vulnerabilities/reports/configuration click a link, and then advance to Resources step.

   Collection scope is existing report configuration
   

2. Select a different collection
   

3. Advance to Review step.
   

4. Go back to Resources step and select Custom scope.

   Although I deleted the code, pending Residue item 2, here is what a warning Alert element might look like.
   

5. Select Cluster name and Namespace name exact and Deployment name not exact.
   

6. Advance to Review step.
   

7. On Resources step

   • Test memory of collection or entity scope when I click ration buttons.
   • Test conditional rendering of required asterisk when I select or clear Deployed images.
   • After much console.log understand that advance to Review step and then return to Resources step loses its memory of the other scope selection because it was in component instance state (duh).

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 49.84%. Comparing base (77e6527) to head (d5d01de).
⚠️ Report is 31 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff            @@
##           master   #20321    +/-   ##
========================================
  Coverage   49.83%   49.84%            
========================================
  Files        2773     2780     +7     
  Lines      210794   211480   +686     
========================================
+ Hits       105055   105414   +359     
- Misses      97974    98260   +286     
- Partials     7765     7806    +41     

Flag	Coverage Δ
go-unit-tests	49.84% <ø> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🚀 Build Images Ready

Images are ready for commit d5d01de. To use with deploy scripts:

export MAIN_IMAGE_TAG=4.11.x-814-gd5d01deeb6