feat(heureka): adds false positive actions and image version details page #1421

hodanoori · 2026-01-20T13:38:15Z

Summary

Adds false positive remediation to Heureka and introduces an image version details page. Users can mark vulnerabilities as false positive from the image details page, with success/error feedback via the message provider. The image version details page shows occurrences and vulnerabilities for a specific version. SHA256 identifiers are shortened to 7 characters in breadcrumbs and page titles for readabilityin image version details page.

Open Points

The remediated vulnerabilities tab currently does not display severity information, and does not support search or pagination. These features will be implemented once the corresponding API support becomes available.

Changes Made

Added False Positive Remediation Action
- Added false positive action to the vulnerabilities list in the image details page
- Implemented FalsePositiveModal component with required description field
- Made description field mandatory (required) with validation
- Integrated with remediation API to create false positive remediations
Implemented Message Provider for User Feedback
- Integrated @cloudoperators/juno-messages-provider
- Added MessagesProvider wrapper in App.tsx
- Added Messages component to root route for global message display
- Implemented success/error messages for false positive actions in vulnerabilities tab
- Implemented success/error messages for revert false positive actions in remediated vulnerabilities tab
- Updated turbo.json to include messages-provider build dependency
Added Image Version Details Page
- Created new route /services/$service/images/$image/versions/$version for image version details
- Implemented ImageVersionDetails component showing version-specific information
- Added ImageVersionOccurrences component to display component instances for the version
- Added ImageVersionIssuesList component to display vulnerabilities for the specific version
- Integrated with fetchImageVersions API to load version-specific data
Enhanced Image Details Page
- Added image versions list to image details page
- Implemented navigation to image version details page when clicking on a version
- Added two separate tabs: "Vulnerabilities" and "Remediated Vulnerabilities"
**Image Version Details Page: Improved SHA256 Display in Breadcrumb and Page Title **
- Created utility function getShortSha256() to extract first 7 characters after "sha256:"
- Updated breadcrumb in image version details route to show shortened SHA
- Updated page title/heading to display shortened SHA instead of full hash
- Full SHA remains in URL for proper routing and identification

Related Issues

closes
[Task](heureka): Add image version details page #1407
[Task](heureka): Perform false positive action to vulnerabilities in image details page #1408
[Task](heureka): Delete remediated status of vulnerabilities #1409

Screenshots (if applicable)

Testing Instructions

pnpm i
pnpm TASK

Checklist

I have performed a self-review of my code.
I have commented my code, particularly in hard-to-understand areas.
I have added tests that prove my fix is effective or that my feature works.
New and existing unit tests pass locally with my changes.
I have made corresponding changes to the documentation (if applicable).
My changes generate no new warnings or errors.
I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.

* feat(heureka): adds image details page * chore(heureka): removes image details panel * feat(heureka): navigate from service panel to image details page * chore(heureka): adds changeset * chore(heureka): adjusts tests * chore(heureka): makes navigation checks generic * chore(heureka): makes navigation checks generic * fix(heureka): fixes prettier issue * feat(heureka): improves navigation and url definition * chore(heureka): adjusts test

…gation item

…pattern for breadcrumb

changeset-bot · 2026-01-20T13:38:19Z

🦋 Changeset detected

Latest commit: 6325218

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@cloudoperators/juno-app-heureka	Major
@cloudoperators/juno-app-greenhouse	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-01-20T14:04:58Z

PR Preview Action v1.6.3
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1421/
Built to branch `gh-pages` at 2026-01-20 15:28 UTC. Preview will be ready when the GitHub Pages deployment is complete.

ArtieReus

Great job! this PR is quite lorge 😅. Added some comments

ArtieReus · 2026-01-22T14:46:46Z

.gitignore

 .pnpm-store/

+# TanStack Router cache directory
+.tanstack/


Is this really needed? This is the first app ignoring this folder...

ArtieReus · 2026-01-22T14:47:21Z

apps/heureka/.gitignore

 .env.test.local
 .env.production.local
+
+# TanStack Router cache directory


Same here. How is this directory being created?

ArtieReus · 2026-01-22T14:48:43Z

