# loki-viewer

**Repository Path**: jvhan/loki-viewer

## Basic Information

- **Project Name**: loki-viewer
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-14
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Grafana Loki Viewer

基于 React + UMI + Ant Design Pro 的 Grafana Loki 日志查看器。

## 功能特性

- 🔍 LogQL 查询支持
- 🏷️ Labels 过滤（支持多条件）
- 📅 日期范围选择（预设和自定义）
- 🔎 关键词搜索（客户端过滤）
- 💾 查询预设保存/加载
- 📜 最近查询历史
- 🎨 现代化深色主题 UI

## 技术栈

- React 17
- UMI 3
- Ant Design 4
- TypeScript

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动项目（一键启动）

项目已配置为自动同时启动代理服务器和前端服务器：

```bash
npm run dev
```

这会自动启动：
- **代理服务器**：`http://localhost:3001`（处理 Labels API）
- **前端服务器**：`http://localhost:8000`（UMI 默认端口）

### 3. 访问应用

打开浏览器访问 `http://localhost:8000`

### 单独启动（可选）

如果需要单独启动某个服务：

```bash
# 只启动代理服务器
npm run proxy

# 只启动前端服务器
npm run start:dev
```

## 项目结构

```
loki-viewer/
├── config/              # UMI 配置文件
├── src/
│   ├── components/      # 组件
│   ├── pages/           # 页面
│   ├── services/        # API 服务
│   └── utils/           # 工具函数
├── server/              # 后端代理服务器
│   └── proxy-server.js  # Express 代理服务器
└── mock/                # Mock API（可选）
```

## 工作原理

1. **Labels API**：通过后端代理服务器调用，避免 CORS 问题
   - 前端请求：`/api/loki/labels?url={lokiUrl}`
   - 代理转发到：`{lokiUrl}/loki/api/v1/labels`

2. **Query Range API**：直接在前端调用 Loki 服务器
   - 前端请求：`{lokiUrl}/loki/api/v1/query_range`

## 配置说明

### 后端代理配置

在 `config/config.ts` 中已配置代理：

```typescript
proxy: {
  '/api/loki': {
    target: 'http://localhost:3001',
    changeOrigin: true,
  },
},
```

### 修改代理端口

如果需要修改代理服务器端口：

1. 修改 `server/proxy-server.js` 中的 `PORT`
2. 修改 `config/config.ts` 中的 `target`

## 使用说明

1. 确保后端代理服务器正在运行
2. 输入 Loki 服务器地址（如：`http://47.104.188.86:3102`）
3. 点击"刷新 Labels"获取可用的 labels
4. 选择 labels 和值，或手动输入 LogQL 查询
5. 选择日期范围
6. 点击"执行查询"
7. 使用关键词搜索过滤已加载的日志

## 故障排除

### Labels 获取失败

- 确保后端代理服务器正在运行（`npm run proxy`）
- 检查代理服务器控制台是否有错误
- 确认 Loki 服务器地址正确且可访问

### CORS 错误

- Query Range API 如果遇到 CORS 错误，需要在 Loki 服务器配置 CORS
- 或者在代理服务器中添加 Query Range 的代理路由

### 端口冲突

- 如果 3001 端口被占用，修改 `server/proxy-server.js` 中的端口
- 同时更新 `config/config.ts` 中的 `target`

## 构建生产版本

```bash
npm run build
```

构建产物在 `dist/` 目录。

**注意**：生产环境需要部署后端代理服务器，或者配置 Nginx 反向代理。

## 许可证

MIT