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

jettask/webui/frontend/src/components/charts/QueueChart.jsx

@@ -1,111 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, Empty, Tabs } from 'antd';
-import { Column } from '@ant-design/plots';
-import QueueTrendChart from './QueueTrendChart';
-import { fetchQueueTrend } from '../../services/queueTrend';
-
-const { TabPane } = Tabs;
-
-const QueueChart = ({ 
-  data, 
-  loading, 
-  queues = [], 
-  timeRange = '1h', 
-  customTimeRange = null,
-  mode = 'distribution' // 'distribution' | 'trend'
-}) => {
-  const [trendData, setTrendData] = useState([]);
-  const [activeTab, setActiveTab] = useState('trend');
-
-  // 获取趋势数据
-  useEffect(() => {
-    if (queues && queues.length > 0 && (mode === 'trend' || activeTab === 'trend')) {
-      // 获取队列名称列表
-      const queueNames = queues.map(q => q.name || q);
-      
-      // 从API获取趋势数据
-      const loadTrendData = async () => {
-        try {
-          const data = await fetchQueueTrend(timeRange, queueNames, customTimeRange);
-          setTrendData(data);
-        } catch (error) {
-          console.error('Failed to load trend data:', error);
-          // 如果失败，使用空数据
-          setTrendData([]);
-        }
-      };
-      
-      loadTrendData();
-    }
-  }, [queues, timeRange, customTimeRange, mode, activeTab]);
-
-  // 柱状图配置
-  const columnConfig = {
-    data: data || [],
-    xField: 'name',
-    yField: 'value',
-    label: {
-      position: 'middle',
-      style: {
-        fill: '#FFFFFF',
-        opacity: 0.6,
-      },
-    },
-    xAxis: {
-      label: {
-        autoHide: true,
-        autoRotate: false,
-      },
-    },
-    meta: {
-      name: { alias: '队列' },
-      value: { alias: '任务数' },
-    },
-  };
-
-  // 如果指定为趋势模式，直接返回趋势图
-  if (mode === 'trend') {
-    return (
-      <QueueTrendChart 
-        data={trendData}
-        loading={loading}
-        timeRange={timeRange}
-      />
-    );
-  }
-
-  // 如果没有指定模式，显示标签页切换
-  if (!mode || mode === 'both') {
-    return (
-      <Tabs activeKey={activeTab} onChange={setActiveTab}>
-        <TabPane tab="处理趋势" key="trend">
-          <QueueTrendChart 
-            data={trendData}
-            loading={loading}
-            timeRange={timeRange}
-          />
-        </TabPane>
-        <TabPane tab="队列分布" key="distribution">
-          {data && data.length > 0 ? (
-            <Column {...columnConfig} />
-          ) : (
-            <Empty description="暂无数据" />
-          )}
-        </TabPane>
-      </Tabs>
-    );
-  }
-
-  // 默认显示分布图
-  return (
-    <Card title="队列任务分布" loading={loading}>
-      {data && data.length > 0 ? (
-        <Column {...columnConfig} />
-      ) : (
-        <Empty description="暂无数据" />
-      )}
-    </Card>
-  );
-};
-
-export default QueueChart;

jettask/webui/frontend/src/components/charts/QueueTrendChart.jsx

@@ -1,115 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Line } from '@ant-design/plots';
-import { Empty, Spin } from 'antd';
-import dayjs from 'dayjs';
-
-const QueueTrendChart = ({ data = [], loading = false }) => {
-  const [chartData, setChartData] = useState([]);
-
-  useEffect(() => {
-    if (data && data.length > 0) {
-      // 处理数据，转换为Date对象并按时间排序
-      const processedData = data.map(item => ({
-        ...item,
-        date: new Date(item.time), // 使用date字段，与示例保持一致
-        value: item.value || 0,
-        queue: item.queue
-      }));
-
-      // 按时间排序确保连线正确
-      processedData.sort((a, b) => a.date.getTime() - b.date.getTime());
-
-      setChartData(processedData);
-    }
-  }, [data]);
-
-  // 图表配置 - 参考Ant Design Charts示例
-  const config = {
-    data: chartData,
-    xField: (d) => d.date,  // 返回Date对象，让图表库自动处理
-    yField: 'value',
-    seriesField: 'queue', // 如果有多个队列，按队列分组
-    
-    // 连接空值配置
-    connectNulls: {
-      connect: true,
-      connectStroke: '#ccc',
-    },
-    
-    // X轴会自动优化显示，不需要手动设置formatter
-    xAxis: {
-      type: 'time',
-      nice: true,
-    },
-    
-    // Y轴配置
-    yAxis: {
-      label: {
-        formatter: (v) => {
-          // 格式化数字显示
-          if (v >= 1000000) {
-            return `${(v / 1000000).toFixed(1)}M`;
-          } else if (v >= 1000) {
-            return `${(v / 1000).toFixed(1)}K`;
-          }
-          return String(v);
-        }
-      }
-    },
-    
-    // 悬浮提示配置
-    tooltip: {
-      showTitle: true,
-      title: (title) => {
-        // 格式化时间显示
-        return dayjs(title).format('YYYY-MM-DD HH:mm:ss');
-      },
-      formatter: (datum) => {
-        return {
-          name: datum.queue || '任务数',
-          value: datum.value.toLocaleString(), // 添加千分位分隔符
-        };
-      },
-    },
-    
-    // 平滑曲线
-    smooth: true,
-    
-    // 动画配置
-    animation: {
-      appear: {
-        animation: 'path-in',
-        duration: 1000,
-      },
-    },
-    
-    // 响应式配置
-    autoFit: true,
-    height: 300,
-    
-    // 主题颜色
-    color: ['#5B8FF9', '#61DDAA', '#65789B', '#F6BD16', '#7262FD'],
-  };
-
-  // 空数据处理
-  if (!loading && (!chartData || chartData.length === 0)) {
-    return (
-      <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Empty description="暂无数据" />
-      </div>
-    );
-  }
-
-  // 加载状态
-  if (loading) {
-    return (
-      <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Spin size="large" tip="加载中..." />
-      </div>
-    );
-  }
-
-  return <Line {...config} />;
-};
-
-export default QueueTrendChart;

