Admin Dashboard

For frontend developers, operators, and admin users. The full AdminDashboard.vue surface: what each tab does, what backend services it talks to, what permissions gate it, and the failure modes operators hit most.

Prerequisites

• The Keycloak role admin (or functional-admin for a subset) is assigned to the user. The dashboard reads currentUser.roles and hides tabs the user can’t access.
• The backend BFF exposes the admin REST endpoints. See Backend API Contracts.
• For Database and Logs operations: backend admin service must be healthy. Check /api/admin/system-health first if operations silently fail.

Sidebar layout

AdminDashboard.vue renders a fixed left sidebar with four sections and eight tabs. The active tab is local component state (activeTab), defaulting to overview.

The section headers (Dashboard / Content Management / System / Settings) are static labels — they do not collapse, and they do not gate content. Tab gating is by role.

Permissions

The dashboard renders all 8 tabs for any user who reaches /admin. There is no role-based tab visibility logic in AdminDashboard.vue — no roles.includes('admin'), no roles.includes('functional-admin'), and no v-if gates on the tab containers. Access control is at the router level only: the route requires authentication (requiresAuth: true), but does not check for any specific realm role. Any authenticated user who navigates to /admin sees every tab.

Unsaved-changes guard

Switching tabs while the hierarchy form has unsaved edits triggers a confirmation:

// AdminDashboard.vue ~line 2043
if (this.activeTab === 'hierarchy' && this.isFormDirty) {
  // showConfirmDialog with confirmText="Switch Anyway" / cancelText="Cancel" — 2-button dialog (no Save & continue / Discard options)
}

The other tabs do not gate navigation the same way — the document table does not have an edit form, and database/logs actions commit immediately.

Tab: System Health (overview)

The landing tab. Quick health tiles and stats pulled from /api/admin/system-health and /api/admin/analytics/overview.

Empty / loading / error states use DsStateDisplay. The tiles do not auto-poll — operators refresh manually with the toolbar refresh button.

Tab: Knowledge Hierarchy (hierarchy)

Manage the service category → service taxonomy that the chat’s service-tree filter consumes.

Data flow

chatHistoryStore.loadFolders() ←→ serviceTreeService.getAllCategories(locale)
                                   ↓
                  AdminDashboard.hierarchy ← mutation
                                   ↓
                  POST /api/service-categories/, PUT /api/service-categories/:categoryId,
                  DELETE /api/service-categories/:categoryId, POST /api/service-categories/:categoryId/services, ...

The chat’s service tree (SidebarComponent) reads the same endpoint, so edits here are visible immediately on a chat-side refresh.

Tab: Document Management (documents)

The knowledge-base file surface. Sortable table + upload dialogs + ingestion detail dialog.

Table columns

Upload flows

Ingestion lifecycle

The live-dot uses DsSpinner size="sm" with a custom CSS animation. The dot disappears when dataprep.status transitions out of pending / processing / crawling.

Tab: Database (database)

Action cards for operational tasks. Each card triggers a backend operation and renders the result in OperationResultsModal.vue.

Operation results

OperationResultsModal.vue renders:

┌─ Operation Results ─────────────────────────────────┐
│ ✓ Backup Database                                   │
│   File: /var/backups/arango-2026-09-18.dump         │
│   Size: 142 MB                                      │
│   [Download]                                        │
├──────────────────────────────────────────────────────┤
│ ✓ Optimize Database                                 │
│   arango source: 1,247 indexes rebuilt              │
│   arango links:   18 indexes rebuilt                │
└──────────────────────────────────────────────────────┘

Destructive operations (Rollover, Security Scan) require an additional ConfirmDialog before the request fires.

Tab: Logs (logs)

Live tail + filter of application logs. Backend proxies VictoriaLogs (SELECT * FROM logs WHERE ... over HTTP). See Observability → VictoriaLogs for the storage layer.

Results render in a virtual-scrolling table (<table class="log-table">). Click a row to expand the raw JSON. The LogSearchDialog from the Database tab is the same component, used standalone.

The Logs tab does not auto-poll — there is no setInterval in AdminDashboard.vue (mounted only calls loadInitialData() / getCurrentUser(); beforeUnmount only removes the themeChange listener). The user manually refreshes by re-running the search.

Tab: Query Inspector (queryInspector)

Browse and inspect individual queries that ran through the RAG pipeline. Three components, two columns:

┌────────────────────────────┬─────────────────────────┐
│ QueryInspectorList         │ QueryInspectorDetail    │
│ - timestamp                │ - request               │
│ - user                     │ - retrieved chunks      │
│ - query text               │ - response              │
│ - response time            │ - metadata              │
│ - confidence               │ - confidence            │
└────────────────────────────┴─────────────────────────┘

Click a row in the list to load detail. Filters: user, date range, confidence range, label, query substring. See Debugging with Tracing & Logs for the related backend trace view.

Tab: Security (security)

The Security tab is a Security Monitoring view (title: “Security Monitoring” in AdminDashboard.vue:822), not a configuration surface. It displays:

• Last security scan timestamp — fetched from securityMetrics.lastScan
• Vulnerability counts by severity — critical / medium / low (securityMetrics.vulnerabilities)
• Findings list — when scan data is loaded (securityDetails)

Available actions:

• Run Security Scan — triggers POST /api/admin/security-scan via runSecurityScan()

Backend endpoints (all read-only / trigger-only — no PUT):

• GET /api/admin/security-metrics — last-scan + vulnerability counts
• GET /api/admin/security/last-scan — last-scan details
• POST /api/admin/security-scan — trigger a new scan

There is no CSP/CORS editor, audit log retention input, failed-login threshold lockout input, or sessions list. The audit log is reached via the separate Logs tab.

Tab: Users (users)

List and manage Keycloak users visible to the current realm.

Pagination is 20 per page (userSearchLimit = 20, AdminDashboard.vue:1711). The list is read-only — user editing happens in Keycloak Admin Console. There are no bulk enable/disable/delete actions in AdminDashboard.vue.

Never bulk-delete users without a backup of the Keycloak database. The admin dashboard does not soft-delete — Keycloak’s delete is final.

Failure modes & troubleshooting

Programmatic access

The dashboard is a route-level view (/admin — see src/router/). The route guard checks for the admin role; without it, the router pushes to /dashboard.

// Programmatic navigation (from any component)
this.$router.push('/admin');

Most admin operations dispatch through dedicated services (adminService, documentsService, userService). Re-use them rather than calling httpService directly — they enforce the admin-role headers and add caching where appropriate.

Related

• UI Component Inventory — the dialog and DS primitives used across the tabs.
• State Management — non-namespaced auth module that owns currentUser.roles.
• Backend API Contracts — admin REST surface.
• Observability — Logs tab and Query Inspector both read from VictoriaLogs / VictoriaTraces.
• Knowledge Base: Ingestion — Documents tab and the dataprep status mapping.
• Knowledge Base: Labelling Taxonomy — Knowledge Hierarchy tab shapes the chat context filter.