feat: new image parsing on Environment page #2785

agatha197 · 2024-10-29T04:43:34Z

Extended Image Information Support

This PR adds support for extended image information in the ImageList component and related translations. It introduces new fields and modifies the display of image details when the backend supports the 'extended-image-info' feature.

Checklist:

Minimum required manager version: 24.09.1

Changes

Updated ImageListQuery to include new fields: namespace, base_image_name, tags, and version.
Modified the ImageList component to conditionally render columns based on the supportExtendedImageInfo flag.
Added new translations for "Base image name" and "Tags" in multiple languages.
Updated the backend client to support the 'extended-image-info' feature for manager version 24.09.1 and above.

Impact

Users will see more detailed image information when using a compatible backend version.
The image list will display new columns for base image name and tags when supported.
Existing functionality is preserved for older backend versions.

Review Notes

Verify that the image list displays correctly with both old and new backend versions.
Check that new translations are applied correctly in different languages.
Ensure that sorting and filtering work properly with the new fields.

How to test

Checkout core branch to topic/10-22-feature_add_info_field_to_gql_image_schema fix: Strengthen join condition between kernels and images backend.ai#2993
Go to Environment page.

What to check:

Check the data is valid.
- Since 24.09.1: Full image path, Registry, Architecture, Namespace, Base image name, Version, Tags, Digest, Resource limit, Control.
- Before 24.09.1: Full image path, Registry, Architecture, Name, Language, Version, Base, Constraints, Digest, Resource limit, Control.
All data is highlightable by searching images.
Sortable data works fine.

Screenshots

graphite-app · 2024-10-29T04:43:39Z

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

agatha197 · 2024-10-29T04:43:48Z

feat: add table column setting to Environments page #2789 : 2 dependent PRs (#2788 , #2796 )
feat: replace name with namespace #2787
feat: new image parsing on Environment page #2785 👈
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @agatha197 and the rest of your teammates on Graphite

github-actions · 2024-10-29T04:44:59Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.92%	349/7099
🔴	Branches	4.5%	218/4844
🔴	Functions	2.86%	67/2345
🔴	Lines	4.81%	334/6942

Test suite run success

93 tests passing in 12 suites.

Report generated by 🧪jest coverage report action from b0d7ea2

react/src/components/ImageList.tsx

ironAiken2

(dismissed)

ironAiken2

Please change the Table Column name to start with an uppercase letter... sorry I missed it.

e.g.) Full image path -> Full Image Path

yomybaby

Please check my suggestion.

react/src/hooks/index.tsx

yomybaby

LGTM

agatha197 · 2024-11-04T07:45:18Z

Please change the Table Column name to start with an uppercase letter... sorry I missed it.

e.g.) Full image path -> Full Image Path

I followed Backend.AI Writing Rules 😉

ironAiken2

LGTM

graphite-app · 2024-11-05T09:53:11Z

Merge activity

Nov 5, 4:53 AM EST: A user added this pull request to the Graphite merge queue.
Nov 5, 4:54 AM EST: A user merged this pull request with the Graphite merge queue.

related PR: lablup/backend.ai#2939 # Extended Image Information Support This PR adds support for extended image information in the ImageList component and related translations. It introduces new fields and modifies the display of image details when the backend supports the 'extended-image-info' feature. **Checklist:** - [ ] Minimum required manager version: 24.09.1 ## Changes 1. Updated `ImageListQuery` to include new fields: `namespace`, `base_image_name`, `tags`, and `version`. 2. Modified the ImageList component to conditionally render columns based on the `supportExtendedImageInfo` flag. 3. Added new translations for "Base image name" and "Tags" in multiple languages. 4. Updated the backend client to support the 'extended-image-info' feature for manager version 24.09.1 and above. ## Impact - Users will see more detailed image information when using a compatible backend version. - The image list will display new columns for base image name and tags when supported. - Existing functionality is preserved for older backend versions. ## Review Notes - Verify that the image list displays correctly with both old and new backend versions. - Check that new translations are applied correctly in different languages. - Ensure that sorting and filtering work properly with the new fields. ## How to test 1. Checkout core branch to `topic/10-22-feature_add_info_field_to_gql_image_schema` lablup/backend.ai#2993 2. Go to Environment page. ## What to check: - [ ] Check the data is valid. - [ ] Since 24.09.1: Full image path, Registry, Architecture, Namespace, Base image name, Version, Tags, Digest, Resource limit, Control. - [ ] Before 24.09.1: Full image path, Registry, Architecture, Name, Language, Version, Base, Constraints, Digest, Resource limit, Control. - [ ] All data is highlightable by searching images. - [ ] Sortable data works fine. ## Screenshots ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/88e5ad80-559a-4b41-a93a-5a08f3a4c062.png)

