@aliyun-sls/lsp-editor v0.1.17

SLS lsp-editor

基本信息

新版查询输入框

使用

安装

安装@aliyun-sls/lsp-editor、@aliyun-sls/lsp-core

引入

import { SlsEditor } from '@aliyun-sls/lsp-editor'
import { SLSLanguageMode } from '@aliyun-sls/lsp-core'

属性配置

1. 必需属性

<SlsEditor
  project={projectName}
  logstore={logStoreName}
  startTime={startTime} // 查询起始时间
  endTime={endTime} // 查询结束时间
  languageMode={SLSLanguageMode.Index_SQL} // 选择您需要的语言模式
  onConfirm={() => {}} // 确认事件，空函数亦可
/>

• languageMode: NONE, IndexQuery, Index_SQL, Index_SPL, Index_SQL_SPL

2. 可选属性

• 索引
  • indexMap: 索引字段

类型定义：
indexMap?: Record<string, IIndexKey>
interface IIndexKey {
  type: 'text' | 'json' | 'long' | 'double'
  json_keys?: Record<string, IIndexKey> // json类型下形成树形结构
}

• 控制editor大小
  • defaultLineNumber: 默认行数
  • minLineNumber: 最小高度（以行为单位）
  • maxLineNumber: 最大高度（以行为单位）

defaultLineNumber={1}
minLineNumber={1}
maxLineNumber={7}

• 提示面板显示方式
  • mode: 显示模式。默认不需要设置，设置为 tooltip 将提示面板变成跟随光标的弹框

mode="tooltip"

• 只读
  • readonly: 输入框只读性。默认为 false ，设置为 true 将输入框置为只读

readonly={true}

• 传入查询语句
  • queryString: 设置语句

queryString="your query"

• 留下查询记录
  • historyFlag: 历史记录藉由浏览器 localStorage 实现，设置使用的 key

historyFlag="history_key"

• 自定义请求方式
  • easyFetch: 至少实现 post 方法的对象

class C{
    constructor(){}
    async post(api, ...) : Promise<any> {
        // your request method
    }
}
const easyFetch = new C()
<SlsEditor
...
easyFetch={easyFetch}
/>

• 隐藏语法帮助
  • hiddenGrammarHelp: 默认为 false ，设置为 true 可以隐藏语法帮助栏

hiddenGrammarHelp={true}

• 隐藏保留字段
  • sealReservedField: 默认为 false ，设置为 true 可以关闭保留字段的提示

sealReservedField={true}

使用 TraceEditor

安装

安装@aliyun-sls/lsp-editor、@aliyun-sls/lsp-core

引入

import { TraceEditor } from '@aliyun-sls/lsp-editor'
import { SLSLanguageMode } from '@aliyun-sls/lsp-core'

属性配置

1. 必需属性

<TraceEditor
  project={projectName}
  logstore={logStoreName}
  startTime={startTime} // 查询起始时间
  endTime={endTime} // 查询结束时间
  languageMode={SLSLanguageMode.IndexQuery} // 请设置为此项
  onConfirm={() => {}} // 确认事件，空函数亦可
/>

2. 可选属性

• 索引
  • indexMap: 索引字段

类型定义：
indexMap?: Record<string, IIndexKey>
interface IIndexKey {
  type: 'text' | 'json' | 'long' | 'double'
  json_keys?: Record<string, IIndexKey> // json类型下形成树形结构
}

• 模版
  • jsonStencil: json格式的模版 每个模版过滤器参数说明： keyName: 索引名（只有此参数为必填） type: 类型（不指定会尝试从全部索引中获取） op: 预设的符号 category: 分类（common为常用，senior为高级） description: 说明

jsonStencil={{
  'attribute.t': {
    keyName: 'attribute.t',
    type: 'text',
    category: 'common',
    description: '行为类型',
  },
  'duration': {
    keyName: 'duration',
    type: 'long',
    op: 'in',
    category: 'common',
    description: '延迟',
  },
  'resource.os.name': {
    keyName: 'resource.os.name',
    type: 'text',
    category: 'senior',
    description: '操作系统',
  },
}}

• 可勾选的固定过滤器
  • constantFilters: json数组格式 每个固定过滤器参数说明（四个参数均需填写）： keyName: 索引名 op: 符号 value: 值 explaination: 对这个固定过滤器的说明

constantFilters={[
  {
    keyName: 'attribute.log.spm_type',
    op: ':',
    value: 'table',
    explaination: '用户切换到表格模式的行为',
  },
  {
    keyName: 'size',
    op: '>=',
    value: '1024',
    explaination: '筛选size大于1k的日志',
  },
]}

• 控制editor大小
  • defaultLineNumber: 默认行数
  • minLineNumber: 最小高度（以行为单位）
  • maxLineNumber: 最大高度（以行为单位）

defaultLineNumber={1}
minLineNumber={1}
maxLineNumber={7}

• 传入查询语句
  • queryString: 设置语句

queryString="your query"

• 自定义请求方式
  • easyFetch: 至少实现 post 方法的对象

class C{
    constructor(){}
    async post(api, ...) : Promise<any> {
        // your request method
    }
}
const easyFetch = new C()
<SlsEditor
...
easyFetch={easyFetch}
/>