Update Admin UI user guide docs (#11183)

### What problem does this PR solve?

- Update Admin UI user guide docs

### Type of change

- [x] Documentation Update
This commit is contained in:
Jimmy Ben Klieve
2025-11-11 20:29:20 +08:00
committed by GitHub
parent de53498b39
commit a15f522dc9
4 changed files with 20 additions and 61 deletions

View File

@@ -1,6 +1,6 @@
---
sidebar_position: 6
slug: /using_admin_ui
sidebar_position: 7
slug: /accessing_admin_ui
---
# Admin UI
@@ -10,47 +10,7 @@ The RAGFlow Admin UI is a web-based interface that provides comprehensive system
## Accessing the Admin UI
### Launching from source code
1. Start the RAGFlow front-end (if not already running):
```bash
cd web
npm run dev
```
Typically, the front-end server is running on port `9222`. The following output confirms a successful launch of the RAGFlow UI:
```bash
╔════════════════════════════════════════════════════╗
║ App listening at: ║
║ > Local: http://localhost:9222 ║
ready - ║ > Network: http://192.168.1.92:9222 ║
║ ║
║ Now you can open browser with the above addresses↑ ║
╚════════════════════════════════════════════════════╝
```
2. Login to RAGFlow Admin UI
Open your browser and navigate to:
```
http://localhost:9222/admin
```
Or if accessing from a remote machine:
```
http://[YOUR_MACHINE_IP]:9222/admin
```
> Replace `[YOUR_MACHINE_IP]` with your actual machine IP address (e.g., `http://192.168.1.49:9222/admin`).
Then, you will be presented with a login page where you need to enter your admin user email address and password.
3. After a successful login, you will be redirected to the **Service Status** page, which is the default landing page for the Admin UI.
To access the RAGFlow admin UI, append `/admin` to the web UI's address, e.g. `http://[RAGFLOW_WEB_UI_ADDR]/admin`, replace `[RAGFLOW_WEB_UI_ADDR]` with real RAGFlow web UI address.
## Admin UI Overview
@@ -59,7 +19,7 @@ The RAGFlow Admin UI is a web-based interface that provides comprehensive system
The service status page displays of all services within the RAGFlow system.
- **Service List**: View all services in a table format.
- **Service List**: View all services in a table.
- **Filtering**: Use the filter button to filter services by **Service Type**.
- **Search**: Use the search bar to quickly find services by **Name** or **Service Type**.
- **Actions** (hover over a row to see action buttons):

View File

@@ -25,15 +25,7 @@
_Replace `[YOUR_MACHINE_IP]` with your actual machine IP address (e.g., `http://192.168.1.49:9222`)._
## Shutdown front-end
Ctrl + C or
```bash
kill -f "umi dev"
```
## Access admin UI
## Login to RAGFlow web admin UI
Open your browser and navigate to:
@@ -44,3 +36,10 @@
_Replace `[YOUR_MACHINE_IP]` with your actual machine IP address (e.g., `http://192.168.1.49:9222/admin`)._
## Shutdown front-end
Ctrl + C or
```bash
kill -f "umi dev"
```

View File

@@ -1922,7 +1922,7 @@ Important structured information may include: names, dates, locations, events, k
},
admin: {
loginTitle: 'Admin Console',
title: 'RAGFlow admin',
title: 'RAGFlow',
confirm: 'Confirm',
close: 'Close',
yes: 'Yes',

View File

@@ -384,21 +384,21 @@ function AdminServiceStatus() {
{/* Extra info modal*/}
<Dialog open={extraInfoModalOpen} onOpenChange={setExtraInfoModalOpen}>
<DialogContent
className="flex flex-col max-h-[calc(100vh-4rem)] p-0 overflow-hidden"
className="flex flex-col max-h-[calc(100vh-4rem)] overflow-hidden"
onAnimationEnd={() => {
if (!extraInfoModalOpen) {
setItemToMakeAction(null);
}
}}
>
<DialogHeader className="p-6 border-b-0.5 border-border-button">
<DialogHeader>
<DialogTitle>{t('admin.extraInfo')}</DialogTitle>
</DialogHeader>
<DialogDescription className="sr-only" />
<ScrollArea className="h-0 flex-1 grid">
<div className="px-12">
<div className="px-6">
<JsonView
src={itemToMakeAction?.extra ?? {}}
className="rounded-lg p-4 bg-bg-card break-words text-text-secondary"
@@ -406,7 +406,7 @@ function AdminServiceStatus() {
</div>
</ScrollArea>
<DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
<DialogFooter className="flex justify-end gap-4 px-6 py-4">
<Button
className="px-4 h-10 dark:border-border-button"
variant="outline"
@@ -421,7 +421,7 @@ function AdminServiceStatus() {
{/* Service details modal */}
<Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
<DialogContent
className="flex flex-col max-h-[calc(100vh-4rem)] max-w-6xl p-0 overflow-hidden"
className="flex flex-col max-h-[calc(100vh-4rem)] max-w-6xl overflow-hidden"
onAnimationEnd={() => {
if (!detailModalOpen) {
setItemToMakeAction(null);
@@ -443,7 +443,7 @@ function AdminServiceStatus() {
<DialogDescription className="sr-only" />
<ScrollArea className="h-0 flex-1 text-text-secondary grid">
<div className="px-12">
<div className="px-6">
{itemToMakeAction?.service_type === 'task_executor' ? (
<TaskExecutorDetail
content={
@@ -456,7 +456,7 @@ function AdminServiceStatus() {
</div>
</ScrollArea>
<DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
<DialogFooter className="flex justify-end gap-4 px-6 py-4">
<Button
className="px-4 h-10 dark:border-border-button"
variant="outline"