You need to enable JavaScript to run this app.
导航
设置控制台内嵌参数
最近更新时间:2024.08.16 14:25:55首次发布时间:2022.11.25 21:31:15

日志服务提供控制台内嵌功能,即支持将检索分析页面和仪表盘页面嵌入到外部系统的自建 Web 页面中。构建日志服务控制台内嵌的免密访问链接时,您可以通过指定 URL 参数的形式设置内嵌页面的显示效果。

页面 URL 格式

构建日志服务控制台内嵌的免密访问链接时,redirectURI 部分应指定为 encodeURL 转码后的日志服务控制台页面链接。链接格式如下:

  • 检索分析页面

    https://console.volc-embed.com/tls/region:tls+${regionId}/project/${projectId}/search?UI参数1&UI参数2
    
  • 仪表盘页面

    https://console.volc-embed.com/tls/region:tls+${regionId}/project/${projectId}/dashboard/${dashboardId}?UI参数1&UI参数2
    

说明

  • ${regionId} 为日志项目所在地域的 ID,您可以在服务地址中查看日志服务支持的所有地域 ID。
  • ${projectId} 为日志项目 ID,您可以在日志服务控制台中查看日志项目 ID。详细步骤请参考日志项目
  • ${dashboardId}为仪表盘 ID,您可以在日志服务控制台中查看仪表盘 ID。
  • 支持添加 UI 参数,多个参数之间通过&连接,并需要添加在?之后。参数列表请参考UI 参数

UI 参数

日志服务提供以下 UI 参数,您可以在页面链接中按需使用。

检索分析页面参数

参数

数据类型

是否必选

示例

说明

topicId

String

必选

c5c0a2a1-8431-4370-b98c-d20f5f7d****

指定日志主题 ID。您可以在日志服务控制台中查看日志主题 ID。详细步骤请参考日志主题

codebase64

String

可选

KiB8IHNlbGVjdCAq

指定检索分析语句,需通过 Base64Url 编码。

time

String

可选

now-1m,now

设置待检索的日志的时间范围。支持设置固定时间范围或自定义时间范围。

  • 自定义时间范围:格式为 ${startTime},${endTime},其中 startTimeendTime 的格式为 YYYY-MM-DD HH:mm:ss.SSS
  • 固定时间范围的配置请参考时间字段枚举值

hideLeftBar

Boolean

可选

true

是否隐藏日志服务控制台左侧的导航栏。

  • true:隐藏。
  • false:(默认)不隐藏。

hideTitle

Boolean

可选

true

是否隐藏日志服务控制台检索分析页面的标题栏。

  • true:隐藏。
  • false:(默认)不隐藏。

hideTopic

Boolean

可选

true

是否隐藏日志服务控制台检索分析页面的 Topic 选择框。

  • true:隐藏。
  • false:(默认)不隐藏。

hideIndexBtn

Boolean

可选

true

是否隐藏日志服务控制台检索分析页面的索引配置按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

hideShareBtn

Boolean

可选

true

是否隐藏日志服务控制台检索分析页面的分享图标。

  • true:隐藏。
  • false:(默认)不隐藏。

仪表盘页面参数

参数名称

数据类型

是否必填

示例

描述

time

String

可选

now-1m,now

设置待检索的日志的时间范围。详细说明请参考时间字段枚举值

refreshTime

String

可选

1m

设置仪表盘的刷新频率。详细说明请参考时间字段枚举值

filter-${filterName}=${value}

String

可选

filter-a=v1

设置仪表盘过滤器默认值,可使用 filter-a=v1&filter-a=v2 方式设置多个默认值。

temp[Fixed | Hidden]Var-${key}=${value}

String

可选

tempFixedVar-httpStatusCode=200

添加临时的变量,${key}为变量名,${value}为变量值,Fixed 和 Hidden 用于控制变量是否在仪表盘中显示。

  • 不选择时,在仪表盘中显示该变量并可以被删除。
  • 选择 Fixed 时,在仪表盘中显示该变量但不允许删除。
  • 选择 Hidden 时,不在仪表盘中显示该变量。

temp[Fixed | Hidden]Filter-${name}=${value}

String

可选

tempFixedFilter-name=1

添加临时的过滤器条件,${key}为字段名,${value}为字段值,${value} 的实际值将会拼接在检索语句后面。Fixed 和 Hidden 用于控制过滤器是否在仪表盘中显示。

  • 不选择时,在仪表盘中显示该过滤条件并可以被删除。
  • 选择 Fixed 时,在仪表盘中显示该过滤条件但不允许删除。
  • 选择 Hidden 时,不在仪表盘中显示该过滤条件。

hideFilters=${filterNameList}

String[] 或者 'all'

可选

hideFilters=["a", "b"]

隐藏的过滤器名称列表。
设置为 all 时,表示隐藏所有过滤器。

