Skip to content

Commit 15a8313

Browse files
jimmykarilyjimmykarily
authored
3266 access previous builds (#364)
* Add builds tab Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Add navigation logic and build modal Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Move to a more Alpine.js native implementation and fix variouis issues with websocket connections appearing as disconnected while still streaming logs Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Delete legace "ws" endpoint and stick to the same endpoint for all logs for any type of job: running, completed, etc Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Don't open a new tab for downloads Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Make build list filter work and maintain across tab switches Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Add tests (currently failing some) Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Add Makefile to simplify dev auroraboot invocation This will do the trick now: make dev ARGS="--builds-dir /builds --create-worker" Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Add make targets for js tests Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Fix reactivity in alpine.js in a more native way Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Make "esc" close the modal Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Fix filter in url Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Open modal when the url points to a build directly and add cleanup login in tests Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Match direct tab url even if it has url params Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Make "back" button close the modal Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Fix failing test Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Fix tests Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Sanitize paths to avoid traversal Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Make auroraboot work with builds Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Improve colors and make sure we are running the correct binary Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Minor fixes based on copilot review Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> * Revert the computed properly change because it broke reactivity Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me> --------- Signed-off-by: Dimitris Karakasilis <dimitris@karakasilis.me>
1 parent ca486aa commit 15a8313

File tree

19 files changed

+2734
-525
lines changed

19 files changed

+2734
-525
lines changed

‎Makefile‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
# AuroraBoot Makefile
2+
# Development and build targets for AuroraBoot
3+
4+
.PHONY: help dev build-js build-go build clean clean-js clean-go run-docker build-docker test
5+
6+
# Default target
7+
help: ## Show this help message
8+
@echo "AuroraBoot Development Makefile"
9+
@echo "================================"
10+
@echo ""
11+
@echo "Available targets:"
12+
@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf " %-15s %s\n", $$1, $$2}' $(MAKEFILE_LIST)
13+
@echo ""
14+
@echo "Usage examples:"
15+
@echo " make dev # Run with default settings"
16+
@echo " make dev ARGS=\"--builds-dir /builds\" # Run with custom builds directory"
17+
@echo " make dev ARGS=\"--address :9090 --create-worker\" # Run with custom address and worker"
18+
@echo ""
19+
@echo "Available web command flags:"
20+
@echo " --address string Listen address (default: :8080)"
21+
@echo " --artifact-dir string Artifact directory (default: /tmp/artifacts)"
22+
@echo " --builds-dir string Directory to store build jobs (default: /tmp/kairos-builds)"
23+
@echo " --create-worker Start a local worker in a goroutine"
24+
25+
# Development target - builds everything and runs with local binary
26+
dev: build-js build-go ## Build JS assets, compile Go binary, and run Docker image with mounted binary
27+
@echo "Starting AuroraBoot in development mode..."
28+
@mkdir -p builds
29+
docker run --rm \
30+
--privileged \
31+
--net host \
32+
--entrypoint /usr/sbin/auroraboot \
33+
-v $(PWD)/auroraboot:/usr/sbin/auroraboot \
34+
-v $(PWD)/builds:/builds \
35+
-v /dev:/dev \
36+
-v /var/run/docker.sock:/var/run/docker.sock \
37+
quay.io/kairos/auroraboot web --builds-dir /builds --create-worker $(ARGS)
38+
39+
# Build JavaScript assets (only if needed)
40+
build-js: internal/web/app/package.json ## Build JavaScript and CSS assets
41+
@echo "Installing JS dependencies..."
42+
npm install --prefix internal/web/app
43+
@echo "Bundling JavaScript..."
44+
npx --prefix internal/web/app esbuild ./internal/web/app/index.js --bundle --outfile=internal/web/app/bundle.js
45+
@echo "Building CSS with Tailwind..."
46+
npx --prefix internal/web/app tailwindcss -i ./internal/web/app/assets/css/tailwind.css -o internal/web/app/output.css --minify
47+
@echo "JS assets built successfully!"
48+
49+
# Build Go binary
50+
build-go: ## Build the Go binary
51+
@echo "Building Go binary..."
52+
go build -ldflags "-X main.version=v0.0.0" -o auroraboot
53+
@echo "Go binary built successfully!"
54+
55+
# Build everything
56+
build: build-js build-go ## Build all assets and Go binary
57+
58+
# Clean JavaScript build artifacts (but keep node_modules)
59+
clean-js: ## Clean JavaScript build artifacts (keeps node_modules)
60+
@echo "Cleaning JS build artifacts..."
61+
rm -f internal/web/app/bundle.js
62+
rm -f internal/web/app/output.css
63+
@echo "JS artifacts cleaned!"
64+
65+
# Clean JavaScript dependencies (removes node_modules)
66+
clean-js-deps: ## Clean JavaScript dependencies (removes node_modules)
67+
@echo "Cleaning JS dependencies..."
68+
rm -rf internal/web/app/node_modules
69+
rm -f internal/web/app/package-lock.json
70+
@echo "JS dependencies cleaned!"
71+
72+
# Clean Go build artifacts
73+
clean-go: ## Clean Go build artifacts
74+
@echo "Cleaning Go build artifacts..."
75+
rm -f auroraboot
76+
@echo "Go artifacts cleaned!"
77+
78+
# Clean everything (including node_modules)
79+
clean: clean-js-deps clean-go ## Clean all build artifacts including dependencies
80+
81+
# Clean build artifacts only (keep dependencies)
82+
clean-build: clean-js clean-go ## Clean build artifacts only (keep dependencies)
83+
84+
# Run the Docker image (assumes binary is already built)
85+
run-docker: ## Run the Docker image with mounted binary
86+
@if [ ! -f auroraboot ]; then echo "Error: auroraboot binary not found. Run 'make build-go' first."; exit 1; fi
87+
@mkdir -p builds
88+
docker run --rm \
89+
--net host \
90+
-v $(PWD)/auroraboot:/usr/sbin/auroraboot \
91+
-v $(PWD)/builds:/builds \
92+
quay.io/kairos/auroraboot web --builds-dir /builds --create-worker $(ARGS)
93+
94+
# Build Docker image
95+
build-docker: ## Build the Docker image
96+
docker build -t auroraboot:local .
97+
98+
# Run tests
99+
test: ## Run tests
100+
go test ./...
101+
102+
# Install dependencies (for development)
103+
install-deps: ## Install development dependencies
104+
@echo "Installing Go dependencies..."
105+
go mod download
106+
@echo "Installing JS dependencies..."
107+
npm install --prefix internal/web/app
108+
@echo "Dependencies installed!"
109+
110+
# Format code
111+
fmt: ## Format Go code
112+
go fmt ./...
113+
114+
# Lint code
115+
lint: ## Lint Go code
116+
golangci-lint run
117+
118+
# Generate swagger docs
119+
swagger: ## Generate swagger documentation
120+
swag init -g main.go --output internal/web/app --parseDependency --parseInternal --parseDepth 1 --parseVendor
121+
122+
# Quick development cycle (build and run)
123+
quick: build-js build-go run-docker ## Quick build and run cycle
124+
125+
126+
# Test targets
127+
test-js: build-js build-go ## Run JavaScript E2E tests (starts server, runs tests, stops server)
128+
@echo "Starting AuroraBoot server for testing..."
129+
@mkdir -p builds
130+
@# Start server in background and capture PID
131+
@docker run --rm -d \
132+
--name auroraboot-test-server \
133+
--net host \
134+
-v $(PWD)/auroraboot:/usr/bin/auroraboot \
135+
-v $(PWD)/builds:/builds \
136+
quay.io/kairos/auroraboot web --builds-dir /builds --create-worker > /tmp/auroraboot-test.pid || true
137+
@echo "Waiting for server to be ready..."
138+
@# Wait for server to be ready (up to 30 seconds)
139+
@for i in $$(seq 1 30); do \
140+
if curl -s http://localhost:8080 > /dev/null 2>&1; then \
141+
echo "Server is ready!"; \
142+
break; \
143+
fi; \
144+
echo "Waiting for server... ($$i/30)"; \
145+
sleep 1; \
146+
done
147+
@# Run the tests with proper cleanup
148+
@echo "Running JavaScript E2E tests..."
149+
@cd e2e/web && npm install && npm test; \
150+
TEST_EXIT_CODE=$$?; \
151+
echo "Stopping test server..."; \
152+
docker stop auroraboot-test-server > /dev/null 2>&1 || true; \
153+
rm -f /tmp/auroraboot-test.pid; \
154+
echo "Tests completed!"; \
155+
exit $$TEST_EXIT_CODE
156+
157+
test-js-open: build-js build-go ## Run JavaScript E2E tests in interactive mode (starts server, opens Cypress, stops server)
158+
@echo "Starting AuroraBoot server for testing..."
159+
@mkdir -p builds
160+
@# Start server in background
161+
@docker run --rm -d \
162+
--name auroraboot-test-server \
163+
--net host \
164+
-v $(PWD)/auroraboot:/usr/bin/auroraboot \
165+
-v $(PWD)/builds:/builds \
166+
quay.io/kairos/auroraboot web --builds-dir /builds --create-worker > /tmp/auroraboot-test.pid || true
167+
@echo "Waiting for server to be ready..."
168+
@# Wait for server to be ready (up to 30 seconds)
169+
@for i in $$(seq 1 30); do \
170+
if curl -s http://localhost:8080 > /dev/null 2>&1; then \
171+
echo "Server is ready!"; \
172+
break; \
173+
fi; \
174+
echo "Waiting for server... ($$i/30)"; \
175+
sleep 1; \
176+
done
177+
@# Run the tests in interactive mode with proper cleanup
178+
@echo "Opening Cypress in interactive mode..."
179+
@cd e2e/web && npm install && npm run test:open; \
180+
TEST_EXIT_CODE=$$?; \
181+
echo "Stopping test server..."; \
182+
docker stop auroraboot-test-server > /dev/null 2>&1 || true; \
183+
rm -f /tmp/auroraboot-test.pid; \
184+
echo "Interactive tests completed!"; \
185+
exit $$TEST_EXIT_CODE
186+
187+
test-js-stop: ## Stop any running test server
188+
@echo "Stopping test server..."
189+
@docker stop auroraboot-test-server > /dev/null 2>&1 || true
190+
@rm -f /tmp/auroraboot-test.pid
191+
@echo "Test server stopped!"
192+