jettask/webui/frontend/src/components/charts/WorkerChart.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Card, Empty } from 'antd';
-import { Pie } from '@ant-design/plots';
-
-const WorkerChart = ({ data, loading }) => {
-  const chartData = data || [
-    { type: '在线', value: 0 },
-    { type: '离线', value: 0 },
-  ];
-
-  const config = {
-    appendPadding: 10,
-    data: chartData,
-    angleField: 'value',
-    colorField: 'type',
-    radius: 0.8,
-    label: {
-      type: 'inner',
-      offset: '-30%',
-      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
-      style: {
-        fontSize: 14,
-        textAlign: 'center',
-      },
-    },
-    interactions: [{ type: 'element-active' }],
-  };
-
-  return (
-    <Card title="Worker 状态分布" loading={loading}>
-      {chartData.some(item => item.value > 0) ? (
-        <Pie {...config} />
-      ) : (
-        <Empty description="暂无数据" />
-      )}
-    </Card>
-  );
-};
-
-export default WorkerChart;

jettask/webui/frontend/src/components/common/StatsCard.jsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Card, Statistic } from 'antd';
-
-const StatsCard = ({ title, value, icon, prefix, suffix, valueStyle }) => {
-  return (
-    <Card>
-      <Statistic
-        title={title}
-        value={value}
-        prefix={icon}
-        suffix={suffix}
-        valueStyle={valueStyle}
-      />
-    </Card>
-  );
-};
-
-export default StatsCard;

jettask/webui/frontend/src/components/layout/AppLayout.css