fixedFilters=${filterNameList}

String[] 或者 'all'

可选

fixedFilters=["a", "b"]

待展示的过滤器列表,不可编辑。
设置为 all 时,表示固定所有过滤器。

readonly

Boolean

可选

true

是否设置为只读模式。

  • true:(默认)只读模式。只读模式下将自动隐藏部分 UI 元素。
  • false:编辑模式。

hideLeftBar

Boolean

可选

false

是否隐藏日志服务控制台左侧的导航栏。

  • true:隐藏。
  • false:(默认)不隐藏。

hideHeader

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的顶部菜单栏,包括仪表盘标题、分享按钮和工具栏模块。

  • true:隐藏。
  • false:(默认)不隐藏。

hideTitle

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的标题。

  • true:隐藏。
  • false:(默认)不隐藏。

hideShareBtn

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的分享按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

hideToolbar

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的工具栏。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hideSetting

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的设置按钮。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hideSubscribeBtn

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的订阅按钮。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hideTimeSelector

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的时间选择按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

hideRefreshSelector

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的自动刷新按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

hideFullScreenBtn

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的全屏按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

hideAddChartBtn

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的添加图表按钮。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hideSaveBtn

Boolean

可选

false

是否隐藏日志服务控制台中仪表盘的保存按钮。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hidePanelMenu

Boolean

可选

false

是否隐藏日志服务控制台仪表盘中统计图表的操作按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

hidePanelEdit

Boolean

可选

false

是否隐藏日志服务控制台仪表盘中统计图表的编辑按钮。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hidePanelCopy

Boolean

可选

false

是否隐藏日志服务控制台仪表盘中统计图表的复制按钮。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hidePanelAddAlert

Boolean

可选

false

是否隐藏日志服务控制台仪表盘中统计图表的添加告警按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

hidePanelDelete

Boolean

可选

false

是否隐藏日志服务控制台仪表盘中统计图表的删除按钮。

  • true:隐藏。只读模式下固定为 true。
  • false:(默认)不隐藏。

hidePanelFullScreen

Boolean

可选

false

是否隐藏日志服务控制台仪表盘中统计图表的全屏按钮。

  • true:隐藏。
  • false:(默认)不隐藏。

viewType

String

可选

fullScreen

设置仪表盘的展示状态。可选值:

  • fullScreen:仪表盘处于全屏展示状态。
  • panelFullScreen: 统计图表处于全屏展示状态。
  • panelEdit: 图表处于编辑状态。

设置统计图表的相关状态时,需指定 panelId

panelId

String

可选

40d9****7637

统计图表 ID。
设置viewType为 panelFullScreen、panelEdit 时,需设置 panelId

时间字段枚举值

  • time 字段
    time 字段支持设置的固定时间范围格式如下:

    time 字段枚举值

    说明

    now-1m,now

    近 1 分钟。

    now-5m,now

    近 5 分钟。

    now-15m,now

    近 15 分钟。

    now-30m,now

    近 30 分钟。

    now-1h,now

    近 1 小时。

    now-3h,now

    近 3 小时。

    now-6h,now

    近 6 小时。

    now-1d,now

    近 1 天。

    now-3d,now

    近 3 天。

    now-7d,now

    近 7 天。

    now-30d,now

    近 30 天。

    now-90d,now

    近 90 天。

    now/d,now/d

    今天。

    now/w,now/w

    本周。

    now/M,now/M

    本月。

  • refreshTime 字段
    refreshTime 字段支持设置的固定时间范围格式如下:

    refreshTime 枚举值

    说明

    15s

    15秒

    1m

    1分钟

    5m

    5分钟

    10m

    10分钟

    30m

    30分钟

    60m

    60分钟

高阶参数

日志服务支持通过如下方式获取检索分析页面和仪表盘页面的 postmessage,实现更高阶的内嵌交互效果。

检索分析页面