apps/heureka/package.json

    "clean:cache": "rm -rf .turbo"
  },
  "dependencies": {
+    "@cloudoperators/juno-messages-provider": "workspace:*",


Do you want really to introduce the messages provider dependency? We can talk about this.

ArtieReus · 2026-01-22T14:51:59Z

apps/heureka/src/api/fetchImageVersions.tsx

+
+  // Invalidate cache first to ensure queryFn is always called (forces network request)
+  // Then use ensureQueryData to maintain promise stability (like other fetch functions)
+  queryClient.invalidateQueries({ queryKey })


Why are you always fetching from network? Which benefit gives you then using react-query instead of just fetch?

ArtieReus · 2026-01-22T14:59:44Z

...rvice/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/index.tsx

+  const { needsExpansion, textRef } = useTextOverflow(remediation.description || "")
+
+  const toggleDescription = (e: React.MouseEvent) => {
+    e.preventDefault()


you don't need the e.stopPropagation() ? If the row has a click/select handler, clicking "Show more" may still propagate and trigger row-level behavior.

ArtieReus · 2026-01-22T15:25:45Z

apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionOccurrences.tsx

+        ))}
+
+      <div className="advance-link">
+        <a href="#" rel="noopener noreferrer" onClick={onShowMoreClicked}>


unnecessary rel attribute rel="noopener noreferrer" on an internal anchor without target="_blank" is unnecessary

ArtieReus · 2026-01-22T15:29:56Z

apps/heureka/src/components/Service/ImageVersionDetails/index.tsx

+
+  const { imageVersions } = getNormalizedImageVersionsResponse(data as GetImageVersionsQuery | undefined)
+  // Since we're querying for a specific version, we should get exactly one result
+  const imageVersion = imageVersions[0]


there is a guard if (!imageVersion)

ArtieReus · 2026-01-22T15:31:33Z

apps/heureka/src/components/Services/utils.ts

+
+// Normalization function that returns array of image versions (for compatibility with old panel)
+export const getNormalizedImageVersionsResponse = (
+  data: any // Will be GetImageVersionsQuery after codegen


when should this happen?

ArtieReus · 2026-01-22T15:32:48Z

apps/heureka/src/components/Services/utils.ts

+
+  const imageVersionNode = data.ImageVersions.edges[0].node
+  const vulnerabilitiesEdges = imageVersionNode.vulnerabilities?.edges || []
+  const occurrencesEdges = imageVersionNode.occurences?.edges || []


typo in occurences . I should be occurrences ...

ArtieReus · 2026-01-22T15:33:25Z

apps/heureka/src/components/Services/utils.ts

+  const vulnerabilitiesPageInfo = imageVersionNode.vulnerabilities?.pageInfo
+
+  const vulnerabilities: ImageVulnerability[] = vulnerabilitiesEdges
+    .filter((edge: any) => edge !== null && edge.node !== null)


ArtieReus

What about to add tests for all of those new components?

hodanoori and others added 6 commits January 20, 2026 09:18

feat(heureka): put the search box inside the vulnerabilities top navi…

5d21f3d

…gation item

chore(heureka): extends codegen to be adjusted with apollo client V4

864acdb

chore(heureka): display the seven chars after sha256 based on github …

35ab5a0

…pattern for breadcrumb

feat(heureka): adds messages to remediation actions

4bc758b

chore(heureka): fix typescheck

d48b237

hodanoori requested a review from a team as a code owner January 20, 2026 13:38

hodanoori self-assigned this Jan 20, 2026

hodanoori added the heureka Heureka related issues label Jan 20, 2026

hodanoori added 2 commits January 20, 2026 14:52

Merge main into hoda-heureka-false-positive

5768fc1

chore(heureka): resolve conflicts

0242166

hodanoori added 3 commits January 20, 2026 15:06

chore(heureka): adds changeset

43b8fb6

chore: ignore TanStack Router cache directory (.tanstack)

17260fd

chore(heureka): improves changeset text

6325218

ArtieReus reviewed Jan 22, 2026

View reviewed changes

ArtieReus reviewed Jan 23, 2026

View reviewed changes

feat(heureka): adds false positive actions and image version details page #1421

Are you sure you want to change the base?

feat(heureka): adds false positive actions and image version details page #1421

Conversation

hodanoori commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Open Points

Changes Made

Related Issues

Screenshots (if applicable)

Testing Instructions

Checklist

PR Manifesto

Uh oh!

changeset-bot bot commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-01-20 15:28 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

ArtieReus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArtieReus left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hodanoori commented Jan 20, 2026 •

edited

Loading

changeset-bot bot commented Jan 20, 2026 •

edited

Loading

github-actions bot commented Jan 20, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-01-20 15:28 UTC.
Preview will be ready when the GitHub Pages deployment is complete.