@brightdb/perf-advisor-ui

@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