mirror of
https://github.com/amir20/dozzle.git
synced 2026-08-08 02:21:57 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Amir Raminfar
|
956e08c44e |
@@ -1,66 +0,0 @@
|
||||
---
|
||||
name: update-int-snapshots
|
||||
description: Use when Playwright visual snapshots in e2e/visual.spec.ts-snapshots/ need to be regenerated after a UI change (logo, theme, layout, anything that affects rendered pixels) and the integration suite needs to be rerun via make int
|
||||
---
|
||||
|
||||
# Update Integration Snapshots
|
||||
|
||||
## When to Use
|
||||
|
||||
- A visual change landed (logo, color, spacing, fonts) and `make int` will fail on `visual.spec.ts` until snapshots are regenerated.
|
||||
- A snapshot test reports diffs you've confirmed are intentional.
|
||||
|
||||
Do NOT use when diffs are unintentional regressions — investigate first.
|
||||
|
||||
## Procedure
|
||||
|
||||
1. **Delete the stale snapshots** so Playwright writes fresh ones (don't try to update in place, the old PNGs can confuse the diff):
|
||||
|
||||
```bash
|
||||
rm e2e/visual.spec.ts-snapshots/*.png
|
||||
```
|
||||
|
||||
2. **Check for port 8080 conflicts.** The `custom_base` test container binds host port 8080. If another container is already on it (common: `doligence-api-1`), the run fails with `Bind for 0.0.0.0:8080 failed: port is already allocated`.
|
||||
|
||||
```bash
|
||||
docker ps --format '{{.Names}}\t{{.Ports}}' | grep ':8080->'
|
||||
```
|
||||
|
||||
If anything other than test containers is bound, stop it first (ask the user before stopping containers from other projects).
|
||||
|
||||
3. **Run with `--update-snapshots` via `compose up`.** You must use `compose up` (not `compose run`) because the navigation sidebar snapshot includes the live container list, and the two modes produce different sibling containers. The cleanest way is to patch the playwright command in `docker-compose.yml` temporarily:
|
||||
|
||||
```bash
|
||||
sed -i.bak 's|command: npx --yes playwright test|command: npx --yes playwright test --update-snapshots|' docker-compose.yml
|
||||
make int
|
||||
mv docker-compose.yml.bak docker-compose.yml
|
||||
```
|
||||
|
||||
Snapshots must be generated in Linux/Chromium (the compose image), not macOS, because filenames include the platform suffix (e.g. `-chromium-linux.png`).
|
||||
|
||||
4. **Verify** by rerunning the normal suite:
|
||||
|
||||
```bash
|
||||
make int
|
||||
```
|
||||
|
||||
Should now pass cleanly.
|
||||
|
||||
5. **Commit the regenerated PNGs** alongside the UI change so CI stays green.
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
- **Running `npx playwright test --update-snapshots` locally on macOS.** Generates `-darwin` filenames CI doesn't use. Always go through the docker compose image.
|
||||
- **Forgetting to delete first.** `--update-snapshots` does overwrite, but if the test layout changed (new test, renamed snapshot), stale PNGs are left behind. Wipe-and-regenerate is safest.
|
||||
- **Stopping unrelated containers without asking.** The port conflict is annoying but the user's other dev containers may be holding important state.
|
||||
|
||||
## Quick Reference
|
||||
|
||||
```bash
|
||||
rm e2e/visual.spec.ts-snapshots/*.png
|
||||
docker ps | grep ':8080->' # confirm port free
|
||||
sed -i.bak 's|command: npx --yes playwright test|& --update-snapshots|' docker-compose.yml
|
||||
make int
|
||||
mv docker-compose.yml.bak docker-compose.yml
|
||||
make int # verify pass
|
||||
```
|
||||
@@ -2,12 +2,5 @@
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": ["config:recommended", "schedule:weekly", "group:allNonMajor", ":automergeMinor"],
|
||||
"rangeStrategy": "bump",
|
||||
"minimumReleaseAge": "24 hours",
|
||||
"ignoreDeps": [],
|
||||
"packageRules": [
|
||||
{
|
||||
"matchPackageNames": ["@playwright/test", "mcr.microsoft.com/playwright"],
|
||||
"groupName": "playwright"
|
||||
}
|
||||
]
|
||||
"ignoreDeps": []
|
||||
}
|
||||
|
||||
@@ -21,13 +21,13 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
pull-requests: read
|
||||
issues: read
|
||||
id-token: write
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
@@ -36,7 +36,6 @@ jobs:
|
||||
uses: anthropics/claude-code-action@v1
|
||||
with:
|
||||
claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
|
||||
use_sticky_comment: true
|
||||
prompt: |
|
||||
REPO: ${{ github.repository }}
|
||||
PR NUMBER: ${{ github.event.pull_request.number }}
|
||||
|
||||
@@ -23,14 +23,14 @@ jobs:
|
||||
(github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
issues: write
|
||||
contents: read
|
||||
pull-requests: read
|
||||
issues: read
|
||||
id-token: write
|
||||
actions: read # Required for Claude to read CI results on PRs
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
|
||||
@@ -12,19 +12,16 @@ jobs:
|
||||
name: JavaScript Tests
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v7
|
||||
- uses: actions/setup-node@v7
|
||||
- uses: actions/checkout@v6
|
||||
- uses: pnpm/action-setup@v5
|
||||
name: Install pnpm
|
||||
- uses: actions/setup-node@v6
|
||||
name: Install Node
|
||||
with:
|
||||
node-version: latest
|
||||
- run: npm install --global corepack@latest
|
||||
- run: corepack enable
|
||||
- run: pnpm --version
|
||||
- uses: actions/setup-node@v7
|
||||
with:
|
||||
node-version: latest
|
||||
node-version: 24.14.1
|
||||
cache: "pnpm"
|
||||
cache-dependency-path: "**/pnpm-lock.yaml"
|
||||
- run: corepack enable
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile --prefer-offline
|
||||
- name: Run Tests
|
||||
@@ -34,12 +31,12 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Install Go
|
||||
uses: actions/setup-go@v7
|
||||
uses: actions/setup-go@v6
|
||||
with:
|
||||
go-version: 1.26.5
|
||||
go-version: 1.26.1
|
||||
check-latest: true
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
- name: Install Protoc
|
||||
uses: arduino/setup-protoc@v3
|
||||
- name: Install gRPC and Go
|
||||
@@ -53,19 +50,16 @@ jobs:
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v7
|
||||
- uses: actions/setup-node@v7
|
||||
- uses: actions/checkout@v6
|
||||
- uses: pnpm/action-setup@v5
|
||||
name: Install pnpm
|
||||
- uses: actions/setup-node@v6
|
||||
name: Install Node
|
||||
with:
|
||||
node-version: latest
|
||||
- run: npm install --global corepack@latest
|
||||
- run: corepack enable
|
||||
- run: pnpm --version
|
||||
- uses: actions/setup-node@v7
|
||||
with:
|
||||
node-version: latest
|
||||
node-version: 24.14.1
|
||||
cache: "pnpm"
|
||||
cache-dependency-path: "**/pnpm-lock.yaml"
|
||||
- run: corepack enable
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
- name: Set up Docker Buildx
|
||||
@@ -99,20 +93,20 @@ jobs:
|
||||
packages: write
|
||||
steps:
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0
|
||||
uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
|
||||
- name: Login to DockerHub
|
||||
uses: docker/login-action@v4.6.0
|
||||
uses: docker/login-action@v4.1.0
|
||||
with:
|
||||
username: ${{ secrets.DOCKER_USERNAME }}
|
||||
password: ${{ secrets.DOCKER_PASSWORD }}
|
||||
- name: Log in to the Container registry
|
||||
uses: docker/login-action@v4.6.0
|
||||
uses: docker/login-action@v4.1.0
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
- name: Docker meta
|
||||
id: meta
|
||||
uses: docker/metadata-action@v6
|
||||
@@ -130,10 +124,9 @@ jobs:
|
||||
echo "${{ secrets.TTL_KEY }}" > shared_key.pem
|
||||
echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v7.3.0
|
||||
uses: docker/build-push-action@v7.0.0
|
||||
with:
|
||||
push: true
|
||||
sbom: true
|
||||
context: .
|
||||
platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
@@ -149,11 +142,13 @@ jobs:
|
||||
contents: write
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- uses: pnpm/action-setup@v5
|
||||
name: Install pnpm
|
||||
- name: Install Node
|
||||
uses: actions/setup-node@v7
|
||||
uses: actions/setup-node@v6
|
||||
- name: Release to Github
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
@@ -18,20 +18,20 @@ jobs:
|
||||
if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle') }}
|
||||
steps:
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0
|
||||
uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
|
||||
- name: Login to DockerHub
|
||||
uses: docker/login-action@v4.6.0
|
||||
uses: docker/login-action@v4.1.0
|
||||
with:
|
||||
username: ${{ secrets.DOCKER_USERNAME }}
|
||||
password: ${{ secrets.DOCKER_PASSWORD }}
|
||||
- name: Log in to the Container registry
|
||||
uses: docker/login-action@v4.6.0
|
||||
uses: docker/login-action@v4.1.0
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
- name: Docker meta
|
||||
id: meta
|
||||
uses: docker/metadata-action@v6
|
||||
@@ -39,21 +39,18 @@ jobs:
|
||||
images: |
|
||||
amir20/dozzle
|
||||
ghcr.io/amir20/dozzle
|
||||
- name: Short SHA
|
||||
id: sha
|
||||
run: echo "short=${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"
|
||||
- name: Writing certs to file
|
||||
run: |
|
||||
echo "${{ secrets.TTL_KEY }}" > shared_key.pem
|
||||
echo "${{ secrets.TTL_CERT }}" > shared_cert.pem
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v7.3.0
|
||||
uses: docker/build-push-action@v7.0.0
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
platforms: linux/amd64,linux/arm64/v8
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
build-args: TAG=${{ steps.meta.outputs.version }}-${{ steps.sha.outputs.short }}
|
||||
build-args: TAG=${{ steps.meta.outputs.version }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
|
||||
@@ -24,20 +24,14 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
with:
|
||||
fetch-depth: 0 # Not needed if lastUpdated is not enabled
|
||||
- name: Install Node
|
||||
uses: actions/setup-node@v7
|
||||
with:
|
||||
node-version: latest
|
||||
- run: npm install --global corepack@latest
|
||||
- run: corepack enable
|
||||
- run: pnpm --version
|
||||
- uses: pnpm/action-setup@v2
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v7
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: latest
|
||||
node-version: 24.14.1
|
||||
cache: pnpm # or pnpm / yarn
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v6
|
||||
@@ -48,7 +42,7 @@ jobs:
|
||||
pnpm docs:build
|
||||
touch docs/.vitepress/dist/.nojekyll
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v5
|
||||
uses: actions/upload-pages-artifact@v4
|
||||
with:
|
||||
path: docs/.vitepress/dist
|
||||
|
||||
|
||||
+25
-26
@@ -15,17 +15,18 @@ jobs:
|
||||
name: Typecheck
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v7
|
||||
- uses: actions/setup-node@v7
|
||||
- uses: actions/checkout@v6
|
||||
- uses: pnpm/action-setup@v5
|
||||
name: Install pnpm
|
||||
- uses: actions/setup-node@v6
|
||||
name: Install Node
|
||||
with:
|
||||
node-version: latest
|
||||
- run: npm install --global corepack@latest
|
||||
node-version: 24.14.1
|
||||
- run: corepack enable
|
||||
- run: pnpm --version
|
||||
- uses: actions/setup-node@v7
|
||||
- uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: latest
|
||||
node-version: 24.14.1
|
||||
cache: "pnpm"
|
||||
cache-dependency-path: "**/pnpm-lock.yaml"
|
||||
- name: Install dependencies
|
||||
@@ -36,17 +37,14 @@ jobs:
|
||||
name: JavaScript Tests
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v7
|
||||
- uses: actions/setup-node@v7
|
||||
name: Install Node
|
||||
with:
|
||||
node-version: latest
|
||||
- run: npm install --global corepack@latest
|
||||
- uses: actions/checkout@v6
|
||||
- uses: pnpm/action-setup@v5
|
||||
name: Install pnpm
|
||||
- run: corepack enable
|
||||
- run: pnpm --version
|
||||
- uses: actions/setup-node@v7
|
||||
- uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: latest
|
||||
node-version: 24.14.1
|
||||
cache: "pnpm"
|
||||
cache-dependency-path: "**/pnpm-lock.yaml"
|
||||
- name: Install dependencies
|
||||
@@ -58,12 +56,12 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Install Go
|
||||
uses: actions/setup-go@v7
|
||||
uses: actions/setup-go@v6
|
||||
with:
|
||||
go-version: "1.26.5"
|
||||
go-version: "1.26.1"
|
||||
check-latest: true
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
- name: Install Protoc
|
||||
uses: arduino/setup-protoc@v3
|
||||
with:
|
||||
@@ -79,11 +77,11 @@ jobs:
|
||||
name: Go Staticcheck
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v7
|
||||
uses: actions/checkout@v6
|
||||
- name: Setup Go
|
||||
uses: actions/setup-go@v7
|
||||
uses: actions/setup-go@v6
|
||||
with:
|
||||
go-version: "1.26.5"
|
||||
go-version: "1.26.1"
|
||||
check-latest: true
|
||||
- name: Generate dependencies
|
||||
run: make fake_assets shared_key.pem shared_cert.pem
|
||||
@@ -96,17 +94,18 @@ jobs:
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v7
|
||||
- uses: actions/setup-node@v7
|
||||
- uses: actions/checkout@v6
|
||||
- uses: pnpm/action-setup@v5
|
||||
name: Install pnpm
|
||||
- uses: actions/setup-node@v6
|
||||
name: Install Node
|
||||
with:
|
||||
node-version: latest
|
||||
- run: npm install --global corepack@latest
|
||||
node-version: 24.14.1
|
||||
- run: corepack enable
|
||||
- run: pnpm --version
|
||||
- uses: actions/setup-node@v7
|
||||
- uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: latest
|
||||
node-version: 24.14.1
|
||||
cache: "pnpm"
|
||||
cache-dependency-path: "**/pnpm-lock.yaml"
|
||||
- name: Install dependencies
|
||||
|
||||
@@ -14,23 +14,6 @@ Format:
|
||||
- Include file:line references when relevant
|
||||
- Maximum ~10-15 lines per response
|
||||
|
||||
## Testing Unreleased PRs
|
||||
|
||||
When replying to a GitHub issue or discussion where the fix lives in an open PR, ask the reporter to test the pre-built image: `amir20/dozzle:pr-XXX` (XXX = PR number). CI builds a tagged image per PR, so reporters can verify without waiting for the next release.
|
||||
|
||||
## GitHub Tone (issues, PRs, comments, discussions)
|
||||
|
||||
When posting anything to GitHub, write like a human maintainer, not an AI assistant. Avoid telltale LLM patterns:
|
||||
|
||||
- No em dashes or en dashes. Use commas, periods, or parentheses instead.
|
||||
- No "Not X, but Y" rhetorical contrasts.
|
||||
- No throat-clearing openers ("Great point", "Makes sense", "Thanks for the detailed write-up").
|
||||
- No closing summaries or recap sentences.
|
||||
- No bolded inline labels mid-paragraph ("**Why:**", "**Note:**").
|
||||
- Drop hedges ("essentially", "basically", "essentially just"). Say it plain.
|
||||
- Lowercase casual tone is fine. Contractions are fine. Short sentences are fine.
|
||||
- Don't over-explain tradeoffs. State the decision, give one reason, stop.
|
||||
|
||||
## Project Overview
|
||||
|
||||
Dozzle is a lightweight, web-based Docker log viewer with real-time monitoring capabilities. It's a hybrid application with:
|
||||
@@ -143,8 +126,8 @@ The Go backend is organized into these key packages:
|
||||
|
||||
- **`internal/support/`** - Support utilities
|
||||
- `cli/`: Command-line argument parsing and validation
|
||||
- `docker/`: Multi-host Docker management and Swarm support (`docker_service.go`, client managers)
|
||||
- `k8s/`: Kubernetes service abstractions
|
||||
- `docker/`: Multi-host Docker management and Swarm support
|
||||
- `container/`: Container service abstractions
|
||||
- `web/`: Web service utilities
|
||||
|
||||
- **`internal/auth/`** - Authentication providers
|
||||
@@ -160,6 +143,10 @@ The Go backend is organized into these key packages:
|
||||
- `log_listener.go`: Log pattern matching for alerts
|
||||
- `dispatcher/`: Notification channel implementations (email, webhook, etc.)
|
||||
|
||||
- **`graph/`** - GraphQL API layer
|
||||
- `schema.graphqls`: GraphQL schema definitions
|
||||
- `*.resolvers.go`: GraphQL resolver implementations
|
||||
|
||||
- **`main.go`** - Application entry point with mode switching (server/swarm/k8s/agent)
|
||||
|
||||
### Frontend (Vue 3)
|
||||
@@ -220,6 +207,7 @@ The frontend uses file-based routing with these conventions:
|
||||
3. **Stats**: Real-time CPU/memory stats streamed via SSE alongside events
|
||||
4. **Actions**: POST to `/api/hosts/{host}/containers/{id}/actions/{action}` (start/stop/restart)
|
||||
5. **Terminal**: WebSocket connections for container attach/exec at `/api/hosts/{host}/containers/{id}/attach`
|
||||
6. **GraphQL**: POST to `/api/graphql` for queries and mutations (container metadata, historical logs, notifications)
|
||||
|
||||
### Build System
|
||||
|
||||
@@ -249,7 +237,7 @@ The frontend uses file-based routing with these conventions:
|
||||
- All stat history tracked in `Container.statsHistory` (max 300 items via rolling window)
|
||||
- `chartData` is always a rolling window of max 300 items — array length stays constant
|
||||
- Uses `ref` (not `computed`) for `downsampledBars` to enable in-place mutation of the last bar, avoiding full re-renders
|
||||
- Component instance is reused when switching containers; after init the chart only patches the last bar per tick, so on a wholesale `chartData` replacement (container switch) the parent must call the exposed `recalculate()`. `MultiContainerStat` holds refs to its `BarChart`s and calls it in the `containers` watch. (Note: `Container` carries Vue `ref`s, so VueTestUtils `setProps` cannot retrigger such a watch — tests must swap the container via a parent `ref` re-render.)
|
||||
- Component instance is reused when switching containers; parent must call exposed `recalculate()` to force refresh
|
||||
|
||||
### Backend
|
||||
|
||||
@@ -257,6 +245,9 @@ The frontend uses file-based routing with these conventions:
|
||||
- Certificate generation is required (`make generate` creates shared_key.pem and shared_cert.pem)
|
||||
- Protocol buffer generation happens via `go generate` directive in `main.go`
|
||||
- Docker client uses API version negotiation for compatibility
|
||||
- **GraphQL API**: Uses gqlgen with schema in `graph/schema.graphqls`, generated code in `graph/generated.go`
|
||||
- Run `pnpm codegen` to regenerate GraphQL types
|
||||
- Resolvers follow-schema layout in `graph/*.resolvers.go`
|
||||
- **Service Layer Architecture**:
|
||||
- `ClientService` interface abstracts Docker/K8s/Agent backends
|
||||
- `MultiHostService` orchestrates multi-host operations
|
||||
@@ -324,7 +315,7 @@ Implementation (DockerClient, K8sClient, AgentClient)
|
||||
|
||||
1. Define method in `container.Client` interface (`internal/container/client.go`)
|
||||
2. Implement in `internal/docker/client.go` (and `internal/k8s/client.go` if applicable)
|
||||
3. Add wrapper method in `ClientService` interface (`internal/support/docker/docker_service.go`)
|
||||
3. Add wrapper method in `ClientService` interface (`internal/support/container/service.go`)
|
||||
4. Add HTTP handler in `internal/web/` with appropriate route
|
||||
|
||||
### Frontend Data Flow
|
||||
@@ -404,6 +395,14 @@ Implementation (DockerClient, K8sClient, AgentClient)
|
||||
4. Use `LogViewer.vue` component to render messages
|
||||
5. Add backend API endpoint if needed (see above)
|
||||
|
||||
### Adding a New GraphQL Query/Mutation
|
||||
|
||||
1. Define in `graph/schema.graphqls`
|
||||
2. Run `pnpm codegen` to regenerate types
|
||||
3. Implement resolver in `graph/schema.resolvers.go`
|
||||
4. Use `hostService` from resolver context to access backend services
|
||||
5. Frontend calls via urql client (auto-imported via `@urql/vue`)
|
||||
|
||||
### Adding Container Stats/Metrics
|
||||
|
||||
1. Add field to `Stat` type in `internal/container/types.go`
|
||||
@@ -425,7 +424,7 @@ Implementation (DockerClient, K8sClient, AgentClient)
|
||||
**Frontend** (`assets/pages/notifications.vue`, `assets/components/Notification/`):
|
||||
|
||||
- `AlertForm.vue`, `DestinationForm.vue`: UI for creating rules
|
||||
- Rules persisted to `./data/notifications.yml` via `internal/notification/persist.go`
|
||||
- Rules stored via GraphQL mutations
|
||||
- Alert state displayed in notification cards
|
||||
|
||||
**Adding a new notification channel:**
|
||||
@@ -433,6 +432,7 @@ Implementation (DockerClient, K8sClient, AgentClient)
|
||||
1. Implement dispatcher interface in `internal/notification/dispatcher/`
|
||||
2. Register in `manager.go` dispatcher factory
|
||||
3. Add UI form in `assets/components/Notification/DestinationForm.vue`
|
||||
4. Add GraphQL schema fields if needed
|
||||
|
||||
### Adding a New Cloud Tool
|
||||
|
||||
@@ -465,4 +465,5 @@ Implementation (DockerClient, K8sClient, AgentClient)
|
||||
|
||||
- Backend logs: Set `--level debug` flag or `DOZZLE_LEVEL=debug` env var
|
||||
- Frontend: Vue DevTools browser extension
|
||||
- GraphQL: Use GraphQL Playground at `/api/graphql` (when enabled)
|
||||
- SSE streams: Browser DevTools Network tab shows EventSource connections
|
||||
|
||||
+3
-8
@@ -3,17 +3,15 @@ FROM --platform=$BUILDPLATFORM node:25.9.0-alpine AS node
|
||||
|
||||
RUN npm install -g --force corepack && corepack enable
|
||||
|
||||
ENV CI=true
|
||||
|
||||
WORKDIR /build
|
||||
|
||||
# Install dependencies from lock file
|
||||
COPY pnpm-lock.yaml pnpm-workspace.yaml ./
|
||||
RUN pnpm fetch --ignore-scripts
|
||||
COPY pnpm-*.yaml ./
|
||||
RUN pnpm fetch --ignore-scripts --no-optional
|
||||
|
||||
# Copy package.json and install dependencies
|
||||
COPY package.json ./
|
||||
RUN pnpm install --offline --ignore-scripts
|
||||
RUN pnpm install --offline --ignore-scripts --no-optional
|
||||
|
||||
# Copy assets and translations to build
|
||||
COPY vite.config.ts tsconfig.json .prettierrc.cjs .npmrc ./
|
||||
@@ -21,9 +19,6 @@ COPY assets ./assets
|
||||
COPY locales ./locales
|
||||
COPY public ./public
|
||||
|
||||
ARG CLOUD_URL
|
||||
ENV CLOUD_URL=$CLOUD_URL
|
||||
|
||||
# Build assets
|
||||
RUN pnpm build
|
||||
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
# Dozzle Major Version Highlights
|
||||
|
||||
A summary of major features introduced with each major version bump since 2020.
|
||||
|
||||
## v2.0.0 — 2020-06-27
|
||||
|
||||
- Theme overhaul using CSS variables
|
||||
- Progress notification bar
|
||||
- Toggle between new light and dark themes
|
||||
|
||||
## v3.0.0 — 2020-09-06
|
||||
|
||||
- Live container stats (CPU/memory) streamed in real time
|
||||
- Pinned tabs and improved mobile/responsive layout
|
||||
- Major UI overhaul
|
||||
|
||||
## v4.0.0 — 2022-08-17
|
||||
|
||||
- First-class JSON log support
|
||||
- Jump-to-context, soft wraps, clear-logs action
|
||||
- Auto color scheme, dark mode polish
|
||||
- Container stats panel, total CPU/mem usage
|
||||
- Healthcheck endpoint and "wait for docker" startup option
|
||||
|
||||
## v5.0.0 — 2023-09-23
|
||||
|
||||
- Multi-host support with parallel client connections
|
||||
- New homepage dashboard with all containers, sortable table, pagination, bar charts
|
||||
- Exponential moving average for stats
|
||||
- Container pinning, keyboard shortcut overlay
|
||||
- stdout/stderr stream separation
|
||||
- i18n: Chinese, German added; locale infrastructure
|
||||
- Refactored UI with faster components
|
||||
|
||||
## v6.0.0 — 2024-01-01
|
||||
|
||||
- **Forward-proxy authentication** (Authelia, etc.) and `users.yml` file-based auth
|
||||
- Container actions: start/stop/restart from the UI
|
||||
- Hot-reload of users.yml without restart
|
||||
- Custom headers for forward-proxy auth
|
||||
- Settings synced to disk for authenticated users
|
||||
- Toast notifications, release list, redirect-to-new-container
|
||||
- Removed legacy auth model (breaking)
|
||||
|
||||
## v7.0.0 — 2024-05-24
|
||||
|
||||
- **Docker Swarm mode** with stacks and services on remote hosts
|
||||
- Host cards on dashboard with per-host stats
|
||||
- Container grouping by stack/compose
|
||||
- Background stats collection (up to 5 min) with idle deactivation
|
||||
- LogFmt parser support
|
||||
- Compact mode, draggable search, alt-click split panes
|
||||
- Many new locales (French, Italian, Polish, Danish, Turkish, …)
|
||||
- `generate` subcommand for users.yml
|
||||
|
||||
## v8.0.0 — 2024-07-05
|
||||
|
||||
- **Swarm mode rebuilt on gRPC agents** (breaking architecture change)
|
||||
- Critical/severe log levels
|
||||
- Stacks and services in fuzzy search
|
||||
- Improved search with full match scrolling
|
||||
- Container start events shown inline
|
||||
|
||||
## v9.0.0 — 2026-01-06
|
||||
|
||||
- **Kubernetes mode** with k8s-specific menu
|
||||
- **User roles** and `dozzle_*` role mapping; logout URL for forward proxy
|
||||
- Historical stats on homepage, hosts, and containers
|
||||
- Permanent links to specific past log lines
|
||||
- Grouping by `dev.dozzle.group` label, log message grouping
|
||||
- Shell resize support, action toolbar in menu
|
||||
- Settings page, collapsible side menu sections
|
||||
- Parallel container fetching, gRPC compression
|
||||
- CLEF (`@l`) log level extraction
|
||||
- New locales: Korean, Indonesian, Dutch
|
||||
|
||||
## v10.0.0 — 2026-02-10
|
||||
|
||||
- **Dozzle Cloud** integration (bidirectional gRPC tool execution)
|
||||
- **Notifications & alerts**: full notifications page, webhooks, dispatchers, Go template support, test connections
|
||||
- Notifications work across agents
|
||||
- Per-container network usage stats (with mobile view)
|
||||
- Coolify label fallbacks for container name/group
|
||||
- Alert creation shortcut, JSON syntax in templates
|
||||
@@ -21,17 +21,13 @@ fake_assets:
|
||||
test: fake_assets generate
|
||||
go test -cover -race -count 1 -timeout 40s ./...
|
||||
|
||||
.PHONY: test-update
|
||||
test-update: fake_assets generate
|
||||
go test -cover -race -count 1 -timeout 5s ./... -- -- -u
|
||||
|
||||
.PHONY: build
|
||||
build: dist generate
|
||||
CGO_ENABLED=0 go build -ldflags "-s -w -X github.com/amir20/dozzle/internal/support/cli.Version=local"
|
||||
|
||||
.PHONY: docker
|
||||
docker: generate
|
||||
@docker build --build-arg TAG=local --build-arg CLOUD_URL=$(CLOUD_URL) -t amir20/dozzle:local .
|
||||
@docker build --build-arg TAG=local -t amir20/dozzle:local .
|
||||
|
||||
.PHONY: generate
|
||||
generate: shared_key.pem shared_cert.pem
|
||||
@@ -53,6 +49,11 @@ shared_cert.pem: shared_key.pem
|
||||
@openssl x509 -req -in shared_request.csr -signkey shared_key.pem -out shared_cert.pem -days 1825
|
||||
@rm shared_request.csr
|
||||
|
||||
.PHONY: push
|
||||
push: docker
|
||||
@docker tag amir20/dozzle:local amir20/dozzle:local-test
|
||||
@docker push amir20/dozzle:local-test
|
||||
|
||||
.PHONY: run
|
||||
run: docker
|
||||
docker run -it --rm -p 8080:8080 -v /var/run/docker.sock:/var/run/docker.sock amir20/dozzle:local
|
||||
|
||||
@@ -41,7 +41,7 @@ Dozzle is a small container (7 MB compressed). Pull the latest release with:
|
||||
|
||||
The simplest way to use Dozzle is to run the Docker container. Mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
|
||||
|
||||
$ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -v dozzle_data:/data -p 8080:8080 amir20/dozzle:latest
|
||||
$ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest
|
||||
|
||||
Dozzle will be available at [http://localhost:8080/](http://localhost:8080/).
|
||||
|
||||
@@ -53,11 +53,8 @@ Here is a Docker Compose example:
|
||||
image: amir20/dozzle:latest
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- dozzle_data:/data
|
||||
ports:
|
||||
- 8080:8080
|
||||
volumes:
|
||||
dozzle_data:
|
||||
|
||||
For advanced options like [authentication](https://dozzle.dev/guide/authentication), [remote hosts](https://dozzle.dev/guide/remote-hosts), or common [questions](https://dozzle.dev/guide/faq), see the documentation at [dozzle.dev](https://dozzle.dev/guide/getting-started).
|
||||
|
||||
@@ -81,8 +78,6 @@ See the [Agent Mode](https://dozzle.dev/guide/agent) documentation for more deta
|
||||
|
||||
Dozzle uses automatic API negotiation, which works with most Docker configurations. Dozzle also works with [Colima](https://github.com/abiosoft/colima) and [Podman](https://podman.io/).
|
||||
|
||||
Dozzle requires Docker Engine 19.03 or newer (API version 1.40+). Older daemons are not supported by the underlying Docker SDK.
|
||||
|
||||
### Installation on Podman
|
||||
|
||||
By default, Podman doesn't have a background process, but you can enable the remote socket for Dozzle to work.
|
||||
@@ -145,51 +140,11 @@ There are many ways to support Dozzle:
|
||||
|
||||
## Building
|
||||
|
||||
Want to contribute? Great! Dozzle has two parts: a **Go backend** that talks to Docker, and a **Vue frontend** that runs in the browser. You don't need to know both — pick the side that matches what you want to change. For documentation fixes, no setup is needed at all; just edit the file on GitHub.
|
||||
To build and test locally:
|
||||
|
||||
### 1. Install the prerequisites
|
||||
|
||||
You'll need [Go](https://go.dev/doc/install) (1.25+), [Node.js](https://nodejs.org/en/download/) (with [pnpm](https://pnpm.io/installation)), and [protoc](https://grpc.io/docs/protoc-installation/).
|
||||
|
||||
On macOS, you can install everything in one go:
|
||||
|
||||
```bash
|
||||
brew install go node pnpm protobuf
|
||||
```
|
||||
|
||||
On Linux (Debian/Ubuntu):
|
||||
|
||||
```bash
|
||||
sudo apt install golang nodejs protobuf-compiler
|
||||
npm install -g pnpm
|
||||
```
|
||||
|
||||
On Windows, we recommend using [WSL2](https://learn.microsoft.com/en-us/windows/wsl/install) and following the Linux instructions.
|
||||
|
||||
### 2. Clone and set up
|
||||
|
||||
```bash
|
||||
git clone https://github.com/amir20/dozzle.git
|
||||
cd dozzle
|
||||
pnpm install # installs frontend dependencies
|
||||
go install tool # installs Go build tools listed in go.mod (air, protoc-gen-go, etc.)
|
||||
make generate # generates TLS certificates and protobuf code (only needed once)
|
||||
```
|
||||
|
||||
### 3. Start the dev server
|
||||
|
||||
```bash
|
||||
make dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3100](http://localhost:3100) — you should see the Dozzle UI connected to your local Docker. Both the frontend and backend reload automatically when you save a file.
|
||||
|
||||
### Making your first change
|
||||
|
||||
Try editing `assets/pages/index.vue` and saving — the browser updates instantly. For backend changes, edit any `.go` file and the server will restart on its own.
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
- **Nothing shows up at localhost:3100** — make sure Docker is running and the socket is accessible at `/var/run/docker.sock`.
|
||||
- **`make generate` fails** — confirm `protoc` is on your PATH (`protoc --version`).
|
||||
- **Still stuck?** Open a question in [GitHub Discussions](https://github.com/amir20/dozzle/discussions) — we're happy to help.
|
||||
1. Install [Node.js](https://nodejs.org/en/download/) and [pnpm](https://pnpm.io/installation).
|
||||
2. Install [Go](https://go.dev/doc/install).
|
||||
3. Install [protoc](https://grpc.io/docs/protoc-installation/).
|
||||
4. Install Go tools with `go install tool`.
|
||||
5. Install Node modules with `pnpm install`.
|
||||
6. Run `make dev` to start a development server with hot reload.
|
||||
|
||||
Vendored
+3
-38
@@ -1,19 +1,15 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
/* oxlint-disable */
|
||||
/* oxfmt-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
declare global {
|
||||
const DEFAULT_MENU_WIDTH: typeof import('./stores/settings').DEFAULT_MENU_WIDTH
|
||||
const DEFAULT_SETTINGS: typeof import('./stores/settings').DEFAULT_SETTINGS
|
||||
const EffectScope: typeof import('vue').EffectScope
|
||||
const K8sNamespace: typeof import('./stores/k8s').K8sNamespace
|
||||
const K8sOwner: typeof import('./stores/k8s').K8sOwner
|
||||
const MIN_MENU_WIDTH: typeof import('./stores/settings').MIN_MENU_WIDTH
|
||||
const acceptHMRUpdate: typeof import('pinia').acceptHMRUpdate
|
||||
const allLevels: typeof import('./composable/logContext').allLevels
|
||||
const arrayEquals: typeof import('./utils/index').arrayEquals
|
||||
@@ -21,7 +17,6 @@ declare global {
|
||||
const autoResetRef: typeof import('@vueuse/core').autoResetRef
|
||||
const automaticRedirect: typeof import('./stores/settings').automaticRedirect
|
||||
const collapseNav: typeof import('./stores/settings').collapseNav
|
||||
const colorize: typeof import('./utils/index').colorize
|
||||
const compact: typeof import('./stores/settings').compact
|
||||
const computed: typeof import('vue').computed
|
||||
const computedAsync: typeof import('@vueuse/core').computedAsync
|
||||
@@ -33,7 +28,6 @@ declare global {
|
||||
const controlledRef: typeof import('@vueuse/core').controlledRef
|
||||
const createApp: typeof import('vue').createApp
|
||||
const createContainerHints: typeof import('./composable/exprEditor').createContainerHints
|
||||
const createDisposableDirective: typeof import('@vueuse/core').createDisposableDirective
|
||||
const createDrawer: typeof import('./composable/drawer').createDrawer
|
||||
const createEventHints: typeof import('./composable/exprEditor').createEventHints
|
||||
const createEventHook: typeof import('@vueuse/core').createEventHook
|
||||
@@ -60,7 +54,6 @@ declare global {
|
||||
const drawerContext: typeof import('./composable/drawer').drawerContext
|
||||
const eagerComputed: typeof import('@vueuse/core').eagerComputed
|
||||
const effectScope: typeof import('vue').effectScope
|
||||
const escapeHtml: typeof import('./utils/index').escapeHtml
|
||||
const extendRef: typeof import('@vueuse/core').extendRef
|
||||
const flattenJSON: typeof import('./utils/index').flattenJSON
|
||||
const flattenJSONToMap: typeof import('./utils/index').flattenJSONToMap
|
||||
@@ -71,13 +64,10 @@ declare global {
|
||||
const getCurrentScope: typeof import('vue').getCurrentScope
|
||||
const getCurrentWatcher: typeof import('vue').getCurrentWatcher
|
||||
const getDeep: typeof import('./utils/index').getDeep
|
||||
const getK8sOwnerRefs: typeof import('./stores/k8s').getK8sOwnerRefs
|
||||
const globalShowPopup: typeof import('./composable/popup').globalShowPopup
|
||||
const groupContainers: typeof import('./stores/settings').groupContainers
|
||||
const groupK8sOwners: typeof import('./stores/k8s').groupK8sOwners
|
||||
const h: typeof import('vue').h
|
||||
const hashCode: typeof import('./utils/index').hashCode
|
||||
const highlightSubstringInHtml: typeof import('./utils/index').highlightSubstringInHtml
|
||||
const hourStyle: typeof import('./stores/settings').hourStyle
|
||||
const ignorableWatch: typeof import('@vueuse/core').ignorableWatch
|
||||
const inject: typeof import('vue').inject
|
||||
@@ -124,7 +114,6 @@ declare global {
|
||||
const onUnmounted: typeof import('vue').onUnmounted
|
||||
const onUpdated: typeof import('vue').onUpdated
|
||||
const onWatcherCleanup: typeof import('vue').onWatcherCleanup
|
||||
const ownerMembershipLabel: typeof import('./stores/k8s').ownerMembershipLabel
|
||||
const parseMessage: typeof import('./composable/loadBetween').parseMessage
|
||||
const pausableWatch: typeof import('@vueuse/core').pausableWatch
|
||||
const persistentVisibleKeysForContainer: typeof import('./composable/storage').persistentVisibleKeysForContainer
|
||||
@@ -169,7 +158,6 @@ declare global {
|
||||
const stripVersion: typeof import('./utils/index').stripVersion
|
||||
const syncRef: typeof import('@vueuse/core').syncRef
|
||||
const syncRefs: typeof import('@vueuse/core').syncRefs
|
||||
const syntaxHighlightJson: typeof import('./utils/index').syntaxHighlightJson
|
||||
const templateRef: typeof import('@vueuse/core').templateRef
|
||||
const throttledRef: typeof import('@vueuse/core').throttledRef
|
||||
const throttledWatch: typeof import('@vueuse/core').throttledWatch
|
||||
@@ -180,7 +168,6 @@ declare global {
|
||||
const toRelativeTime: typeof import('./utils/index').toRelativeTime
|
||||
const toValue: typeof import('vue').toValue
|
||||
const triggerRef: typeof import('vue').triggerRef
|
||||
const tryFormatJson: typeof import('./utils/index').tryFormatJson
|
||||
const tryOnBeforeMount: typeof import('@vueuse/core').tryOnBeforeMount
|
||||
const tryOnBeforeUnmount: typeof import('@vueuse/core').tryOnBeforeUnmount
|
||||
const tryOnMounted: typeof import('@vueuse/core').tryOnMounted
|
||||
@@ -218,10 +205,7 @@ declare global {
|
||||
const useClipboard: typeof import('@vueuse/core').useClipboard
|
||||
const useClipboardItems: typeof import('@vueuse/core').useClipboardItems
|
||||
const useCloned: typeof import('@vueuse/core').useCloned
|
||||
const useCloudConfig: typeof import('./composable/cloudConfig').useCloudConfig
|
||||
const useCloudLogSearch: typeof import('./composable/cloudLogSearch').useCloudLogSearch
|
||||
const useColorMode: typeof import('@vueuse/core').useColorMode
|
||||
const useCommands: typeof import('./composable/commands').useCommands
|
||||
const useConfirmDialog: typeof import('@vueuse/core').useConfirmDialog
|
||||
const useContainerActions: typeof import('./composable/containerActions').useContainerActions
|
||||
const useContainerStore: typeof import('./stores/container').useContainerStore
|
||||
@@ -253,7 +237,6 @@ declare global {
|
||||
const useElementBounding: typeof import('@vueuse/core').useElementBounding
|
||||
const useElementByPoint: typeof import('@vueuse/core').useElementByPoint
|
||||
const useElementHover: typeof import('@vueuse/core').useElementHover
|
||||
const useElementOverflow: typeof import('@vueuse/core').useElementOverflow
|
||||
const useElementSize: typeof import('@vueuse/core').useElementSize
|
||||
const useElementVisibility: typeof import('@vueuse/core').useElementVisibility
|
||||
const useEventBus: typeof import('@vueuse/core').useEventBus
|
||||
@@ -270,13 +253,11 @@ declare global {
|
||||
const useFocusWithin: typeof import('@vueuse/core').useFocusWithin
|
||||
const useFps: typeof import('@vueuse/core').useFps
|
||||
const useFullscreen: typeof import('@vueuse/core').useFullscreen
|
||||
const useFuzzySearch: typeof import('./composable/fuzzySearch').useFuzzySearch
|
||||
const useGamepad: typeof import('@vueuse/core').useGamepad
|
||||
const useGeolocation: typeof import('@vueuse/core').useGeolocation
|
||||
const useGroupedStream: typeof import('./composable/eventStreams').useGroupedStream
|
||||
const useHead: typeof import('@vueuse/head').useHead
|
||||
const useHistoricalContainerLog: typeof import('./composable/historicalLogs').useHistoricalContainerLog
|
||||
const useHostGroupStream: typeof import('./composable/eventStreams').useHostGroupStream
|
||||
const useHostStream: typeof import('./composable/eventStreams').useHostStream
|
||||
const useHosts: typeof import('./stores/hosts').useHosts
|
||||
const useI18n: typeof import('vue-i18n').useI18n
|
||||
@@ -424,16 +405,10 @@ declare global {
|
||||
export type { AlertFormOptions, ContainerResult } from './composable/alertForm'
|
||||
import('./composable/alertForm')
|
||||
// @ts-ignore
|
||||
export type { CloudLogHit } from './composable/cloudLogSearch'
|
||||
import('./composable/cloudLogSearch')
|
||||
// @ts-ignore
|
||||
export type { CommandSection, Command } from './composable/commands'
|
||||
import('./composable/commands')
|
||||
// @ts-ignore
|
||||
export type { DrawerWidth } from './composable/drawer'
|
||||
import('./composable/drawer')
|
||||
// @ts-ignore
|
||||
export type { SearchStatus, LogStreamSource } from './composable/eventStreams'
|
||||
export type { LogStreamSource } from './composable/eventStreams'
|
||||
import('./composable/eventStreams')
|
||||
// @ts-ignore
|
||||
export type { ExprEditorOptions } from './composable/exprEditor'
|
||||
@@ -448,7 +423,7 @@ declare global {
|
||||
export type { Host } from './stores/hosts'
|
||||
import('./stores/hosts')
|
||||
// @ts-ignore
|
||||
export type { K8sNamespace, K8sOwner, K8sOwnerRef } from './stores/k8s'
|
||||
export type { K8sNamespace, K8sOwner } from './stores/k8s'
|
||||
import('./stores/k8s')
|
||||
// @ts-ignore
|
||||
export type { Settings } from './stores/settings'
|
||||
@@ -471,7 +446,6 @@ declare module 'vue' {
|
||||
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
|
||||
readonly automaticRedirect: UnwrapRef<typeof import('./stores/settings')['automaticRedirect']>
|
||||
readonly collapseNav: UnwrapRef<typeof import('./stores/settings')['collapseNav']>
|
||||
readonly colorize: UnwrapRef<typeof import('./utils/index')['colorize']>
|
||||
readonly compact: UnwrapRef<typeof import('./stores/settings')['compact']>
|
||||
readonly computed: UnwrapRef<typeof import('vue')['computed']>
|
||||
readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
|
||||
@@ -483,7 +457,6 @@ declare module 'vue' {
|
||||
readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
|
||||
readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
|
||||
readonly createContainerHints: UnwrapRef<typeof import('./composable/exprEditor')['createContainerHints']>
|
||||
readonly createDisposableDirective: UnwrapRef<typeof import('@vueuse/core')['createDisposableDirective']>
|
||||
readonly createDrawer: UnwrapRef<typeof import('./composable/drawer')['createDrawer']>
|
||||
readonly createEventHints: UnwrapRef<typeof import('./composable/exprEditor')['createEventHints']>
|
||||
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
|
||||
@@ -520,10 +493,8 @@ declare module 'vue' {
|
||||
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
|
||||
readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
|
||||
readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
|
||||
readonly getK8sOwnerRefs: UnwrapRef<typeof import('./stores/k8s')['getK8sOwnerRefs']>
|
||||
readonly globalShowPopup: UnwrapRef<typeof import('./composable/popup')['globalShowPopup']>
|
||||
readonly groupContainers: UnwrapRef<typeof import('./stores/settings')['groupContainers']>
|
||||
readonly groupK8sOwners: UnwrapRef<typeof import('./stores/k8s')['groupK8sOwners']>
|
||||
readonly h: UnwrapRef<typeof import('vue')['h']>
|
||||
readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
|
||||
readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>
|
||||
@@ -572,7 +543,6 @@ declare module 'vue' {
|
||||
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
|
||||
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
|
||||
readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
|
||||
readonly ownerMembershipLabel: UnwrapRef<typeof import('./stores/k8s')['ownerMembershipLabel']>
|
||||
readonly parseMessage: UnwrapRef<typeof import('./composable/loadBetween')['parseMessage']>
|
||||
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
|
||||
readonly persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
|
||||
@@ -596,6 +566,7 @@ declare module 'vue' {
|
||||
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
|
||||
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
|
||||
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
|
||||
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
|
||||
readonly scrollContextKey: UnwrapRef<typeof import('./composable/scrollContext')['scrollContextKey']>
|
||||
readonly search: UnwrapRef<typeof import('./stores/settings')['search']>
|
||||
readonly sessionHost: UnwrapRef<typeof import('./composable/storage')['sessionHost']>
|
||||
@@ -663,10 +634,7 @@ declare module 'vue' {
|
||||
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
|
||||
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
|
||||
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
|
||||
readonly useCloudConfig: UnwrapRef<typeof import('./composable/cloudConfig')['useCloudConfig']>
|
||||
readonly useCloudLogSearch: UnwrapRef<typeof import('./composable/cloudLogSearch')['useCloudLogSearch']>
|
||||
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
|
||||
readonly useCommands: UnwrapRef<typeof import('./composable/commands')['useCommands']>
|
||||
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
|
||||
readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
|
||||
readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
|
||||
@@ -698,7 +666,6 @@ declare module 'vue' {
|
||||
readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
|
||||
readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
|
||||
readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
|
||||
readonly useElementOverflow: UnwrapRef<typeof import('@vueuse/core')['useElementOverflow']>
|
||||
readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
|
||||
readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
|
||||
readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
|
||||
@@ -715,13 +682,11 @@ declare module 'vue' {
|
||||
readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
|
||||
readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
|
||||
readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
|
||||
readonly useFuzzySearch: UnwrapRef<typeof import('./composable/fuzzySearch')['useFuzzySearch']>
|
||||
readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
|
||||
readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
|
||||
readonly useGroupedStream: UnwrapRef<typeof import('./composable/eventStreams')['useGroupedStream']>
|
||||
readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
|
||||
readonly useHistoricalContainerLog: UnwrapRef<typeof import('./composable/historicalLogs')['useHistoricalContainerLog']>
|
||||
readonly useHostGroupStream: UnwrapRef<typeof import('./composable/eventStreams')['useHostGroupStream']>
|
||||
readonly useHostStream: UnwrapRef<typeof import('./composable/eventStreams')['useHostStream']>
|
||||
readonly useHosts: UnwrapRef<typeof import('./stores/hosts')['useHosts']>
|
||||
readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import { build } from "vite";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
describe("production build", () => {
|
||||
it("emits font URLs relative to the generated stylesheet", async () => {
|
||||
const result = await build({
|
||||
configFile: "vite.config.ts",
|
||||
logLevel: "silent",
|
||||
build: { write: false },
|
||||
});
|
||||
const outputs = Array.isArray(result) ? result : [result];
|
||||
const stylesheet = outputs
|
||||
.flatMap((output) => ("output" in output ? output.output : []))
|
||||
.find((item) => item.type === "asset" && item.fileName.endsWith(".css"));
|
||||
|
||||
expect(stylesheet).toBeDefined();
|
||||
if (!stylesheet || stylesheet.type !== "asset") {
|
||||
throw new Error("Production build did not emit a stylesheet");
|
||||
}
|
||||
const css = String(stylesheet.source);
|
||||
expect(css).toMatch(/url\(\.\/jetbrains-mono/);
|
||||
expect(css).not.toMatch(/url\(\/assets\/jetbrains-mono/);
|
||||
}, 15_000);
|
||||
});
|
||||
Vendored
+3
-29
@@ -36,9 +36,6 @@ declare module 'vue' {
|
||||
'Cil:columns': typeof import('~icons/cil/columns')['default']
|
||||
'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
|
||||
CloudDestinationForm: typeof import('./components/Notification/CloudDestinationForm.vue')['default']
|
||||
CloudPopover: typeof import('./components/CloudPopover.vue')['default']
|
||||
CloudSearchInline: typeof import('./components/CloudSearchInline.vue')['default']
|
||||
CloudSettingsCard: typeof import('./components/CloudSettingsCard.vue')['default']
|
||||
ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
|
||||
ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default']
|
||||
ContainerDropdown: typeof import('./components/ContainerDropdown.vue')['default']
|
||||
@@ -63,18 +60,13 @@ declare module 'vue' {
|
||||
GroupMenu: typeof import('./components/GroupMenu.vue')['default']
|
||||
HistoricalContainerLog: typeof import('./components/ContainerViewer/HistoricalContainerLog.vue')['default']
|
||||
HostCard: typeof import('./components/HostCard.vue')['default']
|
||||
HostGroupLog: typeof import('./components/HostViewer/HostGroupLog.vue')['default']
|
||||
HostIcon: typeof import('./components/common/HostIcon.vue')['default']
|
||||
HostList: typeof import('./components/HostList.vue')['default']
|
||||
HostLog: typeof import('./components/HostViewer/HostLog.vue')['default']
|
||||
HostMenu: typeof import('./components/HostMenu.vue')['default']
|
||||
'Ic:sharpKeyboardReturn': typeof import('~icons/ic/sharp-keyboard-return')['default']
|
||||
IndeterminateBar: typeof import('./components/common/IndeterminateBar.vue')['default']
|
||||
IOCard: typeof import('./components/LogViewer/IOCard.vue')['default']
|
||||
'Ion:ellipsisVertical': typeof import('~icons/ion/ellipsis-vertical')['default']
|
||||
JsonFormatted: typeof import('./components/common/JsonFormatted.vue')['default']
|
||||
JsonText: typeof import('./components/common/JsonText.vue')['default']
|
||||
JsonValue: typeof import('./components/common/JsonValue.vue')['default']
|
||||
K8sMenu: typeof import('./components/K8sMenu.vue')['default']
|
||||
KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default']
|
||||
LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']
|
||||
@@ -98,15 +90,11 @@ declare module 'vue' {
|
||||
'MaterialSymbols:person': typeof import('~icons/material-symbols/person')['default']
|
||||
'MaterialSymbols:terminal': typeof import('~icons/material-symbols/terminal')['default']
|
||||
'MaterialSymbolsLight:collapseAll': typeof import('~icons/material-symbols-light/collapse-all')['default']
|
||||
'MaterialSymbolsLight:expandAll': typeof import('~icons/material-symbols-light/expand-all')['default']
|
||||
'Mdi:account': typeof import('~icons/mdi/account')['default']
|
||||
'Mdi:alert': typeof import('~icons/mdi/alert')['default']
|
||||
'Mdi:alertCircle': typeof import('~icons/mdi/alert-circle')['default']
|
||||
'Mdi:alertCircleOutline': typeof import('~icons/mdi/alert-circle-outline')['default']
|
||||
'Mdi:alertOutline': typeof import('~icons/mdi/alert-outline')['default']
|
||||
'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
|
||||
'Mdi:arrowCollapse': typeof import('~icons/mdi/arrow-collapse')['default']
|
||||
'Mdi:arrowExpand': typeof import('~icons/mdi/arrow-expand')['default']
|
||||
'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
|
||||
'Mdi:beer': typeof import('~icons/mdi/beer')['default']
|
||||
'Mdi:bell': typeof import('~icons/mdi/bell')['default']
|
||||
@@ -121,31 +109,22 @@ declare module 'vue' {
|
||||
'Mdi:chevronRight': typeof import('~icons/mdi/chevron-right')['default']
|
||||
'Mdi:close': typeof import('~icons/mdi/close')['default']
|
||||
'Mdi:cloud': typeof import('~icons/mdi/cloud')['default']
|
||||
'Mdi:cloudCheckOutline': typeof import('~icons/mdi/cloud-check-outline')['default']
|
||||
'Mdi:cloudOffOutline': typeof import('~icons/mdi/cloud-off-outline')['default']
|
||||
'Mdi:cloudOutline': typeof import('~icons/mdi/cloud-outline')['default']
|
||||
'Mdi:cloudSearchOutline': typeof import('~icons/mdi/cloud-search-outline')['default']
|
||||
'Mdi:cog': typeof import('~icons/mdi/cog')['default']
|
||||
'Mdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
|
||||
'Mdi:docker': typeof import('~icons/mdi/docker')['default']
|
||||
'Mdi:filterOffOutline': typeof import('~icons/mdi/filter-off-outline')['default']
|
||||
'Mdi:filterOutline': typeof import('~icons/mdi/filter-outline')['default']
|
||||
'Mdi:flash': typeof import('~icons/mdi/flash')['default']
|
||||
'Mdi:gauge': typeof import('~icons/mdi/gauge')['default']
|
||||
'Mdi:github': typeof import('~icons/mdi/github')['default']
|
||||
'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
|
||||
'Mdi:heart': typeof import('~icons/mdi/heart')['default']
|
||||
'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default']
|
||||
'Mdi:key': typeof import('~icons/mdi/key')['default']
|
||||
'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
|
||||
'Mdi:lightningBolt': typeof import('~icons/mdi/lightning-bolt')['default']
|
||||
'Mdi:linkVariant': typeof import('~icons/mdi/link-variant')['default']
|
||||
'Mdi:linkVariantOff': typeof import('~icons/mdi/link-variant-off')['default']
|
||||
'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
|
||||
'Mdi:pencilOutline': typeof import('~icons/mdi/pencil-outline')['default']
|
||||
'Mdi:plus': typeof import('~icons/mdi/plus')['default']
|
||||
'Mdi:poll': typeof import('~icons/mdi/poll')['default']
|
||||
'Mdi:refresh': typeof import('~icons/mdi/refresh')['default']
|
||||
'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']
|
||||
'Mdi:textBoxOutline': typeof import('~icons/mdi/text-box-outline')['default']
|
||||
'Mdi:trashCanOutline': typeof import('~icons/mdi/trash-can-outline')['default']
|
||||
@@ -164,18 +143,17 @@ declare module 'vue' {
|
||||
PageWithLinks: typeof import('./components/PageWithLinks.vue')['default']
|
||||
'Ph:arrowsMerge': typeof import('~icons/ph/arrows-merge')['default']
|
||||
'Ph:boundingBoxFill': typeof import('~icons/ph/bounding-box-fill')['default']
|
||||
'Ph:caretRight': typeof import('~icons/ph/caret-right')['default']
|
||||
'Ph:circlesFour': typeof import('~icons/ph/circles-four')['default']
|
||||
'Ph:command': typeof import('~icons/ph/command')['default']
|
||||
'Ph:computerTower': typeof import('~icons/ph/computer-tower')['default']
|
||||
'Ph:controlBold': typeof import('~icons/ph/control-bold')['default']
|
||||
'Ph:database': typeof import('~icons/ph/database')['default']
|
||||
'Ph:dotsThreeVerticalBold': typeof import('~icons/ph/dots-three-vertical-bold')['default']
|
||||
'Ph:downloadSimple': typeof import('~icons/ph/download-simple')['default']
|
||||
'Ph:fileSql': typeof import('~icons/ph/file-sql')['default']
|
||||
'Ph:globeSimple': typeof import('~icons/ph/globe-simple')['default']
|
||||
'Ph:stack': typeof import('~icons/ph/stack')['default']
|
||||
'Ph:stackSimple': typeof import('~icons/ph/stack-simple')['default']
|
||||
PhArrowDown: typeof import('~icons/ph/arrow-down')['default']
|
||||
PhArrowUp: typeof import('~icons/ph/arrow-up')['default']
|
||||
Popup: typeof import('./components/Popup.vue')['default']
|
||||
RandomColorTag: typeof import('./components/LogViewer/RandomColorTag.vue')['default']
|
||||
RelativeTime: typeof import('./components/common/RelativeTime.vue')['default']
|
||||
@@ -185,18 +163,16 @@ declare module 'vue' {
|
||||
ScrollableView: typeof import('./components/ScrollableView.vue')['default']
|
||||
ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
|
||||
Search: typeof import('./components/Search.vue')['default']
|
||||
SearchStatus: typeof import('./components/LogViewer/SearchStatus.vue')['default']
|
||||
ServiceLog: typeof import('./components/ServiceViewer/ServiceLog.vue')['default']
|
||||
SideDrawer: typeof import('./components/common/SideDrawer.vue')['default']
|
||||
SideMenu: typeof import('./components/SideMenu.vue')['default']
|
||||
SidePanel: typeof import('./components/SidePanel.vue')['default']
|
||||
'SimpleIcons:podman': typeof import('~icons/simple-icons/podman')['default']
|
||||
SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
|
||||
SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
|
||||
SlideTransition: typeof import('./components/common/SlideTransition.vue')['default']
|
||||
SQLTable: typeof import('./components/LogViewer/SQLTable.vue')['default']
|
||||
StackLog: typeof import('./components/StackViewer/StackLog.vue')['default']
|
||||
StatCard: typeof import('./components/LogViewer/StatCard.vue')['default']
|
||||
StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
|
||||
'SvgSpinners:ringResize': typeof import('~icons/svg-spinners/ring-resize')['default']
|
||||
SwarmMenu: typeof import('./components/SwarmMenu.vue')['default']
|
||||
Tag: typeof import('./components/common/Tag.vue')['default']
|
||||
@@ -205,9 +181,7 @@ declare module 'vue' {
|
||||
ToastModal: typeof import('./components/common/ToastModal.vue')['default']
|
||||
Toggle: typeof import('./components/common/Toggle.vue')['default']
|
||||
ViewerWithSource: typeof import('./components/LogViewer/ViewerWithSource.vue')['default']
|
||||
VolumeWarning: typeof import('./components/ContainerViewer/VolumeWarning.vue')['default']
|
||||
WebhookDestinationForm: typeof import('./components/Notification/WebhookDestinationForm.vue')['default']
|
||||
WelcomeModal: typeof import('./components/WelcomeModal.vue')['default']
|
||||
ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { flushPromises, mount } from "@vue/test-utils";
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import { nextTick } from "vue";
|
||||
import BarChart, { type BarDataPoint } from "./BarChart.vue";
|
||||
|
||||
// useElementSize relies on ResizeObserver which jsdom lacks, so the width stays
|
||||
// 0 and the chart never renders. Mock it with a controllable width ref that we
|
||||
// flip to a real value after mount to mimic the ResizeObserver firing.
|
||||
const holder = vi.hoisted(() => ({ width: null as ReturnType<typeof import("vue").ref<number>> | null }));
|
||||
vi.mock("@vueuse/core", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("@vueuse/core")>();
|
||||
const { ref: vueRef } = await import("vue");
|
||||
holder.width = vueRef(0);
|
||||
return { ...actual, useElementSize: () => ({ width: holder.width, height: vueRef(0) }) };
|
||||
});
|
||||
|
||||
function ramp(start = 0, n = 300): BarDataPoint[] {
|
||||
return Array.from({ length: n }, (_, i) => ({ percent: start + i, value: start + i }));
|
||||
}
|
||||
|
||||
function constant(percent: number, n = 300): BarDataPoint[] {
|
||||
return Array.from({ length: n }, () => ({ percent, value: percent }));
|
||||
}
|
||||
|
||||
function heightOf(wrapper: ReturnType<typeof mount>, index: number): number {
|
||||
const style = wrapper.findAll(".bar")[index]?.attributes("style") ?? "";
|
||||
const match = style.match(/--height:\s*([\d.]+)%/);
|
||||
return match ? parseFloat(match[1]) : 0;
|
||||
}
|
||||
|
||||
async function mountAndRender(chartData: BarDataPoint[]) {
|
||||
// Mount with an unmeasured element, then simulate ResizeObserver reporting a
|
||||
// real width -> triggers the initial recalculate, like the live component.
|
||||
holder.width!.value = 0;
|
||||
const wrapper = mount(BarChart, { props: { chartData } });
|
||||
await nextTick();
|
||||
holder.width!.value = 300;
|
||||
await nextTick();
|
||||
await flushPromises();
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
describe("<BarChart />", () => {
|
||||
test("exposed recalculate() rebuilds all bars after a wholesale data swap", async () => {
|
||||
// First container: a ramp where the oldest bars are near zero.
|
||||
const wrapper = await mountAndRender(ramp());
|
||||
expect(heightOf(wrapper, 0)).toBeLessThan(20); // oldest ramp bar is tiny
|
||||
|
||||
// A stat tick arrives: the rolling window shifts by one, marking the chart
|
||||
// initialized so further changes only patch the last bar.
|
||||
await wrapper.setProps({ chartData: ramp(1) });
|
||||
await nextTick();
|
||||
|
||||
// Switch containers: the whole series is replaced with a flat high value.
|
||||
// The chart caches bars and only patches the last one, so without help the
|
||||
// older bars stay stale.
|
||||
await wrapper.setProps({ chartData: constant(1000) });
|
||||
await nextTick();
|
||||
expect(heightOf(wrapper, 0)).toBeLessThan(20); // still stale
|
||||
|
||||
// The parent owns container switches and calls recalculate() to refresh.
|
||||
(wrapper.vm as unknown as { recalculate: () => void }).recalculate();
|
||||
await nextTick();
|
||||
expect(heightOf(wrapper, 0)).toBeGreaterThan(50); // flat series -> uniform height
|
||||
});
|
||||
|
||||
test("renders downsampled bars once width is known", async () => {
|
||||
const wrapper = await mountAndRender(constant(1000));
|
||||
expect(wrapper.findAll(".bar").length).toBeGreaterThan(0);
|
||||
expect(heightOf(wrapper, 0)).toBeGreaterThan(50);
|
||||
});
|
||||
});
|
||||
@@ -51,9 +51,7 @@ watch([availableBars, bucketSize], () => {
|
||||
changeCounter.value = 0;
|
||||
});
|
||||
|
||||
// On data changes, only update the last bar unless a new bucket boundary is crossed.
|
||||
// A wholesale replacement of the series (e.g. switching containers) is not detected
|
||||
// here; the parent owns that and must call the exposed recalculate() on switch.
|
||||
// On data changes, only update the last bar unless a new bucket boundary is crossed
|
||||
const changeCounter = ref(0);
|
||||
let initialized = false;
|
||||
watch(
|
||||
|
||||
@@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<Dropdown class="dropdown-end" @click="onOpen">
|
||||
<template #trigger>
|
||||
<div class="relative">
|
||||
<mdi:cloud
|
||||
class="size-6"
|
||||
:class="
|
||||
!cloudConfig
|
||||
? 'text-base-content/40'
|
||||
: cloudConfig.linked && !cloudStatusError
|
||||
? 'text-info'
|
||||
: cloudStatusError === 'unavailable'
|
||||
? 'text-warning'
|
||||
: 'text-error'
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="cloudConfig?.linked"
|
||||
class="absolute -top-0.5 -right-0.5 size-2 rounded-full"
|
||||
:class="
|
||||
cloudStatusError === 'auth'
|
||||
? 'bg-error'
|
||||
: cloudStatusError === 'unavailable'
|
||||
? 'bg-warning'
|
||||
: cloudStatusError
|
||||
? 'bg-error'
|
||||
: 'bg-success'
|
||||
"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="w-80 space-y-3 p-1">
|
||||
<!-- Not linked -->
|
||||
<template v-if="!cloudConfig">
|
||||
<div class="flex flex-col items-center gap-2 p-2 text-center">
|
||||
<mdi:cloud class="text-base-content/40 text-4xl" />
|
||||
<h3 class="text-base font-bold">{{ $t("cloud.title") }}</h3>
|
||||
<p class="text-base-content/60 text-sm">{{ $t("cloud.description") }}</p>
|
||||
<div class="mt-2 flex w-full gap-2">
|
||||
<a :href="`${cloudUrl}`" target="_blank" rel="noreferrer noopener" class="btn btn-sm flex-1">
|
||||
{{ $t("cloud.learn-more") }}
|
||||
</a>
|
||||
<a :href="cloudLinkUrl" class="btn btn-primary btn-sm flex-1">
|
||||
<mdi:link-variant class="text-base" />
|
||||
{{ $t("cloud.link-instance") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Linked -->
|
||||
<template v-else-if="cloudConfig.linked">
|
||||
<!-- Error state -->
|
||||
<div v-if="cloudStatusError" class="space-y-3">
|
||||
<div class="alert" :class="cloudStatusError === 'auth' ? 'alert-error' : 'alert-warning'">
|
||||
<mdi:alert-circle v-if="cloudStatusError === 'auth'" class="text-lg" />
|
||||
<mdi:cloud-off-outline v-else class="text-lg" />
|
||||
<span class="text-sm">{{
|
||||
cloudStatusError === "auth" ? $t("cloud.error") : $t("cloud.error-unavailable")
|
||||
}}</span>
|
||||
</div>
|
||||
<a v-if="cloudStatusError === 'auth'" :href="cloudLinkUrl" class="btn btn-primary btn-sm w-full">
|
||||
<mdi:link-variant class="text-base" />
|
||||
{{ $t("cloud.relink-instance") }}
|
||||
</a>
|
||||
<button v-else class="btn btn-sm w-full" @click="fetchCloudStatus">
|
||||
<mdi:refresh class="text-base" />
|
||||
{{ $t("button.retry") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-else-if="isLoadingCloudStatus" class="flex items-center justify-center gap-2 py-4">
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
</div>
|
||||
|
||||
<!-- Healthy -->
|
||||
<div v-else-if="cloudStatus" class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-bold">{{ $t("cloud.title") }}</h3>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="badge badge-success badge-sm">{{ $t("cloud.connected") }}</span>
|
||||
<span class="badge badge-primary badge-sm capitalize">{{ cloudStatus.plan.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-1 flex items-center justify-between text-sm">
|
||||
<span class="text-base-content/60">{{ $t("cloud.usage") }}</span>
|
||||
<span>
|
||||
{{ cloudStatus.usage.events_used.toLocaleString() }} /
|
||||
{{ cloudStatus.usage.events_limit.toLocaleString() }}
|
||||
</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress w-full"
|
||||
:class="
|
||||
usagePercent > 90 ? 'progress-error' : usagePercent > 70 ? 'progress-warning' : 'progress-primary'
|
||||
"
|
||||
:value="cloudStatus.usage.events_used"
|
||||
:max="cloudStatus.usage.events_limit"
|
||||
></progress>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<a :href="cloudUrl" target="_blank" rel="noreferrer noopener" class="btn btn-sm flex-1">
|
||||
{{ $t("cloud.dashboard") }}
|
||||
</a>
|
||||
<a :href="`${cloudUrl}/settings`" target="_blank" rel="noreferrer noopener" class="btn btn-sm flex-1">
|
||||
{{ $t("cloud.settings") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<WelcomeModal ref="welcomeModal" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const cloudUrl = __CLOUD_URL__;
|
||||
const callbackUrl = `${window.location.origin}${withBase("/")}`;
|
||||
const cloudLinkUrl = `${cloudUrl}/link?appUrl=${encodeURIComponent(callbackUrl)}&from=cloud`;
|
||||
|
||||
const { cloudConfig, cloudStatus, cloudStatusError, isLoadingCloudStatus, fetchCloudConfig, fetchCloudStatus } =
|
||||
useCloudConfig();
|
||||
|
||||
const welcomeModal = ref<{ open: () => void }>();
|
||||
const cloudWelcomeShown = useProfileStorage("cloudWelcomeShown", false);
|
||||
|
||||
const usagePercent = computed(() => {
|
||||
if (!cloudStatus.value) return 0;
|
||||
return (cloudStatus.value.usage.events_used / cloudStatus.value.usage.events_limit) * 100;
|
||||
});
|
||||
|
||||
function onOpen() {
|
||||
if (cloudConfig.value?.linked && !cloudStatus.value && !isLoadingCloudStatus.value) {
|
||||
fetchCloudStatus();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchCloudConfig();
|
||||
|
||||
if (cloudConfig.value?.linked) {
|
||||
fetchCloudStatus();
|
||||
}
|
||||
|
||||
// Handle successful OAuth return — show welcome modal
|
||||
if (window.location.hash === "#cloudLinked" && !cloudWelcomeShown.value) {
|
||||
cloudWelcomeShown.value = true;
|
||||
nextTick(() => welcomeModal.value?.open());
|
||||
history.replaceState(history.state, "", window.location.pathname + window.location.search);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="search"
|
||||
class="bg-base-200 border-base-content/15 hover:border-primary/50 hover:bg-base-200/80 flex h-9 w-full items-center gap-2 rounded-md border px-3 text-left transition-colors"
|
||||
@click="openSearch"
|
||||
>
|
||||
<mdi:magnify class="size-4 shrink-0" :class="cloudReady ? 'text-primary' : 'text-base-content/60'" />
|
||||
<!-- Show the active query when we're on the cloud search page so the
|
||||
topbar reflects what the user is looking at. -->
|
||||
<span v-if="activeQuery" class="text-base-content truncate font-mono text-sm">{{ activeQuery }}</span>
|
||||
<span v-else class="text-base-content/60 truncate text-sm">
|
||||
<template v-if="cloudReady">{{ $t("cloud-search.hero-title-cloud") }}</template>
|
||||
<template v-else>{{ $t("cloud-search.hero-title-plain") }}</template>
|
||||
</span>
|
||||
<span class="ml-auto flex items-center gap-1">
|
||||
<kbd class="kbd kbd-xs">⌘</kbd>
|
||||
<kbd class="kbd kbd-xs">K</kbd>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useFuzzySearch } from "@/composable/fuzzySearch";
|
||||
import { useCloudConfig } from "@/composable/cloudConfig";
|
||||
|
||||
const { openSearch } = useFuzzySearch();
|
||||
const { cloudConfig } = useCloudConfig();
|
||||
const cloudReady = computed(() => !!cloudConfig.value?.linked && !!cloudConfig.value?.streamLogs);
|
||||
|
||||
const route = useRoute();
|
||||
const activeQuery = computed(() =>
|
||||
route?.path === "/cloud/search" && typeof route.query?.q === "string" ? route.query.q : "",
|
||||
);
|
||||
</script>
|
||||
@@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<div class="border-base-content/15 bg-base-200/40 divide-base-content/10 divide-y rounded-lg border">
|
||||
<!-- Not linked -->
|
||||
<template v-if="!cloudConfig">
|
||||
<div class="flex items-start gap-4 p-4">
|
||||
<mdi:cloud class="text-base-content/40 mt-0.5 text-4xl" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-base-content/70 text-sm">{{ $t("cloud.description") }}</p>
|
||||
<div class="mt-3 flex gap-2">
|
||||
<a :href="`${cloudUrl}`" target="_blank" rel="noreferrer noopener" class="btn btn-sm">
|
||||
{{ $t("cloud.learn-more") }}
|
||||
</a>
|
||||
<a :href="cloudLinkUrl" class="btn btn-primary btn-sm">
|
||||
<mdi:link-variant class="text-base" />
|
||||
{{ $t("cloud.link-instance") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Linked -->
|
||||
<template v-else-if="cloudConfig.linked">
|
||||
<!-- Error state -->
|
||||
<div v-if="cloudStatusError" class="space-y-3 p-4">
|
||||
<div class="alert" :class="cloudStatusError === 'auth' ? 'alert-error' : 'alert-warning'">
|
||||
<mdi:alert-circle v-if="cloudStatusError === 'auth'" class="text-lg" />
|
||||
<mdi:cloud-off-outline v-else class="text-lg" />
|
||||
<span class="text-sm">{{
|
||||
cloudStatusError === "auth" ? $t("cloud.error") : $t("cloud.error-unavailable")
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a v-if="cloudStatusError === 'auth'" :href="cloudLinkUrl" class="btn btn-primary btn-sm">
|
||||
<mdi:link-variant class="text-base" />
|
||||
{{ $t("cloud.relink-instance") }}
|
||||
</a>
|
||||
<button v-else class="btn btn-sm" @click="fetchCloudStatus">
|
||||
<mdi:refresh class="text-base" />
|
||||
{{ $t("button.retry") }}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-error" @click="confirmUnlink">
|
||||
<mdi:link-variant-off class="text-base" />
|
||||
{{ $t("cloud.unlink") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-else-if="isLoadingCloudStatus" class="flex items-center gap-2 p-4">
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
</div>
|
||||
|
||||
<!-- Healthy -->
|
||||
<template v-else-if="cloudStatus">
|
||||
<div class="flex flex-wrap items-center gap-2 p-4">
|
||||
<span class="status-pill status-pill-success">
|
||||
<span class="size-1.5 rounded-full bg-current"></span>
|
||||
{{ $t("cloud.connected") }}
|
||||
</span>
|
||||
<span class="status-pill status-pill-primary">{{ cloudStatus.plan.name }}</span>
|
||||
<span class="text-base-content/50 text-sm">{{ cloudStatus.user.email }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 p-4">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<span class="text-base-content/60 text-sm font-medium">{{ $t("cloud.usage") }}</span>
|
||||
<span class="font-mono text-sm">
|
||||
<span class="font-semibold">{{ cloudStatus.usage.events_used.toLocaleString() }}</span>
|
||||
<span class="text-base-content/40"> / {{ cloudStatus.usage.events_limit.toLocaleString() }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress w-full"
|
||||
:class="usagePercent > 90 ? 'progress-error' : usagePercent > 70 ? 'progress-warning' : 'progress-primary'"
|
||||
:value="cloudStatus.usage.events_used"
|
||||
:max="cloudStatus.usage.events_limit"
|
||||
></progress>
|
||||
<div class="text-base-content/40 flex justify-between font-mono text-xs">
|
||||
<span v-if="cloudStatus.usage.period">{{ cloudStatus.usage.period }}</span>
|
||||
<span v-else></span>
|
||||
<span>{{ usagePercent.toFixed(2) }}% used</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex min-h-13 cursor-pointer items-center justify-between gap-4 p-4">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-sm font-medium">{{ $t("cloud.stream-logs") }}</span>
|
||||
<span class="text-base-content/60 text-xs">{{ $t("cloud.stream-logs-help") }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary toggle-sm shrink-0"
|
||||
:checked="streamLogs"
|
||||
:disabled="isSavingStreamLogs"
|
||||
@change="onStreamLogsChange(($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="flex gap-2 p-4">
|
||||
<a :href="cloudUrl" target="_blank" rel="noreferrer noopener" class="btn btn-sm">
|
||||
{{ $t("cloud.dashboard") }}
|
||||
</a>
|
||||
<button class="btn btn-sm btn-error" @click="confirmUnlink">
|
||||
{{ $t("cloud.unlink") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Unlink confirmation modal -->
|
||||
<dialog ref="unlinkModal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">{{ $t("cloud.unlink") }}</h3>
|
||||
<p class="py-4 text-sm">{{ $t("cloud.unlink-confirm") }}</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm">{{ $t("button.cancel") }}</button>
|
||||
</form>
|
||||
<button class="btn btn-error btn-sm" :disabled="isUnlinking" @click="doUnlink">
|
||||
<span v-if="isUnlinking" class="loading loading-spinner loading-xs"></span>
|
||||
{{ $t("cloud.unlink") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button></button>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const cloudUrl = __CLOUD_URL__;
|
||||
const callbackUrl = `${window.location.origin}${withBase("/")}`;
|
||||
const cloudLinkUrl = `${cloudUrl}/link?appUrl=${encodeURIComponent(callbackUrl)}&from=cloud`;
|
||||
|
||||
const {
|
||||
cloudConfig,
|
||||
cloudStatus,
|
||||
cloudStatusError,
|
||||
isLoadingCloudStatus,
|
||||
initialLoad,
|
||||
fetchCloudStatus,
|
||||
clearCloudState,
|
||||
} = useCloudConfig();
|
||||
const isUnlinking = ref(false);
|
||||
const unlinkModal = ref<HTMLDialogElement | null>(null);
|
||||
|
||||
const streamLogs = ref(true);
|
||||
const isSavingStreamLogs = ref(false);
|
||||
watchEffect(() => {
|
||||
if (cloudConfig.value) streamLogs.value = cloudConfig.value.streamLogs;
|
||||
});
|
||||
|
||||
async function onStreamLogsChange(value: boolean | undefined) {
|
||||
if (!cloudConfig.value || value === undefined) return;
|
||||
isSavingStreamLogs.value = true;
|
||||
try {
|
||||
const res = await fetch(withBase("/api/cloud/config"), {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ streamLogs: value }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
streamLogs.value = !value;
|
||||
return;
|
||||
}
|
||||
cloudConfig.value.streamLogs = value;
|
||||
} catch {
|
||||
streamLogs.value = !value;
|
||||
} finally {
|
||||
isSavingStreamLogs.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const usagePercent = computed(() => {
|
||||
if (!cloudStatus.value) return 0;
|
||||
return (cloudStatus.value.usage.events_used / cloudStatus.value.usage.events_limit) * 100;
|
||||
});
|
||||
|
||||
function confirmUnlink() {
|
||||
unlinkModal.value?.showModal();
|
||||
}
|
||||
|
||||
async function doUnlink() {
|
||||
isUnlinking.value = true;
|
||||
try {
|
||||
const res = await fetch(withBase("/api/cloud/config"), { method: "DELETE" });
|
||||
if (!res.ok) {
|
||||
cloudStatusError.value = "unavailable";
|
||||
return;
|
||||
}
|
||||
clearCloudState();
|
||||
unlinkModal.value?.close();
|
||||
} finally {
|
||||
isUnlinking.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initialLoad;
|
||||
if (cloudConfig.value?.linked) {
|
||||
fetchCloudStatus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -5,12 +5,11 @@
|
||||
<li v-for="other in containers">
|
||||
<router-link :to="{ name: '/container/[id]', params: { id: other.id } }" class="text-nowrap">
|
||||
<div
|
||||
class="status data-[state=exited]:status-error data-[state=running]:status-success data-[state=paused]:status-warning"
|
||||
class="status data-[state=exited]:status-error data-[state=running]:status-success"
|
||||
:data-state="other.state"
|
||||
></div>
|
||||
{{ other.name }}
|
||||
<div v-if="other.state === 'running'">running</div>
|
||||
<div v-else-if="other.state === 'paused'">paused</div>
|
||||
<RelativeTime :date="other.finishedAt" class="text-base-content/70 text-xs" v-else />
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import ContainerStatCell from "./ContainerStatCell.vue";
|
||||
import { Container, emptyStat, type Stat } from "@/models/Container";
|
||||
import type { Host } from "@/stores/hosts";
|
||||
|
||||
vi.mock("@/stores/config", () => ({
|
||||
__esModule: true,
|
||||
default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
|
||||
withBase: (path: string) => path,
|
||||
}));
|
||||
|
||||
function makeStat(partial: Partial<Stat> = {}): Stat {
|
||||
return { ...emptyStat(), ...partial };
|
||||
}
|
||||
|
||||
function makeContainer(lastStat: Partial<Stat>, cpuLimit = 0): Container {
|
||||
return new Container(
|
||||
"id-1",
|
||||
new Date(),
|
||||
new Date(),
|
||||
new Date(),
|
||||
"image",
|
||||
"name",
|
||||
"command",
|
||||
"localhost",
|
||||
{},
|
||||
"running",
|
||||
cpuLimit,
|
||||
0,
|
||||
[makeStat(lastStat)],
|
||||
);
|
||||
}
|
||||
|
||||
function host(nCPU?: number): Host {
|
||||
return { id: "localhost", name: "localhost", nCPU } as unknown as Host;
|
||||
}
|
||||
|
||||
function mountCell(props: { container: Container; type: "cpu" | "mem"; host: Host; mode?: "chart" | "progress" }) {
|
||||
return mount(ContainerStatCell, {
|
||||
props: { mode: "progress", ...props },
|
||||
global: { stubs: { BarChart: true } },
|
||||
});
|
||||
}
|
||||
|
||||
describe("<ContainerStatCell /> cpu", () => {
|
||||
test("normalizes by cpuLimit when set", () => {
|
||||
const wrapper = mountCell({ container: makeContainer({ cpu: 100 }, 2), type: "cpu", host: host(8) });
|
||||
expect(wrapper.find(".tabular-nums").text()).toBe("50%");
|
||||
expect(wrapper.find("progress").attributes("value")).toBe("50");
|
||||
expect(wrapper.find("progress").classes()).toContain("progress-success");
|
||||
});
|
||||
|
||||
test("falls back to host nCPU when no cpuLimit", () => {
|
||||
const wrapper = mountCell({ container: makeContainer({ cpu: 360 }, 0), type: "cpu", host: host(4) });
|
||||
expect(wrapper.find(".tabular-nums").text()).toBe("90%");
|
||||
expect(wrapper.find("progress").classes()).toContain("progress-warning");
|
||||
});
|
||||
|
||||
test("falls back to a single core and clamps at 100%", () => {
|
||||
const wrapper = mountCell({ container: makeContainer({ cpu: 200 }, 0), type: "cpu", host: host(undefined) });
|
||||
expect(wrapper.find(".tabular-nums").text()).toBe("100%");
|
||||
expect(wrapper.find("progress").classes()).toContain("progress-error");
|
||||
});
|
||||
});
|
||||
|
||||
describe("<ContainerStatCell /> memory", () => {
|
||||
test("shows absolute usage and percentage-based color", () => {
|
||||
const wrapper = mountCell({
|
||||
container: makeContainer({ memory: 40, memoryUsage: 1500 }),
|
||||
type: "mem",
|
||||
host: host(4),
|
||||
});
|
||||
expect(wrapper.find(".tabular-nums").text()).toBe("1.46 KB");
|
||||
expect(wrapper.find("progress").attributes("value")).toBe("40");
|
||||
expect(wrapper.find("progress").classes()).toContain("progress-success");
|
||||
});
|
||||
});
|
||||
|
||||
describe("<ContainerStatCell /> color thresholds", () => {
|
||||
test.each([
|
||||
[50, "bg-success"],
|
||||
[70, "bg-secondary"],
|
||||
[90, "bg-warning"],
|
||||
[95, "bg-error"],
|
||||
])("memory %i%% -> %s", (memory, expected) => {
|
||||
const wrapper = mountCell({ container: makeContainer({ memory }), type: "mem", host: host(4) });
|
||||
expect((wrapper.vm as unknown as { barClass: string }).barClass).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe("<ContainerStatCell /> chart data", () => {
|
||||
test("cpu series is normalized by cores", () => {
|
||||
const wrapper = mountCell({ container: makeContainer({ cpu: 100 }, 4), type: "cpu", host: host(8) });
|
||||
const chartData = (wrapper.vm as unknown as { chartData: { percent: number; value: number }[] }).chartData;
|
||||
expect(chartData).toHaveLength(300);
|
||||
expect(chartData.at(-1)).toEqual({ percent: 25, value: 100 });
|
||||
});
|
||||
|
||||
test("memory series uses percent and absolute usage", () => {
|
||||
const wrapper = mountCell({
|
||||
container: makeContainer({ memory: 30, memoryUsage: 2048 }),
|
||||
type: "mem",
|
||||
host: host(4),
|
||||
});
|
||||
const chartData = (wrapper.vm as unknown as { chartData: { percent: number; value: number }[] }).chartData;
|
||||
expect(chartData.at(-1)).toEqual({ percent: 30, value: 2048 });
|
||||
});
|
||||
});
|
||||
@@ -1,13 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isMobile"
|
||||
class="flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium tabular-nums"
|
||||
:class="type === 'cpu' ? 'bg-primary/10 text-primary' : 'bg-secondary/10 text-secondary'"
|
||||
>
|
||||
<component :is="type === 'cpu' ? PhCpu : PhMemory" class="size-3.5 shrink-0" />
|
||||
<span>{{ displayValue }}</span>
|
||||
</div>
|
||||
<div v-else class="flex flex-row items-center gap-2">
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<template v-if="mode === 'chart'">
|
||||
<BarChart class="h-4 flex-1" :chart-data="chartData" :bar-class="barClass" />
|
||||
</template>
|
||||
@@ -21,8 +13,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { Container } from "@/models/Container";
|
||||
import type { Host } from "@/stores/hosts";
|
||||
import PhCpu from "~icons/ph/cpu";
|
||||
import PhMemory from "~icons/ph/memory";
|
||||
|
||||
const {
|
||||
container,
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
v-show="isVisible(key)"
|
||||
>
|
||||
<a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
|
||||
<span>{{ $t(isMobile && value.mobileLabel ? value.mobileLabel : value.label) }}</span>
|
||||
<span>{{ $t(value.label) }}</span>
|
||||
<span class="h-4" data-icon>
|
||||
<mdi:arrow-up />
|
||||
</span>
|
||||
@@ -87,16 +87,13 @@
|
||||
<tr
|
||||
v-for="container in paginated"
|
||||
:key="container.id"
|
||||
v-memo="[container.id, statMode, isMobile]"
|
||||
v-memo="[container.id, statMode]"
|
||||
class="hover:bg-base-100/80!"
|
||||
>
|
||||
<td v-if="isVisible('name')" class="max-w-80 truncate max-md:max-w-32">
|
||||
<td v-if="isVisible('name')" class="max-w-80 truncate">
|
||||
<router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
|
||||
{{ container.name }}
|
||||
</router-link>
|
||||
<div v-if="container.customGroup" class="text-base-content/50 truncate text-xs">
|
||||
{{ container.customGroup }}
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="isVisible('host')">{{ container.hostLabel }}</td>
|
||||
<td v-if="isVisible('state')">{{ container.state }}</td>
|
||||
@@ -145,7 +142,6 @@ const fields: Record<
|
||||
string,
|
||||
{
|
||||
label: string;
|
||||
mobileLabel?: string;
|
||||
sortFunc: (a: Container, b: Container) => number;
|
||||
mobileVisible: boolean;
|
||||
customClass?: string;
|
||||
@@ -153,9 +149,7 @@ const fields: Record<
|
||||
> = {
|
||||
name: {
|
||||
label: "label.container-name",
|
||||
mobileLabel: "label.name",
|
||||
sortFunc: (a: Container, b: Container) =>
|
||||
(a.name.localeCompare(b.name) || (a.customGroup ?? "").localeCompare(b.customGroup ?? "")) * direction.value,
|
||||
sortFunc: (a: Container, b: Container) => a.name.localeCompare(b.name) * direction.value,
|
||||
mobileVisible: true,
|
||||
},
|
||||
host: {
|
||||
@@ -173,23 +167,21 @@ const fields: Record<
|
||||
created: {
|
||||
label: "label.created",
|
||||
sortFunc: (a: Container, b: Container) => (a.created.getTime() - b.created.getTime()) * direction.value,
|
||||
mobileVisible: false,
|
||||
mobileVisible: true,
|
||||
customClass: "w-1",
|
||||
},
|
||||
cpu: {
|
||||
label: "label.avg-cpu",
|
||||
mobileLabel: "label.cpu",
|
||||
sortFunc: (a: Container, b: Container) => (a.movingAverage.cpu - b.movingAverage.cpu) * direction.value,
|
||||
mobileVisible: true,
|
||||
customClass: "min-w-48 max-md:min-w-0",
|
||||
mobileVisible: false,
|
||||
customClass: "min-w-48",
|
||||
},
|
||||
mem: {
|
||||
label: "label.avg-mem",
|
||||
mobileLabel: "label.mem",
|
||||
sortFunc: (a: Container, b: Container) =>
|
||||
(a.movingAverage.memoryUsage - b.movingAverage.memoryUsage) * direction.value,
|
||||
mobileVisible: true,
|
||||
customClass: "min-w-48 max-md:min-w-0",
|
||||
mobileVisible: false,
|
||||
customClass: "min-w-48",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<li v-if="!historical">
|
||||
<a @click="clear()">
|
||||
<octicon:trash-24 /> {{ $t("toolbar.clear") }}
|
||||
<KeyShortcut char="l" :modifiers="['shift', 'meta']" />
|
||||
<KeyShortcut char="k" :modifiers="['shift', 'meta']" />
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="hasComplexLogs">
|
||||
@@ -156,7 +156,12 @@
|
||||
</li>
|
||||
<li>
|
||||
<button @click="update()" :disabled="actionStates.update">
|
||||
<carbon:upgrade />
|
||||
<carbon:upgrade
|
||||
:class="{
|
||||
'animate-spin': actionStates.update,
|
||||
'text-secondary': actionStates.update,
|
||||
}"
|
||||
/>
|
||||
{{ container.isSwarm ? $t("toolbar.update-service") : $t("toolbar.update") }}
|
||||
</button>
|
||||
</li>
|
||||
@@ -199,7 +204,7 @@ const clear = defineEmit();
|
||||
const { actionStates, start, stop, restart, update } = useContainerActions(toRef(() => container));
|
||||
|
||||
const router = useRouter();
|
||||
const { copy, copied, isSupported } = useClipboard({ legacy: true });
|
||||
const { copy, copied, isSupported } = useClipboard();
|
||||
const { t } = useI18n();
|
||||
const { showToast, removeToast } = useToast();
|
||||
|
||||
@@ -299,7 +304,7 @@ async function copyLogs() {
|
||||
await navigator.clipboard.write([new ClipboardItem({ "text/plain": blobPromise })]);
|
||||
}
|
||||
|
||||
onKeyStroke(["f", "F"], (e) => {
|
||||
onKeyStroke("f", (e) => {
|
||||
if (hasComplexLogs.value) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
|
||||
showDrawer(LogAnalytics, { container }, "lg");
|
||||
@@ -308,14 +313,14 @@ onKeyStroke(["f", "F"], (e) => {
|
||||
}
|
||||
});
|
||||
if (enableShell) {
|
||||
onKeyStroke(["a", "A"], (e) => {
|
||||
onKeyStroke("a", (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
|
||||
showDrawer(Terminal, { container, action: "attach" }, "lg");
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
onKeyStroke(["e", "E"], (e) => {
|
||||
onKeyStroke("e", (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
|
||||
showDrawer(Terminal, { container, action: "exec" }, "lg");
|
||||
e.preventDefault();
|
||||
@@ -366,25 +371,10 @@ a {
|
||||
@apply whitespace-nowrap;
|
||||
}
|
||||
|
||||
/* daisyUI's .menu is width: fit-content, so nested submenus (Streams, Levels)
|
||||
* shrink to their content and the hover highlight stops short. Stretch them to
|
||||
* fill the dropdown so the row highlight spans the full width. */
|
||||
.menu li ul {
|
||||
margin-inline-start: 0;
|
||||
width: 100%;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Keep the solid level colors, but use white labels in the light theme so the
|
||||
* text reads against the saturated chip backgrounds. warn is a light orange,
|
||||
* where dark text has better contrast than white, so it keeps the default. */
|
||||
[data-theme="light"] .badge[data-level="info"],
|
||||
[data-theme="light"] .badge[data-level="debug"],
|
||||
[data-theme="light"] .badge[data-level="trace"],
|
||||
[data-theme="light"] .badge[data-level="error"],
|
||||
[data-theme="light"] .badge[data-level="fatal"] {
|
||||
color: oklch(100% 0 0) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,10 +11,8 @@
|
||||
<li v-if="config.hosts.length > 1" class="font-thin max-md:hidden">
|
||||
{{ container.hostLabel }}
|
||||
</li>
|
||||
<li class="min-w-0">
|
||||
<template v-if="otherContainers.length === 0"
|
||||
><span class="block truncate">{{ container.name }}</span></template
|
||||
>
|
||||
<li>
|
||||
<template v-if="otherContainers.length === 0">{{ container.name }}</template>
|
||||
<div v-else>
|
||||
<div class="dropdown">
|
||||
<button tabindex="0" role="button" class="btn btn-xs md:btn-sm">
|
||||
@@ -27,16 +25,12 @@
|
||||
<li v-for="other in otherContainers">
|
||||
<router-link :to="{ name: '/container/[id]', params: { id: other.id } }">
|
||||
<div
|
||||
class="status data-[state=exited]:status-error data-[state=running]:status-success data-[state=paused]:status-warning"
|
||||
class="status data-[state=exited]:status-error data-[state=running]:status-success"
|
||||
:data-state="other.state"
|
||||
></div>
|
||||
<div v-if="other.isSwarm">{{ other.swarmId }}</div>
|
||||
<div v-else>{{ other.name }}</div>
|
||||
<div v-if="other.hostLabel !== container.hostLabel" class="text-base-content/50 text-xs">
|
||||
{{ other.hostLabel }}
|
||||
</div>
|
||||
<div v-if="other.state === 'running'">running</div>
|
||||
<div v-else-if="other.state === 'paused'">paused</div>
|
||||
<RelativeTime :date="other.finishedAt" class="text-base-content/70 text-xs" v-else />
|
||||
</router-link>
|
||||
</li>
|
||||
@@ -48,21 +42,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<ContainerHealth :health="container.health" v-if="container.health" />
|
||||
<VolumeWarning :container="container" />
|
||||
<Tag
|
||||
class="group hidden! cursor-pointer items-center gap-1.5 pr-1! font-mono @md:inline-flex!"
|
||||
size="small"
|
||||
role="button"
|
||||
:title="$t('toolbar.copy-image')"
|
||||
:aria-label="$t('toolbar.copy-image')"
|
||||
@click="copyImage"
|
||||
>
|
||||
<span class="truncate">{{ imageTag }}</span>
|
||||
<span
|
||||
class="bg-base-content/10 text-base-content/40 group-hover:text-base-content/70 flex size-4 shrink-0 items-center justify-center rounded-sm transition-colors"
|
||||
>
|
||||
<mdi:content-copy class="size-3" />
|
||||
</span>
|
||||
<Tag class="hidden! font-mono @xl:block!" size="small">
|
||||
{{ container.image.replace(/@sha.*/, "") }}
|
||||
</Tag>
|
||||
</div>
|
||||
</template>
|
||||
@@ -71,21 +52,6 @@
|
||||
import { Container } from "@/models/Container";
|
||||
|
||||
const { container } = defineProps<{ container: Container }>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const { copy, copied, isSupported } = useClipboard({ legacy: true });
|
||||
const { showToast } = useToast();
|
||||
|
||||
const imageTag = computed(() => container.image.replace(/@sha.*/, ""));
|
||||
|
||||
async function copyImage() {
|
||||
if (!isSupported.value) return;
|
||||
await copy(imageTag.value);
|
||||
if (copied.value) {
|
||||
showToast({ title: t("toasts.copied.title"), message: t("toasts.copied.message"), type: "info" }, { expire: 2000 });
|
||||
}
|
||||
}
|
||||
|
||||
const pinned = computed({
|
||||
get: () => pinnedContainers.value.has(container.name),
|
||||
set: (value) => {
|
||||
@@ -101,7 +67,7 @@ const { containers: allContainers } = storeToRefs(store);
|
||||
|
||||
const otherContainers = computed(() =>
|
||||
allContainers.value
|
||||
.filter((c) => c.name === container.name && c.id !== container.id && c.customGroup === container.customGroup)
|
||||
.filter((c) => c.name === container.name && c.id !== container.id)
|
||||
.sort((a, b) => +b.created - +a.created),
|
||||
);
|
||||
</script>
|
||||
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<div v-if="worst" class="dropdown dropdown-end" :class="{ 'dropdown-bottom': !openUp }">
|
||||
<button
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium tabular-nums"
|
||||
:class="badgeClass"
|
||||
:title="title"
|
||||
>
|
||||
<PhWarning class="size-3.5" />
|
||||
<span class="max-md:hidden">{{ worst.destination }}</span>
|
||||
<span>{{ formatPct(worst.pct) }}</span>
|
||||
</button>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 mt-1 w-72 border p-2 text-xs shadow-sm"
|
||||
>
|
||||
<div class="text-base-content/60 mb-1.5 px-1 text-[11px] tracking-wide uppercase">{{ t("tooltip.volumes") }}</div>
|
||||
<ul class="space-y-1.5">
|
||||
<li
|
||||
v-for="m in sortedMounts"
|
||||
:key="m.destination"
|
||||
class="flex flex-col gap-1 rounded p-1.5"
|
||||
:class="rowClass(m.pct, m.available)"
|
||||
>
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<span class="truncate font-mono text-[11.5px]" :title="m.destination">{{ m.destination }}</span>
|
||||
<span v-if="m.available" class="tabular-nums">{{ formatPct(m.pct) }}</span>
|
||||
<span v-else class="text-base-content/50">n/a</span>
|
||||
</div>
|
||||
<div v-if="m.available" class="bg-base-content/10 h-1 w-full overflow-hidden rounded">
|
||||
<div class="h-full" :class="barClass(m.pct)" :style="{ width: Math.min(100, m.pct * 100) + '%' }"></div>
|
||||
</div>
|
||||
<div class="text-base-content/60 flex justify-between tabular-nums">
|
||||
<span v-if="m.available">{{ formatBytes(m.used) }} / {{ formatBytes(m.total) }}</span>
|
||||
<span v-else>{{ t("tooltip.volume-unreachable") }}</span>
|
||||
<RelativeTime v-if="m.lastChecked" :date="m.lastChecked" class="text-[10.5px]" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Container } from "@/models/Container";
|
||||
import PhWarning from "~icons/ph/warning-fill";
|
||||
|
||||
const WARN = 0.85;
|
||||
const CRITICAL = 0.95;
|
||||
|
||||
const { container } = defineProps<{ container: Container; openUp?: boolean }>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
interface DerivedMount {
|
||||
destination: string;
|
||||
total: number;
|
||||
used: number;
|
||||
free: number;
|
||||
available: boolean;
|
||||
pct: number;
|
||||
lastChecked?: Date;
|
||||
}
|
||||
|
||||
const mounts = computed<DerivedMount[]>(() => {
|
||||
const raw = container.mountStats ?? {};
|
||||
return Object.values(raw).map((m) => ({
|
||||
destination: m.destination,
|
||||
total: m.total,
|
||||
used: m.used,
|
||||
free: m.free,
|
||||
available: m.available && m.total > 0,
|
||||
pct: m.available && m.total > 0 ? m.used / m.total : 0,
|
||||
lastChecked: m.lastChecked ? new Date(m.lastChecked) : undefined,
|
||||
}));
|
||||
});
|
||||
|
||||
const sortedMounts = computed(() => [...mounts.value].sort((a, b) => b.pct - a.pct));
|
||||
|
||||
const worst = computed(() => {
|
||||
const candidate = sortedMounts.value.find((m) => m.available && m.pct >= WARN);
|
||||
return candidate ?? null;
|
||||
});
|
||||
|
||||
const badgeClass = computed(() => {
|
||||
if (!worst.value) return "";
|
||||
if (worst.value.pct >= CRITICAL) return "bg-error/15 text-error hover:bg-error/25";
|
||||
return "bg-warning/15 text-warning hover:bg-warning/25";
|
||||
});
|
||||
|
||||
function rowClass(pct: number, available: boolean) {
|
||||
if (!available) return "bg-base-content/[0.04]";
|
||||
if (pct >= CRITICAL) return "bg-error/10";
|
||||
if (pct >= WARN) return "bg-warning/10";
|
||||
return "bg-base-content/[0.04]";
|
||||
}
|
||||
|
||||
function barClass(pct: number) {
|
||||
if (pct >= CRITICAL) return "bg-error";
|
||||
if (pct >= WARN) return "bg-warning";
|
||||
return "bg-success";
|
||||
}
|
||||
|
||||
function formatPct(pct: number) {
|
||||
return `${Math.round(pct * 100)}%`;
|
||||
}
|
||||
|
||||
const title = computed(() => {
|
||||
if (!worst.value) return "";
|
||||
return t("tooltip.volume-full", { destination: worst.value.destination, pct: formatPct(worst.value.pct) });
|
||||
});
|
||||
</script>
|
||||
@@ -4,7 +4,6 @@ import { mount } from "@vue/test-utils";
|
||||
import FuzzySearchModal from "./FuzzySearchModal.vue";
|
||||
|
||||
import { Container } from "@/models/Container";
|
||||
import { lightTheme } from "@/stores/settings";
|
||||
import { beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
@@ -17,7 +16,7 @@ vi.mock("vue-router");
|
||||
|
||||
vi.mock("@/stores/config", () => ({
|
||||
__esModule: true,
|
||||
default: { base: "", hosts: [{ name: "localhost", id: "localhost" }], enableActions: true },
|
||||
default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
|
||||
withBase: (path: string) => path,
|
||||
}));
|
||||
|
||||
@@ -110,7 +109,7 @@ describe("<FuzzySearchModal />", () => {
|
||||
await wrapper.find("input").setValue("foo");
|
||||
expect(wrapper.findAll("li").length).toBe(1);
|
||||
expect(wrapper.find("ul [data-name]").html()).toMatchInlineSnapshot(
|
||||
`"<span data-v-dc2e8c61="" class="text-base-content" data-name=""><mark>foo</mark> bar</span>"`,
|
||||
`"<span data-v-dc2e8c61="" data-name=""><mark>foo</mark> bar</span>"`,
|
||||
);
|
||||
});
|
||||
|
||||
@@ -120,28 +119,4 @@ describe("<FuzzySearchModal />", () => {
|
||||
await wrapper.find("input").trigger("keydown.enter");
|
||||
expect(useRouter().push).toHaveBeenCalledWith({ name: "/container/[id]", params: { id: "567" } });
|
||||
});
|
||||
|
||||
test("matches commands by keyword", async () => {
|
||||
const wrapper = createFuzzySearchModal();
|
||||
await wrapper.find("input").setValue("theme");
|
||||
const items = wrapper.findAll("li").map((li) => li.text());
|
||||
expect(items).toContain("command-palette.theme-dark");
|
||||
});
|
||||
|
||||
test("theme commands set the theme explicitly", async () => {
|
||||
lightTheme.value = "auto";
|
||||
const wrapper = createFuzzySearchModal();
|
||||
|
||||
await wrapper.find("input").setValue("dark theme");
|
||||
await wrapper.find("input").trigger("keydown.enter");
|
||||
expect(lightTheme.value).toBe("dark");
|
||||
|
||||
await wrapper.find("input").setValue("light theme");
|
||||
await wrapper.find("input").trigger("keydown.enter");
|
||||
expect(lightTheme.value).toBe("light");
|
||||
|
||||
await wrapper.find("input").setValue("system theme");
|
||||
await wrapper.find("input").trigger("keydown.enter");
|
||||
expect(lightTheme.value).toBe("auto");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,188 +1,70 @@
|
||||
<template>
|
||||
<!-- Single bordered card containing the input, results, and footer in one
|
||||
frame to match the design mock. No daisyUI input/dropdown chrome. -->
|
||||
<div class="bg-base-200 border-base-content/15 w-full overflow-hidden rounded-xl border shadow-2xl">
|
||||
<!-- Input row -->
|
||||
<div class="flex items-center gap-3 px-4 py-3.5">
|
||||
<mdi:magnify class="text-base-content/60 size-5 shrink-0" />
|
||||
<div class="dropdown dropdown-open w-full shadow-md">
|
||||
<div class="input input-xl input-primary flex w-full items-center">
|
||||
<mdi:magnify class="flex size-8" />
|
||||
<input
|
||||
tabindex="0"
|
||||
class="text-base-content placeholder:text-base-content/40 flex-1 bg-transparent text-base outline-none"
|
||||
class="input-ghost flex-1 px-1"
|
||||
ref="input"
|
||||
@keydown.down="selectedIndex = Math.min(selectedIndex + 1, totalCount - 1)"
|
||||
@keydown.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
|
||||
@keydown.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
|
||||
@keydown.enter.exact="onEnter"
|
||||
@keydown.shift.enter.exact.prevent="runLogSearch"
|
||||
@keydown.alt.enter.exact.prevent="onPin"
|
||||
@keydown.enter.exact="selected(data[selectedIndex].item)"
|
||||
@keydown.alt.enter="addColumn(data[selectedIndex].item)"
|
||||
v-model="query"
|
||||
:placeholder="placeholderCopy"
|
||||
:placeholder="$t('placeholder.search-containers')"
|
||||
/>
|
||||
<form method="dialog" class="flex">
|
||||
<button v-if="isMobile" class="text-base-content/50 hover:text-base-content">
|
||||
<mdi:close class="size-5" />
|
||||
<button v-if="isMobile">
|
||||
<mdi:close />
|
||||
</button>
|
||||
<button v-else>
|
||||
<kbd class="kbd kbd-xs">esc</kbd>
|
||||
<button v-else class="swap hover:swap-active outline-hidden">
|
||||
<mdi:keyboard-esc class="swap-off" />
|
||||
<mdi:close class="swap-on" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Body: results + log search CTA. Only renders when there is something
|
||||
to show — keeps the empty modal compact. -->
|
||||
<div v-if="totalCount || logSearchVisible" class="border-base-content/10 border-t">
|
||||
<!-- Scroll container spans both sections so the flat Commands + Containers
|
||||
list scrolls as one, matching the unified selection index. -->
|
||||
<div class="max-h-[50vh] overflow-y-auto overscroll-contain">
|
||||
<!-- Commands section -->
|
||||
<template v-if="commandEntries.length">
|
||||
<div class="text-base-content/40 px-4 pt-3 pb-1.5 text-xs font-semibold tracking-wider uppercase">
|
||||
{{ $t("command-palette.section-commands") }} · {{ commandEntries.length }}
|
||||
</div>
|
||||
<ul class="pb-1">
|
||||
<li v-for="(command, index) in commandEntries" :ref="(el) => setItemRef(el, index)">
|
||||
<a
|
||||
class="hover:bg-base-content/5 flex cursor-pointer items-center gap-3 px-4 py-2"
|
||||
:class="{ 'bg-base-content/10': index === selectedIndex }"
|
||||
@click.prevent="runCommand(command)"
|
||||
>
|
||||
<component :is="command.icon" class="text-base-content/60 size-4 shrink-0" />
|
||||
<span class="min-w-0 flex-1 truncate text-sm">{{ command.title }}</span>
|
||||
<ic:sharp-keyboard-return v-if="index === selectedIndex" class="text-base-content/40 size-4" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<!-- Containers section -->
|
||||
<template v-if="containerEntries.length">
|
||||
<div
|
||||
class="text-base-content/40 px-4 pt-3 pb-1.5 text-xs font-semibold tracking-wider uppercase"
|
||||
:class="{ 'border-base-content/10 mt-1 border-t': commandEntries.length }"
|
||||
>
|
||||
{{ $t("cloud-search.containers-section") }} · {{ containerEntries.length }}
|
||||
</div>
|
||||
<ul class="pb-1">
|
||||
<li
|
||||
v-for="(result, index) in containerEntries"
|
||||
:ref="(el) => setItemRef(el, commandEntries.length + index)"
|
||||
>
|
||||
<a
|
||||
class="hover:bg-base-content/5 flex cursor-pointer items-center gap-3 px-4 py-2"
|
||||
:class="{ 'bg-base-content/10': commandEntries.length + index === selectedIndex }"
|
||||
@click.prevent="selected(result.item)"
|
||||
>
|
||||
<div :class="result.item.state === 'running' ? 'text-primary' : 'text-base-content/50'">
|
||||
<template v-if="result.item.type === 'container'">
|
||||
<octicon:container-24 class="size-4" />
|
||||
</template>
|
||||
<template v-else-if="result.item.type === 'service'">
|
||||
<ph:stack-simple class="size-4" />
|
||||
</template>
|
||||
<template v-else-if="result.item.type === 'stack'">
|
||||
<ph:stack class="size-4" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 truncate text-sm">
|
||||
<template v-if="config.hosts.length > 1 && result.item.host">
|
||||
<span class="text-base-content/50 font-light">{{ result.item.host }}</span>
|
||||
<span class="text-base-content/30"> / </span>
|
||||
</template>
|
||||
<span class="text-base-content" data-name v-html="matchedName(result)"></span>
|
||||
</div>
|
||||
<RelativeTime :date="result.item.created" class="text-base-content/40 text-xs" />
|
||||
<span
|
||||
@click.stop.prevent="addColumn(result.item)"
|
||||
:title="$t('tooltip.pin-column')"
|
||||
class="text-base-content/40 hover:text-secondary"
|
||||
>
|
||||
<ic:sharp-keyboard-return v-if="commandEntries.length + index === selectedIndex" class="size-4" />
|
||||
<cil:columns v-else-if="result.item.type === 'container'" class="size-4" />
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Log search CTA -->
|
||||
<div
|
||||
v-if="logSearchVisible"
|
||||
class="border-base-content/10 border-t"
|
||||
:class="{ 'cursor-pointer': cloudSearch.available.value, 'opacity-70': !cloudSearch.available.value }"
|
||||
@click="cloudSearch.available.value && runLogSearch()"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-3 px-4 py-3"
|
||||
:class="cloudSearch.available.value ? 'bg-primary/[0.07] hover:bg-primary/10' : ''"
|
||||
>
|
||||
<mdi:cloud-search-outline
|
||||
class="size-5 shrink-0"
|
||||
:class="cloudSearch.available.value ? 'text-primary' : 'text-base-content/40'"
|
||||
/>
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<span
|
||||
class="truncate text-sm font-semibold"
|
||||
:class="cloudSearch.available.value ? 'text-primary' : 'text-base-content/60'"
|
||||
>
|
||||
<i18n-t keypath="cloud-search.search-logs-for">
|
||||
<template #query>
|
||||
<span class="font-mono">{{ query }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</span>
|
||||
<span class="text-base-content/50 mt-0.5 flex items-center gap-1 text-xs">
|
||||
<template v-if="cloudSearch.available.value">
|
||||
<mdi:flash class="text-primary size-3" />
|
||||
{{ $t("cloud-search.across-containers") }}
|
||||
</template>
|
||||
<template v-else-if="cloudConfig?.linked && !cloudConfig.streamLogs">
|
||||
<mdi:cloud-off-outline class="size-3" />
|
||||
<RouterLink to="/settings/cloud" class="link link-hover" @click.stop>
|
||||
{{ $t("cloud-search.enable-streaming-to-search") }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mdi:cloud-off-outline class="size-3" />
|
||||
<RouterLink to="/settings/cloud" class="link link-hover" @click.stop>
|
||||
{{ $t("cloud-search.connect-to-enable") }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<kbd class="kbd kbd-xs">⇧</kbd>
|
||||
<kbd class="kbd kbd-xs">↵</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer: kbd hints + cloud status. Always present while the modal is
|
||||
open so users know log search is available before they type. -->
|
||||
<div
|
||||
class="bg-base-300/40 border-base-content/10 text-base-content/50 flex items-center gap-4 border-t px-4 py-2 text-xs"
|
||||
class="dropdown-content bg-base-100 relative! mt-2 max-h-[calc(100dvh-20rem)] w-full overflow-y-scroll rounded-md border-y-8 border-transparent px-2"
|
||||
tabindex="0"
|
||||
v-if="results.length"
|
||||
>
|
||||
<span v-if="totalCount" class="flex items-center gap-1.5">
|
||||
<kbd class="kbd kbd-xs">↵</kbd> {{ $t("cloud-search.open-container") }}
|
||||
</span>
|
||||
<span v-if="cloudSearch.available.value && logSearchVisible" class="flex items-center gap-1">
|
||||
<kbd class="kbd kbd-xs">⇧</kbd><kbd class="kbd kbd-xs">↵</kbd>
|
||||
<span class="ml-0.5">{{ $t("cloud-search.search-logs-shortcut") }}</span>
|
||||
</span>
|
||||
<ul class="menu w-auto">
|
||||
<li v-for="(result, index) in data" ref="listItems">
|
||||
<a
|
||||
class="grid auto-cols-max grid-cols-[min-content_auto] gap-2 py-4"
|
||||
@click.prevent="selected(result.item)"
|
||||
:class="{ 'menu-focus': index === selectedIndex }"
|
||||
>
|
||||
<div :class="{ 'text-primary': result.item.state === 'running' }">
|
||||
<template v-if="result.item.type === 'container'">
|
||||
<octicon:container-24 />
|
||||
</template>
|
||||
<template v-else-if="result.item.type === 'service'">
|
||||
<ph:stack-simple />
|
||||
</template>
|
||||
<template v-else-if="result.item.type === 'stack'">
|
||||
<ph:stack />
|
||||
</template>
|
||||
</div>
|
||||
<div class="truncate">
|
||||
<template v-if="config.hosts.length > 1 && result.item.host">
|
||||
<span class="font-light">{{ result.item.host }}</span> /
|
||||
</template>
|
||||
<span data-name v-html="matchedName(result)"></span>
|
||||
</div>
|
||||
|
||||
<span v-if="cloudSearch.available.value" class="ml-auto flex items-center gap-1.5">
|
||||
<mdi:cloud-check-outline class="text-primary size-3.5" />
|
||||
{{ $t("cloud-search.cloud-connected") }}
|
||||
</span>
|
||||
<span v-else-if="cloudConfig?.linked" class="ml-auto flex items-center gap-1.5">
|
||||
<mdi:cloud-off-outline class="size-3.5" />
|
||||
<RouterLink to="/settings/cloud" class="link link-hover" @click.stop>
|
||||
{{ $t("cloud-search.enable-streaming-to-search") }}
|
||||
</RouterLink>
|
||||
</span>
|
||||
<span v-else class="ml-auto flex items-center gap-1.5">
|
||||
<mdi:cloud-off-outline class="size-3.5" />
|
||||
<RouterLink to="/settings/cloud" class="link link-hover" @click.stop>
|
||||
{{ $t("cloud-search.connect-to-enable") }}
|
||||
</RouterLink>
|
||||
</span>
|
||||
<RelativeTime :date="result.item.created" class="text-xs font-light" />
|
||||
<span
|
||||
@click.stop.prevent="addColumn(result.item)"
|
||||
:title="$t('tooltip.pin-column')"
|
||||
class="hover:text-secondary"
|
||||
>
|
||||
<ic:sharp-keyboard-return v-if="index === selectedIndex" />
|
||||
<cil:columns v-else-if="result.item.type === 'container'" />
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -191,30 +73,15 @@
|
||||
import { ContainerState } from "@/types/Container";
|
||||
import { useFuse } from "@vueuse/integrations/useFuse";
|
||||
import { type FuseResult } from "fuse.js";
|
||||
import { useCloudConfig } from "@/composable/cloudConfig";
|
||||
import { useCloudLogSearch } from "@/composable/cloudLogSearch";
|
||||
import { useCommands, type Command } from "@/composable/commands";
|
||||
|
||||
const close = defineEmit();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// Prefill with the current /cloud/search query so the user can refine
|
||||
// without retyping. Empty everywhere else. Null-safe for unit tests
|
||||
// that mount the component without a router context.
|
||||
const initialQuery = route?.path === "/cloud/search" && typeof route.query?.q === "string" ? route.query.q : "";
|
||||
const query = ref(initialQuery);
|
||||
const query = ref("");
|
||||
const input = ref<HTMLInputElement>();
|
||||
const listItems = ref<(Element | null)[]>([]);
|
||||
const listItems = ref<HTMLInputElement[]>();
|
||||
const selectedIndex = ref(0);
|
||||
|
||||
// Function ref into a single flat array so Commands and Containers share one
|
||||
// selection index for arrow-key navigation and scroll-into-view.
|
||||
function setItemRef(el: any, index: number) {
|
||||
listItems.value[index] = (el?.$el ?? el) as Element | null;
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
const containerStore = useContainerStore();
|
||||
const pinnedStore = usePinnedLogsStore();
|
||||
const { visibleContainers } = storeToRefs(containerStore);
|
||||
@@ -222,27 +89,12 @@ const { visibleContainers } = storeToRefs(containerStore);
|
||||
const swarmStore = useSwarmStore();
|
||||
const { stacks, services } = storeToRefs(swarmStore);
|
||||
|
||||
const { cloudConfig } = useCloudConfig();
|
||||
// Mounted only so the "Search logs for X" CTA can read `available`. We
|
||||
// don't render the hits inside the popup. The composable's debounced
|
||||
// watch short-circuits on empty query, so opening the modal alone does
|
||||
// not fire a request.
|
||||
const cloudSearch = useCloudLogSearch(query);
|
||||
|
||||
const logSearchVisible = computed(() => query.value.trim().length > 0);
|
||||
|
||||
const { t } = useI18n();
|
||||
const placeholderCopy = computed(() =>
|
||||
cloudSearch.available.value ? t("cloud-search.modal-placeholder-cloud") : t("cloud-search.modal-placeholder-plain"),
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
const dialog = input.value?.closest("dialog");
|
||||
if (dialog) {
|
||||
const animations = dialog.getAnimations();
|
||||
await Promise.all(animations.map((animation) => animation.finished));
|
||||
input.value?.focus();
|
||||
if (initialQuery) input.value?.select();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -304,20 +156,6 @@ const { results: fuseResults } = useFuse(query, list, {
|
||||
|
||||
const results = computed(() => (query.value ? fuseResults.value : []));
|
||||
|
||||
// Commands palette. Fuzzy-matched against title/keywords while typing; the
|
||||
// context commands (container actions) show up front on an empty query.
|
||||
const { commands, contextCommands } = useCommands();
|
||||
const { results: commandFuseResults } = useFuse(query, commands, {
|
||||
fuseOptions: {
|
||||
keys: ["title", "keywords"],
|
||||
useExtendedSearch: true,
|
||||
threshold: 0.3,
|
||||
},
|
||||
});
|
||||
const commandEntries = computed<Command[]>(() =>
|
||||
query.value ? commandFuseResults.value.map((r) => r.item) : contextCommands.value,
|
||||
);
|
||||
|
||||
const data = computed(() => {
|
||||
return [...results.value].sort((a: FuseResult<Item>, b: FuseResult<Item>) => {
|
||||
if (a.score === b.score) {
|
||||
@@ -334,26 +172,14 @@ const data = computed(() => {
|
||||
});
|
||||
});
|
||||
|
||||
// Container hits, mirrors the previously named `data` list for the template.
|
||||
const containerEntries = computed(() => data.value);
|
||||
const totalCount = computed(() => commandEntries.value.length + containerEntries.value.length);
|
||||
|
||||
// Reset to the top only when the user types. Live SSE container add/remove
|
||||
// changes totalCount too, and resetting on that would snap the selection back
|
||||
// to 0 while the palette is open.
|
||||
watch(query, () => {
|
||||
selectedIndex.value = 0;
|
||||
});
|
||||
|
||||
// Keep the selection in bounds when the result count shrinks underneath it.
|
||||
watch(totalCount, (count) => {
|
||||
if (selectedIndex.value > count - 1) {
|
||||
selectedIndex.value = Math.max(count - 1, 0);
|
||||
watch(query, (data) => {
|
||||
if (data.length > 0) {
|
||||
selectedIndex.value = 0;
|
||||
}
|
||||
});
|
||||
|
||||
watch(selectedIndex, () => {
|
||||
listItems.value?.[selectedIndex.value]?.scrollIntoView({ block: "nearest" });
|
||||
listItems.value?.[selectedIndex.value].scrollIntoView({ block: "end" });
|
||||
});
|
||||
|
||||
function selected(item: Item) {
|
||||
@@ -367,43 +193,6 @@ function selected(item: Item) {
|
||||
close();
|
||||
}
|
||||
|
||||
async function runCommand(command: Command) {
|
||||
close();
|
||||
await command.perform();
|
||||
}
|
||||
|
||||
function onEnter() {
|
||||
// Commands come first in the flat list, then containers. With nothing
|
||||
// selectable (cloud-only query like "OOM"), fall back to log search so the
|
||||
// user isn't stuck on a popup that does nothing.
|
||||
const commandCount = commandEntries.value.length;
|
||||
if (selectedIndex.value < commandCount) {
|
||||
runCommand(commandEntries.value[selectedIndex.value]);
|
||||
} else if (containerEntries.value.length > 0) {
|
||||
selected(containerEntries.value[selectedIndex.value - commandCount].item);
|
||||
} else if (cloudSearch.available.value && logSearchVisible.value) {
|
||||
runLogSearch();
|
||||
}
|
||||
}
|
||||
|
||||
function onPin() {
|
||||
// Alt+Enter pins a container column. Only meaningful when a container row is
|
||||
// selected, not a command.
|
||||
const commandCount = commandEntries.value.length;
|
||||
if (selectedIndex.value >= commandCount) {
|
||||
const entry = containerEntries.value[selectedIndex.value - commandCount];
|
||||
if (entry?.item.type === "container") addColumn(entry.item);
|
||||
}
|
||||
}
|
||||
|
||||
function runLogSearch() {
|
||||
if (!cloudSearch.available.value) return;
|
||||
const q = query.value.trim();
|
||||
if (!q) return;
|
||||
router.push({ path: "/cloud/search", query: { q } });
|
||||
close();
|
||||
}
|
||||
|
||||
function addColumn(container: { id: string }) {
|
||||
pinnedStore.pinContainer(container);
|
||||
close();
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div class="card bg-base-100">
|
||||
<div class="card-body flex gap-3 max-md:p-4">
|
||||
<div class="flex flex-row items-center gap-3 overflow-hidden">
|
||||
<div class="flex min-w-0 items-center gap-2 text-lg font-semibold tracking-tight md:text-xl">
|
||||
<HostIcon :type="host.type" class="text-base-content/80 flex-none" />
|
||||
<div class="truncate">{{ host.name }}</div>
|
||||
<div class="card-body flex gap-2 max-md:p-4">
|
||||
<div class="flex flex-row gap-2 overflow-hidden">
|
||||
<div class="flex items-center gap-1 truncate text-xl font-semibold">
|
||||
<HostIcon :type="host.type" class="flex-none" />
|
||||
<div class="truncate">
|
||||
{{ host.name }}
|
||||
</div>
|
||||
|
||||
<span class="badge badge-error badge-xs gap-1 p-2 font-normal" v-if="!host.available">
|
||||
<span class="badge badge-error badge-xs gap-2 p-2" v-if="!host.available">
|
||||
<carbon:warning />
|
||||
offline
|
||||
</span>
|
||||
<span
|
||||
class="badge badge-success badge-xs gap-1 p-2 font-normal"
|
||||
class="badge badge-success badge-xs gap-2 p-2"
|
||||
:class="{ 'badge-warning': config.version != host.agentVersion }"
|
||||
v-else-if="host.type == 'agent'"
|
||||
title="Dozzle Agent"
|
||||
@@ -19,19 +21,12 @@
|
||||
{{ host.agentVersion }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="text-base-content/60 ml-auto flex shrink-0 flex-row flex-wrap items-center gap-x-3 text-xs tabular-nums md:text-sm"
|
||||
>
|
||||
<li class="flex items-center gap-1.5">
|
||||
<octicon:container-24 class="size-3.5" />
|
||||
<ul class="ml-auto flex flex-row flex-wrap gap-x-2 text-sm max-md:text-xs md:gap-3">
|
||||
<li class="flex items-center gap-1">
|
||||
<octicon:container-24 class="inline-block" />
|
||||
{{ $t("label.container", hostContainers.length) }}
|
||||
</li>
|
||||
<li class="flex items-center gap-1.5" :title="runtimeLabel">
|
||||
<simple-icons:podman v-if="host.runtime === 'podman'" class="size-3.5" />
|
||||
<mdi:docker v-else class="size-3.5" />
|
||||
{{ host.dockerVersion }}
|
||||
</li>
|
||||
<li class="flex items-center gap-1"><mdi:docker class="inline-block" /> {{ host.dockerVersion }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +35,7 @@
|
||||
:icon="PhCpu"
|
||||
:value="stats.weighted.movingAverage.totalCPU"
|
||||
:chartData="cpuHistory"
|
||||
container-class="bg-primary/10"
|
||||
container-class="border-primary/40 bg-primary/20"
|
||||
text-class="text-primary"
|
||||
bar-class="bg-primary"
|
||||
:formatValue="(value) => `${value.toFixed(1)}%`"
|
||||
@@ -51,7 +46,7 @@
|
||||
:icon="PhMemory"
|
||||
:value="stats.weighted.movingAverage.totalMemUsage"
|
||||
:chartData="memHistory"
|
||||
container-class="bg-secondary/10"
|
||||
container-class="border-secondary/40 bg-secondary/20"
|
||||
text-class="text-secondary"
|
||||
bar-class="bg-secondary"
|
||||
:formatValue="(value) => formatBytes(value, { decimals: 1 })"
|
||||
@@ -65,7 +60,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { Host } from "@/stores/hosts";
|
||||
import { Container } from "@/models/Container";
|
||||
// @ts-ignore
|
||||
import PhCpu from "~icons/ph/cpu";
|
||||
// @ts-ignore
|
||||
import PhMemory from "~icons/ph/memory";
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -81,8 +78,6 @@ const hostContainers = computed(() =>
|
||||
containers.value.filter((container) => container.host === props.host.id && container.state === "running"),
|
||||
);
|
||||
|
||||
const runtimeLabel = computed(() => (props.host.runtime === "podman" ? "Podman" : "Docker"));
|
||||
|
||||
function toContainerCores(container: Container): number {
|
||||
if (container.cpuLimit && container.cpuLimit > 0) {
|
||||
return container.cpuLimit;
|
||||
|
||||
+25
-164
@@ -36,10 +36,9 @@
|
||||
<div v-else class="w-4"></div>
|
||||
{{ $t("label.show-all-containers") }}
|
||||
</a>
|
||||
<a v-if="hasCollapsible" class="text-sm capitalize" @click="collapseAll()">
|
||||
<material-symbols-light:expand-all class="w-4" v-if="allCollapsed" />
|
||||
<material-symbols-light:collapse-all class="w-4" v-else />
|
||||
{{ allCollapsed ? $t("label.expand-all") : $t("label.collapse-all") }}
|
||||
<a class="text-sm capitalize" @click="collapseAll()">
|
||||
<material-symbols-light:collapse-all class="w-4" />
|
||||
{{ $t("label.collapse-all") }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -50,71 +49,13 @@
|
||||
<SlideTransition :slide-right="!!sessionHost">
|
||||
<template #left>
|
||||
<ul class="menu p-0">
|
||||
<template v-if="!hasHostGroups">
|
||||
<li v-for="host in hosts" :key="host.id">
|
||||
<a
|
||||
@click.prevent="setHost(host.id)"
|
||||
class="auto-cols-[max-content_minmax(0,1fr)_max-content]"
|
||||
:class="{ 'text-base-content/50 pointer-events-none': !host.available }"
|
||||
>
|
||||
<HostIcon :type="host.type" />
|
||||
<span class="truncate">{{ host.name }}</span>
|
||||
<span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<template v-else v-for="[groupName, groupHosts] in groupedHostEntries" :key="groupName || '__ungrouped__'">
|
||||
<li v-if="groupName" class="host-group">
|
||||
<details :open="!collapsedHostGroups.has(groupName)" @toggle="updateCollapsedHostGroups($event, groupName)">
|
||||
<summary class="host-group-summary">
|
||||
<span class="truncate">{{ groupName }}</span>
|
||||
<router-link
|
||||
:to="{ name: '/host-group/[name]', params: { name: groupName } }"
|
||||
class="btn btn-square btn-outline btn-primary btn-xs"
|
||||
:title="$t('tooltip.merge-all')"
|
||||
@click.stop
|
||||
>
|
||||
<ph:arrows-merge />
|
||||
</router-link>
|
||||
<button
|
||||
v-if="!collapsedHostGroups.has(groupName)"
|
||||
type="button"
|
||||
class="btn btn-square btn-outline btn-primary btn-xs"
|
||||
:title="$t('label.collapse-group')"
|
||||
@click.stop.prevent="collapseHostGroup(groupName)"
|
||||
>
|
||||
<material-symbols-light:collapse-all />
|
||||
</button>
|
||||
</summary>
|
||||
<ul>
|
||||
<li v-for="host in groupHosts" :key="host.id">
|
||||
<a
|
||||
@click.prevent="setHost(host.id)"
|
||||
class="auto-cols-[max-content_minmax(0,1fr)_max-content]"
|
||||
:class="{ 'text-base-content/50 pointer-events-none': !host.available }"
|
||||
>
|
||||
<HostIcon :type="host.type" />
|
||||
<span class="truncate">{{ host.name }}</span>
|
||||
<span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<template v-else>
|
||||
<li v-for="host in groupHosts" :key="host.id">
|
||||
<a
|
||||
@click.prevent="setHost(host.id)"
|
||||
class="auto-cols-[max-content_minmax(0,1fr)_max-content]"
|
||||
:class="{ 'text-base-content/50 pointer-events-none': !host.available }"
|
||||
>
|
||||
<HostIcon :type="host.type" />
|
||||
<span class="truncate">{{ host.name }}</span>
|
||||
<span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
<li v-for="host in hosts" :key="host.id">
|
||||
<a @click.prevent="setHost(host.id)" :class="{ 'text-base-content/50 pointer-events-none': !host.available }">
|
||||
<HostIcon :type="host.type" />
|
||||
{{ host.name }}
|
||||
<span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #right>
|
||||
@@ -150,12 +91,12 @@
|
||||
active-class="menu-active"
|
||||
@click.alt.stop.prevent="pinnedStore.pinContainer(item)"
|
||||
:title="item.name"
|
||||
class="group auto-cols-[max-content_minmax(0,1fr)_max-content_max-content]"
|
||||
class="group auto-cols-[content_max_auto_max-content_max-content]"
|
||||
>
|
||||
<svg-spinners:ring-resize v-if="item.isNew" class="text-secondary w-2" />
|
||||
<div
|
||||
v-else
|
||||
class="status data-[state=exited]:status-error data-[state=running]:status-success data-[state=paused]:status-warning"
|
||||
class="status data-[state=exited]:status-error data-[state=running]:status-success"
|
||||
:data-state="item.state"
|
||||
></div>
|
||||
<div class="truncate">
|
||||
@@ -189,8 +130,11 @@ import { Container } from "@/models/Container";
|
||||
import { sessionHost } from "@/composable/storage";
|
||||
import { showAllContainers, groupContainers } from "@/stores/settings";
|
||||
|
||||
// @ts-ignore
|
||||
import Pin from "~icons/ph/map-pin-simple";
|
||||
// @ts-ignore
|
||||
import Stack from "~icons/ph/stack";
|
||||
// @ts-ignore
|
||||
import Containers from "~icons/octicon/container-24";
|
||||
|
||||
const containerStore = useContainerStore();
|
||||
@@ -202,30 +146,7 @@ const { hosts } = useHosts();
|
||||
|
||||
const setHost = (host: string | null) => (sessionHost.value = host);
|
||||
|
||||
const hasHostGroups = computed(() => Object.values(hosts.value).some((h) => h.group));
|
||||
|
||||
const groupedHostEntries = computed(() => {
|
||||
const groups: Record<string, (typeof hosts.value)[string][]> = {};
|
||||
const ungrouped: (typeof hosts.value)[string][] = [];
|
||||
|
||||
for (const host of Object.values(hosts.value)) {
|
||||
if (host.group) {
|
||||
groups[host.group] ||= [];
|
||||
groups[host.group].push(host);
|
||||
} else {
|
||||
ungrouped.push(host);
|
||||
}
|
||||
}
|
||||
|
||||
const entries = Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)) as [string, typeof ungrouped][];
|
||||
if (ungrouped.length > 0) {
|
||||
entries.push(["", ungrouped]);
|
||||
}
|
||||
return entries;
|
||||
});
|
||||
|
||||
const collapsedGroups = useProfileStorage("collapsedGroups", new Set<string>());
|
||||
const collapsedHostGroups = useProfileStorage("collapsedHostGroups", new Set<string>());
|
||||
const updateCollapsedGroups = (event: Event, label: string) => {
|
||||
const details = event.target as HTMLDetailsElement;
|
||||
if (details.open) {
|
||||
@@ -238,51 +159,10 @@ const updateCollapsedGroups = (event: Event, label: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
const updateCollapsedHostGroups = (event: Event, groupName: string) => {
|
||||
const details = event.target as HTMLDetailsElement;
|
||||
if (details.open) {
|
||||
collapsedHostGroups.value.delete(groupName);
|
||||
} else {
|
||||
collapsedHostGroups.value.add(groupName);
|
||||
}
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const collapseHostGroup = (groupName: string) => {
|
||||
collapsedHostGroups.value.add(groupName);
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const hasCollapsible = computed(
|
||||
() => menuItems.value.length > 0 || groupedHostEntries.value.some(([groupName]) => groupName),
|
||||
);
|
||||
|
||||
const allCollapsed = computed(() => {
|
||||
const containerGroups = menuItems.value;
|
||||
const hostGroups = groupedHostEntries.value.filter(([groupName]) => groupName);
|
||||
if (containerGroups.length === 0 && hostGroups.length === 0) return false;
|
||||
return (
|
||||
containerGroups.every(({ label }) => collapsedGroups.value.has(label)) &&
|
||||
hostGroups.every(([groupName]) => collapsedHostGroups.value.has(groupName))
|
||||
);
|
||||
});
|
||||
|
||||
const collapseAll = () => {
|
||||
if (allCollapsed.value) {
|
||||
menuItems.value.forEach(({ label }) => collapsedGroups.value.delete(label));
|
||||
groupedHostEntries.value.forEach(([groupName]) => {
|
||||
if (groupName) collapsedHostGroups.value.delete(groupName);
|
||||
});
|
||||
} else {
|
||||
menuItems.value.forEach(({ label }) => collapsedGroups.value.add(label));
|
||||
groupedHostEntries.value.forEach(([groupName]) => {
|
||||
if (groupName) collapsedHostGroups.value.add(groupName);
|
||||
});
|
||||
}
|
||||
menuItems.value.forEach(({ label }) => {
|
||||
collapsedGroups.value.add(label);
|
||||
});
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
@@ -352,18 +232,14 @@ const menuItems = computed(() => {
|
||||
|
||||
const route = useRoute("/container/[id]");
|
||||
|
||||
watch(
|
||||
[() => route.name, () => route.params.id],
|
||||
([name, id]) => {
|
||||
if (name === "/container/[id]") {
|
||||
const container = containerStore.findContainerById(id as string);
|
||||
if (container) {
|
||||
setHost(container.host);
|
||||
}
|
||||
watchEffect(() => {
|
||||
if (route.name === "/container/[id]") {
|
||||
const container = containerStore.findContainerById(route.params.id);
|
||||
if (container) {
|
||||
setHost(container.host);
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const toggleShowAllContainers = () => (showAllContainers.value = !showAllContainers.value);
|
||||
</script>
|
||||
@@ -372,21 +248,6 @@ const toggleShowAllContainers = () => (showAllContainers.value = !showAllContain
|
||||
@apply text-[0.95rem];
|
||||
}
|
||||
|
||||
.host-group-summary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, auto) max-content max-content max-content;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 0.5rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0.25rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
|
||||
}
|
||||
|
||||
.host-group-summary::after {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
li.exited {
|
||||
@apply opacity-75;
|
||||
}
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div v-if="groupHosts.length === 0" class="hero min-h-[50vh]">
|
||||
<div class="hero-content text-center">
|
||||
<p class="text-base-content/70 text-lg">{{ $t("error.host-group-not-found", { name }) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollableView :scrollable="scrollable" v-else>
|
||||
<template #header>
|
||||
<div class="mx-2 flex items-center gap-2 md:ml-4">
|
||||
<div class="flex flex-1 items-center gap-1.5 truncate md:gap-2">
|
||||
<ph:computer-tower />
|
||||
<div class="inline-flex font-mono text-sm">
|
||||
<div class="font-semibold">{{ name }}</div>
|
||||
</div>
|
||||
<Tag class="font-mono max-md:hidden" size="small">
|
||||
{{ $t("label.host-count", groupHosts.length) }}
|
||||
</Tag>
|
||||
<Tag class="font-mono max-md:hidden" size="small">
|
||||
{{ $t("label.container", containers.length) }}
|
||||
</Tag>
|
||||
</div>
|
||||
<MultiContainerStat class="ml-auto" :containers="containers" />
|
||||
<MultiContainerActionToolbar class="max-md:hidden" :name="name" @clear="viewer?.clear()" />
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<ViewerWithSource
|
||||
ref="viewer"
|
||||
:stream-source="useHostGroupStream"
|
||||
:entity="groupRef"
|
||||
:visible-keys="visibleKeys"
|
||||
/>
|
||||
</template>
|
||||
</ScrollableView>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
|
||||
import { useHostGroupStream } from "@/composable/eventStreams";
|
||||
import { ComponentExposed } from "vue-component-type-helpers";
|
||||
|
||||
const { name, scrollable = false } = defineProps<{
|
||||
name: string;
|
||||
scrollable?: boolean;
|
||||
}>();
|
||||
|
||||
const { hosts } = useHosts();
|
||||
const store = useContainerStore();
|
||||
const { containersByHost } = storeToRefs(store);
|
||||
|
||||
const groupHosts = computed(() => Object.values(hosts.value).filter((h) => h.group === name));
|
||||
const groupRef = computed(() => ({ name }));
|
||||
const visibleKeys = new Map<string[], boolean>();
|
||||
|
||||
const containers = computed(() =>
|
||||
groupHosts.value.flatMap((h) => containersByHost.value?.[h.id]?.filter((c) => c.state === "running") ?? []),
|
||||
);
|
||||
|
||||
const viewer = useTemplateRef<ComponentExposed<typeof ViewerWithSource>>("viewer");
|
||||
provideLoggingContext(containers, { showContainerName: true, showHostname: true });
|
||||
</script>
|
||||
@@ -78,8 +78,8 @@
|
||||
</router-link>
|
||||
</summary>
|
||||
<ul>
|
||||
<li v-for="owner in owners" :key="owner.key">
|
||||
<router-link :to="{ name: '/owner/[name]', params: { name: owner.key } }" active-class="menu-active">
|
||||
<li v-for="owner in owners" :key="`${owner.kind}-${owner.name}`">
|
||||
<router-link :to="{ name: '/owner/[name]', params: { name: owner.name } }" active-class="menu-active">
|
||||
<ph:stack-simple />
|
||||
<div class="truncate">{{ owner.kind }}/{{ owner.name }}</div>
|
||||
</router-link>
|
||||
@@ -95,8 +95,8 @@
|
||||
{{ $t("label.owners") }} ({{ ownersWithoutNamespace.length }})
|
||||
</summary>
|
||||
<ul>
|
||||
<li v-for="owner in ownersWithoutNamespace" :key="owner.key">
|
||||
<router-link :to="{ name: '/owner/[name]', params: { name: owner.key } }" active-class="menu-active">
|
||||
<li v-for="owner in ownersWithoutNamespace" :key="`${owner.kind}-${owner.name}`">
|
||||
<router-link :to="{ name: '/owner/[name]', params: { name: owner.name } }" active-class="menu-active">
|
||||
<ph:stack-simple />
|
||||
<div class="truncate">{{ owner.kind }}/{{ owner.name }}</div>
|
||||
</router-link>
|
||||
|
||||
@@ -12,8 +12,6 @@
|
||||
<mdi:bell class="size-6" />
|
||||
</router-link>
|
||||
|
||||
<CloudPopover />
|
||||
|
||||
<router-link
|
||||
:to="{ name: '/settings' }"
|
||||
:aria-label="$t('title.settings')"
|
||||
@@ -23,7 +21,7 @@
|
||||
<mdi:cog class="size-6" />
|
||||
</router-link>
|
||||
|
||||
<dropdown class="dropdown-end" data-testid="user-menu" v-if="config.user">
|
||||
<dropdown class="dropdown-end" v-if="config.user">
|
||||
<template #trigger>
|
||||
<template v-if="config.disableAvatars || !config.user.email">
|
||||
<material-symbols:person class="size-6" />
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import { ref } from "vue";
|
||||
import ComplexLogItem from "./ComplexLogItem.vue";
|
||||
import { ComplexLogEntry, type JSONObject } from "@/models/LogEntry";
|
||||
|
||||
vi.mock("@/stores/config", () => ({
|
||||
__esModule: true,
|
||||
default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
|
||||
withBase: (path: string) => path,
|
||||
}));
|
||||
|
||||
function mountItem(message: JSONObject, visibleKeys?: ReturnType<typeof ref<Map<string[], boolean>>>) {
|
||||
const entry = new ComplexLogEntry(message, "c1", 1, new Date(), "info", "stdout", "raw", visibleKeys as any);
|
||||
return mount(ComplexLogItem, {
|
||||
props: { logEntry: entry },
|
||||
global: {
|
||||
// LogItem pulls in stores/hosts; we only care about the payload rendering.
|
||||
stubs: { LogItem: { template: "<div><slot /></div>" }, LogLevel: true },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
describe("<ComplexLogItem />", () => {
|
||||
test("renders key=value pairs", () => {
|
||||
const wrapper = mountItem({ foo: "bar", n: 1 });
|
||||
expect(wrapper.findAll("li")).toHaveLength(2);
|
||||
expect(wrapper.text()).toContain("foo=");
|
||||
expect(wrapper.text()).toContain("bar");
|
||||
expect(wrapper.text()).toContain("n=");
|
||||
expect(wrapper.text()).toContain("1");
|
||||
});
|
||||
|
||||
test("renders null values as <null>", () => {
|
||||
const wrapper = mountItem({ x: null } as any);
|
||||
expect(wrapper.text()).toContain("<null>");
|
||||
});
|
||||
|
||||
test("filters out undefined values", () => {
|
||||
const wrapper = mountItem({ a: undefined as any, b: 2 });
|
||||
expect(wrapper.findAll("li")).toHaveLength(1);
|
||||
expect(wrapper.text()).toContain("b=");
|
||||
expect(wrapper.text()).not.toContain("a=");
|
||||
});
|
||||
|
||||
test("renders array values as a list", () => {
|
||||
const wrapper = mountItem({ tags: ["a", "b"] });
|
||||
expect(wrapper.find(".array").exists()).toBe(true);
|
||||
expect(wrapper.find(".array").text()).toContain("a");
|
||||
expect(wrapper.find(".array").text()).toContain("b");
|
||||
});
|
||||
|
||||
test("renders null inside an array without throwing", () => {
|
||||
const wrapper = mountItem({ tags: ["a", null, "b"] } as any);
|
||||
expect(wrapper.find(".array").text()).toContain("null");
|
||||
});
|
||||
|
||||
test("shows a placeholder when every value is hidden", () => {
|
||||
const visibleKeys = ref(new Map<string[], boolean>([[["a"], false]]));
|
||||
const wrapper = mountItem({ a: 1 }, visibleKeys);
|
||||
expect(wrapper.text()).toContain("all values are hidden");
|
||||
});
|
||||
});
|
||||
@@ -5,7 +5,7 @@
|
||||
<span class="key">{{ name }}=</span>
|
||||
<span class="value" v-if="value === null"><null></span>
|
||||
<ReuseTemplate :data="value" v-else-if="isObject(value) || Array.isArray(value)" />
|
||||
<span v-else class="value" :class="typeof value" v-html="stripAnsi(String(value))"></span>
|
||||
<span v-else class="value" :class="typeof value" v-html="stripAnsi(value.toString())"></span>
|
||||
</li>
|
||||
<li v-else-if="Array.isArray(data)">
|
||||
<ul class="array inline-flex flex-wrap space-x-1">
|
||||
@@ -15,7 +15,7 @@
|
||||
class="after:text-base-content/70 not-last:after:content-[',']"
|
||||
>
|
||||
<ReuseTemplate :data="item" v-if="isObject(item) || Array.isArray(item)" />
|
||||
<span v-else class="value" :class="typeof item" v-html="stripAnsi(String(item))"></span>
|
||||
<span v-else class="value" :class="typeof item" v-html="stripAnsi(item.toString())"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -9,7 +9,6 @@ import { computed, nextTick } from "vue";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import { default as Component } from "./EventSource.vue";
|
||||
import SearchStatus from "./SearchStatus.vue";
|
||||
import LogViewer from "@/components/LogViewer/LogViewer.vue";
|
||||
import { Container } from "@/models/Container";
|
||||
import { Level } from "@/models/LogEntry";
|
||||
@@ -173,32 +172,6 @@ describe("<ContainerEventSource />", () => {
|
||||
expect(message).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("search status", () => {
|
||||
test("shows no-logs when not searching and the stream is empty", async () => {
|
||||
const wrapper = createLogEventSource();
|
||||
sources[sourceUrl].emitOpen();
|
||||
|
||||
await vi.advanceTimersByTimeAsync(3500);
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.find('[data-testid="no-logs"]').exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("suppresses no-logs while a search is still running", async () => {
|
||||
const wrapper = createLogEventSource();
|
||||
sources[sourceUrl].emitOpen();
|
||||
sources[sourceUrl].emit("search-status", {
|
||||
data: JSON.stringify({ scannedTo: "2026-06-01T14:31:00Z", matches: 0, done: false }),
|
||||
});
|
||||
|
||||
vi.advanceTimersByTime(3000);
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.find('[data-testid="no-logs"]').exists()).toBe(false);
|
||||
expect(wrapper.findComponent(SearchStatus).exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("render html correctly", () => {
|
||||
test("should render messages", async () => {
|
||||
const wrapper = createLogEventSource();
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<template>
|
||||
<SearchStatus :status="searchStatus" class="sticky top-0 z-10" />
|
||||
<ul class="flex animate-pulse flex-col gap-4 p-4" v-if="loading || (noLogs && waitingForMoreLog && !inSearch)">
|
||||
<ul class="flex animate-pulse flex-col gap-4 p-4" v-if="loading || (noLogs && waitingForMoreLog)">
|
||||
<div class="flex flex-row gap-2" v-for="size in sizes">
|
||||
<div class="bg-base-content/50 h-3 w-40 shrink-0 rounded-full opacity-50"></div>
|
||||
<div class="bg-base-content/50 h-3 rounded-full opacity-50" :class="size"></div>
|
||||
</div>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</ul>
|
||||
<div v-else-if="noLogs && !waitingForMoreLog && !inSearch" class="p-4" data-testid="no-logs">
|
||||
<div v-else-if="noLogs && !waitingForMoreLog" class="p-4">
|
||||
{{ $t("label.no-logs") }}
|
||||
</div>
|
||||
<slot :messages="messages" v-else></slot>
|
||||
@@ -25,11 +24,7 @@ const { entity, streamSource } = $defineProps<{
|
||||
|
||||
const { historical } = useLoggingContext();
|
||||
|
||||
const { messages, opened, loading, error, searchStatus } = streamSource(toRef(() => entity));
|
||||
|
||||
// While a search is running (or just finished), SearchStatus owns the empty
|
||||
// messaging, so suppress the generic "no logs" state to avoid the false signal.
|
||||
const inSearch = computed(() => searchStatus.value.active || searchStatus.value.done);
|
||||
const { messages, opened, loading, error } = streamSource(toRef(() => entity));
|
||||
|
||||
const color = computed(() => {
|
||||
if (error.value) return "error";
|
||||
@@ -46,11 +41,10 @@ defineExpose({
|
||||
clear: () => (messages.value = []),
|
||||
});
|
||||
|
||||
if (historical.value && typeof route.query.logId === "string") {
|
||||
const targetId = route.query.logId;
|
||||
if (historical.value && route.query.logId) {
|
||||
watchOnce(messages, async () => {
|
||||
await nextTick();
|
||||
document.getElementById(targetId)?.scrollIntoView({ behavior: "instant", block: "center" });
|
||||
document.getElementById(route.query.logId as string)?.scrollIntoView({ behavior: "instant", block: "center" });
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,13 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { GroupedLogEntry, type Position } from "@/models/LogEntry";
|
||||
import AnsiConvertor from "ansi-to-html";
|
||||
|
||||
const ansiConvertor = new AnsiConvertor({
|
||||
escapeXML: false,
|
||||
fg: "var(--color-base-content)",
|
||||
bg: "var(--color-base-100)",
|
||||
});
|
||||
|
||||
const { logEntry } = defineProps<{
|
||||
logEntry: GroupedLogEntry;
|
||||
@@ -25,4 +32,6 @@ const getPosition = (index: number): Position => {
|
||||
if (index === len - 1) return "end";
|
||||
return "middle";
|
||||
};
|
||||
|
||||
const colorize = (value: string) => ansiConvertor.toHtml(value);
|
||||
</script>
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-base-content/[0.06] grid min-w-0 grid-cols-[auto_auto_3.5rem_auto_3.5rem] items-center gap-x-1.5 gap-y-1 rounded-md px-2.5 py-1.5 text-[12.5px] leading-none tabular-nums max-md:hidden @max-5xl:hidden"
|
||||
:title="tooltip"
|
||||
>
|
||||
<PhNetwork class="text-base-content/60 size-3.5" />
|
||||
<PhArrowUp class="text-primary text-[10px]" />
|
||||
<span class="text-right">{{ formatBytes(networkTx, { short: true, decimals: 1 }) }}/s</span>
|
||||
<PhArrowDown class="text-secondary text-[10px]" />
|
||||
<span class="text-right">{{ formatBytes(networkRx, { short: true, decimals: 1 }) }}/s</span>
|
||||
|
||||
<PhHardDrives class="text-base-content/60 size-3.5" />
|
||||
<PhArrowUp class="text-primary text-[10px]" />
|
||||
<span class="text-right">{{ formatBytes(diskWrite, { short: true, decimals: 1 }) }}/s</span>
|
||||
<PhArrowDown class="text-secondary text-[10px]" />
|
||||
<span class="text-right">{{ formatBytes(diskRead, { short: true, decimals: 1 }) }}/s</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import PhNetwork from "~icons/ph/network";
|
||||
import PhHardDrives from "~icons/ph/hard-drives";
|
||||
import PhArrowUp from "~icons/ph/arrow-up";
|
||||
import PhArrowDown from "~icons/ph/arrow-down";
|
||||
|
||||
const { networkRx, networkTx, diskRead, diskWrite } = defineProps<{
|
||||
networkRx: number;
|
||||
networkTx: number;
|
||||
diskRead: number;
|
||||
diskWrite: number;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const tooltip = computed(
|
||||
() =>
|
||||
t("tooltip.network-io", { tx: formatBytes(networkTx), rx: formatBytes(networkRx) }) +
|
||||
"\n" +
|
||||
t("tooltip.disk-io", { write: formatBytes(diskWrite), read: formatBytes(diskRead) }),
|
||||
);
|
||||
</script>
|
||||
@@ -7,7 +7,7 @@
|
||||
@mouseenter="checkDropdownPosition"
|
||||
>
|
||||
<router-link
|
||||
v-if="isFiltered"
|
||||
v-if="isSearching"
|
||||
@click="resetSearch()"
|
||||
tabindex="0"
|
||||
class="btn btn-square btn-xs border-base-content/20 bg-base-100 pointer-events-auto! opacity-0 shadow-sm group-hover/entry:opacity-90"
|
||||
@@ -31,7 +31,7 @@
|
||||
class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm"
|
||||
@click="hideMenu"
|
||||
>
|
||||
<li v-if="isFiltered">
|
||||
<li v-if="isSearching">
|
||||
<router-link
|
||||
@click="resetSearch()"
|
||||
:to="{
|
||||
@@ -99,13 +99,8 @@ const { showToast } = useToast();
|
||||
const showDrawer = useDrawer();
|
||||
const router = useRouter();
|
||||
const { isSearching, resetSearch } = useSearchFilter();
|
||||
const { levels } = useLoggingContext();
|
||||
|
||||
// Show "see in context" whenever the stream is narrowed, either by a text search
|
||||
// or by a log-level filter, so the entry can be inspected in the full log stream.
|
||||
const isFiltered = computed(() => isSearching.value || allLevels.some((level) => !levels.value.has(level)));
|
||||
|
||||
const { copy, isSupported, copied } = useClipboard({ legacy: true });
|
||||
const { copy, isSupported, copied } = useClipboard();
|
||||
const { t } = useI18n();
|
||||
|
||||
async function copyLogMessage() {
|
||||
|
||||
@@ -1,111 +1,37 @@
|
||||
<template>
|
||||
<aside class="flex flex-col gap-5 pb-8">
|
||||
<header class="flex items-center gap-3 pr-8">
|
||||
<ph:file-sql class="text-primary size-7 shrink-0" />
|
||||
<div class="flex min-w-0 flex-col">
|
||||
<h1 class="text-xl leading-tight font-semibold">{{ $t("analytics.title") }}</h1>
|
||||
<p class="text-base-content/60 flex items-center gap-1.5 text-sm">
|
||||
<span class="truncate">{{ container.name }}</span>
|
||||
<span class="opacity-40">·</span>
|
||||
<RelativeTime :date="container.created" />
|
||||
</p>
|
||||
</div>
|
||||
<aside>
|
||||
<header class="flex items-center gap-4">
|
||||
<h1 class="text-2xl max-md:hidden">{{ container.name }}</h1>
|
||||
<h2 class="text-sm"><RelativeTime :date="container.created" /></h2>
|
||||
</header>
|
||||
|
||||
<section class="flex flex-col gap-2">
|
||||
<textarea
|
||||
ref="queryEl"
|
||||
v-model="query"
|
||||
class="textarea textarea-primary w-full resize-y font-mono text-sm leading-relaxed"
|
||||
:class="{ 'textarea-error!': error }"
|
||||
:disabled="state !== 'ready'"
|
||||
rows="3"
|
||||
spellcheck="false"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
:aria-label="$t('analytics.title')"
|
||||
@keydown.meta.enter.prevent="run"
|
||||
@keydown.ctrl.enter.prevent="run"
|
||||
></textarea>
|
||||
|
||||
<div class="flex min-h-6 items-center text-sm">
|
||||
<div class="min-w-0 flex-1 truncate">
|
||||
<span class="text-error" v-if="error">{{ error }}</span>
|
||||
<span class="text-base-content/60 inline-flex items-center gap-2" v-else-if="state === 'initializing'">
|
||||
<span class="loading loading-spinner loading-xs"></span>{{ $t("analytics.creating_table") }}
|
||||
</span>
|
||||
<span class="text-base-content/60 inline-flex items-center gap-2" v-else-if="state === 'downloading'">
|
||||
<span class="loading loading-spinner loading-xs"></span
|
||||
>{{ $t("analytics.downloading", { size: formatBytes(bytes, { decimals: 1 }) }) }}
|
||||
</span>
|
||||
<span class="text-base-content/60 inline-flex items-center gap-2" v-else-if="evaluating">
|
||||
<span class="loading loading-spinner loading-xs"></span>{{ $t("analytics.evaluating_query") }}
|
||||
</span>
|
||||
<span class="text-base-content/60" v-else>
|
||||
{{ $t("analytics.total_records", { count: results.numRows.toLocaleString() }) }}
|
||||
<template v-if="results.numRows > pageLimit">{{
|
||||
$t("analytics.showing_first", { count: page.numRows.toLocaleString() })
|
||||
}}</template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-end shrink-0" v-if="canExport">
|
||||
<div tabindex="0" role="button" class="btn btn-xs btn-ghost cursor-pointer gap-1">
|
||||
<ph:download-simple class="size-4" />
|
||||
{{ $t("analytics.export") }}
|
||||
<div class="mt-8 flex flex-col gap-2">
|
||||
<section>
|
||||
<label class="form-control">
|
||||
<textarea
|
||||
v-model="query"
|
||||
class="textarea textarea-primary w-full font-mono text-lg"
|
||||
:class="{ 'textarea-error!': error }"
|
||||
:disabled="state === 'downloading'"
|
||||
></textarea>
|
||||
<div class="mt-2">
|
||||
<span class="text-error" v-if="error">{{ error }}</span>
|
||||
<span v-else-if="state === 'initializing'">{{ $t("analytics.creating_table") }}</span>
|
||||
<span v-else-if="state === 'downloading'">{{
|
||||
$t("analytics.downloading", { size: formatBytes(bytes, { decimals: 1 }) })
|
||||
}}</span>
|
||||
<span v-else-if="evaluating">{{ $t("analytics.evaluating_query") }}</span>
|
||||
<span v-else>
|
||||
{{ $t("analytics.total_records", { count: results.numRows.toLocaleString() }) }}
|
||||
<template v-if="results.numRows > pageLimit">{{
|
||||
$t("analytics.showing_first", { count: page.numRows.toLocaleString() })
|
||||
}}</template>
|
||||
</span>
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content menu bg-base-200 rounded-box z-30 w-44 p-2 shadow-sm">
|
||||
<li>
|
||||
<a class="cursor-pointer whitespace-nowrap" @click="exportResults('csv')">{{
|
||||
$t("analytics.export_csv")
|
||||
}}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="cursor-pointer whitespace-nowrap" @click="exportResults('json')">{{
|
||||
$t("analytics.export_json")
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="state === 'ready' && columns.length" class="flex flex-col gap-2 text-xs">
|
||||
<div class="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<span class="text-base-content/50 font-medium">{{ $t("analytics.examples") }}</span>
|
||||
<button
|
||||
v-for="ex in examples"
|
||||
:key="ex.key"
|
||||
class="badge badge-sm badge-outline hover:border-primary hover:text-primary cursor-pointer"
|
||||
@click="applyExample(ex.sql)"
|
||||
>
|
||||
{{ $t(ex.key, ex.params ?? {}) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<details class="group">
|
||||
<summary
|
||||
class="text-base-content/50 hover:text-base-content/80 flex w-fit cursor-pointer items-center gap-1 font-medium select-none"
|
||||
>
|
||||
<ph:caret-right class="size-3 transition-transform group-open:rotate-90" />
|
||||
{{ $t("analytics.columns") }}
|
||||
<span class="opacity-60">{{ columns.length }}</span>
|
||||
</summary>
|
||||
<div class="mt-2 flex max-h-40 flex-wrap gap-1.5 overflow-y-auto">
|
||||
<button
|
||||
v-for="col in columns"
|
||||
:key="col.name"
|
||||
class="badge badge-sm badge-ghost hover:border-primary hover:text-primary cursor-pointer font-mono"
|
||||
:title="col.type"
|
||||
@click="insertColumn(col.name)"
|
||||
>
|
||||
{{ col.name }}
|
||||
</button>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<SQLTable :table="page" :loading="evaluating || state !== 'ready'" />
|
||||
</label>
|
||||
</section>
|
||||
<SQLTable :table="page" :loading="evaluating || state !== 'ready'" />
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -116,15 +42,11 @@ import { type Table } from "@apache-arrow/esnext-esm";
|
||||
const { container } = defineProps<{ container: Container }>();
|
||||
const query = ref("SELECT * FROM logs LIMIT 100");
|
||||
const error = ref<string | null>(null);
|
||||
const debouncedQuery = debouncedRef(query, 500);
|
||||
const evaluating = ref(false);
|
||||
const pageLimit = 1000;
|
||||
const state = ref<"downloading" | "ready" | "initializing">("downloading");
|
||||
const bytes = ref(0);
|
||||
const columns = ref<{ name: string; type: string }[]>([]);
|
||||
const queryEl = useTemplateRef<HTMLTextAreaElement>("queryEl");
|
||||
|
||||
const runQuery = ref(query.value);
|
||||
watchDebounced(query, (v) => (runQuery.value = v), { debounce: 500 });
|
||||
|
||||
const url = withBase(
|
||||
`/api/hosts/${container.host}/containers/${container.id}/logs?stdout=1&stderr=1&everything&jsonOnly`,
|
||||
@@ -168,15 +90,9 @@ onMounted(async () => {
|
||||
|
||||
state.value = "initializing";
|
||||
await conn.query(
|
||||
`CREATE TABLE logs AS SELECT unnest(m) FROM read_json('logs.json', ignore_errors = true, format = 'newline_delimited', map_inference_threshold = -1)`,
|
||||
`CREATE TABLE logs AS SELECT unnest(m) FROM read_json('logs.json', ignore_errors = true, format = 'newline_delimited')`,
|
||||
);
|
||||
|
||||
const described = await conn.query<{ column_name: any; column_type: any }>(`DESCRIBE logs`);
|
||||
columns.value = described.toArray().map((row) => ({
|
||||
name: String(row.column_name),
|
||||
type: String(row.column_type),
|
||||
}));
|
||||
|
||||
state.value = "ready";
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -186,54 +102,10 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
const examples = computed(() => {
|
||||
const names = columns.value.map((c) => c.name);
|
||||
const pick = ["level", "severity", "lvl", "status"].find((c) => names.includes(c)) ?? names[0];
|
||||
const list: { key: string; sql: string; params?: Record<string, string> }[] = [
|
||||
{ key: "analytics.example_all", sql: "SELECT * FROM logs LIMIT 100" },
|
||||
{ key: "analytics.example_count", sql: "SELECT count(*) AS total FROM logs" },
|
||||
];
|
||||
if (pick) {
|
||||
list.push({
|
||||
key: "analytics.example_group",
|
||||
params: { column: pick },
|
||||
sql: `SELECT "${pick}", count(*) AS count FROM logs GROUP BY "${pick}" ORDER BY count DESC`,
|
||||
});
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
function run() {
|
||||
if (state.value !== "ready") return;
|
||||
runQuery.value = query.value;
|
||||
}
|
||||
|
||||
function applyExample(sql: string) {
|
||||
query.value = sql;
|
||||
nextTick(run);
|
||||
}
|
||||
|
||||
function insertColumn(name: string) {
|
||||
const text = `"${name}"`;
|
||||
const el = queryEl.value;
|
||||
if (!el) {
|
||||
query.value += text;
|
||||
return;
|
||||
}
|
||||
const start = el.selectionStart ?? query.value.length;
|
||||
const end = el.selectionEnd ?? start;
|
||||
query.value = query.value.slice(0, start) + text + query.value.slice(end);
|
||||
nextTick(() => {
|
||||
el.focus();
|
||||
const pos = start + text.length;
|
||||
el.setSelectionRange(pos, pos);
|
||||
});
|
||||
}
|
||||
|
||||
const results = computedAsync(
|
||||
async () => {
|
||||
if (state.value === "ready") {
|
||||
return await conn.query<Record<string, any>>(runQuery.value);
|
||||
return await conn.query<Record<string, any>>(debouncedQuery.value);
|
||||
} else {
|
||||
return empty;
|
||||
}
|
||||
@@ -257,54 +129,5 @@ whenever(evaluating, () => {
|
||||
const page = computed(() =>
|
||||
results.value.numRows > pageLimit ? results.value.slice(0, pageLimit) : results.value,
|
||||
) as unknown as ComputedRef<Table<Record<string, any>>>;
|
||||
|
||||
const canExport = computed(() => state.value === "ready" && !evaluating.value && results.value.numRows > 0);
|
||||
|
||||
function stringify(value: unknown): string {
|
||||
if (value === null || value === undefined) return "";
|
||||
if (typeof value === "bigint") return value.toString();
|
||||
if (typeof value === "object") return JSON.stringify(value, (_, v) => (typeof v === "bigint" ? v.toString() : v));
|
||||
return String(value);
|
||||
}
|
||||
|
||||
function toCSV(table: Table<Record<string, any>>, columns: string[]): string {
|
||||
const escape = (value: string) => (/[",\n\r]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value);
|
||||
const lines = [columns.map(escape).join(",")];
|
||||
for (const row of table) {
|
||||
lines.push(columns.map((column) => escape(stringify((row as Record<string, any>)[column]))).join(","));
|
||||
}
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
function toJSON(table: Table<Record<string, any>>, columns: string[]): string {
|
||||
const rows = [];
|
||||
for (const row of table) {
|
||||
const record: Record<string, unknown> = {};
|
||||
for (const column of columns) {
|
||||
const value = (row as Record<string, any>)[column];
|
||||
record[column] = typeof value === "bigint" ? value.toString() : value;
|
||||
}
|
||||
rows.push(record);
|
||||
}
|
||||
return JSON.stringify(rows, null, 2);
|
||||
}
|
||||
|
||||
function exportResults(format: "csv" | "json") {
|
||||
const table = results.value as unknown as Table<Record<string, any>>;
|
||||
if (table.numRows === 0) return;
|
||||
|
||||
const columns = Object.keys(table.get(0) as Record<string, any>);
|
||||
const content = format === "csv" ? toCSV(table, columns) : toJSON(table, columns);
|
||||
const type = format === "csv" ? "text/csv;charset=utf-8" : "application/json";
|
||||
const name = container.name.replace(/[^\w.-]+/g, "-");
|
||||
|
||||
const url = URL.createObjectURL(new Blob([content], { type }));
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `${name}-query.${format}`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
(document.activeElement as HTMLElement | null)?.blur();
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</UseClipboard>
|
||||
</div>
|
||||
<div class="bg-base-200 max-h-125 overflow-scroll rounded-sm border border-white/20 p-2">
|
||||
<JsonFormatted :value="entry.rawMessage" class="text-sm" />
|
||||
<pre v-html="syntaxHighlight(entry.rawMessage)"></pre>
|
||||
</div>
|
||||
</section>
|
||||
<table class="table-pin-rows table table-fixed" v-if="entry instanceof ComplexLogEntry">
|
||||
@@ -142,6 +142,28 @@ const toggleAllFields = computed({
|
||||
},
|
||||
});
|
||||
|
||||
function syntaxHighlight(json: string) {
|
||||
json = JSON.stringify(JSON.parse(json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")), null, 2);
|
||||
return json.replace(
|
||||
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\b\d+\b)/g,
|
||||
function (match: string) {
|
||||
var cls = "json-number";
|
||||
if (match.startsWith('"')) {
|
||||
if (match.endsWith(":")) {
|
||||
cls = "json-key";
|
||||
} else {
|
||||
cls = "json-string";
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = "json-boolean";
|
||||
} else if (/null/.test(match)) {
|
||||
cls = "json-null";
|
||||
}
|
||||
return `<span class="${cls}">${match}</span>`;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
useSortable(list, fields);
|
||||
</script>
|
||||
<style scoped>
|
||||
@@ -157,4 +179,22 @@ useSortable(list, fields);
|
||||
Menlo,
|
||||
monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
& :deep(.json-key) {
|
||||
@apply text-blue;
|
||||
}
|
||||
& :deep(.json-string) {
|
||||
@apply text-green;
|
||||
}
|
||||
& :deep(.json-number) {
|
||||
@apply text-orange;
|
||||
}
|
||||
& :deep(.json-boolean) {
|
||||
@apply text-purple;
|
||||
}
|
||||
& :deep(.json-null) {
|
||||
@apply text-red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,12 @@
|
||||
>
|
||||
{{ container.name }}
|
||||
</RandomColorTag>
|
||||
<LogDate v-if="showTimestamp" :date="logEntry.date" class="shrink-0 select-none" />
|
||||
<LogDate
|
||||
v-if="showTimestamp"
|
||||
:date="logEntry.date"
|
||||
class="shrink-0 select-none"
|
||||
:class="{ 'bg-secondary': route.query.logId === logEntry.id.toString() }"
|
||||
/>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -32,4 +37,6 @@ const { hosts } = useHosts();
|
||||
|
||||
const container = currentContainer(toRef(() => logEntry.containerID));
|
||||
const host = computed(() => hosts.value[container.value.host]);
|
||||
|
||||
const route = useRoute();
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
:id="item.id.toString()"
|
||||
:data-time="item.date.getTime()"
|
||||
class="group/entry"
|
||||
:class="{ 'log-permalink-target': permalinkLogId === item.id.toString() }"
|
||||
>
|
||||
<component :is="item.getComponent()" :log-entry="item" />
|
||||
</li>
|
||||
@@ -25,9 +24,6 @@ const { messages } = defineProps<{
|
||||
|
||||
const { containers } = useLoggingContext();
|
||||
|
||||
const route = useRoute();
|
||||
const permalinkLogId = computed(() => (typeof route.query.logId === "string" ? route.query.logId : ""));
|
||||
|
||||
const list = ref<HTMLElement[]>([]);
|
||||
|
||||
let previousDate = new Date();
|
||||
@@ -75,11 +71,6 @@ ul {
|
||||
&:last-child {
|
||||
scroll-margin-block-end: 5rem;
|
||||
}
|
||||
|
||||
&.log-permalink-target {
|
||||
@apply bg-secondary/15 border-secondary -ml-1 border-l-4 pl-3;
|
||||
animation: log-permalink-pulse 1.4s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
@@ -122,14 +113,4 @@ ul {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes log-permalink-pulse {
|
||||
0% {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
100% {
|
||||
/* Settle to the resting bg-secondary/15 declared on the .li above. */
|
||||
background-color: color-mix(in oklab, var(--color-secondary) 15%, transparent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<li>
|
||||
<a @click="clear()">
|
||||
<octicon:trash-24 /> {{ $t("toolbar.clear") }}
|
||||
<KeyShortcut char="l" :modifiers="['shift', 'meta']" />
|
||||
<KeyShortcut char="k" :modifiers="['shift', 'meta']" />
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="enableDownload">
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { flushPromises, mount } from "@vue/test-utils";
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import { defineComponent, h, nextTick, ref } from "vue";
|
||||
import { Container, Stat } from "@/models/Container";
|
||||
import MultiContainerStat from "./MultiContainerStat.vue";
|
||||
|
||||
vi.mock("@/stores/config", () => ({
|
||||
__esModule: true,
|
||||
default: { hosts: [], base: "" },
|
||||
withBase: (path: string) => path,
|
||||
}));
|
||||
|
||||
// Capture recalculate() across both chart instances.
|
||||
const recalculate = vi.fn();
|
||||
const BarChartStub = defineComponent({
|
||||
name: "BarChart",
|
||||
props: ["chartData", "barClass"],
|
||||
setup(_, { expose }) {
|
||||
expose({ recalculate });
|
||||
return () => h("div", { class: "bar-chart-stub" });
|
||||
},
|
||||
});
|
||||
|
||||
const i18n = createI18n({ legacy: false, locale: "en", missingWarn: false, fallbackWarn: false, messages: { en: {} } });
|
||||
|
||||
function stat(cpu: number): Stat {
|
||||
return {
|
||||
cpu,
|
||||
memory: cpu,
|
||||
memoryUsage: cpu,
|
||||
networkRxTotal: 0,
|
||||
networkTxTotal: 0,
|
||||
diskReadTotal: 0,
|
||||
diskWriteTotal: 0,
|
||||
};
|
||||
}
|
||||
|
||||
function makeContainer(id: string, cpu: number): Container {
|
||||
const stats = Array.from({ length: 10 }, () => stat(cpu));
|
||||
const now = new Date();
|
||||
return new Container(id, now, now, now, "img", id, "cmd", "host1", {}, "running", 0, 0, stats);
|
||||
}
|
||||
|
||||
describe("<MultiContainerStat />", () => {
|
||||
test("recalculates the charts when the container changes", async () => {
|
||||
// Mirror production: a parent holding a ref re-renders with a fresh
|
||||
// [container] array on switch. (VueTestUtils setProps cannot trigger this
|
||||
// because Container instances carry refs, which defeats prop change
|
||||
// detection on a direct prop assignment.)
|
||||
const current = ref<Container>(makeContainer("a", 10));
|
||||
const Parent = defineComponent({
|
||||
setup: () => () => h(MultiContainerStat as any, { containers: [current.value] }),
|
||||
});
|
||||
mount(Parent, {
|
||||
global: { plugins: [i18n], stubs: { BarChart: BarChartStub, IOCard: true } },
|
||||
});
|
||||
await flushPromises();
|
||||
recalculate.mockClear();
|
||||
|
||||
// Switching containers replaces the whole stats series; the parent must
|
||||
// force the cached charts to fully recompute.
|
||||
current.value = makeContainer("b", 90);
|
||||
await nextTick();
|
||||
await flushPromises();
|
||||
|
||||
expect(recalculate).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -1,87 +1,57 @@
|
||||
<template>
|
||||
<div class="flex items-stretch gap-2.5">
|
||||
<IOCard
|
||||
:network-rx="networkRate.rx"
|
||||
:network-tx="networkRate.tx"
|
||||
:disk-read="diskRate.read"
|
||||
:disk-write="diskRate.write"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
<div class="flex gap-1 md:gap-4">
|
||||
<div
|
||||
class="grid hidden min-w-15 grid-cols-[auto_1fr_auto_1fr] items-center gap-0.5 text-xs leading-none sm:grid md:grid-cols-[auto_1fr]"
|
||||
>
|
||||
<PhArrowUp class="text-primary" />
|
||||
<span class="tabular-nums">{{ formatBytes(networkRate.tx, { short: true, decimals: 1 }) }}/s</span>
|
||||
<PhArrowDown class="text-secondary" />
|
||||
<span class="tabular-nums">{{ formatBytes(networkRate.rx, { short: true, decimals: 1 }) }}/s</span>
|
||||
</div>
|
||||
<StatMonitor
|
||||
ref="cpuMonitorRef"
|
||||
:data="cpuData"
|
||||
:icon="PhCpu"
|
||||
card-class="bg-primary/10 md:min-w-56"
|
||||
icon-class="text-primary"
|
||||
:title="t('tooltip.cpu-usage', { cpu: totalStat.cpu.toFixed(2), cores: roundCPU(limits.cpu) })"
|
||||
>
|
||||
<template #value="{ hoveredValue }">
|
||||
<span class="tabular-nums">
|
||||
<span class="font-semibold"> {{ Math.max(0, hoveredValue ?? totalStat.cpu).toFixed(1) }}% </span>
|
||||
<span class="text-base-content/60 max-md:hidden"> / {{ roundCPU(limits.cpu) }} CPU</span>
|
||||
</span>
|
||||
</template>
|
||||
<template #chart="{ onHoverValue }">
|
||||
<BarChart
|
||||
ref="cpuChart"
|
||||
:chart-data="cpuData"
|
||||
bar-class="bg-primary opacity-80 hover:opacity-100"
|
||||
class="h-5 w-full max-md:hidden"
|
||||
@hover-value="onHoverValue"
|
||||
/>
|
||||
</template>
|
||||
</StatCard>
|
||||
|
||||
<StatCard
|
||||
:stat-value="Math.max(0, totalStat.cpu).toFixed(2) + '%'"
|
||||
:limit="roundCPU(limits.cpu) + ' CPU'"
|
||||
container-class="border-primary/40 bg-primary/20"
|
||||
text-class="hover:text-primary"
|
||||
bar-class="bg-primary"
|
||||
:formatter="(value: number) => value.toFixed(2) + '%'"
|
||||
/>
|
||||
<StatMonitor
|
||||
ref="memoryMonitorRef"
|
||||
:data="memoryData"
|
||||
:icon="PhMemory"
|
||||
card-class="bg-secondary/10 md:min-w-56"
|
||||
icon-class="text-secondary"
|
||||
:title="
|
||||
t('tooltip.memory-usage', { used: formatBytes(totalStat.memoryUsage), total: formatBytes(limits.memory) })
|
||||
"
|
||||
>
|
||||
<template #value="{ hoveredValue }">
|
||||
<span class="tabular-nums">
|
||||
<span class="font-semibold">{{
|
||||
formatBytes(hoveredValue ?? totalStat.memoryUsage, { short: true, decimals: 1 })
|
||||
}}</span>
|
||||
<span class="text-base-content/60 max-md:hidden">
|
||||
/ {{ formatBytes(limits.memory, { short: true, decimals: 1 }) }}</span
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
<template #chart="{ onHoverValue }">
|
||||
<BarChart
|
||||
ref="memoryChart"
|
||||
:chart-data="memoryData"
|
||||
bar-class="bg-secondary opacity-80 hover:opacity-100"
|
||||
class="h-5 w-full max-md:hidden"
|
||||
@hover-value="onHoverValue"
|
||||
/>
|
||||
</template>
|
||||
</StatCard>
|
||||
:stat-value="formatBytes(totalStat.memoryUsage)"
|
||||
:limit="formatBytes(limits.memory, { short: true, decimals: 1 })"
|
||||
container-class="border-secondary/40 bg-secondary/20"
|
||||
text-class="hover:text-secondary"
|
||||
bar-class="bg-secondary"
|
||||
:formatter="(value: number) => formatBytes(value)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Container, Stat, emptyStat } from "@/models/Container";
|
||||
import StatCard from "@/components/LogViewer/StatCard.vue";
|
||||
import IOCard from "@/components/LogViewer/IOCard.vue";
|
||||
import BarChart from "@/components/BarChart.vue";
|
||||
import { Stat } from "@/models/Container";
|
||||
import { Container } from "@/models/Container";
|
||||
import StatMonitor from "@/components/LogViewer/StatMonitor.vue";
|
||||
// @ts-ignore
|
||||
import PhCpu from "~icons/ph/cpu";
|
||||
// @ts-ignore
|
||||
import PhMemory from "~icons/ph/memory";
|
||||
|
||||
const { containers } = defineProps<{
|
||||
containers: Container[];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const totalStat = ref<Stat>(emptyStat());
|
||||
const cpuMonitorRef = ref<InstanceType<typeof StatMonitor> | null>(null);
|
||||
const memoryMonitorRef = ref<InstanceType<typeof StatMonitor> | null>(null);
|
||||
const totalStat = ref<Stat>({ cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 });
|
||||
const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
|
||||
const { hosts } = useHosts();
|
||||
const cpuChart = useTemplateRef("cpuChart");
|
||||
const memoryChart = useTemplateRef("memoryChart");
|
||||
const networkRate = ref({ rx: 0, tx: 0 });
|
||||
const diskRate = ref({ read: 0, write: 0 });
|
||||
|
||||
const roundCPU = (num: number) => (Number.isInteger(num) ? num.toFixed(0) : num.toFixed(1));
|
||||
|
||||
@@ -98,37 +68,37 @@ watch(
|
||||
() => {
|
||||
const initial: Stat[] = [];
|
||||
for (let i = 1; i <= 300; i++) {
|
||||
const stat = containers.reduce((acc, container) => {
|
||||
const item = container.statsHistory.at(-i);
|
||||
if (!item) {
|
||||
return acc;
|
||||
}
|
||||
const cores = toContainerCores(container);
|
||||
return {
|
||||
cpu: acc.cpu + item.cpu / cores,
|
||||
memory: acc.memory + item.memory,
|
||||
memoryUsage: acc.memoryUsage + item.memoryUsage,
|
||||
networkRxTotal: acc.networkRxTotal + item.networkRxTotal,
|
||||
networkTxTotal: acc.networkTxTotal + item.networkTxTotal,
|
||||
diskReadTotal: acc.diskReadTotal + item.diskReadTotal,
|
||||
diskWriteTotal: acc.diskWriteTotal + item.diskWriteTotal,
|
||||
};
|
||||
}, emptyStat());
|
||||
const stat = containers.reduce(
|
||||
(acc, container) => {
|
||||
const item = container.statsHistory.at(-i);
|
||||
if (!item) {
|
||||
return acc;
|
||||
}
|
||||
const cores = toContainerCores(container);
|
||||
return {
|
||||
cpu: acc.cpu + item.cpu / cores,
|
||||
memory: acc.memory + item.memory,
|
||||
memoryUsage: acc.memoryUsage + item.memoryUsage,
|
||||
networkRxTotal: acc.networkRxTotal + item.networkRxTotal,
|
||||
networkTxTotal: acc.networkTxTotal + item.networkTxTotal,
|
||||
};
|
||||
},
|
||||
{ cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 },
|
||||
);
|
||||
initial.push(stat);
|
||||
}
|
||||
totalStat.value = initial[0];
|
||||
reset({ initial: initial.reverse() });
|
||||
// Charts cache their downsampled bars and only patch the last bar per tick;
|
||||
// a container switch replaces the whole series, so force a full recalculate.
|
||||
nextTick(() => {
|
||||
cpuChart.value?.recalculate();
|
||||
memoryChart.value?.recalculate();
|
||||
cpuMonitorRef.value?.recalculate();
|
||||
memoryMonitorRef.value?.recalculate();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const limits = computed(() => {
|
||||
// Group containers by host
|
||||
const containersByHost = new Map<string, Container[]>();
|
||||
containers.forEach((container) => {
|
||||
if (!containersByHost.has(container.host)) {
|
||||
@@ -140,67 +110,77 @@ const limits = computed(() => {
|
||||
let totalCpu = 0;
|
||||
let totalMemory = 0;
|
||||
|
||||
// Process each host independently
|
||||
containersByHost.forEach((hostContainers, hostId) => {
|
||||
const hostInfo = hosts.value[hostId];
|
||||
const hostTotalMemory = hostInfo?.memTotal || 0;
|
||||
const hostTotalCpu = hostInfo?.nCPU || 0;
|
||||
|
||||
// Check if any container lacks limits
|
||||
const hasUnlimitedCpu = hostContainers.some((c) => !c.cpuLimit || c.cpuLimit <= 0);
|
||||
const hasUnlimitedMemory = hostContainers.some((c) => !c.memoryLimit);
|
||||
|
||||
// Calculate CPU for this host
|
||||
if (hasUnlimitedCpu) {
|
||||
// At least one container has no limit, use host total
|
||||
totalCpu += hostTotalCpu;
|
||||
} else {
|
||||
// All containers have limits, sum them up (capped at host total)
|
||||
const sumCpu = hostContainers.reduce((sum, c) => sum + (c.cpuLimit || 0), 0);
|
||||
totalCpu += Math.min(sumCpu, hostTotalCpu);
|
||||
}
|
||||
|
||||
// Calculate Memory for this host
|
||||
if (hasUnlimitedMemory) {
|
||||
// At least one container has no limit, use host total
|
||||
totalMemory += hostTotalMemory;
|
||||
} else {
|
||||
// All containers have limits, sum them up (capped at host total)
|
||||
const sumMemory = hostContainers.reduce((sum, c) => sum + (c.memoryLimit || 0), 0);
|
||||
totalMemory += Math.min(sumMemory, hostTotalMemory);
|
||||
}
|
||||
});
|
||||
|
||||
return { cpu: totalCpu, memory: totalMemory };
|
||||
return {
|
||||
cpu: totalCpu,
|
||||
memory: totalMemory,
|
||||
};
|
||||
});
|
||||
|
||||
useIntervalFn(() => {
|
||||
const previousStat = totalStat.value;
|
||||
totalStat.value = containers.reduce((acc, container) => {
|
||||
const cores = toContainerCores(container);
|
||||
return {
|
||||
cpu: acc.cpu + container.stat.cpu / cores,
|
||||
memory: acc.memory + container.stat.memory,
|
||||
memoryUsage: acc.memoryUsage + container.stat.memoryUsage,
|
||||
networkRxTotal: acc.networkRxTotal + container.stat.networkRxTotal,
|
||||
networkTxTotal: acc.networkTxTotal + container.stat.networkTxTotal,
|
||||
diskReadTotal: acc.diskReadTotal + container.stat.diskReadTotal,
|
||||
diskWriteTotal: acc.diskWriteTotal + container.stat.diskWriteTotal,
|
||||
};
|
||||
}, emptyStat());
|
||||
totalStat.value = containers.reduce(
|
||||
(acc, container) => {
|
||||
const cores = toContainerCores(container);
|
||||
return {
|
||||
cpu: acc.cpu + container.stat.cpu / cores,
|
||||
memory: acc.memory + container.stat.memory,
|
||||
memoryUsage: acc.memoryUsage + container.stat.memoryUsage,
|
||||
networkRxTotal: acc.networkRxTotal + container.stat.networkRxTotal,
|
||||
networkTxTotal: acc.networkTxTotal + container.stat.networkTxTotal,
|
||||
};
|
||||
},
|
||||
{ cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 },
|
||||
);
|
||||
|
||||
networkRate.value = {
|
||||
rx: Math.max(0, totalStat.value.networkRxTotal - previousStat.networkRxTotal),
|
||||
tx: Math.max(0, totalStat.value.networkTxTotal - previousStat.networkTxTotal),
|
||||
};
|
||||
diskRate.value = {
|
||||
read: Math.max(0, totalStat.value.diskReadTotal - previousStat.diskReadTotal),
|
||||
write: Math.max(0, totalStat.value.diskWriteTotal - previousStat.diskWriteTotal),
|
||||
};
|
||||
}, 1000);
|
||||
|
||||
const cpuData = computed(() =>
|
||||
history.value.map((stat) => ({
|
||||
percent: Math.max(0, stat.cpu),
|
||||
history.value.map((stat, i) => ({
|
||||
x: i,
|
||||
y: Math.max(0, stat.cpu),
|
||||
value: Math.max(0, stat.cpu),
|
||||
})),
|
||||
);
|
||||
|
||||
const memoryData = computed(() =>
|
||||
history.value.map((stat) => ({
|
||||
percent: stat.memory,
|
||||
history.value.map((stat, i) => ({
|
||||
x: i,
|
||||
y: stat.memory,
|
||||
value: stat.memoryUsage,
|
||||
})),
|
||||
);
|
||||
|
||||
@@ -1,39 +1,28 @@
|
||||
<template>
|
||||
<div class="w-full overflow-x-auto" v-if="!loading">
|
||||
<table class="table-zebra table-pin-rows table-md table" v-if="columns.length">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="column in columns" :key="column" class="font-mono">{{ column }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in table" :key="index">
|
||||
<td v-for="column in columns" :key="column" class="max-w-md align-top">
|
||||
<span v-if="format(row[column]) === null" class="text-base-content/30 italic">NULL</span>
|
||||
<span v-else class="block truncate font-mono" :title="format(row[column]) ?? undefined">{{
|
||||
format(row[column])
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-else class="text-base-content/50 flex flex-col items-center gap-2 py-16">
|
||||
<ph:database class="size-8 opacity-40" />
|
||||
<span>{{ $t("analytics.no_results") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table-md table" v-else>
|
||||
<table class="table-zebra table-pin-rows table-md table" v-if="!loading">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="i in 3" :key="i">
|
||||
<th v-for="column in columns" :key="column">{{ column }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in table" :key="row">
|
||||
<td v-for="column in columns" :key="column">{{ row[column] }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="table-md table animate-pulse" v-else>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="_ in 3">
|
||||
<div class="bg-base-content/50 h-4 w-20 animate-pulse opacity-50"></div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="i in 9" :key="i">
|
||||
<td v-for="j in 3" :key="j">
|
||||
<div class="bg-base-content/50 h-4 w-20 animate-pulse opacity-20"></div>
|
||||
<tr v-for="_ in 9">
|
||||
<td v-for="_ in 3">
|
||||
<div class="bg-base-content/50 h-4 w-20 opacity-20"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -48,17 +37,4 @@ const { loading, table } = defineProps<{
|
||||
}>();
|
||||
|
||||
const columns = computed(() => (table.numRows > 0 ? Object.keys(table.get(0) as Record<string, any>) : []));
|
||||
|
||||
function format(value: unknown): string | null {
|
||||
if (value === null || value === undefined) return null;
|
||||
if (typeof value === "bigint") return value.toString();
|
||||
if (typeof value === "object") {
|
||||
try {
|
||||
return JSON.stringify(value, (_, v) => (typeof v === "bigint" ? v.toString() : v));
|
||||
} catch {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { nextTick } from "vue";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import SearchStatus from "./SearchStatus.vue";
|
||||
import IndeterminateBar from "@/components/common/IndeterminateBar.vue";
|
||||
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: "en",
|
||||
messages: {
|
||||
en: {
|
||||
label: {
|
||||
"search-status": {
|
||||
searching: "Searching older logs…",
|
||||
"searching-to": "Searching older logs… back to {time}",
|
||||
capped: "{count} matches · searched back to {time}",
|
||||
exhausted: "Searched all logs · {count} matches",
|
||||
empty: "No matches · searched all logs",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function createStatus(overrides: Record<string, unknown> = {}) {
|
||||
return mount(SearchStatus, {
|
||||
global: { plugins: [i18n] },
|
||||
props: {
|
||||
status: { active: false, done: false, matches: 0, scannedTo: undefined, reason: undefined, ...overrides },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
describe("<SearchStatus />", () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
});
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
test("stays hidden while a search is active but still fast (flash avoidance)", async () => {
|
||||
const wrapper = createStatus({ active: true });
|
||||
vi.advanceTimersByTime(100);
|
||||
await nextTick();
|
||||
expect(wrapper.find("[data-state]").exists()).toBe(false);
|
||||
});
|
||||
|
||||
test("shows searching state once a search runs past the reveal delay", async () => {
|
||||
const wrapper = createStatus({ active: true });
|
||||
vi.advanceTimersByTime(400);
|
||||
await nextTick();
|
||||
expect(wrapper.find('[data-state="searching"]').exists()).toBe(true);
|
||||
expect(wrapper.findComponent(IndeterminateBar).exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("reveals the searching bar even when progress events arrive faster than the delay", async () => {
|
||||
const wrapper = createStatus({ active: true });
|
||||
// a slow search emits a progress event each window; the reveal delay must
|
||||
// measure from when the search started, not restart on every event
|
||||
for (let i = 0; i < 5; i++) {
|
||||
vi.advanceTimersByTime(100);
|
||||
await wrapper.setProps({ status: { active: true, done: false, matches: i, scannedTo: `t${i}` } });
|
||||
await nextTick();
|
||||
}
|
||||
expect(wrapper.find('[data-state="searching"]').exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("shows the empty state when a search finishes with no matches", async () => {
|
||||
const wrapper = createStatus({ active: false, done: true, matches: 0, reason: "exhausted" });
|
||||
await nextTick();
|
||||
expect(wrapper.find('[data-state="empty"]').exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("shows a completion summary for a slow exhausted search", async () => {
|
||||
const wrapper = createStatus({ active: true });
|
||||
vi.advanceTimersByTime(400);
|
||||
await nextTick();
|
||||
await wrapper.setProps({ status: { active: false, done: true, matches: 3, reason: "exhausted" } });
|
||||
await nextTick();
|
||||
expect(wrapper.find('[data-state="exhausted"]').exists()).toBe(true);
|
||||
expect(wrapper.text()).toContain("3");
|
||||
});
|
||||
|
||||
test("shows a capped summary for a slow capped search", async () => {
|
||||
const wrapper = createStatus({ active: true });
|
||||
vi.advanceTimersByTime(400);
|
||||
await nextTick();
|
||||
await wrapper.setProps({
|
||||
status: { active: false, done: true, matches: 50, reason: "capped", scannedTo: "2026-06-01T13:10:00Z" },
|
||||
});
|
||||
await nextTick();
|
||||
expect(wrapper.find('[data-state="capped"]').exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("stays quiet for a fast search that returned matches", async () => {
|
||||
const wrapper = createStatus({ active: true });
|
||||
vi.advanceTimersByTime(100);
|
||||
await nextTick();
|
||||
await wrapper.setProps({ status: { active: false, done: true, matches: 5, reason: "capped" } });
|
||||
await nextTick();
|
||||
expect(wrapper.find("[data-state]").exists()).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="state"
|
||||
:data-state="state"
|
||||
class="bg-base-200/80 text-base-content/70 flex items-center gap-2 px-4 py-1.5 text-xs backdrop-blur"
|
||||
>
|
||||
<template v-if="state === 'searching'">
|
||||
<span>{{
|
||||
status.scannedTo ? $t("label.search-status.searching-to", { time }) : $t("label.search-status.searching")
|
||||
}}</span>
|
||||
<IndeterminateBar color="primary" class="ml-auto" />
|
||||
</template>
|
||||
<span v-else-if="state === 'empty'">{{ $t("label.search-status.empty") }}</span>
|
||||
<span v-else-if="state === 'capped'" class="tabular-nums">
|
||||
{{ $t("label.search-status.capped", { count: status.matches, time }) }}
|
||||
</span>
|
||||
<span v-else-if="state === 'exhausted'" class="tabular-nums">
|
||||
{{ $t("label.search-status.exhausted", { count: status.matches }) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { type SearchStatus } from "@/composable/eventStreams";
|
||||
|
||||
const props = defineProps<{ status: SearchStatus }>();
|
||||
|
||||
// Reveal the in-progress bar only after a short delay so fast searches (the
|
||||
// common case, which return almost instantly) never flash it. Slow searches
|
||||
// — sparse matches over a large log — are the only ones that surface it.
|
||||
const showSearching = ref(false);
|
||||
// Remember whether this search ever ran slow, so the completion summary only
|
||||
// shows for searches that actually made the user wait.
|
||||
const wasSlow = ref(false);
|
||||
|
||||
// Watch the boolean, not the whole status object: a slow search replaces the
|
||||
// status object on every progress event, and re-arming the timer each time
|
||||
// would keep the bar from ever appearing. The delay must measure from when the
|
||||
// search started.
|
||||
const active = computed(() => props.status.active);
|
||||
let timer: ReturnType<typeof setTimeout> | undefined;
|
||||
watch(
|
||||
active,
|
||||
(isActive) => {
|
||||
clearTimeout(timer);
|
||||
if (isActive) {
|
||||
timer = setTimeout(() => {
|
||||
showSearching.value = true;
|
||||
wasSlow.value = true;
|
||||
}, 400);
|
||||
} else {
|
||||
showSearching.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
onScopeDispose(() => clearTimeout(timer));
|
||||
|
||||
const time = computed(() => (props.status.scannedTo ? new Date(props.status.scannedTo).toLocaleString() : ""));
|
||||
|
||||
const state = computed<"searching" | "empty" | "capped" | "exhausted" | null>(() => {
|
||||
if (showSearching.value) return "searching";
|
||||
if (!props.status.active && props.status.done) {
|
||||
if (props.status.matches === 0) return "empty";
|
||||
if (wasSlow.value) return props.status.reason === "capped" ? "capped" : "exhausted";
|
||||
}
|
||||
return null;
|
||||
});
|
||||
</script>
|
||||
@@ -9,8 +9,17 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { SimpleLogEntry } from "@/models/LogEntry";
|
||||
import AnsiConvertor from "ansi-to-html";
|
||||
|
||||
const ansiConvertor = new AnsiConvertor({
|
||||
escapeXML: false,
|
||||
fg: "var(--color-base-content)",
|
||||
bg: "var(--color-base-100)",
|
||||
});
|
||||
|
||||
defineProps<{
|
||||
logEntry: SimpleLogEntry;
|
||||
}>();
|
||||
|
||||
const colorize = (value: string) => ansiConvertor.toHtml(value);
|
||||
</script>
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex min-w-0 flex-col gap-px rounded-md px-2.5 py-1"
|
||||
:class="cardClass"
|
||||
:title="title"
|
||||
@mouseleave="hoveredValue = null"
|
||||
>
|
||||
<div class="flex h-[18px] items-center gap-2 text-[12.5px] font-medium">
|
||||
<component :is="icon" class="size-3.5 shrink-0" :class="iconClass" />
|
||||
<slot name="value" :hoveredValue="hoveredValue" />
|
||||
</div>
|
||||
<slot name="chart" :onHoverValue="(v: number) => (hoveredValue = v)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Component } from "vue";
|
||||
|
||||
defineProps<{
|
||||
icon: Component;
|
||||
cardClass?: string;
|
||||
iconClass?: string;
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const hoveredValue = ref<number | null>(null);
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative"
|
||||
@mouseenter="mouseOver = true"
|
||||
@mouseleave="
|
||||
mouseOver = false;
|
||||
hoveredValue = null;
|
||||
"
|
||||
:class="textClass"
|
||||
>
|
||||
<div class="overflow-hidden rounded-xs border px-px pt-1 pb-px max-md:hidden" :class="containerClass">
|
||||
<BarChart
|
||||
ref="barChartRef"
|
||||
:chart-data="chartData"
|
||||
:bar-class="`${barClass} opacity-70 hover:opacity-100`"
|
||||
class="h-8 w-44"
|
||||
@hover-value="(value: number) => (hoveredValue = value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="bg-base-200 flex gap-1 rounded-sm p-px text-xs md:absolute md:-top-2 md:-left-0.5">
|
||||
<component :is="icon" class="text-sm" />
|
||||
<div class="font-bold tabular-nums select-none">
|
||||
{{ displayValue }}
|
||||
<span v-if="limit !== -1 && !mouseOver" class="max-md:hidden"> / {{ limit }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Component } from "vue";
|
||||
import BarChart from "@/components/BarChart.vue";
|
||||
|
||||
const {
|
||||
data,
|
||||
icon,
|
||||
statValue,
|
||||
limit = -1,
|
||||
containerClass = "border-primary",
|
||||
textClass = "",
|
||||
barClass = "bg-primary",
|
||||
formatter,
|
||||
} = defineProps<{
|
||||
data: Point<number>[];
|
||||
icon: Component;
|
||||
statValue: string | number;
|
||||
limit?: string | number;
|
||||
containerClass?: string;
|
||||
textClass?: string;
|
||||
barClass?: string;
|
||||
formatter?: (value: number) => string;
|
||||
}>();
|
||||
|
||||
const chartData = computed(() =>
|
||||
data.map((point) => ({
|
||||
percent: point.y ?? 0,
|
||||
value: point.value ?? point.y ?? 0,
|
||||
})),
|
||||
);
|
||||
const barChartRef = ref<InstanceType<typeof BarChart> | null>(null);
|
||||
const mouseOver = ref(false);
|
||||
const hoveredValue = ref<number | null>(null);
|
||||
|
||||
defineExpose({ recalculate: () => barChartRef.value?.recalculate() });
|
||||
|
||||
const displayValue = computed(() => {
|
||||
if (mouseOver.value && hoveredValue.value !== null) {
|
||||
if (formatter) {
|
||||
return formatter(hoveredValue.value);
|
||||
}
|
||||
return hoveredValue.value.toFixed(2);
|
||||
}
|
||||
return statValue;
|
||||
});
|
||||
</script>
|
||||
@@ -21,7 +21,7 @@ defineExpose({
|
||||
clear: () => source.value?.clear(),
|
||||
});
|
||||
|
||||
onKeyStroke(["l", "L"], (e) => {
|
||||
onKeyStroke("k", (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
|
||||
source.value?.clear();
|
||||
e.preventDefault();
|
||||
|
||||
@@ -7,17 +7,17 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
|
||||
</li>
|
||||
<li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
|
||||
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
|
||||
<div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><a href="/container/abc/time/2019-06-12T10:55:42.459Z?logId=1" class="btn btn-square btn-xs border-base-content/20 bg-base-100 pointer-events-auto! opacity-0 shadow-sm group-hover/entry:opacity-90" tabindex="0"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M6 23H3q-.825 0-1.412-.587T1 21v-3h2v3h3zm12 0v-2h3v-3h2v3q0 .825-.587 1.413T21 23zm-6-4.5q-3 0-5.437-1.775T3 12q1.125-2.95 3.563-4.725T12 5.5t5.438 1.775T21 12q-1.125 2.95-3.562 4.725T12 18.5m0-3q1.45 0 2.475-1.025T15.5 12t-1.025-2.475T12 8.5T9.525 9.525T8.5 12t1.025 2.475T12 15.5m0-2q-.625 0-1.062-.437T10.5 12t.438-1.062T12 10.5t1.063.438T13.5 12t-.437 1.063T12 13.5M1 6V3q0-.825.588-1.412T3 1h3v2H3v3zm20 0V3h-3V1h3q.825 0 1.413.588T23 3v3z"></path>
|
||||
</svg></a>
|
||||
<div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
|
||||
<circle cx="256" cy="256" r="48" fill="currentColor"></circle>
|
||||
<circle cx="256" cy="416" r="48" fill="currentColor"></circle>
|
||||
<circle cx="256" cy="96" r="48" fill="currentColor"></circle>
|
||||
</svg></button>
|
||||
<ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
|
||||
<li><a href="/container/abc/time/2019-06-12T10:55:42.459Z?logId=1" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M6 23H3q-.825 0-1.412-.587T1 21v-3h2v3h3zm12 0v-2h3v-3h2v3q0 .825-.587 1.413T21 23zm-6-4.5q-3 0-5.437-1.775T3 12q1.125-2.95 3.563-4.725T12 5.5t5.438 1.775T21 12q-1.125 2.95-3.562 4.725T12 18.5m0-3q1.45 0 2.475-1.025T15.5 12t-1.025-2.475T12 8.5T9.525 9.525T8.5 12t1.025 2.475T12 15.5m0-2q-.625 0-1.062-.437T10.5 12t.438-1.062T12 10.5t1.063.438T13.5 12t-.437 1.063T12 13.5M1 6V3q0-.825.588-1.412T3 1h3v2H3v3zm20 0V3h-3V1h3q.825 0 1.413.588T23 3v3z"></path>
|
||||
</svg> action.see-in-context</a></li>
|
||||
<li><a disabled="false" title="" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<!--v-if-->
|
||||
<li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"></path>
|
||||
</svg> action.copy-log</a></li>
|
||||
<li><a disabled="false" title="" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"></path>
|
||||
</svg> action.copy-link</a></li>
|
||||
<!--v-if-->
|
||||
@@ -48,17 +48,17 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
|
||||
</li>
|
||||
<li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
|
||||
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
|
||||
<div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><a href="/container/abc/time/2019-06-12T10:55:42.459Z?logId=1" class="btn btn-square btn-xs border-base-content/20 bg-base-100 pointer-events-auto! opacity-0 shadow-sm group-hover/entry:opacity-90" tabindex="0"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M6 23H3q-.825 0-1.412-.587T1 21v-3h2v3h3zm12 0v-2h3v-3h2v3q0 .825-.587 1.413T21 23zm-6-4.5q-3 0-5.437-1.775T3 12q1.125-2.95 3.563-4.725T12 5.5t5.438 1.775T21 12q-1.125 2.95-3.562 4.725T12 18.5m0-3q1.45 0 2.475-1.025T15.5 12t-1.025-2.475T12 8.5T9.525 9.525T8.5 12t1.025 2.475T12 15.5m0-2q-.625 0-1.062-.437T10.5 12t.438-1.062T12 10.5t1.063.438T13.5 12t-.437 1.063T12 13.5M1 6V3q0-.825.588-1.412T3 1h3v2H3v3zm20 0V3h-3V1h3q.825 0 1.413.588T23 3v3z"></path>
|
||||
</svg></a>
|
||||
<div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
|
||||
<circle cx="256" cy="256" r="48" fill="currentColor"></circle>
|
||||
<circle cx="256" cy="416" r="48" fill="currentColor"></circle>
|
||||
<circle cx="256" cy="96" r="48" fill="currentColor"></circle>
|
||||
</svg></button>
|
||||
<ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
|
||||
<li><a href="/container/abc/time/2019-06-12T10:55:42.459Z?logId=1" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M6 23H3q-.825 0-1.412-.587T1 21v-3h2v3h3zm12 0v-2h3v-3h2v3q0 .825-.587 1.413T21 23zm-6-4.5q-3 0-5.437-1.775T3 12q1.125-2.95 3.563-4.725T12 5.5t5.438 1.775T21 12q-1.125 2.95-3.562 4.725T12 18.5m0-3q1.45 0 2.475-1.025T15.5 12t-1.025-2.475T12 8.5T9.525 9.525T8.5 12t1.025 2.475T12 15.5m0-2q-.625 0-1.062-.437T10.5 12t.438-1.062T12 10.5t1.063.438T13.5 12t-.437 1.063T12 13.5M1 6V3q0-.825.588-1.412T3 1h3v2H3v3zm20 0V3h-3V1h3q.825 0 1.413.588T23 3v3z"></path>
|
||||
</svg> action.see-in-context</a></li>
|
||||
<li><a disabled="false" title="" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<!--v-if-->
|
||||
<li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"></path>
|
||||
</svg> action.copy-log</a></li>
|
||||
<li><a disabled="false" title="" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"></path>
|
||||
</svg> action.copy-link</a></li>
|
||||
<!--v-if-->
|
||||
@@ -89,17 +89,17 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
|
||||
</li>
|
||||
<li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
|
||||
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
|
||||
<div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><a href="/container/abc/time/2019-06-12T10:55:42.459Z?logId=1" class="btn btn-square btn-xs border-base-content/20 bg-base-100 pointer-events-auto! opacity-0 shadow-sm group-hover/entry:opacity-90" tabindex="0"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M6 23H3q-.825 0-1.412-.587T1 21v-3h2v3h3zm12 0v-2h3v-3h2v3q0 .825-.587 1.413T21 23zm-6-4.5q-3 0-5.437-1.775T3 12q1.125-2.95 3.563-4.725T12 5.5t5.438 1.775T21 12q-1.125 2.95-3.562 4.725T12 18.5m0-3q1.45 0 2.475-1.025T15.5 12t-1.025-2.475T12 8.5T9.525 9.525T8.5 12t1.025 2.475T12 15.5m0-2q-.625 0-1.062-.437T10.5 12t.438-1.062T12 10.5t1.063.438T13.5 12t-.437 1.063T12 13.5M1 6V3q0-.825.588-1.412T3 1h3v2H3v3zm20 0V3h-3V1h3q.825 0 1.413.588T23 3v3z"></path>
|
||||
</svg></a>
|
||||
<div class="dropdown dropdown-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
|
||||
<circle cx="256" cy="256" r="48" fill="currentColor"></circle>
|
||||
<circle cx="256" cy="416" r="48" fill="currentColor"></circle>
|
||||
<circle cx="256" cy="96" r="48" fill="currentColor"></circle>
|
||||
</svg></button>
|
||||
<ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
|
||||
<li><a href="/container/abc/time/2019-06-12T10:55:42.459Z?logId=1" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M6 23H3q-.825 0-1.412-.587T1 21v-3h2v3h3zm12 0v-2h3v-3h2v3q0 .825-.587 1.413T21 23zm-6-4.5q-3 0-5.437-1.775T3 12q1.125-2.95 3.563-4.725T12 5.5t5.438 1.775T21 12q-1.125 2.95-3.562 4.725T12 18.5m0-3q1.45 0 2.475-1.025T15.5 12t-1.025-2.475T12 8.5T9.525 9.525T8.5 12t1.025 2.475T12 15.5m0-2q-.625 0-1.062-.437T10.5 12t.438-1.062T12 10.5t1.063.438T13.5 12t-.437 1.063T12 13.5M1 6V3q0-.825.588-1.412T3 1h3v2H3v3zm20 0V3h-3V1h3q.825 0 1.413.588T23 3v3z"></path>
|
||||
</svg> action.see-in-context</a></li>
|
||||
<li><a disabled="false" title="" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<!--v-if-->
|
||||
<li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"></path>
|
||||
</svg> action.copy-log</a></li>
|
||||
<li><a disabled="false" title="" class=""><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<li><a disabled="true" title="error.copy-not-supported" class="cursor-not-allowed opacity-50"><svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
|
||||
<path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"></path>
|
||||
</svg> action.copy-link</a></li>
|
||||
<!--v-if-->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="rounded-lg p-2 md:p-3" :class="containerClass">
|
||||
<div class="rounded-lg border p-2 md:p-3" :class="containerClass">
|
||||
<div class="mb-2 flex items-center gap-1.5 text-sm font-medium" :class="textClass">
|
||||
<component :is="icon" class="text-lg" />
|
||||
<span>{{ label }}</span>
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="card bg-base-100 shadow-sm"
|
||||
:class="{ 'opacity-60': !alert.enabled, 'highlight-new': isHighlighted }"
|
||||
@animationend="isHighlighted = false"
|
||||
>
|
||||
<div class="card bg-base-100 shadow-sm" :class="{ 'opacity-60': !alert.enabled }">
|
||||
<div class="card-body gap-4 p-5">
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-wrap items-center gap-2">
|
||||
<h4 class="flex min-w-0 flex-wrap items-center gap-2 text-lg font-semibold">
|
||||
<mdi:chart-line v-if="alert.metricExpression" class="text-info shrink-0" />
|
||||
<mdi:bell-ring-outline v-else-if="alert.eventExpression" class="text-info shrink-0" />
|
||||
<mdi:text-box-outline v-else class="text-info shrink-0" />
|
||||
<span class="break-all">{{ alert.name }}</span> <span class="text-sm font-light">→</span>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<h4 class="flex items-center gap-2 text-lg font-semibold">
|
||||
<mdi:chart-line v-if="alert.metricExpression" class="text-info" />
|
||||
<mdi:bell-ring-outline v-else-if="alert.eventExpression" class="text-info" />
|
||||
<mdi:text-box-outline v-else class="text-info" />
|
||||
<span>{{ alert.name }}</span> <span class="text-sm font-light">→</span>
|
||||
<div class="group/dispatch dropdown dropdown-hover">
|
||||
<div
|
||||
tabindex="0"
|
||||
@@ -48,12 +44,7 @@
|
||||
</h4>
|
||||
<span v-if="!alert.enabled" class="badge badge-warning badge-sm">{{ $t("notifications.alert.paused") }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary shrink-0"
|
||||
:checked="alert.enabled"
|
||||
@change="toggleEnabled"
|
||||
/>
|
||||
<input type="checkbox" class="toggle toggle-primary" :checked="alert.enabled" @change="toggleEnabled" />
|
||||
</div>
|
||||
|
||||
<!-- Expressions -->
|
||||
@@ -83,10 +74,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="border-base-content/10 text-base-content/80 flex items-center justify-between gap-2 border-t pt-3 text-xs"
|
||||
>
|
||||
<div class="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1">
|
||||
<div class="border-base-content/10 text-base-content/80 flex items-center justify-between border-t pt-3 text-xs">
|
||||
<div class="flex items-center gap-4">
|
||||
<span>
|
||||
{{ $t("notifications.alert.containers-count", { count: alert.triggeredContainers }) }}
|
||||
</span>
|
||||
@@ -97,7 +86,7 @@
|
||||
{{ $t("notifications.alert.last-triggered", { time: formatTimeAgo(alert.lastTriggeredAt) }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="btn btn-ghost btn-square" @click="editAlert">
|
||||
<mdi:pencil-outline />
|
||||
</button>
|
||||
@@ -115,20 +104,11 @@
|
||||
import type { Dispatcher, NotificationRule } from "@/types/notifications";
|
||||
import AlertForm from "./AlertForm.vue";
|
||||
|
||||
const { alert, onUpdated, highlight } = defineProps<{
|
||||
const { alert, onUpdated } = defineProps<{
|
||||
alert: NotificationRule;
|
||||
onUpdated?: () => void;
|
||||
highlight?: boolean;
|
||||
}>();
|
||||
|
||||
const isHighlighted = ref(highlight ?? false);
|
||||
watch(
|
||||
() => highlight,
|
||||
(v) => {
|
||||
if (v) isHighlighted.value = true;
|
||||
},
|
||||
);
|
||||
|
||||
const showDrawer = useDrawer();
|
||||
const isDeleting = ref(false);
|
||||
const dispatchers = ref<Dispatcher[]>([]);
|
||||
@@ -176,18 +156,3 @@ async function deleteAlert() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card.highlight-new {
|
||||
animation: highlight-fade 3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes highlight-fade {
|
||||
from {
|
||||
background-color: oklch(from var(--color-secondary) l c h / 0.25);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -186,7 +186,6 @@ const props = defineProps<{
|
||||
logExpression?: string;
|
||||
metricExpression?: string;
|
||||
eventExpression?: string;
|
||||
dispatcherId?: number;
|
||||
};
|
||||
}>();
|
||||
|
||||
|
||||
@@ -10,26 +10,10 @@
|
||||
readonly
|
||||
disabled
|
||||
class="input join-item w-full font-mono"
|
||||
:class="
|
||||
cloudStatusError === 'auth'
|
||||
? 'input-error'
|
||||
: cloudStatusError === 'unavailable'
|
||||
? 'input-warning'
|
||||
: 'input-success'
|
||||
"
|
||||
:class="cloudStatusError ? 'input-error' : 'input-success'"
|
||||
/>
|
||||
<span
|
||||
class="join-item btn pointer-events-none"
|
||||
:class="
|
||||
cloudStatusError === 'auth'
|
||||
? 'btn-error'
|
||||
: cloudStatusError === 'unavailable'
|
||||
? 'btn-warning'
|
||||
: 'btn-success'
|
||||
"
|
||||
>
|
||||
<mdi:alert-circle v-if="cloudStatusError === 'auth'" class="text-lg" />
|
||||
<mdi:cloud-off-outline v-else-if="cloudStatusError === 'unavailable'" class="text-lg" />
|
||||
<span class="join-item btn pointer-events-none" :class="cloudStatusError ? 'btn-error' : 'btn-success'">
|
||||
<mdi:alert-circle v-if="cloudStatusError" class="text-lg" />
|
||||
<mdi:check v-else class="text-lg" />
|
||||
</span>
|
||||
</div>
|
||||
@@ -40,14 +24,9 @@
|
||||
<span class="text-base-content/60 text-sm">{{ $t("notifications.destination-form.cloud-checking") }}</span>
|
||||
</div>
|
||||
<div v-else-if="cloudStatusError" class="mt-3">
|
||||
<div class="alert" :class="cloudStatusError === 'auth' ? 'alert-error' : 'alert-warning'">
|
||||
<mdi:alert-circle v-if="cloudStatusError === 'auth'" class="text-lg" />
|
||||
<mdi:cloud-off-outline v-else class="text-lg" />
|
||||
<span>{{
|
||||
cloudStatusError === "auth"
|
||||
? $t("notifications.destination-form.cloud-relink")
|
||||
: $t("notifications.destination-form.cloud-unavailable")
|
||||
}}</span>
|
||||
<div class="alert alert-error">
|
||||
<mdi:alert-circle class="text-lg" />
|
||||
<span>{{ $t("notifications.destination-form.cloud-relink") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="cloudStatus" class="mt-3 space-y-3">
|
||||
@@ -112,16 +91,42 @@ const { destination, close } = defineProps<{
|
||||
}>();
|
||||
|
||||
const callbackUrl = `${window.location.origin}${withBase("/")}`;
|
||||
const cloudLinkUrl = `${__CLOUD_URL__}/link?appUrl=${encodeURIComponent(callbackUrl)}&from=notifications`;
|
||||
const cloudLinkUrl = `${__CLOUD_URL__}/link?appUrl=${encodeURIComponent(callbackUrl)}`;
|
||||
const cloudSettingsUrl = `${__CLOUD_URL__}/settings`;
|
||||
|
||||
const { cloudStatus, cloudStatusError, isLoadingCloudStatus, fetchCloudStatus } = useCloudConfig();
|
||||
// Cloud status
|
||||
interface CloudStatus {
|
||||
user: { email: string; name: string };
|
||||
plan: { name: string; events_per_month: number; retention_days: number };
|
||||
usage: { events_used: number; events_limit: number; period: string };
|
||||
}
|
||||
|
||||
const cloudStatus = ref<CloudStatus | null>(null);
|
||||
const cloudStatusError = ref(false);
|
||||
const isLoadingCloudStatus = ref(false);
|
||||
|
||||
const usagePercent = computed(() => {
|
||||
if (!cloudStatus.value) return 0;
|
||||
return (cloudStatus.value.usage.events_used / cloudStatus.value.usage.events_limit) * 100;
|
||||
});
|
||||
|
||||
async function fetchCloudStatus() {
|
||||
isLoadingCloudStatus.value = true;
|
||||
cloudStatusError.value = false;
|
||||
try {
|
||||
const res = await fetch(withBase("/api/cloud/status"));
|
||||
if (!res.ok) {
|
||||
cloudStatusError.value = true;
|
||||
return;
|
||||
}
|
||||
cloudStatus.value = await res.json();
|
||||
} catch {
|
||||
cloudStatusError.value = true;
|
||||
} finally {
|
||||
isLoadingCloudStatus.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (destination?.prefix) {
|
||||
fetchCloudStatus();
|
||||
}
|
||||
|
||||
@@ -27,10 +27,7 @@
|
||||
<li>
|
||||
<a @click="editDestination">{{ $t("notifications.destination.edit") }}</a>
|
||||
</li>
|
||||
<li v-if="destination.type !== 'cloud'">
|
||||
<a @click="duplicateDestination">{{ $t("notifications.destination.duplicate") }}</a>
|
||||
</li>
|
||||
<li v-if="destination.type !== 'cloud'">
|
||||
<li>
|
||||
<a class="text-error" @click="deleteDestination">{{ $t("notifications.destination.delete") }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -64,21 +61,6 @@ function editDestination() {
|
||||
);
|
||||
}
|
||||
|
||||
async function duplicateDestination() {
|
||||
await fetch(withBase("/api/notifications/dispatchers"), {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: `Copy of ${destination.name}`,
|
||||
type: destination.type,
|
||||
url: destination.url,
|
||||
template: destination.template,
|
||||
headers: destination.headers,
|
||||
}),
|
||||
});
|
||||
onUpdated?.();
|
||||
}
|
||||
|
||||
async function deleteDestination() {
|
||||
await fetch(withBase(`/api/notifications/dispatchers/${destination.id}`), { method: "DELETE" });
|
||||
onUpdated?.();
|
||||
|
||||
@@ -2,33 +2,30 @@
|
||||
<div class="space-y-4 p-4">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl font-bold">
|
||||
<template v-if="type === 'cloud'">
|
||||
{{ $t("notifications.destination-form.cloud-title") }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{
|
||||
isEditing
|
||||
? $t("notifications.destination-form.edit-title")
|
||||
: $t("notifications.destination-form.create-title")
|
||||
}}
|
||||
</template>
|
||||
{{
|
||||
isEditing
|
||||
? $t("notifications.destination-form.edit-title")
|
||||
: $t("notifications.destination-form.create-title")
|
||||
}}
|
||||
</h2>
|
||||
<p class="text-base-content/60">
|
||||
<template v-if="type === 'cloud'">
|
||||
{{ $t("notifications.destination-form.cloud-description") }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t("notifications.destination-form.description") }}
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-base-content/60">{{ $t("notifications.destination-form.description") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Type Selection (only when creating) -->
|
||||
<fieldset v-if="!isEditing" class="fieldset">
|
||||
<!-- Link Success Alert -->
|
||||
<div v-if="showLinkSuccess" class="alert alert-success">
|
||||
<mdi:check-circle class="text-lg" />
|
||||
<div>
|
||||
<div class="font-semibold">{{ $t("notifications.cloud-link-success.title") }}</div>
|
||||
<div class="text-sm">{{ $t("notifications.cloud-link-success.message") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Type Selection -->
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-lg">{{ $t("notifications.destination-form.type") }}</legend>
|
||||
<div class="space-y-3">
|
||||
<label
|
||||
class="card card-border cursor-pointer transition-colors"
|
||||
class="card card-border 20 cursor-pointer transition-colors"
|
||||
:class="type === 'webhook' ? 'border-primary bg-primary/10' : ''"
|
||||
>
|
||||
<div class="card-body flex-row items-center gap-3 p-4">
|
||||
@@ -42,21 +39,26 @@
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
class="card card-border cursor-pointer transition-colors"
|
||||
class="card card-border border-base-content/20 transition-colors"
|
||||
:class="[
|
||||
type === 'cloud' ? 'border-primary bg-primary/10' : '',
|
||||
isCloudLinked ? 'cursor-not-allowed opacity-50' : '',
|
||||
hasExistingCloudDestination && type !== 'cloud' ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
|
||||
]"
|
||||
>
|
||||
<div class="card-body flex-row items-center gap-3 p-4">
|
||||
<input type="radio" v-model="type" value="cloud" class="radio radio-primary" :disabled="isCloudLinked" />
|
||||
<input
|
||||
type="radio"
|
||||
v-model="type"
|
||||
value="cloud"
|
||||
class="radio radio-primary"
|
||||
:disabled="hasExistingCloudDestination && type !== 'cloud'"
|
||||
/>
|
||||
<div>
|
||||
<div class="font-semibold">{{ $t("notifications.destination-form.cloud-title") }}</div>
|
||||
<div class="text-base-content/60 text-sm">
|
||||
{{ $t("notifications.destination-form.cloud-description") }}
|
||||
</div>
|
||||
<div v-if="isCloudLinked" class="text-success mt-1 text-xs">
|
||||
<mdi:check class="inline" />
|
||||
<div v-if="hasExistingCloudDestination && type !== 'cloud'" class="text-warning mt-1 text-xs">
|
||||
{{ $t("notifications.destination-form.cloud-exists") }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,17 +84,25 @@ import type { Dispatcher } from "@/types/notifications";
|
||||
import WebhookDestinationForm from "./WebhookDestinationForm.vue";
|
||||
import CloudDestinationForm from "./CloudDestinationForm.vue";
|
||||
|
||||
const { close, onCreated, destination } = defineProps<{
|
||||
const {
|
||||
close,
|
||||
onCreated,
|
||||
destination,
|
||||
existingDispatchers = [],
|
||||
showLinkSuccess = false,
|
||||
} = defineProps<{
|
||||
close?: () => void;
|
||||
onCreated?: () => void;
|
||||
destination?: Dispatcher;
|
||||
existingDispatchers?: Dispatcher[];
|
||||
showLinkSuccess?: boolean;
|
||||
}>();
|
||||
|
||||
const isEditing = !!destination;
|
||||
const type = ref<"webhook" | "cloud">((destination?.type as "webhook" | "cloud") ?? "webhook");
|
||||
|
||||
const { cloudConfig, fetchCloudConfig } = useCloudConfig();
|
||||
const isCloudLinked = computed(() => !!cloudConfig.value?.linked);
|
||||
|
||||
onMounted(() => fetchCloudConfig());
|
||||
const hasExistingCloudDestination = computed(() => {
|
||||
const others = isEditing ? existingDispatchers.filter((d) => d.id !== destination!.id) : existingDispatchers;
|
||||
return others.some((d) => d.type === "cloud");
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<p class="text-base-content/50 mt-1 text-xs">
|
||||
{{
|
||||
$t("notifications.alert-form.event-fields-hint", {
|
||||
fields: "name (start, stop, die, restart, health_status), attributes (healthStatus, exitCode, signal, etc.)",
|
||||
fields: "name (start, stop, die, restart, health_status), attributes (exitCode, signal, etc.)",
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-5 px-4 py-4 md:px-8">
|
||||
<section class="flex items-center gap-4">
|
||||
<CloudSearchInline class="hidden max-w-sm flex-1 md:flex" />
|
||||
<Links class="ml-auto">
|
||||
<section>
|
||||
<Links>
|
||||
<template #more-items>
|
||||
<Tag class="font-mono">{{ config.version }}</Tag>
|
||||
<Tag>{{ config.version }}</Tag>
|
||||
</template>
|
||||
</Links>
|
||||
</section>
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
<section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
|
||||
<header
|
||||
v-if="$slots.header"
|
||||
data-testid="scrollable-header"
|
||||
class="border-base-content/10 bg-base-200 sticky top-[var(--mobile-nav-height)] z-20 border-b py-0.5 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0 md:py-2"
|
||||
class="border-base-content/10 bg-base-200 sticky top-[calc(55px+env(safe-area-inset-top))] z-20 border-b py-0.5 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0 md:py-2"
|
||||
>
|
||||
<slot name="header"></slot>
|
||||
</header>
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { beforeEach, describe, expect, test } from "vitest";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import Search from "./Search.vue";
|
||||
import { useSearchFilter } from "@/composable/search";
|
||||
|
||||
const search = useSearchFilter();
|
||||
|
||||
function mountSearch() {
|
||||
search.showSearch.value = true;
|
||||
return mount(Search, {
|
||||
global: { plugins: [createI18n({})] },
|
||||
});
|
||||
}
|
||||
|
||||
describe("<Search />", () => {
|
||||
beforeEach(() => {
|
||||
search.resetSearch();
|
||||
});
|
||||
|
||||
test("flags an invalid regex with a warning style", async () => {
|
||||
const wrapper = mountSearch();
|
||||
search.searchQueryFilter.value = "valid";
|
||||
await nextTick();
|
||||
expect(wrapper.find(".input").classes()).not.toContain("input-warning");
|
||||
|
||||
search.searchQueryFilter.value = "[";
|
||||
await nextTick();
|
||||
expect(wrapper.find(".input").classes()).toContain("input-warning");
|
||||
});
|
||||
|
||||
test("binds the input to the shared search filter", async () => {
|
||||
const wrapper = mountSearch();
|
||||
await wrapper.find("input").setValue("abc");
|
||||
expect(search.searchQueryFilter.value).toBe("abc");
|
||||
});
|
||||
|
||||
test("toggles the inverse filter", async () => {
|
||||
const wrapper = mountSearch();
|
||||
expect(search.inverseFilter.value).toBe(false);
|
||||
await wrapper.find("button").trigger("click");
|
||||
expect(search.inverseFilter.value).toBe(true);
|
||||
});
|
||||
|
||||
test("escape resets the search", async () => {
|
||||
const wrapper = mountSearch();
|
||||
search.searchQueryFilter.value = "abc";
|
||||
await wrapper.find("input").trigger("keyup.esc");
|
||||
expect(search.searchQueryFilter.value).toBe("");
|
||||
expect(search.showSearch.value).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<transition name="slide">
|
||||
<div class="fixed z-50 flex w-full justify-end p-2" v-show="showSearch" ref="container" :style="style">
|
||||
<div
|
||||
class="fixed z-50 flex w-full justify-end p-2"
|
||||
v-show="showSearch"
|
||||
v-if="search"
|
||||
ref="container"
|
||||
:style="style"
|
||||
>
|
||||
<div class="input input-primary flex items-center shadow-lg" :class="!isValidQuery ? 'input-warning' : ''">
|
||||
<mdi:magnify />
|
||||
<input
|
||||
@@ -11,15 +17,6 @@
|
||||
v-model="searchQueryFilter"
|
||||
@keyup.esc="resetSearch()"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-circle btn-xs"
|
||||
:class="inverseFilter ? 'btn-error' : 'btn-ghost'"
|
||||
@click="toggleInverse()"
|
||||
:title="inverseFilter ? $t('toolbar.inverse-on') : $t('toolbar.inverse-off')"
|
||||
>
|
||||
<mdi:filter-off-outline v-if="inverseFilter" />
|
||||
<mdi:filter-outline v-else />
|
||||
</button>
|
||||
<a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,12 +26,11 @@
|
||||
<script lang="ts" setup>
|
||||
const input = ref<HTMLInputElement>();
|
||||
const container = ref<HTMLDivElement>();
|
||||
const { searchQueryFilter, showSearch, resetSearch, isValidQuery, inverseFilter, toggleInverse } = useSearchFilter();
|
||||
const { searchQueryFilter, showSearch, resetSearch, isValidQuery } = useSearchFilter();
|
||||
|
||||
const { style } = useDraggable(container);
|
||||
|
||||
onKeyStroke("f", (e) => {
|
||||
if (!search.value) return;
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
showSearch.value = true;
|
||||
nextTick(() => input.value?.focus() || input.value?.select());
|
||||
|
||||
@@ -1,14 +1,25 @@
|
||||
<template>
|
||||
<aside class="fixed flex h-screen w-[inherit] flex-col gap-4 p-3" data-testid="navigation">
|
||||
<h1>
|
||||
<router-link :to="{ name: '/' }" class="flex w-full items-center gap-2.5 overflow-hidden text-4xl font-thin">
|
||||
<Logo class="h-11 w-11 shrink-0" />
|
||||
<router-link :to="{ name: '/' }" class="flex w-full items-center gap-4 overflow-hidden text-4xl font-thin">
|
||||
<Logo class="h-14 w-14 shrink-0" />
|
||||
Dozzle
|
||||
</router-link>
|
||||
|
||||
<small class="mt-4 block text-sm font-light" v-if="hostname">{{ hostname }}</small>
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="input input-sm hover:border-primary mt-2 inline-flex w-auto cursor-pointer items-center gap-2 self-start font-light"
|
||||
@click="$emit('search')"
|
||||
:title="$t('tooltip.search')"
|
||||
data-testid="search"
|
||||
>
|
||||
<mdi:magnify />
|
||||
{{ $t("placeholder.search") }}
|
||||
<key-shortcut char="k" class="text-base-content/70"></key-shortcut>
|
||||
</button>
|
||||
|
||||
<SideMenu class="flex-1" />
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -1,163 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { flushPromises, mount } from "@vue/test-utils";
|
||||
import { beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import WelcomeModal from "./WelcomeModal.vue";
|
||||
|
||||
vi.mock("vue-router");
|
||||
|
||||
vi.mock("@/stores/config", () => ({
|
||||
__esModule: true,
|
||||
default: { base: "" },
|
||||
withBase: (path: string) => path,
|
||||
}));
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: "en",
|
||||
fallbackLocale: "en",
|
||||
missingWarn: false,
|
||||
fallbackWarn: false,
|
||||
messages: {
|
||||
en: {
|
||||
cloud: {
|
||||
welcome: {
|
||||
"create-alerts": "Turn on selected signals",
|
||||
signals: {
|
||||
exited: "Container exited with an error",
|
||||
"exited-desc": "Fires when a container stops with a non-zero exit code.",
|
||||
unhealthy: "Container became unhealthy",
|
||||
"unhealthy-desc": "Fires when a container's healthcheck transitions to unhealthy.",
|
||||
oom: "Container was killed by the kernel (OOM)",
|
||||
"oom-desc": "Fires when Docker reports an out-of-memory kill.",
|
||||
restart: "Container restarted",
|
||||
"restart-desc": "Off by default — noisy on its own; Cloud also uses this for loop detection.",
|
||||
disk: "Disk space running low on any volume",
|
||||
"disk-desc": "Fires when any mounted volume is over 85% full.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function mountModal() {
|
||||
return mount(WelcomeModal, {
|
||||
global: {
|
||||
plugins: [i18n],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
describe("<WelcomeModal /> Create First Alert", () => {
|
||||
const pushSpy = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
// jsdom's HTMLDialogElement lacks .close()/.showModal() — stub them so WelcomeModal's close() works.
|
||||
if (!HTMLDialogElement.prototype.close) {
|
||||
HTMLDialogElement.prototype.close = function () {};
|
||||
}
|
||||
if (!HTMLDialogElement.prototype.showModal) {
|
||||
HTMLDialogElement.prototype.showModal = function () {};
|
||||
}
|
||||
vi.mocked(useRouter).mockReturnValue({
|
||||
push: pushSpy,
|
||||
} as unknown as ReturnType<typeof useRouter>);
|
||||
pushSpy.mockReset();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
async function openAndAdvance(wrapper: ReturnType<typeof mountModal>) {
|
||||
// open() seeds defaultOn signals
|
||||
(wrapper.vm as unknown as { open: () => void }).open();
|
||||
const vm = wrapper.vm as unknown as { step: "step1" | "step2" };
|
||||
vm.step = "step2";
|
||||
await wrapper.vm.$nextTick();
|
||||
}
|
||||
|
||||
test("POSTs one rule per checked default signal and routes to /notifications", async () => {
|
||||
const fetchMock = vi.fn(async (url: RequestInfo | URL, _init?: RequestInit) => {
|
||||
const u = String(url);
|
||||
if (u.includes("/api/notifications/dispatchers")) {
|
||||
return new Response(JSON.stringify([{ id: 7, type: "cloud", name: "Dozzle Cloud" }]), { status: 200 });
|
||||
}
|
||||
if (u.includes("/api/notifications/rules")) {
|
||||
return new Response(JSON.stringify({ id: 42 }), { status: 200 });
|
||||
}
|
||||
return new Response("{}", { status: 200 });
|
||||
});
|
||||
vi.stubGlobal("fetch", fetchMock);
|
||||
|
||||
const wrapper = mountModal();
|
||||
await openAndAdvance(wrapper);
|
||||
|
||||
const cta = wrapper.findAll("button").find((b) => b.text().toLowerCase().includes("turn on"));
|
||||
expect(cta).toBeDefined();
|
||||
await cta!.trigger("click");
|
||||
await flushPromises();
|
||||
|
||||
const ruleCalls = fetchMock.mock.calls.filter((c) => String(c[0]).includes("/api/notifications/rules"));
|
||||
expect(ruleCalls).toHaveLength(4); // exited + unhealthy + oom + disk on by default; restart off
|
||||
|
||||
const bodies = ruleCalls.map((c) => JSON.parse((c[1] as RequestInit).body as string));
|
||||
const eventExpressions = bodies.map((b) => b.eventExpression).filter(Boolean);
|
||||
expect(eventExpressions).toContain('name == "die" && !(attributes["exitCode"] in ["0", "130", "143", "137"])');
|
||||
expect(eventExpressions).toContain('name == "health_status" && attributes["healthStatus"] == "unhealthy"');
|
||||
expect(eventExpressions).toContain('name == "oom"');
|
||||
expect(eventExpressions).not.toContain('name == "restart"');
|
||||
|
||||
const metricExpressions = bodies.map((b) => b.metricExpression).filter(Boolean);
|
||||
expect(metricExpressions).toContain("any(mounts, .usedPercent >= 85)");
|
||||
|
||||
// disk rule should carry its own cooldown/sampleWindow; event rules should remain at 0
|
||||
const diskBody = bodies.find((b) => b.metricExpression === "any(mounts, .usedPercent >= 85)");
|
||||
expect(diskBody).toMatchObject({
|
||||
enabled: true,
|
||||
dispatcherId: 7,
|
||||
cooldown: 3600,
|
||||
sampleWindow: 60,
|
||||
containerExpression: "true",
|
||||
eventExpression: "",
|
||||
});
|
||||
|
||||
// event-based POSTs use cloud dispatcher id with no cooldown
|
||||
for (const b of bodies.filter((x) => x.eventExpression)) {
|
||||
expect(b).toMatchObject({
|
||||
enabled: true,
|
||||
dispatcherId: 7,
|
||||
cooldown: 0,
|
||||
sampleWindow: 0,
|
||||
containerExpression: "true",
|
||||
metricExpression: "",
|
||||
});
|
||||
}
|
||||
|
||||
expect(pushSpy).toHaveBeenCalledWith({ path: "/notifications" });
|
||||
});
|
||||
|
||||
test("falls back to ?action=create-alert when POST fails", async () => {
|
||||
const fetchMock = vi.fn(async (url: RequestInfo | URL, _init?: RequestInit) => {
|
||||
const u = String(url);
|
||||
if (u.includes("/api/notifications/dispatchers")) {
|
||||
return new Response(JSON.stringify([{ id: 7, type: "cloud", name: "Dozzle Cloud" }]), { status: 200 });
|
||||
}
|
||||
if (u.includes("/api/notifications/rules")) {
|
||||
return new Response("{}", { status: 500 });
|
||||
}
|
||||
return new Response("{}", { status: 200 });
|
||||
});
|
||||
vi.stubGlobal("fetch", fetchMock);
|
||||
|
||||
const wrapper = mountModal();
|
||||
await openAndAdvance(wrapper);
|
||||
|
||||
const cta = wrapper.findAll("button").find((b) => b.text().toLowerCase().includes("turn on"));
|
||||
await cta!.trigger("click");
|
||||
await flushPromises();
|
||||
|
||||
expect(pushSpy).toHaveBeenCalledWith({ path: "/notifications", query: { action: "create-alert" } });
|
||||
});
|
||||
});
|
||||
@@ -1,324 +0,0 @@
|
||||
<template>
|
||||
<dialog ref="modal" class="modal" @close="onClose">
|
||||
<div class="modal-box max-w-md p-8">
|
||||
<!-- Step 1: Feedback -->
|
||||
<template v-if="step === 'step1'">
|
||||
<div class="flex flex-col items-center gap-2 text-center">
|
||||
<mdi:check-circle class="text-success text-4xl" />
|
||||
<h3 class="text-xl font-bold">{{ $t("cloud.welcome.title") }}</h3>
|
||||
<p class="text-base-content/60 text-sm">{{ $t("cloud.welcome.subtitle") }}</p>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<p class="mb-3 text-sm font-medium">{{ $t("cloud.welcome.question") }}</p>
|
||||
|
||||
<textarea
|
||||
v-model="intent"
|
||||
class="textarea textarea-bordered w-full text-sm"
|
||||
rows="3"
|
||||
:placeholder="$t('cloud.welcome.placeholder')"
|
||||
></textarea>
|
||||
|
||||
<p class="text-base-content/60 mt-3 mb-2 text-xs">{{ $t("cloud.welcome.or-pick") }}</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="option in chipOptions"
|
||||
:key="option.value"
|
||||
class="btn btn-sm"
|
||||
:class="selectedOptions.has(option.value) ? 'btn-primary' : 'btn-outline'"
|
||||
@click="toggleOption(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary btn-block mt-6" :disabled="submitting" @click="submitFeedback">
|
||||
<span v-if="submitting" class="loading loading-spinner loading-xs"></span>
|
||||
{{ $t("cloud.welcome.get-started") }}
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-block btn-sm mt-1" :disabled="submitting" @click="skipFeedback">
|
||||
{{ $t("cloud.welcome.skip") }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Step 2: Triage signal checklist -->
|
||||
<template v-else-if="step === 'step2'">
|
||||
<h3 class="text-xl font-bold">{{ $t("cloud.welcome.step2-title") }}</h3>
|
||||
<p class="text-base-content/60 mt-2 text-sm">{{ $t("cloud.welcome.step2-body") }}</p>
|
||||
|
||||
<div class="mt-5 space-y-3">
|
||||
<label
|
||||
v-for="signal in signals"
|
||||
:key="signal.key"
|
||||
class="border-base-300 hover:border-primary/40 flex cursor-pointer gap-3 rounded-lg border p-3"
|
||||
>
|
||||
<input
|
||||
v-model="selectedSignals"
|
||||
type="checkbox"
|
||||
:value="signal.key"
|
||||
class="checkbox checkbox-primary checkbox-sm mt-0.5"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-semibold">{{ signal.label }}</p>
|
||||
<p class="text-base-content/60 text-xs">{{ signal.description }}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p class="text-base-content/60 mt-4 text-xs">{{ $t("cloud.welcome.footer") }}</p>
|
||||
|
||||
<button
|
||||
class="btn btn-primary btn-block mt-5"
|
||||
:disabled="creating || selectedSignals.length === 0"
|
||||
@click="createDefaultAlerts"
|
||||
>
|
||||
<span v-if="creating" class="loading loading-spinner loading-xs"></span>
|
||||
{{ $t("cloud.welcome.create-alerts") }}
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-block btn-sm mt-1" :disabled="creating" @click="close">
|
||||
{{ $t("cloud.welcome.later") }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button></button>
|
||||
</form>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { showToast } = useToast();
|
||||
|
||||
const modal = ref<HTMLDialogElement>();
|
||||
const step = ref<"step1" | "step2">("step1");
|
||||
const intent = ref("");
|
||||
const selectedOptions = ref(new Set<string>());
|
||||
const submitting = ref(false);
|
||||
const creating = ref(false);
|
||||
let feedbackSent = false;
|
||||
|
||||
const chipOptions = [
|
||||
{ value: "error_alerts", label: t("cloud.welcome.chip-alerts") },
|
||||
{ value: "ai_assistant", label: t("cloud.welcome.chip-assistant") },
|
||||
{ value: "search_logs", label: t("cloud.welcome.chip-search-logs") },
|
||||
{ value: "remote_access", label: t("cloud.welcome.chip-remote-access") },
|
||||
{ value: "log_digests", label: t("cloud.welcome.chip-digests") },
|
||||
{ value: "something_else", label: t("cloud.welcome.chip-other") },
|
||||
];
|
||||
|
||||
type SignalKey = "exited" | "unhealthy" | "oom" | "restart" | "disk";
|
||||
type SignalKind = "event" | "metric";
|
||||
|
||||
interface SignalDef {
|
||||
key: SignalKey;
|
||||
kind: SignalKind;
|
||||
label: string;
|
||||
description: string;
|
||||
// ruleName is intentionally English/stable so the rule stays recognizable
|
||||
// if the user later switches locale.
|
||||
ruleName: string;
|
||||
expression: string;
|
||||
defaultOn: boolean;
|
||||
}
|
||||
|
||||
const signals = computed<SignalDef[]>(() => [
|
||||
{
|
||||
key: "exited",
|
||||
kind: "event",
|
||||
label: t("cloud.welcome.signals.exited"),
|
||||
description: t("cloud.welcome.signals.exited-desc"),
|
||||
ruleName: "Container exited with an error",
|
||||
// Ignore clean/graceful shutdowns: 0 (success), 130 (SIGINT), 143 (SIGTERM), 137 (SIGKILL).
|
||||
// These commonly fire on `docker stop`, Ctrl+C, and Watchtower update cycles, which are
|
||||
// not errors. Still alerts on genuine error exits (1, 2, 125, ...) and crash-loops.
|
||||
expression: 'name == "die" && !(attributes["exitCode"] in ["0", "130", "143", "137"])',
|
||||
defaultOn: true,
|
||||
},
|
||||
{
|
||||
key: "unhealthy",
|
||||
kind: "event",
|
||||
label: t("cloud.welcome.signals.unhealthy"),
|
||||
description: t("cloud.welcome.signals.unhealthy-desc"),
|
||||
ruleName: "Container became unhealthy",
|
||||
expression: 'name == "health_status" && attributes["healthStatus"] == "unhealthy"',
|
||||
defaultOn: true,
|
||||
},
|
||||
{
|
||||
key: "oom",
|
||||
kind: "event",
|
||||
label: t("cloud.welcome.signals.oom"),
|
||||
description: t("cloud.welcome.signals.oom-desc"),
|
||||
ruleName: "Container killed (OOM)",
|
||||
expression: 'name == "oom"',
|
||||
defaultOn: true,
|
||||
},
|
||||
{
|
||||
key: "restart",
|
||||
kind: "event",
|
||||
label: t("cloud.welcome.signals.restart"),
|
||||
description: t("cloud.welcome.signals.restart-desc"),
|
||||
ruleName: "Container restarted",
|
||||
expression: 'name == "restart"',
|
||||
defaultOn: false,
|
||||
},
|
||||
{
|
||||
key: "disk",
|
||||
kind: "metric",
|
||||
label: t("cloud.welcome.signals.disk"),
|
||||
description: t("cloud.welcome.signals.disk-desc"),
|
||||
ruleName: "Volume running out of space",
|
||||
expression: "any(mounts, .usedPercent >= 85)",
|
||||
defaultOn: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedSignals = ref<SignalKey[]>([]);
|
||||
|
||||
function toggleOption(value: string) {
|
||||
const next = new Set(selectedOptions.value);
|
||||
if (next.has(value)) {
|
||||
next.delete(value);
|
||||
} else {
|
||||
next.add(value);
|
||||
}
|
||||
selectedOptions.value = next;
|
||||
}
|
||||
|
||||
async function postFeedback(skipped: boolean) {
|
||||
try {
|
||||
await fetch(withBase("/api/cloud/feedback"), {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
source: "welcome_modal",
|
||||
intent: skipped ? undefined : intent.value || undefined,
|
||||
selectedOptions: skipped ? undefined : Array.from(selectedOptions.value),
|
||||
skipped,
|
||||
}),
|
||||
});
|
||||
} catch {
|
||||
// Feedback failure should not block the user
|
||||
}
|
||||
}
|
||||
|
||||
const onNotificationsPage = computed(() => route.path === "/notifications");
|
||||
|
||||
async function submitFeedback() {
|
||||
submitting.value = true;
|
||||
feedbackSent = true;
|
||||
await postFeedback(false);
|
||||
submitting.value = false;
|
||||
if (onNotificationsPage.value) {
|
||||
await createDefaultAlerts();
|
||||
} else {
|
||||
step.value = "step2";
|
||||
}
|
||||
}
|
||||
|
||||
async function skipFeedback() {
|
||||
submitting.value = true;
|
||||
feedbackSent = true;
|
||||
await postFeedback(true);
|
||||
submitting.value = false;
|
||||
if (onNotificationsPage.value) {
|
||||
// User explicitly skipped — don't silently create defaults on their behalf.
|
||||
// They're already on the notifications page; just dismiss.
|
||||
close();
|
||||
} else {
|
||||
step.value = "step2";
|
||||
}
|
||||
}
|
||||
|
||||
let abortController: AbortController | null = null;
|
||||
|
||||
async function createDefaultAlerts() {
|
||||
if (creating.value) return;
|
||||
creating.value = true;
|
||||
abortController?.abort();
|
||||
abortController = new AbortController();
|
||||
const signal = abortController.signal;
|
||||
const chosen = signals.value.filter((s) => selectedSignals.value.includes(s.key));
|
||||
try {
|
||||
const dispatchersRes = await fetch(withBase("/api/notifications/dispatchers"), { signal });
|
||||
if (!dispatchersRes.ok) throw new Error("dispatchers fetch failed");
|
||||
const dispatchers: Array<{ id: number; type: string }> = await dispatchersRes.json();
|
||||
const cloud = dispatchers.find((d) => d.type === "cloud");
|
||||
if (!cloud) throw new Error("cloud dispatcher missing");
|
||||
|
||||
// Fire rule POSTs in parallel. Partial failure is not cleaned up — if one
|
||||
// rejects, the earlier ones are already saved and the user lands on the
|
||||
// fallback toast path. Acceptable for a welcome modal; the user can edit
|
||||
// or delete rules from /notifications.
|
||||
await Promise.all(
|
||||
chosen.map((s) =>
|
||||
fetch(withBase("/api/notifications/rules"), {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
signal,
|
||||
body: JSON.stringify({
|
||||
name: s.ruleName,
|
||||
enabled: true,
|
||||
dispatcherId: cloud.id,
|
||||
logExpression: "",
|
||||
containerExpression: "true",
|
||||
eventExpression: s.kind === "event" ? s.expression : "",
|
||||
metricExpression: s.kind === "metric" ? s.expression : "",
|
||||
// Metric alerts: don't re-fire more than once an hour per container,
|
||||
// and require the threshold to hold for the default sample window.
|
||||
cooldown: s.kind === "metric" ? 3600 : 0,
|
||||
sampleWindow: s.kind === "metric" ? 60 : 0,
|
||||
}),
|
||||
}).then((res) => {
|
||||
if (!res.ok) throw new Error("rule POST failed");
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
close();
|
||||
router.push({ path: "/notifications" });
|
||||
} catch (err) {
|
||||
if ((err as Error)?.name === "AbortError") return;
|
||||
close();
|
||||
showToast(
|
||||
{
|
||||
type: "warning",
|
||||
message: t("notifications.default-alert-failed"),
|
||||
},
|
||||
{ expire: 6000 },
|
||||
);
|
||||
router.push({ path: "/notifications", query: { action: "create-alert" } });
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function open() {
|
||||
step.value = "step1";
|
||||
intent.value = "";
|
||||
selectedOptions.value = new Set();
|
||||
selectedSignals.value = signals.value.filter((s) => s.defaultOn).map((s) => s.key);
|
||||
feedbackSent = false;
|
||||
modal.value?.showModal();
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.value?.close();
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
abortController?.abort();
|
||||
});
|
||||
|
||||
function onClose() {
|
||||
if (step.value === "step1" && !feedbackSent) {
|
||||
feedbackSent = true;
|
||||
postFeedback(true);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<span class="json" :class="{ 'json-block': block }">
|
||||
<JsonValue :value="parsed" :indent="block ? 0 : -1" :highlight="highlight" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import JsonValue from "./JsonValue.vue";
|
||||
|
||||
const {
|
||||
value,
|
||||
highlight,
|
||||
block = true,
|
||||
} = defineProps<{
|
||||
value: unknown;
|
||||
highlight?: string;
|
||||
block?: boolean;
|
||||
}>();
|
||||
|
||||
const parsed = computed(() => {
|
||||
if (typeof value !== "string") return value;
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return value;
|
||||
try {
|
||||
return JSON.parse(trimmed);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/main.css";
|
||||
.json-block {
|
||||
@apply block font-mono break-all whitespace-pre-wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { describe, expect, test } from "vitest";
|
||||
import JsonText from "./JsonText.vue";
|
||||
|
||||
function mountText(text: string, highlight?: string) {
|
||||
return mount(JsonText, { props: { text, highlight } });
|
||||
}
|
||||
|
||||
describe("<JsonText />", () => {
|
||||
test("renders plain text without a highlight", () => {
|
||||
const wrapper = mountText("hello");
|
||||
expect(wrapper.text()).toBe("hello");
|
||||
expect(wrapper.find("mark").exists()).toBe(false);
|
||||
});
|
||||
|
||||
test("marks the matching substring", () => {
|
||||
const wrapper = mountText("hello", "ell");
|
||||
const marks = wrapper.findAll("mark");
|
||||
expect(marks).toHaveLength(1);
|
||||
expect(marks[0].text()).toBe("ell");
|
||||
expect(wrapper.text()).toBe("hello");
|
||||
});
|
||||
|
||||
test("matches case-insensitively", () => {
|
||||
const wrapper = mountText("Hello", "ELL");
|
||||
expect(wrapper.find("mark").text()).toBe("ell");
|
||||
});
|
||||
|
||||
test("treats regex metacharacters literally", () => {
|
||||
// Without escaping, "." would match every character; escaped it matches only dots.
|
||||
const wrapper = mountText("a.b.c", ".");
|
||||
const marks = wrapper.findAll("mark");
|
||||
expect(marks).toHaveLength(2);
|
||||
expect(marks.every((m) => m.text() === ".")).toBe(true);
|
||||
});
|
||||
|
||||
test("marks every occurrence", () => {
|
||||
const wrapper = mountText("xax", "x");
|
||||
expect(wrapper.findAll("mark")).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<template v-if="!highlight">{{ text }}</template>
|
||||
<template v-else>
|
||||
<template v-for="(part, i) in parts" :key="i">
|
||||
<mark v-if="part.match" class="bg-warning text-warning-content rounded px-0.5">{{ part.text }}</mark>
|
||||
<template v-else>{{ part.text }}</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { text, highlight } = defineProps<{
|
||||
text: string;
|
||||
highlight?: string;
|
||||
}>();
|
||||
|
||||
const parts = computed(() => {
|
||||
if (!highlight) return [{ text, match: false }];
|
||||
const pattern = highlight.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
|
||||
const re = new RegExp(pattern, "gi");
|
||||
const result: { text: string; match: boolean }[] = [];
|
||||
let last = 0;
|
||||
for (const m of text.matchAll(re)) {
|
||||
if (m.index! > last) result.push({ text: text.slice(last, m.index), match: false });
|
||||
result.push({ text: m[0], match: true });
|
||||
last = m.index! + m[0].length;
|
||||
}
|
||||
if (last < text.length) result.push({ text: text.slice(last), match: false });
|
||||
return result;
|
||||
});
|
||||
</script>
|
||||
@@ -1,73 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { describe, expect, test } from "vitest";
|
||||
import JsonValue from "./JsonValue.vue";
|
||||
|
||||
// indent < 0 forces the compact inline rendering, which is deterministic to assert.
|
||||
function inline(value: unknown, highlight?: string) {
|
||||
return mount(JsonValue, { props: { value, indent: -1, highlight } });
|
||||
}
|
||||
|
||||
// wrapper.text() drops inter-node whitespace, so compare structure without spaces.
|
||||
function compact(wrapper: ReturnType<typeof inline>) {
|
||||
return wrapper.text().replace(/\s+/g, "");
|
||||
}
|
||||
|
||||
describe("<JsonValue /> primitives", () => {
|
||||
test("null", () => {
|
||||
const wrapper = inline(null);
|
||||
expect(wrapper.text()).toBe("null");
|
||||
expect(wrapper.find(".json-null").exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("boolean", () => {
|
||||
expect(inline(true).text()).toBe("true");
|
||||
expect(inline(false).find(".json-boolean").exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("number", () => {
|
||||
const wrapper = inline(42);
|
||||
expect(wrapper.text()).toBe("42");
|
||||
expect(wrapper.find(".json-number").exists()).toBe(true);
|
||||
});
|
||||
|
||||
test("string is quoted", () => {
|
||||
const wrapper = inline("hi");
|
||||
expect(wrapper.text()).toBe('"hi"');
|
||||
expect(wrapper.find(".json-string").exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("<JsonValue /> structures", () => {
|
||||
test("empty array and object", () => {
|
||||
expect(inline([]).text()).toBe("[]");
|
||||
expect(inline({}).text()).toBe("{}");
|
||||
});
|
||||
|
||||
test("flat array", () => {
|
||||
expect(compact(inline([1, 2]))).toBe("[1,2]");
|
||||
});
|
||||
|
||||
test("flat object", () => {
|
||||
expect(compact(inline({ a: 1 }))).toBe('{"a":1}');
|
||||
});
|
||||
|
||||
test("nested object", () => {
|
||||
expect(compact(inline({ a: { b: 1 } }))).toBe('{"a":{"b":1}}');
|
||||
});
|
||||
|
||||
test("indent mode emits newline spans, inline mode does not", () => {
|
||||
const indented = mount(JsonValue, { props: { value: { a: 1 }, indent: 0 } });
|
||||
expect(indented.findAll(".json-newline").length).toBeGreaterThan(0);
|
||||
expect(inline({ a: 1 }).findAll(".json-newline")).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("<JsonValue /> highlight", () => {
|
||||
test("passes highlight down to string values", () => {
|
||||
const wrapper = inline("hello", "ell");
|
||||
expect(wrapper.find("mark").text()).toBe("ell");
|
||||
});
|
||||
});
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<template v-if="value === null">
|
||||
<span class="json-null">null</span>
|
||||
</template>
|
||||
<template v-else-if="typeof value === 'boolean'">
|
||||
<span class="json-boolean">{{ String(value) }}</span>
|
||||
</template>
|
||||
<template v-else-if="typeof value === 'number'">
|
||||
<span class="json-number">{{ value }}</span>
|
||||
</template>
|
||||
<template v-else-if="typeof value === 'string'">
|
||||
<span class="json-string">"<JsonText :text="value" :highlight="highlight" />"</span>
|
||||
</template>
|
||||
<template v-else-if="Array.isArray(value)">
|
||||
<template v-if="value.length === 0">
|
||||
<span>[]</span>
|
||||
</template>
|
||||
<template v-else-if="indent < 0">
|
||||
<span>[</span>
|
||||
<template v-for="(item, i) in value" :key="i">
|
||||
<JsonValue :value="item" :indent="indent" :highlight="highlight" />
|
||||
<span v-if="i < value.length - 1">, </span>
|
||||
</template>
|
||||
<span>]</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>[</span>
|
||||
<template v-for="(item, i) in value" :key="i">
|
||||
<span class="json-newline">{{ "\n" + pad(indent + 1) }}</span>
|
||||
<JsonValue :value="item" :indent="indent + 1" :highlight="highlight" />
|
||||
<span v-if="i < value.length - 1">,</span>
|
||||
</template>
|
||||
<span class="json-newline">{{ "\n" + pad(indent) }}</span>
|
||||
<span>]</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="typeof value === 'object'">
|
||||
<template v-if="entries.length === 0">
|
||||
<span>{}</span>
|
||||
</template>
|
||||
<template v-else-if="indent < 0">
|
||||
<span>{</span>
|
||||
<template v-for="([k, v], i) in entries" :key="k">
|
||||
<span class="json-key">"<JsonText :text="k" :highlight="highlight" />"</span><span>: </span>
|
||||
<JsonValue :value="v" :indent="indent" :highlight="highlight" />
|
||||
<span v-if="i < entries.length - 1">, </span>
|
||||
</template>
|
||||
<span>}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{</span>
|
||||
<template v-for="([k, v], i) in entries" :key="k">
|
||||
<span class="json-newline">{{ "\n" + pad(indent + 1) }}</span>
|
||||
<span class="json-key">"<JsonText :text="k" :highlight="highlight" />"</span><span>: </span>
|
||||
<JsonValue :value="v" :indent="indent + 1" :highlight="highlight" />
|
||||
<span v-if="i < entries.length - 1">,</span>
|
||||
</template>
|
||||
<span class="json-newline">{{ "\n" + pad(indent) }}</span>
|
||||
<span>}</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ String(value) }}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import JsonText from "./JsonText.vue";
|
||||
|
||||
const {
|
||||
value,
|
||||
indent = 0,
|
||||
highlight,
|
||||
} = defineProps<{
|
||||
value: unknown;
|
||||
indent?: number;
|
||||
highlight?: string;
|
||||
}>();
|
||||
|
||||
const entries = computed(() =>
|
||||
value && typeof value === "object" && !Array.isArray(value) ? Object.entries(value as Record<string, unknown>) : [],
|
||||
);
|
||||
|
||||
function pad(level: number): string {
|
||||
return " ".repeat(Math.max(level, 0));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/main.css";
|
||||
.json-key {
|
||||
@apply text-blue;
|
||||
}
|
||||
.json-string {
|
||||
@apply text-green;
|
||||
}
|
||||
.json-number {
|
||||
@apply text-orange;
|
||||
}
|
||||
.json-boolean {
|
||||
@apply text-purple;
|
||||
}
|
||||
.json-null {
|
||||
@apply text-red;
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
<ph:command v-if="isMac" class="size-4" />
|
||||
<ph:control-bold v-else class="size-4" />
|
||||
</template>
|
||||
<kbd class="kbd kbd-xs ml-0.5 uppercase">{{ char }}</kbd>
|
||||
<kbd class="uppercase">{{ char }}</kbd>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<nav class="border-base-content/20 bg-base-200 pt-safe fixed top-0 z-30 w-full border-b" data-testid="navigation">
|
||||
<div class="px-4 py-2">
|
||||
<nav class="border-base-content/20 bg-base-200 pt-safe fixed top-0 z-10 w-full border-b" data-testid="navigation">
|
||||
<div class="p-2">
|
||||
<div class="flex items-center">
|
||||
<router-link :to="{ name: '/' }">
|
||||
<Logo class="h-10" />
|
||||
|
||||
@@ -1,29 +1,16 @@
|
||||
<template>
|
||||
<dialog ref="panel" class="modal-right modal items-start outline-hidden backdrop:bg-none">
|
||||
<div class="modal-box" :width="maximized ? 'full' : width">
|
||||
<div class="modal-box" :width="width">
|
||||
<div class="pt-safe relative">
|
||||
<div class="absolute right-0 flex items-center gap-3">
|
||||
<button
|
||||
v-if="!isMobile"
|
||||
class="hover:text-base-content/60 cursor-pointer outline-hidden"
|
||||
type="button"
|
||||
:title="maximized ? $t('drawer.restore') : $t('drawer.maximize')"
|
||||
:aria-label="maximized ? $t('drawer.restore') : $t('drawer.maximize')"
|
||||
@click="maximized = !maximized"
|
||||
>
|
||||
<mdi:arrow-collapse v-if="maximized" />
|
||||
<mdi:arrow-expand v-else />
|
||||
<form method="dialog" class="absolute right-0">
|
||||
<button v-if="isMobile">
|
||||
<mdi:close />
|
||||
</button>
|
||||
<form method="dialog">
|
||||
<button v-if="isMobile" class="cursor-pointer">
|
||||
<mdi:close />
|
||||
</button>
|
||||
<button v-else class="swap hover:swap-active cursor-pointer outline-hidden">
|
||||
<mdi:keyboard-esc class="swap-off" />
|
||||
<mdi:close class="swap-on" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button v-else class="swap hover:swap-active outline-hidden">
|
||||
<mdi:keyboard-esc class="swap-off" />
|
||||
<mdi:close class="swap-on" />
|
||||
</button>
|
||||
</form>
|
||||
<slot v-if="open" :close="close"></slot>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,7 +24,6 @@ import { type DrawerWidth } from "@/composable/drawer";
|
||||
const panel = useTemplateRef<HTMLDialogElement>("panel");
|
||||
|
||||
const open = ref(false);
|
||||
const maximized = ref(false);
|
||||
const { width } = defineProps<{
|
||||
width: DrawerWidth;
|
||||
}>();
|
||||
@@ -49,7 +35,6 @@ function close() {
|
||||
defineExpose({
|
||||
open: () => {
|
||||
open.value = true;
|
||||
maximized.value = false;
|
||||
panel.value?.showModal();
|
||||
},
|
||||
close,
|
||||
@@ -70,10 +55,6 @@ useEventListener(panel, "close", () => (open.value = false));
|
||||
&[width="lg"] {
|
||||
@apply max-w-5xl;
|
||||
}
|
||||
|
||||
&[width="full"] {
|
||||
@apply w-full max-w-full;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-right[open] .modal-box {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="toast toast-end max-md:toast-center max-md:toast-bottom whitespace-normal max-md:w-full max-md:px-2">
|
||||
<div class="toast toast-end whitespace-normal max-md:end-auto max-md:m-0 max-md:max-w-full">
|
||||
<div
|
||||
class="alert max-w-xl shadow-sm max-md:w-full max-md:rounded-lg"
|
||||
class="alert max-w-xl shadow-sm max-md:rounded-none"
|
||||
v-for="{ toast, options: { timed } } in toasts"
|
||||
:key="toast.id"
|
||||
:class="{
|
||||
@@ -10,14 +10,14 @@
|
||||
'alert-warning': toast.type === 'warning',
|
||||
}"
|
||||
>
|
||||
<carbon:information class="size-5 shrink-0 stroke-current" v-if="toast.type === 'info'" />
|
||||
<carbon:warning class="size-5 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
|
||||
<carbon:warning class="size-5 shrink-0 stroke-current" v-else-if="toast.type === 'warning'" />
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-lg font-bold max-md:text-base" v-if="toast.title">{{ toast.title }}</h3>
|
||||
<div v-html="toast.message" class="max-md:text-sm [&>a]:underline"></div>
|
||||
<carbon:information class="size-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
|
||||
<carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
|
||||
<carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'warning'" />
|
||||
<div>
|
||||
<h3 class="text-lg font-bold" v-if="toast.title">{{ toast.title }}</h3>
|
||||
<div v-html="toast.message" class="[&>a]:underline"></div>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<div>
|
||||
<TimedButton
|
||||
v-if="timed"
|
||||
class="btn-primary btn-sm"
|
||||
|
||||
@@ -13,7 +13,6 @@ export interface AlertFormOptions {
|
||||
logExpression?: string;
|
||||
metricExpression?: string;
|
||||
eventExpression?: string;
|
||||
dispatcherId?: number;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -26,11 +25,11 @@ export function useAlertForm(options: AlertFormOptions) {
|
||||
const isEditing = computed(() => !!options.alert);
|
||||
const alertName = ref(options.alert?.name ?? options.prefill?.name ?? "");
|
||||
const containerExpression = ref(options.alert?.containerExpression ?? options.prefill?.containerExpression ?? "");
|
||||
const dispatcherId = ref(options.alert?.dispatcher?.id ?? options.prefill?.dispatcherId ?? -1);
|
||||
const dispatcherId = ref(options.alert?.dispatcher?.id ?? 0);
|
||||
const isSaving = ref(false);
|
||||
const saveError = ref<string | null>(null);
|
||||
|
||||
// Destinations (cloud dispatcher with id=0 is included by the backend when configured)
|
||||
// Destinations
|
||||
const destinations = ref<Dispatcher[]>([]);
|
||||
onMounted(async () => {
|
||||
const res = await fetch(withBase("/api/notifications/dispatchers"));
|
||||
@@ -55,7 +54,7 @@ export function useAlertForm(options: AlertFormOptions) {
|
||||
() =>
|
||||
alertName.value.trim() &&
|
||||
containerExpression.value.trim() &&
|
||||
dispatcherId.value >= 0 &&
|
||||
dispatcherId.value > 0 &&
|
||||
!containerResult.value?.error &&
|
||||
!isSaving.value,
|
||||
);
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import type { CloudConfig, CloudStatus } from "@/types/notifications";
|
||||
|
||||
// Shared state across all component instances
|
||||
const cloudConfig = ref<CloudConfig | null>(null);
|
||||
const cloudStatus = ref<CloudStatus | null>(null);
|
||||
const cloudStatusError = ref<"auth" | "unavailable" | false>(false);
|
||||
const isLoadingCloudStatus = ref(false);
|
||||
|
||||
async function fetchCloudConfig() {
|
||||
try {
|
||||
const res = await fetch(withBase("/api/cloud/config"));
|
||||
if (!res.ok) {
|
||||
cloudConfig.value = null;
|
||||
return;
|
||||
}
|
||||
cloudConfig.value = await res.json();
|
||||
} catch {
|
||||
cloudConfig.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Loaded once at module import (i.e. app boot). Every consumer reads the
|
||||
// shared `cloudConfig` ref — no per-component fetch.
|
||||
const initialLoad = fetchCloudConfig();
|
||||
|
||||
async function fetchCloudStatus() {
|
||||
if (!cloudConfig.value?.linked) return;
|
||||
isLoadingCloudStatus.value = true;
|
||||
cloudStatusError.value = false;
|
||||
try {
|
||||
const res = await fetch(withBase("/api/cloud/status"));
|
||||
if (!res.ok) {
|
||||
cloudStatusError.value = res.status === 401 || res.status === 403 ? "auth" : "unavailable";
|
||||
return;
|
||||
}
|
||||
cloudStatus.value = await res.json();
|
||||
} catch {
|
||||
cloudStatusError.value = "unavailable";
|
||||
} finally {
|
||||
isLoadingCloudStatus.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function clearCloudState() {
|
||||
cloudConfig.value = null;
|
||||
cloudStatus.value = null;
|
||||
cloudStatusError.value = false;
|
||||
}
|
||||
|
||||
export function useCloudConfig() {
|
||||
return {
|
||||
cloudConfig,
|
||||
cloudStatus,
|
||||
cloudStatusError,
|
||||
isLoadingCloudStatus,
|
||||
initialLoad,
|
||||
fetchCloudConfig,
|
||||
fetchCloudStatus,
|
||||
clearCloudState,
|
||||
};
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
import { useCloudConfig } from "@/composable/cloudConfig";
|
||||
|
||||
export interface CloudLogHit {
|
||||
ts: number;
|
||||
hostId: string;
|
||||
containerId: string;
|
||||
containerName: string;
|
||||
message: string;
|
||||
stream: string;
|
||||
level: string;
|
||||
// Dozzle's deterministic FNV-32a id for the raw log line — used to deep-link
|
||||
// to the exact line in the local log viewer. Optional: pre-indexing logs
|
||||
// (or older Dozzle clients) won't have it.
|
||||
logId?: number;
|
||||
}
|
||||
|
||||
interface CloudLogSearchResponse {
|
||||
hits: CloudLogHit[];
|
||||
hasMore: boolean;
|
||||
// Cursor for the next older page. Pass back as `before=` in the URL.
|
||||
// Omitted when there's nothing more to load.
|
||||
nextBefore?: number;
|
||||
}
|
||||
|
||||
const debounceMs = 250;
|
||||
|
||||
/**
|
||||
* useCloudLogSearch performs Cloud-side log search via the Dozzle backend's
|
||||
* /api/cloud/search/logs endpoint. Identity is derived server-side from the
|
||||
* authenticated gRPC connection; this composable passes only the query.
|
||||
*
|
||||
* Behavior:
|
||||
* - debounced 250ms; whitespace-only short-circuits to []
|
||||
* - aborts any in-flight request on each new keystroke (AbortController)
|
||||
* - `available` is computed: cloud linked AND streamLogs enabled
|
||||
* - when `available` is false, results stay [] regardless of query
|
||||
*
|
||||
* Status mapping:
|
||||
* 200 -> hits populated (may be empty)
|
||||
* 204 -> streaming disabled server-side (defense-in-depth)
|
||||
* 503 -> cloud not configured
|
||||
* 504 -> timeout (500ms upstream)
|
||||
* any other 4xx/5xx -> error set, results cleared
|
||||
*/
|
||||
export function useCloudLogSearch(query: Ref<string>) {
|
||||
const { cloudConfig } = useCloudConfig();
|
||||
|
||||
const results = ref<CloudLogHit[]>([]);
|
||||
const loading = ref(false);
|
||||
const loadingMore = ref(false);
|
||||
const error = ref<Error | null>(null);
|
||||
const hasMore = ref(false);
|
||||
// Cursor (timestamp_ns) of the last hit on the current page; 0 = at the
|
||||
// newest page. Cleared on every new query.
|
||||
const nextBefore = ref<number>(0);
|
||||
|
||||
const available = computed(() => !!cloudConfig.value?.linked && !!cloudConfig.value?.streamLogs);
|
||||
|
||||
// Two parallel fetch lifecycles — keystroke search (cancels on next
|
||||
// keystroke / unmount) and pagination loadMore (cancels on unmount or
|
||||
// when a new query lands and supersedes pagination state). Tracking
|
||||
// them separately avoids the keystroke aborter cancelling an in-flight
|
||||
// pagination request and vice versa.
|
||||
let abortController: AbortController | null = null;
|
||||
let loadMoreAborter: AbortController | null = null;
|
||||
|
||||
function clearResults() {
|
||||
results.value = [];
|
||||
error.value = null;
|
||||
loading.value = false;
|
||||
loadingMore.value = false;
|
||||
hasMore.value = false;
|
||||
nextBefore.value = 0;
|
||||
}
|
||||
|
||||
async function fetchPage(q: string, before: number, signal: AbortSignal): Promise<CloudLogSearchResponse | null> {
|
||||
let url = withBase(`/api/cloud/search/logs?q=${encodeURIComponent(q)}&limit=20`);
|
||||
if (before > 0) url += `&before=${before}`;
|
||||
const res = await fetch(url, { signal });
|
||||
if (res.status === 204) return { hits: [], hasMore: false };
|
||||
if (!res.ok) throw new Error(`cloud search failed: ${res.status}`);
|
||||
return (await res.json()) as CloudLogSearchResponse;
|
||||
}
|
||||
|
||||
async function runSearch(q: string) {
|
||||
if (abortController) abortController.abort();
|
||||
// A fresh query supersedes any in-flight pagination — that page is
|
||||
// for the previous query and would be appended onto the wrong result
|
||||
// set if it landed late.
|
||||
loadMoreAborter?.abort();
|
||||
abortController = new AbortController();
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
nextBefore.value = 0;
|
||||
|
||||
try {
|
||||
const body = await fetchPage(q, 0, abortController.signal);
|
||||
if (!body) return;
|
||||
results.value = body.hits ?? [];
|
||||
hasMore.value = !!body.hasMore;
|
||||
nextBefore.value = body.nextBefore ?? 0;
|
||||
} catch (e) {
|
||||
if ((e as DOMException)?.name !== "AbortError") {
|
||||
error.value = e as Error;
|
||||
results.value = [];
|
||||
hasMore.value = false;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// loadMore appends the next older page. Safe to call repeatedly — guarded
|
||||
// by hasMore + a separate loading flag so the input-debounced search and
|
||||
// the user-triggered pagination don't trip each other.
|
||||
async function loadMore() {
|
||||
if (loadingMore.value || !hasMore.value || nextBefore.value <= 0) return;
|
||||
const q = query.value.trim();
|
||||
if (!q) return;
|
||||
loadingMore.value = true;
|
||||
loadMoreAborter?.abort();
|
||||
loadMoreAborter = new AbortController();
|
||||
try {
|
||||
const body = await fetchPage(q, nextBefore.value, loadMoreAborter.signal);
|
||||
if (!body) return;
|
||||
results.value = [...results.value, ...(body.hits ?? [])];
|
||||
hasMore.value = !!body.hasMore;
|
||||
nextBefore.value = body.nextBefore ?? 0;
|
||||
} catch (e) {
|
||||
if ((e as DOMException)?.name !== "AbortError") error.value = e as Error;
|
||||
} finally {
|
||||
loadingMore.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watchDebounced(
|
||||
[query, available],
|
||||
([q, isAvailable]) => {
|
||||
const trimmed = q.trim();
|
||||
if (!isAvailable || trimmed === "") {
|
||||
clearResults();
|
||||
return;
|
||||
}
|
||||
runSearch(trimmed);
|
||||
},
|
||||
{ debounce: debounceMs, immediate: true },
|
||||
);
|
||||
|
||||
onScopeDispose(() => {
|
||||
abortController?.abort();
|
||||
loadMoreAborter?.abort();
|
||||
});
|
||||
|
||||
return { results, loading, loadingMore, error, available, hasMore, loadMore };
|
||||
}
|
||||
@@ -1,201 +0,0 @@
|
||||
import type { Component } from "vue";
|
||||
import { Container } from "@/models/Container";
|
||||
import { useContainerActions } from "@/composable/containerActions";
|
||||
import config from "@/stores/config";
|
||||
import {
|
||||
lightTheme,
|
||||
compact,
|
||||
showTimestamp,
|
||||
softWrap,
|
||||
showAllContainers,
|
||||
showStd,
|
||||
smallerScrollbars,
|
||||
} from "@/stores/settings";
|
||||
|
||||
import mdiThemeLightDark from "~icons/mdi/theme-light-dark";
|
||||
import mdiWhiteBalanceSunny from "~icons/mdi/white-balance-sunny";
|
||||
import mdiWeatherNight from "~icons/mdi/weather-night";
|
||||
import mdiFormatLineSpacing from "~icons/mdi/format-line-spacing";
|
||||
import mdiClockOutline from "~icons/mdi/clock-outline";
|
||||
import mdiWrap from "~icons/mdi/wrap";
|
||||
import mdiEyeOutline from "~icons/mdi/eye-outline";
|
||||
import mdiFormatListBulleted from "~icons/mdi/format-list-bulleted";
|
||||
import mdiUnfoldMoreHorizontal from "~icons/mdi/unfold-more-horizontal";
|
||||
import mdiCogOutline from "~icons/mdi/cog-outline";
|
||||
import carbonRestart from "~icons/carbon/restart";
|
||||
import mdiStop from "~icons/mdi/stop";
|
||||
import mdiPlay from "~icons/mdi/play";
|
||||
import mdiDownload from "~icons/mdi/download";
|
||||
|
||||
export type CommandSection = "container" | "settings" | "navigation";
|
||||
|
||||
export type Command = {
|
||||
id: string;
|
||||
title: string;
|
||||
section: CommandSection;
|
||||
icon: Component;
|
||||
keywords?: string;
|
||||
perform: () => unknown;
|
||||
};
|
||||
|
||||
// Central registry for the Cmd+K command palette. Commands are recomputed on
|
||||
// every access so context-sensitive entries (container actions, current
|
||||
// toggle labels) stay in sync with the route and settings.
|
||||
export function useCommands() {
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const containerStore = useContainerStore();
|
||||
|
||||
const currentId = computed(() =>
|
||||
route?.name === "/container/[id]" && typeof route.params.id === "string" ? route.params.id : "",
|
||||
);
|
||||
// Null-safe: containerStore.currentContainer is a stubbed action under
|
||||
// @pinia/testing, so guard against it being absent.
|
||||
const currentContainerRef = containerStore.currentContainer?.(currentId);
|
||||
const currentContainer = computed(() => currentContainerRef?.value as Container | undefined);
|
||||
|
||||
// Bound to the current container. The cast is safe because the action
|
||||
// handlers only read container.value when invoked, and container commands are
|
||||
// only pushed into the list when currentContainer is truthy — so the handlers
|
||||
// never run against an undefined container.
|
||||
const { start, stop, restart, update } = useContainerActions(currentContainer as Ref<Container>);
|
||||
|
||||
const commands = computed<Command[]>(() => {
|
||||
const list: Command[] = [];
|
||||
|
||||
const container = currentContainer.value;
|
||||
if (container && config.enableActions) {
|
||||
const name = container.name;
|
||||
list.push({
|
||||
id: "container.restart",
|
||||
section: "container",
|
||||
icon: carbonRestart,
|
||||
title: t("command-palette.restart-container", { name }),
|
||||
keywords: "restart reboot",
|
||||
perform: restart,
|
||||
});
|
||||
if (container.state === "running") {
|
||||
list.push({
|
||||
id: "container.stop",
|
||||
section: "container",
|
||||
icon: mdiStop,
|
||||
title: t("command-palette.stop-container", { name }),
|
||||
keywords: "stop kill halt",
|
||||
perform: stop,
|
||||
});
|
||||
} else {
|
||||
list.push({
|
||||
id: "container.start",
|
||||
section: "container",
|
||||
icon: mdiPlay,
|
||||
title: t("command-palette.start-container", { name }),
|
||||
keywords: "start run",
|
||||
perform: start,
|
||||
});
|
||||
}
|
||||
list.push({
|
||||
id: "container.update",
|
||||
section: "container",
|
||||
icon: mdiDownload,
|
||||
title: t("command-palette.update-container", { name }),
|
||||
keywords: "update pull recreate upgrade",
|
||||
perform: update,
|
||||
});
|
||||
}
|
||||
|
||||
list.push(
|
||||
// lightTheme is tri-state, so expose each value as its own command rather
|
||||
// than a single toggle — that keeps "auto" (follow OS) reachable and makes
|
||||
// the target theme explicit instead of depending on the current state.
|
||||
{
|
||||
id: "settings.theme-auto",
|
||||
section: "settings",
|
||||
icon: mdiThemeLightDark,
|
||||
title: t("command-palette.theme-auto"),
|
||||
keywords: "theme auto system color mode appearance",
|
||||
perform: () => (lightTheme.value = "auto"),
|
||||
},
|
||||
{
|
||||
id: "settings.theme-light",
|
||||
section: "settings",
|
||||
icon: mdiWhiteBalanceSunny,
|
||||
title: t("command-palette.theme-light"),
|
||||
keywords: "theme light color mode appearance",
|
||||
perform: () => (lightTheme.value = "light"),
|
||||
},
|
||||
{
|
||||
id: "settings.theme-dark",
|
||||
section: "settings",
|
||||
icon: mdiWeatherNight,
|
||||
title: t("command-palette.theme-dark"),
|
||||
keywords: "theme dark color mode appearance",
|
||||
perform: () => (lightTheme.value = "dark"),
|
||||
},
|
||||
{
|
||||
id: "settings.toggle-compact",
|
||||
section: "settings",
|
||||
icon: mdiFormatLineSpacing,
|
||||
title: t("command-palette.toggle-compact"),
|
||||
keywords: "compact density spacing",
|
||||
perform: () => (compact.value = !compact.value),
|
||||
},
|
||||
{
|
||||
id: "settings.toggle-timestamps",
|
||||
section: "settings",
|
||||
icon: mdiClockOutline,
|
||||
title: t("command-palette.toggle-timestamps"),
|
||||
keywords: "timestamp time date",
|
||||
perform: () => (showTimestamp.value = !showTimestamp.value),
|
||||
},
|
||||
{
|
||||
id: "settings.toggle-soft-wrap",
|
||||
section: "settings",
|
||||
icon: mdiWrap,
|
||||
title: t("command-palette.toggle-soft-wrap"),
|
||||
keywords: "wrap soft line",
|
||||
perform: () => (softWrap.value = !softWrap.value),
|
||||
},
|
||||
{
|
||||
id: "settings.toggle-stopped",
|
||||
section: "settings",
|
||||
icon: mdiEyeOutline,
|
||||
title: t("command-palette.toggle-stopped"),
|
||||
keywords: "stopped hidden all containers exited",
|
||||
perform: () => (showAllContainers.value = !showAllContainers.value),
|
||||
},
|
||||
{
|
||||
id: "settings.toggle-std",
|
||||
section: "settings",
|
||||
icon: mdiFormatListBulleted,
|
||||
title: t("command-palette.toggle-std"),
|
||||
keywords: "stdout stderr std labels stream",
|
||||
perform: () => (showStd.value = !showStd.value),
|
||||
},
|
||||
{
|
||||
id: "settings.toggle-scrollbars",
|
||||
section: "settings",
|
||||
icon: mdiUnfoldMoreHorizontal,
|
||||
title: t("command-palette.toggle-scrollbars"),
|
||||
keywords: "scrollbar smaller thin",
|
||||
perform: () => (smallerScrollbars.value = !smallerScrollbars.value),
|
||||
},
|
||||
{
|
||||
id: "navigation.settings",
|
||||
section: "navigation",
|
||||
icon: mdiCogOutline,
|
||||
title: t("command-palette.open-settings"),
|
||||
keywords: "settings preferences options config",
|
||||
perform: () => router.push("/settings"),
|
||||
},
|
||||
);
|
||||
|
||||
return list;
|
||||
});
|
||||
|
||||
// Commands shown before the user types anything: the context-sensitive
|
||||
// container actions so e.g. Restart is one keystroke away on a container page.
|
||||
const contextCommands = computed(() => commands.value.filter((c) => c.section === "container"));
|
||||
|
||||
return { commands, contextCommands };
|
||||
}
|
||||
@@ -7,7 +7,7 @@ export function useDownloadUrl(
|
||||
levels: Ref<Set<string>>,
|
||||
name?: Ref<string> | ComputedRef<string> | string,
|
||||
) {
|
||||
const { debouncedSearchFilter, inverseFilter } = useSearchFilter();
|
||||
const { debouncedSearchFilter } = useSearchFilter();
|
||||
|
||||
const downloadUrl = computed(() => {
|
||||
const params = new URLSearchParams();
|
||||
@@ -20,7 +20,6 @@ export function useDownloadUrl(
|
||||
// Add filter if search is active
|
||||
if (debouncedSearchFilter.value) {
|
||||
params.append("filter", debouncedSearchFilter.value);
|
||||
if (inverseFilter.value) params.append("inverse", "true");
|
||||
}
|
||||
|
||||
// Add levels (multiple values) only if filtered
|
||||
|
||||
@@ -16,9 +16,8 @@ import { Service, Stack } from "@/models/Stack";
|
||||
import { Container, GroupedContainers } from "@/models/Container";
|
||||
import { parseMessage } from "@/composable/loadBetween";
|
||||
import { useLogLoader } from "@/composable/logLoader";
|
||||
import { parseEventData } from "@/utils/events";
|
||||
|
||||
const { isSearching, debouncedSearchFilter, inverseFilter } = useSearchFilter();
|
||||
const { isSearching, debouncedSearchFilter } = useSearchFilter();
|
||||
|
||||
export function useContainerStream(container: Ref<Container>): LogStreamSource {
|
||||
const url = computed(() => `/api/hosts/${container.value.host}/containers/${container.value.id}/logs/stream`);
|
||||
@@ -29,10 +28,6 @@ export function useHostStream(host: Ref<Host>): LogStreamSource {
|
||||
return useLogStream(computed(() => `/api/hosts/${host.value.id}/logs/stream`));
|
||||
}
|
||||
|
||||
export function useHostGroupStream(group: Ref<{ name: string }>): LogStreamSource {
|
||||
return useLogStream(computed(() => `/api/host-groups/${encodeURIComponent(group.value.name)}/logs/stream`));
|
||||
}
|
||||
|
||||
export function useStackStream(stack: Ref<Stack>): LogStreamSource {
|
||||
const labels = computed(() => `com.docker.stack.namespace:${stack.value.name}`);
|
||||
return useLogStream(computed(() => `/api/labels/${labels.value}/logs/stream`));
|
||||
@@ -57,23 +52,15 @@ export function useServiceStream(service: Ref<Service>): LogStreamSource {
|
||||
}
|
||||
|
||||
export function useNamespaceStream(namespace: Ref<{ name: string }>): LogStreamSource {
|
||||
const labels = computed(() => `@k8s.namespace:${namespace.value.name}`);
|
||||
const labels = computed(() => `namespace:${namespace.value.name}`);
|
||||
return useLogStream(computed(() => `/api/labels/${labels.value}/logs/stream`));
|
||||
}
|
||||
|
||||
export function useOwnerStream(owner: Ref<{ label: string }>): LogStreamSource {
|
||||
const labels = computed(() => `${owner.value.label}:true`);
|
||||
export function useOwnerStream(owner: Ref<{ name: string; kind: string }>): LogStreamSource {
|
||||
const labels = computed(() => `owner.kind:${owner.value.kind},owner.name:${owner.value.name}`);
|
||||
return useLogStream(computed(() => `/api/labels/${labels.value}/logs/stream`));
|
||||
}
|
||||
|
||||
export type SearchStatus = {
|
||||
active: boolean;
|
||||
done: boolean;
|
||||
matches: number;
|
||||
scannedTo?: string;
|
||||
reason?: "capped" | "exhausted";
|
||||
};
|
||||
|
||||
export type LogStreamSource = ReturnType<typeof useLogStream>;
|
||||
|
||||
function useLogStream(url: Ref<string>, container?: Ref<Container>) {
|
||||
@@ -82,7 +69,6 @@ function useLogStream(url: Ref<string>, container?: Ref<Container>) {
|
||||
const opened = ref(false);
|
||||
const loading = ref(true);
|
||||
const error = ref(false);
|
||||
const searchStatus = ref<SearchStatus>({ active: false, done: false, matches: 0 });
|
||||
const { paused: scrollingPaused } = useScrollContext();
|
||||
const { streamConfig, hasComplexLogs, levels, loadingMore, containers } = useLoggingContext();
|
||||
let initial = true;
|
||||
@@ -91,10 +77,7 @@ function useLogStream(url: Ref<string>, container?: Ref<Container>) {
|
||||
const params = new URLSearchParams();
|
||||
if (streamConfig.value.stdout) params.append("stdout", "1");
|
||||
if (streamConfig.value.stderr) params.append("stderr", "1");
|
||||
if (isSearching.value) {
|
||||
params.append("filter", debouncedSearchFilter.value);
|
||||
if (inverseFilter.value) params.append("inverse", "true");
|
||||
}
|
||||
if (isSearching.value) params.append("filter", debouncedSearchFilter.value);
|
||||
for (const level of levels.value) {
|
||||
params.append("levels", level);
|
||||
}
|
||||
@@ -168,14 +151,13 @@ function useLogStream(url: Ref<string>, container?: Ref<Container>) {
|
||||
loading.value = true;
|
||||
error.value = false;
|
||||
initial = true;
|
||||
searchStatus.value = { active: isSearching.value, done: false, matches: 0 };
|
||||
es = new EventSource(urlWithParams.value);
|
||||
es.addEventListener("container-event", (e) => {
|
||||
const event = parseEventData<{
|
||||
const event = JSON.parse((e as MessageEvent).data) as {
|
||||
actorId: string;
|
||||
name: "container-stopped" | "container-started";
|
||||
time: string;
|
||||
}>(e);
|
||||
};
|
||||
const containerEvent = new ContainerEventLogEntry(
|
||||
event.name == "container-started" ? "Container started" : "Container stopped",
|
||||
event.actorId,
|
||||
@@ -189,27 +171,11 @@ function useLogStream(url: Ref<string>, container?: Ref<Container>) {
|
||||
});
|
||||
|
||||
es.addEventListener("logs-backfill", (e) => {
|
||||
const data = parseEventData<LogEvent[]>(e);
|
||||
const data = JSON.parse((e as MessageEvent).data) as LogEvent[];
|
||||
const logs = data.map((e) => asLogEntry(e));
|
||||
messages.value = [...logs, ...messages.value];
|
||||
});
|
||||
|
||||
es.addEventListener("search-status", (e) => {
|
||||
const data = parseEventData<{
|
||||
scannedTo: string;
|
||||
matches: number;
|
||||
done: boolean;
|
||||
reason?: "capped" | "exhausted";
|
||||
}>(e);
|
||||
searchStatus.value = {
|
||||
active: !data.done,
|
||||
done: data.done,
|
||||
matches: data.matches,
|
||||
scannedTo: data.scannedTo,
|
||||
reason: data.reason,
|
||||
};
|
||||
});
|
||||
|
||||
es.onmessage = (e) => {
|
||||
if (e.data) {
|
||||
buffer.value = [...buffer.value, parseMessage(e.data)];
|
||||
@@ -241,6 +207,5 @@ function useLogStream(url: Ref<string>, container?: Ref<Container>) {
|
||||
opened,
|
||||
error,
|
||||
loading,
|
||||
searchStatus,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Completion, CompletionContext, CompletionSource } from "@codemirror/autocomplete";
|
||||
import type { Completion } from "@codemirror/autocomplete";
|
||||
|
||||
export interface ExprEditorOptions {
|
||||
parent: HTMLElement;
|
||||
@@ -44,9 +44,9 @@ export function createContainerHints(
|
||||
{ label: '"healthy"', detail: "health value", type: "string" },
|
||||
{ label: '"unhealthy"', detail: "health value", type: "string" },
|
||||
{ label: '"none"', detail: "health value", type: "string" },
|
||||
...containerNames.map((name): Completion => ({ label: `"${name}"`, detail: "container name", type: "string" })),
|
||||
...imageNames.map((image): Completion => ({ label: `"${image}"`, detail: "image name", type: "string" })),
|
||||
...hostNames.map((host): Completion => ({ label: `"${host}"`, detail: "host name", type: "string" })),
|
||||
...containerNames.map((name) => ({ label: `"${name}"`, detail: "container name", type: "string" }) as Completion),
|
||||
...imageNames.map((image) => ({ label: `"${image}"`, detail: "image name", type: "string" }) as Completion),
|
||||
...hostNames.map((host) => ({ label: `"${host}"`, detail: "host name", type: "string" }) as Completion),
|
||||
];
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@ export function createLogHints(messageKeys?: string[]): Completion[] {
|
||||
{ label: "timestamp", detail: "unix timestamp", type: "property" },
|
||||
{ label: "id", detail: "log entry ID", type: "property" },
|
||||
...(messageKeys ?? []).map(
|
||||
(key): Completion => ({ label: `message.${key}`, detail: "message field", type: "property" }),
|
||||
(key) => ({ label: `message.${key}`, detail: "message field", type: "property" }) as Completion,
|
||||
),
|
||||
...exprOperators,
|
||||
{ label: '"error"', detail: "level value", type: "string" },
|
||||
@@ -80,11 +80,6 @@ export function createMetricHints(): Completion[] {
|
||||
{ label: "cpu", detail: "CPU usage percent", type: "property" },
|
||||
{ label: "memory", detail: "memory usage percent", type: "property" },
|
||||
{ label: "memoryUsage", detail: "memory usage bytes", type: "property" },
|
||||
{ label: "mounts", detail: "list of container mounts with free-space info", type: "property" },
|
||||
{ label: ".usedPercent", detail: "mount field: % of mount used", type: "property" },
|
||||
{ label: ".availableBytes", detail: "mount field: free bytes on mount", type: "property" },
|
||||
{ label: ".destination", detail: "mount field: in-container mount path", type: "property" },
|
||||
{ label: "any(mounts, ...)", detail: "true if any mount matches the predicate", type: "keyword" },
|
||||
...exprOperators,
|
||||
{ label: ">", detail: "greater than", type: "operator" },
|
||||
{ label: "<", detail: "less than", type: "operator" },
|
||||
@@ -93,12 +88,6 @@ export function createMetricHints(): Completion[] {
|
||||
{ label: "cpu > 80", detail: "CPU over 80%", type: "text", boost: 10 },
|
||||
{ label: "memory > 90", detail: "memory over 90%", type: "text", boost: 10 },
|
||||
{ label: "cpu > 80 || memory > 90", detail: "CPU or memory high", type: "text", boost: 10 },
|
||||
{
|
||||
label: "any(mounts, .usedPercent >= 85)",
|
||||
detail: "alert when any mount is over 85% full",
|
||||
type: "text",
|
||||
boost: 10,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -106,8 +95,6 @@ export function createEventHints(): Completion[] {
|
||||
return [
|
||||
{ label: "name", detail: "event name", type: "property" },
|
||||
{ label: "attributes", detail: "event attributes map", type: "property" },
|
||||
{ label: 'attributes["healthStatus"]', detail: "healthy or unhealthy (health_status events)", type: "property" },
|
||||
{ label: 'attributes["exitCode"]', detail: "exit code (die events)", type: "property" },
|
||||
...exprOperators,
|
||||
{ label: '"start"', detail: "container started", type: "string" },
|
||||
{ label: '"stop"', detail: "container stopped", type: "string" },
|
||||
@@ -116,18 +103,12 @@ export function createEventHints(): Completion[] {
|
||||
{ label: '"health_status"', detail: "health check changed", type: "string" },
|
||||
{ label: 'name == "die"', detail: "match container death", type: "text", boost: 10 },
|
||||
{ label: 'name == "health_status"', detail: "match health changes", type: "text", boost: 10 },
|
||||
{
|
||||
label: 'name == "health_status" && attributes["healthStatus"] == "unhealthy"',
|
||||
detail: "match unhealthy containers",
|
||||
type: "text",
|
||||
boost: 10,
|
||||
},
|
||||
{ label: 'name in ["stop", "die"]', detail: "match stop or death", type: "text", boost: 10 },
|
||||
];
|
||||
}
|
||||
|
||||
function createAutocomplete(getHints: () => Completion[]): CompletionSource {
|
||||
return (context: CompletionContext) => {
|
||||
function createAutocomplete(getHints: () => Completion[]) {
|
||||
return (context: any) => {
|
||||
const word = context.matchBefore(/[\w"=!&|]+/);
|
||||
if (!word && !context.explicit) return null;
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
// Shared open state for the global Cmd+K fuzzy-search modal.
|
||||
// Lives outside the layout so any surface (home page hero, mobile menu,
|
||||
// sidebar trigger) can open the same modal without prop-drilling.
|
||||
const open = ref(false);
|
||||
|
||||
export function useFuzzySearch() {
|
||||
return {
|
||||
open,
|
||||
openSearch: () => {
|
||||
open.value = true;
|
||||
},
|
||||
closeSearch: () => {
|
||||
open.value = false;
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -8,21 +8,16 @@ export function useHistoricalContainerLog(historicalContainer: Ref<HistoricalCon
|
||||
const opened = ref(false);
|
||||
const loading = ref(true);
|
||||
const error = ref(false);
|
||||
// Historical views are a fixed window around a log id, never a running search.
|
||||
const searchStatus = ref<SearchStatus>({ active: false, done: false, matches: 0 });
|
||||
const container = toRef(() => historicalContainer.value.container);
|
||||
|
||||
const { streamConfig, levels, loadingMore } = useLoggingContext();
|
||||
const { isSearching, debouncedSearchFilter, inverseFilter } = useSearchFilter();
|
||||
const { isSearching, debouncedSearchFilter } = useSearchFilter();
|
||||
|
||||
const params = computed(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (streamConfig.value.stdout) params.append("stdout", "1");
|
||||
if (streamConfig.value.stderr) params.append("stderr", "1");
|
||||
if (isSearching.value) {
|
||||
params.append("filter", debouncedSearchFilter.value);
|
||||
if (inverseFilter.value) params.append("inverse", "true");
|
||||
}
|
||||
if (isSearching.value) params.append("filter", debouncedSearchFilter.value);
|
||||
for (const level of levels.value) {
|
||||
params.append("levels", level);
|
||||
}
|
||||
@@ -127,6 +122,5 @@ export function useHistoricalContainerLog(historicalContainer: Ref<HistoricalCon
|
||||
opened,
|
||||
error,
|
||||
loading,
|
||||
searchStatus,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { beforeEach, describe, expect, test } from "vitest";
|
||||
import { useSearchFilter } from "./search";
|
||||
|
||||
describe("useSearchFilter", () => {
|
||||
// State is a module-level singleton, so reset before each test.
|
||||
beforeEach(() => {
|
||||
useSearchFilter().resetSearch();
|
||||
});
|
||||
|
||||
test("isValidQuery reflects regex validity", () => {
|
||||
const { searchQueryFilter, isValidQuery } = useSearchFilter();
|
||||
searchQueryFilter.value = "foo.*";
|
||||
expect(isValidQuery.value).toBe(true);
|
||||
|
||||
searchQueryFilter.value = "[";
|
||||
expect(isValidQuery.value).toBe(false);
|
||||
});
|
||||
|
||||
test("toggleInverse flips the inverse flag", () => {
|
||||
const { inverseFilter, toggleInverse } = useSearchFilter();
|
||||
expect(inverseFilter.value).toBe(false);
|
||||
toggleInverse();
|
||||
expect(inverseFilter.value).toBe(true);
|
||||
toggleInverse();
|
||||
expect(inverseFilter.value).toBe(false);
|
||||
});
|
||||
|
||||
test("resetSearch clears query, visibility and inverse", () => {
|
||||
const { searchQueryFilter, showSearch, inverseFilter, toggleInverse, resetSearch } = useSearchFilter();
|
||||
searchQueryFilter.value = "abc";
|
||||
showSearch.value = true;
|
||||
toggleInverse();
|
||||
|
||||
resetSearch();
|
||||
|
||||
expect(searchQueryFilter.value).toBe("");
|
||||
expect(showSearch.value).toBe(false);
|
||||
expect(inverseFilter.value).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,6 @@
|
||||
const searchQueryFilter = ref<string>("");
|
||||
const debouncedSearchFilter = refDebounced(searchQueryFilter);
|
||||
const showSearch = ref(false);
|
||||
const inverseFilter = ref(false);
|
||||
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
if (searchParams.get("search") !== null && searchParams.get("search") !== "") {
|
||||
@@ -11,11 +10,6 @@ if (searchParams.get("search") !== null && searchParams.get("search") !== "") {
|
||||
function resetSearch() {
|
||||
searchQueryFilter.value = "";
|
||||
showSearch.value = false;
|
||||
inverseFilter.value = false;
|
||||
}
|
||||
|
||||
function toggleInverse() {
|
||||
inverseFilter.value = !inverseFilter.value;
|
||||
}
|
||||
|
||||
const isSearching = computed(() => showSearch.value && debouncedSearchFilter.value !== "");
|
||||
@@ -37,7 +31,5 @@ export function useSearchFilter() {
|
||||
showSearch,
|
||||
resetSearch,
|
||||
isSearching,
|
||||
inverseFilter,
|
||||
toggleInverse,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ComplexLogEntry, type LogMessage, type LogEntry } from "@/models/LogEntry";
|
||||
|
||||
export function useVisibleFilter(visibleKeys: Ref<Map<string[], boolean>>) {
|
||||
const { isSearching, inverseFilter } = useSearchFilter();
|
||||
const { isSearching } = useSearchFilter();
|
||||
function filteredPayload(messages: Ref<LogEntry<LogMessage>[]>) {
|
||||
return computed(() => {
|
||||
return messages.value
|
||||
@@ -14,8 +14,7 @@ export function useVisibleFilter(visibleKeys: Ref<Map<string[], boolean>>) {
|
||||
})
|
||||
.filter((d) => {
|
||||
if (isSearching.value && d instanceof ComplexLogEntry) {
|
||||
const hasMark = Object.values(d.message).some((v) => JSON.stringify(v)?.includes("<mark>"));
|
||||
return inverseFilter.value ? !hasMark : hasMark;
|
||||
return Object.values(d.message).some((v) => JSON.stringify(v)?.includes("<mark>"));
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<MobileMenu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></MobileMenu>
|
||||
<Splitpanes @resized="onResized($event)">
|
||||
<Pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav && !forceMenuHidden">
|
||||
<SidePanel />
|
||||
<SidePanel @search="showFuzzySearch" />
|
||||
</Pane>
|
||||
<Pane min-size="10" :size="100 - menuWidth">
|
||||
<Splitpanes>
|
||||
@@ -34,9 +34,9 @@
|
||||
<mdi:chevron-left class="swap-off" />
|
||||
</label>
|
||||
</div>
|
||||
<dialog ref="modal" class="modal bg-base-300/50! items-start backdrop-blur-md transition-none!" @close="closeSearch">
|
||||
<div class="modal-box max-w-2xl overflow-visible! bg-transparent pt-20 shadow-none">
|
||||
<FuzzySearchModal @close="closeSearch" v-if="open" />
|
||||
<dialog ref="modal" class="modal bg-base-300/50! items-start backdrop-blur-md transition-none!" @close="open = false">
|
||||
<div class="modal-box max-w-2xl bg-transparent pt-20 shadow-none">
|
||||
<FuzzySearchModal @close="open = false" v-if="open" />
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
@@ -52,6 +52,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// @ts-ignore - splitpanes types are not available
|
||||
import { Splitpanes, Pane } from "splitpanes";
|
||||
import { collapseNav } from "@/stores/settings";
|
||||
import SideDrawer from "@/components/common/SideDrawer.vue";
|
||||
@@ -62,10 +63,8 @@ const { pinnedLogs } = storeToRefs(pinnedLogsStore);
|
||||
const drawer = useTemplateRef<InstanceType<typeof SideDrawer>>("drawer") as Ref<InstanceType<typeof SideDrawer>>;
|
||||
const { component: drawerComponent, properties: drawerProperties, width: drawerWidth } = createDrawer(drawer);
|
||||
|
||||
import { useFuzzySearch } from "@/composable/fuzzySearch";
|
||||
|
||||
const modal = ref<HTMLDialogElement>();
|
||||
const { open, openSearch: showFuzzySearch, closeSearch } = useFuzzySearch();
|
||||
const open = ref(false);
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const forceMenuHidden = ref(searchParams.has("hideMenu"));
|
||||
|
||||
@@ -84,6 +83,10 @@ onKeyStroke("k", (e) => {
|
||||
}
|
||||
});
|
||||
|
||||
function showFuzzySearch() {
|
||||
open.value = true;
|
||||
}
|
||||
|
||||
function onResized({ panes }: { panes: { size: number }[] }) {
|
||||
if (panes.length == 2) {
|
||||
menuWidth.value = Math.min(panes[0].size, 50);
|
||||
@@ -100,7 +103,7 @@ function onResized({ panes }: { panes: { size: number }[] }) {
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.router-view {
|
||||
padding-top: var(--mobile-nav-height);
|
||||
padding-top: 75px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 8.6 KiB |
+1
-85
@@ -1,9 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
@import "splitpanes/dist/splitpanes.css" layer(base);
|
||||
@import "@fontsource/jetbrains-mono/400.css";
|
||||
@import "@fontsource/jetbrains-mono/500.css";
|
||||
@import "@fontsource/jetbrains-mono/600.css";
|
||||
@import "@fontsource/jetbrains-mono/700.css";
|
||||
@plugin "daisyui";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@@ -13,8 +9,6 @@
|
||||
--color-purple: oklch(51.49% 0.215 321.03);
|
||||
--color-blue: oklch(65% 0.171 249.5);
|
||||
--color-orange: oklch(85% 0.186 48.13);
|
||||
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
@utility pt-safe {
|
||||
@@ -57,24 +51,6 @@
|
||||
--color-error: var(--color-red);
|
||||
--color-error-content: oklch(98% 0.01 30);
|
||||
|
||||
/* ANSI log palette tuned for legibility on the dark background */
|
||||
--ansi-black: oklch(45% 0 0);
|
||||
--ansi-red: oklch(65% 0.2 25);
|
||||
--ansi-green: oklch(72% 0.16 150);
|
||||
--ansi-yellow: oklch(80% 0.13 85);
|
||||
--ansi-blue: oklch(70% 0.14 250);
|
||||
--ansi-magenta: oklch(68% 0.19 330);
|
||||
--ansi-cyan: oklch(75% 0.11 200);
|
||||
--ansi-white: oklch(89% 0 0);
|
||||
--ansi-bright-black: oklch(60% 0 0);
|
||||
--ansi-bright-red: oklch(72% 0.2 25);
|
||||
--ansi-bright-green: oklch(82% 0.17 150);
|
||||
--ansi-bright-yellow: oklch(88% 0.14 95);
|
||||
--ansi-bright-blue: oklch(78% 0.13 250);
|
||||
--ansi-bright-magenta: oklch(75% 0.19 330);
|
||||
--ansi-bright-cyan: oklch(85% 0.11 200);
|
||||
--ansi-bright-white: oklch(100% 0 0);
|
||||
|
||||
--radius-selector: 1rem;
|
||||
--radius-field: 0.25rem;
|
||||
--radius-box: 0.5rem;
|
||||
@@ -115,24 +91,6 @@
|
||||
--color-error: var(--color-red);
|
||||
--color-error-content: oklch(98% 0.01 30);
|
||||
|
||||
/* ANSI log palette tuned for legibility on the light background */
|
||||
--ansi-black: oklch(25% 0 0);
|
||||
--ansi-red: oklch(52% 0.2 25);
|
||||
--ansi-green: oklch(52% 0.15 150);
|
||||
--ansi-yellow: oklch(60% 0.13 75);
|
||||
--ansi-blue: oklch(50% 0.17 255);
|
||||
--ansi-magenta: oklch(50% 0.2 330);
|
||||
--ansi-cyan: oklch(55% 0.1 210);
|
||||
--ansi-white: oklch(70% 0 0);
|
||||
--ansi-bright-black: oklch(45% 0 0);
|
||||
--ansi-bright-red: oklch(58% 0.21 25);
|
||||
--ansi-bright-green: oklch(58% 0.16 150);
|
||||
--ansi-bright-yellow: oklch(62% 0.13 85);
|
||||
--ansi-bright-blue: oklch(55% 0.16 255);
|
||||
--ansi-bright-magenta: oklch(56% 0.2 330);
|
||||
--ansi-bright-cyan: oklch(60% 0.1 210);
|
||||
--ansi-bright-white: oklch(85% 0 0);
|
||||
|
||||
--radius-selector: 1rem;
|
||||
--radius-field: 0.25rem;
|
||||
--radius-box: 0.5rem;
|
||||
@@ -156,14 +114,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* daisyUI darkens the ghost button's border on hover, which reads as a
|
||||
* near-black ring on the dark theme. Use a theme-aware base-content tint so the
|
||||
* hover ring stays visible and legible in both themes (light on dark, dark on
|
||||
* light) instead of a fixed near-black. */
|
||||
.btn-ghost:hover {
|
||||
border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
|
||||
}
|
||||
|
||||
@utility menu-active {
|
||||
&,
|
||||
&:active {
|
||||
@@ -187,14 +137,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Reserve the document scrollbar gutter so the layout width stays constant when
|
||||
* a page-level scrollbar appears (e.g. once a container's logs load). Without
|
||||
* this, the width jump makes the percentage-based splitpanes recompute and the
|
||||
* sidebar visibly flicks. */
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
@@ -202,13 +144,6 @@ body {
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
/* Height of the mobile top nav (logo row + border). The container status bar
|
||||
* sticks right below it and the log content is padded by the same amount, so
|
||||
* they stay locked together. The safe-area inset is already handled by body. */
|
||||
:root {
|
||||
--mobile-nav-height: 57px;
|
||||
}
|
||||
|
||||
[class*="shadow-"] {
|
||||
@apply shadow-base-content/8;
|
||||
}
|
||||
@@ -255,24 +190,5 @@ body {
|
||||
}
|
||||
|
||||
.cm-scroller {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
@apply inline-flex items-center gap-1.5 rounded border px-2 py-0.5 font-mono text-xs font-medium tracking-wider uppercase;
|
||||
}
|
||||
.status-pill-neutral {
|
||||
@apply bg-base-100 border-base-content/15 text-base-content/70;
|
||||
}
|
||||
.status-pill-success {
|
||||
@apply text-success border-success/30 bg-success/10;
|
||||
}
|
||||
.status-pill-primary {
|
||||
@apply text-primary border-primary/30 bg-primary/10;
|
||||
}
|
||||
.status-pill-warning {
|
||||
@apply text-warning border-warning/30 bg-warning/10;
|
||||
}
|
||||
.status-pill-error {
|
||||
@apply text-error border-error/30 bg-error/10;
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,3 @@ Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.
|
||||
i.install?.(app),
|
||||
);
|
||||
app.mount("#app");
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
navigator.serviceWorker.register(withBase("/sw.js"));
|
||||
}
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
import { describe, expect, test, vi } from "vitest";
|
||||
import { Container, emptyStat, type Stat } from "./Container";
|
||||
|
||||
vi.mock("@/stores/config", () => ({
|
||||
__esModule: true,
|
||||
default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
|
||||
withBase: (path: string) => path,
|
||||
}));
|
||||
|
||||
function makeContainer(
|
||||
overrides: { labels?: Record<string, string>; image?: string; command?: string; stats?: Stat[] } = {},
|
||||
) {
|
||||
return new Container(
|
||||
"id-1",
|
||||
new Date(),
|
||||
new Date(),
|
||||
new Date(),
|
||||
overrides.image ?? "image",
|
||||
"display-name",
|
||||
overrides.command ?? "command",
|
||||
"localhost",
|
||||
overrides.labels ?? {},
|
||||
"running",
|
||||
0,
|
||||
0,
|
||||
overrides.stats ?? [],
|
||||
);
|
||||
}
|
||||
|
||||
function makeStat(partial: Partial<Stat> = {}): Stat {
|
||||
return { ...emptyStat(), ...partial };
|
||||
}
|
||||
|
||||
describe("Container.namespace", () => {
|
||||
test("prefers dev.dozzle.group over all others", () => {
|
||||
const c = makeContainer({
|
||||
labels: {
|
||||
"dev.dozzle.group": "g",
|
||||
"coolify.projectName": "c",
|
||||
"com.docker.stack.namespace": "s",
|
||||
"com.docker.compose.project": "p",
|
||||
},
|
||||
});
|
||||
expect(c.namespace).toBe("g");
|
||||
});
|
||||
|
||||
test("falls back through coolify, stack, then compose", () => {
|
||||
expect(makeContainer({ labels: { "coolify.projectName": "c" } }).namespace).toBe("c");
|
||||
expect(makeContainer({ labels: { "com.docker.stack.namespace": "s" } }).namespace).toBe("s");
|
||||
expect(makeContainer({ labels: { "com.docker.compose.project": "p" } }).namespace).toBe("p");
|
||||
});
|
||||
|
||||
test("undefined when no grouping label is present", () => {
|
||||
expect(makeContainer().namespace).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Container.name", () => {
|
||||
test("non-swarm returns the constructor name and respects the setter", () => {
|
||||
const c = makeContainer();
|
||||
expect(c.name).toBe("display-name");
|
||||
c.name = "renamed";
|
||||
expect(c.name).toBe("renamed");
|
||||
});
|
||||
|
||||
test("swarm strips task id and node id from the task name", () => {
|
||||
const c = makeContainer({
|
||||
labels: {
|
||||
"com.docker.swarm.service.id": "svc",
|
||||
"com.docker.swarm.task.name": "api.1.t1n0d3",
|
||||
"com.docker.swarm.task.id": "t1n0d3",
|
||||
"com.docker.swarm.node.id": "node99",
|
||||
},
|
||||
});
|
||||
expect(c.isSwarm).toBe(true);
|
||||
expect(c.name).toBe("api.1");
|
||||
expect(c.swarmId).toBe("t1n0d3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Container.storageKey", () => {
|
||||
test("combines stripped image with command", () => {
|
||||
expect(makeContainer({ image: "nginx:1.25", command: "run" }).storageKey).toBe("nginx:run");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Container.hostLabel", () => {
|
||||
test("resolves the host name from config", () => {
|
||||
expect(makeContainer().hostLabel).toBe("localhost");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Container stats history", () => {
|
||||
test("pads history to 300 and seeds latest stat", () => {
|
||||
const a = makeStat({ cpu: 1 });
|
||||
const b = makeStat({ cpu: 2 });
|
||||
const c = makeContainer({ stats: [a, b] });
|
||||
expect(c.statsHistory).toHaveLength(300);
|
||||
expect(c.statsHistory.at(-1)).toEqual(b);
|
||||
expect(c.statsHistory.at(-2)).toEqual(a);
|
||||
expect(c.stat).toEqual(b);
|
||||
});
|
||||
|
||||
test("empty stats seed an empty stat", () => {
|
||||
const c = makeContainer();
|
||||
expect(c.statsHistory).toHaveLength(300);
|
||||
expect(c.stat).toEqual(emptyStat());
|
||||
});
|
||||
});
|
||||
|
||||
describe("Container.updateStat", () => {
|
||||
test("applies EMA (alpha 0.2) to cpu/memory and passes totals through", () => {
|
||||
const c = makeContainer();
|
||||
c.updateStat(makeStat({ cpu: 10, memory: 50, memoryUsage: 100, networkRxTotal: 5, diskWriteTotal: 8 }));
|
||||
|
||||
expect(c.stat.cpu).toBe(10);
|
||||
expect(c.movingAverage.cpu).toBeCloseTo(2, 10);
|
||||
expect(c.movingAverage.memory).toBeCloseTo(10, 10);
|
||||
expect(c.movingAverage.memoryUsage).toBeCloseTo(20, 10);
|
||||
// totals are not averaged
|
||||
expect(c.movingAverage.networkRxTotal).toBe(5);
|
||||
expect(c.movingAverage.diskWriteTotal).toBe(8);
|
||||
});
|
||||
|
||||
test("EMA folds in the previous moving average on each update", () => {
|
||||
const c = makeContainer();
|
||||
c.updateStat(makeStat({ cpu: 10, memory: 50, memoryUsage: 100 }));
|
||||
c.updateStat(makeStat({ cpu: 10, memory: 50, memoryUsage: 100 }));
|
||||
|
||||
expect(c.movingAverage.cpu).toBeCloseTo(3.6, 10); // 0.2*10 + 0.8*2
|
||||
expect(c.movingAverage.memory).toBeCloseTo(18, 10); // 0.2*50 + 0.8*10
|
||||
expect(c.movingAverage.memoryUsage).toBeCloseTo(36, 10); // 0.2*100 + 0.8*20
|
||||
});
|
||||
|
||||
test("history stays capped at 300 with the newest stat last", () => {
|
||||
const c = makeContainer();
|
||||
const latest = makeStat({ cpu: 42 });
|
||||
c.updateStat(latest);
|
||||
expect(c.statsHistory).toHaveLength(300);
|
||||
expect(c.statsHistory.at(-1)).toEqual(latest);
|
||||
});
|
||||
});
|
||||
@@ -1,25 +1,8 @@
|
||||
import type {
|
||||
ContainerHealth,
|
||||
ContainerJson,
|
||||
ContainerMount,
|
||||
ContainerStat,
|
||||
ContainerState,
|
||||
MountStat,
|
||||
} from "@/types/Container";
|
||||
import type { ContainerHealth, ContainerJson, ContainerStat, ContainerState } from "@/types/Container";
|
||||
import { Ref } from "vue";
|
||||
|
||||
export type Stat = Omit<ContainerStat, "id">;
|
||||
|
||||
export const emptyStat = (): Stat => ({
|
||||
cpu: 0,
|
||||
memory: 0,
|
||||
memoryUsage: 0,
|
||||
networkRxTotal: 0,
|
||||
networkTxTotal: 0,
|
||||
diskReadTotal: 0,
|
||||
diskWriteTotal: 0,
|
||||
});
|
||||
|
||||
const hosts = computed(() =>
|
||||
config.hosts.reduce(
|
||||
(acc, item) => {
|
||||
@@ -50,9 +33,6 @@ export class Container {
|
||||
private readonly _statsHistory: Ref<Stat[]>;
|
||||
private readonly movingAverageStat: Ref<Stat>;
|
||||
|
||||
public mounts: ContainerMount[];
|
||||
public mountStats: Record<string, MountStat>;
|
||||
|
||||
constructor(
|
||||
public readonly id: string,
|
||||
public readonly created: Date,
|
||||
@@ -70,12 +50,8 @@ export class Container {
|
||||
public readonly group?: string,
|
||||
public health?: ContainerHealth,
|
||||
public isNew: boolean = false,
|
||||
mounts: ContainerMount[] = [],
|
||||
mountStats: Record<string, MountStat> = {},
|
||||
) {
|
||||
this.mounts = mounts;
|
||||
this.mountStats = mountStats;
|
||||
const defaultStat = emptyStat();
|
||||
const defaultStat = { cpu: 0, memory: 0, memoryUsage: 0, networkRxTotal: 0, networkTxTotal: 0 } as Stat;
|
||||
this._stat = ref(stats.at(-1) || defaultStat);
|
||||
const recentStats = stats.slice(-300);
|
||||
const padding = Array(300 - recentStats.length).fill(defaultStat);
|
||||
@@ -164,8 +140,6 @@ export class Container {
|
||||
memoryUsage: alpha * stat.memoryUsage + (1 - alpha) * prev.memoryUsage,
|
||||
networkRxTotal: stat.networkRxTotal,
|
||||
networkTxTotal: stat.networkTxTotal,
|
||||
diskReadTotal: stat.diskReadTotal,
|
||||
diskWriteTotal: stat.diskWriteTotal,
|
||||
};
|
||||
if (isRef(this.movingAverageStat)) {
|
||||
this.movingAverageStat.value = newEma;
|
||||
@@ -174,10 +148,6 @@ export class Container {
|
||||
}
|
||||
}
|
||||
|
||||
public updateMountStats(mountStats: Record<string, MountStat>) {
|
||||
this.mountStats = mountStats ?? {};
|
||||
}
|
||||
|
||||
static fromJSON(c: ContainerJson): Container {
|
||||
return new Container(
|
||||
c.id,
|
||||
@@ -195,9 +165,6 @@ export class Container {
|
||||
c.stats ?? [],
|
||||
c.group,
|
||||
c.health,
|
||||
false,
|
||||
c.mounts ?? [],
|
||||
c.mountStats ?? {},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
asLogEntry,
|
||||
ComplexLogEntry,
|
||||
GroupedLogEntry,
|
||||
SimpleLogEntry,
|
||||
SkippedLogsEntry,
|
||||
type LogEvent,
|
||||
} from "./LogEntry";
|
||||
|
||||
function event(overrides: Partial<LogEvent> = {}): LogEvent {
|
||||
return {
|
||||
t: "single",
|
||||
m: "hello",
|
||||
ts: 1_700_000_000_000,
|
||||
id: 1,
|
||||
l: "info",
|
||||
s: "stdout",
|
||||
c: "container-1",
|
||||
rm: "raw",
|
||||
...overrides,
|
||||
} as LogEvent;
|
||||
}
|
||||
|
||||
describe("asLogEntry dispatch", () => {
|
||||
test("single -> SimpleLogEntry", () => {
|
||||
const entry = asLogEntry(event({ t: "single", m: "a line" }));
|
||||
expect(entry).toBeInstanceOf(SimpleLogEntry);
|
||||
expect(entry.message).toBe("a line");
|
||||
});
|
||||
|
||||
test("group -> GroupedLogEntry with fragments mapped to strings", () => {
|
||||
const entry = asLogEntry(event({ t: "group", m: [{ m: "line1" }, { m: "line2" }] }));
|
||||
expect(entry).toBeInstanceOf(GroupedLogEntry);
|
||||
expect(entry.message).toEqual(["line1", "line2"]);
|
||||
});
|
||||
|
||||
test("complex -> ComplexLogEntry", () => {
|
||||
const entry = asLogEntry(event({ t: "complex", m: { a: 1 } }));
|
||||
expect(entry).toBeInstanceOf(ComplexLogEntry);
|
||||
});
|
||||
|
||||
test("unknown type falls back to SimpleLogEntry", () => {
|
||||
const entry = asLogEntry(event({ t: "mystery" as any, m: "x" }));
|
||||
expect(entry).toBeInstanceOf(SimpleLogEntry);
|
||||
});
|
||||
|
||||
test("carries id, container, level and date from the event", () => {
|
||||
const entry = asLogEntry(event({ ts: 1_700_000_000_000, id: 7, c: "abc", l: "warn" }));
|
||||
expect(entry.id).toBe(7);
|
||||
expect(entry.containerID).toBe("abc");
|
||||
expect(entry.level).toBe("warn");
|
||||
expect(entry.date.getTime()).toBe(1_700_000_000_000);
|
||||
});
|
||||
});
|
||||
|
||||
describe("std normalization", () => {
|
||||
test("unknown becomes stderr", () => {
|
||||
expect(asLogEntry(event({ s: "unknown" })).std).toBe("stderr");
|
||||
});
|
||||
|
||||
test("missing becomes stderr", () => {
|
||||
expect(asLogEntry(event({ s: undefined as any })).std).toBe("stderr");
|
||||
});
|
||||
|
||||
test("stdout and stderr are preserved", () => {
|
||||
expect(asLogEntry(event({ s: "stdout" })).std).toBe("stdout");
|
||||
expect(asLogEntry(event({ s: "stderr" })).std).toBe("stderr");
|
||||
});
|
||||
});
|
||||
|
||||
describe("ComplexLogEntry filtering", () => {
|
||||
const message = { a: { b: 1 }, c: 2 };
|
||||
|
||||
test("empty visibleKeys returns the fully flattened object", () => {
|
||||
const entry = new ComplexLogEntry(message, "c", 1, new Date(), "info", "stdout", "raw", ref(new Map()));
|
||||
expect(entry.message).toEqual({ "a.b": 1, c: 2 });
|
||||
expect(entry.unfilteredMessage).toEqual(message);
|
||||
});
|
||||
|
||||
test("disabled keys are dropped and enabled keys come first", () => {
|
||||
const visibleKeys = ref(
|
||||
new Map<string[], boolean>([
|
||||
[["c"], true],
|
||||
[["a", "b"], false],
|
||||
]),
|
||||
);
|
||||
const entry = new ComplexLogEntry(message, "c", 1, new Date(), "info", "stdout", "raw", visibleKeys);
|
||||
expect(entry.message).toEqual({ c: 2 });
|
||||
});
|
||||
|
||||
test("enabled keys are ordered before remaining keys", () => {
|
||||
const visibleKeys = ref(new Map<string[], boolean>([[["a", "b"], true]]));
|
||||
const entry = new ComplexLogEntry(message, "c", 1, new Date(), "info", "stdout", "raw", visibleKeys);
|
||||
expect(Object.keys(entry.message)).toEqual(["a.b", "c"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("SkippedLogsEntry", () => {
|
||||
function simple(id: number) {
|
||||
return new SimpleLogEntry(`m${id}`, "c", id, new Date(), "info", "stdout", `m${id}`);
|
||||
}
|
||||
|
||||
test("renders the running skipped count and accumulates more", () => {
|
||||
const entry = new SkippedLogsEntry(new Date(), 3, simple(1), simple(2), async () => {});
|
||||
expect(entry.message).toBe("Skipped 3 entries");
|
||||
|
||||
const newLast = simple(5);
|
||||
entry.addSkippedEntries(2, newLast);
|
||||
expect(entry.message).toBe("Skipped 5 entries");
|
||||
expect(entry.totalSkipped).toBe(5);
|
||||
expect(entry.lastSkippedLog).toBe(newLast);
|
||||
});
|
||||
});
|
||||
@@ -1,232 +0,0 @@
|
||||
<template>
|
||||
<PageWithLinks>
|
||||
<section>
|
||||
<!-- Header -->
|
||||
<div class="mb-5 flex items-center gap-3">
|
||||
<h2 class="text-lg font-semibold">{{ $t("cloud-search.results-page-title") }}</h2>
|
||||
<span v-if="committedQuery" class="text-base-content/70 font-mono text-sm">"{{ committedQuery }}"</span>
|
||||
<span v-if="cloudSearch.available.value" class="status-pill status-pill-primary ml-auto">
|
||||
<mdi:flash class="size-3" /> {{ $t("cloud-search.hero-pill-indexed") }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Status line -->
|
||||
<div class="text-base-content/70 mb-3 flex h-5 items-center gap-2 text-xs">
|
||||
<template v-if="cloudSearch.loading.value">
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
<span>{{ $t("cloud-search.searching") }}</span>
|
||||
</template>
|
||||
<template v-else-if="cloudSearch.error.value">
|
||||
<mdi:alert-circle-outline class="text-error size-3.5" />
|
||||
<span>{{ $t("cloud-search.search-failed") }}</span>
|
||||
</template>
|
||||
<template v-else-if="committedQuery && hits.length === 0">
|
||||
<span>{{ $t("cloud-search.no-results") }}</span>
|
||||
</template>
|
||||
<template v-else-if="!committedQuery">
|
||||
<span>{{ $t("cloud-search.search-empty-prompt") }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="font-mono">{{ $t("cloud-search.hits-count", { n: hits.length }) }}</span>
|
||||
<span class="text-base-content/50">{{ $t("cloud-search.window-suffix") }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Results table — matches the visual style of ContainerTable -->
|
||||
<div v-if="hits.length" class="rounded-box border-base-content/10 overflow-x-auto border">
|
||||
<table class="table-md md:table-lg table-zebra table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-base-content/60 w-44 text-xs font-medium tracking-wider uppercase">
|
||||
{{ $t("cloud-search.col-time") }}
|
||||
</th>
|
||||
<th class="text-base-content/60 w-20 text-xs font-medium tracking-wider uppercase">
|
||||
{{ $t("cloud-search.col-level") }}
|
||||
</th>
|
||||
<th class="text-base-content/60 w-1 text-xs font-medium tracking-wider uppercase">
|
||||
{{ $t("cloud-search.col-container") }}
|
||||
</th>
|
||||
<th class="text-base-content/60 text-xs font-medium tracking-wider uppercase">
|
||||
{{ $t("cloud-search.col-message") }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(hit, i) in hits"
|
||||
:key="`${hit.containerId}-${hit.ts}-${hit.logId ?? 0}-${i}`"
|
||||
class="hover:bg-primary/5 transition-colors"
|
||||
:class="{ 'cursor-pointer': isLive(hit) }"
|
||||
@click="isLive(hit) && openContainer(hit)"
|
||||
>
|
||||
<td class="text-base-content/70 font-mono text-xs whitespace-nowrap tabular-nums">
|
||||
{{ formatTs(hit.ts) }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-pill" :class="levelPillClass(hit.level)">{{ hit.level || "info" }}</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap">
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<span :class="isLive(hit) ? 'text-base-content' : 'text-base-content/60'">
|
||||
{{ hit.containerName }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!isLive(hit)"
|
||||
:title="$t('cloud-search.container-removed')"
|
||||
class="status-pill status-pill-neutral"
|
||||
>
|
||||
{{ $t("cloud-search.container-removed-pill") }}
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<JsonFormatted
|
||||
v-if="isJson(hit.message)"
|
||||
:value="hit.message"
|
||||
:highlight="committedQuery"
|
||||
class="text-xs"
|
||||
/>
|
||||
<span v-else class="font-mono text-xs" v-html="highlight(hit.message, committedQuery)"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="hits.length && (cloudSearch.hasMore.value || cloudSearch.loadingMore.value)"
|
||||
class="text-base-content/60 mt-4 flex h-10 items-center justify-center text-xs"
|
||||
>
|
||||
<span v-if="cloudSearch.loadingMore.value" class="loading loading-spinner loading-xs"></span>
|
||||
</div>
|
||||
|
||||
<!-- Cloud-not-available state -->
|
||||
<div
|
||||
v-if="!cloudSearch.available.value && committedQuery"
|
||||
class="bg-base-200 border-base-content/10 rounded-box border p-8 text-center"
|
||||
>
|
||||
<mdi:cloud-off-outline class="text-base-content/40 mx-auto mb-3 size-10" />
|
||||
<p class="text-base-content/80 text-sm">
|
||||
{{
|
||||
cloudConfig?.linked ? $t("cloud-search.enable-streaming-to-search") : $t("cloud-search.connect-to-enable")
|
||||
}}
|
||||
</p>
|
||||
<RouterLink to="/settings/cloud" class="btn btn-primary btn-sm mt-4">
|
||||
{{ $t("cloud-search.cta-settings") }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
</PageWithLinks>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCloudConfig } from "@/composable/cloudConfig";
|
||||
import { useCloudLogSearch, type CloudLogHit } from "@/composable/cloudLogSearch";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
function readQ(q: unknown): string {
|
||||
return typeof q === "string" ? q : "";
|
||||
}
|
||||
|
||||
const committedQuery = ref(readQ(route.query.q));
|
||||
|
||||
const { cloudConfig } = useCloudConfig();
|
||||
const cloudSearch = useCloudLogSearch(committedQuery);
|
||||
const hits = computed<CloudLogHit[]>(() => cloudSearch.results.value);
|
||||
|
||||
// Look up containers in the live store so we can mark hits whose containers
|
||||
// have been removed (or never existed for this Dozzle instance) as
|
||||
// non-clickable. Reactive — if a container is removed mid-session, the
|
||||
// corresponding row updates instantly.
|
||||
const containerStore = useContainerStore();
|
||||
const liveIds = computed(() => new Set(Object.keys(containerStore.allContainersById)));
|
||||
function isLive(hit: CloudLogHit): boolean {
|
||||
return liveIds.value.has(hit.containerId);
|
||||
}
|
||||
|
||||
// Infinite scroll: VueUse fires loadMore when the page is scrolled within
|
||||
// 200px of the bottom. canLoadMore short-circuits both during a fetch and
|
||||
// when the server reports no more pages, so we don't double-fire.
|
||||
useInfiniteScroll(document, () => cloudSearch.loadMore(), {
|
||||
distance: 200,
|
||||
canLoadMore: () => cloudSearch.hasMore.value && !cloudSearch.loadingMore.value,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.query.q,
|
||||
(q) => {
|
||||
committedQuery.value = readQ(q);
|
||||
},
|
||||
);
|
||||
|
||||
function formatTs(ns: number): string {
|
||||
const d = new Date(ns / 1e6);
|
||||
const date = d.toLocaleDateString([], { month: "short", day: "numeric" });
|
||||
const time = d.toLocaleTimeString([], { hour12: false }) + "." + String(d.getMilliseconds()).padStart(3, "0");
|
||||
return `${date} ${time}`;
|
||||
}
|
||||
|
||||
function levelPillClass(level: string): string {
|
||||
switch ((level || "").toLowerCase()) {
|
||||
case "error":
|
||||
case "fatal":
|
||||
return "status-pill-error";
|
||||
case "warn":
|
||||
case "warning":
|
||||
return "status-pill-warning";
|
||||
case "info":
|
||||
return "status-pill-primary";
|
||||
default:
|
||||
return "status-pill-neutral";
|
||||
}
|
||||
}
|
||||
|
||||
// Safe with v-html: escapeHtml runs first, then <mark> tags are added against
|
||||
// a regex anchored on the (already-escaped) needle. Don't drop the escape
|
||||
// thinking it's redundant — the message comes from indexed log content.
|
||||
function highlight(message: string, q: string): string {
|
||||
if (!q) return escapeHtml(message);
|
||||
const pattern = q.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
|
||||
const re = new RegExp(`(${pattern})`, "gi");
|
||||
return escapeHtml(message).replace(re, '<mark class="bg-warning text-warning-content rounded px-0.5">$1</mark>');
|
||||
}
|
||||
|
||||
function escapeHtml(s: string): string {
|
||||
return s.replace(
|
||||
/[&<>"']/g,
|
||||
(c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[c] as string,
|
||||
);
|
||||
}
|
||||
|
||||
function isJson(message: string): boolean {
|
||||
const trimmed = message.trim();
|
||||
if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return false;
|
||||
try {
|
||||
const parsed = JSON.parse(trimmed);
|
||||
return parsed !== null && typeof parsed === "object";
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function openContainer(hit: CloudLogHit) {
|
||||
// Match Dozzle's permanent-link route: /container/:id/time/:datetime?logId=...
|
||||
// hit.ts is unix nanoseconds; convert to ms then ISO 8601 with millis.
|
||||
const datetime = new Date(hit.ts / 1e6).toISOString();
|
||||
const query: Record<string, string> = {};
|
||||
if (hit.logId !== undefined && hit.logId !== 0) {
|
||||
// logId pinpoints the exact line; the historical-logs view scrolls to it.
|
||||
query.logId = String(hit.logId);
|
||||
}
|
||||
if (committedQuery.value) {
|
||||
query.q = committedQuery.value;
|
||||
}
|
||||
router.push({
|
||||
name: "/container/[id].time.[datetime]",
|
||||
params: { id: hit.containerId, datetime },
|
||||
query,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user