refactor: new image parsing on `CustomizedImageList` #2795

agatha197 · 2024-10-31T03:33:46Z

Changes:
Adds search functionality and enhanced display features to the customized image list, including:

New search bar with real-time filtering
Refresh button to reload image data
Copy button for full image paths
Text highlighting for search matches
New columns for base image name, version, and tags when extended image info is supported
Improved table loading states using transitions

Minimum required manager version: 24.09.1

How to test:

endpoint: 10.100.64.15

Checkout core branch to topic/10-22-feature_add_info_field_to_gql_image_schema
Visit My Environments 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, Control.
- Before 24.09.1: Full image path, Registry, Architecture, Name, Language, Version, Base, Constraints, Digest, Control.
All data is highlightable by searching images.
Sortable data works fine.

Requirements to check during review:

Search functionality filters across all relevant fields
Text highlighting properly emphasizes search terms
Copy button correctly copies the full image path
Table displays appropriate columns based on extended image info support
Loading states show correctly during search and refresh operations

The changes improve the user experience by making image information more accessible and searchable while maintaining backwards compatibility with existing functionality.

graphite-app · 2024-10-31T03:33:50Z

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-31T03:33:54Z

refactor: session launcher image parsing #2800 : 2 dependent PRs (#2807 , #2810 )
refactor: improve image filter of ImageList #2805
refactor: new image parsing on CustomizedImageList #2795 👈
refactor: MyEnvironmentPage into two components #2794
feat: add AliasedImageDoubleTags #2796
feat: add table column setting to Environments page #2789 : 1 other dependent PR (#2788 )
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

yomybaby

LGTM

yomybaby

LGTM

ironAiken2

LGTM

graphite-app · 2024-11-05T10:04:38Z

Merge activity

Nov 5, 5:04 AM EST: A user added this pull request to the Graphite merge queue.
Nov 5, 5:08 AM EST: The Graphite merge queue removed this pull request due to downstack failures on PR #2789.
Nov 5, 5:08 AM EST: The Graphite merge queue removed this pull request due to downstack failures on PR #2789.
Nov 5, 5:34 AM EST: A user added this pull request to the Graphite merge queue.
Nov 5, 5:45 AM EST: A user merged this pull request with the Graphite merge queue.

**Changes:** Adds search functionality and enhanced display features to the customized image list, including: - New search bar with real-time filtering - Refresh button to reload image data - Copy button for full image paths - Text highlighting for search matches - New columns for base image name, version, and tags when extended image info is supported - Improved table loading states using transitions **Minimum required manager version:** 24.09.1 **How to test:** > endpoint: 10.100.64.15 1. Checkout core branch to `topic/10-22-feature_add_info_field_to_gql_image_schema` 2. Visit My Environments 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, Control. - [ ] Before 24.09.1: Full image path, Registry, Architecture, Name, Language, Version, Base, Constraints, Digest, Control. - [ ] All data is highlightable by searching images. - [ ] Sortable data works fine. **Requirements to check during review:** - Search functionality filters across all relevant fields - Text highlighting properly emphasizes search terms - Copy button correctly copies the full image path - Table displays appropriate columns based on extended image info support - Loading states show correctly during search and refresh operations The changes improve the user experience by making image information more accessible and searchable while maintaining backwards compatibility with existing functionality. ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/c2eb081a-87d3-4eb0-8e9b-dfa76796b7ef.png)

## What to check I just separated MyEnvironmentPage into two components, moving the Card component to `MyEnvironmentPage`. Thus, you don't need to check the detailed logic of CustomizedImageList. To see the improved codes for CustomizedImageList, please refer #2795. --- **Changes:** Refactored the customized image list functionality by: - Extracting image list logic from MyEnvironmentPage into a new CustomizedImageList component - Simplified MyEnvironmentPage to use tabs and the new component - Added proper type definitions and GraphQL query/mutation handling - Implemented sorting, filtering, and column customization features - Added copy functionality for image names - Included delete confirmation dialogs with proper error handling **Checklist:** - [ ] Documentation - [x] Minimum required manager version: 24.09.1 (based on GraphQL schema changes) - [ ] Test cases needed: - Column customization persistence - Image deletion workflow - Sorting functionality across all columns - Copy image name feature The changes improve code organization and maintainability while preserving all existing functionality for managing customized container images.

**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

This was referenced Oct 31, 2024

feat: new image parsing on Environment page #2785

Merged

feat: replace name with namespace #2787

Merged

feat: add AliasedBaseImageName #2788

Closed

This was referenced Oct 31, 2024

feat: add table column setting to Environments page #2789

Merged

refactor: MyEnvironmentPage into two components #2794

Merged

