AGH2 Component: UI
Relevant source files
The following files were used as context for generating this wiki page:The UI component is the web-based graphical user interface for the AGH2 application stack. It is a containerized frontend application deployed within a Kubernetes cluster via the AGH2 Helm chart. Its primary purpose is to provide users with an interactive way to manage and visualize data and operations within the AGH2 system.
This component is deployed as a standard Kubernetes Deployment and exposed for network traffic via a Service. Its configuration, including the container image, version, and environment variables, is managed through the Helm chart's values.yaml file. The UI component is part of the larger AGH2 application, versioned under the main chart.
Sources: charts/agh2/values.yaml:500-516, charts/agh2/templates/ui/ui-deployment.yml, charts/agh2/Chart.yaml:16-19
Architecture and Deployment
The UI component is managed by a Kubernetes Deployment resource named ui. This ensures that a specified number of replicas of the UI application are running and handles updates and rollbacks. The deployment is created only if ui.enabled is set to true in the Helm values.
The Deployment uses a selector with app: ui to manage its Pods. Each Pod created by the Deployment is also labeled with app: ui, ensuring the Service can correctly route traffic to it.
Sources: charts/agh2/templates/ui/ui-deployment.yml:1-12
The following diagram illustrates the Kubernetes objects involved in deploying the UI component.
This diagram shows how the ui Deployment manages ReplicaSets, which in turn create and manage the UI Pods.
Configuration
The UI component's configuration is defined in the ui section of the values.yaml file. These values allow for customization of the container image, pull policy, and other runtime settings.
| Parameter | Description | Default Value |
|---|---|---|
ui.enabled | Toggles the deployment of the UI module. | true |
ui.image.repository | The container image repository for the UI. | leukocyte-lab/argushack2/frontend |
ui.image.tag | The tag of the container image to deploy. | v2.24.3 |
ui.image.pullPolicy | The image pull policy for the container. | IfNotPresent |
ui.image.pullSecrets | Secrets for pulling the image from a private registry. | [] |
ui.extraEnv | Additional environment variables to be passed to the UI container. | {} |
Sources: charts/agh2/values.yaml:500-516, charts/agh2/README.md:255-262
Networking
The UI component is exposed within the Kubernetes cluster through a Service named ui. This service provides a stable endpoint for accessing the UI pods.
Service Definition
The service is of type ClusterIP (by default) and maps port 80 to the targetPort named web on the UI pods, which corresponds to container port 80.
# Source: charts/agh2/templates/ui/ui-service.yml
apiVersion: v1
kind: Service
metadata:
name: ui
spec:
selector:
app: ui
ports:
- port: 80
targetPort: web
Sources: charts/agh2/templates/ui/ui-service.yml:1-11
Request Flow
Typically, external traffic is routed to the UI service via an Ingress controller, which must be configured separately within the Helm chart.
The diagram below shows the network flow from an external user to a UI pod.
This diagram illustrates how an incoming request is routed through the Ingress to the UI Service, and finally to one of the running UI Pods.
Sources: charts/agh2/templates/ui/ui-service.yml:8-10, charts/agh2/values.yaml:50-52
Container Specification
The UI pod runs a single container named ui. The specification for this container is defined in the deployment template.
- Image: The container image is constructed from
ui.image.repositoryandui.image.tagfrom thevalues.yamlfile. - Ports: It exposes a single port
80with the nameweb. This is the port the web server inside the container listens on. - Image Pull Policy: The
imagePullPolicyis set toIfNotPresentby default, meaning the image is pulled only if it's not already on the node. - Restart Policy: The pod's
restartPolicyis set toAlways, ensuring Kubernetes will automatically restart the container if it fails.
# Source: charts/agh2/templates/ui/ui-deployment.yml
# ...
containers:
- name: ui
image: {{ include "ui.image" . }}
ports:
- name: web
containerPort: 80
imagePullPolicy: {{ .Values.ui.image.pullPolicy }}
restartPolicy: Always
# ...
Sources: charts/agh2/templates/ui/ui-deployment.yml:14-21
Summary
The AGH2 UI component serves as the primary user-facing interface for the platform. It is deployed as a scalable and configurable web application using a standard Kubernetes Deployment and Service pattern. Its configuration is managed centrally via the AGH2 Helm chart, allowing for easy customization of the image source and other runtime parameters. The component is designed to be exposed within the cluster and can be made accessible externally through an Ingress controller.