Loki Log Viewer

一个基于Vue 3的Loki日志查询和显示组件，提供友好的用户界面来查询、过滤和查看Loki日志系统中的日志。

特性

• 基于Vue 3和Element Plus构建
• 使用xterm.js提供终端风格的日志显示
• 支持实时日志查询和刷新
• 支持时间范围选择
• 支持关键词过滤
• 支持日志下载
• 支持多个命名空间/Pod组合的查询
• 可自定义外观和行为

安装

npm install loki-log-viewer
# 或
yarn add loki-log-viewer

使用方法

基本用法

<template>
  <div style="height: 600px;">
    <LokiLogViewer 
      namespace="default"
      pod="my-app-pod"
      lokiApiBaseUrl="http://loki-service:3100"
    />
  </div>
</template>

<script setup>
import { LokiLogViewer } from 'loki-log-viewer';
import 'loki-log-viewer/dist/index.css';
</script>

多命名空间/Pod组合

<template>
  <div style="height: 600px;">
    <LokiLogViewer 
      :namespacePodPairs="[
        { namespace: 'default', pod: 'app-pod-1', displayName: '应用1' },
        { namespace: 'monitoring', pod: 'app-pod-2', displayName: '应用2' }
      ]"
      lokiApiBaseUrl="http://loki-service:3100"
    />
  </div>
</template>

<script setup>
import { LokiLogViewer } from 'loki-log-viewer';
import 'loki-log-viewer/dist/style.css';
</script>

自定义配置

<template>
  <div style="height: 600px;">
    <LokiLogViewer 
      namespace="default"
      pod="my-app-pod"
      lokiApiBaseUrl="http://loki-service:3100"
      title="应用日志查看器"
      :autoRefreshInterval="10000"
      :defaultTimeRange="30"
      :terminalOptions="{
        fontSize: 14,
        theme: {
          background: '#000000',
          foreground: '#ffffff'
        }
      }"
      @logs-loaded="handleLogsLoaded"
      @error="handleError"
      @live-mode-change="handleLiveModeChange"
    />
  </div>
</template>

<script setup>
import { LokiLogViewer } from 'loki-log-viewer';
import 'loki-log-viewer/dist/style.css';

const handleLogsLoaded = (logs) => {
  console.log(`加载了 ${logs.length} 条日志`);
};

const handleError = (error) => {
  console.error('日志查询出错:', error);
};

const handleLiveModeChange = (isLive) => {
  console.log('实时模式状态:', isLive);
};
</script>

属性

事件

方法

可以通过ref引用访问组件实例方法：

许可证

MIT