jettask 0.2.1__py3-none-any.whl → 0.2.4__py3-none-any.whl

jettask/webui/frontend/src/App.css

@@ -1,11 +1,109 @@
-.app-layout {
-  min-height: 100vh;
-  background: transparent;
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.main-content {
-  padding: 24px;
-  max-width: 1440px;
-  margin: 0 auto;
+html, body, #root {
+  height: 100%;
   width: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 页面容器样式 */
+.page-container {
+  padding: 24px;
+  height: 100%;
+  overflow: auto;
+  background: #f0f2f5;
+}
+
+/* 页面内容包装器 - 用于需要padding的页面 */
+.page-wrapper {
+  padding: 24px;
+  height: 100%;
+  overflow: auto;
+  background: #f0f2f5;
+}
+
+.page-header {
+  background: #fff;
+  padding: 16px 24px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #262626;
+}
+
+/* 卡片样式优化 */
+.ant-card {
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+/* 表格样式优化 */
+.ant-table {
+  font-size: 13px;
+}
+
+.ant-table-thead > tr > th {
+  background: #fafafa;
+  font-weight: 600;
+}
+
+/* 按钮样式优化 */
+.ant-btn {
+  border-radius: 4px;
+  font-weight: 400;
+}
+
+/* 滚动条统一样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #bfbfbf;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #8c8c8c;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
 }

jettask/webui/frontend/src/App.jsx

@@ -1,34 +1,63 @@
-import React from 'react'
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
-import { Layout, ConfigProvider } from 'antd'
-import Header from './components/layout/Header'
+import { ConfigProvider, theme } from 'antd'
+import zhCN from 'antd/locale/zh_CN'
+import AppLayout from './components/layout/AppLayout'
 import Dashboard from './pages/Dashboard'
 import Queues from './pages/Queues'
 import Workers from './pages/Workers'
 import QueueDetail from './pages/QueueDetail'
+import ScheduledTasks from './pages/ScheduledTasks'
+import Alerts from './pages/Alerts'
+import Settings from './pages/Settings'
 import { LoadingProvider } from './contexts/LoadingContext'
+import { NamespaceProvider } from './contexts/NamespaceContext'
 import './App.css'
 
-const { Content } = Layout
-
 function App() {
+  // 自定义主题
+  const customTheme = {
+    algorithm: theme.defaultAlgorithm,
+    token: {
+      colorPrimary: '#1890ff',
+      borderRadius: 4,
+      colorBgContainer: '#ffffff',
+    },
+    components: {
+      Layout: {
+        siderBg: '#1a1d21',
+        headerBg: '#2a2d31',
+      },
+      Menu: {
+        darkItemBg: 'transparent',
+        darkItemSelectedBg: '#1890ff',
+        darkItemHoverBg: 'rgba(24, 144, 255, 0.1)',
+      },
+    },
+  }
+
   return (
-    <ConfigProvider>
+    <ConfigProvider theme={customTheme} locale={zhCN}>
       <LoadingProvider>
-        <Router>
-          <Layout className="app-layout">
-            <Header />
-            <Content className="main-content">
-              <Routes>
-                <Route path="/" element={<Navigate to="/dashboard" replace />} />
-                <Route path="/dashboard" element={<Dashboard />} />
-                <Route path="/queues" element={<Queues />} />
-                <Route path="/queues/:queueName" element={<QueueDetail />} />
-                <Route path="/workers" element={<Workers />} />
-              </Routes>
-            </Content>
-          </Layout>
-        </Router>
+        <NamespaceProvider>
+          <Router>
+            <Routes>
+              <Route path="/" element={<AppLayout />}>
+                <Route index element={<Navigate to="/dashboard" replace />} />
+                <Route path="dashboard" element={<Dashboard />} />
+                <Route path="queues" element={<Queues />} />
+                <Route path="queue/:queueName" element={<QueueDetail />} />
+                <Route path="scheduled-tasks" element={<ScheduledTasks />} />
+                <Route path="alerts" element={<Alerts />} />
+                {/* 新增路由 */}
+                <Route path="analytics" element={<div style={{ padding: 24 }}>数据分析页面开发中...</div>} />
+                <Route path="performance" element={<div style={{ padding: 24 }}>性能监控页面开发中...</div>} />
+                <Route path="logs" element={<div style={{ padding: 24 }}>日志查询页面开发中...</div>} />
+                <Route path="api-docs" element={<div style={{ padding: 24 }}>API文档页面开发中...</div>} />
+                <Route path="settings" element={<Settings />} />
+              </Route>
+            </Routes>
+          </Router>
+        </NamespaceProvider>
       </LoadingProvider>
     </ConfigProvider>
   )

jettask/webui/frontend/src/components/NamespaceSelector.jsx

@@ -0,0 +1,166 @@
+/**
+ * 命名空间选择器组件
+ * 放置在页面顶部，用于切换不同的命名空间
+ */
+import React, { useState, useEffect } from 'react';
+import { Select, Space, Tag, Tooltip, message, Button, Dropdown, Modal } from 'antd';
+import { DatabaseOutlined, CloudServerOutlined, SettingOutlined, PlusOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { useNamespace } from '../contexts/NamespaceContext';
+
+const { Option } = Select;
+
+const NamespaceSelector = ({ value, onChange, style }) => {
+  const [namespaces, setNamespaces] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const { refreshTrigger } = useNamespace();  // 获取刷新触发器
+
+  // 获取命名空间列表
+  const fetchNamespaces = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch('/api/data/namespaces');
+      if (response.ok) {
+        const data = await response.json();
+        setNamespaces(data);
+        
+        // 如果没有选中的命名空间，默认选中第一个
+        if (!value && data.length > 0) {
+          const firstNamespace = data[0].name;
+          if (onChange) {
+            onChange(firstNamespace);
+          }
+        } else if (data.length === 0) {
+          // 如果没有任何命名空间，弹出提示并引导到管理页面
+          showNoNamespaceModal();
+        }
+      } else {
+        message.error('获取命名空间列表失败');
+      }
+    } catch (error) {
+      console.error('获取命名空间失败:', error);
+      message.error('连接任务中心失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 组件挂载时获取命名空间列表，以及当refreshTrigger变化时刷新
+  useEffect(() => {
+    fetchNamespaces();
+  }, [refreshTrigger]);  // 监听刷新触发器而不是value
+
+  // 处理命名空间切换
+  const handleNamespaceChange = (namespaceName) => {
+    console.log('🔧 NamespaceSelector切换命名空间:', namespaceName);
+    console.log('🔧 当前props.value:', value);
+    console.log('🔧 onChange函数存在:', !!onChange);
+    
+    if (onChange) {
+      onChange(namespaceName);
+      console.log('🔧 已调用onChange函数');
+    }
+    message.success(`已切换到命名空间: ${namespaceName}`);
+  };
+
+  // 显示无命名空间提示弹窗
+  const showNoNamespaceModal = () => {
+    Modal.confirm({
+      title: '暂无可用命名空间',
+      icon: <ExclamationCircleOutlined />,
+      content: '当前系统中没有配置任何命名空间，请先创建一个命名空间。',
+      okText: '去管理命名空间',
+      cancelText: '取消',
+      onOk: () => {
+        navigate('/settings');
+      },
+    });
+  };
+
+  // 获取命名空间标签颜色
+  const getNamespaceTagColor = (name) => {
+    if (name === 'default') return 'blue';
+    if (name.includes('test')) return 'orange';
+    if (name.includes('prod')) return 'green';
+    if (name.includes('dev')) return 'purple';
+    return 'default';
+  };
+
+
+  return (
+    <Space style={{ ...style }}>
+      <span style={{ color: 'rgba(255, 255, 255, 0.65)', fontSize: '14px' }}>
+        <DatabaseOutlined style={{ marginRight: '6px' }} />
+        命名空间:
+      </span>
+      
+      <Select
+        value={value}
+        onChange={handleNamespaceChange}
+        loading={loading}
+        style={{ minWidth: 200 }}
+        placeholder="请选择命名空间"
+        showSearch
+        optionFilterProp="children"
+        filterOption={(input, option) =>
+          option.children.props.children[1]?.toLowerCase().includes(input.toLowerCase())
+        }
+        dropdownRender={(menu) => (
+          <>
+            {menu}
+            <div 
+              style={{ 
+                padding: '8px 12px', 
+                textAlign: 'center', 
+                borderTop: '1px solid #f0f0f0',
+                cursor: 'pointer'
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                console.log('🔧 点击管理命名空间区域');
+                navigate('/settings');
+              }}
+            >
+              <SettingOutlined style={{ marginRight: 4 }} />
+              管理命名空间
+            </div>
+          </>
+        )}
+      >
+        {namespaces.map(ns => (
+          <Option key={ns.name} value={ns.name}>
+            <Space>
+              <Tag color={getNamespaceTagColor(ns.name)} style={{ margin: 0 }}>
+                {ns.name}
+              </Tag>
+              {ns.description && (
+                <Tooltip title={ns.description}>
+                  <span style={{ color: '#999', fontSize: '12px' }}>
+                    {ns.description.length > 20 
+                      ? `${ns.description.substring(0, 20)}...` 
+                      : ns.description}
+                  </span>
+                </Tooltip>
+              )}
+            </Space>
+          </Option>
+        ))}
+      </Select>
+
+      {value && (
+        <Tooltip title={`当前命名空间: ${value}`}>
+          <CloudServerOutlined 
+            style={{ 
+              color: '#52c41a', 
+              fontSize: '16px'
+            }} 
+          />
+        </Tooltip>
+      )}
+    </Space>
+  );
+};
+
+export default NamespaceSelector;

jettask/webui/frontend/src/components/QueueBacklogChart.jsx

@@ -0,0 +1,298 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Card, Select, Spin, Empty, Space, Button, message } from 'antd';
+import { Line } from '@ant-design/plots';
+import { ReloadOutlined, ExpandOutlined } from '@ant-design/icons';
+import { useNamespace } from '../contexts/NamespaceContext';
+import dayjs from 'dayjs';
+import axios from 'axios';
+
+const { Option } = Select;
+
+// 时间范围选项
+const TIME_RANGES = {
+  '15m': { label: '15分钟', minutes: 15 },
+  '30m': { label: '30分钟', minutes: 30 },
+  '1h': { label: '1小时', minutes: 60 },
+  '3h': { label: '3小时', minutes: 180 },
+  '6h': { label: '6小时', minutes: 360 },
+  '12h': { label: '12小时', minutes: 720 },
+  '24h': { label: '24小时', minutes: 1440 },
+};
+
+function QueueBacklogChart({ 
+  height = 300, 
+  showTitle = true, 
+  defaultTimeRange = '1h',
+  autoRefresh = true,
+  refreshInterval = 60000, // 默认60秒刷新一次
+  onExpand = null 
+}) {
+  const { currentNamespace } = useNamespace();
+  const [loading, setLoading] = useState(false);
+  const [timeRange, setTimeRange] = useState(defaultTimeRange);
+  const [selectedQueues, setSelectedQueues] = useState([]);
+  const [availableQueues, setAvailableQueues] = useState([]);
+  const [chartData, setChartData] = useState([]);
+  const [lastUpdateTime, setLastUpdateTime] = useState(null);
+
+  // 获取可用队列列表
+  const fetchAvailableQueues = useCallback(async () => {
+    try {
+      const namespace = currentNamespace || 'default';
+      const response = await axios.get(`/api/queues/${namespace}`);
+      if (response.data.success) {
+        const queues = response.data.data.map(q => q.name);
+        setAvailableQueues(queues);
+        
+        // 默认选择前5个队列
+        if (selectedQueues.length === 0 && queues.length > 0) {
+          setSelectedQueues(queues.slice(0, 5));
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch queues:', error);
+    }
+  }, [currentNamespace, selectedQueues.length]);
+
+  // 获取队列积压数据
+  const fetchBacklogData = useCallback(async () => {
+    if (selectedQueues.length === 0) return;
+
+    setLoading(true);
+    try {
+      const namespace = currentNamespace || 'default';
+      const endTime = dayjs();
+      const startTime = endTime.subtract(TIME_RANGES[timeRange].minutes, 'minute');
+      
+      const params = {
+        namespace,
+        queues: selectedQueues,
+        time_range: timeRange,
+        start_time: startTime.toISOString(),
+        end_time: endTime.toISOString(),
+        filters: [] // 不需要额外筛选
+      };
+
+      // 使用队列流量接口获取积压数据
+      const response = await axios.post(`/api/data/queue-flow-rates/${namespace}`, params);
+      
+      if (response.data.success) {
+        const { data } = response.data;
+        
+        // 转换数据格式，只保留pending数据作为积压量
+        const backlogData = data
+          .filter(item => item.metric === 'pending')
+          .map(item => ({
+            time: dayjs(item.time).format('HH:mm'),
+            timestamp: item.time,
+            queue: item.queue,
+            value: item.value || 0,
+            type: '积压量'
+          }));
+        
+        setChartData(backlogData);
+        setLastUpdateTime(dayjs());
+      }
+    } catch (error) {
+      message.error('获取队列积压数据失败');
+      console.error('Failed to fetch backlog data:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [currentNamespace, selectedQueues, timeRange]);
+
+  // 初始化
+  useEffect(() => {
+    fetchAvailableQueues();
+  }, [fetchAvailableQueues]);
+
+  // 当选中队列变化时，获取数据
+  useEffect(() => {
+    if (selectedQueues.length > 0) {
+      fetchBacklogData();
+    }
+  }, [selectedQueues, fetchBacklogData]);
+
+  // 自动刷新
+  useEffect(() => {
+    if (!autoRefresh || selectedQueues.length === 0) return;
+
+    const timer = setInterval(() => {
+      fetchBacklogData();
+    }, refreshInterval);
+
+    return () => clearInterval(timer);
+  }, [autoRefresh, refreshInterval, fetchBacklogData, selectedQueues.length]);
+
+  // 图表配置
+  const config = {
+    data: chartData,
+    xField: 'time',
+    yField: 'value',
+    seriesField: 'queue',
+    height: height,
+    smooth: true,
+    animation: {
+      appear: {
+        animation: 'wave-in',
+        duration: 1000,
+      },
+    },
+    xAxis: {
+      title: {
+        text: '时间',
+        style: { fontSize: 12 },
+      },
+      label: {
+        autoRotate: true,
+        autoHide: true,
+      },
+    },
+    yAxis: {
+      title: {
+        text: '积压任务数',
+        style: { fontSize: 12 },
+      },
+      min: 0,
+      nice: true,
+    },
+    legend: {
+      position: 'top-right',
+      itemSpacing: 10,
+    },
+    tooltip: {
+      shared: true,
+      showCrosshairs: true,
+      formatter: (datum) => {
+        return {
+          name: datum.queue,
+          value: `${datum.value.toLocaleString()} 个任务`,
+        };
+      },
+    },
+    theme: {
+      colors10: [
+        '#5B8FF9',
+        '#5AD8A6',
+        '#5D7092',
+        '#F6BD16',
+        '#E8684A',
+        '#6DC8EC',
+        '#9270CA',
+        '#FF9D4D',
+        '#269A99',
+        '#FF99C3',
+      ],
+    },
+    // 添加告警线（可选）
+    annotations: [
+      {
+        type: 'line',
+        start: ['min', 1000],
+        end: ['max', 1000],
+        style: {
+          stroke: '#ff9800',
+          lineDash: [4, 4],
+          lineWidth: 1,
+        },
+        text: {
+          content: '警告线 (1000)',
+          position: 'end',
+          style: {
+            textAlign: 'end',
+            fontSize: 10,
+            fill: '#ff9800',
+          },
+          offsetY: -5,
+        },
+      },
+      {
+        type: 'line',
+        start: ['min', 5000],
+        end: ['max', 5000],
+        style: {
+          stroke: '#f44336',
+          lineDash: [4, 4],
+          lineWidth: 1,
+        },
+        text: {
+          content: '危险线 (5000)',
+          position: 'end',
+          style: {
+            textAlign: 'end',
+            fontSize: 10,
+            fill: '#f44336',
+          },
+          offsetY: -5,
+        },
+      },
+    ],
+  };
+
+  return (
+    <Card 
+      title={showTitle ? "队列积压趋势" : null}
+      size="small"
+      extra={
+        <Space>
+          {lastUpdateTime && (
+            <span style={{ fontSize: 12, color: '#999' }}>
+              更新于 {lastUpdateTime.format('HH:mm:ss')}
+            </span>
+          )}
+          <Select
+            value={timeRange}
+            onChange={setTimeRange}
+            style={{ width: 100 }}
+            size="small"
+          >
+            {Object.entries(TIME_RANGES).map(([key, { label }]) => (
+              <Option key={key} value={key}>{label}</Option>
+            ))}
+          </Select>
+          <Select
+            mode="multiple"
+            placeholder="选择队列"
+            value={selectedQueues}
+            onChange={setSelectedQueues}
+            style={{ minWidth: 200, maxWidth: 400 }}
+            size="small"
+            maxTagCount={2}
+            maxTagTextLength={10}
+          >
+            {availableQueues.map(queue => (
+              <Option key={queue} value={queue}>{queue}</Option>
+            ))}
+          </Select>
+          <Button
+            icon={<ReloadOutlined />}
+            size="small"
+            onClick={fetchBacklogData}
+            loading={loading}
+          />
+          {onExpand && (
+            <Button
+              icon={<ExpandOutlined />}
+              size="small"
+              onClick={onExpand}
+              title="展开详情"
+            />
+          )}
+        </Space>
+      }
+    >
+      <Spin spinning={loading}>
+        {chartData.length > 0 ? (
+          <Line {...config} />
+        ) : (
+          <Empty 
+            description={selectedQueues.length === 0 ? "请选择要监控的队列" : "暂无数据"} 
+            style={{ height: height, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}
+          />
+        )}
+      </Spin>
+    </Card>
+  );
+}
+
+export default QueueBacklogChart;