Add task executor bar chart, add system version string (#11155)

### What problem does this PR solve?

- Add task executor bar chart
- Add read version string

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

Author: JimmyBenKlieve

web/src/components/ui/dialog.tsx

@@ -38,7 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'outline-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-bg-base p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'outline-0 fixed left-[50%] top-[50%] rounded-lg z-50 grid w-full max-w-xl translate-x-[-50%] translate-y-[-50%] gap-4',
+        'border-0.5 border-border-button bg-bg-base p-6 shadow-lg duration-200 sm:rounded-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
         className,
       )}
       {...props}
@@ -66,6 +72,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
+      '-mx-6 -mt-6 p-6 border-b-0.5 border-border-button',
       'flex flex-col space-y-1.5 text-center sm:text-left',
       className,
     )}
@@ -80,6 +87,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
+      // '-mx-6 -mb-6 px-12 pt-4 pb-8',
       'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-4',
       className,
     )}

web/src/components/ui/input.tsx

@@ -40,6 +40,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         type={isPasswordInput && showPassword ? 'text' : type}
         className={cn(
+          'peer/input',
           'flex h-8 w-full rounded-md border-0.5 border-input bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
           'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
@@ -79,7 +80,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <Button
               variant="transparent"
               type="button"
-              className="border-0 absolute right-1 top-[50%] translate-y-[-50%]"
+              className="
+                absolute border-0 right-1 top-[50%] translate-y-[-50%]
+                dark:peer-autofill/input:text-text-secondary-inverse
+                dark:peer-autofill/input:hover:text-text-primary-inverse
+                dark:peer-autofill/input:focus-visible:text-text-primary-inverse
+              "
               onClick={() => setShowPassword(!showPassword)}
             >
               {showPassword ? (

web/src/components/ui/switch.tsx

@@ -13,7 +13,7 @@ const Switch = React.forwardRef<
     className={cn(
       'group/switch inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full',
       'border-2 border-transparent overflow-hidden transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary',
       'disabled:cursor-not-allowed disabled:opacity-50',
       'data-[state=checked]:bg-accent-primary data-[state=unchecked]:bg-text-sub-title',
       className,

web/src/locales/en.ts

@@ -1911,7 +1911,7 @@ Important structured information may include: names, dates, locations, events, k
       processing: 'Processing',
     },
     admin: {
-      loginTitle: 'RAGFlow ADMIN',
+      loginTitle: 'Admin Console',
       title: 'RAGFlow admin',
       confirm: 'Confirm',
       close: 'Close',
@@ -1998,6 +1998,7 @@ Important structured information may include: names, dates, locations, events, k
 
       extraInfo: 'Extra information',
       serviceDetail: `Service {{name}} detail`,
+      taskExecutorDetail: 'Task executor detail',
 
       whitelistManagement: 'Whitelist management',
       exportAsExcel: 'Export Excel',

web/src/pages/admin/layouts/navigation-layout.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NavLink, Outlet, useNavigate } from 'umi';
 
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 import {
   LucideMonitor,
@@ -15,7 +15,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
-import { logout } from '@/services/admin-service';
+import { getSystemVersion, logout } from '@/services/admin-service';
 
 import authorizationUtil from '@/utils/authorization-util';
 
@@ -26,6 +26,11 @@ const AdminNavigationLayout = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const { data: version } = useQuery({
+    queryKey: ['admin/version'],
+    queryFn: async () => (await getSystemVersion())?.data?.data?.version,
+  });
+
   const navItems = useMemo(
     () => [
       {
@@ -109,8 +114,8 @@ const AdminNavigationLayout = () => {
 
         <div className="mt-auto space-y-4">
           <div className="flex justify-between items-center">
-            <span className="text-accent-primary">
-              vmm.ss.rr-nnn-commithash
+            <span className="leading-none text-xs text-accent-primary">
+              {version}
             </span>
 
             <ThemeSwitch />

web/src/pages/admin/roles.tsx

@@ -280,24 +280,24 @@ function AdminRoles() {
       {/* Add role modal */}
       <Dialog open={isAddRoleModalOpen} onOpenChange={setAddRoleModalOpen}>
         <DialogContent
-          className="max-w-2xl p-0 border-border-button"
+          className="max-w-2xl"
           onAnimationEnd={() => {
             if (!isAddRoleModalOpen) {
               createRoleForm.form.reset();
             }
           }}
         >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
             <DialogTitle>{t('admin.addNewRole')}</DialogTitle>
           </DialogHeader>
 
-          <section className="px-12 py-4">
+          <section className="px-6">
             <createRoleForm.FormComponent
               onSubmit={createRoleMutation.mutate}
             />
           </section>
 
-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
             <Button
               className="px-4 h-10 dark:border-border-button"
               variant="outline"
@@ -324,18 +324,17 @@ function AdminRoles() {
         onOpenChange={setEditRoleDescriptionModalOpen}
       >
         <DialogContent
-          className="p-0 border-border-button"
           onAnimationEnd={() => {
             if (!isEditRoleDescriptionModalOpen) {
               setRoleToMakeAction(null);
             }
           }}
         >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
             <DialogTitle>{t('admin.editRoleDescription')}</DialogTitle>
           </DialogHeader>
 
-          <section className="px-12 py-4">
+          <section className="px-6">
             <form
               id={editRoleDescriptionFormId}
               onSubmit={(evt) => {
@@ -360,7 +359,7 @@ function AdminRoles() {
             </form>
           </section>
 
-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
             <Button
               className="px-4 h-10 dark:border-border-button"
               variant="outline"
@@ -383,18 +382,17 @@ function AdminRoles() {
       {/* Delete role modal */}
       <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
         <DialogContent
-          className="p-0 border-border-button"
           onAnimationEnd={() => {
             if (!deleteModalOpen) {
               setRoleToMakeAction(null);
             }
           }}
         >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
             <DialogTitle>{t('admin.deleteRole')}</DialogTitle>
           </DialogHeader>
 
-          <section className="px-12 py-4">
+          <section className="px-6">
             <DialogDescription className="text-text-primary">
               {t('admin.deleteRoleConfirmation')}
             </DialogDescription>
@@ -404,7 +402,7 @@ function AdminRoles() {
             </div>
           </section>
 
-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
             <Button
               className="px-4 h-10 dark:border-border-button"
               variant="outline"

web/src/pages/admin/service-detail.tsx

@@ -68,7 +68,7 @@ function ServiceDetail({ content }: ServiceDetailProps) {
 
     if (typeof content === 'string') {
       return (
-        <div className="rounded-lg p-4 bg-bg-card text-sm text-text-primary">
+        <div className="rounded-xl p-4 bg-bg-card text-sm text-text-primary">
           <pre>
             <code>
               {typeof content === 'string'

web/src/pages/admin/service-status.tsx

@@ -34,6 +34,7 @@ import {
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -66,7 +67,9 @@ import {
   getSortIcon,
 } from './utils';
 
+import JsonView from 'react18-json-view';
 import ServiceDetail from './service-detail';
+import TaskExecutorDetail from './task-executor-detail';
 
 const columnHelper = createColumnHelper<AdminService.ListServicesItem>();
 const globalFilterFn = createFuzzySearchFn<AdminService.ListServicesItem>([
@@ -381,7 +384,7 @@ function AdminServiceStatus() {
       {/* Extra info modal*/}
       <Dialog open={extraInfoModalOpen} onOpenChange={setExtraInfoModalOpen}>
         <DialogContent
-          className="p-0 border-border-button"
+          className="flex flex-col max-h-[calc(100vh-4rem)] p-0 overflow-hidden"
           onAnimationEnd={() => {
             if (!extraInfoModalOpen) {
               setItemToMakeAction(null);
@@ -392,15 +395,16 @@ function AdminServiceStatus() {
             <DialogTitle>{t('admin.extraInfo')}</DialogTitle>
           </DialogHeader>
 
-          <section className="px-12 pt-6 pb-4">
-            <div className="rounded-lg p-4 bg-bg-input">
-              <pre className="text-sm">
-                <code>
-                  {JSON.stringify(itemToMakeAction?.extra ?? {}, null, 2)}
-                </code>
-              </pre>
+          <DialogDescription className="sr-only" />
+
+          <ScrollArea className="h-0 flex-1 grid">
+            <div className="px-12">
+              <JsonView
+                src={itemToMakeAction?.extra ?? {}}
+                className="rounded-lg p-4 bg-bg-card break-words text-text-secondary"
+              />
             </div>
-          </section>
+          </ScrollArea>
 
           <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
             <Button
@@ -417,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 border-border-button"
+          className="flex flex-col max-h-[calc(100vh-4rem)] max-w-6xl p-0 overflow-hidden"
           onAnimationEnd={() => {
             if (!detailModalOpen) {
               setItemToMakeAction(null);
@@ -426,14 +430,30 @@ function AdminServiceStatus() {
         >
           <DialogHeader className="p-6 border-b-0.5 border-border-button">
             <DialogTitle>
-              <Trans i18nKey="admin.serviceDetail">
-                {{ name: itemToMakeAction?.name }}
-              </Trans>
+              {itemToMakeAction?.service_type === 'task_executor' ? (
+                t('admin.taskExecutorDetail')
+              ) : (
+                <Trans i18nKey="admin.serviceDetail">
+                  {{ name: itemToMakeAction?.name }}
+                </Trans>
+              )}
             </DialogTitle>
           </DialogHeader>
 
-          <ScrollArea className="pt-6 pb-4 px-12 h-0 flex-1 text-text-secondary flex flex-col">
-            <ServiceDetail content={serviceDetails?.message} />
+          <DialogDescription className="sr-only" />
+
+          <ScrollArea className="h-0 flex-1 text-text-secondary grid">
+            <div className="px-12">
+              {itemToMakeAction?.service_type === 'task_executor' ? (
+                <TaskExecutorDetail
+                  content={
+                    serviceDetails?.message as AdminService.TaskExecutorInfo
+                  }
+                />
+              ) : (
+                <ServiceDetail content={serviceDetails?.message} />
+              )}
+            </div>
           </ScrollArea>
 
           <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">