@nethru/kit 1.1.18 → 1.1.19

package/dist/components/chat/content/ToolContent.js

@@ -1,13 +1,15 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Box, Stack } from '@mui/material';
 import { useToolContext } from "../contexts/ToolContext";
 import ColumnChartContent from "./wisecollector/ColumnChartContent";
 import StackedAreaChartContent from "./wisecollector/StackedAreaChartContent";
 import PieChartContent from "./wisecollector/PieChartContent";
 import PeriodCompareChartContent from "./wisecollector/PeriodCompareChartContent";
+import StackedAreaTrendChartWithSelectContent from "./wisecollector/StackedAreaTrendChartWithSelectContent";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const summaryToolNames = ['query-summary-by-container-id', 'query-summary-by-task-id'];
 const trendToolNames = ['query-trend-by-container-id', 'query-trend-by-task-id'];
+const trendDetailToolNames = ['query-trend-detail-by-task-id'];
 export default function ToolContent() {
   const {
     kinds,
@@ -18,24 +20,49 @@ export default function ToolContent() {
   const summaryTools = useMemo(() => tools.filter(t => summaryToolNames.includes(t.name)), [tools]);
   const {
     periodTrendTools,
-    trendTools
-  } = useMemo(() => groupTools(hasCompare, tools), [tools]);
+    trendTools,
+    trendDetailTools
+  } = useMemo(() => groupBy(hasCompare, tools), [tools, hasCompare]);
   const toolCount = useMemo(() => summaryTools.length + periodTrendTools.length + trendTools.length + jsonTools.length, [summaryTools, periodTrendTools, trendTools, jsonTools]);
+  const taskType = useMemo(() => {
+    return tools.find(t => t.name === "search-task-by-keyword")?.result?.result[0]?.taskType;
+  }, [tools]);
+  const getSeriesKeyByTrend = useCallback(tools => {
+    return tools?.some(t => t.name === 'query-trend-by-container-id') ? 'containerId' : 'taskId';
+  }, []);
+  const getSeriesKeyBySummary = useCallback(tool => {
+    return tool.name === 'query-summary-by-container-id' ? 'containerId' : 'taskId';
+  }, []);
   return /*#__PURE__*/_jsxs(Stack, {
     gap: 5,
     marginBottom: toolCount > 0 ? 5 : 0,
     children: [hasCompare && summaryTools.length >= 2 ? /*#__PURE__*/_jsx(ColumnChartContent, {
-      tools: summaryTools
+      tools: summaryTools,
+      seriesKeyFunc: getSeriesKeyBySummary
     }) : summaryTools.map((tool, index) => /*#__PURE__*/_jsx(PieChartContent, {
-      tool: tool
+      tool: tool,
+      seriesKeyFunc: getSeriesKeyBySummary
     }, index)), periodTrendTools.map((tools, index) => /*#__PURE__*/_jsx(PeriodCompareChartContent, {
-      tools: tools
+      tools: tools,
+      seriesKey: getSeriesKeyByTrend(tools)
     }, index)), trendTools.map((tools, index1) => {
       if (hasCompare && tools.length >= 2) return /*#__PURE__*/_jsx(StackedAreaChartContent, {
-        tools: tools
+        tools: tools,
+        seriesKey: getSeriesKeyByTrend(tools)
       }, index1);else {
         return tools.map((tool, index2) => /*#__PURE__*/_jsx(StackedAreaChartContent, {
-          tools: [tool]
+          tools: [tool],
+          seriesKey: getSeriesKeyByTrend([tool])
+        }, index2));
+      }
+    }), trendDetailTools.map((tools, index) => {
+      if (hasCompare && tools.length >= 2) return /*#__PURE__*/_jsx(StackedAreaTrendChartWithSelectContent, {
+        tools: tools,
+        selectKey: taskType
+      }, index);else {
+        return tools.map((tool, index2) => /*#__PURE__*/_jsx(StackedAreaTrendChartWithSelectContent, {
+          tools: [tool],
+          selectKey: taskType
         }, index2));
       }
     }), jsonTools.map((tool, index) => /*#__PURE__*/_jsxs(Box, {
@@ -54,15 +81,32 @@ export default function ToolContent() {
     }, index))]
   });
 }
+function groupBy(hasCompare, tools) {
+  const trendTools = tools.filter(t => trendToolNames.includes(t.name));
+  const trendDetailTools = tools.filter(t => trendDetailToolNames.includes(t.name));
+  if (trendTools.length > 0 || trendDetailTools.length > 0) {
+    const groupedTrend = groupTools(hasCompare, trendTools);
+    const groupedTrendDetail = groupTools(hasCompare, trendDetailTools);
+    return {
+      periodTrendTools: groupedTrend.periodTrendTools,
+      trendTools: groupedTrend.tools,
+      trendDetailTools: groupedTrendDetail.tools
+    };
+  }
+  return {
+    periodTrendTools: [],
+    trendTools: [],
+    trendDetailTools: []
+  };
+}
 function groupTools(hasCompare, tools) {
   const periodKey = t => `${t.arguments.from}~${t.arguments.to}`;
   const idMap = new Map();
   const periodMap = new Map();
   const used = new Set();
-  const filtered = tools.filter(t => trendToolNames.includes(t.name));
   const periodTrendTools = [];
-  if (hasCompare) {
-    for (const tool of filtered) {
+  if (hasCompare && tools.every(t => !trendDetailToolNames.includes(t.name))) {
+    for (const tool of tools) {
       const id = tool.arguments.containerId ?? tool.arguments.taskId;
       if (!idMap.has(id)) idMap.set(id, []);
       idMap.get(id).push(tool);
@@ -78,7 +122,7 @@ function groupTools(hasCompare, tools) {
       }
     }
   }
-  for (const tool of filtered) {
+  for (const tool of tools) {
     if (used.has(tool)) continue;
     const key = periodKey(tool);
     if (!periodMap.has(key)) periodMap.set(key, []);
@@ -86,7 +130,7 @@ function groupTools(hasCompare, tools) {
   }
   return {
     periodTrendTools,
-    trendTools: Array.from(periodMap.values())
+    tools: Array.from(periodMap.values())
   };
 }
 const styles = {

package/dist/components/chat/content/wisecollector/ColumnChartContent.js

@@ -4,7 +4,8 @@ import { formatDateRange } from "../../../../js/dateHelper";
 import ColumnChart from "../../../charts/ColumnChart";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const ColumnChartContent = ({
-  tools = []
+  tools = [],
+  seriesKeyFunc
 }) => {
   const {
     getName
@@ -17,12 +18,12 @@ const ColumnChartContent = ({
         marginBottom: '30px'
       },
       children: /*#__PURE__*/_jsx(ColumnChart, {
-        data: toData(tools, getName)
+        data: toData(tools, seriesKeyFunc, getName)
       })
     })
   });
 };
-function toData(tools, getName) {
+function toData(tools, seriesKeyFunc, getName) {
   const items = [];
   const hasConvert = tools.some(tool => {
     const result = tool?.result?.result;
@@ -30,13 +31,12 @@ function toData(tools, getName) {
   });
   tools.sort((a, b) => a.arguments.from.localeCompare(b.arguments.from)).forEach(tool => {
     const {
-      containerId,
-      taskId,
       from,
       to
     } = tool.arguments;
+    const seriesKey = seriesKeyFunc(tool);
     const item = {
-      name: `<b>${getName(containerId, taskId)}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
+      name: `<b>${getName(tool.arguments[seriesKey])}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
       data: []
     };
     const result = Array.isArray(tool.result.result) ? reduce(tool.result.result) : tool.result.result;

package/dist/components/chat/content/wisecollector/PeriodCompareChartContent.js

@@ -7,12 +7,14 @@ import { formatDuration } from "../../../charts/Number";
 import { formatMinutes } from "../../../charts/Time";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function PeriodCompareChartContent({
-  tools
+  tools,
+  seriesKey
 }) {
   const chartData = useMemo(() => toChartData(tools), [tools]);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(Title, {
-      tools: tools
+      tools: tools,
+      seriesKey: seriesKey
     }), /*#__PURE__*/_jsx(PeriodCompareChart, {
       ...chartData,
       height: 220
@@ -20,18 +22,15 @@ export default function PeriodCompareChartContent({
   });
 }
 function Title({
-  tools
+  tools,
+  seriesKey
 }) {
   const {
     getName
   } = useToolContext();
-  const {
-    containerId,
-    taskId
-  } = tools[0].arguments;
   return /*#__PURE__*/_jsx("div", {
     style: styles.title,
-    children: getName(containerId, taskId)
+    children: getName(tools[0].arguments[seriesKey])
   });
 }
 function toChartData(tools) {

package/dist/components/chat/content/wisecollector/PieChartContent.js

@@ -4,14 +4,16 @@ import { useToolContext } from "../../contexts/ToolContext";
 import { formatDateRange } from "../../../../js/dateHelper";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PieChartContent = ({
-  tool
+  tool,
+  seriesKeyFunc
 }) => {
   const width = useMemo(() => {
     return tool?.result?.result?.length < 3 ? 300 : undefined;
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(Title, {
-      tool: tool
+      tool: tool,
+      seriesKeyFunc: seriesKeyFunc
     }), /*#__PURE__*/_jsx("div", {
       style: styles.container,
       children: toData(tool).map((item, index) => /*#__PURE__*/_jsx(PieChart, {
@@ -22,21 +24,21 @@ const PieChartContent = ({
   });
 };
 const Title = ({
-  tool
+  tool,
+  seriesKeyFunc
 }) => {
   const {
     getName
   } = useToolContext();
   const {
-    containerId,
-    taskId,
     from,
     to
   } = tool.arguments;
+  const seriesKey = seriesKeyFunc(tool);
   return /*#__PURE__*/_jsxs("div", {
     style: styles.title,
     children: [/*#__PURE__*/_jsx("div", {
-      children: getName(containerId, taskId)
+      children: getName(tool.arguments[seriesKey])
     }), /*#__PURE__*/_jsxs("div", {
       style: styles.subtitle,
       children: ["(", formatDateRange(from, to), ")"]

package/dist/components/chat/content/wisecollector/StackedAreaChartContent.js

@@ -4,35 +4,47 @@ import { isOneDay, isToday } from "../../../../js/dateHelper";
 import StackedAreaTrendChart from "../../../charts/StackedAreaTrendChart";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function StackedAreaChartContent({
-  tools
+  tools,
+  seriesKey,
+  type = 'output',
+  ...props
 }) {
   const {
     getName
   } = useToolContext();
   return /*#__PURE__*/_jsx("div", {
     children: /*#__PURE__*/_jsx(StackedAreaTrendChart, {
-      metrics: toMetrics(tools, getName),
-      records: fillRecords(tools, toRecords(tools)),
+      metrics: toMetrics(tools, seriesKey, getName),
+      records: fillRecords(tools, toRecords(type, seriesKey, tools)),
       isDaily: isDaily(tools),
       xPlotIndex: xPlotIndex(tools),
       xAxisTickInterval: 4,
-      height: 200
+      height: 200,
+      ...props
     })
   });
 }
-function toMetrics(tools, getName) {
-  return tools.map(tool => ({
-    id: tool.arguments.taskId,
-    name: getName(tool.arguments.containerId, tool.arguments.taskId),
-    type: 'NUMBER'
-  }));
+function toMetrics(tools, seriesKey, getName) {
+  const formatId = tool => `${tool.arguments.agentId} - ${tool.arguments.taskId}`;
+  const formatName = tool => `${getName(tool.arguments.agentId)} - ${getName(tool.arguments.taskId)}`;
+  if (isAgentId(seriesKey)) {
+    return tools.map(tool => ({
+      id: formatId(tool),
+      name: formatName(tool),
+      type: 'NUMBER'
+    }));
+  } else {
+    return tools.map(tool => ({
+      id: tool.arguments[seriesKey],
+      name: getName(tool.arguments[seriesKey]),
+      type: 'NUMBER'
+    }));
+  }
 }
-function toRecords(tools) {
+function toRecords(type, seriesKey, tools) {
   const recordMap = new Map();
   tools.forEach(tool => {
-    const {
-      taskId
-    } = tool.arguments;
+    const id = isAgentId(seriesKey) ? `${tool.arguments.agentId} - ${tool.arguments.taskId}` : tool.arguments[seriesKey];
     const results = tool?.result?.result || [];
     results.forEach(result => {
       const {
@@ -42,7 +54,7 @@ function toRecords(tools) {
         time: time,
         metric: {}
       });
-      recordMap.get(time).metric[taskId] = result.metric.output;
+      recordMap.get(time).metric[id] = result.metric[type];
     });
   });
   return Array.from(recordMap.values()).sort((a, b) => a.time - b.time);
@@ -78,6 +90,9 @@ function fillRecords(tools, records) {
   }
   return result;
 }
+function isAgentId(seriesKey) {
+  return seriesKey === 'agentId';
+}
 function isDaily(tools) {
   const {
     from,

package/dist/components/chat/content/wisecollector/StackedAreaTrendChartWithSelectContent.js

@@ -0,0 +1,75 @@
+import React, { useMemo, useState } from "react";
+import { MenuItem, Select } from "@nethru/ui";
+import * as ChartColors from "../../../charts/ChartColors";
+import StackedAreaChartContent from "./StackedAreaChartContent";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const metrics = {
+  collect: 'output',
+  convert: [{
+    label: '처리',
+    key: 'output'
+  }, {
+    label: '필터됨',
+    key: 'filter'
+  }, {
+    label: '에러',
+    key: 'error'
+  }],
+  transport: [{
+    label: '처리',
+    key: 'output'
+  }, {
+    label: '에러',
+    key: 'error'
+  }]
+};
+export default function StackedAreaTrendChartWithSelectContent({
+  tools,
+  selectKey,
+  ...props
+}) {
+  const [metric, setMetric] = useState('output');
+  const colors = useMemo(() => {
+    return tools.map((_, index) => ChartColors.colors[(index + 1) % ChartColors.colors.length]);
+  }, [tools]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [selectKey !== undefined && Array.isArray(metrics[selectKey]) && /*#__PURE__*/_jsx(MetricSelect, {
+      value: metric,
+      onChange: e => setMetric(e.target.value),
+      type: selectKey
+    }), /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(StackedAreaChartContent, {
+        seriesKey: "agentId",
+        type: metric,
+        tools: tools,
+        tooltipOutSide: selectKey !== 'collect',
+        yAxisLabelEnabled: false,
+        colors: colors,
+        legendAlign: "right",
+        height: 220,
+        ...props
+      })
+    })]
+  });
+}
+function MetricSelect({
+  value,
+  onChange,
+  type
+}) {
+  return /*#__PURE__*/_jsx(Select, {
+    value: value,
+    onChange: onChange,
+    sx: {
+      position: 'absolute',
+      top: '34px',
+      left: '6px',
+      zIndex: 1,
+      width: '92px'
+    },
+    children: metrics[type].map(metric => /*#__PURE__*/_jsx(MenuItem, {
+      value: metric.key,
+      children: metric.label
+    }, metric.key))
+  });
+}

package/dist/components/chat/contexts/ToolContext.js

@@ -9,8 +9,9 @@ export function ToolContextProvider({
   const tools = useMemo(() => message.content.filter(c => c.type === 'tool'), [message]);
   const containerConfigMap = useMemo(() => makeContainerConfigs(tools), [tools]);
   const taskConfigMap = useMemo(() => makeTaskConfigs(tools), [tools]);
-  const getName = useCallback((containerId, taskId) => {
-    return containerConfigMap.get(containerId) || taskConfigMap.get(taskId);
+  const agentConfigMap = useMemo(() => makeAgentConfigs(tools), [tools]);
+  const getName = useCallback(id => {
+    return containerConfigMap.get(id) || taskConfigMap.get(id) || agentConfigMap.get(id);
   }, [containerConfigMap, taskConfigMap]);
   return /*#__PURE__*/_jsx(ToolContext.Provider, {
     value: {
@@ -43,4 +44,13 @@ function makeTaskConfigs(tools) {
     });
   });
   return map;
+}
+function makeAgentConfigs(tools) {
+  const map = new Map();
+  tools.filter(t => t.name === 'search-agent-by-keyword').forEach(tool => {
+    tool.result?.result?.forEach(item => {
+      map.set(item.agentId, item.agentName);
+    });
+  });
+  return map;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/kit",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "description": "A React component library by Nethru",
   "main": "dist/index.js",
   "homepage": ".",