# Support for Extended Image Info This PR introduces support for the extended image info feature, which affects how image namespaces are handled and displayed throughout the application. **Changes:** - Added a `supportExtendedImageInfo` flag based on the backend client's capabilities - Updated image queries to use `namespace` instead of `name` when extended image info is supported - Modified image full name generation to prioritize `namespace` over `name` - Adjusted environment selection logic to use `namespace` when available - Updated table columns in MyEnvironmentPage to display and sort by `namespace` when supported **Rationale:** These changes allow the application to work with both the old and new image information structures, providing a smooth transition as the backend evolves. **Effects:** - Users will see more accurate namespace information when using a backend that supports extended image info - Developers should be aware of the `supportExtendedImageInfo` flag when working with image-related components **How to test:** 1. Checkout core branch to `topic/10-22-feature_add_info_field_to_gql_image_schema` 2. Check the environments, my environments, session page which are using `namespace` (before lablup/backend.ai#2939, it was `name`.) of `images` query. **Screenshots:** In #2785, the part of the full image path field had `undefined`. But it has some value now. ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/a2553afe-d555-40b3-bc4e-bb1b79fa4b87.png) **Checklist:** - [ ] Mention to the original issue - [ ] Documentation - [x] Minium required manager version: 24.09.1 - [x] Specific setting for review - [x] Minimum requirements to check during review: - Verify that image namespaces are correctly displayed and used when extended image info is supported - Ensure backwards compatibility with older backend versions - [ ] Test case(s) to demonstrate the difference of before/after

**Changes:** Refactored image handling similar to #2785 and #2795 for versions before 24.12. Before 24.12, most data parsing is handled on the frontend. Key changes: - Consolidated separate tag components (BaseImageTags, ConstraintTags, LangTags) into a single ImageTags component - Simplified image metadata extraction by using string operations instead of complex parsing - Removed redundant language column and consolidated information into Tags column - Added new getTags utility function to consistently parse and format image tag information - Updated image search functionality to search through tag keys and values **Impact:** - Cleaner, more consistent display of image metadata in the UI - More maintainable code structure for handling image tags - Improved search capabilities across image metadata **Screenshots:** ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/483e263b-88bc-4d5e-8a22-d3e219695f76.png) **What to check:** Data parsing is the same as 24.12. **Checklist:** - [ ] Mention to the original issue - [ ] Documentation - [x] Minium required manager version: manager < 24.12 - [x] Specific setting for review: 10.100.64.15 - [x] Minimum requirements to check during review - [ ] Test case(s) to demonstrate the difference of before/after: will be handled in another stack

github-actions bot assigned agatha197 Oct 29, 2024

github-actions bot added area:lib Library and SDK related issue. area:ux UI / UX issue. area:i18n Localization size:L 100~500 LoC labels Oct 29, 2024

agatha197 requested review from fregataa, ironAiken2 and yomybaby October 29, 2024 04:46

agatha197 added this to the 24.09 milestone Oct 29, 2024

agatha197 changed the title ~~feat: new image parsing~~ feat: new image parsing on Environment page Oct 29, 2024

agatha197 force-pushed the feature/new-image-parsing branch from f63248b to a9c7a72 Compare October 29, 2024 07:14

graphite-app bot reviewed Oct 29, 2024

View reviewed changes

react/src/components/ImageList.tsx Show resolved Hide resolved

agatha197 force-pushed the feature/new-image-parsing branch 3 times, most recently from cffcb89 to 3e63d3e Compare October 29, 2024 07:28

agatha197 marked this pull request as draft October 29, 2024 07:47

agatha197 force-pushed the feature/new-image-parsing branch from 3e63d3e to 5729ef6 Compare October 29, 2024 08:03

github-actions bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels Oct 29, 2024

agatha197 force-pushed the feature/new-image-parsing branch 2 times, most recently from 584f0dc to b5b801e Compare October 29, 2024 09:09

agatha197 mentioned this pull request Oct 29, 2024

feat: replace name with namespace #2787

Merged

6 tasks

agatha197 marked this pull request as ready for review October 29, 2024 09:17

This was referenced Oct 29, 2024

feat: add AliasedBaseImageName #2788

Closed

feat: add table column setting to Environments page #2789

Merged

agatha197 force-pushed the feature/new-image-parsing branch from b5b801e to e29820c Compare October 29, 2024 10:52

