ECR Browser is a .NET 9 application designed to provide a user-friendly interface for browsing and managing container images stored in Amazon Elastic Container Registry (ECR). It consists of a Blazor-based frontend and a .NET backend for interacting with the AWS ECR service.
- Browse ECR Repositories: List and view container image repositories within your AWS account.
- View Image Details: Display detailed information about each image, including digest, tags, push date, pull date, and size.
- Filtering and Sorting: Filter images based on age, the number of images in a repository, and sort by pull date or size.
- Batch Image Deletion: Select and delete multiple images at once from your ECR repositories.
- Clipboard Integration: Easily copy image digests to the clipboard.
- Asynchronous Operations: Utilizes asynchronous operations for efficient data retrieval and management.
- Caching: Implements caching to improve performance and reduce API calls to AWS ECR.
- UI using MudBlazor: Modern and responsive UI components.
- Aspire Integration: Uses Aspire to orchestrate the application and its dependencies.
The application follows a multi-project structure:
- Ecr.Browser.AppHost: The Aspire AppHost project, responsible for orchestrating the application and its dependencies (like Redis for caching). See src/Ecr.Browser.AppHost/Program.cs.
- Ecr.Browser.Blazor: The Blazor frontend project, providing the user interface for browsing and managing ECR images. See src/Ecr.Browser.Blazor/Ecr.Browser.Blazor.csproj.
- Ecr.Browser.ServiceDefaults: Contains shared configurations and extensions for services, such as service discovery, health checks, and OpenTelemetry setup. See src/Ecr.Browser.ServiceDefaults/Extensions.cs.
- Ecr.Browser: The core library project, containing the business logic for interacting with AWS ECR. See src/Ecr.Browser/Ecr.Browser.csproj.
- RepositoriesPage (src/Ecr.Browser.Blazor/Components/Pages/RepositoriesPage.razor, src/Ecr.Browser.Blazor/Components/Pages/RepositoriesPage.razor.cs): This Blazor page displays the list of ECR repositories and their images. It handles filtering, sorting, and deletion of images. It uses the
MudTablecomponent to display the data. - EcrService (src/Ecr.Browser.Blazor/EcrService.cs): This service is responsible for fetching image data from ECR, caching it, and providing methods for deleting images. It uses
IFusionCachefor caching. - EcrClient (src/Ecr.Browser/EcrClient.cs): This class interacts directly with the AWS ECR API using the
IAmazonECRinterface. - ImageDetailsDto (src/Ecr.Browser/ImageDetailsDto.cs): A data transfer object representing the details of a container image.
- EcrBatchDelete (src/Ecr.Browser/EcrBatchDelete.cs): Represents a batch of images to be deleted from ECR.
- ClipboardService (src/Ecr.Browser.Blazor/ClipboardService.cs): Provides functionality to copy text to the clipboard using JavaScript interop.
- ConfirmationDialog (src/Ecr.Browser.Blazor/Components/Pages/ConfirmationDialog.razor): A reusable dialog component for confirming actions.
- Data Retrieval: The
RepositoriesPagecomponent calls theGetImagesAsyncmethod in theEcrServiceto retrieve image data. - Caching: The
EcrServiceusesIFusionCacheto cache the image data. If the data is not in the cache, it calls theGetImagesInnerAsyncmethod to fetch the data from ECR. - ECR Interaction: The
GetImagesInnerAsyncmethod uses theEcrClientto interact with the AWS ECR API. It retrieves a list of repositories and then retrieves the images for each repository. - Data Transformation: The
EcrClienttransforms the data received from the AWS ECR API intoImageDetailsDtoobjects using theToDtoextension method. - Data Display: The
RepositoriesPagecomponent displays the image data in aMudTablecomponent, allowing users to sort, filter, and select images for deletion. - Image Deletion: When the user selects images for deletion, the
RemoveImagesAsyncmethod is called. This method groups the selected images by repository, createsEcrBatchDeleteobjects, and calls theRemoveImageAsyncmethod in theEcrServiceto delete the images from ECR. - Local Cache Update: After deleting the images from ECR, the
RemoveLocalImagesmethod is called to update the local cache.
- .NET 9 SDK
- AWS Account
- AWS IAM Role with appropriate credentials to access ECR
- Docker (if running locally)
-
Clone the repository:
git clone https://github.com/jetersen/ecr-browser.git cd ecr-browser -
Configure AWS Credentials:
Ensure your AWS credentials are configured correctly. The application uses the AWS SDK for .NET, which supports various methods for configuring credentials, including environment variables, shared credentials files, and IAM roles.
-
Run the application:
Navigate to the Ecr.Browser.AppHost directory and run the application using the following command:
dotnet run
This will start the application and its dependencies, including Redis.
-
Access the UI:
Open your web browser and navigate to the URL displayed in the console output (typically
https://localhost:7148).
The application can be configured using environment variables and appsettings.json files.
The AWS SDK for .NET uses the standard AWS configuration methods. You can configure the AWS region and credentials using environment variables, shared credentials files, or IAM roles.
6F2E
The caching behavior is configured in the EcrService. The FusionCacheEntryOptions class is used to configure the cache duration and other options.
The application uses OpenTelemetry for tracing and metrics. The OpenTelemetry endpoint can be configured using the OTEL_EXPORTER_OTLP_ENDPOINT environment variable.
Contributions are welcome! Please submit a pull request with your changes.
This project is licensed under the MIT License.