mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-08 06:46:02 +00:00
Feat/monitor (#1928)
* feat: add monitor * feat: fix tab * feat: work * feat: not reliable monitor * feat: enhance monitoring page layout with integrated filters and refresh button * feat: add support for runner recording * feat: add jump button & alignment * feat: new * fix: not show query variables in local agent * fix: pnpm lint and python ruff check * fix: ruff fromat * chore: remove unnecessary migration * style: optimize monitoring page layout and fix sticky filter issues - Enhanced metric cards with gradient backgrounds and hover effects - Increased traffic chart height from 200px to 300px - Adjusted grid layout and spacing for better visual appeal - Fixed sticky filter area to properly cover parent padding without transparent gaps - Used negative margins and positioning to eliminate scrolling artifacts - Matched padding/margins with other pages (pipelines, bots) for consistency - Removed duplicate title/subtitle from page content - Added cursor-pointer styling to tab triggers - Removed border between tab list and tab content Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix: apply prettier formatting to monitoring components - Fixed indentation and spacing in MetricCard.tsx - Fixed formatting in TrafficChart.tsx - Applied prettier formatting to page.tsx Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * feat: update HomeSidebar to trigger action on child selection and localize monitoring titles * refactor: streamline LLM and embedding invocation methods * feat: add embedding model monitor * fix: database version * chore: simplify pnpm-lock.yaml formatting --------- Co-authored-by: Junyan Qin <rockchinq@gmail.com> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Guanchao Wang
@@ -6,12 +6,33 @@ import styles from './botLog.module.css';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import { PhotoProvider } from 'react-photo-view';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Check } from 'lucide-react';
|
||||
import { Check, ChevronDown, ChevronRight } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export function BotLogCard({ botLog }: { botLog: BotLog }) {
|
||||
const { t } = useTranslation();
|
||||
const baseURL = httpClient.getBaseUrl();
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
// Fallback 复制方法，用于不支持 clipboard API 的环境
|
||||
function fallbackCopy(text: string) {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-9999px';
|
||||
textArea.style.top = '-9999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
toast.success(t('common.copySuccess'));
|
||||
} catch {
|
||||
toast.error(t('common.copyFailed'));
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
function formatTime(timestamp: number) {
|
||||
const now = new Date();
|
||||
@@ -63,6 +84,15 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
|
||||
}
|
||||
}
|
||||
|
||||
// 截取文本的简短版本
|
||||
function getShortText(text: string, maxLength: number = 100) {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.substring(0, maxLength) + '...';
|
||||
}
|
||||
|
||||
// 判断是否需要展开按钮
|
||||
const needsExpand = botLog.text.length > 100 || botLog.images.length > 0;
|
||||
|
||||
return (
|
||||
<div className={`${styles.botLogCardContainer}`}>
|
||||
{/* 头部标签，时间 */}
|
||||
@@ -78,13 +108,24 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
|
||||
{botLog.message_session_id && (
|
||||
<div
|
||||
className={`${styles.tag} ${styles.chatTag} relative`}
|
||||
onClick={() => {
|
||||
navigator.clipboard
|
||||
.writeText(botLog.message_session_id)
|
||||
.then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
});
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// 兼容性更好的复制方法
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard
|
||||
.writeText(botLog.message_session_id)
|
||||
.then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
toast.success(t('common.copySuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
// fallback
|
||||
fallbackCopy(botLog.message_session_id);
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(botLog.message_session_id);
|
||||
}
|
||||
}}
|
||||
title={t('common.clickToCopy')}
|
||||
>
|
||||
@@ -125,12 +166,38 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles.timestamp}`}>
|
||||
{formatTime(botLog.timestamp)}
|
||||
<div className="flex items-center gap-2">
|
||||
{needsExpand && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
{t('bots.collapse')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
{t('bots.viewDetails')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<div className={`${styles.timestamp}`}>
|
||||
{formatTime(botLog.timestamp)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${styles.cardText}`}>{botLog.text}</div>
|
||||
{botLog.images.length > 0 && (
|
||||
|
||||
{/* 日志内容 - 简化显示 */}
|
||||
<div className={`${styles.cardText}`}>
|
||||
{expanded ? botLog.text : getShortText(botLog.text)}
|
||||
</div>
|
||||
|
||||
{/* 图片 - 只在展开时显示 */}
|
||||
{expanded && botLog.images.length > 0 && (
|
||||
<PhotoProvider>
|
||||
<div className={`flex flex-wrap gap-2 mt-3`}>
|
||||
{botLog.images.map((item) => (
|
||||
@@ -144,6 +211,13 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
|
||||
</div>
|
||||
</PhotoProvider>
|
||||
)}
|
||||
|
||||
{/* 图片数量提示 - 未展开时显示 */}
|
||||
{!expanded && botLog.images.length > 0 && (
|
||||
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
📷 {botLog.images.length} {t('bots.imagesAttached')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,12 +13,14 @@ import {
|
||||
} from '@/components/ui/popover';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { ChevronDownIcon } from 'lucide-react';
|
||||
import { ChevronDownIcon, ExternalLink } from 'lucide-react';
|
||||
import { debounce } from 'lodash';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export function BotLogListComponent({ botId }: { botId: string }) {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const manager = useRef(new BotLogManager(botId)).current;
|
||||
const [botLogList, setBotLogList] = useState<BotLog[]>([]);
|
||||
const [autoFlush, setAutoFlush] = useState(true);
|
||||
@@ -206,6 +208,15 @@ export function BotLogListComponent({ botId }: { botId: string }) {
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-4 flex items-center gap-1"
|
||||
onClick={() => router.push(`/home/monitoring?botId=${botId}`)}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
<span className="text-sm">{t('bots.viewDetailedLogs')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{filteredLogs.map((botLog) => {
|
||||
|
||||
@@ -228,6 +228,7 @@ function HomeSidebarContent({
|
||||
);
|
||||
if (routeSelectChild) {
|
||||
setSelectedChild(routeSelectChild);
|
||||
onSelectedChangeAction(routeSelectChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,6 +49,26 @@ export const sidebarConfigList = [
|
||||
ja_JP: 'https://docs.langbot.app/ja/usage/pipelines/readme.html',
|
||||
},
|
||||
}),
|
||||
new SidebarChildVO({
|
||||
id: 'monitoring',
|
||||
name: t('monitoring.title'),
|
||||
icon: (
|
||||
<svg
|
||||
className={`${styles.sidebarChildIcon}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
|
||||
</svg>
|
||||
),
|
||||
route: '/home/monitoring',
|
||||
description: t('monitoring.description'),
|
||||
helpLink: {
|
||||
en_US: 'https://docs.langbot.app/en/features/monitoring.html',
|
||||
zh_Hans: 'https://docs.langbot.app/zh/features/monitoring.html',
|
||||
},
|
||||
}),
|
||||
new SidebarChildVO({
|
||||
id: 'knowledge',
|
||||
name: t('knowledge.title'),
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
MessageChainComponent,
|
||||
Image as ImageComponent,
|
||||
Plain,
|
||||
At,
|
||||
Voice,
|
||||
Quote,
|
||||
} from '@/app/infra/entities/message';
|
||||
import ImagePreviewDialog from '@/app/home/pipelines/components/debug-dialog/ImagePreviewDialog';
|
||||
|
||||
interface MessageContentRendererProps {
|
||||
content: string;
|
||||
maxLines?: number;
|
||||
}
|
||||
|
||||
export function MessageContentRenderer({
|
||||
content,
|
||||
maxLines = 3,
|
||||
}: MessageContentRendererProps) {
|
||||
const [previewImageUrl, setPreviewImageUrl] = useState<string>('');
|
||||
const [showImagePreview, setShowImagePreview] = useState(false);
|
||||
|
||||
// Try to parse content as message_chain JSON
|
||||
const parseContent = (content: string): MessageChainComponent[] | null => {
|
||||
try {
|
||||
const parsed = JSON.parse(content);
|
||||
if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].type) {
|
||||
return parsed as MessageChainComponent[];
|
||||
}
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const renderMessageComponent = (
|
||||
component: MessageChainComponent,
|
||||
index: number,
|
||||
) => {
|
||||
switch (component.type) {
|
||||
case 'Plain':
|
||||
return <span key={index}>{(component as Plain).text}</span>;
|
||||
|
||||
case 'At': {
|
||||
const atComponent = component as At;
|
||||
const displayName =
|
||||
atComponent.display || atComponent.target?.toString() || '';
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-sm"
|
||||
>
|
||||
@{displayName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
case 'AtAll':
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-sm"
|
||||
>
|
||||
@All
|
||||
</span>
|
||||
);
|
||||
|
||||
case 'Image': {
|
||||
const img = component as ImageComponent;
|
||||
const imageUrl = img.url || (img.base64 ? img.base64 : '');
|
||||
|
||||
if (!imageUrl) {
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
|
||||
>
|
||||
[Image]
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span key={index} className="inline-block align-middle mx-1">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Image"
|
||||
className="w-20 h-20 object-cover rounded cursor-pointer hover:opacity-80 transition-opacity border border-gray-200 dark:border-gray-700"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setPreviewImageUrl(imageUrl);
|
||||
setShowImagePreview(true);
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
case 'File': {
|
||||
const file = component as MessageChainComponent & { name?: string };
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
|
||||
>
|
||||
<svg
|
||||
className="w-3.5 h-3.5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" />
|
||||
</svg>
|
||||
{file.name || 'File'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
case 'Voice': {
|
||||
const voice = component as Voice;
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
|
||||
>
|
||||
<svg
|
||||
className="w-3.5 h-3.5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
|
||||
</svg>
|
||||
Voice{voice.length ? ` ${voice.length}s` : ''}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
case 'Quote': {
|
||||
const quote = component as Quote;
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm border-l-2 border-gray-400"
|
||||
>
|
||||
{quote.origin
|
||||
?.filter((c) => (c as MessageChainComponent).type === 'Plain')
|
||||
.map((c) => (c as MessageChainComponent as Plain).text)
|
||||
.join('') || '[Quote]'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
case 'Source':
|
||||
return null;
|
||||
|
||||
default:
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
|
||||
>
|
||||
[{component.type}]
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const messageChain = parseContent(content);
|
||||
|
||||
// Determine line clamp class
|
||||
const lineClampClass =
|
||||
maxLines === 2
|
||||
? 'line-clamp-2'
|
||||
: maxLines === 3
|
||||
? 'line-clamp-3'
|
||||
: maxLines === 4
|
||||
? 'line-clamp-4'
|
||||
: '';
|
||||
|
||||
if (messageChain) {
|
||||
// Filter out Source components as they render to null
|
||||
const visibleComponents = messageChain.filter(
|
||||
(component) => component.type !== 'Source',
|
||||
);
|
||||
|
||||
// If no visible components, show placeholder
|
||||
if (visibleComponents.length === 0) {
|
||||
return (
|
||||
<span className="text-gray-400 dark:text-gray-500 italic">
|
||||
[Empty message]
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Render as message chain
|
||||
return (
|
||||
<>
|
||||
<div className={`${lineClampClass}`}>
|
||||
{messageChain.map((component, index) =>
|
||||
renderMessageComponent(component, index),
|
||||
)}
|
||||
</div>
|
||||
<ImagePreviewDialog
|
||||
open={showImagePreview}
|
||||
imageUrl={previewImageUrl}
|
||||
onClose={() => setShowImagePreview(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle empty plain text
|
||||
if (
|
||||
!content ||
|
||||
content.trim() === '' ||
|
||||
content === '[]' ||
|
||||
content === '""'
|
||||
) {
|
||||
return (
|
||||
<span className="text-gray-400 dark:text-gray-500 italic">
|
||||
[Empty message]
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Render as plain text
|
||||
return <span className={lineClampClass}>{content}</span>;
|
||||
}
|
||||
292
web/src/app/home/monitoring/components/MessageDetailsCard.tsx
Normal file
292
web/src/app/home/monitoring/components/MessageDetailsCard.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
'use client';
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { MessageDetails } from '../types/monitoring';
|
||||
|
||||
interface MessageDetailsCardProps {
|
||||
details: MessageDetails;
|
||||
}
|
||||
|
||||
export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Parse query variables JSON string
|
||||
const queryVariables = useMemo(() => {
|
||||
if (!details.message?.variables) return null;
|
||||
try {
|
||||
return JSON.parse(details.message.variables);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}, [details.message?.variables]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 pl-8 border-l-2 border-gray-200 dark:border-gray-700 ml-4">
|
||||
{/* Context Info Section */}
|
||||
{details.message && (
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z"></path>
|
||||
</svg>
|
||||
{t('monitoring.messageList.viewDetails')}
|
||||
</h4>
|
||||
|
||||
{/* Metadata Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
|
||||
{details.message.platform && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded p-2">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
{t('monitoring.messageList.platform')}
|
||||
</div>
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
{details.message.platform}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{details.message.userId && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded p-2">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
{t('monitoring.messageList.user')}
|
||||
</div>
|
||||
<div className="font-medium text-gray-900 dark:text-white truncate">
|
||||
{details.message.userId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{details.message.runnerName && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded p-2">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
{t('monitoring.messageList.runner')}
|
||||
</div>
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
{details.message.runnerName}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-white dark:bg-gray-900 rounded p-2">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
{t('monitoring.messageList.level')}
|
||||
</div>
|
||||
<div
|
||||
className={`font-medium ${
|
||||
details.message.level === 'error'
|
||||
? 'text-red-600 dark:text-red-400'
|
||||
: details.message.level === 'warning'
|
||||
? 'text-yellow-600 dark:text-yellow-400'
|
||||
: 'text-gray-900 dark:text-white'
|
||||
}`}
|
||||
>
|
||||
{details.message.level.toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* LLM Calls Section */}
|
||||
{details.llmCalls && details.llmCalls.length > 0 && (
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20ZM13 12V7H11V14H17V12H13Z"></path>
|
||||
</svg>
|
||||
{t('monitoring.llmCalls.title')} ({details.llmCalls.length})
|
||||
</h4>
|
||||
|
||||
{/* LLM Stats Summary */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-3">
|
||||
<div className="bg-blue-50 dark:bg-blue-900/30 rounded p-2">
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400">
|
||||
{t('monitoring.llmCalls.totalTokens')}
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-blue-900 dark:text-blue-100">
|
||||
{details.llmStats.totalTokens.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-green-50 dark:bg-green-900/30 rounded p-2">
|
||||
<div className="text-xs text-green-600 dark:text-green-400">
|
||||
{t('monitoring.llmCalls.avgDuration')}
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-green-900 dark:text-green-100">
|
||||
{details.llmStats.averageDurationMs}ms
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-purple-50 dark:bg-purple-900/30 rounded p-2">
|
||||
<div className="text-xs text-purple-600 dark:text-purple-400">
|
||||
{t('monitoring.llmCalls.calls')}
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-purple-900 dark:text-purple-100">
|
||||
{details.llmStats.totalCalls}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Individual LLM Calls */}
|
||||
<div className="space-y-2">
|
||||
{details.llmCalls.map((call, index) => (
|
||||
<div
|
||||
key={call.id}
|
||||
className="bg-white dark:bg-gray-900 rounded p-2 text-sm"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
#{index + 1} {call.modelName}
|
||||
</span>
|
||||
<span
|
||||
className={`ml-2 text-xs px-2 py-0.5 rounded ${
|
||||
call.status === 'success'
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
||||
}`}
|
||||
>
|
||||
{call.status}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{call.duration}ms
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-500">
|
||||
In:
|
||||
</span>{' '}
|
||||
{call.tokens.input.toLocaleString()}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-500">
|
||||
Out:
|
||||
</span>{' '}
|
||||
{call.tokens.output.toLocaleString()}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-500">
|
||||
Total:
|
||||
</span>{' '}
|
||||
{call.tokens.total.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
{call.errorMessage && (
|
||||
<div className="mt-2 text-xs text-red-600 dark:text-red-400">
|
||||
{call.errorMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Errors Section */}
|
||||
{details.errors && details.errors.length > 0 && (
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<h4 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-3 flex items-center">
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path>
|
||||
</svg>
|
||||
{t('monitoring.errors.title')} ({details.errors.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{details.errors.map((error) => (
|
||||
<div
|
||||
key={error.id}
|
||||
className="bg-red-50 dark:bg-red-900/20 rounded p-2 text-sm"
|
||||
>
|
||||
<div className="font-medium text-red-900 dark:text-red-300 mb-1">
|
||||
{error.errorType}
|
||||
</div>
|
||||
<div className="text-red-700 dark:text-red-400 text-xs mb-2">
|
||||
{error.errorMessage}
|
||||
</div>
|
||||
{error.stackTrace && (
|
||||
<details className="text-xs">
|
||||
<summary className="cursor-pointer text-red-600 dark:text-red-500 hover:text-red-800 dark:hover:text-red-300">
|
||||
{t('monitoring.errors.stackTrace')}
|
||||
</summary>
|
||||
<pre className="mt-2 p-2 bg-red-100 dark:bg-red-900/40 rounded overflow-x-auto text-xs">
|
||||
{error.stackTrace}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Query Variables Section - Only show for non-local-agent runners */}
|
||||
{queryVariables &&
|
||||
Object.keys(queryVariables).length > 0 &&
|
||||
details.message?.runnerName !== 'local-agent' && (
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M4 18V14.3C4 13.4716 3.32843 12.8 2.5 12.8H2V11.2H2.5C3.32843 11.2 4 10.5284 4 9.7V6C4 4.34315 5.34315 3 7 3H8V5H7C6.44772 5 6 5.44772 6 6V9.7C6 10.7065 5.41099 11.5849 4.55132 12C5.41099 12.4151 6 13.2935 6 14.3V18C6 18.5523 6.44772 19 7 19H8V21H7C5.34315 21 4 19.6569 4 18ZM20 14.3V18C20 19.6569 18.6569 21 17 21H16V19H17C17.5523 19 18 18.5523 18 18V14.3C18 13.2935 18.589 12.4151 19.4487 12C18.589 11.5849 18 10.7065 18 9.7V6C18 5.44772 17.5523 5 17 5H16V3H17C18.6569 3 20 4.34315 20 6V9.7C20 10.5284 20.6716 11.2 21.5 11.2H22V12.8H21.5C20.6716 12.8 20 13.4716 20 14.3Z"></path>
|
||||
</svg>
|
||||
{t('monitoring.queryVariables.title')}
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
|
||||
{Object.entries(queryVariables).map(([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="bg-white dark:bg-gray-900 rounded p-2"
|
||||
>
|
||||
<div className="text-gray-500 dark:text-gray-400">{key}</div>
|
||||
<div
|
||||
className="font-medium text-gray-900 dark:text-white truncate"
|
||||
title={
|
||||
typeof value === 'string' ? value : JSON.stringify(value)
|
||||
}
|
||||
>
|
||||
{value === null || value === undefined ? (
|
||||
<span className="text-gray-400 italic">null</span>
|
||||
) : typeof value === 'string' ? (
|
||||
value || (
|
||||
<span className="text-gray-400 italic">empty</span>
|
||||
)
|
||||
) : (
|
||||
JSON.stringify(value)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No data message */}
|
||||
{(!details.llmCalls || details.llmCalls.length === 0) &&
|
||||
(!details.errors || details.errors.length === 0) &&
|
||||
(details.message?.runnerName === 'local-agent' ||
|
||||
!queryVariables ||
|
||||
Object.keys(queryVariables).length === 0) && (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
{t('monitoring.messageDetails.noData')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { backendClient } from '@/app/infra/http';
|
||||
import { TimeRangeOption } from '../../types/monitoring';
|
||||
|
||||
interface MonitoringFiltersProps {
|
||||
selectedBots: string[];
|
||||
selectedPipelines: string[];
|
||||
timeRange: TimeRangeOption;
|
||||
onBotsChange: (bots: string[]) => void;
|
||||
onPipelinesChange: (pipelines: string[]) => void;
|
||||
onTimeRangeChange: (timeRange: TimeRangeOption) => void;
|
||||
}
|
||||
|
||||
interface Bot {
|
||||
uuid: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Pipeline {
|
||||
uuid: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default function MonitoringFilters({
|
||||
selectedBots,
|
||||
selectedPipelines,
|
||||
timeRange,
|
||||
onBotsChange,
|
||||
onPipelinesChange,
|
||||
onTimeRangeChange,
|
||||
}: MonitoringFiltersProps) {
|
||||
const { t } = useTranslation();
|
||||
const [bots, setBots] = useState<Bot[]>([]);
|
||||
const [pipelines, setPipelines] = useState<Pipeline[]>([]);
|
||||
const [loadingBots, setLoadingBots] = useState(false);
|
||||
const [loadingPipelines, setLoadingPipelines] = useState(false);
|
||||
|
||||
// Fetch bots list
|
||||
useEffect(() => {
|
||||
const fetchBots = async () => {
|
||||
setLoadingBots(true);
|
||||
try {
|
||||
const response = await backendClient.getBots();
|
||||
// Filter out bots without uuid and map to local Bot interface
|
||||
const validBots = (response.bots || [])
|
||||
.filter((bot): bot is typeof bot & { uuid: string } => !!bot.uuid)
|
||||
.map((bot) => ({ uuid: bot.uuid, name: bot.name }));
|
||||
setBots(validBots);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch bots:', error);
|
||||
} finally {
|
||||
setLoadingBots(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchBots();
|
||||
}, []);
|
||||
|
||||
// Fetch pipelines list
|
||||
useEffect(() => {
|
||||
const fetchPipelines = async () => {
|
||||
setLoadingPipelines(true);
|
||||
try {
|
||||
const response = await backendClient.getPipelines();
|
||||
// Filter out pipelines without uuid and map to local Pipeline interface
|
||||
const validPipelines = (response.pipelines || [])
|
||||
.filter(
|
||||
(pipeline): pipeline is typeof pipeline & { uuid: string } =>
|
||||
!!pipeline.uuid,
|
||||
)
|
||||
.map((pipeline) => ({ uuid: pipeline.uuid, name: pipeline.name }));
|
||||
setPipelines(validPipelines);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch pipelines:', error);
|
||||
} finally {
|
||||
setLoadingPipelines(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPipelines();
|
||||
}, []);
|
||||
|
||||
const handleBotChange = (value: string) => {
|
||||
if (value === 'all') {
|
||||
onBotsChange([]);
|
||||
} else {
|
||||
onBotsChange([value]);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePipelineChange = (value: string) => {
|
||||
if (value === 'all') {
|
||||
onPipelinesChange([]);
|
||||
} else {
|
||||
onPipelinesChange([value]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimeRangeChange = (value: string) => {
|
||||
onTimeRangeChange(value as TimeRangeOption);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-6">
|
||||
{/* Bot Filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{t('monitoring.filters.bot')}
|
||||
</label>
|
||||
<Select
|
||||
value={selectedBots.length === 0 ? 'all' : selectedBots[0]}
|
||||
onValueChange={handleBotChange}
|
||||
disabled={loadingBots}
|
||||
>
|
||||
<SelectTrigger className="bg-white dark:bg-[#2a2a2e] h-9 w-[140px]">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingBots
|
||||
? t('monitoring.filters.loading')
|
||||
: t('monitoring.filters.selectBot')
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">
|
||||
{t('monitoring.filters.allBots')}
|
||||
</SelectItem>
|
||||
{bots.map((bot) => (
|
||||
<SelectItem key={bot.uuid} value={bot.uuid}>
|
||||
{bot.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Pipeline Filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{t('monitoring.filters.pipeline')}
|
||||
</label>
|
||||
<Select
|
||||
value={selectedPipelines.length === 0 ? 'all' : selectedPipelines[0]}
|
||||
onValueChange={handlePipelineChange}
|
||||
disabled={loadingPipelines}
|
||||
>
|
||||
<SelectTrigger className="bg-white dark:bg-[#2a2a2e] h-9 w-[140px]">
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingPipelines
|
||||
? t('monitoring.filters.loading')
|
||||
: t('monitoring.filters.selectPipeline')
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">
|
||||
{t('monitoring.filters.allPipelines')}
|
||||
</SelectItem>
|
||||
{pipelines.map((pipeline) => (
|
||||
<SelectItem key={pipeline.uuid} value={pipeline.uuid}>
|
||||
{pipeline.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Time Range Filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{t('monitoring.filters.timeRange')}
|
||||
</label>
|
||||
<Select value={timeRange} onValueChange={handleTimeRangeChange}>
|
||||
<SelectTrigger className="bg-white dark:bg-[#2a2a2e] h-9 w-[150px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="lastHour">
|
||||
{t('monitoring.filters.lastHour')}
|
||||
</SelectItem>
|
||||
<SelectItem value="last6Hours">
|
||||
{t('monitoring.filters.last6Hours')}
|
||||
</SelectItem>
|
||||
<SelectItem value="last24Hours">
|
||||
{t('monitoring.filters.last24Hours')}
|
||||
</SelectItem>
|
||||
<SelectItem value="last7Days">
|
||||
{t('monitoring.filters.last7Days')}
|
||||
</SelectItem>
|
||||
<SelectItem value="last30Days">
|
||||
{t('monitoring.filters.last30Days')}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
interface MetricCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: React.ReactNode;
|
||||
trend?: {
|
||||
value: number;
|
||||
direction: 'up' | 'down';
|
||||
};
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export default function MetricCard({
|
||||
title,
|
||||
value,
|
||||
icon,
|
||||
trend,
|
||||
loading,
|
||||
}: MetricCardProps) {
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-[#2a2a2e] border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-300">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
||||
<CardTitle className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
{title}
|
||||
</CardTitle>
|
||||
<div className="h-10 w-10 rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30 flex items-center justify-center">
|
||||
<div className="h-5 w-5 text-blue-600 dark:text-blue-400">
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
|
||||
<div className="h-4 w-20 bg-gray-100 dark:bg-gray-800 animate-pulse rounded mt-2"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-[#2a2a2e] border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-300 group">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
||||
<CardTitle className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
{title}
|
||||
</CardTitle>
|
||||
<div className="h-10 w-10 rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<div className="h-5 w-5 text-blue-600 dark:text-blue-400">{icon}</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{value}
|
||||
</div>
|
||||
{trend && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${
|
||||
trend.direction === 'up'
|
||||
? 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
{trend.direction === 'up' ? (
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
{Math.abs(trend.value)}%
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
vs previous period
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MetricCard from './MetricCard';
|
||||
import TrafficChart from './TrafficChart';
|
||||
import {
|
||||
OverviewMetrics,
|
||||
MonitoringMessage,
|
||||
LLMCall,
|
||||
} from '../../types/monitoring';
|
||||
|
||||
interface OverviewCardsProps {
|
||||
metrics: OverviewMetrics | null;
|
||||
messages?: MonitoringMessage[];
|
||||
llmCalls?: LLMCall[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export default function OverviewCards({
|
||||
metrics,
|
||||
messages = [],
|
||||
llmCalls = [],
|
||||
loading,
|
||||
}: OverviewCardsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const cards = [
|
||||
{
|
||||
title: t('monitoring.totalMessages'),
|
||||
value: metrics?.totalMessages || 0,
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM4 18.3851L5.76282 17H20V5H4V18.3851Z"></path>
|
||||
</svg>
|
||||
),
|
||||
trend: metrics?.trends
|
||||
? {
|
||||
value: metrics.trends.messages,
|
||||
direction: (metrics.trends.messages >= 0 ? 'up' : 'down') as
|
||||
| 'up'
|
||||
| 'down',
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
{
|
||||
title: t('monitoring.modelCallsCount'),
|
||||
value: metrics?.modelCalls || 0,
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899Z"></path>
|
||||
</svg>
|
||||
),
|
||||
trend: metrics?.trends
|
||||
? {
|
||||
value: metrics.trends.llmCalls,
|
||||
direction: (metrics.trends.llmCalls >= 0 ? 'up' : 'down') as
|
||||
| 'up'
|
||||
| 'down',
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
{
|
||||
title: t('monitoring.successRate'),
|
||||
value: metrics ? `${metrics.successRate}%` : '0%',
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z"></path>
|
||||
</svg>
|
||||
),
|
||||
trend: metrics?.trends
|
||||
? {
|
||||
value: metrics.trends.successRate,
|
||||
direction: (metrics.trends.successRate >= 0 ? 'up' : 'down') as
|
||||
| 'up'
|
||||
| 'down',
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
{
|
||||
title: t('monitoring.activeSessions'),
|
||||
value: metrics?.activeSessions || 0,
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.7519 23 22H21C21 19.3742 19.4041 17.1096 17.1582 16.2466L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z"></path>
|
||||
</svg>
|
||||
),
|
||||
trend: metrics?.trends
|
||||
? {
|
||||
value: metrics.trends.sessions,
|
||||
direction: (metrics.trends.sessions >= 0 ? 'up' : 'down') as
|
||||
| 'up'
|
||||
| 'down',
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Metric Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
|
||||
{cards.map((card, index) => (
|
||||
<MetricCard
|
||||
key={index}
|
||||
title={card.title}
|
||||
value={card.value}
|
||||
icon={card.icon}
|
||||
trend={card.trend}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Traffic Chart */}
|
||||
<TrafficChart messages={messages} llmCalls={llmCalls} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,263 @@
|
||||
'use client';
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Legend,
|
||||
} from 'recharts';
|
||||
import { MonitoringMessage, LLMCall } from '../../types/monitoring';
|
||||
|
||||
interface TrafficChartProps {
|
||||
messages: MonitoringMessage[];
|
||||
llmCalls: LLMCall[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
interface ChartDataPoint {
|
||||
time: string;
|
||||
timestamp: number;
|
||||
messages: number;
|
||||
llmCalls: number;
|
||||
}
|
||||
|
||||
export default function TrafficChart({
|
||||
messages,
|
||||
llmCalls,
|
||||
loading,
|
||||
}: TrafficChartProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (!messages.length && !llmCalls.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Combine all timestamps and find the range
|
||||
const allTimestamps = [
|
||||
...messages.map((m) => m.timestamp.getTime()),
|
||||
...llmCalls.map((c) => c.timestamp.getTime()),
|
||||
];
|
||||
|
||||
if (allTimestamps.length === 0) return [];
|
||||
|
||||
const minTime = Math.min(...allTimestamps);
|
||||
const maxTime = Math.max(...allTimestamps);
|
||||
const timeRange = maxTime - minTime;
|
||||
|
||||
// Determine bucket size based on time range
|
||||
let bucketSize: number;
|
||||
let formatTime: (date: Date) => string;
|
||||
|
||||
if (timeRange <= 60 * 60 * 1000) {
|
||||
// <= 1 hour: 5-minute buckets
|
||||
bucketSize = 5 * 60 * 1000;
|
||||
formatTime = (date) =>
|
||||
date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
} else if (timeRange <= 6 * 60 * 60 * 1000) {
|
||||
// <= 6 hours: 15-minute buckets
|
||||
bucketSize = 15 * 60 * 1000;
|
||||
formatTime = (date) =>
|
||||
date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
} else if (timeRange <= 24 * 60 * 60 * 1000) {
|
||||
// <= 24 hours: 1-hour buckets
|
||||
bucketSize = 60 * 60 * 1000;
|
||||
formatTime = (date) =>
|
||||
date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
} else if (timeRange <= 7 * 24 * 60 * 60 * 1000) {
|
||||
// <= 7 days: 4-hour buckets
|
||||
bucketSize = 4 * 60 * 60 * 1000;
|
||||
formatTime = (date) =>
|
||||
`${date.toLocaleDateString([], { month: 'short', day: 'numeric' })} ${date.toLocaleTimeString([], { hour: '2-digit' })}`;
|
||||
} else {
|
||||
// > 7 days: 1-day buckets
|
||||
bucketSize = 24 * 60 * 60 * 1000;
|
||||
formatTime = (date) =>
|
||||
date.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
// Create buckets
|
||||
const buckets: Map<number, ChartDataPoint> = new Map();
|
||||
const startBucket = Math.floor(minTime / bucketSize) * bucketSize;
|
||||
const endBucket = Math.ceil(maxTime / bucketSize) * bucketSize;
|
||||
|
||||
for (let bucket = startBucket; bucket <= endBucket; bucket += bucketSize) {
|
||||
buckets.set(bucket, {
|
||||
time: formatTime(new Date(bucket)),
|
||||
timestamp: bucket,
|
||||
messages: 0,
|
||||
llmCalls: 0,
|
||||
});
|
||||
}
|
||||
|
||||
// Count messages per bucket
|
||||
messages.forEach((msg) => {
|
||||
const bucket =
|
||||
Math.floor(msg.timestamp.getTime() / bucketSize) * bucketSize;
|
||||
const point = buckets.get(bucket);
|
||||
if (point) {
|
||||
point.messages++;
|
||||
}
|
||||
});
|
||||
|
||||
// Count LLM calls per bucket
|
||||
llmCalls.forEach((call) => {
|
||||
const bucket =
|
||||
Math.floor(call.timestamp.getTime() / bucketSize) * bucketSize;
|
||||
const point = buckets.get(bucket);
|
||||
if (point) {
|
||||
point.llmCalls++;
|
||||
}
|
||||
});
|
||||
|
||||
return Array.from(buckets.values()).sort(
|
||||
(a, b) => a.timestamp - b.timestamp,
|
||||
);
|
||||
}, [messages, llmCalls]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="h-5 w-32 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
|
||||
<div className="flex gap-4">
|
||||
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
|
||||
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[300px] flex items-center justify-center">
|
||||
<div className="animate-pulse w-full h-full bg-gray-100 dark:bg-gray-800 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (chartData.length === 0) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6">
|
||||
<h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 mb-4">
|
||||
{t('monitoring.trafficChart.title')}
|
||||
</h3>
|
||||
<div className="h-[300px] flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
className="w-16 h-16 mb-4 text-gray-300 dark:text-gray-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm font-medium">
|
||||
{t('monitoring.trafficChart.noData')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6 hover:shadow-md transition-shadow duration-300">
|
||||
<h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 mb-6">
|
||||
{t('monitoring.trafficChart.title')}
|
||||
</h3>
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={chartData}
|
||||
margin={{ top: 10, right: 20, left: 0, bottom: 0 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="colorMessages" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.4} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0.05} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorLLMCalls" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.4} />
|
||||
<stop offset="95%" stopColor="#8b5cf6" stopOpacity={0.05} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="#e5e7eb"
|
||||
className="dark:stroke-gray-700"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
tick={{ fontSize: 12, fill: '#9ca3af' }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: '#e5e7eb' }}
|
||||
dy={10}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#9ca3af' }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: '#e5e7eb' }}
|
||||
width={40}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '12px',
|
||||
boxShadow:
|
||||
'0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||
fontSize: '13px',
|
||||
padding: '12px',
|
||||
}}
|
||||
labelStyle={{
|
||||
fontWeight: 600,
|
||||
marginBottom: '8px',
|
||||
color: '#374151',
|
||||
}}
|
||||
itemStyle={{ padding: '4px 0' }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{
|
||||
fontSize: '13px',
|
||||
paddingTop: '16px',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
iconType="circle"
|
||||
iconSize={10}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="messages"
|
||||
name={t('monitoring.trafficChart.messages')}
|
||||
stroke="#3b82f6"
|
||||
strokeWidth={2.5}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorMessages)"
|
||||
dot={false}
|
||||
activeDot={{ r: 6, strokeWidth: 2 }}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="llmCalls"
|
||||
name={t('monitoring.trafficChart.llmCalls')}
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth={2.5}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorLLMCalls)"
|
||||
dot={false}
|
||||
activeDot={{ r: 6, strokeWidth: 2 }}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
352
web/src/app/home/monitoring/hooks/useMonitoringData.ts
Normal file
352
web/src/app/home/monitoring/hooks/useMonitoringData.ts
Normal file
@@ -0,0 +1,352 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
FilterState,
|
||||
MonitoringData,
|
||||
ModelCall,
|
||||
LLMCall,
|
||||
EmbeddingCall,
|
||||
} from '../types/monitoring';
|
||||
import { backendClient } from '@/app/infra/http';
|
||||
|
||||
/**
|
||||
* Custom hook for fetching and managing monitoring data
|
||||
*/
|
||||
export function useMonitoringData(filterState: FilterState) {
|
||||
const [data, setData] = useState<MonitoringData | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
// Memoize filter parameters to prevent unnecessary re-renders
|
||||
const selectedBotsStr = useMemo(
|
||||
() => JSON.stringify(filterState.selectedBots),
|
||||
[filterState.selectedBots],
|
||||
);
|
||||
const selectedPipelinesStr = useMemo(
|
||||
() => JSON.stringify(filterState.selectedPipelines),
|
||||
[filterState.selectedPipelines],
|
||||
);
|
||||
const customDateRangeStr = useMemo(
|
||||
() => JSON.stringify(filterState.customDateRange),
|
||||
[filterState.customDateRange],
|
||||
);
|
||||
|
||||
// Convert time range to datetime strings
|
||||
const getTimeRange = useCallback(() => {
|
||||
const now = new Date();
|
||||
let startTime: Date | null = null;
|
||||
|
||||
switch (filterState.timeRange) {
|
||||
case 'lastHour':
|
||||
startTime = new Date(now.getTime() - 60 * 60 * 1000);
|
||||
break;
|
||||
case 'last6Hours':
|
||||
startTime = new Date(now.getTime() - 6 * 60 * 60 * 1000);
|
||||
break;
|
||||
case 'last24Hours':
|
||||
startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||
break;
|
||||
case 'last7Days':
|
||||
startTime = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
break;
|
||||
case 'last30Days':
|
||||
startTime = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
|
||||
break;
|
||||
case 'custom':
|
||||
if (filterState.customDateRange) {
|
||||
startTime = filterState.customDateRange.from;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
const endTime =
|
||||
filterState.timeRange === 'custom' && filterState.customDateRange
|
||||
? filterState.customDateRange.to
|
||||
: now;
|
||||
|
||||
return {
|
||||
startTime: startTime?.toISOString(),
|
||||
endTime: endTime.toISOString(),
|
||||
};
|
||||
}, [filterState.timeRange, filterState.customDateRange]);
|
||||
|
||||
// Fetch data based on filters
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const { startTime, endTime } = getTimeRange();
|
||||
|
||||
const response = await backendClient.getMonitoringData({
|
||||
botId:
|
||||
filterState.selectedBots.length > 0
|
||||
? filterState.selectedBots
|
||||
: undefined,
|
||||
pipelineId:
|
||||
filterState.selectedPipelines.length > 0
|
||||
? filterState.selectedPipelines
|
||||
: undefined,
|
||||
startTime,
|
||||
endTime,
|
||||
limit: 50,
|
||||
});
|
||||
|
||||
// Transform the response to match MonitoringData interface
|
||||
const transformedData: MonitoringData = {
|
||||
overview: {
|
||||
totalMessages: response.overview.total_messages,
|
||||
llmCalls: response.overview.llm_calls,
|
||||
embeddingCalls: response.overview.embedding_calls || 0,
|
||||
modelCalls:
|
||||
response.overview.model_calls || response.overview.llm_calls,
|
||||
successRate: response.overview.success_rate,
|
||||
activeSessions: response.overview.active_sessions,
|
||||
},
|
||||
messages: response.messages.map(
|
||||
(msg: {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
message_content: string;
|
||||
session_id: string;
|
||||
status: string;
|
||||
level: string;
|
||||
platform?: string;
|
||||
user_id?: string;
|
||||
runner_name?: string;
|
||||
variables?: string;
|
||||
}) => ({
|
||||
id: msg.id,
|
||||
timestamp: new Date(msg.timestamp),
|
||||
botId: msg.bot_id,
|
||||
botName: msg.bot_name,
|
||||
pipelineId: msg.pipeline_id,
|
||||
pipelineName: msg.pipeline_name,
|
||||
messageContent: msg.message_content,
|
||||
sessionId: msg.session_id,
|
||||
status: msg.status as 'success' | 'error' | 'pending',
|
||||
level: msg.level as 'info' | 'warning' | 'error' | 'debug',
|
||||
platform: msg.platform,
|
||||
userId: msg.user_id,
|
||||
runnerName: msg.runner_name,
|
||||
variables: msg.variables,
|
||||
}),
|
||||
),
|
||||
llmCalls: response.llmCalls.map(
|
||||
(call: {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
model_name: string;
|
||||
input_tokens: number;
|
||||
output_tokens: number;
|
||||
total_tokens: number;
|
||||
duration: number;
|
||||
cost?: number;
|
||||
status: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
error_message?: string;
|
||||
message_id?: string;
|
||||
}) => ({
|
||||
id: call.id,
|
||||
timestamp: new Date(call.timestamp),
|
||||
modelName: call.model_name,
|
||||
tokens: {
|
||||
input: call.input_tokens,
|
||||
output: call.output_tokens,
|
||||
total: call.total_tokens,
|
||||
},
|
||||
duration: call.duration,
|
||||
cost: call.cost,
|
||||
status: call.status as 'success' | 'error',
|
||||
botId: call.bot_id,
|
||||
botName: call.bot_name,
|
||||
pipelineId: call.pipeline_id,
|
||||
pipelineName: call.pipeline_name,
|
||||
errorMessage: call.error_message,
|
||||
messageId: call.message_id,
|
||||
}),
|
||||
),
|
||||
embeddingCalls: (response.embeddingCalls || []).map(
|
||||
(call: {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
model_name: string;
|
||||
prompt_tokens: number;
|
||||
total_tokens: number;
|
||||
duration: number;
|
||||
input_count: number;
|
||||
status: string;
|
||||
error_message?: string;
|
||||
knowledge_base_id?: string;
|
||||
query_text?: string;
|
||||
session_id?: string;
|
||||
message_id?: string;
|
||||
call_type?: string;
|
||||
}) => ({
|
||||
id: call.id,
|
||||
timestamp: new Date(call.timestamp),
|
||||
modelName: call.model_name,
|
||||
promptTokens: call.prompt_tokens,
|
||||
totalTokens: call.total_tokens,
|
||||
duration: call.duration,
|
||||
inputCount: call.input_count,
|
||||
status: call.status as 'success' | 'error',
|
||||
errorMessage: call.error_message,
|
||||
knowledgeBaseId: call.knowledge_base_id,
|
||||
queryText: call.query_text,
|
||||
sessionId: call.session_id,
|
||||
messageId: call.message_id,
|
||||
callType: call.call_type as 'embedding' | 'retrieve' | undefined,
|
||||
}),
|
||||
),
|
||||
// Create merged modelCalls array from llmCalls and embeddingCalls
|
||||
modelCalls: [] as ModelCall[], // Will be populated after transform
|
||||
sessions: response.sessions.map(
|
||||
(session: {
|
||||
session_id: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
message_count: number;
|
||||
last_activity: string;
|
||||
start_time: string;
|
||||
platform?: string;
|
||||
user_id?: string;
|
||||
}) => ({
|
||||
sessionId: session.session_id,
|
||||
botId: session.bot_id,
|
||||
botName: session.bot_name,
|
||||
pipelineId: session.pipeline_id,
|
||||
pipelineName: session.pipeline_name,
|
||||
messageCount: session.message_count,
|
||||
duration:
|
||||
new Date(session.last_activity).getTime() -
|
||||
new Date(session.start_time).getTime(),
|
||||
lastActivity: new Date(session.last_activity),
|
||||
startTime: new Date(session.start_time),
|
||||
platform: session.platform,
|
||||
userId: session.user_id,
|
||||
}),
|
||||
),
|
||||
errors: response.errors.map(
|
||||
(error: {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
error_type: string;
|
||||
error_message: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
session_id?: string;
|
||||
stack_trace?: string;
|
||||
message_id?: string;
|
||||
}) => ({
|
||||
id: error.id,
|
||||
timestamp: new Date(error.timestamp),
|
||||
errorType: error.error_type,
|
||||
errorMessage: error.error_message,
|
||||
botId: error.bot_id,
|
||||
botName: error.bot_name,
|
||||
pipelineId: error.pipeline_id,
|
||||
pipelineName: error.pipeline_name,
|
||||
sessionId: error.session_id,
|
||||
stackTrace: error.stack_trace,
|
||||
messageId: error.message_id,
|
||||
}),
|
||||
),
|
||||
totalCount: {
|
||||
messages: response.totalCount.messages,
|
||||
llmCalls: response.totalCount.llmCalls,
|
||||
embeddingCalls: response.totalCount.embeddingCalls || 0,
|
||||
sessions: response.totalCount.sessions,
|
||||
errors: response.totalCount.errors,
|
||||
},
|
||||
};
|
||||
|
||||
// Merge LLM calls and embedding calls into modelCalls
|
||||
const llmModelCalls: ModelCall[] = transformedData.llmCalls.map(
|
||||
(call: LLMCall): ModelCall => ({
|
||||
id: call.id,
|
||||
timestamp: call.timestamp,
|
||||
modelName: call.modelName,
|
||||
modelType: 'llm',
|
||||
status: call.status,
|
||||
duration: call.duration,
|
||||
errorMessage: call.errorMessage,
|
||||
messageId: call.messageId,
|
||||
tokens: call.tokens,
|
||||
cost: call.cost,
|
||||
botId: call.botId,
|
||||
botName: call.botName,
|
||||
pipelineId: call.pipelineId,
|
||||
pipelineName: call.pipelineName,
|
||||
}),
|
||||
);
|
||||
|
||||
const embeddingModelCalls: ModelCall[] =
|
||||
transformedData.embeddingCalls.map(
|
||||
(call: EmbeddingCall): ModelCall => ({
|
||||
id: call.id,
|
||||
timestamp: call.timestamp,
|
||||
modelName: call.modelName,
|
||||
modelType: 'embedding',
|
||||
status: call.status,
|
||||
duration: call.duration,
|
||||
errorMessage: call.errorMessage,
|
||||
messageId: call.messageId,
|
||||
callType: call.callType,
|
||||
promptTokens: call.promptTokens,
|
||||
totalTokens: call.totalTokens,
|
||||
inputCount: call.inputCount,
|
||||
knowledgeBaseId: call.knowledgeBaseId,
|
||||
queryText: call.queryText,
|
||||
sessionId: call.sessionId,
|
||||
}),
|
||||
);
|
||||
|
||||
// Combine and sort by timestamp (newest first)
|
||||
transformedData.modelCalls = [
|
||||
...llmModelCalls,
|
||||
...embeddingModelCalls,
|
||||
].sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
|
||||
|
||||
setData(transformedData);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
console.error('Failed to fetch monitoring data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [getTimeRange, filterState.selectedBots, filterState.selectedPipelines]);
|
||||
|
||||
// Fetch data when filter state changes
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
selectedBotsStr,
|
||||
selectedPipelinesStr,
|
||||
filterState.timeRange,
|
||||
customDateRangeStr,
|
||||
]);
|
||||
|
||||
// Manual refetch function
|
||||
const refetch = () => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
return {
|
||||
data,
|
||||
loading,
|
||||
error,
|
||||
refetch,
|
||||
};
|
||||
}
|
||||
65
web/src/app/home/monitoring/hooks/useMonitoringFilters.ts
Normal file
65
web/src/app/home/monitoring/hooks/useMonitoringFilters.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { FilterState, TimeRangeOption, DateRange } from '../types/monitoring';
|
||||
import { getPresetDateRange } from '../utils/dateUtils';
|
||||
|
||||
/**
|
||||
* Custom hook for managing monitoring filters
|
||||
*/
|
||||
export function useMonitoringFilters() {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// Initialize filters from URL params
|
||||
const [selectedBots, setSelectedBots] = useState<string[]>(() => {
|
||||
const botId = searchParams.get('botId');
|
||||
return botId ? [botId] : [];
|
||||
});
|
||||
|
||||
const [selectedPipelines, setSelectedPipelines] = useState<string[]>(() => {
|
||||
const pipelineId = searchParams.get('pipelineId');
|
||||
return pipelineId ? [pipelineId] : [];
|
||||
});
|
||||
|
||||
const [timeRange, setTimeRange] = useState<TimeRangeOption>('last24Hours');
|
||||
const [customDateRange, setCustomDateRange] = useState<DateRange | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
// Get the active date range (either preset or custom)
|
||||
const getActiveDateRange = (): DateRange | null => {
|
||||
if (timeRange === 'custom' && customDateRange) {
|
||||
return customDateRange;
|
||||
}
|
||||
return getPresetDateRange(timeRange);
|
||||
};
|
||||
|
||||
// Reset all filters
|
||||
const resetFilters = () => {
|
||||
setSelectedBots([]);
|
||||
setSelectedPipelines([]);
|
||||
setTimeRange('last24Hours');
|
||||
setCustomDateRange(null);
|
||||
};
|
||||
|
||||
// Get the current filter state
|
||||
const filterState: FilterState = {
|
||||
selectedBots,
|
||||
selectedPipelines,
|
||||
timeRange,
|
||||
customDateRange,
|
||||
};
|
||||
|
||||
return {
|
||||
selectedBots,
|
||||
setSelectedBots,
|
||||
selectedPipelines,
|
||||
setSelectedPipelines,
|
||||
timeRange,
|
||||
setTimeRange,
|
||||
customDateRange,
|
||||
setCustomDateRange,
|
||||
getActiveDateRange,
|
||||
resetFilters,
|
||||
filterState,
|
||||
};
|
||||
}
|
||||
817
web/src/app/home/monitoring/page.tsx
Normal file
817
web/src/app/home/monitoring/page.tsx
Normal file
@@ -0,0 +1,817 @@
|
||||
'use client';
|
||||
|
||||
import React, { Suspense, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ChevronRight, ChevronDown, ExternalLink } from 'lucide-react';
|
||||
import OverviewCards from './components/overview-cards/OverviewCards';
|
||||
import MonitoringFilters from './components/filters/MonitoringFilters';
|
||||
import { useMonitoringFilters } from './hooks/useMonitoringFilters';
|
||||
import { useMonitoringData } from './hooks/useMonitoringData';
|
||||
import { MessageDetailsCard } from './components/MessageDetailsCard';
|
||||
import { MessageContentRenderer } from './components/MessageContentRenderer';
|
||||
import { MessageDetails } from './types/monitoring';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
|
||||
interface RawMessageData {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
message_content: string;
|
||||
session_id: string;
|
||||
status: string;
|
||||
level: string;
|
||||
platform: string;
|
||||
user_id: string;
|
||||
runner_name: string;
|
||||
variables: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface RawLLMCallData {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
model_name: string;
|
||||
status: string;
|
||||
duration: number;
|
||||
error_message: string | null;
|
||||
input_tokens: number;
|
||||
output_tokens: number;
|
||||
total_tokens: number;
|
||||
}
|
||||
|
||||
interface RawLLMStatsData {
|
||||
total_calls: number;
|
||||
total_input_tokens: number;
|
||||
total_output_tokens: number;
|
||||
total_tokens: number;
|
||||
total_duration_ms: number;
|
||||
average_duration_ms: number;
|
||||
}
|
||||
|
||||
interface RawErrorData {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
error_type: string;
|
||||
error_message: string;
|
||||
stack_trace: string | null;
|
||||
}
|
||||
|
||||
function MonitoringPageContent() {
|
||||
const { t } = useTranslation();
|
||||
const { filterState, setSelectedBots, setSelectedPipelines, setTimeRange } =
|
||||
useMonitoringFilters();
|
||||
const { data, loading, refetch } = useMonitoringData(filterState);
|
||||
|
||||
const [expandedMessageId, setExpandedMessageId] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [messageDetails, setMessageDetails] = useState<
|
||||
Record<string, MessageDetails>
|
||||
>({});
|
||||
const [loadingDetails, setLoadingDetails] = useState<Record<string, boolean>>(
|
||||
{},
|
||||
);
|
||||
|
||||
// State for expanded errors
|
||||
const [expandedErrorId, setExpandedErrorId] = useState<string | null>(null);
|
||||
|
||||
// State for controlled tabs
|
||||
const [activeTab, setActiveTab] = useState<string>('messages');
|
||||
|
||||
// Function to jump to a message record
|
||||
const jumpToMessage = async (messageId: string) => {
|
||||
setActiveTab('messages');
|
||||
// Small delay to ensure tab switch completes
|
||||
setTimeout(() => {
|
||||
toggleMessageExpand(messageId);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const toggleMessageExpand = async (messageId: string) => {
|
||||
if (expandedMessageId === messageId) {
|
||||
// Collapse
|
||||
setExpandedMessageId(null);
|
||||
} else {
|
||||
// Expand
|
||||
setExpandedMessageId(messageId);
|
||||
|
||||
// Fetch details if not already loaded
|
||||
if (!messageDetails[messageId]) {
|
||||
setLoadingDetails({ ...loadingDetails, [messageId]: true });
|
||||
try {
|
||||
// httpClient.get() returns the inner data directly (response.data.data)
|
||||
const result = await httpClient.get<{
|
||||
message_id: string;
|
||||
found: boolean;
|
||||
message: RawMessageData | null;
|
||||
llm_calls: RawLLMCallData[];
|
||||
llm_stats: RawLLMStatsData;
|
||||
errors: RawErrorData[];
|
||||
}>(`/api/v1/monitoring/messages/${messageId}/details`);
|
||||
|
||||
if (result) {
|
||||
setMessageDetails((prev) => ({
|
||||
...prev,
|
||||
[messageId]: {
|
||||
messageId: result.message_id,
|
||||
found: result.found,
|
||||
message: result.message
|
||||
? {
|
||||
id: result.message.id,
|
||||
timestamp: new Date(result.message.timestamp),
|
||||
botId: result.message.bot_id,
|
||||
botName: result.message.bot_name,
|
||||
pipelineId: result.message.pipeline_id,
|
||||
pipelineName: result.message.pipeline_name,
|
||||
messageContent: result.message.message_content,
|
||||
sessionId: result.message.session_id,
|
||||
status: result.message.status,
|
||||
level: result.message.level,
|
||||
platform: result.message.platform,
|
||||
userId: result.message.user_id,
|
||||
runnerName: result.message.runner_name,
|
||||
variables: result.message.variables,
|
||||
}
|
||||
: undefined,
|
||||
llmCalls: result.llm_calls.map((call: RawLLMCallData) => ({
|
||||
id: call.id,
|
||||
timestamp: new Date(call.timestamp),
|
||||
modelName: call.model_name,
|
||||
status: call.status,
|
||||
duration: call.duration,
|
||||
errorMessage: call.error_message,
|
||||
tokens: {
|
||||
input: call.input_tokens || 0,
|
||||
output: call.output_tokens || 0,
|
||||
total: call.total_tokens || 0,
|
||||
},
|
||||
})),
|
||||
errors: result.errors.map((error: RawErrorData) => ({
|
||||
id: error.id,
|
||||
timestamp: new Date(error.timestamp),
|
||||
errorType: error.error_type,
|
||||
errorMessage: error.error_message,
|
||||
stackTrace: error.stack_trace,
|
||||
})),
|
||||
llmStats: {
|
||||
totalCalls: result.llm_stats.total_calls,
|
||||
totalInputTokens: result.llm_stats.total_input_tokens,
|
||||
totalOutputTokens: result.llm_stats.total_output_tokens,
|
||||
totalTokens: result.llm_stats.total_tokens,
|
||||
totalDurationMs: result.llm_stats.total_duration_ms,
|
||||
averageDurationMs: result.llm_stats.average_duration_ms,
|
||||
},
|
||||
} as MessageDetails,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch message details:', error);
|
||||
} finally {
|
||||
setLoadingDetails({ ...loadingDetails, [messageId]: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const toggleErrorExpand = (errorId: string) => {
|
||||
if (expandedErrorId === errorId) {
|
||||
setExpandedErrorId(null);
|
||||
} else {
|
||||
setExpandedErrorId(errorId);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
{/* Filters and Refresh Button - Sticky */}
|
||||
<div className="sticky top-[-1.5rem] z-10 -ml-[2rem] -mr-[1.5rem] -mt-[1.5rem] pt-[1.5rem] pb-4 bg-[#fafafa] dark:bg-[#151518]">
|
||||
<div className="ml-[2rem] mr-[1.5rem] px-[0.8rem]">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
|
||||
<MonitoringFilters
|
||||
selectedBots={filterState.selectedBots}
|
||||
selectedPipelines={filterState.selectedPipelines}
|
||||
timeRange={filterState.timeRange}
|
||||
onBotsChange={setSelectedBots}
|
||||
onPipelinesChange={setSelectedPipelines}
|
||||
onTimeRangeChange={setTimeRange}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refetch}
|
||||
className="bg-white dark:bg-[#2a2a2e] hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-600 shadow-sm flex-shrink-0"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path>
|
||||
</svg>
|
||||
{t('monitoring.refreshData')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex flex-col gap-6 px-[0.8rem] pb-4">
|
||||
{/* Overview Section */}
|
||||
<OverviewCards
|
||||
metrics={data?.overview || null}
|
||||
messages={data?.messages || []}
|
||||
llmCalls={data?.llmCalls || []}
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
{/* Tabs Section */}
|
||||
<div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={setActiveTab}
|
||||
className="w-full"
|
||||
>
|
||||
<div className="px-6 pt-4">
|
||||
<TabsList className="bg-gray-100 dark:bg-[#1a1a1e] h-12 p-1">
|
||||
<TabsTrigger
|
||||
value="messages"
|
||||
className="px-6 py-2 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
|
||||
>
|
||||
{t('monitoring.tabs.messages')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="modelCalls"
|
||||
className="px-6 py-2 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
|
||||
>
|
||||
{t('monitoring.tabs.modelCalls')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="errors"
|
||||
className="px-6 py-2 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
|
||||
>
|
||||
{t('monitoring.tabs.errors')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<TabsContent value="messages" className="p-6 m-0">
|
||||
<div>
|
||||
{loading && (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 py-12">
|
||||
<div className="inline-block animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 dark:border-blue-400 mb-4"></div>
|
||||
<p className="text-sm font-medium">
|
||||
{t('monitoring.messageList.loading')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
data &&
|
||||
data.messages &&
|
||||
data.messages.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{data.messages
|
||||
.filter((msg) => {
|
||||
// Filter out messages with empty content
|
||||
const content = msg.messageContent?.trim();
|
||||
return (
|
||||
content && content !== '[]' && content !== '""'
|
||||
);
|
||||
})
|
||||
.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-md transition-all duration-200"
|
||||
>
|
||||
{/* Message Header - Always Visible */}
|
||||
<div
|
||||
className="p-5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
|
||||
onClick={() => toggleMessageExpand(msg.id)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start flex-1">
|
||||
{/* Expand Icon */}
|
||||
<div className="mr-3 mt-0.5">
|
||||
{expandedMessageId === msg.id ? (
|
||||
<ChevronDown className="w-5 h-5 text-gray-500" />
|
||||
) : (
|
||||
<ChevronRight className="w-5 h-5 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Message Info */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
|
||||
ID: {msg.id}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-medium text-sm text-gray-700 dark:text-gray-300">
|
||||
{msg.botName}
|
||||
</span>
|
||||
<span className="text-gray-400">→</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{msg.pipelineName}
|
||||
</span>
|
||||
{msg.runnerName && (
|
||||
<>
|
||||
<span className="text-gray-400">
|
||||
→
|
||||
</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{msg.runnerName}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-base text-gray-800 dark:text-gray-200">
|
||||
<MessageContentRenderer
|
||||
content={msg.messageContent}
|
||||
maxLines={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status and Timestamp */}
|
||||
<div className="flex flex-col items-end gap-2 ml-4">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
{msg.timestamp.toLocaleString()}
|
||||
</span>
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded ${
|
||||
msg.level === 'error'
|
||||
? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
||||
: msg.level === 'warning'
|
||||
? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
||||
: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||
}`}
|
||||
>
|
||||
{msg.level}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded Details */}
|
||||
{expandedMessageId === msg.id && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900">
|
||||
{loadingDetails[msg.id] && (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 py-4">
|
||||
<div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
|
||||
</div>
|
||||
)}
|
||||
{!loadingDetails[msg.id] &&
|
||||
messageDetails[msg.id] && (
|
||||
<MessageDetailsCard
|
||||
details={messageDetails[msg.id]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
(!data || !data.messages || data.messages.length === 0) && (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 py-16">
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-base font-medium mb-2">
|
||||
{t('monitoring.messageList.noMessages')}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{t('monitoring.messageList.noMessagesDescription')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="modelCalls" className="p-6 m-0">
|
||||
<div>
|
||||
{loading && (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 py-12">
|
||||
<div className="inline-block animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 dark:border-blue-400 mb-4"></div>
|
||||
<p className="text-sm font-medium">{t('common.loading')}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
data &&
|
||||
data.modelCalls &&
|
||||
data.modelCalls.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{data.modelCalls.map((call) => (
|
||||
<div
|
||||
key={call.id}
|
||||
className="border border-gray-200 dark:border-gray-700 rounded-xl p-5 hover:shadow-md transition-all duration-200"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex-1">
|
||||
{/* Query ID - only show if messageId exists */}
|
||||
{call.messageId && (
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
|
||||
Query ID: {call.messageId}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 px-1.5 text-xs"
|
||||
onClick={() =>
|
||||
jumpToMessage(call.messageId!)
|
||||
}
|
||||
>
|
||||
<ExternalLink className="w-3 h-3 mr-1" />
|
||||
{t(
|
||||
'monitoring.messageList.viewConversation',
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{/* Model Type Badge */}
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded ${
|
||||
call.modelType === 'llm'
|
||||
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
||||
: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
|
||||
}`}
|
||||
>
|
||||
{call.modelType === 'llm'
|
||||
? t('monitoring.modelCalls.llmModel')
|
||||
: t('monitoring.modelCalls.embeddingModel')}
|
||||
</span>
|
||||
{/* Call Type Badge for Embedding */}
|
||||
{call.modelType === 'embedding' &&
|
||||
call.callType && (
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded ${
|
||||
call.callType === 'retrieve'
|
||||
? 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200'
|
||||
: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
|
||||
}`}
|
||||
>
|
||||
{call.callType === 'retrieve'
|
||||
? t(
|
||||
'monitoring.modelCalls.retrieveCall',
|
||||
)
|
||||
: t(
|
||||
'monitoring.modelCalls.embeddingCall',
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{/* Status Badge */}
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded ${
|
||||
call.status === 'success'
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
||||
}`}
|
||||
>
|
||||
{call.status}
|
||||
</span>
|
||||
</div>
|
||||
{/* Model Name */}
|
||||
<div className="font-medium text-sm text-gray-700 dark:text-gray-300 mb-2">
|
||||
{call.modelName}
|
||||
</div>
|
||||
{/* Context Info - only for LLM calls */}
|
||||
{call.modelType === 'llm' &&
|
||||
call.botName &&
|
||||
call.pipelineName && (
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 mb-1">
|
||||
{call.botName} → {call.pipelineName}
|
||||
</div>
|
||||
)}
|
||||
{/* Token Info */}
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{call.modelType === 'llm' && call.tokens && (
|
||||
<>
|
||||
<span>
|
||||
{t('monitoring.llmCalls.inputTokens')}:{' '}
|
||||
{call.tokens.input}
|
||||
</span>
|
||||
<span>
|
||||
{t('monitoring.llmCalls.outputTokens')}:{' '}
|
||||
{call.tokens.output}
|
||||
</span>
|
||||
<span>
|
||||
{t('monitoring.llmCalls.totalTokens')}:{' '}
|
||||
{call.tokens.total}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{call.modelType === 'embedding' && (
|
||||
<>
|
||||
<span>
|
||||
{t(
|
||||
'monitoring.embeddingCalls.promptTokens',
|
||||
)}
|
||||
: {call.promptTokens}
|
||||
</span>
|
||||
<span>
|
||||
{t(
|
||||
'monitoring.embeddingCalls.totalTokens',
|
||||
)}
|
||||
: {call.totalTokens}
|
||||
</span>
|
||||
<span>
|
||||
{t(
|
||||
'monitoring.embeddingCalls.inputCount',
|
||||
)}
|
||||
: {call.inputCount}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<span>
|
||||
{t('monitoring.llmCalls.duration')}:{' '}
|
||||
{call.duration}ms
|
||||
</span>
|
||||
{call.cost && (
|
||||
<span>
|
||||
{t('monitoring.llmCalls.cost')}: $
|
||||
{call.cost.toFixed(4)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Knowledge Base Info for Embedding */}
|
||||
{call.modelType === 'embedding' &&
|
||||
call.knowledgeBaseId && (
|
||||
<div>
|
||||
{t(
|
||||
'monitoring.embeddingCalls.knowledgeBase',
|
||||
)}
|
||||
: {call.knowledgeBaseId}
|
||||
</div>
|
||||
)}
|
||||
{/* Query Text for Embedding Retrieve */}
|
||||
{call.modelType === 'embedding' &&
|
||||
call.queryText && (
|
||||
<div className="mt-2 p-2 bg-gray-50 dark:bg-gray-800 rounded text-sm">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{t(
|
||||
'monitoring.embeddingCalls.queryText',
|
||||
)}
|
||||
:{' '}
|
||||
</span>
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
{call.queryText.length > 100
|
||||
? call.queryText.substring(0, 100) +
|
||||
'...'
|
||||
: call.queryText}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{call.errorMessage && (
|
||||
<div className="mt-2 text-xs text-red-600 dark:text-red-400">
|
||||
Error: {call.errorMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
|
||||
{call.timestamp.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
(!data ||
|
||||
!data.modelCalls ||
|
||||
data.modelCalls.length === 0) && (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 py-16">
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-base font-medium">
|
||||
{t('monitoring.modelCalls.noData')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="errors" className="p-6 m-0">
|
||||
<div>
|
||||
{loading && (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 py-12">
|
||||
<div className="inline-block animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 dark:border-blue-400 mb-4"></div>
|
||||
<p className="text-sm font-medium">{t('common.loading')}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && data && data.errors && data.errors.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{data.errors.map((error) => (
|
||||
<div
|
||||
key={error.id}
|
||||
className="border border-red-200 dark:border-red-900 rounded-xl overflow-hidden hover:shadow-md transition-all duration-200"
|
||||
>
|
||||
{/* Error Header - Always Visible */}
|
||||
<div
|
||||
className="p-5 cursor-pointer hover:bg-red-50 dark:hover:bg-red-950/50 transition-colors bg-red-50/50 dark:bg-red-950/30"
|
||||
onClick={() => toggleErrorExpand(error.id)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start flex-1">
|
||||
{/* Expand Icon */}
|
||||
<div className="mr-3 mt-0.5">
|
||||
{expandedErrorId === error.id ? (
|
||||
<ChevronDown className="w-5 h-5 text-red-500" />
|
||||
) : (
|
||||
<ChevronRight className="w-5 h-5 text-red-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Info */}
|
||||
<div className="flex-1">
|
||||
{/* Query ID */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
|
||||
Query ID: {error.messageId || '-'}
|
||||
</span>
|
||||
{error.messageId && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 px-1.5 text-xs"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
jumpToMessage(error.messageId!);
|
||||
}}
|
||||
>
|
||||
<ExternalLink className="w-3 h-3 mr-1" />
|
||||
{t(
|
||||
'monitoring.messageList.viewConversation',
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-medium text-sm text-red-700 dark:text-red-300">
|
||||
{error.errorType}
|
||||
</span>
|
||||
<span className="text-red-400">→</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{error.botName}
|
||||
</span>
|
||||
<span className="text-red-400">→</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{error.pipelineName}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-red-600 dark:text-red-400 line-clamp-2">
|
||||
{error.errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<div className="flex flex-col items-end gap-2 ml-4">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
{error.timestamp.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded Details */}
|
||||
{expandedErrorId === error.id && (
|
||||
<div className="border-t border-red-200 dark:border-red-900 p-5 bg-white dark:bg-gray-900">
|
||||
<div className="space-y-4 pl-8 border-l-2 border-red-300 dark:border-red-800 ml-4">
|
||||
{/* Error Details */}
|
||||
<div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
|
||||
<h4 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-3">
|
||||
{t('monitoring.errors.errorMessage')}
|
||||
</h4>
|
||||
<div className="text-sm text-red-600 dark:text-red-400 whitespace-pre-wrap break-words">
|
||||
{error.errorMessage}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Context Info */}
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
{t('monitoring.messageList.viewDetails')}
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs">
|
||||
<div className="bg-white dark:bg-gray-900 rounded p-2">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
{t('monitoring.messageList.bot')}
|
||||
</div>
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
{error.botName}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-900 rounded p-2">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
{t('monitoring.messageList.pipeline')}
|
||||
</div>
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
{error.pipelineName}
|
||||
</div>
|
||||
</div>
|
||||
{error.sessionId && (
|
||||
<div className="bg-white dark:bg-gray-900 rounded p-2">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
{t('monitoring.sessions.sessionId')}
|
||||
</div>
|
||||
<div className="font-medium text-gray-900 dark:text-white truncate">
|
||||
{error.sessionId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stack Trace */}
|
||||
{error.stackTrace && (
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
{t('monitoring.errors.stackTrace')}
|
||||
</h4>
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 overflow-auto max-h-60 bg-white dark:bg-gray-900 p-3 rounded whitespace-pre-wrap break-words">
|
||||
{error.stackTrace}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading &&
|
||||
(!data || !data.errors || data.errors.length === 0) && (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 py-16">
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto mb-4 text-green-300 dark:text-green-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-base font-medium text-green-600 dark:text-green-400">
|
||||
{t('monitoring.errors.noErrors')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MonitoringPage() {
|
||||
return (
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<MonitoringPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
180
web/src/app/home/monitoring/types/monitoring.ts
Normal file
180
web/src/app/home/monitoring/types/monitoring.ts
Normal file
@@ -0,0 +1,180 @@
|
||||
export interface MonitoringMessage {
|
||||
id: string;
|
||||
timestamp: Date;
|
||||
botId: string;
|
||||
botName: string;
|
||||
pipelineId: string;
|
||||
pipelineName: string;
|
||||
messageContent: string;
|
||||
sessionId: string;
|
||||
status: 'success' | 'error' | 'pending';
|
||||
level: 'info' | 'warning' | 'error' | 'debug';
|
||||
platform?: string;
|
||||
userId?: string;
|
||||
runnerName?: string;
|
||||
variables?: string;
|
||||
}
|
||||
|
||||
export interface LLMCall {
|
||||
id: string;
|
||||
timestamp: Date;
|
||||
modelName: string;
|
||||
tokens: {
|
||||
input: number;
|
||||
output: number;
|
||||
total: number;
|
||||
};
|
||||
duration: number;
|
||||
cost?: number;
|
||||
status: 'success' | 'error';
|
||||
botId: string;
|
||||
botName: string;
|
||||
pipelineId: string;
|
||||
pipelineName: string;
|
||||
errorMessage?: string;
|
||||
messageId?: string;
|
||||
}
|
||||
|
||||
export interface EmbeddingCall {
|
||||
id: string;
|
||||
timestamp: Date;
|
||||
modelName: string;
|
||||
promptTokens: number;
|
||||
totalTokens: number;
|
||||
duration: number;
|
||||
inputCount: number;
|
||||
status: 'success' | 'error';
|
||||
errorMessage?: string;
|
||||
knowledgeBaseId?: string;
|
||||
queryText?: string;
|
||||
sessionId?: string;
|
||||
messageId?: string;
|
||||
callType?: 'embedding' | 'retrieve';
|
||||
}
|
||||
|
||||
// Unified model call type for displaying LLM and Embedding calls together
|
||||
export interface ModelCall {
|
||||
id: string;
|
||||
timestamp: Date;
|
||||
modelName: string;
|
||||
modelType: 'llm' | 'embedding';
|
||||
status: 'success' | 'error';
|
||||
duration: number;
|
||||
errorMessage?: string;
|
||||
messageId?: string;
|
||||
// LLM specific fields
|
||||
tokens?: {
|
||||
input: number;
|
||||
output: number;
|
||||
total: number;
|
||||
};
|
||||
cost?: number;
|
||||
botId?: string;
|
||||
botName?: string;
|
||||
pipelineId?: string;
|
||||
pipelineName?: string;
|
||||
// Embedding specific fields
|
||||
callType?: 'embedding' | 'retrieve';
|
||||
promptTokens?: number;
|
||||
totalTokens?: number;
|
||||
inputCount?: number;
|
||||
knowledgeBaseId?: string;
|
||||
queryText?: string;
|
||||
sessionId?: string;
|
||||
}
|
||||
|
||||
export interface SessionInfo {
|
||||
sessionId: string;
|
||||
botId: string;
|
||||
botName: string;
|
||||
pipelineId: string;
|
||||
pipelineName: string;
|
||||
messageCount: number;
|
||||
duration: number;
|
||||
lastActivity: Date;
|
||||
startTime: Date;
|
||||
platform?: string;
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
export interface ErrorLog {
|
||||
id: string;
|
||||
timestamp: Date;
|
||||
errorType: string;
|
||||
errorMessage: string;
|
||||
botId: string;
|
||||
botName: string;
|
||||
pipelineId: string;
|
||||
pipelineName: string;
|
||||
sessionId?: string;
|
||||
stackTrace?: string;
|
||||
messageId?: string;
|
||||
}
|
||||
|
||||
export interface MessageDetails {
|
||||
messageId: string;
|
||||
found: boolean;
|
||||
message?: MonitoringMessage;
|
||||
llmCalls: LLMCall[];
|
||||
llmStats: {
|
||||
totalCalls: number;
|
||||
totalInputTokens: number;
|
||||
totalOutputTokens: number;
|
||||
totalTokens: number;
|
||||
totalDurationMs: number;
|
||||
averageDurationMs: number;
|
||||
};
|
||||
errors: ErrorLog[];
|
||||
}
|
||||
|
||||
export interface OverviewMetrics {
|
||||
totalMessages: number;
|
||||
llmCalls: number;
|
||||
embeddingCalls: number;
|
||||
modelCalls: number;
|
||||
successRate: number;
|
||||
activeSessions: number;
|
||||
trends?: {
|
||||
messages: number;
|
||||
llmCalls: number;
|
||||
successRate: number;
|
||||
sessions: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface FilterState {
|
||||
selectedBots: string[];
|
||||
selectedPipelines: string[];
|
||||
timeRange: TimeRangeOption;
|
||||
customDateRange: DateRange | null;
|
||||
}
|
||||
|
||||
export type TimeRangeOption =
|
||||
| 'lastHour'
|
||||
| 'last6Hours'
|
||||
| 'last24Hours'
|
||||
| 'last7Days'
|
||||
| 'last30Days'
|
||||
| 'custom';
|
||||
|
||||
export interface DateRange {
|
||||
from: Date;
|
||||
to: Date;
|
||||
}
|
||||
|
||||
export interface MonitoringData {
|
||||
overview: OverviewMetrics;
|
||||
messages: MonitoringMessage[];
|
||||
llmCalls: LLMCall[];
|
||||
embeddingCalls: EmbeddingCall[];
|
||||
modelCalls: ModelCall[];
|
||||
sessions: SessionInfo[];
|
||||
errors: ErrorLog[];
|
||||
totalCount: {
|
||||
messages: number;
|
||||
llmCalls: number;
|
||||
embeddingCalls: number;
|
||||
sessions: number;
|
||||
errors: number;
|
||||
};
|
||||
}
|
||||
99
web/src/app/home/monitoring/utils/dateUtils.ts
Normal file
99
web/src/app/home/monitoring/utils/dateUtils.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
import { DateRange, TimeRangeOption } from '../types/monitoring';
|
||||
|
||||
/**
|
||||
* Get date range based on preset time range option
|
||||
*/
|
||||
export function getPresetDateRange(option: TimeRangeOption): DateRange | null {
|
||||
if (option === 'custom') return null;
|
||||
|
||||
const now = new Date();
|
||||
const from = new Date();
|
||||
|
||||
switch (option) {
|
||||
case 'lastHour':
|
||||
from.setHours(now.getHours() - 1);
|
||||
break;
|
||||
case 'last6Hours':
|
||||
from.setHours(now.getHours() - 6);
|
||||
break;
|
||||
case 'last24Hours':
|
||||
from.setHours(now.getHours() - 24);
|
||||
break;
|
||||
case 'last7Days':
|
||||
from.setDate(now.getDate() - 7);
|
||||
break;
|
||||
case 'last30Days':
|
||||
from.setDate(now.getDate() - 30);
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
return { from, to: now };
|
||||
}
|
||||
|
||||
/**
|
||||
* Format timestamp to readable string
|
||||
*/
|
||||
export function formatTimestamp(date: Date): string {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const seconds = Math.floor(diff / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (seconds < 60) return `${seconds}s ago`;
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
if (days < 7) return `${days}d ago`;
|
||||
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Format date to YYYY-MM-DD
|
||||
*/
|
||||
export function formatDate(date: Date): string {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format date to YYYY-MM-DD HH:MM:SS
|
||||
*/
|
||||
export function formatDateTime(date: Date): string {
|
||||
const dateStr = formatDate(date);
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${dateStr} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format duration in seconds to readable string
|
||||
*/
|
||||
export function formatDuration(seconds: number): string {
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
return `${hours}h ${minutes % 60}m`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if date is within range
|
||||
*/
|
||||
export function isDateInRange(date: Date, range: DateRange | null): boolean {
|
||||
if (!range) return true;
|
||||
return date >= range.from && date <= range.to;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse date string to Date object
|
||||
*/
|
||||
export function parseDate(dateStr: string): Date {
|
||||
return new Date(dateStr);
|
||||
}
|
||||
@@ -1,11 +1,13 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
@@ -45,6 +47,7 @@ export default function PipelineDialog({
|
||||
onCancel,
|
||||
}: PipelineDialogProps) {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const [pipelineId, setPipelineId] = useState<string | undefined>(
|
||||
propPipelineId,
|
||||
);
|
||||
@@ -190,23 +193,48 @@ export default function PipelineDialog({
|
||||
>
|
||||
<DialogTitle>{getDialogTitle()}</DialogTitle>
|
||||
{currentMode === 'debug' && (
|
||||
<div className="flex items-center gap-2 ml-2">
|
||||
<div
|
||||
className={`w-2.5 h-2.5 rounded-full ${
|
||||
isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
|
||||
}`}
|
||||
title={
|
||||
isWebSocketConnected
|
||||
<>
|
||||
<div className="flex items-center gap-2 ml-2">
|
||||
<div
|
||||
className={`w-2.5 h-2.5 rounded-full ${
|
||||
isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
|
||||
}`}
|
||||
title={
|
||||
isWebSocketConnected
|
||||
? t('pipelines.debugDialog.connected')
|
||||
: t('pipelines.debugDialog.disconnected')
|
||||
}
|
||||
/>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{isWebSocketConnected
|
||||
? t('pipelines.debugDialog.connected')
|
||||
: t('pipelines.debugDialog.disconnected')
|
||||
}
|
||||
/>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{isWebSocketConnected
|
||||
? t('pipelines.debugDialog.connected')
|
||||
: t('pipelines.debugDialog.disconnected')}
|
||||
</span>
|
||||
</div>
|
||||
: t('pipelines.debugDialog.disconnected')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/home/monitoring?pipelineId=${pipelineId}`,
|
||||
);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
className="bg-white dark:bg-[#2a2a2e]"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
|
||||
</svg>
|
||||
{t('monitoring.viewMonitoring')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogHeader>
|
||||
<div
|
||||
|
||||
@@ -803,4 +803,150 @@ export class BackendClient extends BaseHttpClient {
|
||||
}
|
||||
return response.data.data;
|
||||
}
|
||||
|
||||
// ============ Monitoring API ============
|
||||
public getMonitoringData(params: {
|
||||
botId?: string[];
|
||||
pipelineId?: string[];
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
limit?: number;
|
||||
}): Promise<{
|
||||
overview: {
|
||||
total_messages: number;
|
||||
llm_calls: number;
|
||||
embedding_calls: number;
|
||||
model_calls: number;
|
||||
success_rate: number;
|
||||
active_sessions: number;
|
||||
};
|
||||
messages: Array<{
|
||||
id: string;
|
||||
timestamp: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
message_content: string;
|
||||
session_id: string;
|
||||
status: string;
|
||||
level: string;
|
||||
platform?: string;
|
||||
user_id?: string;
|
||||
runner_name?: string;
|
||||
variables?: string;
|
||||
}>;
|
||||
llmCalls: Array<{
|
||||
id: string;
|
||||
timestamp: string;
|
||||
model_name: string;
|
||||
input_tokens: number;
|
||||
output_tokens: number;
|
||||
total_tokens: number;
|
||||
duration: number;
|
||||
cost?: number;
|
||||
status: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
error_message?: string;
|
||||
message_id?: string;
|
||||
}>;
|
||||
embeddingCalls: Array<{
|
||||
id: string;
|
||||
timestamp: string;
|
||||
model_name: string;
|
||||
prompt_tokens: number;
|
||||
total_tokens: number;
|
||||
duration: number;
|
||||
input_count: number;
|
||||
status: string;
|
||||
error_message?: string;
|
||||
knowledge_base_id?: string;
|
||||
query_text?: string;
|
||||
session_id?: string;
|
||||
message_id?: string;
|
||||
call_type?: string;
|
||||
}>;
|
||||
sessions: Array<{
|
||||
session_id: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
message_count: number;
|
||||
last_activity: string;
|
||||
start_time: string;
|
||||
platform?: string;
|
||||
user_id?: string;
|
||||
}>;
|
||||
errors: Array<{
|
||||
id: string;
|
||||
timestamp: string;
|
||||
error_type: string;
|
||||
error_message: string;
|
||||
bot_id: string;
|
||||
bot_name: string;
|
||||
pipeline_id: string;
|
||||
pipeline_name: string;
|
||||
session_id?: string;
|
||||
stack_trace?: string;
|
||||
message_id?: string;
|
||||
}>;
|
||||
totalCount: {
|
||||
messages: number;
|
||||
llmCalls: number;
|
||||
embeddingCalls: number;
|
||||
sessions: number;
|
||||
errors: number;
|
||||
};
|
||||
}> {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params.botId) {
|
||||
params.botId.forEach((id) => queryParams.append('botId', id));
|
||||
}
|
||||
if (params.pipelineId) {
|
||||
params.pipelineId.forEach((id) => queryParams.append('pipelineId', id));
|
||||
}
|
||||
if (params.startTime) {
|
||||
queryParams.append('startTime', params.startTime);
|
||||
}
|
||||
if (params.endTime) {
|
||||
queryParams.append('endTime', params.endTime);
|
||||
}
|
||||
if (params.limit) {
|
||||
queryParams.append('limit', params.limit.toString());
|
||||
}
|
||||
|
||||
return this.get(`/api/v1/monitoring/data?${queryParams.toString()}`);
|
||||
}
|
||||
|
||||
public getMonitoringOverview(params: {
|
||||
botId?: string[];
|
||||
pipelineId?: string[];
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
}): Promise<{
|
||||
total_messages: number;
|
||||
llm_calls: number;
|
||||
success_rate: number;
|
||||
active_sessions: number;
|
||||
}> {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params.botId) {
|
||||
params.botId.forEach((id) => queryParams.append('botId', id));
|
||||
}
|
||||
if (params.pipelineId) {
|
||||
params.pipelineId.forEach((id) => queryParams.append('pipelineId', id));
|
||||
}
|
||||
if (params.startTime) {
|
||||
queryParams.append('startTime', params.startTime);
|
||||
}
|
||||
if (params.endTime) {
|
||||
queryParams.append('endTime', params.endTime);
|
||||
}
|
||||
|
||||
return this.get(`/api/v1/monitoring/overview?${queryParams.toString()}`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,6 +276,10 @@ const enUS = {
|
||||
allLevels: 'All Levels',
|
||||
selectLevel: 'Select Level',
|
||||
levelsSelected: 'levels selected',
|
||||
viewDetailedLogs: 'View Detailed Logs',
|
||||
viewDetails: 'Details',
|
||||
collapse: 'Collapse',
|
||||
imagesAttached: 'image(s) attached',
|
||||
},
|
||||
plugins: {
|
||||
title: 'Extensions',
|
||||
@@ -802,6 +806,140 @@ const enUS = {
|
||||
spaceEmailMismatch:
|
||||
'Space login email does not match the local account email',
|
||||
},
|
||||
monitoring: {
|
||||
title: 'Monitoring',
|
||||
description: 'Monitor bot activities, LLM calls, and system performance',
|
||||
overview: 'Overview',
|
||||
totalMessages: 'Total Messages',
|
||||
llmCallsCount: 'LLM Calls',
|
||||
modelCallsCount: 'Model Calls',
|
||||
successRate: 'Success Rate',
|
||||
activeSessions: 'Active Sessions',
|
||||
last24Hours: 'Last 24 hours',
|
||||
filters: {
|
||||
title: 'Filters',
|
||||
bot: 'Bot',
|
||||
pipeline: 'Pipeline',
|
||||
allBots: 'All Bots',
|
||||
selectBot: 'Select Bot',
|
||||
allPipelines: 'All Pipelines',
|
||||
selectPipeline: 'Select Pipeline',
|
||||
loading: 'Loading...',
|
||||
timeRange: 'Time Range',
|
||||
customRange: 'Custom Range',
|
||||
from: 'From',
|
||||
to: 'To',
|
||||
apply: 'Apply',
|
||||
reset: 'Reset Filters',
|
||||
lastHour: 'Last 1 hour',
|
||||
last6Hours: 'Last 6 hours',
|
||||
last24Hours: 'Last 24 hours',
|
||||
last7Days: 'Last 7 days',
|
||||
last30Days: 'Last 30 days',
|
||||
},
|
||||
tabs: {
|
||||
messages: 'Message Records',
|
||||
llmCalls: 'LLM Calls',
|
||||
embeddingCalls: 'Embedding Calls',
|
||||
modelCalls: 'Model Calls',
|
||||
sessions: 'Session Analysis',
|
||||
errors: 'Error Logs',
|
||||
},
|
||||
messageList: {
|
||||
timestamp: 'Timestamp',
|
||||
bot: 'Bot',
|
||||
pipeline: 'Pipeline',
|
||||
message: 'Message',
|
||||
sessionId: 'Session ID',
|
||||
status: 'Status',
|
||||
actions: 'Actions',
|
||||
viewDetails: 'View Details',
|
||||
copyId: 'Copy ID',
|
||||
noMessages: 'No messages found',
|
||||
noMessagesDescription: 'Try adjusting your filters or check back later',
|
||||
loading: 'Loading messages...',
|
||||
loadMore: 'Load More',
|
||||
autoRefresh: 'Auto Refresh',
|
||||
platform: 'Role',
|
||||
user: 'User',
|
||||
level: 'Level',
|
||||
runner: 'Runner',
|
||||
viewConversation: 'View Conversation',
|
||||
},
|
||||
llmCalls: {
|
||||
title: 'LLM Calls',
|
||||
model: 'Model',
|
||||
tokens: 'Tokens',
|
||||
duration: 'Duration',
|
||||
cost: 'Cost',
|
||||
noData: 'No LLM calls found',
|
||||
inputTokens: 'Input Tokens',
|
||||
outputTokens: 'Output Tokens',
|
||||
totalTokens: 'Total Tokens',
|
||||
avgDuration: 'Avg Duration',
|
||||
calls: 'Calls',
|
||||
},
|
||||
embeddingCalls: {
|
||||
title: 'Embedding Calls',
|
||||
model: 'Model',
|
||||
tokens: 'Tokens',
|
||||
duration: 'Duration',
|
||||
noData: 'No embedding calls found',
|
||||
promptTokens: 'Prompt Tokens',
|
||||
totalTokens: 'Total Tokens',
|
||||
inputCount: 'Input Count',
|
||||
knowledgeBase: 'Knowledge Base',
|
||||
queryText: 'Query',
|
||||
},
|
||||
modelCalls: {
|
||||
title: 'Model Calls',
|
||||
llmModel: 'LLM',
|
||||
embeddingModel: 'Embedding',
|
||||
embeddingCall: 'Embedding',
|
||||
retrieveCall: 'Retrieve',
|
||||
noData: 'No model calls found',
|
||||
},
|
||||
sessions: {
|
||||
sessionId: 'Session ID',
|
||||
messageCount: 'Messages',
|
||||
duration: 'Duration',
|
||||
lastActivity: 'Last Activity',
|
||||
noSessions: 'No sessions found',
|
||||
startTime: 'Start Time',
|
||||
messageStats: 'Message Statistics',
|
||||
totalMessages: 'Total Messages',
|
||||
successMessages: 'Successful',
|
||||
errorMessages: 'Failed',
|
||||
llmStats: 'LLM Statistics',
|
||||
noData: 'Session not found',
|
||||
},
|
||||
errors: {
|
||||
title: 'Errors',
|
||||
errorType: 'Error Type',
|
||||
errorMessage: 'Error Message',
|
||||
occurredAt: 'Occurred At',
|
||||
noErrors: 'No errors found',
|
||||
stackTrace: 'Stack Trace',
|
||||
},
|
||||
queries: {
|
||||
title: 'Queries',
|
||||
},
|
||||
messageDetails: {
|
||||
noData: 'No LLM calls or errors for this query',
|
||||
},
|
||||
queryVariables: {
|
||||
title: 'Query Variables',
|
||||
},
|
||||
trafficChart: {
|
||||
title: 'Traffic Overview',
|
||||
messages: 'Messages',
|
||||
llmCalls: 'LLM Calls',
|
||||
noData: 'No traffic data available',
|
||||
},
|
||||
viewMonitoring: 'View Monitoring',
|
||||
refreshData: 'Refresh Data',
|
||||
exportData: 'Export Data',
|
||||
},
|
||||
};
|
||||
|
||||
export default enUS;
|
||||
|
||||
@@ -811,6 +811,123 @@ const jaJP = {
|
||||
spaceEmailMismatch:
|
||||
'Spaceログインのメールアドレスがローカルアカウントのメールアドレスと一致しません',
|
||||
},
|
||||
monitoring: {
|
||||
title: 'モニタリング',
|
||||
description:
|
||||
'ボットアクティビティ、LLM呼び出し、システムパフォーマンスを監視',
|
||||
overview: '概要',
|
||||
totalMessages: '総メッセージ数',
|
||||
llmCallsCount: 'LLM呼び出し',
|
||||
modelCallsCount: 'モデル呼び出し',
|
||||
successRate: '成功率',
|
||||
activeSessions: 'アクティブセッション',
|
||||
last24Hours: '過去24時間',
|
||||
filters: {
|
||||
title: 'フィルター',
|
||||
bot: 'ボット',
|
||||
pipeline: 'パイプライン',
|
||||
allBots: 'すべてのボット',
|
||||
selectBot: 'ボットを選択',
|
||||
allPipelines: 'すべてのパイプライン',
|
||||
selectPipeline: 'パイプラインを選択',
|
||||
loading: '読み込み中...',
|
||||
timeRange: '時間範囲',
|
||||
customRange: 'カスタム範囲',
|
||||
from: '開始',
|
||||
to: '終了',
|
||||
apply: '適用',
|
||||
reset: 'フィルターをリセット',
|
||||
lastHour: '過去1時間',
|
||||
last6Hours: '過去6時間',
|
||||
last24Hours: '過去24時間',
|
||||
last7Days: '過去7日間',
|
||||
last30Days: '過去30日間',
|
||||
},
|
||||
tabs: {
|
||||
messages: 'メッセージ記録',
|
||||
llmCalls: 'LLM呼び出し',
|
||||
embeddingCalls: 'Embedding呼び出し',
|
||||
modelCalls: 'モデル呼び出し',
|
||||
sessions: 'セッション分析',
|
||||
errors: 'エラーログ',
|
||||
},
|
||||
messageList: {
|
||||
timestamp: 'タイムスタンプ',
|
||||
bot: 'ボット',
|
||||
pipeline: 'パイプライン',
|
||||
message: 'メッセージ',
|
||||
sessionId: 'セッションID',
|
||||
status: 'ステータス',
|
||||
actions: 'アクション',
|
||||
viewDetails: '詳細を表示',
|
||||
copyId: 'IDをコピー',
|
||||
noMessages: 'メッセージが見つかりません',
|
||||
noMessagesDescription: 'フィルターを調整するか、後で確認してください',
|
||||
loading: 'メッセージを読み込んでいます...',
|
||||
loadMore: 'もっと読み込む',
|
||||
autoRefresh: '自動更新',
|
||||
platform: 'プラットフォーム',
|
||||
user: 'ユーザー',
|
||||
level: 'レベル',
|
||||
runner: 'ランナー',
|
||||
viewConversation: '会話詳細を表示',
|
||||
},
|
||||
llmCalls: {
|
||||
model: 'モデル',
|
||||
tokens: 'トークン数',
|
||||
duration: '期間',
|
||||
cost: 'コスト',
|
||||
noData: 'LLM呼び出し記録が見つかりません',
|
||||
inputTokens: '入力トークン',
|
||||
outputTokens: '出力トークン',
|
||||
totalTokens: '合計トークン数',
|
||||
},
|
||||
embeddingCalls: {
|
||||
title: 'Embedding呼び出し',
|
||||
model: 'モデル',
|
||||
tokens: 'トークン数',
|
||||
duration: '期間',
|
||||
noData: 'Embedding呼び出し記録が見つかりません',
|
||||
promptTokens: '入力トークン',
|
||||
totalTokens: '合計トークン数',
|
||||
inputCount: '入力数',
|
||||
knowledgeBase: 'ナレッジベース',
|
||||
queryText: 'クエリ',
|
||||
},
|
||||
modelCalls: {
|
||||
title: 'モデル呼び出し',
|
||||
llmModel: '対話モデル',
|
||||
embeddingModel: '埋め込みモデル',
|
||||
embeddingCall: '埋め込み呼び出し',
|
||||
retrieveCall: '検索呼び出し',
|
||||
noData: 'モデル呼び出し記録が見つかりません',
|
||||
},
|
||||
sessions: {
|
||||
sessionId: 'セッションID',
|
||||
messageCount: 'メッセージ数',
|
||||
duration: '期間',
|
||||
lastActivity: '最終アクティビティ',
|
||||
noSessions: 'セッションが見つかりません',
|
||||
startTime: '開始時刻',
|
||||
},
|
||||
errors: {
|
||||
errorType: 'エラータイプ',
|
||||
errorMessage: 'エラーメッセージ',
|
||||
occurredAt: '発生時刻',
|
||||
noErrors: 'エラーが見つかりません',
|
||||
stackTrace: 'スタックトレース',
|
||||
title: 'エラー',
|
||||
},
|
||||
messageDetails: {
|
||||
noData: 'このクエリにはLLM呼び出しやエラーがありません',
|
||||
},
|
||||
queryVariables: {
|
||||
title: 'クエリ変数',
|
||||
},
|
||||
viewMonitoring: 'モニタリングを表示',
|
||||
refreshData: 'データを更新',
|
||||
exportData: 'データをエクスポート',
|
||||
},
|
||||
};
|
||||
|
||||
export default jaJP;
|
||||
|
||||
@@ -265,6 +265,10 @@ const zhHans = {
|
||||
allLevels: '全部级别',
|
||||
selectLevel: '选择级别',
|
||||
levelsSelected: '个级别已选',
|
||||
viewDetailedLogs: '查看详细日志',
|
||||
viewDetails: '详情',
|
||||
collapse: '收起',
|
||||
imagesAttached: '张图片',
|
||||
},
|
||||
plugins: {
|
||||
title: '插件扩展',
|
||||
@@ -729,7 +733,7 @@ const zhHans = {
|
||||
},
|
||||
llm: {
|
||||
llmModels: '对话模型',
|
||||
description: '管理 LLM 模型，用于对话消息生成',
|
||||
description: '管理 LLM 模型,用于对话消息生成',
|
||||
extraParametersDescription:
|
||||
'将在请求时附加到请求体中，如 max_tokens, temperature, top_p 等',
|
||||
},
|
||||
@@ -763,6 +767,140 @@ const zhHans = {
|
||||
setPasswordHint: '设置密码后可使用邮箱密码登录',
|
||||
spaceEmailMismatch: 'Space登录账号邮箱与本实例账号邮箱不匹配',
|
||||
},
|
||||
monitoring: {
|
||||
title: '日志监控',
|
||||
description: '查看机器人活动、LLM调用和系统性能',
|
||||
overview: '概览',
|
||||
totalMessages: '总消息数',
|
||||
llmCallsCount: 'LLM调用',
|
||||
modelCallsCount: '模型调用',
|
||||
successRate: '成功率',
|
||||
activeSessions: '活跃会话',
|
||||
last24Hours: '最近24小时',
|
||||
filters: {
|
||||
title: '筛选',
|
||||
bot: '机器人',
|
||||
pipeline: '流水线',
|
||||
allBots: '全部机器人',
|
||||
selectBot: '选择机器人',
|
||||
allPipelines: '全部流水线',
|
||||
selectPipeline: '选择流水线',
|
||||
loading: '加载中...',
|
||||
timeRange: '时间范围',
|
||||
customRange: '自定义范围',
|
||||
from: '从',
|
||||
to: '到',
|
||||
apply: '应用',
|
||||
reset: '重置筛选',
|
||||
lastHour: '最近1小时',
|
||||
last6Hours: '最近6小时',
|
||||
last24Hours: '最近24小时',
|
||||
last7Days: '最近7天',
|
||||
last30Days: '最近30天',
|
||||
},
|
||||
tabs: {
|
||||
messages: '消息记录',
|
||||
llmCalls: 'LLM调用',
|
||||
embeddingCalls: 'Embedding调用',
|
||||
modelCalls: '模型调用',
|
||||
sessions: '会话分析',
|
||||
errors: '错误日志',
|
||||
},
|
||||
messageList: {
|
||||
timestamp: '时间戳',
|
||||
bot: '机器人',
|
||||
pipeline: '流水线',
|
||||
message: '消息',
|
||||
sessionId: '会话ID',
|
||||
status: '状态',
|
||||
actions: '操作',
|
||||
viewDetails: '查看详情',
|
||||
copyId: '复制ID',
|
||||
noMessages: '未找到消息',
|
||||
noMessagesDescription: '尝试调整筛选条件或稍后查看',
|
||||
loading: '加载消息中...',
|
||||
loadMore: '加载更多',
|
||||
autoRefresh: '自动刷新',
|
||||
platform: '角色',
|
||||
user: '用户',
|
||||
level: '级别',
|
||||
runner: '执行器',
|
||||
viewConversation: '显示对话详情',
|
||||
},
|
||||
llmCalls: {
|
||||
title: 'LLM调用',
|
||||
model: '模型',
|
||||
tokens: 'Token数',
|
||||
duration: '持续时间',
|
||||
cost: '成本',
|
||||
noData: '未找到LLM调用记录',
|
||||
inputTokens: '输入Token',
|
||||
outputTokens: '输出Token',
|
||||
totalTokens: '总Token数',
|
||||
avgDuration: '平均耗时',
|
||||
calls: '调用次数',
|
||||
},
|
||||
embeddingCalls: {
|
||||
title: 'Embedding调用',
|
||||
model: '模型',
|
||||
tokens: 'Token数',
|
||||
duration: '持续时间',
|
||||
noData: '未找到Embedding调用记录',
|
||||
promptTokens: '输入Token',
|
||||
totalTokens: '总Token数',
|
||||
inputCount: '输入数量',
|
||||
knowledgeBase: '知识库',
|
||||
queryText: '查询文本',
|
||||
},
|
||||
modelCalls: {
|
||||
title: '模型调用',
|
||||
llmModel: '对话模型',
|
||||
embeddingModel: '嵌入模型',
|
||||
embeddingCall: '嵌入调用',
|
||||
retrieveCall: '检索调用',
|
||||
noData: '未找到模型调用记录',
|
||||
},
|
||||
sessions: {
|
||||
sessionId: '会话ID',
|
||||
messageCount: '消息数',
|
||||
duration: '持续时间',
|
||||
lastActivity: '最后活动',
|
||||
noSessions: '未找到会话',
|
||||
startTime: '开始时间',
|
||||
messageStats: '消息统计',
|
||||
totalMessages: '总消息数',
|
||||
successMessages: '成功',
|
||||
errorMessages: '失败',
|
||||
llmStats: 'LLM统计',
|
||||
noData: '会话未找到',
|
||||
},
|
||||
errors: {
|
||||
title: '错误',
|
||||
errorType: '错误类型',
|
||||
errorMessage: '错误消息',
|
||||
occurredAt: '发生时间',
|
||||
noErrors: '未找到错误',
|
||||
stackTrace: '堆栈追踪',
|
||||
},
|
||||
queries: {
|
||||
title: '查询记录',
|
||||
},
|
||||
messageDetails: {
|
||||
noData: '此查询没有LLM调用或错误记录',
|
||||
},
|
||||
queryVariables: {
|
||||
title: '查询变量',
|
||||
},
|
||||
trafficChart: {
|
||||
title: '流量概览',
|
||||
messages: '消息数',
|
||||
llmCalls: 'LLM调用',
|
||||
noData: '暂无流量数据',
|
||||
},
|
||||
viewMonitoring: '查看日志监控',
|
||||
refreshData: '刷新数据',
|
||||
exportData: '导出数据',
|
||||
},
|
||||
};
|
||||
|
||||
export default zhHans;
|
||||
|
||||
@@ -760,6 +760,122 @@ const zhHant = {
|
||||
setPasswordHint: '設定密碼後可使用電子郵件密碼登入',
|
||||
spaceEmailMismatch: 'Space登入帳號電子郵件與本實例帳號電子郵件不匹配',
|
||||
},
|
||||
monitoring: {
|
||||
title: '日誌監控',
|
||||
description: '監控機器人活動、LLM調用和系統效能',
|
||||
overview: '概覽',
|
||||
totalMessages: '總訊息數',
|
||||
llmCallsCount: 'LLM調用',
|
||||
modelCallsCount: '模型調用',
|
||||
successRate: '成功率',
|
||||
activeSessions: '活躍會話',
|
||||
last24Hours: '最近24小時',
|
||||
filters: {
|
||||
title: '篩選',
|
||||
bot: '機器人',
|
||||
pipeline: '流水線',
|
||||
allBots: '全部機器人',
|
||||
selectBot: '選擇機器人',
|
||||
allPipelines: '全部流水線',
|
||||
selectPipeline: '選擇流水線',
|
||||
loading: '載入中...',
|
||||
timeRange: '時間範圍',
|
||||
customRange: '自訂範圍',
|
||||
from: '從',
|
||||
to: '到',
|
||||
apply: '套用',
|
||||
reset: '重置篩選',
|
||||
lastHour: '最近1小時',
|
||||
last6Hours: '最近6小時',
|
||||
last24Hours: '最近24小時',
|
||||
last7Days: '最近7天',
|
||||
last30Days: '最近30天',
|
||||
},
|
||||
tabs: {
|
||||
messages: '訊息記錄',
|
||||
llmCalls: 'LLM調用',
|
||||
embeddingCalls: 'Embedding調用',
|
||||
modelCalls: '模型調用',
|
||||
sessions: '會話分析',
|
||||
errors: '錯誤日誌',
|
||||
},
|
||||
messageList: {
|
||||
timestamp: '時間戳記',
|
||||
bot: '機器人',
|
||||
pipeline: '流水線',
|
||||
message: '訊息',
|
||||
sessionId: '會話ID',
|
||||
status: '狀態',
|
||||
actions: '操作',
|
||||
viewDetails: '查看詳情',
|
||||
copyId: '複製ID',
|
||||
noMessages: '未找到訊息',
|
||||
noMessagesDescription: '嘗試調整篩選條件或稍後查看',
|
||||
loading: '載入訊息中...',
|
||||
loadMore: '載入更多',
|
||||
autoRefresh: '自動重新整理',
|
||||
platform: '平台',
|
||||
user: '使用者',
|
||||
level: '級別',
|
||||
runner: '執行器',
|
||||
viewConversation: '顯示對話詳情',
|
||||
},
|
||||
llmCalls: {
|
||||
model: '模型',
|
||||
tokens: '代幣數',
|
||||
duration: '持續時間',
|
||||
cost: '成本',
|
||||
noData: '未找到LLM調用記錄',
|
||||
inputTokens: '輸入代幣',
|
||||
outputTokens: '輸出代幣',
|
||||
totalTokens: '總代幣數',
|
||||
},
|
||||
embeddingCalls: {
|
||||
title: 'Embedding調用',
|
||||
model: '模型',
|
||||
tokens: '代幣數',
|
||||
duration: '持續時間',
|
||||
noData: '未找到Embedding調用記錄',
|
||||
promptTokens: '輸入代幣',
|
||||
totalTokens: '總代幣數',
|
||||
inputCount: '輸入數量',
|
||||
knowledgeBase: '知識庫',
|
||||
queryText: '查詢文字',
|
||||
},
|
||||
modelCalls: {
|
||||
title: '模型調用',
|
||||
llmModel: '對話模型',
|
||||
embeddingModel: '嵌入模型',
|
||||
embeddingCall: '嵌入調用',
|
||||
retrieveCall: '檢索調用',
|
||||
noData: '未找到模型調用記錄',
|
||||
},
|
||||
sessions: {
|
||||
sessionId: '會話ID',
|
||||
messageCount: '訊息數',
|
||||
duration: '持續時間',
|
||||
lastActivity: '最後活動',
|
||||
noSessions: '未找到會話',
|
||||
startTime: '開始時間',
|
||||
},
|
||||
errors: {
|
||||
errorType: '錯誤類型',
|
||||
errorMessage: '錯誤訊息',
|
||||
occurredAt: '發生時間',
|
||||
noErrors: '未找到錯誤',
|
||||
stackTrace: '堆疊追蹤',
|
||||
title: '錯誤',
|
||||
},
|
||||
messageDetails: {
|
||||
noData: '此查詢沒有LLM調用或錯誤記錄',
|
||||
},
|
||||
queryVariables: {
|
||||
title: '查詢變數',
|
||||
},
|
||||
viewMonitoring: '查看日誌監控',
|
||||
refreshData: '重新整理資料',
|
||||
exportData: '匯出資料',
|
||||
},
|
||||
};
|
||||
|
||||
export default zhHant;
|
||||
|
||||
Reference in New Issue
Block a user