您可以通过如下方法获取检索分析页面 postmessage 中的 topicId、query、searchQuery、startTime、endTime、time、sort、isAccurateQuery、isParseQuery 等参数,从而在内嵌页面实现一键复制查询相关的日志主题、检索分析语句、检索时间等信息。

  • 被动监听message事件,通过回调来获取 data。
    完整示例如下:

    <!DOCTYPE html><html lang="en"><head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
      <body>
        <iframe id="iframe" style="width: 100%; height: 100vh" src="***" frameborder="0"></iframe>
        <script>
          window.addEventListener('message', function(event) {
              const resp = event.data;
              if (resp.sender === 'TLS/Event/EmbedSearch/searchContextInfo') {
                  console.log(resp.data);
              }
        });
        </script>
      </body></html>
    

    其中 event.data 的数据格式如下:

    {
      sender: 'TLS/Event/EmbedSearch/searchContextInfo',
      // 分别对应业务名,消息类型(event,response),模块名,消息名称。
      id: uuid(),
      data: {
          topicId: "xxxxx-xxx" // 当前查询的 Topic ID。
          
          query: "xxx | select xxx" // 完整的检索分析语句。
          searchQuery: "xxx" // 检索语句部分。
          
          startTime: 17000033; // 查询开始时间(绝对时间)。
          endTime: 17000044; // 查询结束时间(绝对时间)
          time: "now-5m,now" // 当次查询使用的时间。
          
          sort: 'asc' // 查询排序。
          
          isAccurateQuery: false; // 是否为精确查询。
          isParseQuery: false; // 是否为短语查询。
      }
    }
    
  • 通过 postmsg-rpc 库主动发送消息获取 data。
    使用 react 代码的示例如下:

    import { caller } from 'postmsg-rpc'
    
    function App() {
      return (
        <div className="App">
          <button onClick={async () => {
            const getSearchContextData = caller('TLS/EmbedSearch/getLastSearchContext', {
              postMessage: (data, targetOrigin) => {
                document.querySelector('iframe').contentWindow.postMessage(data, targetOrigin);
              },
            })
            const searchContextData = await getSearchContextData()
            console.log(searchContextData);
          }}>
            主动发送消息获取
          </button>
          <iframe id="iframe" style={{ width: '100%', height: '100vh' }} src="***"></iframe>
        </div>
      );
    }
    
    export default App;
    

    其中,searchContextData 的数据格式如下:

    data: {
      topicId: "xxxxx-xxx" // 当前查询等 Topic ID。
      query: "xxx | select xxx" // 完整的检索分析语句。
      searchQuery: "xxx" // 检索语句部分。
      startTime: 17000033; // 查询开始时间(绝对时间)。
      endTime: 17000044; // 查询结束时间(绝对时间)。
      time: "now-5m,now" // 当次查询使用的时间 。
      sort: 'asc' // 查询排序。
      isAccurateQuery: false; // 是否为精确查询。
      isParseQuery: false; // 是否为短语查询。
    }
    

仪表盘页面

您可以通过如下方法获取仪表盘页面 postmessage 中的 dashboardHeight 参数,用于在内嵌页面指定 iframe 内嵌框架的高度。
您可以通过被动监听 message 事件获取 data,代码示例如下:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <iframe id="iframe" style="width: 100%; height: 100vh" src="***" frameborder="0"></iframe>
    <script>
      window.addEventListener('message', function(event) {
          const resp = event.data;
          if (resp.sender === 'TLS/Event/EmbedDashboard/dashBoardHeightChange') {
              console.log(resp.data.dashboardHeight);
          }
    });
    </script>
  </body></html>

其中,event.data的数据格式如下:

{
  sender: 'TLS/Event/EmbedDashboard/dashBoardHeightChange',
  // 唯一id
  id: uuid(),
  data: {
      dashboardHeight: 300,
  },
  // 兼容存量逻辑
  dashboardHeight: 300,
}

示例

示例 1

以下示例展示了第三方系统 Web 页面内嵌的日志服务检索分析页面,该页面设置了指定的 Topic 、检索分析语句、检索日志的时间范围;隐藏了左侧导航栏、页面标题栏、Topic 选择框、分享按钮及索引配置按钮。

  • 内嵌链接

    https://https://console.volcengine.com/tls/region:tls+cn-guangzhou/project/e783ddd1-f07e-404f-b167-915d04d6****/search?topicId=999ecfa1-9eed-4cb4-ac2e-e130f656****&time=now-5m,now&codebase64=KiB8IHNlbGVjdCAq&hideTitle=true&hideTopic=true&hideIndexBtn=true&hideLeftBar=true&hideShareBtn=true
    
  • 显示效果
    图片

示例 2

以下示例展示了第三方系统 Web 页面内嵌的日志服务仪表盘页面,该页面设置了日志的检索时间范围为近 1小时,隐藏了左侧导航栏、分享按钮和设置按钮。

  • 内嵌链接

    https://console.volcengine.com/tls/region:tls+cn-guangzhou/project/06178e6b-63f7-4245-987e-4e1dd555****/dashboard/f1ad1620-2baf-4f4a-b336-9864ec77****?&time=now-1h,now&hideLeftBar=true&hideShareBtn=true&hideSetting=true
    
  • 显示效果
    图片

示例3

以下示例展示了第三方系统 Web 页面内嵌的日志服务仪表盘页面,该页面设置了日志的检索时间范围为近 1小时,添加了临时过滤器shardid=1

  • 内嵌链接

    https://console.volcengine.com/tls/region:tls+cn-guangzhou/project/06178e6b-63f7-4245-987e-4e1dd555****/dashboard/f1ad1620-2baf-4f4a-b336-9864ec7****?tempFixedFilter-shardidFilter= AND shardid:1&time=now-1h%2Cnow
    
  • 显示效果
    图片