- | {data.created_at} |
+ {data.created_at.slice(0, 19).replace('T', ' ')} |
{data.agent_name} |
{data.agent_execution_name} |
diff --git a/gui/pages/Content/Toolkits/Metrics.js b/gui/pages/Content/Toolkits/Metrics.js
new file mode 100644
index 000000000..2887d5d10
--- /dev/null
+++ b/gui/pages/Content/Toolkits/Metrics.js
@@ -0,0 +1,145 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {ToastContainer, toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import {
+ getApiKeys, getToolMetrics, getToolLogs, getKnowledgeMetrics, getKnowledgeLogs
+} from "@/pages/api/DashboardService";
+import {
+ loadingTextEffect,
+} from "@/utils/utils";
+
+export default function Metrics({toolName, knowledgeName}) {
+ const [apiKeys, setApiKeys] = useState([]);
+ const [totalTokens, setTotalTokens] = useState(0)
+ const [totalAgentsUsing, setTotalAgentsUsing] = useState(0)
+ const [totalCalls, setTotalCalls] = useState(0)
+ const [callLogs, setCallLogs] = useState([])
+ const [isLoading, setIsLoading] = useState(true)
+ const [loadingText, setLoadingText] = useState("Loading Metrics");
+ const metricsData = [
+ { label: 'Total Calls', value: totalCalls },
+ { label: 'Total Agents Using', value: totalAgentsUsing }
+ ];
+
+ useEffect(() => {
+ loadingTextEffect('Loading Metrics', setLoadingText, 500);
+ }, []);
+
+ useEffect(() => {
+ if(toolName && !knowledgeName){
+ fetchToolMetrics()
+ fetchToolLogs()
+ return;
+ }
+ if(!toolName && knowledgeName){
+ fetchKnowledgeMetrics()
+ fetchKnowledgeLogs()
+ return;
+ }
+ }, [toolName, knowledgeName]);
+
+ const fetchToolMetrics = () => {
+ getToolMetrics(toolName)
+ .then((response) => {
+ setTotalAgentsUsing(response.data.tool_unique_agents ? response.data.tool_unique_agents : 0)
+ setTotalCalls(response.data.tool_calls ? response.data.tool_calls : 0)
+ setIsLoading(false)
+ })
+ .catch((error) => {
+ console.error('Error fetching Metrics', error);
+ });
+ }
+
+ const fetchToolLogs = () => {
+ getToolLogs(toolName)
+ .then((response) => {
+ setCallLogs(response.data ? response.data : [])
+ setIsLoading(false)
+ })
+ .catch((error) => {
+ console.error('Error fetching Metrics', error);
+ });
+ }
+
+ const fetchKnowledgeMetrics = () => {
+ getKnowledgeMetrics(knowledgeName)
+ .then((response) => {
+ setTotalAgentsUsing(response.data.knowledge_unique_agents ? response.data.knowledge_unique_agents : 0)
+ setTotalCalls(response.data.knowledge_calls ? response.data.knowledge_calls : 0)
+ setIsLoading(false)
+ })
+ .catch((error) => {
+ console.error('Error fetching Metrics', error);
+ });
+ }
+
+ const fetchKnowledgeLogs = () => {
+ getKnowledgeLogs(knowledgeName)
+ .then((response) => {
+ setCallLogs(response.data ? response.data : [])
+ setIsLoading(false)
+ })
+ .catch((error) => {
+ console.error('Error fetching Metrics', error);
+ });
+ }
+
+ return (<>
+
+
+ {!isLoading ?
+
+
+ {metricsData.map((metric, index) => (
+
+ {metric.label}
+
+ {metric.value}
+
+
+ ))}
+
+
+ Call Logs
+ {callLogs.length > 0 ?
+
+
+
+ | Log Timestamp |
+ Agent Name |
+ Run Name |
+ Model |
+ Tokens Used |
+
+
+
+
+
+
+ {callLogs.map((item, index) => (
+
+ | {item.created_at} |
+ {item.agent_name} |
+ {item.agent_execution_name} |
+ {item.model} |
+ {item.tokens_consumed} |
+
+ ))}
+
+
+
+ :
+
+ 
+ No logs to show!
+ }
+
+
+ : }
+
+
-
-
+
@@ -133,7 +149,12 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
-
+
+
+ setLocalStorageValue('toolkit_tab_' + String(internalId), 'metrics', setActiveTab)}>
+ Metrics
+ setLocalStorageValue('toolkit_tab_' + String(internalId), 'configuration', setActiveTab)}>
Configuration
@@ -142,7 +163,28 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'tools_included', setActiveTab)}>
Tools Included
+
+ {!loading && activeTab === 'metrics' &&
+
+ setToolDropdown(!toolDropdown)}>
+ {currTool}
+
+
+ {toolDropdown &&
+ {toolsIncluded.map((tool, index) => (
+ {setCurrTool(tool.name); setToolDropdown(false)}}>
+ {tool.name}
+ ))}
+ }
+
+
+ }
+
+
+
{!loading && activeTab === 'configuration' &&
{apiConfigs.length > 0 ? (apiConfigs.map((config, index) => (
@@ -176,9 +218,14 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
))}
}
+
+
+
+ {activeTab === 'metrics' &&
+
+ }
-
+
{toolkits.map((tool, index) =>
tool.name !== null && !excludedToolkits().includes(tool.name) && (
sendToolkitData(tool)}>
diff --git a/gui/pages/Dashboard/Settings/Settings.js b/gui/pages/Dashboard/Settings/Settings.js
index 7d1263383..66570367e 100644
--- a/gui/pages/Dashboard/Settings/Settings.js
+++ b/gui/pages/Dashboard/Settings/Settings.js
@@ -5,6 +5,7 @@ import Image from "next/image";
import Model from "@/pages/Dashboard/Settings/Model";
import Database from "@/pages/Dashboard/Settings/Database";
import ApiKeys from "@/pages/Dashboard/Settings/ApiKeys";
+import Webhooks from "@/pages/Dashboard/Settings/Webhooks";
export default function Settings({organisationId, sendDatabaseData}) {
const [activeTab, setActiveTab] = useState('model');
@@ -38,12 +39,17 @@ export default function Settings({organisationId, sendDatabaseData}) {
API Keys
+
{activeTab === 'model' && }
{activeTab === 'database' && }
{activeTab === 'apikeys' && }
+ {activeTab === 'webhooks' && }
+
+
+ {!isLoading ?
+
+ Webhooks
+ {existingWebhook &&
+ }
+
+
+
+
+
+
+
+
+ {checkboxes.map((checkbox) => (
+
+ ))}
+
+
+
+ {!existingWebhook &&
+
+
+ }
+
+ : }
+
+
+ |
+