@aliyun-sls/lsp-editor

SLS lsp-editor

集成请使用稳定版本 0.1.28

基本信息

新版查询输入框

使用

安装

安装@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

1. 可选属性

• 索引
  • 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"

• 自定义获取补全项的请求方式（查询）

  • getValueCandidatesFunc: ( keyName: string, keyType: 'text' | 'json' | 'long' | 'double', prefix: string ) => Promise<CompletionItem[]>

• 隐藏语法帮助

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

hiddenGrammarHelp={true}

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

sealReservedField={true}

• 无确认事件时默认回车换行
  • noDefaultConfirm: 默认为 false ，设置为 true 则认为无确认事件，默认回车换行，同时隐藏配置面板内快捷键设置

noDefaultConfirm={true}

• 去掉配置面板
  • onlyFormatOption: 默认为 false ，设置为 true 可以去掉配置面板，将右侧按钮行为变成格式化

onlyFormatOption={true}

• 监控内容变化
  • onContentChange: 内容变化时的回调函数

onContentChange={
  (curStr) => {
    console.log(curStr)
  }
}

• 失焦事件
  • onBlur: 失焦时的回调函数

onBlur={
  () => {
    // do something
  }
}

使用 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={() => {}} // 确认事件，空函数亦可
/>

1. 可选属性

• 索引(可用于 key 列表提示)
  • indexMap: 索引字段

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

• 模版
  • jsonStencil: json 格式的模版
    每个模版过滤器参数说明：
    keyName: 索引名（只有此参数为必填）。注意此值不能重复！！！
    type: 类型（不指定会尝试从全部索引中获取）
    op: 预设的符号
    opCandidates: 预设的符号集
    category: 分类（common 为常用，senior 为高级）
    description: 说明
    value: 值
    disabled: 是否禁止下拉修改
    noValueCandidates: 仅输入框模式
    • op: 预设符号包括：:,=,!=,<,>,<=,>=,in,not in,oneOf,not oneOf, 其中 in 表示数值范围, oneOf 表示多选

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"

• 自定义获取待选项的请求方式

  • getCandidatesFunc: (keyName: string) => Promise<string[]>

• 修改待选项/勾选固定过滤条件时的回调

  • onQueryChangedByAction: (val: string) => {}

onQueryChangedByAction={(val) => {
  console.log('currentQuery: ', val)
}}

• 修改类别文字
  • categoryTitles: Record<string, string>

// 请使用 common, senior, other 这三个键
categoryTitles={{ common: '第一个类别', senior: '第二个类别', other: '其他条件' }}

• 模糊查询模式的状态获取
  • onFuzzyChanged: (val: boolean) => {}

onFuzzyChanged={(val) => {
  console.log('isFuzzyAllowed: ', val)
}}