agatha197 mentioned this pull request Oct 31, 2024

refactor: MyEnvironmentPage into two components #2794

Merged

3 tasks

agatha197 force-pushed the feature/new-image-parsing branch from 6c80e2e to c8727b0 Compare November 1, 2024 04:07

ironAiken2 approved these changes Nov 1, 2024

View reviewed changes

ironAiken2 requested changes Nov 1, 2024

View reviewed changes

agatha197 force-pushed the feature/new-image-parsing branch from c8727b0 to 7993b68 Compare November 1, 2024 07:53

agatha197 mentioned this pull request Nov 1, 2024

refactor: improve image filter of ImageList #2805

Merged

2 tasks

yomybaby requested changes Nov 1, 2024

View reviewed changes

react/src/hooks/index.tsx Outdated Show resolved Hide resolved

agatha197 mentioned this pull request Nov 1, 2024

fix: change from 24.09.1. to 24.09.1 #2807

Closed

2 tasks

yomybaby force-pushed the feature/new-image-parsing branch from 7993b68 to 8b7d2a6 Compare November 1, 2024 09:22

agatha197 force-pushed the feature/new-image-parsing branch from 8b7d2a6 to 483a427 Compare November 1, 2024 09:45

agatha197 requested review from ironAiken2 and yomybaby November 4, 2024 02:29

yomybaby approved these changes Nov 4, 2024

View reviewed changes

agatha197 mentioned this pull request Nov 4, 2024

test: add getImageFullName tests #2810

Merged

6 tasks

agatha197 force-pushed the feature/new-image-parsing branch 3 times, most recently from 07ac58f to 1aaa31b Compare November 4, 2024 07:37

ironAiken2 approved these changes Nov 4, 2024

View reviewed changes

agatha197 mentioned this pull request Nov 4, 2024

fix: change extended-image-info version to 24.12.0 #2811

Merged

2 tasks

agatha197 modified the milestones: 24.09, 24.12 Nov 4, 2024

agatha197 force-pushed the feature/new-image-parsing branch from 1aaa31b to b0d7ea2 Compare November 5, 2024 09:53

graphite-app bot merged commit b0d7ea2 into main Nov 5, 2024
6 checks passed

graphite-app bot deleted the feature/new-image-parsing branch November 5, 2024 09:54

github-pages bot temporarily deployed to github-pages November 5, 2024 09:54 Inactive

agatha197 mentioned this pull request Nov 5, 2024

refactor: parsing image data for versions before 24.12 #2817

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new image parsing on Environment page #2785

feat: new image parsing on Environment page #2785

agatha197 commented Oct 29, 2024 •

edited by yomybaby

Loading

graphite-app bot commented Oct 29, 2024

agatha197 commented Oct 29, 2024 •

edited

Loading

github-actions bot commented Oct 29, 2024 •

edited

Loading

ironAiken2 left a comment •

edited

Loading

ironAiken2 left a comment •

edited

Loading

yomybaby left a comment

yomybaby left a comment

agatha197 commented Nov 4, 2024

ironAiken2 left a comment

graphite-app bot commented Nov 5, 2024 •

edited

Loading

feat: new image parsing on Environment page #2785

feat: new image parsing on Environment page #2785

Conversation

agatha197 commented Oct 29, 2024 • edited by yomybaby Loading

Extended Image Information Support

Changes

Impact

Review Notes

How to test

What to check:

Screenshots

graphite-app bot commented Oct 29, 2024

Your org requires the Graphite merge queue for merging into main

agatha197 commented Oct 29, 2024 • edited Loading

github-actions bot commented Oct 29, 2024 • edited Loading

Coverage report for ./react

Test suite run success

ironAiken2 left a comment • edited Loading

Choose a reason for hiding this comment

ironAiken2 left a comment • edited Loading

Choose a reason for hiding this comment

yomybaby left a comment

Choose a reason for hiding this comment

yomybaby left a comment

Choose a reason for hiding this comment

agatha197 commented Nov 4, 2024

ironAiken2 left a comment

Choose a reason for hiding this comment

graphite-app bot commented Nov 5, 2024 • edited Loading

Merge activity

agatha197 commented Oct 29, 2024 •

edited by yomybaby

Loading

agatha197 commented Oct 29, 2024 •

edited

Loading

github-actions bot commented Oct 29, 2024 •

edited

Loading

Coverage report for `./react`

ironAiken2 left a comment •

edited

Loading

ironAiken2 left a comment •

edited

Loading

graphite-app bot commented Nov 5, 2024 •

edited

Loading