蓝鲸日志检索组件

支持 Vue2/Vue3 版本 无差别使用

安装

npm i @blueking/log-search

使用

• vue3框架下使用

<template>
  <div class="app">
    <log-search
      :show-auto-query="true"
      :service-config="serviceConfig"
    />
  </div>
</template>
<script setup lang="ts">
import LogSearch from '@blueking/log-search';
// 如果项目没有安装bkui-vue, dayjs 则可使用全量版本
// import LogSearch from '@blueking/log-search/vue3';

import '@blueking/log-search/dist/vue3-light.css';

import Service from './service'

const serviceConfig = {
  fetchIndexSetList: Service.fetchIndexSetList,
  ...
}
</script>

• vue2框架下使用

<template>
  <div class="hello">
    <LogSearch
      :show-auto-query="true"
      :service-config="serviceConfig"
    />
  </div>
</template>

<script>
import LogSearch from '@blueking/log-search/vue2'
import '@blueking/log-search/dist/vue2-light.css'
export default {
  data(){
      return {
        serviceConfig: {
          fetchIndexSetList: Service.fetchIndexSetList,
          ...
        }
    }
  },
  components: {
    LogSearch
  },
}
</script>

属性列表

| 属性名 | 描述 | 属性类型 | 默认值 | | ------------------- | ------------------------- | --------- | ------ | | showAutoQuery | 是否展示自动/手动查询配置 | boolean | false | | showChartPanel | 是否展示趋势图 | boolean | true | | showStatisticsPanel | 是否展示字段统计 | boolean | true | | | | serviceConfig | 数据源配置 | Object | |

数据源配置列表

| 数据源名称 | 参数类型 | 描述 | | --------------------------- | ----------------------- | ---------------------------- | | fetchIndexSetList | () => Promise.resolve() | 索引集列表 | | fetchSearchConditions | () => Promise.resolve() | 查询条件 | | fetchSearchConditionOptions | () => Promise.resolve() | 查询条件候选值 | | fetchSearchHistory | () => Promise.resolve() | 历史查询 | | fetchQueryStringInspect | () => Promise.resolve() | 检索语句语法检测 | | fetchUserSettings | () => Promise.resolve() | 用户配置 | | updateUserSettings | () => Promise.resolve() | 保存用户配置 | | fetchLogSearch | () => Promise.resolve() | 表格查询 | | fetchLogBarChart | () => Promise.resolve() | 趋势图查询 | | fetchLogFields | () => Promise.resolve() | 表格字段 | | fetchFieldsSettings | () => Promise.resolve() | 用户使用的表格字段配置 | | createFieldSettings | () => Promise.resolve() | 新增表格字段配置 | | updateFieldSettings | () => Promise.resolve() | 保存表格字段配置 | | updateUseFieldSettings | () => Promise.resolve() | 更新用户当前使用表格字段配置 | | deleteFieldSettings | () => Promise.resolve() | 删除表格字段配置 | | exportLog | () => Promise.resolve() | 日志下载 | | fetchLogContext | () => Promise.resolve() | 上下文 | | fetchRealTimeLog | () => Promise.resolve() | 实时日志 |