jettask 0.2.6__py3-none-any.whl → 0.2.8__py3-none-any.whl

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

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

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

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

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

@@ -0,0 +1,95 @@
+/* 整体布局 */
+.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

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

@@ -0,0 +1,106 @@
+.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

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