Merge branch 'dev' into fix/key-auth

DockerfileCelery

@@ -12,4 +12,14 @@ WORKDIR /app
 COPY . .
 COPY config.yaml .
 
+# Downloads the tools
+RUN python superagi/tool_manager.py
+
+# Set executable permissions for install_tool_dependencies.sh
+RUN chmod +x install_tool_dependencies.sh
+
+# Install dependencies
+RUN ./install_tool_dependencies.sh
+
+
 CMD ["celery", "-A", "superagi.worker", "worker", "--beat","--loglevel=info"]

gui/pages/Content/APM/Apm.module.css

@@ -5,6 +5,6 @@
 
 .apm_dashboard {
     margin-top: 16px;
-    height: calc(100vh - 14vh);
+    height: calc(100vh - 16vh);
     overflow-y: auto;
 }

gui/pages/Content/APM/BarGraph.js

@@ -1,74 +1,73 @@
-import React, { useEffect, useRef } from "react";
+import React, {useEffect, useRef} from "react";
 import * as echarts from 'echarts';
-import {formatNumber} from "@/utils/utils";
 
-export const BarGraph = ({ data, type, color }) => {
-    const chartRef = useRef(null);
-    const containerRef = useRef(null);
+export const BarGraph = ({data, type, color}) => {
+  const chartRef = useRef(null);
+  const containerRef = useRef(null);
 
-    useEffect(() => {
-        const chartInstance = echarts.getInstanceByDom(chartRef.current);
-        const chart = chartInstance ? chartInstance : echarts.init(chartRef.current);
+  useEffect(() => {
+    const chartInstance = echarts.getInstanceByDom(chartRef.current);
+    const chart = chartInstance ? chartInstance : echarts.init(chartRef.current);
 
-        const option = {
-            color: color,
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
-            },
-            xAxis: {
-                type: 'category',
-                data: data.map(item => item.name),
-                axisLabel: {
-                    interval: 0,
-                    rotate: 45,
-                    color: '#888'
-                }
-            },
-            yAxis: {
-                type: 'value',
-                axisLabel: {
-                    formatter: function(value) {
-                        if (value >= 1000) {
-                            return `${value / 1000}k`;
-                        } else {
-                            return value;
-                        }
-                    }
-                },
-                splitLine: {
-                    lineStyle: {
-                        color: 'rgba(255, 255, 255, 0.08)'
-                    }
-                }
-            },
-            series: [{
-                data: data.map(item => type === 'tokens_per_call' ? (item.tokens_consumed/item.calls) : item[type]),
-                type: 'bar'
-            }],
-            responsive: true
-        };
+    const option = {
+      color: color,
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: data.map(item => item.name),
+        axisLabel: {
+          interval: 0,
+          rotate: 45,
+          color: '#888'
+        }
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          formatter: function (value) {
+            if (value >= 1000) {
+              return `${value / 1000}k`;
+            } else {
+              return value;
+            }
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255, 255, 255, 0.08)'
+          }
+        }
+      },
+      series: [{
+        data: data.map(item => type === 'tokens_per_call' ? (item.tokens_consumed / item.calls) : item[type]),
+        type: 'bar'
+      }],
+      responsive: true
+    };
 
-        chart.setOption(option);
+    chart.setOption(option);
 
-        const resizeObserver = new ResizeObserver(entries => {
-            entries.forEach(entry => {
-                chart.resize();
-            });
-        });
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        chart.resize();
+      });
+    });
 
-        resizeObserver.observe(containerRef.current);
+    resizeObserver.observe(containerRef.current);
 
-        return () => resizeObserver.disconnect();
-    }, [data, type]);
+    return () => resizeObserver.disconnect();
+  }, [data, type]);
 
-    return (
-        <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
-            <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
-        </div>
-    );
+  return (
+    <div ref={containerRef} style={{width: '100%', height: '100%'}}>
+      <div ref={chartRef} style={{width: '100%', height: '100%'}}></div>
+    </div>
+  );
 }
 
 export default BarGraph;