jettask 0.2.15__py3-none-any.whl → 0.2.16__py3-none-any.whl

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

@@ -1,166 +0,0 @@
-/**
- * 命名空间选择器组件
- * 放置在页面顶部，用于切换不同的命名空间
- */
-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

@@ -1,298 +0,0 @@
-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;