@@ -1,95 +0,0 @@
-/* 整体布局 */
-.app-layout {
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* 主布局区域 */
-.main-layout {
-  transition: margin-left 0.2s;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-/* 顶部导航栏 */
-.app-header {
-  background: #2a2d31;
-  padding: 0;
-  height: 48px;
-  line-height: 48px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #f0f2f5;
-  z-index: 10;
-  position: sticky;
-  top: 0;
-}
-
-.header-left {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  overflow: hidden;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  gap: 16px;
-}
-
-/* 内容区域 */
-.app-content {
-  flex: 1;
-  overflow: auto;
-  background: #f0f2f5;
-  padding: 0;
-}
-
-/* 页面内容容器 */
-.page-container {
-  height: 100%;
-  background: #fff;
-}
-
-/* 滚动条样式 */
-.app-content::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.app-content::-webkit-scrollbar-track {
-  background: #f0f0f0;
-}
-
-.app-content::-webkit-scrollbar-thumb {
-  background: #bfbfbf;
-  border-radius: 4px;
-}
-
-.app-content::-webkit-scrollbar-thumb:hover {
-  background: #8c8c8c;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .main-layout {
-    margin-left: 0 !important;
-  }
-  
-  .app-sider {
-    position: fixed;
-    z-index: 1000;
-    height: 100vh;
-    left: -200px;
-    transition: left 0.2s;
-  }
-  
-  .app-sider.ant-layout-sider-collapsed {
-    left: 0;
-  }
-}

jettask/webui/frontend/src/components/layout/AppLayout.jsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import { Layout } from 'antd';
-import { Outlet } from 'react-router-dom';
-import SideMenu from './SideMenu';
-import TabsNav from './TabsNav';
-import UserInfo from './UserInfo';
-import NamespaceSelector from '../NamespaceSelector';
-import { useNamespace } from '../../contexts/NamespaceContext';
-import './AppLayout.css';
-
-const { Header, Content } = Layout;
-
-const AppLayout = () => {
-  const { currentNamespace, setCurrentNamespace } = useNamespace();
-  
-  console.log('🔧 AppLayout渲染，currentNamespace:', currentNamespace);
-  console.log('🔧 AppLayout渲染，setCurrentNamespace:', typeof setCurrentNamespace);
-  
-  return (
-    <Layout className="app-layout">
-      {/* 左侧菜单 */}
-      <SideMenu />
-      
-      {/* 右侧主体 */}
-      <Layout className="main-layout" style={{ marginLeft: 64 }}>
-        {/* 顶部导航栏 */}
-        <Header className="app-header">
-          <div className="header-left">
-            <TabsNav />
-          </div>
-          <div className="header-right">
-            <NamespaceSelector 
-              value={currentNamespace}
-              onChange={setCurrentNamespace}
-            />
-            <UserInfo />
-          </div>
-        </Header>
-        
-        {/* 内容区域 */}
-        <Content className="app-content">
-          <Outlet />
-        </Content>
-      </Layout>
-    </Layout>
-  );
-};
-
-export default AppLayout;

jettask/webui/frontend/src/components/layout/Header.css

@@ -1,106 +0,0 @@
-.app-header {
-  background: rgba(20, 20, 20, 0.95) !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 0;
-  position: relative;
-  height: 48px !important;
-  line-height: 48px !important;
-}
-
-.header-container {
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 48px;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-}
-
-.app-logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: white;
-  font-size: 16px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.logo-icon {
-  font-size: 18px;
-  color: var(--primary-color);
-}
-
-.logo-text {
-  background: linear-gradient(45deg, #1890ff, #52c41a);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.header-center {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
-.header-menu {
-  background: transparent !important;
-  border: none !important;
-  line-height: 48px !important;
-}
-
-.header-menu .ant-menu-item {
-  color: rgba(255, 255, 255, 0.65) !important;
-  height: 48px !important;
-  line-height: 48px !important;
-}
-
-.header-menu .ant-menu-item:hover {
-  color: white !important;
-}
-
-.header-menu .ant-menu-item-selected {
-  color: var(--primary-color) !important;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-}
-
-.refresh-btn {
-  color: rgba(255, 255, 255, 0.65) !important;
-}
-
-.refresh-btn:hover {
-  color: white !important;
-}
-
-/* 命名空间选择器样式 */
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-/* 脉动动画 */
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/* 响应式设计 */

jettask/webui/frontend/src/components/layout/Header.jsx

@@ -1,106 +0,0 @@
-import React from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { Layout, Menu } from 'antd'
-import { 
-  DashboardOutlined, 
-  AppstoreOutlined, 
-  TeamOutlined,
-  RocketOutlined,
-  LoadingOutlined,
-  ClockCircleOutlined,
-  AlertOutlined,
-  CloudServerOutlined
-} from '@ant-design/icons'
-import { useLoading } from '../../contexts/LoadingContext'
-import { useNamespace } from '../../contexts/NamespaceContext'
-import NamespaceSelector from '../NamespaceSelector'
-import './Header.css'
-
-const { Header: AntHeader } = Layout
-
-const Header = () => {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { isLoading } = useLoading()
-  const { currentNamespace, setCurrentNamespace } = useNamespace()
-
-  const menuItems = [
-    {
-      key: '/dashboard',
-      icon: <DashboardOutlined />,
-      label: '概览',
-    },
-    {
-      key: '/queues',
-      icon: <AppstoreOutlined />,
-      label: '队列',
-    },
-    // {
-    //   key: '/workers',
-    //   icon: <TeamOutlined />,
-    //   label: 'Workers',
-    // },
-    {
-      key: '/scheduled-tasks',
-      icon: <ClockCircleOutlined />,
-      label: '定时任务',
-    },
-    {
-      key: '/alerts',
-      icon: <AlertOutlined />,
-      label: '监控告警',
-    },
-  ]
-
-  const handleMenuClick = ({ key }) => {
-    navigate(key)
-  }
-
-  return (
-    <AntHeader className="app-header">
-      <div className="header-container">
-        <div className="header-left">
-          <div className="app-logo">
-            {isLoading ? (
-              <LoadingOutlined 
-                className="logo-icon"
-                style={{ 
-                  fontSize: 18,
-                  color: '#1890ff'
-                }} 
-                spin 
-              />
-            ) : (
-              <RocketOutlined className="logo-icon" />
-            )}
-            <span className="logo-text">JetTask Monitor</span>
-          </div>
-        </div>
-        
-        <div className="header-center">
-          <Menu
-            mode="horizontal"
-            selectedKeys={[location.pathname]}
-            items={menuItems}
-            onClick={handleMenuClick}
-            className="header-menu"
-          />
-        </div>
-        
-        <div className="header-right">
-          <NamespaceSelector 
-            value={currentNamespace}
-            onChange={(namespace) => {
-              console.log('🔧 Header收到命名空间切换:', namespace);
-              setCurrentNamespace(namespace);
-            }}
-            style={{ marginLeft: 'auto' }}
-          />
-        </div>
-        
-      </div>
-    </AntHeader>
-  )
-}
-
-export default Header