feat(ui): visualize oci annotation #3715

Marvin9 · 2025-03-25T19:50:03Z

head from #3676

Signed-off-by: Hidde Beydals <hidde@hhh.computer>

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

netlify · 2025-03-25T19:50:19Z

✅ Deploy Preview for docs-kargo-io ready!

Name	Link
🔨 Latest commit	`c402fd1`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-kargo-io/deploys/67e5a5e1d2311a0008b066ac
😎 Deploy Preview	https://deploy-preview-3715.docs.kargo.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2025-03-25T19:54:37Z

Codecov Report

Attention: Patch coverage is 45.45455% with 12 lines in your changes missing coverage. Please review.

Project coverage is 21.90%. Comparing base (9e5eafa) to head (c402fd1).
Report is 6 commits behind head on main.

Files with missing lines	Patch %	Lines
internal/image/repository_client.go	45.45%	9 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3715      +/-   ##
==========================================
+ Coverage   21.82%   21.90%   +0.08%     
==========================================
  Files         312      313       +1     
  Lines       65571    65708     +137     
==========================================
+ Hits        14311    14396      +85     
- Misses      50490    50536      +46     
- Partials      770      776       +6

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

krancour · 2025-03-25T22:36:50Z

@Marvin9 I test drove this with arbitrary annotation foo=bar and didn't see it come through in the UI. Looking at the code, it seems this only displays two specific, well-defined annotations. Have I got that right?

If so, I am wondering if it would be better to display all the annotations that @hiddeco's changes find.

@jessesuen how were you expecting this to work?

Marvin9 · 2025-03-26T04:22:53Z

Correct @krancour its because those are the thing that are meaningful, all other annotation you can see it from manifest. I will update at least freight details to show more raw annotation values

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

Marvin9 · 2025-03-26T09:45:03Z

@krancour would you test this again? Now it shows all OCI annotation in freight details

jessesuen · 2025-03-26T21:52:34Z

Sorry for commenting late but I was in agreement with Kent in that we should be able to see all the annotations.

Marvin9 · 2025-03-27T02:03:17Z

Sorry for commenting late but I was in agreement with Kent in that we should be able to see all the annotations.

I have updated UI to show all OCI in freight details. @krancour Please test now

nikolay-te · 2025-03-27T10:08:36Z

This is great! Would these be also eventually be accessible in the freight, e.g. be able to use them during promotions?

hiddeco · 2025-03-27T11:30:53Z

@nikolay-te the imageFrom() expression function will return an object with an Annotations field.

krancour · 2025-03-27T12:12:39Z

I was in agreement with Kent in that we should be able to see all the annotations.

@jessesuen, my apologies, but we need more clarification still...

Is "all" really all just those with predefined keys?

Currently this still will not show completely arbitrary ones like foo: bar.

rpelczar · 2025-03-27T12:44:19Z

ui/src/features/freight-timeline/open-container-initiative.ts