‎e2e/web/README.md‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
# E2E Web Tests for AuroraBoot
2+
3+
This directory contains end-to-end tests for the AuroraBoot web interface using Cypress.
4+
5+
## Test Coverage
6+
7+
The test suite covers the following functionality:
8+
9+
### Original Features (`scpec.cy.js`)
10+
- Accordion-based build form interface
11+
- Form validation and submission
12+
- Architecture-specific options (ARM/AMD64)
13+
- BYOI (Bring Your Own Image) functionality
14+
15+
### New Tab and Filter Features (`builds-tab.cy.js`)
16+
- Tab navigation between "New Build" and "Builds List"
17+
- URL synchronization with tab state
18+
- Status filter functionality with URL persistence
19+
- Tab-specific URL parameter handling
20+
- Browser back/forward navigation
21+
- Filter state preservation across tab switches
22+
- Direct URL access to filtered views
23+
24+
### Build Modal and Logs (`build-logs.cy.js`)
25+
- Build list display and interaction
26+
- Build modal opening/closing
27+
- URL synchronization with selected build
28+
- Build summary display
29+
- Artifact listing for completed builds
30+
- Log access for previous builds via WebSocket
31+
- Status indicators and visual feedback
32+
- Responsive design testing
33+
- Keyboard accessibility
34+
35+
## Running Tests
36+
37+
### Prerequisites
38+
```bash
39+
cd e2e/web
40+
npm install
41+
```
42+
43+
### Test Commands
44+
45+
#### Run all tests
46+
```bash
47+
npm test
48+
```
49+
50+
#### Open Cypress UI for interactive testing
51+
```bash
52+
npm run test:open
53+
```
54+
55+
#### Run specific test suites
56+
```bash
57+
# Test tab navigation and filtering
58+
npm run test:builds
59+
60+
# Test build modal and logs
61+
npm run test:logs
62+
63+
# Test original form functionality
64+
npm run test:original
65+
66+
# Run headless
67+
npm run test:headless
68+
```
69+
70+
### Running with Different Browsers
71+
```bash
72+
# Chrome (default)
73+
npx cypress run
74+
75+
# Firefox
76+
npx cypress run --browser firefox
77+
78+
# Edge
79+
npx cypress run --browser edge
80+
```
81+
82+
## Test Structure
83+
84+
### API Mocking
85+
Tests use `cy.intercept()` to mock API responses, allowing for:
86+
- Testing different build statuses
87+
- Simulating loading states
88+
- Testing error conditions
89+
- Consistent test data
90+
91+
### WebSocket Testing
92+
Build logs functionality is tested by:
93+
- Mocking WebSocket connections
94+
- Simulating real-time log streaming
95+
- Testing connection errors and recovery
96+
- Verifying proper connection cleanup
97+
98+
### URL Testing
99+
Comprehensive URL state testing covers:
100+
- Hash-based tab navigation (`#builds`)
101+
- Query parameter persistence (`?status=running&build=uuid`)
102+
- Tab-specific parameter isolation
103+
- Browser navigation integration
104+
105+
## Test Data
106+
107+
Tests use mock data that matches the actual API schema:
108+
```javascript
109+
const mockBuild = {
110+
uuid: '123e4567-e89b-12d3-a456-426614174000',
111+
image: 'ubuntu:24.04',
112+
architecture: 'amd64',
113+
model: 'generic',
114+
variant: 'core',
115+
version: '1.0.0',
116+
status: 'complete',
117+
created_at: '2024-01-01T12:00:00Z'
118+
}
119+
```
120+
121+
## Best Practices
122+
123+
### Test Isolation
124+
- Each test starts with a clean state
125+
- API responses are mocked per test
126+
- No dependencies between tests
127+
128+
### Responsive Testing
129+
- Tests verify functionality across viewport sizes
130+
- Mobile, tablet, and desktop layouts are covered
131+
- Touch interactions are tested where applicable
132+
133+
### Accessibility
134+
- Keyboard navigation is tested
135+
- Focus management is verified
136+
- Screen reader compatibility is considered
137+
138+
## Integration with Backend Tests
139+
140+
The E2E tests complement the Go-based API tests:
141+
- **Go tests**: Verify API contract and business logic
142+
- **Cypress tests**: Verify user interface and user experience
143+
- **Combined**: Ensure end-to-end functionality
144+
145+
## CI/CD Integration
146+
147+
Tests can be integrated into CI/CD pipelines:
148+
```bash
149+
# Start AuroraBoot server
150+
./start.sh &
151+
152+
# Wait for server to be ready
153+
sleep 5
154+
155+
# Run E2E tests
156+
cd e2e/web && npm test
157+
158+
# Clean up
159+
pkill auroraboot
160+
```
161+
162+
## Debugging Tests
163+
164+
### Interactive Mode
165+
```bash
166+
npm run test:open
167+
```
168+
169+
### Debug Information
170+
- Screenshots are captured on failure
171+
- Video recordings for headless runs
172+
- Console logs are preserved
173+
- Network request details are logged
174+
175+
### Common Issues
176+
1. **Server not running**: Ensure AuroraBoot is accessible at `http://localhost:8080`
177+
2. **Timing issues**: Use `cy.wait()` for async operations
178+
3. **Element not found**: Verify Alpine.js has initialized with `cy.get('#accordion-collapse').should('exist')`

0 commit comments

Comments
 (0)