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}，其中 startTime 和 endTime 的格式为 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

  • 显示效果
    图片