+export const getImageSource = (annotation: Annotation) => {
+  const url = annotation?.[ociAnnotationKeys.source];
+  const revision = annotation?.[ociAnnotationKeys.revision];
+
+  if (!revision) {
+    return url;
+  }
+
+  let baseUrl;
+
+  if (url.includes('github.com')) {
+    baseUrl = url
+      .replace(/^git@github.com:/, 'https://github.com/')
+      .replace(/^https?:\/\/github.com\//, 'https://github.com/')
+      .replace(/\.git$/, '');
+    return `${baseUrl}/commit/${revision}`;
+  } else if (url.includes('gitlab.com')) {
+    baseUrl = url
+      .replace(/^git@gitlab.com:/, 'https://gitlab.com/')
+      .replace(/^https?:\/\/gitlab.com\//, 'https://gitlab.com/')
+      .replace(/\.git$/, '');
+    return `${baseUrl}/-/commit/${revision}`;
+  } else if (url.includes('bitbucket.org')) {
+    baseUrl = url
+      .replace(/^git@bitbucket.org:/, 'https://bitbucket.org/')
+      .replace(/^https?:\/\/bitbucket.org\//, 'https://bitbucket.org/')
+      .replace(/\.git$/, '');
+    return `${baseUrl}/commits/${revision}`;
+  }
+
+  return url;
+};


Isn't better to use something similar to this? https://github.com/argoproj/argo-cd/blob/master/ui/src/app/shared/components/urls.ts

I think its fine

rpelczar · 2025-03-27T12:47:40Z

ui/src/features/freight-timeline/open-container-initiative.ts

Rename this to utils.ts or add utils as a suffix.

I would add suffix. I learnt from @krancour in backend that util name is code smell and that kind of stuck to me because truly its hard to know what it contains and also hard to find the file by function name.

ui/src/features/freight-timeline/freight-content-item.tsx

ui/src/features/freight/flatten-freight-origin.ts

jessesuen · 2025-03-27T17:29:04Z

Currently this still will not show completely arbitrary ones like foo: bar.

I meant all as in any annotation, including foo: bar. I suspect there would be use cases to see annotations outside the image standard, especially when the OCI artifact is not container image related (e.g. wasm, yaml manifests). If we think seeing too many annotations would be an issue in the future, we could always have a toggle/preference to show only "standard" annotations.

krancour · 2025-03-27T17:30:04Z

Thank you for the clarification @jessesuen!

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

hiddeco and others added 6 commits March 19, 2025 21:37

feat(image): collect annotations

2716ccc

Signed-off-by: Hidde Beydals <hidde@hhh.computer>

feat(api): add annotations to image objects

b65f383

Signed-off-by: Hidde Beydals <hidde@hhh.computer>

feat(controller): mirror OCI annotations

588ced4

Signed-off-by: Hidde Beydals <hidde@hhh.computer>

feat(image): include descriptor annotations

985b771

Signed-off-by: Hidde Beydals <hidde@hhh.computer>

feat(ui): oci annotation

5cb54e6

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

chore(ui): update link

7bbe574

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

Marvin9 requested a review from a team as a code owner March 25, 2025 19:50

Marvin9 requested a review from rpelczar March 25, 2025 20:02

krancour added this to the v1.4.0 milestone Mar 25, 2025

krancour assigned Marvin9 Mar 25, 2025

krancour added area/ui kind/enhancement priority/high labels Mar 25, 2025

Marvin9 added 2 commits March 26, 2025 09:55

Merge remote-tracking branch 'origin' into Marvin9/oci-annotations-ui

48c1117

feat(ui): more oci details in freight details

f871dd7

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

rpelczar requested changes Mar 27, 2025

View reviewed changes

rpelczar approved these changes Mar 27, 2025

View reviewed changes

chore(ui): review updates

0a3acd9

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

Marvin9 added 5 commits March 28, 2025 00:35

fix: bug

20106a5

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

fix

38e5c10

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

fix

a047cf9

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

fix

2027a05

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

fix(ui): remove hardcoded

c402fd1

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>

krancour approved these changes Mar 27, 2025

View reviewed changes

Marvin9 enabled auto-merge March 27, 2025 19:27

Marvin9 added this pull request to the merge queue Mar 27, 2025

Merged via the queue into main with commit a5b6ada Mar 27, 2025
17 checks passed

Marvin9 deleted the Marvin9/oci-annotations-ui branch March 27, 2025 19:51

Marvin9 mentioned this pull request Mar 28, 2025

fix(ui): freight artifact name overflow issue #3742

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): visualize oci annotation #3715

feat(ui): visualize oci annotation #3715

Marvin9 commented Mar 25, 2025 •

edited

Loading

netlify bot commented Mar 25, 2025 •

edited

Loading

codecov bot commented Mar 25, 2025 •

edited

Loading

krancour commented Mar 25, 2025

Marvin9 commented Mar 26, 2025

Marvin9 commented Mar 26, 2025

jessesuen commented Mar 26, 2025

Marvin9 commented Mar 27, 2025

nikolay-te commented Mar 27, 2025

hiddeco commented Mar 27, 2025

krancour commented Mar 27, 2025

rpelczar Mar 27, 2025

Marvin9 Mar 27, 2025

rpelczar Mar 27, 2025

Marvin9 Mar 27, 2025

jessesuen commented Mar 27, 2025 •

edited

Loading

krancour commented Mar 27, 2025

feat(ui): visualize oci annotation #3715

feat(ui): visualize oci annotation #3715

Conversation

Marvin9 commented Mar 25, 2025 • edited Loading

netlify bot commented Mar 25, 2025 • edited Loading

✅ Deploy Preview for docs-kargo-io ready!

codecov bot commented Mar 25, 2025 • edited Loading

Codecov Report

krancour commented Mar 25, 2025

Marvin9 commented Mar 26, 2025

Marvin9 commented Mar 26, 2025

jessesuen commented Mar 26, 2025

Marvin9 commented Mar 27, 2025

nikolay-te commented Mar 27, 2025

hiddeco commented Mar 27, 2025

krancour commented Mar 27, 2025

rpelczar Mar 27, 2025

Choose a reason for hiding this comment

Marvin9 Mar 27, 2025

Choose a reason for hiding this comment

rpelczar Mar 27, 2025

Choose a reason for hiding this comment

Marvin9 Mar 27, 2025

Choose a reason for hiding this comment

jessesuen commented Mar 27, 2025 • edited Loading

krancour commented Mar 27, 2025

Marvin9 commented Mar 25, 2025 •

edited

Loading

netlify bot commented Mar 25, 2025 •

edited

Loading

codecov bot commented Mar 25, 2025 •

edited

Loading

jessesuen commented Mar 27, 2025 •

edited

Loading