@blueking/log-search NPM

蓝鲸日志检索组件

支持 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()	实时日志