Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| df09454e36 | |||
| 4b1ace57bc | |||
| b76a3ab37c |
@@ -1 +0,0 @@
|
|||||||
github_sponsors: [privilegedescalation]
|
|
||||||
@@ -2,13 +2,9 @@ name: CI
|
|||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
branches: ['**']
|
branches: [main]
|
||||||
pull_request:
|
pull_request:
|
||||||
branches: [main, dev]
|
branches: [main]
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
ci:
|
ci:
|
||||||
|
|||||||
@@ -1,222 +0,0 @@
|
|||||||
name: E2E Tests
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [main]
|
|
||||||
pull_request:
|
|
||||||
branches: [main]
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
# Only one E2E run at a time — the shared E2E_RELEASE in headlamp-dev cannot
|
|
||||||
# be shared across concurrent runs. cancel-in-progress: false queues rather
|
|
||||||
# than cancels to avoid skipping the teardown step.
|
|
||||||
concurrency:
|
|
||||||
group: e2e-${{ github.repository }}
|
|
||||||
cancel-in-progress: false
|
|
||||||
|
|
||||||
env:
|
|
||||||
E2E_NAMESPACE: headlamp-dev
|
|
||||||
E2E_RELEASE: headlamp-e2e-argocd
|
|
||||||
HEADLAMP_VERSION: v0.40.1
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
e2e:
|
|
||||||
runs-on: runners-privilegedescalation
|
|
||||||
timeout-minutes: 15
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Checkout
|
|
||||||
uses: actions/checkout@v6
|
|
||||||
|
|
||||||
- name: Detect package manager
|
|
||||||
id: pkg-manager
|
|
||||||
run: |
|
|
||||||
if [ -f "pnpm-lock.yaml" ]; then
|
|
||||||
echo "manager=pnpm" >> $GITHUB_OUTPUT
|
|
||||||
PM=$(python3 -c "import json,sys; d=json.load(open('package.json')); print('true' if d.get('packageManager','').startswith('pnpm@') else 'false')" 2>/dev/null || echo "false")
|
|
||||||
echo "has_package_manager=$PM" >> $GITHUB_OUTPUT
|
|
||||||
else
|
|
||||||
echo "manager=npm" >> $GITHUB_OUTPUT
|
|
||||||
echo "has_package_manager=false" >> $GITHUB_OUTPUT
|
|
||||||
fi
|
|
||||||
|
|
||||||
- name: Setup Node
|
|
||||||
uses: actions/setup-node@v6
|
|
||||||
with:
|
|
||||||
node-version: '22'
|
|
||||||
cache: ${{ steps.pkg-manager.outputs.manager == 'npm' && 'npm' || '' }}
|
|
||||||
|
|
||||||
- name: Setup pnpm (Corepack, respects packageManager field)
|
|
||||||
if: steps.pkg-manager.outputs.manager == 'pnpm' && steps.pkg-manager.outputs.has_package_manager == 'true'
|
|
||||||
run: |
|
|
||||||
npm install -g corepack
|
|
||||||
corepack enable pnpm
|
|
||||||
corepack prepare $(node -p "require('./package.json').packageManager") --activate
|
|
||||||
|
|
||||||
- name: Setup pnpm (version latest, no packageManager field)
|
|
||||||
if: steps.pkg-manager.outputs.manager == 'pnpm' && steps.pkg-manager.outputs.has_package_manager == 'false'
|
|
||||||
uses: pnpm/action-setup@v5
|
|
||||||
with:
|
|
||||||
run_install: false
|
|
||||||
version: latest
|
|
||||||
|
|
||||||
- name: Get pnpm store directory
|
|
||||||
id: pnpm-store
|
|
||||||
if: steps.pkg-manager.outputs.manager == 'pnpm'
|
|
||||||
run: echo "dir=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: Cache pnpm store
|
|
||||||
if: steps.pkg-manager.outputs.manager == 'pnpm'
|
|
||||||
uses: actions/cache@v5
|
|
||||||
with:
|
|
||||||
path: ${{ steps.pnpm-store.outputs.dir }}
|
|
||||||
key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
|
|
||||||
restore-keys: |
|
|
||||||
${{ runner.os }}-pnpm-
|
|
||||||
|
|
||||||
- name: Setup kubectl
|
|
||||||
uses: azure/setup-kubectl@v4
|
|
||||||
with:
|
|
||||||
version: 'latest'
|
|
||||||
|
|
||||||
- name: Get kubeconfig
|
|
||||||
run: |
|
|
||||||
set -euo pipefail
|
|
||||||
echo "=== Runner kubeconfig diagnostic ==="
|
|
||||||
echo "KUBECONFIG=${KUBECONFIG:-}"
|
|
||||||
for path in /runner/config /home/runner/.kube/config "${HOME:-}/.kube/config"; do
|
|
||||||
if [ -f "$path" ]; then
|
|
||||||
echo "FOUND kubeconfig at: $path"
|
|
||||||
fi
|
|
||||||
done
|
|
||||||
echo ""
|
|
||||||
echo "=== In-cluster service account check ==="
|
|
||||||
in_cluster=false
|
|
||||||
if [ -f /var/run/secrets/kubernetes.io/serviceaccount/token ]; then
|
|
||||||
echo "Service account token present — in-cluster mode available"
|
|
||||||
in_cluster=true
|
|
||||||
fi
|
|
||||||
if [ -f /runner/config ]; then
|
|
||||||
echo "KUBECONFIG=/runner/config" >> "$GITHUB_ENV"
|
|
||||||
elif [ -f /home/runner/.kube/config ]; then
|
|
||||||
echo "KUBECONFIG=/home/runner/.kube/config" >> "$GITHUB_ENV"
|
|
||||||
elif [ -f "${HOME:-}/.kube/config" ]; then
|
|
||||||
echo "KUBECONFIG=${HOME:-}/.kube/config" >> "$GITHUB_ENV"
|
|
||||||
elif [ "$in_cluster" = true ]; then
|
|
||||||
echo "No static kubeconfig found — generating in-cluster kubeconfig"
|
|
||||||
KUBECFG_DIR="${HOME:-}/.kube"
|
|
||||||
mkdir -p "$KUBECFG_DIR"
|
|
||||||
kubectl config set-cluster in-cluster \
|
|
||||||
--server="https://${KUBERNETES_SERVICE_HOST:-kubernetes.default.svc}:${KUBERNETES_SERVICE_PORT:-443}" \
|
|
||||||
--certificate-authority=/var/run/secrets/kubernetes.io/serviceaccount/ca.crt \
|
|
||||||
--embed-certs=true \
|
|
||||||
--kubeconfig="$KUBECFG_DIR/config"
|
|
||||||
kubectl config set-credentials in-cluster \
|
|
||||||
--token="$(cat /var/run/secrets/kubernetes.io/serviceaccount/token)" \
|
|
||||||
--kubeconfig="$KUBECFG_DIR/config"
|
|
||||||
kubectl config set-context in-cluster \
|
|
||||||
--cluster=in-cluster \
|
|
||||||
--user=in-cluster \
|
|
||||||
--kubeconfig="$KUBECFG_DIR/config"
|
|
||||||
kubectl config use-context in-cluster \
|
|
||||||
--kubeconfig="$KUBECFG_DIR/config"
|
|
||||||
echo "KUBECONFIG=$KUBECFG_DIR/config" >> "$GITHUB_ENV"
|
|
||||||
else
|
|
||||||
echo "::error::No kubeconfig found"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
- name: Apply RBAC for E2E pipeline
|
|
||||||
run: |
|
|
||||||
set -x
|
|
||||||
echo "=== Verifying RBAC is available in headlamp-dev namespace ==="
|
|
||||||
kubectl get role e2e-ci-runner -n headlamp-dev && echo "Role e2e-ci-runner already exists" || echo "Role e2e-ci-runner not found"
|
|
||||||
kubectl get rolebinding e2e-ci-runner-binding -n headlamp-dev && echo "RoleBinding e2e-ci-runner-binding already exists" || echo "RoleBinding not found"
|
|
||||||
echo "Applying RBAC from deployment/e2e-ci-runner-rbac.yaml..."
|
|
||||||
kubectl apply -f deployment/e2e-ci-runner-rbac.yaml || echo "apply returned exit code $?"
|
|
||||||
echo "Waiting for RBAC propagation..."
|
|
||||||
sleep 5
|
|
||||||
kubectl get role e2e-ci-runner -n headlamp-dev
|
|
||||||
kubectl get rolebinding e2e-ci-runner-binding -n headlamp-dev 2>&1 | tail -3 || true
|
|
||||||
set +x
|
|
||||||
|
|
||||||
- name: Install dependencies
|
|
||||||
run: |
|
|
||||||
if [ "${{ steps.pkg-manager.outputs.manager }}" = "pnpm" ]; then
|
|
||||||
pnpm install --frozen-lockfile
|
|
||||||
else
|
|
||||||
npm ci
|
|
||||||
fi
|
|
||||||
|
|
||||||
- name: Build plugin
|
|
||||||
run: npx @kinvolk/headlamp-plugin build
|
|
||||||
|
|
||||||
- name: Deploy E2E Headlamp instance
|
|
||||||
run: scripts/deploy-e2e-headlamp.sh
|
|
||||||
|
|
||||||
- name: Load E2E environment
|
|
||||||
run: |
|
|
||||||
if [ -f .env.e2e ]; then
|
|
||||||
cat .env.e2e >> "$GITHUB_ENV"
|
|
||||||
else
|
|
||||||
echo "::error::deploy-e2e-headlamp.sh did not produce .env.e2e"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
- name: Install Playwright browsers
|
|
||||||
run: |
|
|
||||||
if [ "${{ steps.pkg-manager.outputs.manager }}" = "pnpm" ]; then
|
|
||||||
pnpm exec playwright install --with-deps chromium
|
|
||||||
else
|
|
||||||
npx playwright install --with-deps chromium
|
|
||||||
fi
|
|
||||||
|
|
||||||
- name: Run E2E tests
|
|
||||||
run: |
|
|
||||||
if [ "${{ steps.pkg-manager.outputs.manager }}" = "pnpm" ]; then
|
|
||||||
pnpm run e2e
|
|
||||||
else
|
|
||||||
npm run e2e
|
|
||||||
fi
|
|
||||||
env:
|
|
||||||
HEADLAMP_URL: ${{ env.HEADLAMP_URL }}
|
|
||||||
HEADLAMP_TOKEN: ${{ env.HEADLAMP_TOKEN }}
|
|
||||||
|
|
||||||
- name: Collect deployment diagnostics on failure
|
|
||||||
if: failure()
|
|
||||||
run: |
|
|
||||||
echo "=== Pod state ==="
|
|
||||||
kubectl get pods -n "$E2E_NAMESPACE" -l "app.kubernetes.io/instance=$E2E_RELEASE" 2>&1 || true
|
|
||||||
echo "=== Pod describe ==="
|
|
||||||
kubectl describe pods -n "$E2E_NAMESPACE" -l "app.kubernetes.io/instance=$E2E_RELEASE" 2>&1 || true
|
|
||||||
echo "=== Container logs (current) ==="
|
|
||||||
kubectl logs -n "$E2E_NAMESPACE" -l "app.kubernetes.io/instance=$E2E_RELEASE" \
|
|
||||||
--tail=100 2>&1 || true
|
|
||||||
echo "=== Container logs (previous, if crashed) ==="
|
|
||||||
kubectl logs -n "$E2E_NAMESPACE" -l "app.kubernetes.io/instance=$E2E_RELEASE" \
|
|
||||||
--previous --tail=100 2>&1 || true
|
|
||||||
echo "=== Recent namespace events ==="
|
|
||||||
kubectl get events -n "$E2E_NAMESPACE" --sort-by='.lastTimestamp' 2>&1 | tail -20 || true
|
|
||||||
|
|
||||||
- name: Teardown E2E instance
|
|
||||||
if: always()
|
|
||||||
run: scripts/teardown-e2e-headlamp.sh
|
|
||||||
|
|
||||||
- name: Upload Playwright report
|
|
||||||
uses: actions/upload-artifact@v7
|
|
||||||
if: failure()
|
|
||||||
with:
|
|
||||||
name: playwright-report
|
|
||||||
path: playwright-report/
|
|
||||||
retention-days: 7
|
|
||||||
|
|
||||||
- name: Upload test results
|
|
||||||
uses: actions/upload-artifact@v7
|
|
||||||
if: failure()
|
|
||||||
with:
|
|
||||||
name: test-results
|
|
||||||
path: test-results/
|
|
||||||
retention-days: 7
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
{
|
|
||||||
"config": {
|
|
||||||
// Line length — not enforced for docs with code examples
|
|
||||||
"MD013": false,
|
|
||||||
// First line heading — files use YAML frontmatter, not headings
|
|
||||||
"MD041": false,
|
|
||||||
// Emphasis as heading — common pattern for Option 1/2/3 sections
|
|
||||||
"MD036": false,
|
|
||||||
// No duplicate heading — changelog files repeat section names intentionally
|
|
||||||
"MD024": false,
|
|
||||||
// Fenced code language — not always applicable for diagram blocks
|
|
||||||
"MD040": false,
|
|
||||||
// Table column style — table alignment is visual, not semantic
|
|
||||||
"MD060": false,
|
|
||||||
// Ordered list item prefix — number resets are intentional in documents
|
|
||||||
"MD029": false,
|
|
||||||
// No inline HTML — each elements are valid in valid Markdown
|
|
||||||
"MD033": false,
|
|
||||||
// List marker space — spacing after list markers varies by editor
|
|
||||||
"MD030": false,
|
|
||||||
// Blanks around headings — not always needed in compact docs
|
|
||||||
"MD022": false,
|
|
||||||
// Blanks around lists — not always needed in compact docs
|
|
||||||
"MD032": false,
|
|
||||||
// Blanks around fences — not always needed between adjacent blocks
|
|
||||||
"MD031": false,
|
|
||||||
// Multiple blanks — editor artifacts, not semantic
|
|
||||||
"MD012": false,
|
|
||||||
// Single title — files may have multiple H1 sections
|
|
||||||
"MD025": false,
|
|
||||||
// Trailing spaces — editor artifacts
|
|
||||||
"MD009": false,
|
|
||||||
// Bare URLs — URL shortening not always needed
|
|
||||||
"MD034": false,
|
|
||||||
// Single trailing newline — editor artifacts
|
|
||||||
"MD047": false,
|
|
||||||
// Trailing punctuation — heading punctuation is intentional
|
|
||||||
"MD026": false,
|
|
||||||
// Space in emphasis — double-asterisk bold spacing varies by renderer
|
|
||||||
"MD037": false,
|
|
||||||
// No hard tabs — some generated docs use tabs for indentation
|
|
||||||
"MD010": false,
|
|
||||||
// Code block style — generated docs may use inconsistent styles
|
|
||||||
"MD046": false,
|
|
||||||
// Comment style — generated docs have no comments
|
|
||||||
"MD048": false,
|
|
||||||
// Commands show output — shell examples intentionally show only commands
|
|
||||||
"MD014": false
|
|
||||||
},
|
|
||||||
"ignores": [
|
|
||||||
"docs/api-reference/generated/**"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
docs/api-reference/generated/**
|
|
||||||
@@ -32,12 +32,12 @@ All tests and `pnpm tsc` must pass before committing.
|
|||||||
|
|
||||||
```
|
```
|
||||||
src/
|
src/
|
||||||
├── index.tsx # Plugin entry: registerRoute, registerSidebarEntry; ArgoCDErrorBoundary
|
├── index.tsx # Plugin entry: registerRoute, registerSidebarEntry; ArgoCDErrorBoundary
|
||||||
├── test-utils.tsx # Shared test fixtures
|
├── test-utils.tsx # Shared test fixtures
|
||||||
├── api/
|
├── api/
|
||||||
│ └── argocd.ts # ArgoCD API types (Application, ApplicationsList)
|
│ └── argocd.ts # ArgoCD API types, ApiProxy request helpers
|
||||||
└── components/
|
└── components/
|
||||||
└── ApplicationsList.tsx # ArgoCD Applications List view with health/sync badges and filters
|
└── ArgoCDStubView.tsx # Placeholder Applications List view
|
||||||
```
|
```
|
||||||
|
|
||||||
## Code conventions
|
## Code conventions
|
||||||
|
|||||||
@@ -32,4 +32,3 @@ gh workflow run Release --field version=0.1.0
|
|||||||
## License
|
## License
|
||||||
|
|
||||||
Apache-2.0
|
Apache-2.0
|
||||||
|
|
||||||
|
|||||||
+3
-3
@@ -1,4 +1,4 @@
|
|||||||
version: "0.1.2"
|
version: "0.1.0"
|
||||||
name: headlamp-argocd
|
name: headlamp-argocd
|
||||||
displayName: ArgoCD Headlamp Plugin
|
displayName: ArgoCD Headlamp Plugin
|
||||||
createdAt: "2026-04-21T00:00:00Z"
|
createdAt: "2026-04-21T00:00:00Z"
|
||||||
@@ -26,8 +26,8 @@ maintainers:
|
|||||||
provider:
|
provider:
|
||||||
name: privilegedescalation
|
name: privilegedescalation
|
||||||
annotations:
|
annotations:
|
||||||
headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-argocd-plugin/releases/download/v0.1.2/privilegedescalation-headlamp-argocd-plugin-0.1.2.tar.gz"
|
headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-argocd-plugin/releases/download/v0.1.0/headlamp-argocd-0.1.0.tar.gz"
|
||||||
headlamp/plugin/archive-checksum: sha256:e71f84913eed1fd7e2d074912e3bfa668c4b1fefcbb069731a4e4277a998ca28
|
headlamp/plugin/archive-checksum: "sha256:1f4df43f79b795bdf4f70e1e3aa5bacadf689ea5584fdadf92fb677faab21c2c"
|
||||||
headlamp/plugin/version-compat: ">=0.26"
|
headlamp/plugin/version-compat: ">=0.26"
|
||||||
headlamp/plugin/distro-compat: "in-cluster"
|
headlamp/plugin/distro-compat: "in-cluster"
|
||||||
changes:
|
changes:
|
||||||
|
|||||||
@@ -1,36 +0,0 @@
|
|||||||
---
|
|
||||||
# RBAC for the GitHub Actions CI runner to manage the E2E Headlamp instance.
|
|
||||||
# CI-only test fixture — NOT for production use.
|
|
||||||
#
|
|
||||||
# Grants the ARC runner service account permissions in the headlamp-dev
|
|
||||||
# namespace to deploy and tear down a dedicated Headlamp instance.
|
|
||||||
# E2E resources run in `headlamp-dev` — nothing persists beyond a test run.
|
|
||||||
#
|
|
||||||
# Plugin is loaded via ConfigMap volume mount — no custom Docker images.
|
|
||||||
#
|
|
||||||
# Note: This RBAC is mirrored in privilegedescalation/infra (base/rbac/)
|
|
||||||
# and managed by Flux GitOps. The infra repo is the source of truth.
|
|
||||||
apiVersion: rbac.authorization.k8s.io/v1
|
|
||||||
kind: Role
|
|
||||||
metadata:
|
|
||||||
name: e2e-ci-runner
|
|
||||||
namespace: headlamp-dev
|
|
||||||
rules:
|
|
||||||
- apiGroups: ["apps"]
|
|
||||||
resources: ["deployments"]
|
|
||||||
verbs: ["get", "list", "create", "update", "patch", "delete", "watch"]
|
|
||||||
- apiGroups: [""]
|
|
||||||
resources: ["services", "serviceaccounts", "configmaps", "secrets", "events"]
|
|
||||||
verbs: ["get", "list", "watch", "create", "update", "patch", "delete"]
|
|
||||||
- apiGroups: [""]
|
|
||||||
resources: ["pods"]
|
|
||||||
verbs: ["get", "list", "watch"]
|
|
||||||
- apiGroups: [""]
|
|
||||||
resources: ["pods/log"]
|
|
||||||
verbs: ["get"]
|
|
||||||
- apiGroups: [""]
|
|
||||||
resources: ["serviceaccounts/token"]
|
|
||||||
verbs: ["create"]
|
|
||||||
- apiGroups: ["rbac.authorization.k8s.io"]
|
|
||||||
resources: ["roles", "rolebindings"]
|
|
||||||
verbs: ["get", "list", "create", "update", "patch", "delete"]
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
test.describe('ArgoCD plugin smoke tests', () => {
|
|
||||||
test('sidebar contains ArgoCD entry', async ({ page }) => {
|
|
||||||
await page.goto('/');
|
|
||||||
const sidebar = page.getByRole('navigation', { name: 'Navigation' });
|
|
||||||
await expect(sidebar).toBeVisible({ timeout: 15_000 });
|
|
||||||
await expect(sidebar.getByRole('button', { name: 'ArgoCD' })).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('applications list page loads', async ({ page }) => {
|
|
||||||
await page.goto('/c/main/argocd');
|
|
||||||
|
|
||||||
await expect(
|
|
||||||
page.getByRole('heading', { name: /argo.*cd/i })
|
|
||||||
).toBeVisible({ timeout: 15_000 });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import { test as setup, expect, Page } from '@playwright/test';
|
|
||||||
|
|
||||||
const AUTH_STATE_PATH = 'e2e/.auth/state.json';
|
|
||||||
|
|
||||||
async function authenticateWithToken(page: Page, token: string): Promise<void> {
|
|
||||||
await page.goto('/');
|
|
||||||
await page.waitForURL(/\/(login|token)$/);
|
|
||||||
|
|
||||||
if (page.url().includes('/login')) {
|
|
||||||
const useTokenBtn = page.getByRole('button', { name: /use a token/i });
|
|
||||||
await useTokenBtn.waitFor({ state: 'visible', timeout: 15_000 });
|
|
||||||
await useTokenBtn.click();
|
|
||||||
await page.waitForURL('**/token');
|
|
||||||
}
|
|
||||||
|
|
||||||
await page.getByRole('textbox', { name: /id token/i }).fill(token);
|
|
||||||
await page.getByRole('button', { name: /authenticate/i }).click();
|
|
||||||
|
|
||||||
await expect(page.getByRole('navigation', { name: 'Navigation' })).toBeVisible({
|
|
||||||
timeout: 15_000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setup('authenticate with Headlamp', async ({ page }) => {
|
|
||||||
const token = process.env.HEADLAMP_TOKEN;
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
throw new Error('Set HEADLAMP_TOKEN for token auth');
|
|
||||||
}
|
|
||||||
|
|
||||||
await authenticateWithToken(page, token);
|
|
||||||
|
|
||||||
await page.context().storageState({ path: AUTH_STATE_PATH });
|
|
||||||
});
|
|
||||||
+15
-5
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@privilegedescalation/headlamp-argocd-plugin",
|
"name": "@privilegedescalation/headlamp-argocd-plugin",
|
||||||
"version": "0.1.2",
|
"version": "0.1.0",
|
||||||
"description": "Headlamp plugin for ArgoCD visibility — monitors ArgoCD Applications, Rollouts, and health status",
|
"description": "Headlamp plugin for ArgoCD visibility — monitors ArgoCD Applications, Rollouts, and health status",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -23,12 +23,20 @@
|
|||||||
"format": "prettier --write src/",
|
"format": "prettier --write src/",
|
||||||
"format:check": "prettier --check src/",
|
"format:check": "prettier --check src/",
|
||||||
"test": "vitest run",
|
"test": "vitest run",
|
||||||
"test:watch": "vitest",
|
"test:watch": "vitest"
|
||||||
"e2e": "playwright test",
|
},
|
||||||
"e2e:headed": "playwright test --headed"
|
"peerDependencies": {
|
||||||
|
"react": "^18.0.0",
|
||||||
|
"react-dom": "^18.0.0"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"overrides": {
|
||||||
|
"tar": "^7.5.11",
|
||||||
|
"undici": "^7.24.3",
|
||||||
|
"flatted": "^3.4.2"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.58.2",
|
|
||||||
"@kinvolk/headlamp-plugin": "^0.13.0",
|
"@kinvolk/headlamp-plugin": "^0.13.0",
|
||||||
"@mui/material": "^5.15.14",
|
"@mui/material": "^5.15.14",
|
||||||
"@testing-library/jest-dom": "^6.4.8",
|
"@testing-library/jest-dom": "^6.4.8",
|
||||||
@@ -44,7 +52,9 @@
|
|||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
|
"tar": "^7.5.11",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
|
"undici": "^7.24.3",
|
||||||
"vitest": "^3.0.5"
|
"vitest": "^3.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import { defineConfig, devices } from '@playwright/test';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
testDir: './e2e',
|
|
||||||
timeout: 30_000,
|
|
||||||
expect: { timeout: 10_000 },
|
|
||||||
fullyParallel: false,
|
|
||||||
forbidOnly: !!process.env.CI,
|
|
||||||
retries: process.env.CI ? 1 : 0,
|
|
||||||
reporter: 'list',
|
|
||||||
use: {
|
|
||||||
baseURL: process.env.HEADLAMP_URL || 'http://headlamp-e2e-argocd.headlamp-dev.svc.cluster.local',
|
|
||||||
trace: 'on-first-retry',
|
|
||||||
screenshot: 'only-on-failure',
|
|
||||||
},
|
|
||||||
projects: [
|
|
||||||
{ name: 'setup', testMatch: /auth\.setup\.ts/, timeout: 60_000 },
|
|
||||||
{
|
|
||||||
name: 'chromium',
|
|
||||||
use: {
|
|
||||||
...devices['Desktop Chrome'],
|
|
||||||
storageState: 'e2e/.auth/state.json',
|
|
||||||
},
|
|
||||||
dependencies: ['setup'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
Generated
+15
-42
@@ -4,6 +4,11 @@ settings:
|
|||||||
autoInstallPeers: true
|
autoInstallPeers: true
|
||||||
excludeLinksFromLockfile: false
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
|
overrides:
|
||||||
|
tar: ^7.5.11
|
||||||
|
undici: ^7.24.3
|
||||||
|
flatted: ^3.4.2
|
||||||
|
|
||||||
importers:
|
importers:
|
||||||
|
|
||||||
.:
|
.:
|
||||||
@@ -17,9 +22,6 @@ importers:
|
|||||||
'@mui/material':
|
'@mui/material':
|
||||||
specifier: ^5.15.14
|
specifier: ^5.15.14
|
||||||
version: 5.18.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
version: 5.18.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
'@playwright/test':
|
|
||||||
specifier: ^1.58.2
|
|
||||||
version: 1.59.1
|
|
||||||
'@testing-library/jest-dom':
|
'@testing-library/jest-dom':
|
||||||
specifier: ^6.4.8
|
specifier: ^6.4.8
|
||||||
version: 6.9.1
|
version: 6.9.1
|
||||||
@@ -56,9 +58,15 @@ importers:
|
|||||||
react-router-dom:
|
react-router-dom:
|
||||||
specifier: ^5.3.0
|
specifier: ^5.3.0
|
||||||
version: 5.3.4(react@18.3.1)
|
version: 5.3.4(react@18.3.1)
|
||||||
|
tar:
|
||||||
|
specifier: ^7.5.11
|
||||||
|
version: 7.5.13
|
||||||
typescript:
|
typescript:
|
||||||
specifier: ~5.6.2
|
specifier: ~5.6.2
|
||||||
version: 5.6.3
|
version: 5.6.3
|
||||||
|
undici:
|
||||||
|
specifier: ^7.24.3
|
||||||
|
version: 7.25.0
|
||||||
vitest:
|
vitest:
|
||||||
specifier: ^3.0.5
|
specifier: ^3.0.5
|
||||||
version: 3.2.4(@types/debug@4.1.13)(@types/node@20.19.39)(jsdom@24.1.3)(msw@2.4.9(typescript@5.6.3))(terser@5.46.1)(yaml@2.8.3)
|
version: 3.2.4(@types/debug@4.1.13)(@types/node@20.19.39)(jsdom@24.1.3)(msw@2.4.9(typescript@5.6.3))(terser@5.46.1)(yaml@2.8.3)
|
||||||
@@ -999,11 +1007,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
|
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
|
|
||||||
'@playwright/test@1.59.1':
|
|
||||||
resolution: {integrity: sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==}
|
|
||||||
engines: {node: '>=18'}
|
|
||||||
hasBin: true
|
|
||||||
|
|
||||||
'@popperjs/core@2.11.8':
|
'@popperjs/core@2.11.8':
|
||||||
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
|
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
|
||||||
|
|
||||||
@@ -3085,11 +3088,6 @@ packages:
|
|||||||
fs.realpath@1.0.0:
|
fs.realpath@1.0.0:
|
||||||
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
|
||||||
|
|
||||||
fsevents@2.3.2:
|
|
||||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
|
|
||||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
|
||||||
os: [darwin]
|
|
||||||
|
|
||||||
fsevents@2.3.3:
|
fsevents@2.3.3:
|
||||||
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
|
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
|
||||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||||
@@ -4229,16 +4227,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
|
resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
|
||||||
playwright-core@1.59.1:
|
|
||||||
resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
|
|
||||||
engines: {node: '>=18'}
|
|
||||||
hasBin: true
|
|
||||||
|
|
||||||
playwright@1.59.1:
|
|
||||||
resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
|
|
||||||
engines: {node: '>=18'}
|
|
||||||
hasBin: true
|
|
||||||
|
|
||||||
possible-typed-array-names@1.1.0:
|
possible-typed-array-names@1.1.0:
|
||||||
resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
|
resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
@@ -6247,10 +6235,10 @@ snapshots:
|
|||||||
jsdom: 24.1.3
|
jsdom: 24.1.3
|
||||||
jsonpath-plus: 10.4.0
|
jsonpath-plus: 10.4.0
|
||||||
lodash: 4.18.1
|
lodash: 4.18.1
|
||||||
material-react-table: 2.13.3(0078ddeddc9e779fa84c03996c1db10e)
|
material-react-table: 2.13.3(330725fe5432f245d076f0c0dda1a7a7)
|
||||||
monaco-editor: 0.52.2
|
monaco-editor: 0.52.2
|
||||||
msw: 2.4.9(typescript@5.6.2)
|
msw: 2.4.9(typescript@5.6.2)
|
||||||
msw-storybook-addon: 2.0.3(msw@2.4.9(typescript@5.6.2))
|
msw-storybook-addon: 2.0.3(msw@2.4.9(typescript@5.6.3))
|
||||||
notistack: 3.0.2(csstype@3.2.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
notistack: 3.0.2(csstype@3.2.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
path-browserify: 1.0.1
|
path-browserify: 1.0.1
|
||||||
prettier: 2.8.8
|
prettier: 2.8.8
|
||||||
@@ -6645,10 +6633,6 @@ snapshots:
|
|||||||
'@pkgjs/parseargs@0.11.0':
|
'@pkgjs/parseargs@0.11.0':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@playwright/test@1.59.1':
|
|
||||||
dependencies:
|
|
||||||
playwright: 1.59.1
|
|
||||||
|
|
||||||
'@popperjs/core@2.11.8': {}
|
'@popperjs/core@2.11.8': {}
|
||||||
|
|
||||||
'@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
|
'@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
|
||||||
@@ -9207,9 +9191,6 @@ snapshots:
|
|||||||
|
|
||||||
fs.realpath@1.0.0: {}
|
fs.realpath@1.0.0: {}
|
||||||
|
|
||||||
fsevents@2.3.2:
|
|
||||||
optional: true
|
|
||||||
|
|
||||||
fsevents@2.3.3:
|
fsevents@2.3.3:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@@ -9956,7 +9937,7 @@ snapshots:
|
|||||||
'@types/minimatch': 3.0.5
|
'@types/minimatch': 3.0.5
|
||||||
minimatch: 3.1.5
|
minimatch: 3.1.5
|
||||||
|
|
||||||
material-react-table@2.13.3(0078ddeddc9e779fa84c03996c1db10e):
|
material-react-table@2.13.3(330725fe5432f245d076f0c0dda1a7a7):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
|
'@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
|
||||||
'@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
|
'@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
|
||||||
@@ -10262,7 +10243,7 @@ snapshots:
|
|||||||
|
|
||||||
ms@2.1.3: {}
|
ms@2.1.3: {}
|
||||||
|
|
||||||
msw-storybook-addon@2.0.3(msw@2.4.9(typescript@5.6.2)):
|
msw-storybook-addon@2.0.3(msw@2.4.9(typescript@5.6.3)):
|
||||||
dependencies:
|
dependencies:
|
||||||
is-node-process: 1.2.0
|
is-node-process: 1.2.0
|
||||||
msw: 2.4.9(typescript@5.6.2)
|
msw: 2.4.9(typescript@5.6.2)
|
||||||
@@ -10592,14 +10573,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
find-up: 5.0.0
|
find-up: 5.0.0
|
||||||
|
|
||||||
playwright-core@1.59.1: {}
|
|
||||||
|
|
||||||
playwright@1.59.1:
|
|
||||||
dependencies:
|
|
||||||
playwright-core: 1.59.1
|
|
||||||
optionalDependencies:
|
|
||||||
fsevents: 2.3.2
|
|
||||||
|
|
||||||
possible-typed-array-names@1.1.0: {}
|
possible-typed-array-names@1.1.0: {}
|
||||||
|
|
||||||
postcss-modules-extract-imports@3.1.0(postcss@8.5.10):
|
postcss-modules-extract-imports@3.1.0(postcss@8.5.10):
|
||||||
|
|||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
|
||||||
"extends": ["github>privilegedescalation/.github:renovate-config"]
|
|
||||||
}
|
|
||||||
@@ -1,173 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
set -euo pipefail
|
|
||||||
|
|
||||||
REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
|
|
||||||
DIST_DIR="$REPO_ROOT/dist"
|
|
||||||
|
|
||||||
E2E_NAMESPACE="${E2E_NAMESPACE:-headlamp-dev}"
|
|
||||||
E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e-argocd}"
|
|
||||||
HEADLAMP_VERSION="${HEADLAMP_VERSION:-v0.40.1}"
|
|
||||||
|
|
||||||
if [ ! -d "$DIST_DIR" ]; then
|
|
||||||
echo "ERROR: dist/ not found. Run 'npm run build' first." >&2
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "Checking RBAC permissions in namespace '${E2E_NAMESPACE}'..."
|
|
||||||
if ! kubectl auth can-i delete configmaps -n "$E2E_NAMESPACE" --quiet 2>/dev/null; then
|
|
||||||
echo "ERROR: Missing RBAC — cannot delete configmaps in namespace '${E2E_NAMESPACE}'." >&2
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "=== E2E Headlamp Deployment ==="
|
|
||||||
echo " Image: ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}"
|
|
||||||
echo " Namespace: $E2E_NAMESPACE"
|
|
||||||
echo " Release: $E2E_RELEASE"
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "Creating ConfigMap with plugin files..."
|
|
||||||
|
|
||||||
kubectl delete configmap headlamp-argocd-plugin \
|
|
||||||
-n "$E2E_NAMESPACE" --ignore-not-found
|
|
||||||
|
|
||||||
kubectl create configmap headlamp-argocd-plugin \
|
|
||||||
-n "$E2E_NAMESPACE" \
|
|
||||||
--from-file="$DIST_DIR" \
|
|
||||||
--from-file=package.json="$REPO_ROOT/package.json"
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "Removing any existing E2E deployment (clean-start)..."
|
|
||||||
kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
|
|
||||||
kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
|
|
||||||
kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "Deploying Headlamp E2E instance..."
|
|
||||||
|
|
||||||
kubectl apply -f - <<EOF
|
|
||||||
apiVersion: v1
|
|
||||||
kind: ServiceAccount
|
|
||||||
metadata:
|
|
||||||
name: ${E2E_RELEASE}
|
|
||||||
namespace: ${E2E_NAMESPACE}
|
|
||||||
---
|
|
||||||
apiVersion: apps/v1
|
|
||||||
kind: Deployment
|
|
||||||
metadata:
|
|
||||||
name: ${E2E_RELEASE}
|
|
||||||
namespace: ${E2E_NAMESPACE}
|
|
||||||
labels:
|
|
||||||
app.kubernetes.io/name: headlamp
|
|
||||||
app.kubernetes.io/instance: ${E2E_RELEASE}
|
|
||||||
spec:
|
|
||||||
replicas: 1
|
|
||||||
selector:
|
|
||||||
matchLabels:
|
|
||||||
app.kubernetes.io/name: headlamp
|
|
||||||
app.kubernetes.io/instance: ${E2E_RELEASE}
|
|
||||||
template:
|
|
||||||
metadata:
|
|
||||||
labels:
|
|
||||||
app.kubernetes.io/name: headlamp
|
|
||||||
app.kubernetes.io/instance: ${E2E_RELEASE}
|
|
||||||
spec:
|
|
||||||
serviceAccountName: ${E2E_RELEASE}
|
|
||||||
automountServiceAccountToken: true
|
|
||||||
securityContext: {}
|
|
||||||
containers:
|
|
||||||
- name: headlamp
|
|
||||||
image: ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}
|
|
||||||
imagePullPolicy: IfNotPresent
|
|
||||||
securityContext:
|
|
||||||
runAsNonRoot: true
|
|
||||||
privileged: false
|
|
||||||
runAsUser: 100
|
|
||||||
runAsGroup: 101
|
|
||||||
args:
|
|
||||||
- "-in-cluster"
|
|
||||||
- "-in-cluster-context-name=main"
|
|
||||||
- "-plugins-dir=/headlamp/plugins"
|
|
||||||
ports:
|
|
||||||
- name: http
|
|
||||||
containerPort: 4466
|
|
||||||
protocol: TCP
|
|
||||||
readinessProbe:
|
|
||||||
httpGet:
|
|
||||||
path: /
|
|
||||||
port: http
|
|
||||||
initialDelaySeconds: 5
|
|
||||||
periodSeconds: 5
|
|
||||||
failureThreshold: 6
|
|
||||||
livenessProbe:
|
|
||||||
httpGet:
|
|
||||||
path: /
|
|
||||||
port: http
|
|
||||||
initialDelaySeconds: 10
|
|
||||||
periodSeconds: 10
|
|
||||||
volumeMounts:
|
|
||||||
- name: argocd-plugin
|
|
||||||
mountPath: /headlamp/plugins/headlamp-argocd
|
|
||||||
readOnly: true
|
|
||||||
volumes:
|
|
||||||
- name: argocd-plugin
|
|
||||||
configMap:
|
|
||||||
name: headlamp-argocd-plugin
|
|
||||||
---
|
|
||||||
apiVersion: v1
|
|
||||||
kind: Service
|
|
||||||
metadata:
|
|
||||||
name: ${E2E_RELEASE}
|
|
||||||
namespace: ${E2E_NAMESPACE}
|
|
||||||
labels:
|
|
||||||
app.kubernetes.io/name: headlamp
|
|
||||||
app.kubernetes.io/instance: ${E2E_RELEASE}
|
|
||||||
spec:
|
|
||||||
type: ClusterIP
|
|
||||||
selector:
|
|
||||||
app.kubernetes.io/name: headlamp
|
|
||||||
app.kubernetes.io/instance: ${E2E_RELEASE}
|
|
||||||
ports:
|
|
||||||
- name: http
|
|
||||||
port: 80
|
|
||||||
targetPort: http
|
|
||||||
protocol: TCP
|
|
||||||
EOF
|
|
||||||
|
|
||||||
echo "Waiting for rollout..."
|
|
||||||
kubectl rollout status "deployment/${E2E_RELEASE}" \
|
|
||||||
-n "$E2E_NAMESPACE" --timeout=120s
|
|
||||||
|
|
||||||
SVC_URL="http://${E2E_RELEASE}.${E2E_NAMESPACE}.svc.cluster.local"
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "Waiting for ${SVC_URL} to be reachable..."
|
|
||||||
ATTEMPTS=0
|
|
||||||
MAX_ATTEMPTS=24
|
|
||||||
until curl -sf --max-time 5 "${SVC_URL}" -o /dev/null 2>/dev/null; do
|
|
||||||
ATTEMPTS=$((ATTEMPTS + 1))
|
|
||||||
if [ "$ATTEMPTS" -ge "$MAX_ATTEMPTS" ]; then
|
|
||||||
echo "ERROR: ${SVC_URL} not reachable after $((MAX_ATTEMPTS * 5))s" >&2
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
echo " [${ATTEMPTS}/${MAX_ATTEMPTS}] not yet reachable, retrying in 5s..."
|
|
||||||
sleep 5
|
|
||||||
done
|
|
||||||
echo ""
|
|
||||||
echo "E2E Headlamp is ready at: ${SVC_URL}"
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "Creating service account token for E2E auth..."
|
|
||||||
kubectl create serviceaccount headlamp-e2e-test \
|
|
||||||
-n "$E2E_NAMESPACE" --dry-run=client -o yaml | kubectl apply -f -
|
|
||||||
|
|
||||||
TOKEN=$(kubectl create token headlamp-e2e-test -n "$E2E_NAMESPACE" --duration=1h 2>/dev/null || echo "")
|
|
||||||
if [ -n "$TOKEN" ]; then
|
|
||||||
echo "HEADLAMP_URL=${SVC_URL}" > "$REPO_ROOT/.env.e2e"
|
|
||||||
echo "HEADLAMP_TOKEN=${TOKEN}" >> "$REPO_ROOT/.env.e2e"
|
|
||||||
echo "Wrote .env.e2e with HEADLAMP_URL and HEADLAMP_TOKEN"
|
|
||||||
else
|
|
||||||
echo " WARNING: Could not generate token."
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "E2E deployment complete."
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
set -euo pipefail
|
|
||||||
|
|
||||||
E2E_NAMESPACE="${E2E_NAMESPACE:-headlamp-dev}"
|
|
||||||
E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e-argocd}"
|
|
||||||
|
|
||||||
echo "=== E2E Teardown ==="
|
|
||||||
echo " Namespace: $E2E_NAMESPACE"
|
|
||||||
echo " Release: $E2E_RELEASE"
|
|
||||||
|
|
||||||
kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found || true
|
|
||||||
kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found || true
|
|
||||||
kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found || true
|
|
||||||
kubectl delete serviceaccount headlamp-e2e-test -n "$E2E_NAMESPACE" --ignore-not-found || true
|
|
||||||
kubectl delete configmap headlamp-argocd-plugin -n "$E2E_NAMESPACE" --ignore-not-found || true
|
|
||||||
|
|
||||||
echo "Teardown complete."
|
|
||||||
@@ -1,300 +0,0 @@
|
|||||||
import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import React from "react";
|
|
||||||
import { MemoryRouter, Route } from "react-router-dom";
|
|
||||||
import { describe, expect, it, vi } from "vitest";
|
|
||||||
import ApplicationDetail from "../components/ApplicationDetail";
|
|
||||||
|
|
||||||
// --- Pure function unit tests ---
|
|
||||||
|
|
||||||
function formatTimestamp(iso: string): string {
|
|
||||||
try {
|
|
||||||
const date = new Date(iso);
|
|
||||||
if (isNaN(date.getTime())) return "—";
|
|
||||||
return date.toLocaleString();
|
|
||||||
} catch {
|
|
||||||
return "—";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatRevision(revision: string): string {
|
|
||||||
if (!revision) return "—";
|
|
||||||
if (revision.length <= 8) return revision;
|
|
||||||
return revision.slice(0, 8);
|
|
||||||
}
|
|
||||||
|
|
||||||
describe("formatTimestamp", () => {
|
|
||||||
it("returns formatted date for valid ISO string", () => {
|
|
||||||
const result = formatTimestamp("2024-06-01T10:00:00Z");
|
|
||||||
expect(result).not.toBe("—");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns em dash for empty string", () => {
|
|
||||||
expect(formatTimestamp("")).toBe("—");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns em dash for invalid date", () => {
|
|
||||||
expect(formatTimestamp("not-a-date")).toBe("—");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("formatRevision", () => {
|
|
||||||
it("returns em dash for empty string", () => {
|
|
||||||
expect(formatRevision("")).toBe("—");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns revision as-is if 8 chars or fewer", () => {
|
|
||||||
expect(formatRevision("abc")).toBe("abc");
|
|
||||||
expect(formatRevision("12345678")).toBe("12345678");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("truncates revision to 8 chars if longer", () => {
|
|
||||||
expect(formatRevision("1234567890abcdef")).toBe("12345678");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- Component smoke tests ---
|
|
||||||
|
|
||||||
// Mock Headlamp lib
|
|
||||||
vi.mock("@kinvolk/headlamp-plugin/lib", () => ({
|
|
||||||
ApiProxy: { request: vi.fn() },
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Mock CommonComponents
|
|
||||||
vi.mock("@kinvolk/headlamp-plugin/lib/CommonComponents", () => ({
|
|
||||||
SectionBox: ({
|
|
||||||
children,
|
|
||||||
title,
|
|
||||||
}: {
|
|
||||||
children?: React.ReactNode;
|
|
||||||
title?: string;
|
|
||||||
}) => (
|
|
||||||
<div data-testid="section-box" data-title={title}>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
SectionHeader: ({ title }: { title: string }) => (
|
|
||||||
<div data-testid="section-header">{title}</div>
|
|
||||||
),
|
|
||||||
StatusLabel: ({
|
|
||||||
status,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
status: string;
|
|
||||||
children?: React.ReactNode;
|
|
||||||
}) => (
|
|
||||||
<span data-testid="status-label" data-status={status}>
|
|
||||||
{children}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
SimpleTable: ({
|
|
||||||
columns,
|
|
||||||
data,
|
|
||||||
emptyMessage,
|
|
||||||
}: {
|
|
||||||
columns: Array<{
|
|
||||||
label: string;
|
|
||||||
getter: (row: unknown) => React.ReactNode;
|
|
||||||
}>;
|
|
||||||
data: unknown[];
|
|
||||||
emptyMessage?: string;
|
|
||||||
}) =>
|
|
||||||
data.length === 0 ? (
|
|
||||||
<div data-testid="simple-table-empty">{emptyMessage}</div>
|
|
||||||
) : (
|
|
||||||
<table data-testid="simple-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
{columns.map((col) => (
|
|
||||||
<th key={col.label}>{col.label}</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{data.map((row, i) => (
|
|
||||||
<tr key={i}>
|
|
||||||
{columns.map((col) => (
|
|
||||||
<td key={col.label}>{col.getter(row)}</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
function renderWithRouter(
|
|
||||||
ui: React.ReactElement,
|
|
||||||
initialEntry = "/argocd/applications/test-app"
|
|
||||||
) {
|
|
||||||
return render(
|
|
||||||
<MemoryRouter initialEntries={[initialEntry]}>
|
|
||||||
<Route path="/argocd/applications/:name">{ui}</Route>
|
|
||||||
</MemoryRouter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
describe("ApplicationDetail component", () => {
|
|
||||||
it("renders loading state initially", async () => {
|
|
||||||
vi.mocked(ApiProxy.request).mockImplementation(
|
|
||||||
() => new Promise(() => {}) // never resolves — keeps loading
|
|
||||||
);
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationDetail />);
|
|
||||||
expect(screen.getByTestId("application-detail-loading")).toHaveTextContent(
|
|
||||||
"Loading application details"
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders error state when API fails", async () => {
|
|
||||||
vi.mocked(ApiProxy.request).mockRejectedValue(
|
|
||||||
new Error("connection refused")
|
|
||||||
);
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationDetail />);
|
|
||||||
|
|
||||||
await vi.waitFor(() => {
|
|
||||||
expect(
|
|
||||||
screen.getByTestId("application-detail-error")
|
|
||||||
).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
// fetchApplication catches the error and returns null, which sets "Application not found"
|
|
||||||
expect(screen.getByText(/Application not found/)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders application detail when API succeeds", async () => {
|
|
||||||
const mockApp = {
|
|
||||||
metadata: { name: "test-app", namespace: "argocd" },
|
|
||||||
spec: {
|
|
||||||
project: "default",
|
|
||||||
sourceRepoURL: "https://github.com/example/repo",
|
|
||||||
targetRevision: "v1.0.0",
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
health: { status: "Healthy" },
|
|
||||||
sync: { status: "Synced" },
|
|
||||||
resources: [
|
|
||||||
{
|
|
||||||
kind: "Deployment",
|
|
||||||
name: "example-app",
|
|
||||||
namespace: "default",
|
|
||||||
health: { status: "Healthy" },
|
|
||||||
status: "Synced",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
history: [
|
|
||||||
{
|
|
||||||
dexKey: "2024-06-01T10:00:00Z",
|
|
||||||
id: 1,
|
|
||||||
revision: "v1.0.0",
|
|
||||||
triggeredBy: "admin",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
|
|
||||||
if (path.includes("/events")) {
|
|
||||||
return Promise.resolve({ items: [] });
|
|
||||||
}
|
|
||||||
return Promise.resolve(mockApp);
|
|
||||||
});
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationDetail />);
|
|
||||||
|
|
||||||
await vi.waitFor(() => {
|
|
||||||
expect(
|
|
||||||
screen.getByTestId("application-detail-header")
|
|
||||||
).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(screen.getByText("ArgoCD — test-app")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders resource tree with resources", async () => {
|
|
||||||
const mockApp = {
|
|
||||||
metadata: { name: "test-app", namespace: "argocd" },
|
|
||||||
spec: {
|
|
||||||
project: "default",
|
|
||||||
sourceRepoURL: "https://github.com/example/repo",
|
|
||||||
targetRevision: "v1.0.0",
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
health: { status: "Healthy" },
|
|
||||||
sync: { status: "Synced" },
|
|
||||||
resources: [
|
|
||||||
{
|
|
||||||
kind: "Deployment",
|
|
||||||
name: "example-app",
|
|
||||||
namespace: "default",
|
|
||||||
health: { status: "Healthy" },
|
|
||||||
status: "Synced",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
kind: "Service",
|
|
||||||
name: "example-svc",
|
|
||||||
namespace: "default",
|
|
||||||
health: { status: "Healthy" },
|
|
||||||
status: "Synced",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
history: [],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
|
|
||||||
if (path.includes("/events")) {
|
|
||||||
return Promise.resolve({ items: [] });
|
|
||||||
}
|
|
||||||
return Promise.resolve(mockApp);
|
|
||||||
});
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationDetail />);
|
|
||||||
|
|
||||||
await vi.waitFor(() => {
|
|
||||||
expect(screen.getByTestId("simple-table")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Resource tree should show 2 data rows (plus 1 header row)
|
|
||||||
const tables = screen.getAllByTestId("simple-table");
|
|
||||||
expect(tables.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders sync history", async () => {
|
|
||||||
const mockApp = {
|
|
||||||
metadata: { name: "test-app", namespace: "argocd" },
|
|
||||||
spec: {
|
|
||||||
project: "default",
|
|
||||||
sourceRepoURL: "https://github.com/example/repo",
|
|
||||||
targetRevision: "v1.0.0",
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
health: { status: "Healthy" },
|
|
||||||
sync: { status: "Synced" },
|
|
||||||
resources: [],
|
|
||||||
history: [
|
|
||||||
{
|
|
||||||
dexKey: "2024-06-01T10:00:00Z",
|
|
||||||
id: 1,
|
|
||||||
revision: "v1.0.0",
|
|
||||||
triggeredBy: "admin",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
|
|
||||||
if (path.includes("/events")) {
|
|
||||||
return Promise.resolve({ items: [] });
|
|
||||||
}
|
|
||||||
return Promise.resolve(mockApp);
|
|
||||||
});
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationDetail />);
|
|
||||||
|
|
||||||
await vi.waitFor(() => {
|
|
||||||
expect(screen.getByTestId("simple-table")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,363 +0,0 @@
|
|||||||
import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import React from "react";
|
|
||||||
import { MemoryRouter } from "react-router-dom";
|
|
||||||
import { describe, expect, it, vi } from "vitest";
|
|
||||||
import {
|
|
||||||
ApplicationRow,
|
|
||||||
healthStatusToColor,
|
|
||||||
healthStatusToLabel,
|
|
||||||
syncStatusToColor,
|
|
||||||
} from "../components/ApplicationsList";
|
|
||||||
import ApplicationsList from "../components/ApplicationsList";
|
|
||||||
|
|
||||||
// --- Pure function unit tests ---
|
|
||||||
|
|
||||||
describe("healthStatusToColor", () => {
|
|
||||||
it("maps Healthy to success", () => {
|
|
||||||
expect(healthStatusToColor("Healthy")).toBe("success");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps Degraded to error", () => {
|
|
||||||
expect(healthStatusToColor("Degraded")).toBe("error");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps Progressing to warning", () => {
|
|
||||||
expect(healthStatusToColor("Progressing")).toBe("warning");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps Missing to default", () => {
|
|
||||||
expect(healthStatusToColor("Missing")).toBe("default");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps Unknown to default", () => {
|
|
||||||
expect(healthStatusToColor("Unknown")).toBe("default");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("syncStatusToColor", () => {
|
|
||||||
it("maps Synced to success", () => {
|
|
||||||
expect(syncStatusToColor("Synced")).toBe("success");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps OutOfSync to warning", () => {
|
|
||||||
expect(syncStatusToColor("OutOfSync")).toBe("warning");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maps Unknown to default", () => {
|
|
||||||
expect(syncStatusToColor("Unknown")).toBe("default");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("healthStatusToLabel", () => {
|
|
||||||
it("returns the status string as-is", () => {
|
|
||||||
expect(healthStatusToLabel("Healthy")).toBe("Healthy");
|
|
||||||
expect(healthStatusToLabel("Degraded")).toBe("Degraded");
|
|
||||||
expect(healthStatusToLabel("Progressing")).toBe("Progressing");
|
|
||||||
expect(healthStatusToLabel("Missing")).toBe("Missing");
|
|
||||||
expect(healthStatusToLabel("Unknown")).toBe("Unknown");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- Filter logic unit tests ---
|
|
||||||
|
|
||||||
const makeApp = (overrides: Partial<ApplicationRow> = {}): ApplicationRow => ({
|
|
||||||
name: "test-app",
|
|
||||||
namespace: "argocd",
|
|
||||||
project: "default",
|
|
||||||
healthStatus: "Healthy",
|
|
||||||
syncStatus: "Synced",
|
|
||||||
targetRevision: "HEAD",
|
|
||||||
lastSynced: "2024-01-01T00:00:00Z",
|
|
||||||
...overrides,
|
|
||||||
});
|
|
||||||
|
|
||||||
const ALL_HEALTH = "All" as const;
|
|
||||||
const ALL_SYNC = "All" as const;
|
|
||||||
|
|
||||||
function applyFilters(
|
|
||||||
apps: ApplicationRow[],
|
|
||||||
healthFilter: ApplicationRow["healthStatus"] | "All",
|
|
||||||
syncFilter: ApplicationRow["syncStatus"] | "All",
|
|
||||||
projectFilter: string
|
|
||||||
): ApplicationRow[] {
|
|
||||||
return apps.filter((app) => {
|
|
||||||
if (healthFilter !== ALL_HEALTH && app.healthStatus !== healthFilter)
|
|
||||||
return false;
|
|
||||||
if (syncFilter !== ALL_SYNC && app.syncStatus !== syncFilter) return false;
|
|
||||||
if (projectFilter !== "All" && app.project !== projectFilter) return false;
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
describe("ApplicationsList filter logic", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({
|
|
||||||
name: "app-1",
|
|
||||||
healthStatus: "Healthy",
|
|
||||||
syncStatus: "Synced",
|
|
||||||
project: "proj-a",
|
|
||||||
}),
|
|
||||||
makeApp({
|
|
||||||
name: "app-2",
|
|
||||||
healthStatus: "Healthy",
|
|
||||||
syncStatus: "OutOfSync",
|
|
||||||
project: "proj-a",
|
|
||||||
}),
|
|
||||||
makeApp({
|
|
||||||
name: "app-3",
|
|
||||||
healthStatus: "Degraded",
|
|
||||||
syncStatus: "OutOfSync",
|
|
||||||
project: "proj-b",
|
|
||||||
}),
|
|
||||||
makeApp({
|
|
||||||
name: "app-4",
|
|
||||||
healthStatus: "Progressing",
|
|
||||||
syncStatus: "Synced",
|
|
||||||
project: "proj-b",
|
|
||||||
}),
|
|
||||||
makeApp({
|
|
||||||
name: "app-5",
|
|
||||||
healthStatus: "Unknown",
|
|
||||||
syncStatus: "Unknown",
|
|
||||||
project: "proj-c",
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
|
|
||||||
it("returns all apps when all filters are All", () => {
|
|
||||||
const result = applyFilters(apps, ALL_HEALTH, ALL_SYNC, "All");
|
|
||||||
expect(result).toHaveLength(5);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("filters by health status", () => {
|
|
||||||
const result = applyFilters(apps, "Healthy", ALL_SYNC, "All");
|
|
||||||
expect(result).toHaveLength(2);
|
|
||||||
expect(result.map((a) => a.name)).toEqual(["app-1", "app-2"]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("filters by sync status", () => {
|
|
||||||
const result = applyFilters(apps, ALL_HEALTH, "OutOfSync", "All");
|
|
||||||
expect(result).toHaveLength(2);
|
|
||||||
expect(result.map((a) => a.name)).toEqual(["app-2", "app-3"]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("filters by project", () => {
|
|
||||||
const result = applyFilters(apps, ALL_HEALTH, ALL_SYNC, "proj-a");
|
|
||||||
expect(result).toHaveLength(2);
|
|
||||||
expect(result.map((a) => a.name)).toEqual(["app-1", "app-2"]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("combines multiple filters", () => {
|
|
||||||
const result = applyFilters(apps, "Healthy", "OutOfSync", "All");
|
|
||||||
expect(result).toHaveLength(1);
|
|
||||||
expect(result[0].name).toBe("app-2");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns empty array when no apps match", () => {
|
|
||||||
const result = applyFilters(apps, "Degraded", "Synced", "All");
|
|
||||||
expect(result).toHaveLength(0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- Component smoke test ---
|
|
||||||
|
|
||||||
// Mock Headlamp lib
|
|
||||||
vi.mock("@kinvolk/headlamp-plugin/lib", () => ({
|
|
||||||
ApiProxy: { request: vi.fn() },
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Mock MUI
|
|
||||||
vi.mock("@mui/material/FormControl", () => ({
|
|
||||||
default: ({ children }: { children: React.ReactNode }) => (
|
|
||||||
<div data-testid="form-control">{children}</div>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@mui/material/InputLabel", () => ({
|
|
||||||
default: ({ children, id }: { children: React.ReactNode; id?: string }) => (
|
|
||||||
<label data-testid="input-label" id={id}>
|
|
||||||
{children}
|
|
||||||
</label>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@mui/material/Select", () => ({
|
|
||||||
default: ({
|
|
||||||
children,
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
label,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
value: string;
|
|
||||||
onChange: (e: { target: { value: string } }) => void;
|
|
||||||
label?: string;
|
|
||||||
}) => (
|
|
||||||
<select
|
|
||||||
data-testid="select"
|
|
||||||
value={value}
|
|
||||||
onChange={(e) => onChange({ target: { value: e.target.value } })}
|
|
||||||
aria-label={label}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</select>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@mui/material/MenuItem", () => ({
|
|
||||||
default: ({
|
|
||||||
children,
|
|
||||||
value,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
value: string;
|
|
||||||
}) => (
|
|
||||||
<option data-testid="menu-item" value={value}>
|
|
||||||
{children}
|
|
||||||
</option>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock("@mui/material/Box", () => ({
|
|
||||||
default: ({ children }: { children: React.ReactNode }) => (
|
|
||||||
<div data-testid="box">{children}</div>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Mock CommonComponents
|
|
||||||
vi.mock("@kinvolk/headlamp-plugin/lib/CommonComponents", () => ({
|
|
||||||
SectionBox: ({ children }: { children?: React.ReactNode }) => (
|
|
||||||
<div data-testid="section-box">{children}</div>
|
|
||||||
),
|
|
||||||
SectionHeader: ({ title }: { title: string }) => (
|
|
||||||
<div data-testid="section-header">{title}</div>
|
|
||||||
),
|
|
||||||
StatusLabel: ({
|
|
||||||
status,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
status: string;
|
|
||||||
children?: React.ReactNode;
|
|
||||||
}) => (
|
|
||||||
<span data-testid="status-label" data-status={status}>
|
|
||||||
{children}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
SimpleTable: ({
|
|
||||||
columns,
|
|
||||||
data,
|
|
||||||
emptyMessage,
|
|
||||||
}: {
|
|
||||||
columns: Array<{
|
|
||||||
label: string;
|
|
||||||
getter: (row: unknown) => React.ReactNode;
|
|
||||||
}>;
|
|
||||||
data: unknown[];
|
|
||||||
emptyMessage?: string;
|
|
||||||
}) =>
|
|
||||||
data.length === 0 ? (
|
|
||||||
<div data-testid="simple-table-empty">{emptyMessage}</div>
|
|
||||||
) : (
|
|
||||||
<table data-testid="simple-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
{columns.map((col) => (
|
|
||||||
<th key={col.label}>{col.label}</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{data.map((row, i) => (
|
|
||||||
<tr key={i}>
|
|
||||||
{columns.map((col) => (
|
|
||||||
<td key={col.label}>{col.getter(row)}</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
function renderWithRouter(ui: React.ReactElement) {
|
|
||||||
return render(<MemoryRouter>{ui}</MemoryRouter>);
|
|
||||||
}
|
|
||||||
|
|
||||||
describe("ApplicationsList component", () => {
|
|
||||||
it("renders loading state initially", async () => {
|
|
||||||
vi.mocked(ApiProxy.request).mockImplementation(
|
|
||||||
() => new Promise(() => {}) // never resolves — keeps loading
|
|
||||||
);
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationsList />);
|
|
||||||
expect(screen.getByTestId("applications-loading")).toHaveTextContent(
|
|
||||||
"Loading ArgoCD applications"
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders error state when API fails", async () => {
|
|
||||||
vi.mocked(ApiProxy.request).mockRejectedValue(
|
|
||||||
new Error("connection refused")
|
|
||||||
);
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationsList />);
|
|
||||||
|
|
||||||
await vi.waitFor(() => {
|
|
||||||
expect(screen.getByTestId("applications-error")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(screen.getByText(/connection refused/)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders table with applications when API succeeds", async () => {
|
|
||||||
const mockResponse = {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
metadata: { name: "app-1", namespace: "argocd" },
|
|
||||||
spec: { project: "default", targetRevision: "v1.0.0" },
|
|
||||||
status: {
|
|
||||||
health: { status: "Healthy" },
|
|
||||||
sync: { status: "Synced" },
|
|
||||||
history: [
|
|
||||||
{ dexKey: "2024-06-01T10:00:00Z", id: 0, revision: "v1.0.0" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
metadata: { name: "app-2", namespace: "argocd" },
|
|
||||||
spec: { project: "default", targetRevision: "HEAD" },
|
|
||||||
status: {
|
|
||||||
health: { status: "Degraded" },
|
|
||||||
sync: { status: "OutOfSync" },
|
|
||||||
history: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
vi.mocked(ApiProxy.request).mockResolvedValue(mockResponse);
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationsList />);
|
|
||||||
|
|
||||||
await vi.waitFor(() => {
|
|
||||||
expect(screen.getByTestId("simple-table")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
const rows = screen.getAllByRole("row");
|
|
||||||
expect(rows.length).toBe(3); // 1 header + 2 data rows
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders empty message when no applications", async () => {
|
|
||||||
vi.mocked(ApiProxy.request).mockResolvedValue({ items: [] });
|
|
||||||
|
|
||||||
renderWithRouter(<ApplicationsList />);
|
|
||||||
|
|
||||||
await vi.waitFor(() => {
|
|
||||||
expect(screen.getByTestId("simple-table-empty")).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(
|
|
||||||
screen.getByText("No ArgoCD applications found.")
|
|
||||||
).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
import { describe, expect, it } from "vitest";
|
|
||||||
import type { ArgoCDApplication } from "../api/argocd";
|
|
||||||
|
|
||||||
// --- Matching helpers (copied for unit testing) ---
|
|
||||||
|
|
||||||
function appsForNamespace(
|
|
||||||
apps: ArgoCDApplication[],
|
|
||||||
namespace: string
|
|
||||||
): ArgoCDApplication[] {
|
|
||||||
return apps.filter((app) => app.spec?.destination?.namespace === namespace);
|
|
||||||
}
|
|
||||||
|
|
||||||
function appsForDeployment(
|
|
||||||
apps: ArgoCDApplication[],
|
|
||||||
deploymentName: string
|
|
||||||
): ArgoCDApplication[] {
|
|
||||||
return apps.filter((app) =>
|
|
||||||
(app.status?.resources ?? []).some(
|
|
||||||
(res) => res.kind === "Deployment" && res.name === deploymentName
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Fixture factory ---
|
|
||||||
|
|
||||||
function makeApp(
|
|
||||||
overrides: Partial<ArgoCDApplication> = {}
|
|
||||||
): ArgoCDApplication {
|
|
||||||
return {
|
|
||||||
metadata: { name: "test-app", namespace: "argocd" },
|
|
||||||
spec: { project: "default" },
|
|
||||||
status: {},
|
|
||||||
...overrides,
|
|
||||||
} as ArgoCDApplication;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- appsForNamespace tests ---
|
|
||||||
|
|
||||||
describe("appsForNamespace", () => {
|
|
||||||
it("returns apps whose destination.namespace matches", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-a", namespace: "argocd" },
|
|
||||||
spec: { project: "default", destination: { namespace: "web" } },
|
|
||||||
}),
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-b", namespace: "argocd" },
|
|
||||||
spec: { project: "default", destination: { namespace: "data" } },
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
expect(appsForNamespace(apps, "web").map((a) => a.metadata.name)).toEqual([
|
|
||||||
"app-a",
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns empty array when no match", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-a", namespace: "argocd" },
|
|
||||||
spec: { project: "default", destination: { namespace: "web" } },
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
expect(appsForNamespace(apps, "data")).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns empty array for empty app list", () => {
|
|
||||||
expect(appsForNamespace([], "web")).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns empty array when destination is undefined", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-a", namespace: "argocd" },
|
|
||||||
spec: { project: "default" },
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
expect(appsForNamespace(apps, "web")).toEqual([]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- appsForDeployment tests ---
|
|
||||||
|
|
||||||
describe("appsForDeployment", () => {
|
|
||||||
it("returns apps that manage the deployment via status.resources", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-a", namespace: "argocd" },
|
|
||||||
status: {
|
|
||||||
resources: [{ kind: "Deployment", name: "nginx", namespace: "web" }],
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-b", namespace: "argocd" },
|
|
||||||
status: {
|
|
||||||
resources: [{ kind: "Service", name: "nginx", namespace: "web" }],
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
expect(
|
|
||||||
appsForDeployment(apps, "nginx").map((a) => a.metadata.name)
|
|
||||||
).toEqual(["app-a"]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns empty array when no deployment resource matches", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-a", namespace: "argocd" },
|
|
||||||
status: {
|
|
||||||
resources: [{ kind: "Service", name: "nginx", namespace: "web" }],
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
expect(appsForDeployment(apps, "nginx")).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns empty array for empty app list", () => {
|
|
||||||
expect(appsForDeployment([], "nginx")).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns empty array when resources is undefined", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({ metadata: { name: "app-a", namespace: "argocd" }, status: {} }),
|
|
||||||
];
|
|
||||||
expect(appsForDeployment(apps, "nginx")).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("returns multiple apps that manage the same deployment", () => {
|
|
||||||
const apps = [
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-a", namespace: "argocd" },
|
|
||||||
status: { resources: [{ kind: "Deployment", name: "nginx" }] },
|
|
||||||
}),
|
|
||||||
makeApp({
|
|
||||||
metadata: { name: "app-b", namespace: "argocd" },
|
|
||||||
status: { resources: [{ kind: "Deployment", name: "nginx" }] },
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
expect(
|
|
||||||
appsForDeployment(apps, "nginx").map((a) => a.metadata.name)
|
|
||||||
).toEqual(["app-a", "app-b"]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
// --- ArgoCD API types ---
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Health status values returned by ArgoCD Application status.
|
|
||||||
*/
|
|
||||||
export type ArgoCDHealthStatus =
|
|
||||||
| "Healthy"
|
|
||||||
| "Degraded"
|
|
||||||
| "Progressing"
|
|
||||||
| "Missing"
|
|
||||||
| "Unknown";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sync status values returned by ArgoCD Application status.
|
|
||||||
*/
|
|
||||||
export type ArgoCDSyncStatus = "Synced" | "OutOfSync" | "Unknown";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An ArgoCD Application resource.
|
|
||||||
* Matches the ArgoCD server API /api/v1/applications response shape.
|
|
||||||
*/
|
|
||||||
export interface ArgoCDApplication {
|
|
||||||
metadata: {
|
|
||||||
name: string;
|
|
||||||
namespace: string;
|
|
||||||
uid?: string;
|
|
||||||
labels?: Record<string, string>;
|
|
||||||
annotations?: Record<string, string>;
|
|
||||||
creationTimestamp?: string;
|
|
||||||
};
|
|
||||||
spec: {
|
|
||||||
project: string;
|
|
||||||
sourceRepoURL?: string;
|
|
||||||
targetRevision?: string;
|
|
||||||
path?: string;
|
|
||||||
destination?: {
|
|
||||||
server?: string;
|
|
||||||
namespace?: string;
|
|
||||||
name?: string;
|
|
||||||
};
|
|
||||||
sources?: Array<{
|
|
||||||
repoURL?: string;
|
|
||||||
targetRevision?: string;
|
|
||||||
path?: string;
|
|
||||||
}>;
|
|
||||||
};
|
|
||||||
status: {
|
|
||||||
health?: {
|
|
||||||
status: ArgoCDHealthStatus;
|
|
||||||
message?: string;
|
|
||||||
};
|
|
||||||
sync?: {
|
|
||||||
status: ArgoCDSyncStatus;
|
|
||||||
comparedTo?: {
|
|
||||||
destination?: {
|
|
||||||
server?: string;
|
|
||||||
namespace?: string;
|
|
||||||
};
|
|
||||||
source?: {
|
|
||||||
repoURL?: string;
|
|
||||||
path?: string;
|
|
||||||
targetRevision?: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
history?: Array<{
|
|
||||||
dexKey: string; // ISO 8601 timestamp
|
|
||||||
id: number;
|
|
||||||
revision: string;
|
|
||||||
deployStartedAt?: string;
|
|
||||||
triggeredBy?: string;
|
|
||||||
}>;
|
|
||||||
resources?: Array<{
|
|
||||||
kind: string;
|
|
||||||
namespace?: string;
|
|
||||||
name: string;
|
|
||||||
group?: string;
|
|
||||||
status?: string;
|
|
||||||
health?: {
|
|
||||||
status: ArgoCDHealthStatus;
|
|
||||||
};
|
|
||||||
}>;
|
|
||||||
sourceType?: string;
|
|
||||||
summary?: {
|
|
||||||
externalURLs?: string[];
|
|
||||||
images?: string[];
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Response envelope for the ArgoCD Applications list API.
|
|
||||||
*/
|
|
||||||
export interface ArgoCDApplicationsList {
|
|
||||||
items: ArgoCDApplication[];
|
|
||||||
metadata?: {
|
|
||||||
resourceVersion?: string;
|
|
||||||
remainingItemCount?: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,375 +0,0 @@
|
|||||||
import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import {
|
|
||||||
SectionBox,
|
|
||||||
SectionHeader,
|
|
||||||
SimpleTable,
|
|
||||||
StatusLabel,
|
|
||||||
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import {
|
|
||||||
ArgoCDApplication,
|
|
||||||
ArgoCDHealthStatus,
|
|
||||||
ArgoCDSyncStatus,
|
|
||||||
} from "../api/argocd";
|
|
||||||
import { healthStatusToColor, syncStatusToColor } from "./ApplicationsList";
|
|
||||||
|
|
||||||
// --- Types ---
|
|
||||||
|
|
||||||
interface ResourceRow {
|
|
||||||
kind: string;
|
|
||||||
name: string;
|
|
||||||
namespace: string;
|
|
||||||
healthStatus: ArgoCDHealthStatus | "Unknown";
|
|
||||||
syncStatus: ArgoCDSyncStatus | "Unknown";
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SyncHistoryRow {
|
|
||||||
revision: string;
|
|
||||||
deployedAt: string;
|
|
||||||
initiatedBy: string;
|
|
||||||
status: "Success" | "Failed" | "Unknown";
|
|
||||||
}
|
|
||||||
|
|
||||||
interface K8sEvent {
|
|
||||||
metadata: {
|
|
||||||
name: string;
|
|
||||||
namespace: string;
|
|
||||||
creationTimestamp: string;
|
|
||||||
};
|
|
||||||
type: string;
|
|
||||||
reason: string;
|
|
||||||
message: string;
|
|
||||||
involvedObject: {
|
|
||||||
name: string;
|
|
||||||
kind: string;
|
|
||||||
};
|
|
||||||
source: {
|
|
||||||
component: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Helpers ---
|
|
||||||
|
|
||||||
function healthStatusToLabel(status: ArgoCDHealthStatus | "Unknown"): string {
|
|
||||||
return status === "Unknown" ? "Unknown" : status;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTimestamp(iso: string): string {
|
|
||||||
try {
|
|
||||||
const date = new Date(iso);
|
|
||||||
if (isNaN(date.getTime())) return "—";
|
|
||||||
return date.toLocaleString();
|
|
||||||
} catch {
|
|
||||||
return "—";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatRevision(revision: string): string {
|
|
||||||
if (!revision) return "—";
|
|
||||||
if (revision.length <= 8) return revision;
|
|
||||||
return revision.slice(0, 8);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- API ---
|
|
||||||
|
|
||||||
const ARGOCD_API_PATH =
|
|
||||||
"/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
|
|
||||||
|
|
||||||
async function fetchApplication(
|
|
||||||
name: string
|
|
||||||
): Promise<ArgoCDApplication | null> {
|
|
||||||
try {
|
|
||||||
const response = (await ApiProxy.request(
|
|
||||||
`${ARGOCD_API_PATH}/${name}`
|
|
||||||
)) as ArgoCDApplication;
|
|
||||||
return response;
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchApplicationEvents(
|
|
||||||
namespace: string,
|
|
||||||
appName: string
|
|
||||||
): Promise<K8sEvent[]> {
|
|
||||||
try {
|
|
||||||
const fieldSelector = encodeURIComponent(`involvedObject.name=${appName}`);
|
|
||||||
const response = (await ApiProxy.request(
|
|
||||||
`/api/v1/namespaces/${namespace}/events?fieldSelector=${fieldSelector}`
|
|
||||||
)) as { items: K8sEvent[] };
|
|
||||||
return response.items ?? [];
|
|
||||||
} catch {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Component ---
|
|
||||||
|
|
||||||
export default function ApplicationDetail() {
|
|
||||||
const { name } = useParams<{ name: string }>();
|
|
||||||
const [application, setApplication] = useState<ArgoCDApplication | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const [events, setEvents] = useState<K8sEvent[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!name) return;
|
|
||||||
|
|
||||||
let cancelled = false;
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
fetchApplication(name)
|
|
||||||
.then((app) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
if (!app) {
|
|
||||||
setError("Application not found");
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setApplication(app);
|
|
||||||
setLoading(false);
|
|
||||||
|
|
||||||
// Fetch events in parallel
|
|
||||||
const namespace = app.metadata?.namespace ?? "argocd";
|
|
||||||
fetchApplicationEvents(namespace, name).then((evts) => {
|
|
||||||
if (!cancelled) setEvents(evts);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((err: unknown) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
const message = err instanceof Error ? err.message : String(err);
|
|
||||||
setError(message);
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [name]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SectionHeader title="Application Detail" />
|
|
||||||
<SectionBox>
|
|
||||||
<div data-testid="application-detail-loading">
|
|
||||||
Loading application details...
|
|
||||||
</div>
|
|
||||||
</SectionBox>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error || !application) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SectionHeader title="Application Detail" />
|
|
||||||
<SectionBox>
|
|
||||||
<div data-testid="application-detail-error">
|
|
||||||
<StatusLabel status="error">
|
|
||||||
{error ?? "Application not found"}
|
|
||||||
</StatusLabel>
|
|
||||||
</div>
|
|
||||||
</SectionBox>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const healthStatus =
|
|
||||||
(application.status?.health?.status as ArgoCDHealthStatus) ?? "Unknown";
|
|
||||||
const syncStatus =
|
|
||||||
(application.status?.sync?.status as ArgoCDSyncStatus) ?? "Unknown";
|
|
||||||
const targetRevision = application.spec?.targetRevision ?? "—";
|
|
||||||
const repoURL = application.spec?.sourceRepoURL ?? "—";
|
|
||||||
const project = application.spec?.project ?? "—";
|
|
||||||
const namespace = application.metadata?.namespace ?? "—";
|
|
||||||
|
|
||||||
// Build resource rows
|
|
||||||
const resourceRows: ResourceRow[] = (application.status?.resources ?? []).map(
|
|
||||||
(res) => ({
|
|
||||||
kind: res.kind ?? "Unknown",
|
|
||||||
name: res.name ?? "unknown",
|
|
||||||
namespace: res.namespace ?? "—",
|
|
||||||
healthStatus: (res.health?.status as ArgoCDHealthStatus) ?? "Unknown",
|
|
||||||
syncStatus: (res.status as ArgoCDSyncStatus) ?? "Unknown",
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Build sync history rows (last 10)
|
|
||||||
const historyRows: SyncHistoryRow[] = (application.status?.history ?? [])
|
|
||||||
.slice(-10)
|
|
||||||
.map((entry) => ({
|
|
||||||
revision: formatRevision(entry.revision),
|
|
||||||
deployedAt: formatTimestamp(entry.dexKey),
|
|
||||||
initiatedBy: entry.triggeredBy ?? "automated",
|
|
||||||
status: entry.id !== undefined ? "Success" : "Unknown",
|
|
||||||
}));
|
|
||||||
|
|
||||||
const resourceColumns = [
|
|
||||||
{
|
|
||||||
label: "Kind",
|
|
||||||
getter: (row: ResourceRow) => row.kind,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Name",
|
|
||||||
getter: (row: ResourceRow) => row.name,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Namespace",
|
|
||||||
getter: (row: ResourceRow) => row.namespace,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Health",
|
|
||||||
getter: (row: ResourceRow) => (
|
|
||||||
<StatusLabel status={healthStatusToColor(row.healthStatus)}>
|
|
||||||
{healthStatusToLabel(row.healthStatus)}
|
|
||||||
</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Sync",
|
|
||||||
getter: (row: ResourceRow) => (
|
|
||||||
<StatusLabel status={syncStatusToColor(row.syncStatus)}>
|
|
||||||
{row.syncStatus}
|
|
||||||
</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const historyColumns = [
|
|
||||||
{
|
|
||||||
label: "Revision",
|
|
||||||
getter: (row: SyncHistoryRow) => row.revision,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Deployed At",
|
|
||||||
getter: (row: SyncHistoryRow) => row.deployedAt,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Initiated By",
|
|
||||||
getter: (row: SyncHistoryRow) => row.initiatedBy,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Status",
|
|
||||||
getter: (row: SyncHistoryRow) => (
|
|
||||||
<StatusLabel status={row.status === "Success" ? "success" : "warning"}>
|
|
||||||
{row.status}
|
|
||||||
</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SectionHeader title={`ArgoCD — ${name}`} />
|
|
||||||
<SectionBox>
|
|
||||||
{/* Header metadata */}
|
|
||||||
<div data-testid="application-detail-header">
|
|
||||||
<StatusLabel status={healthStatusToColor(healthStatus)}>
|
|
||||||
{healthStatusToLabel(healthStatus)}
|
|
||||||
</StatusLabel>{" "}
|
|
||||||
<StatusLabel status={syncStatusToColor(syncStatus)}>
|
|
||||||
{syncStatus}
|
|
||||||
</StatusLabel>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<strong>Project:</strong>
|
|
||||||
</td>
|
|
||||||
<td>{project}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<strong>Namespace:</strong>
|
|
||||||
</td>
|
|
||||||
<td>{namespace}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<strong>Target Revision:</strong>
|
|
||||||
</td>
|
|
||||||
<td>{targetRevision}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<strong>Repository:</strong>
|
|
||||||
</td>
|
|
||||||
<td>{repoURL}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</SectionBox>
|
|
||||||
|
|
||||||
{/* Resource Tree */}
|
|
||||||
<SectionBox title="Resource Tree">
|
|
||||||
{resourceRows.length === 0 ? (
|
|
||||||
<div data-testid="resource-tree-empty">
|
|
||||||
No resources managed by this application.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<SimpleTable
|
|
||||||
columns={resourceColumns}
|
|
||||||
data={resourceRows}
|
|
||||||
emptyMessage="No resources found."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SectionBox>
|
|
||||||
|
|
||||||
{/* Sync History */}
|
|
||||||
<SectionBox title="Sync History">
|
|
||||||
{historyRows.length === 0 ? (
|
|
||||||
<div data-testid="sync-history-empty">No sync history available.</div>
|
|
||||||
) : (
|
|
||||||
<SimpleTable
|
|
||||||
columns={historyColumns}
|
|
||||||
data={historyRows}
|
|
||||||
emptyMessage="No sync history found."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SectionBox>
|
|
||||||
|
|
||||||
{/* Events */}
|
|
||||||
<SectionBox title="Events">
|
|
||||||
{events.length === 0 ? (
|
|
||||||
<div data-testid="events-empty">
|
|
||||||
No events found for this application.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<SimpleTable
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
label: "Type",
|
|
||||||
getter: (row: K8sEvent) => row.type,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Reason",
|
|
||||||
getter: (row: K8sEvent) => row.reason,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Message",
|
|
||||||
getter: (row: K8sEvent) => row.message,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Source",
|
|
||||||
getter: (row: K8sEvent) => row.source?.component ?? "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Age",
|
|
||||||
getter: (row: K8sEvent) =>
|
|
||||||
formatTimestamp(row.metadata?.creationTimestamp ?? ""),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
data={events}
|
|
||||||
emptyMessage="No events found."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SectionBox>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,292 +0,0 @@
|
|||||||
import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import {
|
|
||||||
SectionBox,
|
|
||||||
SectionHeader,
|
|
||||||
SimpleTable,
|
|
||||||
StatusLabel,
|
|
||||||
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
|
|
||||||
import Box from "@mui/material/Box";
|
|
||||||
import FormControl from "@mui/material/FormControl";
|
|
||||||
import InputLabel from "@mui/material/InputLabel";
|
|
||||||
import MenuItem from "@mui/material/MenuItem";
|
|
||||||
import Select from "@mui/material/Select";
|
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
|
||||||
import { Link, useLocation } from "react-router-dom";
|
|
||||||
import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
|
|
||||||
|
|
||||||
// --- Types ---
|
|
||||||
|
|
||||||
export type HealthStatus =
|
|
||||||
| "Healthy"
|
|
||||||
| "Degraded"
|
|
||||||
| "Progressing"
|
|
||||||
| "Missing"
|
|
||||||
| "Unknown";
|
|
||||||
export type SyncStatus = "Synced" | "OutOfSync" | "Unknown";
|
|
||||||
|
|
||||||
export interface ApplicationRow {
|
|
||||||
name: string;
|
|
||||||
namespace: string;
|
|
||||||
project: string;
|
|
||||||
healthStatus: HealthStatus;
|
|
||||||
syncStatus: SyncStatus;
|
|
||||||
targetRevision: string;
|
|
||||||
lastSynced: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Helpers ---
|
|
||||||
|
|
||||||
export function healthStatusToLabel(status: HealthStatus): string {
|
|
||||||
return status;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function healthStatusToColor(
|
|
||||||
status: HealthStatus
|
|
||||||
): "success" | "warning" | "error" | "default" {
|
|
||||||
switch (status) {
|
|
||||||
case "Healthy":
|
|
||||||
return "success";
|
|
||||||
case "Degraded":
|
|
||||||
return "error";
|
|
||||||
case "Progressing":
|
|
||||||
return "warning";
|
|
||||||
case "Missing":
|
|
||||||
case "Unknown":
|
|
||||||
return "default";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function syncStatusToColor(
|
|
||||||
status: SyncStatus
|
|
||||||
): "success" | "warning" | "default" {
|
|
||||||
switch (status) {
|
|
||||||
case "Synced":
|
|
||||||
return "success";
|
|
||||||
case "OutOfSync":
|
|
||||||
return "warning";
|
|
||||||
case "Unknown":
|
|
||||||
return "default";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatLastSynced(
|
|
||||||
history: ArgoCDApplication["status"]["history"]
|
|
||||||
): string | null {
|
|
||||||
if (!history || history.length === 0) return null;
|
|
||||||
const last = history[history.length - 1];
|
|
||||||
if (!last || !last.dexKey) return null;
|
|
||||||
const date = new Date(last.dexKey);
|
|
||||||
if (isNaN(date.getTime())) return null;
|
|
||||||
return date.toLocaleString();
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- API ---
|
|
||||||
|
|
||||||
const ARGOCD_API_PATH =
|
|
||||||
"/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
|
|
||||||
|
|
||||||
async function fetchApplications(): Promise<ArgoCDApplicationsList> {
|
|
||||||
const response = (await ApiProxy.request(
|
|
||||||
ARGOCD_API_PATH
|
|
||||||
)) as ArgoCDApplicationsList;
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Component ---
|
|
||||||
|
|
||||||
export default function ApplicationsList() {
|
|
||||||
const location = useLocation();
|
|
||||||
const [applications, setApplications] = useState<ApplicationRow[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const [healthFilter, setHealthFilter] = useState<HealthStatus | "All">("All");
|
|
||||||
const [syncFilter, setSyncFilter] = useState<SyncStatus | "All">("All");
|
|
||||||
const [projectFilter, setProjectFilter] = useState<string>("All");
|
|
||||||
|
|
||||||
// Initialize project filter from URL search param
|
|
||||||
useEffect(() => {
|
|
||||||
const params = new URLSearchParams(location.search);
|
|
||||||
const project = params.get("project");
|
|
||||||
if (project) {
|
|
||||||
setProjectFilter(project);
|
|
||||||
}
|
|
||||||
}, [location.search]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
fetchApplications()
|
|
||||||
.then((data) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
const rows: ApplicationRow[] = (data.items ?? []).map((app) => ({
|
|
||||||
name: app.metadata?.name ?? "unknown",
|
|
||||||
namespace: app.metadata?.namespace ?? "unknown",
|
|
||||||
project: app.spec?.project ?? "unknown",
|
|
||||||
healthStatus:
|
|
||||||
(app.status?.health?.status as HealthStatus) ?? "Unknown",
|
|
||||||
syncStatus: (app.status?.sync?.status as SyncStatus) ?? "Unknown",
|
|
||||||
targetRevision: app.spec?.targetRevision ?? "",
|
|
||||||
lastSynced: formatLastSynced(app.status?.history),
|
|
||||||
}));
|
|
||||||
setApplications(rows);
|
|
||||||
setLoading(false);
|
|
||||||
})
|
|
||||||
.catch((err: unknown) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
const message = err instanceof Error ? err.message : String(err);
|
|
||||||
setError(message);
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const projects = useMemo(() => {
|
|
||||||
const set = new Set(applications.map((app) => app.project));
|
|
||||||
return Array.from(set).sort();
|
|
||||||
}, [applications]);
|
|
||||||
|
|
||||||
const filtered = useMemo(() => {
|
|
||||||
return applications.filter((app) => {
|
|
||||||
if (healthFilter !== "All" && app.healthStatus !== healthFilter)
|
|
||||||
return false;
|
|
||||||
if (syncFilter !== "All" && app.syncStatus !== syncFilter) return false;
|
|
||||||
if (projectFilter !== "All" && app.project !== projectFilter)
|
|
||||||
return false;
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}, [applications, healthFilter, syncFilter, projectFilter]);
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
label: "App Name",
|
|
||||||
getter: (row: ApplicationRow) => (
|
|
||||||
<Link to={`/argocd/applications/${row.name}`}>{row.name}</Link>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Namespace",
|
|
||||||
getter: (row: ApplicationRow) => row.namespace,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Project",
|
|
||||||
getter: (row: ApplicationRow) => row.project,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Health",
|
|
||||||
getter: (row: ApplicationRow) => (
|
|
||||||
<StatusLabel status={healthStatusToColor(row.healthStatus)}>
|
|
||||||
{healthStatusToLabel(row.healthStatus)}
|
|
||||||
</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Sync",
|
|
||||||
getter: (row: ApplicationRow) => (
|
|
||||||
<StatusLabel status={syncStatusToColor(row.syncStatus)}>
|
|
||||||
{row.syncStatus}
|
|
||||||
</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Target Revision",
|
|
||||||
getter: (row: ApplicationRow) => row.targetRevision || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Last Synced",
|
|
||||||
getter: (row: ApplicationRow) => row.lastSynced ?? "—",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SectionHeader title="ArgoCD — Applications" />
|
|
||||||
<SectionBox>
|
|
||||||
{/* Filters */}
|
|
||||||
<Box sx={{ display: "flex", gap: 2, mb: 2, flexWrap: "wrap" }}>
|
|
||||||
<FormControl size="small" sx={{ minWidth: 150 }}>
|
|
||||||
<InputLabel id="health-filter-label">Health</InputLabel>
|
|
||||||
<Select
|
|
||||||
labelId="health-filter-label"
|
|
||||||
label="Health"
|
|
||||||
value={healthFilter}
|
|
||||||
onChange={(e) =>
|
|
||||||
setHealthFilter(e.target.value as HealthStatus | "All")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<MenuItem value="All">All</MenuItem>
|
|
||||||
<MenuItem value="Healthy">Healthy</MenuItem>
|
|
||||||
<MenuItem value="Degraded">Degraded</MenuItem>
|
|
||||||
<MenuItem value="Progressing">Progressing</MenuItem>
|
|
||||||
<MenuItem value="Missing">Missing</MenuItem>
|
|
||||||
<MenuItem value="Unknown">Unknown</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormControl size="small" sx={{ minWidth: 150 }}>
|
|
||||||
<InputLabel id="sync-filter-label">Sync</InputLabel>
|
|
||||||
<Select
|
|
||||||
labelId="sync-filter-label"
|
|
||||||
label="Sync"
|
|
||||||
value={syncFilter}
|
|
||||||
onChange={(e) =>
|
|
||||||
setSyncFilter(e.target.value as SyncStatus | "All")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<MenuItem value="All">All</MenuItem>
|
|
||||||
<MenuItem value="Synced">Synced</MenuItem>
|
|
||||||
<MenuItem value="OutOfSync">OutOfSync</MenuItem>
|
|
||||||
<MenuItem value="Unknown">Unknown</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormControl size="small" sx={{ minWidth: 150 }}>
|
|
||||||
<InputLabel id="project-filter-label">Project</InputLabel>
|
|
||||||
<Select
|
|
||||||
labelId="project-filter-label"
|
|
||||||
label="Project"
|
|
||||||
value={projectFilter}
|
|
||||||
onChange={(e) => setProjectFilter(e.target.value)}
|
|
||||||
>
|
|
||||||
<MenuItem value="All">All</MenuItem>
|
|
||||||
{projects.map((p) => (
|
|
||||||
<MenuItem key={p} value={p}>
|
|
||||||
{p}
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Table */}
|
|
||||||
{loading ? (
|
|
||||||
<div data-testid="applications-loading">
|
|
||||||
Loading ArgoCD applications...
|
|
||||||
</div>
|
|
||||||
) : error ? (
|
|
||||||
<div data-testid="applications-error">
|
|
||||||
<StatusLabel status="error">ArgoCD not detected</StatusLabel>
|
|
||||||
<p>
|
|
||||||
Could not reach the ArgoCD server. Ensure ArgoCD is installed in
|
|
||||||
the <code>argocd</code> namespace and the server is reachable.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>Error:</strong> {error}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<SimpleTable
|
|
||||||
columns={columns}
|
|
||||||
data={filtered}
|
|
||||||
emptyMessage="No ArgoCD applications found."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SectionBox>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import {
|
|
||||||
Link,
|
|
||||||
StatusLabel,
|
|
||||||
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
|
|
||||||
import { syncStatusToColor } from "./ApplicationsList";
|
|
||||||
|
|
||||||
// --- API ---
|
|
||||||
|
|
||||||
const ARGOCD_API_PATH =
|
|
||||||
"/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
|
|
||||||
|
|
||||||
async function fetchApplications(): Promise<ArgoCDApplicationsList> {
|
|
||||||
const response = (await ApiProxy.request(
|
|
||||||
ARGOCD_API_PATH
|
|
||||||
)) as ArgoCDApplicationsList;
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Matching helper ---
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns ArgoCD applications that manage the given Deployment by matching
|
|
||||||
* kind=Deployment and name in Application.status.resources[].
|
|
||||||
*/
|
|
||||||
export function appsForDeployment(
|
|
||||||
apps: ArgoCDApplication[],
|
|
||||||
deploymentName: string
|
|
||||||
): ArgoCDApplication[] {
|
|
||||||
return apps.filter((app) =>
|
|
||||||
(app.status?.resources ?? []).some(
|
|
||||||
(res) => res.kind === "Deployment" && res.name === deploymentName
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Component ---
|
|
||||||
|
|
||||||
interface DeploymentArgoBadgeProps {
|
|
||||||
deploymentName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DeploymentArgoBadge({
|
|
||||||
deploymentName,
|
|
||||||
}: DeploymentArgoBadgeProps) {
|
|
||||||
const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
fetchApplications()
|
|
||||||
.then((data) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
const matched = appsForDeployment(data.items ?? [], deploymentName);
|
|
||||||
setApps(matched);
|
|
||||||
setLoading(false);
|
|
||||||
})
|
|
||||||
.catch((err: unknown) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [deploymentName]);
|
|
||||||
|
|
||||||
if (loading || error || !apps || apps.length === 0) {
|
|
||||||
return null; // Show nothing when no matching application
|
|
||||||
}
|
|
||||||
|
|
||||||
const app = apps[0]; // Show first matching app
|
|
||||||
const lastSynced = app.status?.history?.length
|
|
||||||
? app.status.history[app.status.history.length - 1]?.dexKey
|
|
||||||
: null;
|
|
||||||
const lastSyncedStr = lastSynced
|
|
||||||
? new Date(lastSynced).toLocaleString()
|
|
||||||
: "—";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span>
|
|
||||||
|
|
||||||
<Link to={`/argocd/applications/${app.metadata.name}`}>
|
|
||||||
ArgoCD: {app.metadata.name}
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<StatusLabel
|
|
||||||
status={syncStatusToColor(app.status?.sync?.status ?? "Unknown")}
|
|
||||||
>
|
|
||||||
{app.status?.sync?.status ?? "Unknown"}
|
|
||||||
</StatusLabel>
|
|
||||||
|
|
||||||
<span style={{ fontSize: "0.85em", opacity: 0.8 }}>
|
|
||||||
Last sync: {lastSyncedStr}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import {
|
|
||||||
Link,
|
|
||||||
SectionBox,
|
|
||||||
StatusLabel,
|
|
||||||
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
|
|
||||||
import {
|
|
||||||
healthStatusToColor,
|
|
||||||
healthStatusToLabel,
|
|
||||||
syncStatusToColor,
|
|
||||||
} from "./ApplicationsList";
|
|
||||||
|
|
||||||
// --- API ---
|
|
||||||
|
|
||||||
const ARGOCD_API_PATH =
|
|
||||||
"/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
|
|
||||||
|
|
||||||
async function fetchApplications(): Promise<ArgoCDApplicationsList> {
|
|
||||||
const response = (await ApiProxy.request(
|
|
||||||
ARGOCD_API_PATH
|
|
||||||
)) as ArgoCDApplicationsList;
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Matching helper ---
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns ArgoCD applications whose spec.destination.namespace matches
|
|
||||||
* the given namespace name.
|
|
||||||
*/
|
|
||||||
export function appsForNamespace(
|
|
||||||
apps: ArgoCDApplication[],
|
|
||||||
namespace: string
|
|
||||||
): ArgoCDApplication[] {
|
|
||||||
return apps.filter((app) => app.spec?.destination?.namespace === namespace);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Component ---
|
|
||||||
|
|
||||||
interface NamespaceArgoSectionProps {
|
|
||||||
namespaceName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function NamespaceArgoSection({
|
|
||||||
namespaceName,
|
|
||||||
}: NamespaceArgoSectionProps) {
|
|
||||||
const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
fetchApplications()
|
|
||||||
.then((data) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
const matched = appsForNamespace(data.items ?? [], namespaceName);
|
|
||||||
setApps(matched);
|
|
||||||
setLoading(false);
|
|
||||||
})
|
|
||||||
.catch((err: unknown) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [namespaceName]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<SectionBox title="ArgoCD">
|
|
||||||
<StatusLabel status="warning">Loading...</StatusLabel>
|
|
||||||
</SectionBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error || !apps) {
|
|
||||||
return (
|
|
||||||
<SectionBox title="ArgoCD">
|
|
||||||
<StatusLabel status="error">ArgoCD unreachable</StatusLabel>
|
|
||||||
</SectionBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (apps.length === 0) {
|
|
||||||
return null; // Show nothing when no matching application
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SectionBox title="ArgoCD">
|
|
||||||
<StatusLabel status="success">{apps.length} application(s)</StatusLabel>
|
|
||||||
<ul style={{ paddingLeft: 20, margin: "8px 0" }}>
|
|
||||||
{apps.map((app) => (
|
|
||||||
<li key={app.metadata.name} style={{ marginBottom: 8 }}>
|
|
||||||
<Link to={`/argocd/applications/${app.metadata.name}`}>
|
|
||||||
{app.metadata.name}
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<StatusLabel
|
|
||||||
status={healthStatusToColor(
|
|
||||||
app.status?.health?.status ?? "Unknown"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{healthStatusToLabel(app.status?.health?.status ?? "Unknown")}
|
|
||||||
</StatusLabel>
|
|
||||||
|
|
||||||
<StatusLabel
|
|
||||||
status={syncStatusToColor(app.status?.sync?.status ?? "Unknown")}
|
|
||||||
>
|
|
||||||
{app.status?.sync?.status ?? "Unknown"}
|
|
||||||
</StatusLabel>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</SectionBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
/**
|
|
||||||
* Page injection registrations for ArgoCD plugin.
|
|
||||||
* Registers detail view sections on Namespace and Deployment pages.
|
|
||||||
*/
|
|
||||||
import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import { KubeObject } from "@kinvolk/headlamp-plugin/lib/lib/k8s/KubeObject";
|
|
||||||
import { registerDetailsViewSection } from "@kinvolk/headlamp-plugin/lib";
|
|
||||||
import {
|
|
||||||
SectionBox,
|
|
||||||
StatusLabel,
|
|
||||||
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
|
|
||||||
import {
|
|
||||||
healthStatusToColor,
|
|
||||||
healthStatusToLabel,
|
|
||||||
syncStatusToColor,
|
|
||||||
} from "./ApplicationsList";
|
|
||||||
|
|
||||||
// --- API ---
|
|
||||||
|
|
||||||
const ARGOCD_API_PATH =
|
|
||||||
"/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
|
|
||||||
|
|
||||||
async function fetchApplications(): Promise<ArgoCDApplicationsList> {
|
|
||||||
const response = (await ApiProxy.request(
|
|
||||||
ARGOCD_API_PATH
|
|
||||||
)) as ArgoCDApplicationsList;
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Namespace section ---
|
|
||||||
|
|
||||||
function NamespaceArgoSection({ resource }: { resource: KubeObject }) {
|
|
||||||
const namespaceName = resource.metadata.name;
|
|
||||||
const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
fetchApplications()
|
|
||||||
.then((data) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
const matched = (data.items ?? []).filter(
|
|
||||||
(app) => app.spec?.destination?.namespace === namespaceName
|
|
||||||
);
|
|
||||||
setApps(matched);
|
|
||||||
setLoading(false);
|
|
||||||
})
|
|
||||||
.catch((err: unknown) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [namespaceName]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<SectionBox title="ArgoCD">
|
|
||||||
<StatusLabel status="warning">Loading...</StatusLabel>
|
|
||||||
</SectionBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error || !apps) {
|
|
||||||
return (
|
|
||||||
<SectionBox title="ArgoCD">
|
|
||||||
<StatusLabel status="error">ArgoCD unreachable</StatusLabel>
|
|
||||||
</SectionBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (apps.length === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SectionBox title="ArgoCD">
|
|
||||||
<StatusLabel status="success">{apps.length} application(s)</StatusLabel>
|
|
||||||
<ul style={{ paddingLeft: 20, margin: "8px 0" }}>
|
|
||||||
{apps.map((app) => (
|
|
||||||
<li key={app.metadata.name} style={{ marginBottom: 8 }}>
|
|
||||||
<Link to={`/argocd/applications/${app.metadata.name}`}>
|
|
||||||
{app.metadata.name}
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<StatusLabel
|
|
||||||
status={healthStatusToColor(
|
|
||||||
(app.status?.health?.status as
|
|
||||||
| "Healthy"
|
|
||||||
| "Degraded"
|
|
||||||
| "Progressing"
|
|
||||||
| "Missing"
|
|
||||||
| "Unknown") ?? "Unknown"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{healthStatusToLabel(
|
|
||||||
(app.status?.health?.status as
|
|
||||||
| "Healthy"
|
|
||||||
| "Degraded"
|
|
||||||
| "Progressing"
|
|
||||||
| "Missing"
|
|
||||||
| "Unknown") ?? "Unknown"
|
|
||||||
)}
|
|
||||||
</StatusLabel>
|
|
||||||
|
|
||||||
<StatusLabel
|
|
||||||
status={syncStatusToColor(
|
|
||||||
(app.status?.sync?.status as
|
|
||||||
| "Synced"
|
|
||||||
| "OutOfSync"
|
|
||||||
| "Unknown") ?? "Unknown"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{app.status?.sync?.status ?? "Unknown"}
|
|
||||||
</StatusLabel>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</SectionBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Deployment badge ---
|
|
||||||
|
|
||||||
function DeploymentArgoBadge({ resource }: { resource: KubeObject }) {
|
|
||||||
const deploymentName = resource.metadata.name;
|
|
||||||
const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
fetchApplications()
|
|
||||||
.then((data) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
const matched = (data.items ?? []).filter((app) =>
|
|
||||||
(app.status?.resources ?? []).some(
|
|
||||||
(res) => res.kind === "Deployment" && res.name === deploymentName
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setApps(matched);
|
|
||||||
setLoading(false);
|
|
||||||
})
|
|
||||||
.catch((err: unknown) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
setError(err instanceof Error ? err.message : String(err));
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [deploymentName]);
|
|
||||||
|
|
||||||
if (loading || error || !apps || apps.length === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const app = apps[0];
|
|
||||||
const lastSynced = app.status?.history?.length
|
|
||||||
? app.status.history[app.status.history.length - 1]?.dexKey
|
|
||||||
: null;
|
|
||||||
const lastSyncedStr = lastSynced
|
|
||||||
? new Date(lastSynced).toLocaleString()
|
|
||||||
: "—";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span>
|
|
||||||
|
|
||||||
<Link to={`/argocd/applications/${app.metadata.name}`}>
|
|
||||||
ArgoCD: {app.metadata.name}
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<StatusLabel
|
|
||||||
status={syncStatusToColor(
|
|
||||||
(app.status?.sync?.status as "Synced" | "OutOfSync" | "Unknown") ??
|
|
||||||
"Unknown"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{app.status?.sync?.status ?? "Unknown"}
|
|
||||||
</StatusLabel>
|
|
||||||
|
|
||||||
<span style={{ fontSize: "0.85em", opacity: 0.8 }}>
|
|
||||||
Last sync: {lastSyncedStr}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Registration ---
|
|
||||||
|
|
||||||
registerDetailsViewSection(({ resource }: { resource: KubeObject }) => {
|
|
||||||
if (resource.kind === "Namespace") {
|
|
||||||
return <NamespaceArgoSection resource={resource} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resource.kind === "Deployment") {
|
|
||||||
return <DeploymentArgoBadge resource={resource} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
+13
-15
@@ -7,9 +7,6 @@ import {
|
|||||||
StatusLabel,
|
StatusLabel,
|
||||||
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
|
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ApplicationDetail from "./components/ApplicationDetail";
|
|
||||||
import ApplicationsList from "./components/ApplicationsList";
|
|
||||||
import "./components/PageInjections"; // side-effect: registers detail view sections
|
|
||||||
|
|
||||||
// --- Error boundary for plugin components ---
|
// --- Error boundary for plugin components ---
|
||||||
|
|
||||||
@@ -39,6 +36,18 @@ class ArgoCDErrorBoundary extends React.Component<
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- Stub Applications List View ---
|
||||||
|
|
||||||
|
function ArgoCDStubView() {
|
||||||
|
return (
|
||||||
|
<SectionBox title="ArgoCD Applications">
|
||||||
|
<StatusLabel status="info">
|
||||||
|
Plugin scaffold — features coming soon.
|
||||||
|
</StatusLabel>
|
||||||
|
</SectionBox>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// --- Sidebar entry ---
|
// --- Sidebar entry ---
|
||||||
|
|
||||||
registerSidebarEntry({
|
registerSidebarEntry({
|
||||||
@@ -66,18 +75,7 @@ registerRoute({
|
|||||||
exact: true,
|
exact: true,
|
||||||
component: () => (
|
component: () => (
|
||||||
<ArgoCDErrorBoundary>
|
<ArgoCDErrorBoundary>
|
||||||
<ApplicationsList />
|
<ArgoCDStubView />
|
||||||
</ArgoCDErrorBoundary>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
|
|
||||||
registerRoute({
|
|
||||||
path: "/argocd/applications/:name",
|
|
||||||
sidebar: "argocd-overview",
|
|
||||||
name: "argocd-application-detail",
|
|
||||||
component: () => (
|
|
||||||
<ArgoCDErrorBoundary>
|
|
||||||
<ApplicationDetail />
|
|
||||||
</ArgoCDErrorBoundary>
|
</ArgoCDErrorBoundary>
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user