Compare commits
1 Commits
main
...
5d3e0667de
| Author | SHA1 | Date | |
|---|---|---|---|
|
5d3e0667de |
@@ -1,10 +0,0 @@
|
||||
.git
|
||||
bin/
|
||||
.editorconfig
|
||||
.vscode/
|
||||
.idea/
|
||||
*.test
|
||||
LICENSE
|
||||
CONVENTIONS.md
|
||||
REPO_POLICIES.md
|
||||
README.md
|
||||
@@ -1,15 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
[*.go]
|
||||
indent_style = tab
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
31
.gitignore
vendored
31
.gitignore
vendored
@@ -1,31 +0,0 @@
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Editors
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
*.bak
|
||||
.idea/
|
||||
.vscode/
|
||||
*.sublime-*
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
|
||||
# Environment / secrets
|
||||
.env
|
||||
.env.*
|
||||
*.pem
|
||||
*.key
|
||||
|
||||
# Go
|
||||
bin/
|
||||
*.exe
|
||||
*.exe~
|
||||
*.dll
|
||||
*.so
|
||||
*.dylib
|
||||
*.test
|
||||
*.out
|
||||
14
Makefile
14
Makefile
@@ -1,4 +1,4 @@
|
||||
.PHONY: all build lint fmt fmt-check test check clean docker hooks
|
||||
.PHONY: all build lint fmt fmt-check test check clean
|
||||
|
||||
BINARY := upaasd
|
||||
VERSION := $(shell git describe --tags --always --dirty 2>/dev/null || echo "dev")
|
||||
@@ -22,22 +22,12 @@ fmt-check:
|
||||
@test -z "$$(gofmt -l .)" || (echo "Files not formatted:" && gofmt -l . && exit 1)
|
||||
|
||||
test:
|
||||
go test -v -race -cover -timeout 30s ./...
|
||||
go test -v -race -cover ./...
|
||||
|
||||
# Check runs all validation without making changes
|
||||
# Used by CI and Docker build - fails if anything is wrong
|
||||
check: fmt-check lint test
|
||||
@echo "==> All checks passed!"
|
||||
|
||||
docker:
|
||||
docker build .
|
||||
|
||||
hooks:
|
||||
@echo "Installing pre-commit hook..."
|
||||
@mkdir -p .git/hooks
|
||||
@printf '#!/bin/sh\nmake check\n' > .git/hooks/pre-commit
|
||||
@chmod +x .git/hooks/pre-commit
|
||||
@echo "Pre-commit hook installed."
|
||||
|
||||
clean:
|
||||
rm -rf bin/
|
||||
|
||||
13
README.md
13
README.md
@@ -110,14 +110,11 @@ chi Router ──► Middleware Stack ──► Handler
|
||||
### Commands
|
||||
|
||||
```bash
|
||||
make fmt # Format code
|
||||
make fmt-check # Check formatting (read-only, fails if unformatted)
|
||||
make lint # Run comprehensive linting
|
||||
make test # Run tests with race detection (30s timeout)
|
||||
make check # Verify everything passes (fmt-check, lint, test)
|
||||
make build # Build binary
|
||||
make docker # Build Docker image
|
||||
make hooks # Install pre-commit hook (runs make check)
|
||||
make fmt # Format code
|
||||
make lint # Run comprehensive linting
|
||||
make test # Run tests with race detection
|
||||
make check # Verify everything passes (lint, test, build, format)
|
||||
make build # Build binary
|
||||
```
|
||||
|
||||
### Commit Requirements
|
||||
|
||||
188
REPO_POLICIES.md
188
REPO_POLICIES.md
@@ -1,188 +0,0 @@
|
||||
---
|
||||
title: Repository Policies
|
||||
last_modified: 2026-02-22
|
||||
---
|
||||
|
||||
This document covers repository structure, tooling, and workflow standards. Code
|
||||
style conventions are in separate documents:
|
||||
|
||||
- [Code Styleguide](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE.md)
|
||||
(general, bash, Docker)
|
||||
- [Go](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_GO.md)
|
||||
- [JavaScript](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_JS.md)
|
||||
- [Python](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_PYTHON.md)
|
||||
- [Go HTTP Server Conventions](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/GO_HTTP_SERVER_CONVENTIONS.md)
|
||||
|
||||
---
|
||||
|
||||
- Cross-project documentation (such as this file) must include
|
||||
`last_modified: YYYY-MM-DD` in the YAML front matter so it can be kept in sync
|
||||
with the authoritative source as policies evolve.
|
||||
|
||||
- **ALL external references must be pinned by cryptographic hash.** This
|
||||
includes Docker base images, Go modules, npm packages, GitHub Actions, and
|
||||
anything else fetched from a remote source. Version tags (`@v4`, `@latest`,
|
||||
`:3.21`, etc.) are server-mutable and therefore remote code execution
|
||||
vulnerabilities. The ONLY acceptable way to reference an external dependency
|
||||
is by its content hash (Docker `@sha256:...`, Go module hash in `go.sum`, npm
|
||||
integrity hash in lockfile, GitHub Actions `@<commit-sha>`). No exceptions.
|
||||
This also means never `curl | bash` to install tools like pyenv, nvm, rustup,
|
||||
etc. Instead, download a specific release archive from GitHub, verify its hash
|
||||
(hardcoded in the Dockerfile or script), and only then install. Unverified
|
||||
install scripts are arbitrary remote code execution. This is the single most
|
||||
important rule in this document. Double-check every external reference in
|
||||
every file before committing. There are zero exceptions to this rule.
|
||||
|
||||
- Every repo with software must have a root `Makefile` with these targets:
|
||||
`make test`, `make lint`, `make fmt` (writes), `make fmt-check` (read-only),
|
||||
`make check` (prereqs: `test`, `lint`, `fmt-check`), `make docker`, and
|
||||
`make hooks` (installs pre-commit hook). A model Makefile is at
|
||||
`https://git.eeqj.de/sneak/prompts/raw/branch/main/Makefile`.
|
||||
|
||||
- Always use Makefile targets (`make fmt`, `make test`, `make lint`, etc.)
|
||||
instead of invoking the underlying tools directly. The Makefile is the single
|
||||
source of truth for how these operations are run.
|
||||
|
||||
- The Makefile is authoritative documentation for how the repo is used. Beyond
|
||||
the required targets above, it should have targets for every common operation:
|
||||
running a local development server (`make run`, `make dev`), re-initializing
|
||||
or migrating the database (`make db-reset`, `make migrate`), building
|
||||
artifacts (`make build`), generating code, seeding data, or anything else a
|
||||
developer would do regularly. If someone checks out the repo and types
|
||||
`make<tab>`, they should see every meaningful operation available. A new
|
||||
contributor should be able to understand the entire development workflow by
|
||||
reading the Makefile.
|
||||
|
||||
- Every repo should have a `Dockerfile`. All Dockerfiles must run `make check`
|
||||
as a build step so the build fails if the branch is not green. For non-server
|
||||
repos, the Dockerfile should bring up a development environment and run
|
||||
`make check`. For server repos, `make check` should run as an early build
|
||||
stage before the final image is assembled.
|
||||
|
||||
- Every repo should have a Gitea Actions workflow (`.gitea/workflows/`) that
|
||||
runs `docker build .` on push. Since the Dockerfile already runs `make check`,
|
||||
a successful build implies all checks pass.
|
||||
|
||||
- Use platform-standard formatters: `black` for Python, `prettier` for
|
||||
JS/CSS/Markdown/HTML, `go fmt` for Go. Always use default configuration with
|
||||
two exceptions: four-space indents (except Go), and `proseWrap: always` for
|
||||
Markdown (hard-wrap at 80 columns). Documentation and writing repos (Markdown,
|
||||
HTML, CSS) should also have `.prettierrc` and `.prettierignore`.
|
||||
|
||||
- Pre-commit hook: `make check` if local testing is possible, otherwise
|
||||
`make lint && make fmt-check`. The Makefile should provide a `make hooks`
|
||||
target to install the pre-commit hook.
|
||||
|
||||
- All repos with software must have tests that run via the platform-standard
|
||||
test framework (`go test`, `pytest`, `jest`/`vitest`, etc.). If no meaningful
|
||||
tests exist yet, add the most minimal test possible — e.g. importing the
|
||||
module under test to verify it compiles/parses. There is no excuse for
|
||||
`make test` to be a no-op.
|
||||
|
||||
- `make test` must complete in under 20 seconds. Add a 30-second timeout in the
|
||||
Makefile.
|
||||
|
||||
- Docker builds must complete in under 5 minutes.
|
||||
|
||||
- `make check` must not modify any files in the repo. Tests may use temporary
|
||||
directories.
|
||||
|
||||
- `main` must always pass `make check`, no exceptions.
|
||||
|
||||
- Never commit secrets. `.env` files, credentials, API keys, and private keys
|
||||
must be in `.gitignore`. No exceptions.
|
||||
|
||||
- `.gitignore` should be comprehensive from the start: OS files (`.DS_Store`),
|
||||
editor files (`.swp`, `*~`), language build artifacts, and `node_modules/`.
|
||||
Fetch the standard `.gitignore` from
|
||||
`https://git.eeqj.de/sneak/prompts/raw/branch/main/.gitignore` when setting up
|
||||
a new repo.
|
||||
|
||||
- Never use `git add -A` or `git add .`. Always stage files explicitly by name.
|
||||
|
||||
- Never force-push to `main`.
|
||||
|
||||
- Make all changes on a feature branch. You can do whatever you want on a
|
||||
feature branch.
|
||||
|
||||
- `.golangci.yml` is standardized and must _NEVER_ be modified by an agent, only
|
||||
manually by the user. Fetch from
|
||||
`https://git.eeqj.de/sneak/prompts/raw/branch/main/.golangci.yml`.
|
||||
|
||||
- When pinning images or packages by hash, add a comment above the reference
|
||||
with the version and date (YYYY-MM-DD).
|
||||
|
||||
- Use `yarn`, not `npm`.
|
||||
|
||||
- Write all dates as YYYY-MM-DD (ISO 8601).
|
||||
|
||||
- Simple projects should be configured with environment variables.
|
||||
|
||||
- Dockerized web services listen on port 8080 by default, overridable with
|
||||
`PORT`.
|
||||
|
||||
- `README.md` is the primary documentation. Required sections:
|
||||
- **Description**: First line must include the project name, purpose,
|
||||
category (web server, SPA, CLI tool, etc.), license, and author. Example:
|
||||
"µPaaS is an MIT-licensed Go web application by @sneak that receives
|
||||
git-frontend webhooks and deploys applications via Docker in realtime."
|
||||
- **Getting Started**: Copy-pasteable install/usage code block.
|
||||
- **Rationale**: Why does this exist?
|
||||
- **Design**: How is the program structured?
|
||||
- **TODO**: Update meticulously, even between commits. When planning, put
|
||||
the todo list in the README so a new agent can pick up where the last one
|
||||
left off.
|
||||
- **License**: MIT, GPL, or WTFPL. Ask the user for new projects. Include a
|
||||
`LICENSE` file in the repo root and a License section in the README.
|
||||
- **Author**: [@sneak](https://sneak.berlin).
|
||||
|
||||
- First commit of a new repo should contain only `README.md`.
|
||||
|
||||
- Go module root: `sneak.berlin/go/<name>`. Always run `go mod tidy` before
|
||||
committing.
|
||||
|
||||
- Use SemVer.
|
||||
|
||||
- Database migrations live in `internal/db/migrations/` and must be embedded in
|
||||
the binary.
|
||||
- `000_migration.sql` — contains ONLY the creation of the migrations tracking
|
||||
table itself. Nothing else.
|
||||
- `001_schema.sql` — the full application schema.
|
||||
- **Pre-1.0.0:** never add additional migration files (002, 003, etc.). There
|
||||
is no installed base to migrate. Edit `001_schema.sql` directly.
|
||||
- **Post-1.0.0:** add new numbered migration files for each schema change.
|
||||
Never edit existing migrations after release.
|
||||
|
||||
- All repos should have an `.editorconfig` enforcing the project's indentation
|
||||
settings.
|
||||
|
||||
- Avoid putting files in the repo root unless necessary. Root should contain
|
||||
only project-level config files (`README.md`, `Makefile`, `Dockerfile`,
|
||||
`LICENSE`, `.gitignore`, `.editorconfig`, `REPO_POLICIES.md`, and
|
||||
language-specific config). Everything else goes in a subdirectory. Canonical
|
||||
subdirectory names:
|
||||
- `bin/` — executable scripts and tools
|
||||
- `cmd/` — Go command entrypoints
|
||||
- `configs/` — configuration templates and examples
|
||||
- `deploy/` — deployment manifests (k8s, compose, terraform)
|
||||
- `docs/` — documentation and markdown (README.md stays in root)
|
||||
- `internal/` — Go internal packages
|
||||
- `internal/db/migrations/` — database migrations
|
||||
- `pkg/` — Go library packages
|
||||
- `share/` — systemd units, data files
|
||||
- `static/` — static assets (images, fonts, etc.)
|
||||
- `web/` — web frontend source
|
||||
|
||||
- When setting up a new repo, files from the `prompts` repo may be used as
|
||||
templates. Fetch them from
|
||||
`https://git.eeqj.de/sneak/prompts/raw/branch/main/<path>`.
|
||||
|
||||
- New repos must contain at minimum:
|
||||
- `README.md`, `.git`, `.gitignore`, `.editorconfig`
|
||||
- `LICENSE`, `REPO_POLICIES.md` (copy from the `prompts` repo)
|
||||
- `Makefile`
|
||||
- `Dockerfile`, `.dockerignore`
|
||||
- `.gitea/workflows/check.yml`
|
||||
- Go: `go.mod`, `go.sum`, `.golangci.yml`
|
||||
- JS: `package.json`, `yarn.lock`, `.prettierrc`, `.prettierignore`
|
||||
- Python: `pyproject.toml`
|
||||
@@ -54,18 +54,12 @@ func (h *Handlers) HandleAppCreate() http.HandlerFunc { //nolint:funlen // valid
|
||||
repoURL := request.FormValue("repo_url")
|
||||
branch := request.FormValue("branch")
|
||||
dockerfilePath := request.FormValue("dockerfile_path")
|
||||
dockerNetwork := request.FormValue("docker_network")
|
||||
ntfyTopic := request.FormValue("ntfy_topic")
|
||||
slackWebhook := request.FormValue("slack_webhook")
|
||||
|
||||
data := h.addGlobals(map[string]any{
|
||||
"Name": name,
|
||||
"RepoURL": repoURL,
|
||||
"Branch": branch,
|
||||
"DockerfilePath": dockerfilePath,
|
||||
"DockerNetwork": dockerNetwork,
|
||||
"NtfyTopic": ntfyTopic,
|
||||
"SlackWebhook": slackWebhook,
|
||||
}, request)
|
||||
|
||||
if name == "" || repoURL == "" {
|
||||
@@ -106,9 +100,6 @@ func (h *Handlers) HandleAppCreate() http.HandlerFunc { //nolint:funlen // valid
|
||||
RepoURL: repoURL,
|
||||
Branch: branch,
|
||||
DockerfilePath: dockerfilePath,
|
||||
DockerNetwork: dockerNetwork,
|
||||
NtfyTopic: ntfyTopic,
|
||||
SlackWebhook: slackWebhook,
|
||||
},
|
||||
)
|
||||
if createErr != nil {
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
|
||||
"github.com/go-chi/chi/v5"
|
||||
|
||||
"sneak.berlin/go/upaas/internal/models"
|
||||
"sneak.berlin/go/upaas/templates"
|
||||
)
|
||||
|
||||
// webhookEventsLimit is the number of webhook events to show in history.
|
||||
const webhookEventsLimit = 100
|
||||
|
||||
// HandleAppWebhookEvents returns the webhook event history handler.
|
||||
func (h *Handlers) HandleAppWebhookEvents() http.HandlerFunc {
|
||||
tmpl := templates.GetParsed()
|
||||
|
||||
return func(writer http.ResponseWriter, request *http.Request) {
|
||||
appID := chi.URLParam(request, "id")
|
||||
|
||||
application, findErr := models.FindApp(request.Context(), h.db, appID)
|
||||
if findErr != nil {
|
||||
h.log.Error("failed to find app", "error", findErr)
|
||||
http.Error(writer, "Internal Server Error", http.StatusInternalServerError)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if application == nil {
|
||||
http.NotFound(writer, request)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
events, eventsErr := application.GetWebhookEvents(
|
||||
request.Context(),
|
||||
webhookEventsLimit,
|
||||
)
|
||||
if eventsErr != nil {
|
||||
h.log.Error("failed to get webhook events",
|
||||
"error", eventsErr,
|
||||
"app", appID,
|
||||
)
|
||||
|
||||
events = []*models.WebhookEvent{}
|
||||
}
|
||||
|
||||
data := h.addGlobals(map[string]any{
|
||||
"App": application,
|
||||
"Events": events,
|
||||
}, request)
|
||||
|
||||
h.renderTemplate(writer, tmpl, "webhook_events.html", data)
|
||||
}
|
||||
}
|
||||
@@ -52,20 +52,6 @@ func (w *WebhookEvent) Reload(ctx context.Context) error {
|
||||
return w.scan(row)
|
||||
}
|
||||
|
||||
// ShortCommit returns a truncated commit SHA for display.
|
||||
func (w *WebhookEvent) ShortCommit() string {
|
||||
if !w.CommitSHA.Valid {
|
||||
return ""
|
||||
}
|
||||
|
||||
sha := w.CommitSHA.String
|
||||
if len(sha) > shortCommitLength {
|
||||
return sha[:shortCommitLength]
|
||||
}
|
||||
|
||||
return sha
|
||||
}
|
||||
|
||||
func (w *WebhookEvent) insert(ctx context.Context) error {
|
||||
query := `
|
||||
INSERT INTO webhook_events (
|
||||
|
||||
@@ -70,7 +70,6 @@ func (s *Server) SetupRoutes() {
|
||||
r.Post("/apps/{id}/deploy", s.handlers.HandleAppDeploy())
|
||||
r.Post("/apps/{id}/deployments/cancel", s.handlers.HandleCancelDeploy())
|
||||
r.Get("/apps/{id}/deployments", s.handlers.HandleAppDeployments())
|
||||
r.Get("/apps/{id}/webhooks", s.handlers.HandleAppWebhookEvents())
|
||||
r.Get("/apps/{id}/deployments/{deploymentID}/logs", s.handlers.HandleDeploymentLogsAPI())
|
||||
r.Get("/apps/{id}/deployments/{deploymentID}/download", s.handlers.HandleDeploymentLogDownload())
|
||||
r.Get("/apps/{id}/logs", s.handlers.HandleAppLogs())
|
||||
|
||||
@@ -6,215 +6,189 @@
|
||||
*/
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("appDetail", (config) => ({
|
||||
appId: config.appId,
|
||||
currentDeploymentId: config.initialDeploymentId,
|
||||
appStatus: config.initialStatus || "unknown",
|
||||
containerLogs: "Loading container logs...",
|
||||
containerStatus: "unknown",
|
||||
buildLogs: config.initialDeploymentId
|
||||
? "Loading build logs..."
|
||||
: "No deployments yet",
|
||||
buildStatus: config.initialBuildStatus || "unknown",
|
||||
showBuildLogs: !!config.initialDeploymentId,
|
||||
deploying: false,
|
||||
deployments: [],
|
||||
// Track whether user wants auto-scroll (per log pane)
|
||||
_containerAutoScroll: true,
|
||||
_buildAutoScroll: true,
|
||||
_pollTimer: null,
|
||||
Alpine.data("appDetail", (config) => ({
|
||||
appId: config.appId,
|
||||
currentDeploymentId: config.initialDeploymentId,
|
||||
appStatus: config.initialStatus || "unknown",
|
||||
containerLogs: "Loading container logs...",
|
||||
containerStatus: "unknown",
|
||||
buildLogs: config.initialDeploymentId
|
||||
? "Loading build logs..."
|
||||
: "No deployments yet",
|
||||
buildStatus: config.initialBuildStatus || "unknown",
|
||||
showBuildLogs: !!config.initialDeploymentId,
|
||||
deploying: false,
|
||||
deployments: [],
|
||||
// Track whether user wants auto-scroll (per log pane)
|
||||
_containerAutoScroll: true,
|
||||
_buildAutoScroll: true,
|
||||
_pollTimer: null,
|
||||
|
||||
init() {
|
||||
this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
|
||||
this.fetchAll();
|
||||
this._schedulePoll();
|
||||
init() {
|
||||
this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
|
||||
this.fetchAll();
|
||||
this._schedulePoll();
|
||||
|
||||
// Set up scroll listeners after DOM is ready
|
||||
this.$nextTick(() => {
|
||||
this._initScrollTracking(
|
||||
this.$refs.containerLogsWrapper,
|
||||
"_containerAutoScroll",
|
||||
);
|
||||
this._initScrollTracking(
|
||||
this.$refs.buildLogsWrapper,
|
||||
"_buildAutoScroll",
|
||||
);
|
||||
});
|
||||
},
|
||||
// Set up scroll listeners after DOM is ready
|
||||
this.$nextTick(() => {
|
||||
this._initScrollTracking(this.$refs.containerLogsWrapper, '_containerAutoScroll');
|
||||
this._initScrollTracking(this.$refs.buildLogsWrapper, '_buildAutoScroll');
|
||||
});
|
||||
},
|
||||
|
||||
_schedulePoll() {
|
||||
if (this._pollTimer) clearTimeout(this._pollTimer);
|
||||
const interval = Alpine.store("utils").isDeploying(this.appStatus)
|
||||
? 1000
|
||||
: 10000;
|
||||
this._pollTimer = setTimeout(() => {
|
||||
this.fetchAll();
|
||||
this._schedulePoll();
|
||||
}, interval);
|
||||
},
|
||||
_schedulePoll() {
|
||||
if (this._pollTimer) clearTimeout(this._pollTimer);
|
||||
const interval = Alpine.store("utils").isDeploying(this.appStatus) ? 1000 : 10000;
|
||||
this._pollTimer = setTimeout(() => {
|
||||
this.fetchAll();
|
||||
this._schedulePoll();
|
||||
}, interval);
|
||||
},
|
||||
|
||||
_initScrollTracking(el, flag) {
|
||||
if (!el) return;
|
||||
el.addEventListener(
|
||||
"scroll",
|
||||
() => {
|
||||
this[flag] = Alpine.store("utils").isScrolledToBottom(el);
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
},
|
||||
_initScrollTracking(el, flag) {
|
||||
if (!el) return;
|
||||
el.addEventListener('scroll', () => {
|
||||
this[flag] = Alpine.store("utils").isScrolledToBottom(el);
|
||||
}, { passive: true });
|
||||
},
|
||||
|
||||
fetchAll() {
|
||||
this.fetchAppStatus();
|
||||
// Only fetch logs when the respective pane is visible
|
||||
if (
|
||||
this.$refs.containerLogsWrapper &&
|
||||
this._isElementVisible(this.$refs.containerLogsWrapper)
|
||||
) {
|
||||
this.fetchContainerLogs();
|
||||
}
|
||||
if (
|
||||
this.showBuildLogs &&
|
||||
this.$refs.buildLogsWrapper &&
|
||||
this._isElementVisible(this.$refs.buildLogsWrapper)
|
||||
) {
|
||||
this.fetchBuildLogs();
|
||||
}
|
||||
this.fetchRecentDeployments();
|
||||
},
|
||||
fetchAll() {
|
||||
this.fetchAppStatus();
|
||||
// Only fetch logs when the respective pane is visible
|
||||
if (this.$refs.containerLogsWrapper && this._isElementVisible(this.$refs.containerLogsWrapper)) {
|
||||
this.fetchContainerLogs();
|
||||
}
|
||||
if (this.showBuildLogs && this.$refs.buildLogsWrapper && this._isElementVisible(this.$refs.buildLogsWrapper)) {
|
||||
this.fetchBuildLogs();
|
||||
}
|
||||
this.fetchRecentDeployments();
|
||||
},
|
||||
|
||||
_isElementVisible(el) {
|
||||
if (!el) return false;
|
||||
// Check if element is in viewport (roughly)
|
||||
const rect = el.getBoundingClientRect();
|
||||
return rect.bottom > 0 && rect.top < window.innerHeight;
|
||||
},
|
||||
_isElementVisible(el) {
|
||||
if (!el) return false;
|
||||
// Check if element is in viewport (roughly)
|
||||
const rect = el.getBoundingClientRect();
|
||||
return rect.bottom > 0 && rect.top < window.innerHeight;
|
||||
},
|
||||
|
||||
async fetchAppStatus() {
|
||||
try {
|
||||
const res = await fetch(`/apps/${this.appId}/status`);
|
||||
const data = await res.json();
|
||||
const wasDeploying = this.deploying;
|
||||
this.appStatus = data.status;
|
||||
this.deploying = Alpine.store("utils").isDeploying(data.status);
|
||||
async fetchAppStatus() {
|
||||
try {
|
||||
const res = await fetch(`/apps/${this.appId}/status`);
|
||||
const data = await res.json();
|
||||
const wasDeploying = this.deploying;
|
||||
this.appStatus = data.status;
|
||||
this.deploying = Alpine.store("utils").isDeploying(data.status);
|
||||
|
||||
// Re-schedule polling when deployment state changes
|
||||
if (this.deploying !== wasDeploying) {
|
||||
this._schedulePoll();
|
||||
}
|
||||
// Re-schedule polling when deployment state changes
|
||||
if (this.deploying !== wasDeploying) {
|
||||
this._schedulePoll();
|
||||
}
|
||||
|
||||
if (
|
||||
data.latestDeploymentID &&
|
||||
data.latestDeploymentID !== this.currentDeploymentId
|
||||
) {
|
||||
this.currentDeploymentId = data.latestDeploymentID;
|
||||
this.showBuildLogs = true;
|
||||
this.fetchBuildLogs();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Status fetch error:", err);
|
||||
}
|
||||
},
|
||||
if (
|
||||
data.latestDeploymentID &&
|
||||
data.latestDeploymentID !== this.currentDeploymentId
|
||||
) {
|
||||
this.currentDeploymentId = data.latestDeploymentID;
|
||||
this.showBuildLogs = true;
|
||||
this.fetchBuildLogs();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Status fetch error:", err);
|
||||
}
|
||||
},
|
||||
|
||||
async fetchContainerLogs() {
|
||||
try {
|
||||
const res = await fetch(`/apps/${this.appId}/container-logs`);
|
||||
const data = await res.json();
|
||||
const newLogs = data.logs || "No logs available";
|
||||
const changed = newLogs !== this.containerLogs;
|
||||
this.containerLogs = newLogs;
|
||||
this.containerStatus = data.status;
|
||||
if (changed && this._containerAutoScroll) {
|
||||
this.$nextTick(() => {
|
||||
Alpine.store("utils").scrollToBottom(
|
||||
this.$refs.containerLogsWrapper,
|
||||
);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
this.containerLogs = "Failed to fetch logs";
|
||||
}
|
||||
},
|
||||
async fetchContainerLogs() {
|
||||
try {
|
||||
const res = await fetch(`/apps/${this.appId}/container-logs`);
|
||||
const data = await res.json();
|
||||
const newLogs = data.logs || "No logs available";
|
||||
const changed = newLogs !== this.containerLogs;
|
||||
this.containerLogs = newLogs;
|
||||
this.containerStatus = data.status;
|
||||
if (changed && this._containerAutoScroll) {
|
||||
this.$nextTick(() => {
|
||||
Alpine.store("utils").scrollToBottom(this.$refs.containerLogsWrapper);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
this.containerLogs = "Failed to fetch logs";
|
||||
}
|
||||
},
|
||||
|
||||
async fetchBuildLogs() {
|
||||
if (!this.currentDeploymentId) return;
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/apps/${this.appId}/deployments/${this.currentDeploymentId}/logs`,
|
||||
);
|
||||
const data = await res.json();
|
||||
const newLogs = data.logs || "No build logs available";
|
||||
const changed = newLogs !== this.buildLogs;
|
||||
this.buildLogs = newLogs;
|
||||
this.buildStatus = data.status;
|
||||
if (changed && this._buildAutoScroll) {
|
||||
this.$nextTick(() => {
|
||||
Alpine.store("utils").scrollToBottom(
|
||||
this.$refs.buildLogsWrapper,
|
||||
);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
this.buildLogs = "Failed to fetch logs";
|
||||
}
|
||||
},
|
||||
async fetchBuildLogs() {
|
||||
if (!this.currentDeploymentId) return;
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/apps/${this.appId}/deployments/${this.currentDeploymentId}/logs`,
|
||||
);
|
||||
const data = await res.json();
|
||||
const newLogs = data.logs || "No build logs available";
|
||||
const changed = newLogs !== this.buildLogs;
|
||||
this.buildLogs = newLogs;
|
||||
this.buildStatus = data.status;
|
||||
if (changed && this._buildAutoScroll) {
|
||||
this.$nextTick(() => {
|
||||
Alpine.store("utils").scrollToBottom(this.$refs.buildLogsWrapper);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
this.buildLogs = "Failed to fetch logs";
|
||||
}
|
||||
},
|
||||
|
||||
async fetchRecentDeployments() {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/apps/${this.appId}/recent-deployments`,
|
||||
);
|
||||
const data = await res.json();
|
||||
this.deployments = data.deployments || [];
|
||||
} catch (err) {
|
||||
console.error("Deployments fetch error:", err);
|
||||
}
|
||||
},
|
||||
async fetchRecentDeployments() {
|
||||
try {
|
||||
const res = await fetch(`/apps/${this.appId}/recent-deployments`);
|
||||
const data = await res.json();
|
||||
this.deployments = data.deployments || [];
|
||||
} catch (err) {
|
||||
console.error("Deployments fetch error:", err);
|
||||
}
|
||||
},
|
||||
|
||||
submitDeploy() {
|
||||
this.deploying = true;
|
||||
},
|
||||
submitDeploy() {
|
||||
this.deploying = true;
|
||||
},
|
||||
|
||||
get statusBadgeClass() {
|
||||
return Alpine.store("utils").statusBadgeClass(this.appStatus);
|
||||
},
|
||||
get statusBadgeClass() {
|
||||
return Alpine.store("utils").statusBadgeClass(this.appStatus);
|
||||
},
|
||||
|
||||
get statusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.appStatus);
|
||||
},
|
||||
get statusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.appStatus);
|
||||
},
|
||||
|
||||
get containerStatusBadgeClass() {
|
||||
return (
|
||||
Alpine.store("utils").statusBadgeClass(this.containerStatus) +
|
||||
" text-xs"
|
||||
);
|
||||
},
|
||||
get containerStatusBadgeClass() {
|
||||
return (
|
||||
Alpine.store("utils").statusBadgeClass(this.containerStatus) +
|
||||
" text-xs"
|
||||
);
|
||||
},
|
||||
|
||||
get containerStatusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.containerStatus);
|
||||
},
|
||||
get containerStatusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.containerStatus);
|
||||
},
|
||||
|
||||
get buildStatusBadgeClass() {
|
||||
return (
|
||||
Alpine.store("utils").statusBadgeClass(this.buildStatus) +
|
||||
" text-xs"
|
||||
);
|
||||
},
|
||||
get buildStatusBadgeClass() {
|
||||
return (
|
||||
Alpine.store("utils").statusBadgeClass(this.buildStatus) + " text-xs"
|
||||
);
|
||||
},
|
||||
|
||||
get buildStatusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.buildStatus);
|
||||
},
|
||||
get buildStatusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.buildStatus);
|
||||
},
|
||||
|
||||
deploymentStatusClass(status) {
|
||||
return Alpine.store("utils").statusBadgeClass(status);
|
||||
},
|
||||
deploymentStatusClass(status) {
|
||||
return Alpine.store("utils").statusBadgeClass(status);
|
||||
},
|
||||
|
||||
deploymentStatusLabel(status) {
|
||||
return Alpine.store("utils").statusLabel(status);
|
||||
},
|
||||
deploymentStatusLabel(status) {
|
||||
return Alpine.store("utils").statusLabel(status);
|
||||
},
|
||||
|
||||
formatTime(isoTime) {
|
||||
return Alpine.store("utils").formatRelativeTime(isoTime);
|
||||
},
|
||||
}));
|
||||
formatTime(isoTime) {
|
||||
return Alpine.store("utils").formatRelativeTime(isoTime);
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
@@ -6,66 +6,66 @@
|
||||
*/
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
// ============================================
|
||||
// Copy Button Component
|
||||
// ============================================
|
||||
Alpine.data("copyButton", (targetId) => ({
|
||||
copied: false,
|
||||
async copy() {
|
||||
const target = document.getElementById(targetId);
|
||||
if (!target) return;
|
||||
const text = target.textContent || target.value;
|
||||
const success = await Alpine.store("utils").copyToClipboard(text);
|
||||
if (success) {
|
||||
this.copied = true;
|
||||
setTimeout(() => {
|
||||
this.copied = false;
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
}));
|
||||
// ============================================
|
||||
// Copy Button Component
|
||||
// ============================================
|
||||
Alpine.data("copyButton", (targetId) => ({
|
||||
copied: false,
|
||||
async copy() {
|
||||
const target = document.getElementById(targetId);
|
||||
if (!target) return;
|
||||
const text = target.textContent || target.value;
|
||||
const success = await Alpine.store("utils").copyToClipboard(text);
|
||||
if (success) {
|
||||
this.copied = true;
|
||||
setTimeout(() => {
|
||||
this.copied = false;
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
// ============================================
|
||||
// Confirm Action Component
|
||||
// ============================================
|
||||
Alpine.data("confirmAction", (message) => ({
|
||||
confirm(event) {
|
||||
if (!window.confirm(message)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
}));
|
||||
// ============================================
|
||||
// Confirm Action Component
|
||||
// ============================================
|
||||
Alpine.data("confirmAction", (message) => ({
|
||||
confirm(event) {
|
||||
if (!window.confirm(message)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
// ============================================
|
||||
// Auto-dismiss Alert Component
|
||||
// ============================================
|
||||
Alpine.data("autoDismiss", (delay = 5000) => ({
|
||||
show: true,
|
||||
init() {
|
||||
setTimeout(() => {
|
||||
this.dismiss();
|
||||
}, delay);
|
||||
},
|
||||
dismiss() {
|
||||
this.show = false;
|
||||
setTimeout(() => {
|
||||
this.$el.remove();
|
||||
}, 300);
|
||||
},
|
||||
}));
|
||||
// ============================================
|
||||
// Auto-dismiss Alert Component
|
||||
// ============================================
|
||||
Alpine.data("autoDismiss", (delay = 5000) => ({
|
||||
show: true,
|
||||
init() {
|
||||
setTimeout(() => {
|
||||
this.dismiss();
|
||||
}, delay);
|
||||
},
|
||||
dismiss() {
|
||||
this.show = false;
|
||||
setTimeout(() => {
|
||||
this.$el.remove();
|
||||
}, 300);
|
||||
},
|
||||
}));
|
||||
|
||||
// ============================================
|
||||
// Relative Time Component
|
||||
// ============================================
|
||||
Alpine.data("relativeTime", (isoTime) => ({
|
||||
display: "",
|
||||
init() {
|
||||
this.update();
|
||||
// Update every minute
|
||||
setInterval(() => this.update(), 60000);
|
||||
},
|
||||
update() {
|
||||
this.display = Alpine.store("utils").formatRelativeTime(isoTime);
|
||||
},
|
||||
}));
|
||||
// ============================================
|
||||
// Relative Time Component
|
||||
// ============================================
|
||||
Alpine.data("relativeTime", (isoTime) => ({
|
||||
display: "",
|
||||
init() {
|
||||
this.update();
|
||||
// Update every minute
|
||||
setInterval(() => this.update(), 60000);
|
||||
},
|
||||
update() {
|
||||
this.display = Alpine.store("utils").formatRelativeTime(isoTime);
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
@@ -5,18 +5,17 @@
|
||||
*/
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("dashboard", () => ({
|
||||
init() {
|
||||
// Update relative times every minute
|
||||
setInterval(() => {
|
||||
this.$el.querySelectorAll("[data-time]").forEach((el) => {
|
||||
const time = el.getAttribute("data-time");
|
||||
if (time) {
|
||||
el.textContent =
|
||||
Alpine.store("utils").formatRelativeTime(time);
|
||||
}
|
||||
});
|
||||
}, 60000);
|
||||
},
|
||||
}));
|
||||
Alpine.data("dashboard", () => ({
|
||||
init() {
|
||||
// Update relative times every minute
|
||||
setInterval(() => {
|
||||
this.$el.querySelectorAll("[data-time]").forEach((el) => {
|
||||
const time = el.getAttribute("data-time");
|
||||
if (time) {
|
||||
el.textContent = Alpine.store("utils").formatRelativeTime(time);
|
||||
}
|
||||
});
|
||||
}, 60000);
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
@@ -6,180 +6,171 @@
|
||||
*/
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
// ============================================
|
||||
// Deployment Card Component (for individual deployment cards)
|
||||
// ============================================
|
||||
Alpine.data("deploymentCard", (config) => ({
|
||||
appId: config.appId,
|
||||
deploymentId: config.deploymentId,
|
||||
logs: "",
|
||||
status: config.status || "",
|
||||
pollInterval: null,
|
||||
_autoScroll: true,
|
||||
// ============================================
|
||||
// Deployment Card Component (for individual deployment cards)
|
||||
// ============================================
|
||||
Alpine.data("deploymentCard", (config) => ({
|
||||
appId: config.appId,
|
||||
deploymentId: config.deploymentId,
|
||||
logs: "",
|
||||
status: config.status || "",
|
||||
pollInterval: null,
|
||||
_autoScroll: true,
|
||||
|
||||
init() {
|
||||
// Read initial logs from script tag (avoids escaping issues)
|
||||
const initialLogsEl = this.$el.querySelector(".initial-logs");
|
||||
this.logs = initialLogsEl?.dataset.logs || "Loading...";
|
||||
init() {
|
||||
// Read initial logs from script tag (avoids escaping issues)
|
||||
const initialLogsEl = this.$el.querySelector(".initial-logs");
|
||||
this.logs = initialLogsEl?.dataset.logs || "Loading...";
|
||||
|
||||
// Set up scroll tracking
|
||||
this.$nextTick(() => {
|
||||
const wrapper = this.$refs.logsWrapper;
|
||||
if (wrapper) {
|
||||
wrapper.addEventListener(
|
||||
"scroll",
|
||||
() => {
|
||||
this._autoScroll =
|
||||
Alpine.store("utils").isScrolledToBottom(
|
||||
wrapper,
|
||||
);
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
}
|
||||
});
|
||||
// Set up scroll tracking
|
||||
this.$nextTick(() => {
|
||||
const wrapper = this.$refs.logsWrapper;
|
||||
if (wrapper) {
|
||||
wrapper.addEventListener('scroll', () => {
|
||||
this._autoScroll = Alpine.store("utils").isScrolledToBottom(wrapper);
|
||||
}, { passive: true });
|
||||
}
|
||||
});
|
||||
|
||||
// Only poll if deployment is in progress
|
||||
if (Alpine.store("utils").isDeploying(this.status)) {
|
||||
this.fetchLogs();
|
||||
this.pollInterval = setInterval(() => this.fetchLogs(), 1000);
|
||||
}
|
||||
},
|
||||
// Only poll if deployment is in progress
|
||||
if (Alpine.store("utils").isDeploying(this.status)) {
|
||||
this.fetchLogs();
|
||||
this.pollInterval = setInterval(() => this.fetchLogs(), 1000);
|
||||
}
|
||||
},
|
||||
|
||||
destroy() {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
}
|
||||
},
|
||||
|
||||
async fetchLogs() {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/apps/${this.appId}/deployments/${this.deploymentId}/logs`,
|
||||
);
|
||||
const data = await res.json();
|
||||
const newLogs = data.logs || "No logs available";
|
||||
const logsChanged = newLogs !== this.logs;
|
||||
this.logs = newLogs;
|
||||
this.status = data.status;
|
||||
async fetchLogs() {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/apps/${this.appId}/deployments/${this.deploymentId}/logs`,
|
||||
);
|
||||
const data = await res.json();
|
||||
const newLogs = data.logs || "No logs available";
|
||||
const logsChanged = newLogs !== this.logs;
|
||||
this.logs = newLogs;
|
||||
this.status = data.status;
|
||||
|
||||
// Scroll to bottom only when content changes AND user hasn't scrolled up
|
||||
if (logsChanged && this._autoScroll) {
|
||||
this.$nextTick(() => {
|
||||
Alpine.store("utils").scrollToBottom(
|
||||
this.$refs.logsWrapper,
|
||||
);
|
||||
});
|
||||
}
|
||||
// Scroll to bottom only when content changes AND user hasn't scrolled up
|
||||
if (logsChanged && this._autoScroll) {
|
||||
this.$nextTick(() => {
|
||||
Alpine.store("utils").scrollToBottom(this.$refs.logsWrapper);
|
||||
});
|
||||
}
|
||||
|
||||
// Stop polling if deployment is done
|
||||
if (!Alpine.store("utils").isDeploying(data.status)) {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
this.pollInterval = null;
|
||||
}
|
||||
// Reload page to show final state with duration etc
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Logs fetch error:", err);
|
||||
}
|
||||
},
|
||||
// Stop polling if deployment is done
|
||||
if (!Alpine.store("utils").isDeploying(data.status)) {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
this.pollInterval = null;
|
||||
}
|
||||
// Reload page to show final state with duration etc
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Logs fetch error:", err);
|
||||
}
|
||||
},
|
||||
|
||||
get statusBadgeClass() {
|
||||
return Alpine.store("utils").statusBadgeClass(this.status);
|
||||
},
|
||||
get statusBadgeClass() {
|
||||
return Alpine.store("utils").statusBadgeClass(this.status);
|
||||
},
|
||||
|
||||
get statusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.status);
|
||||
},
|
||||
}));
|
||||
get statusLabel() {
|
||||
return Alpine.store("utils").statusLabel(this.status);
|
||||
},
|
||||
}));
|
||||
|
||||
// ============================================
|
||||
// Deployments History Page Component
|
||||
// ============================================
|
||||
Alpine.data("deploymentsPage", (config) => ({
|
||||
appId: config.appId,
|
||||
currentDeploymentId: null,
|
||||
isDeploying: false,
|
||||
// ============================================
|
||||
// Deployments History Page Component
|
||||
// ============================================
|
||||
Alpine.data("deploymentsPage", (config) => ({
|
||||
appId: config.appId,
|
||||
currentDeploymentId: null,
|
||||
isDeploying: false,
|
||||
|
||||
init() {
|
||||
// Check for in-progress deployments on page load
|
||||
const inProgressCard = document.querySelector(
|
||||
'[data-status="building"], [data-status="deploying"]',
|
||||
);
|
||||
if (inProgressCard) {
|
||||
this.currentDeploymentId = parseInt(
|
||||
inProgressCard.getAttribute("data-deployment-id"),
|
||||
10,
|
||||
);
|
||||
this.isDeploying = true;
|
||||
}
|
||||
init() {
|
||||
// Check for in-progress deployments on page load
|
||||
const inProgressCard = document.querySelector(
|
||||
'[data-status="building"], [data-status="deploying"]',
|
||||
);
|
||||
if (inProgressCard) {
|
||||
this.currentDeploymentId = parseInt(
|
||||
inProgressCard.getAttribute("data-deployment-id"),
|
||||
10,
|
||||
);
|
||||
this.isDeploying = true;
|
||||
}
|
||||
|
||||
this.fetchAppStatus();
|
||||
this._scheduleStatusPoll();
|
||||
},
|
||||
this.fetchAppStatus();
|
||||
this._scheduleStatusPoll();
|
||||
},
|
||||
|
||||
_statusPollTimer: null,
|
||||
_statusPollTimer: null,
|
||||
|
||||
_scheduleStatusPoll() {
|
||||
if (this._statusPollTimer) clearTimeout(this._statusPollTimer);
|
||||
const interval = this.isDeploying ? 1000 : 10000;
|
||||
this._statusPollTimer = setTimeout(() => {
|
||||
this.fetchAppStatus();
|
||||
this._scheduleStatusPoll();
|
||||
}, interval);
|
||||
},
|
||||
_scheduleStatusPoll() {
|
||||
if (this._statusPollTimer) clearTimeout(this._statusPollTimer);
|
||||
const interval = this.isDeploying ? 1000 : 10000;
|
||||
this._statusPollTimer = setTimeout(() => {
|
||||
this.fetchAppStatus();
|
||||
this._scheduleStatusPoll();
|
||||
}, interval);
|
||||
},
|
||||
|
||||
async fetchAppStatus() {
|
||||
try {
|
||||
const res = await fetch(`/apps/${this.appId}/status`);
|
||||
const data = await res.json();
|
||||
// Use deployment status, not app status - it's more reliable during transitions
|
||||
const deploying = Alpine.store("utils").isDeploying(
|
||||
data.latestDeploymentStatus,
|
||||
);
|
||||
async fetchAppStatus() {
|
||||
try {
|
||||
const res = await fetch(`/apps/${this.appId}/status`);
|
||||
const data = await res.json();
|
||||
// Use deployment status, not app status - it's more reliable during transitions
|
||||
const deploying = Alpine.store("utils").isDeploying(
|
||||
data.latestDeploymentStatus,
|
||||
);
|
||||
|
||||
// Detect new deployment
|
||||
if (
|
||||
data.latestDeploymentID &&
|
||||
data.latestDeploymentID !== this.currentDeploymentId
|
||||
) {
|
||||
// Check if we have a card for this deployment
|
||||
const hasCard = document.querySelector(
|
||||
`[data-deployment-id="${data.latestDeploymentID}"]`,
|
||||
);
|
||||
// Detect new deployment
|
||||
if (
|
||||
data.latestDeploymentID &&
|
||||
data.latestDeploymentID !== this.currentDeploymentId
|
||||
) {
|
||||
// Check if we have a card for this deployment
|
||||
const hasCard = document.querySelector(
|
||||
`[data-deployment-id="${data.latestDeploymentID}"]`,
|
||||
);
|
||||
|
||||
if (deploying && !hasCard) {
|
||||
// New deployment started but no card exists - reload to show it
|
||||
window.location.reload();
|
||||
if (deploying && !hasCard) {
|
||||
// New deployment started but no card exists - reload to show it
|
||||
window.location.reload();
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentDeploymentId = data.latestDeploymentID;
|
||||
}
|
||||
this.currentDeploymentId = data.latestDeploymentID;
|
||||
}
|
||||
|
||||
// Update deploying state based on latest deployment status
|
||||
if (deploying && !this.isDeploying) {
|
||||
this.isDeploying = true;
|
||||
this._scheduleStatusPoll(); // Switch to fast polling
|
||||
} else if (!deploying && this.isDeploying) {
|
||||
// Deployment finished - reload to show final state
|
||||
this.isDeploying = false;
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Status fetch error:", err);
|
||||
}
|
||||
},
|
||||
// Update deploying state based on latest deployment status
|
||||
if (deploying && !this.isDeploying) {
|
||||
this.isDeploying = true;
|
||||
this._scheduleStatusPoll(); // Switch to fast polling
|
||||
} else if (!deploying && this.isDeploying) {
|
||||
// Deployment finished - reload to show final state
|
||||
this.isDeploying = false;
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Status fetch error:", err);
|
||||
}
|
||||
},
|
||||
|
||||
submitDeploy() {
|
||||
this.isDeploying = true;
|
||||
},
|
||||
submitDeploy() {
|
||||
this.isDeploying = true;
|
||||
},
|
||||
|
||||
formatTime(isoTime) {
|
||||
return Alpine.store("utils").formatRelativeTime(isoTime);
|
||||
},
|
||||
}));
|
||||
formatTime(isoTime) {
|
||||
return Alpine.store("utils").formatRelativeTime(isoTime);
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
@@ -5,144 +5,139 @@
|
||||
*/
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.store("utils", {
|
||||
/**
|
||||
* Format a date string as relative time (e.g., "5 minutes ago")
|
||||
*/
|
||||
formatRelativeTime(dateStr) {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffSec = Math.floor(diffMs / 1000);
|
||||
const diffMin = Math.floor(diffSec / 60);
|
||||
const diffHour = Math.floor(diffMin / 60);
|
||||
const diffDay = Math.floor(diffHour / 24);
|
||||
Alpine.store("utils", {
|
||||
/**
|
||||
* Format a date string as relative time (e.g., "5 minutes ago")
|
||||
*/
|
||||
formatRelativeTime(dateStr) {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffSec = Math.floor(diffMs / 1000);
|
||||
const diffMin = Math.floor(diffSec / 60);
|
||||
const diffHour = Math.floor(diffMin / 60);
|
||||
const diffDay = Math.floor(diffHour / 24);
|
||||
|
||||
if (diffSec < 60) return "just now";
|
||||
if (diffMin < 60)
|
||||
return (
|
||||
diffMin + (diffMin === 1 ? " minute ago" : " minutes ago")
|
||||
);
|
||||
if (diffHour < 24)
|
||||
return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
|
||||
if (diffDay < 7)
|
||||
return diffDay + (diffDay === 1 ? " day ago" : " days ago");
|
||||
return date.toLocaleDateString();
|
||||
},
|
||||
if (diffSec < 60) return "just now";
|
||||
if (diffMin < 60)
|
||||
return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
|
||||
if (diffHour < 24)
|
||||
return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
|
||||
if (diffDay < 7)
|
||||
return diffDay + (diffDay === 1 ? " day ago" : " days ago");
|
||||
return date.toLocaleDateString();
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the badge class for a given status
|
||||
*/
|
||||
statusBadgeClass(status) {
|
||||
if (status === "running" || status === "success")
|
||||
return "badge-success";
|
||||
if (status === "building" || status === "deploying")
|
||||
return "badge-warning";
|
||||
if (status === "failed" || status === "error") return "badge-error";
|
||||
return "badge-neutral";
|
||||
},
|
||||
/**
|
||||
* Get the badge class for a given status
|
||||
*/
|
||||
statusBadgeClass(status) {
|
||||
if (status === "running" || status === "success") return "badge-success";
|
||||
if (status === "building" || status === "deploying")
|
||||
return "badge-warning";
|
||||
if (status === "failed" || status === "error") return "badge-error";
|
||||
return "badge-neutral";
|
||||
},
|
||||
|
||||
/**
|
||||
* Format status for display (capitalize first letter)
|
||||
*/
|
||||
statusLabel(status) {
|
||||
if (!status) return "";
|
||||
return status.charAt(0).toUpperCase() + status.slice(1);
|
||||
},
|
||||
/**
|
||||
* Format status for display (capitalize first letter)
|
||||
*/
|
||||
statusLabel(status) {
|
||||
if (!status) return "";
|
||||
return status.charAt(0).toUpperCase() + status.slice(1);
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if status indicates active deployment
|
||||
*/
|
||||
isDeploying(status) {
|
||||
return status === "building" || status === "deploying";
|
||||
},
|
||||
/**
|
||||
* Check if status indicates active deployment
|
||||
*/
|
||||
isDeploying(status) {
|
||||
return status === "building" || status === "deploying";
|
||||
},
|
||||
|
||||
/**
|
||||
* Scroll an element to the bottom
|
||||
*/
|
||||
scrollToBottom(el) {
|
||||
if (el) {
|
||||
requestAnimationFrame(() => {
|
||||
el.scrollTop = el.scrollHeight;
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Scroll an element to the bottom
|
||||
*/
|
||||
scrollToBottom(el) {
|
||||
if (el) {
|
||||
requestAnimationFrame(() => {
|
||||
el.scrollTop = el.scrollHeight;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if a scrollable element is at (or near) the bottom.
|
||||
* Tolerance of 30px accounts for rounding and partial lines.
|
||||
*/
|
||||
isScrolledToBottom(el, tolerance = 30) {
|
||||
if (!el) return true;
|
||||
return (
|
||||
el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance
|
||||
);
|
||||
},
|
||||
/**
|
||||
* Check if a scrollable element is at (or near) the bottom.
|
||||
* Tolerance of 30px accounts for rounding and partial lines.
|
||||
*/
|
||||
isScrolledToBottom(el, tolerance = 30) {
|
||||
if (!el) return true;
|
||||
return el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance;
|
||||
},
|
||||
|
||||
/**
|
||||
* Copy text to clipboard
|
||||
*/
|
||||
async copyToClipboard(text, button) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.left = "-9999px";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
return true;
|
||||
} catch (e) {
|
||||
document.body.removeChild(textArea);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
/**
|
||||
* Copy text to clipboard
|
||||
*/
|
||||
async copyToClipboard(text, button) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.left = "-9999px";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
return true;
|
||||
} catch (e) {
|
||||
document.body.removeChild(textArea);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Legacy support - expose utilities globally
|
||||
// ============================================
|
||||
window.upaas = {
|
||||
// These are kept for backwards compatibility but templates should use Alpine.js
|
||||
formatRelativeTime(dateStr) {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffSec = Math.floor(diffMs / 1000);
|
||||
const diffMin = Math.floor(diffSec / 60);
|
||||
const diffHour = Math.floor(diffMin / 60);
|
||||
const diffDay = Math.floor(diffHour / 24);
|
||||
// These are kept for backwards compatibility but templates should use Alpine.js
|
||||
formatRelativeTime(dateStr) {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffSec = Math.floor(diffMs / 1000);
|
||||
const diffMin = Math.floor(diffSec / 60);
|
||||
const diffHour = Math.floor(diffMin / 60);
|
||||
const diffDay = Math.floor(diffHour / 24);
|
||||
|
||||
if (diffSec < 60) return "just now";
|
||||
if (diffMin < 60)
|
||||
return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
|
||||
if (diffHour < 24)
|
||||
return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
|
||||
if (diffDay < 7)
|
||||
return diffDay + (diffDay === 1 ? " day ago" : " days ago");
|
||||
return date.toLocaleDateString();
|
||||
},
|
||||
// Placeholder functions - templates should migrate to Alpine.js
|
||||
initAppDetailPage() {},
|
||||
initDeploymentsPage() {},
|
||||
if (diffSec < 60) return "just now";
|
||||
if (diffMin < 60)
|
||||
return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
|
||||
if (diffHour < 24)
|
||||
return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
|
||||
if (diffDay < 7)
|
||||
return diffDay + (diffDay === 1 ? " day ago" : " days ago");
|
||||
return date.toLocaleDateString();
|
||||
},
|
||||
// Placeholder functions - templates should migrate to Alpine.js
|
||||
initAppDetailPage() {},
|
||||
initDeploymentsPage() {},
|
||||
};
|
||||
|
||||
// Update relative times on page load for non-Alpine elements
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".relative-time[data-time]").forEach((el) => {
|
||||
const time = el.getAttribute("data-time");
|
||||
if (time) {
|
||||
el.textContent = window.upaas.formatRelativeTime(time);
|
||||
}
|
||||
});
|
||||
document.querySelectorAll(".relative-time[data-time]").forEach((el) => {
|
||||
const time = el.getAttribute("data-time");
|
||||
if (time) {
|
||||
el.textContent = window.upaas.formatRelativeTime(time);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -77,10 +77,7 @@
|
||||
|
||||
<!-- Webhook URL -->
|
||||
<div class="card p-6 mb-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title">Webhook URL</h2>
|
||||
<a href="/apps/{{.App.ID}}/webhooks" class="text-primary-600 hover:text-primary-800 text-sm">Event History</a>
|
||||
</div>
|
||||
<h2 class="section-title mb-4">Webhook URL</h2>
|
||||
<p class="text-sm text-gray-500 mb-3">Add this URL as a push webhook in your Gitea repository:</p>
|
||||
<div class="copy-field" x-data="copyButton('webhook-url')">
|
||||
<code id="webhook-url" class="copy-field-value text-xs">{{.WebhookURL}}</code>
|
||||
|
||||
@@ -44,7 +44,6 @@ func initTemplates() {
|
||||
"app_detail.html",
|
||||
"app_edit.html",
|
||||
"deployments.html",
|
||||
"webhook_events.html",
|
||||
}
|
||||
|
||||
pageTemplates = make(map[string]*template.Template)
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
{{template "base" .}}
|
||||
|
||||
{{define "title"}}Webhook Events - {{.App.Name}} - µPaaS{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
{{template "nav" .}}
|
||||
|
||||
<main class="max-w-4xl mx-auto px-4 py-8">
|
||||
<div class="mb-6">
|
||||
<a href="/apps/{{.App.ID}}" class="text-primary-600 hover:text-primary-800 inline-flex items-center">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back to {{.App.Name}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="section-header">
|
||||
<h1 class="text-2xl font-medium text-gray-900">Webhook Events</h1>
|
||||
</div>
|
||||
|
||||
{{if .Events}}
|
||||
<div class="card overflow-hidden">
|
||||
<table class="table">
|
||||
<thead class="table-header">
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Event</th>
|
||||
<th>Branch</th>
|
||||
<th>Commit</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-body">
|
||||
{{range .Events}}
|
||||
<tr>
|
||||
<td class="text-gray-500 text-sm whitespace-nowrap">
|
||||
<span x-data="relativeTime('{{.CreatedAt.Format `2006-01-02T15:04:05Z07:00`}}')" x-text="display" class="cursor-default" title="{{.CreatedAt.Format `2006-01-02 15:04:05`}}"></span>
|
||||
</td>
|
||||
<td class="text-gray-700 text-sm">{{.EventType}}</td>
|
||||
<td class="font-mono text-gray-500 text-sm">{{.Branch}}</td>
|
||||
<td class="font-mono text-gray-500 text-xs">
|
||||
{{if and .CommitSHA.Valid .CommitURL.Valid}}
|
||||
<a href="{{.CommitURL.String}}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-800">{{.ShortCommit}}</a>
|
||||
{{else if .CommitSHA.Valid}}
|
||||
{{.ShortCommit}}
|
||||
{{else}}
|
||||
<span class="text-gray-400">-</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
{{if .Matched}}
|
||||
{{if .Processed}}
|
||||
<span class="badge-success">Matched</span>
|
||||
{{else}}
|
||||
<span class="badge-warning">Matched (pending)</span>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<span class="badge-neutral">No match</span>
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="card">
|
||||
<div class="empty-state">
|
||||
<svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
<h3 class="empty-state-title">No webhook events yet</h3>
|
||||
<p class="empty-state-description">Webhook events will appear here once your repository sends push notifications.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</main>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user