github-actions bot assigned agatha197 Oct 31, 2024

github-actions bot added the size:L 100~500 LoC label Oct 31, 2024

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from e8e082a to 43f8c1e Compare October 31, 2024 03:37

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch 3 times, most recently from a64342c to 78211b2 Compare October 31, 2024 03:40

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from 43f8c1e to 2dce71b Compare October 31, 2024 03:43

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 78211b2 to 65a5ec2 Compare October 31, 2024 03:43

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from 2dce71b to 1c211d1 Compare October 31, 2024 03:50

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 65a5ec2 to ac0a741 Compare October 31, 2024 03:50

agatha197 mentioned this pull request Oct 31, 2024

feat: add AliasedImageDoubleTags #2796

Merged

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from 1c211d1 to ae05d34 Compare October 31, 2024 03:51

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from ac0a741 to dd1a9de Compare October 31, 2024 03:51

agatha197 requested review from ironAiken2 and yomybaby October 31, 2024 04:53

agatha197 added this to the 24.09 milestone Oct 31, 2024

agatha197 requested a review from lizable October 31, 2024 06:27

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from ae05d34 to f2eee29 Compare October 31, 2024 08:03

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from dd1a9de to 922f935 Compare October 31, 2024 08:03

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from f2eee29 to 5e111e7 Compare October 31, 2024 08:09

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 922f935 to 696f989 Compare October 31, 2024 08:09

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from 5e111e7 to feed2ae Compare October 31, 2024 08:13

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 696f989 to d1f8e39 Compare October 31, 2024 08:13

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 7326f14 to 298dd8a Compare November 4, 2024 06:51

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from c0d1d04 to 22293b5 Compare November 4, 2024 07:02

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 298dd8a to 3fb6857 Compare November 4, 2024 07:02

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from 22293b5 to 7bdbead Compare November 4, 2024 07:06

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch 2 times, most recently from f926e05 to 2784315 Compare November 4, 2024 07:09

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from 7bdbead to c1490e8 Compare November 4, 2024 07:38

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 2784315 to d8a869b Compare November 4, 2024 07:38

yomybaby approved these changes Nov 4, 2024

View reviewed changes

ironAiken2 approved these changes Nov 4, 2024

View reviewed changes

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from d8a869b to 0458203 Compare November 4, 2024 08:27

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 reactor/MyEnvironmentPage-into-two-components branch from c1490e8 to e42e855 Compare November 5, 2024 09:56

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 0458203 to 5530bee Compare November 5, 2024 09:57

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from e42e855 to 4db0daa Compare November 5, 2024 10:34

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 5530bee to 6667520 Compare November 5, 2024 10:34

agatha197 force-pushed the reactor/MyEnvironmentPage-into-two-components branch from 4db0daa to b61f9b6 Compare November 5, 2024 10:39

agatha197 force-pushed the refactor/new-image-parsing-on-CustomizedImageList branch from 6667520 to 3dd9cf0 Compare November 5, 2024 10:39

Base automatically changed from reactor/MyEnvironmentPage-into-two-components to main November 5, 2024 10:44

graphite-app bot merged commit 3dd9cf0 into main Nov 5, 2024
4 checks passed

graphite-app bot deleted the refactor/new-image-parsing-on-CustomizedImageList branch November 5, 2024 10:45

github-pages bot had a problem deploying to github-pages November 5, 2024 10:46 Error

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

refactor: new image parsing on `CustomizedImageList` #2795

refactor: new image parsing on `CustomizedImageList` #2795

agatha197 commented Oct 31, 2024 •

edited

Loading

graphite-app bot commented Oct 31, 2024

agatha197 commented Oct 31, 2024 •

edited

Loading

yomybaby left a comment

yomybaby left a comment

ironAiken2 left a comment

graphite-app bot commented Nov 5, 2024 •

edited

Loading

refactor: new image parsing on CustomizedImageList #2795

refactor: new image parsing on CustomizedImageList #2795

Conversation

agatha197 commented Oct 31, 2024 • edited Loading

graphite-app bot commented Oct 31, 2024

Your org requires the Graphite merge queue for merging into main

agatha197 commented Oct 31, 2024 • edited Loading

yomybaby left a comment

Choose a reason for hiding this comment

yomybaby left a comment

Choose a reason for hiding this comment

ironAiken2 left a comment

Choose a reason for hiding this comment

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

Merge activity

refactor: new image parsing on `CustomizedImageList` #2795

refactor: new image parsing on `CustomizedImageList` #2795

agatha197 commented Oct 31, 2024 •

edited

Loading

agatha197 commented Oct 31, 2024 •

edited

Loading

graphite-app bot commented Nov 5, 2024 •

edited

Loading