@brightdb/perf-advisor-ui

BrightDB Performance Advisor React UI 组件库，用于诊断和分析 BrightDB 应用问题。

技术栈

• React 17.0.2
• TypeScript 4.9.3
• Material-UI 4.12.3
• react-query 3.32.1 (数据获取/缓存)
• plotly.js 2.28.0 (图表)
• vis-timeline 7.7.3 (时间线)
• Rollup 2.79.1 (构建)

安装

npm install @brightdb/perf-advisor-ui

使用方法

import { PerfAdvisorEntry, AppName } from '@brightdb/perf-advisor-ui';

function App() {
  return (
    <PerfAdvisorEntry
      universeUuid="your-universe-uuid"
      timezone="Asia/Shanghai"
      appName={AppName.BMA}
      apiUrl="https://your-api.com"
      onSelectedIssue={(issue) => console.log(issue)}
      onSelectedQuery={(query) => console.log(query)}
    />
  );
}

主要组件

业务组件

| 组件 | 说明 | |------|------| | PerfAdvisorEntry | 主入口组件 | | PerfAdvisorTabs | 选项卡导航 (Anomalies, Queries, Metrics, Insights) | | PerfAdvisorGantChart | 时间线/甘特图 | | GraphView | Plotly 图表渲染 | | AnomalyRCAView | Root Cause Analysis 视图 |

通用组件

| 组件 | 说明 | |------|------| | BMButton | 按钮 (支持 primary, secondary, ghost, pill 变体) | | BMAlert | 警告提示 | | BMInput / BMInputField | 输入框 | | BMSelect | 下拉选择 | | BMModal / BMSidePanel | 弹窗/侧边栏 | | BMTable | 表格 | | BMDateTimePicker | 日期时间选择 | | BMToggle | 开关 | | useToast | Toast 通知 |

API 层

import { PerfAdvisorAPI, QUERY_KEY } from '@brightdb/perf-advisor-ui';

// 获取异常列表
const anomalies = await PerfAdvisorAPI.fetchAnomalies(universeUuid, startTime, endTime);

// 获取图表数据
const graphs = await PerfAdvisorAPI.fetchGraphs(universeUuid, params, apiUrl);

类型定义

import { AppName, MetricMeasure, AnomalyCategory, SplitMode } from '@brightdb/perf-advisor-ui';

const measure = MetricMeasure.OVERALL;
const category = AnomalyCategory.DB;

开发

# 安装依赖
npm install

# 开发构建
npm run build:dev

# 生产构建
npm run build

# 发布
npm run release

项目结构

src/
├── api.ts                 # API 服务层
├── index.ts               # 入口文件
├── assets/                # SVG 资源
├── common/                # 通用 UI 组件
│   ├── BMButton/
│   ├── BMAlert/
│   ├── BMModal/
│   ├── BMTable/
│   └── ...
├── components/            # 业务组件
│   ├── PrimaryDashboard/  # 主仪表板
│   ├── SecondaryDashboard/ # 详情分析
│   ├── ConfigureUniverse/  # Universe 配置
│   └── RuntimeConfigs/     # 运行时配置
├── helpers/               # 工具函数
│   ├── constants.ts        # 常量
│   ├── dtos.ts            # 类型定义
│   ├── utils.ts           # 工具函数
│   └── objectUtils.ts     # 对象工具
└── types/                 # TypeScript 类型声明
    └── svg.d.ts           # SVG 模块声明

构建产物

dist/cjs/
├── index.js      # 编译后的 JavaScript
├── index.css     # 样式文件
└── types/        # TypeScript 类型声明

License

MIT