日志服务提供控制台内嵌功能，即支持将检索分析页面和仪表盘页面嵌入到外部系统的自建 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

UI 参数

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

检索分析页面参数

参数	数据类型	是否必选	示例	说明
topicId	String	必选	c5c0a2a1-****	指定日志主题 ID。您可以在日志服务控制台中查看日志主题 ID。日志主题相关详情请参考日志主题。
topicType	String	可选	metric	指定主题类型。仅使用指标主题时，需配置该参数，并将topicId设置为指标主题 ID。指标主题相关详情请参考指标主题。示例： https://console.volc-embed.com/tls/region:tls+${regionId}/project/${projectId}/search?topicId=c5c0a2a1-8431-4370****&topicType=metric 说明指标主题为邀测功能，若有相关业务需求，可联系客户经理开通白名单。
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：（默认）不隐藏。
hideCharts	string[]	可选	hideCharts=["chartId"]	隐藏指定图表 ID 的图表。
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、isPhraseQuery 等参数，从而在内嵌页面实现一键复制查询相关的日志主题、检索分析语句、检索时间等信息。

被动监听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, // 是否为精确查询。
isPhraseQuery: 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, // 是否为精确查询。
isPhraseQuery: false // 是否为短语查询。
}

仪表盘页面

您可以通过如下方法获取仪表盘页面 postmessage 中的 dashboardHeight 参数，用于在内嵌页面指定 iframe 内嵌框架的高度。

您可以通过被动监听 message 事件获取 data，代码示例如下：

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

示例

示例 1

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

内嵌链接

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

显示效果

refreshTime 枚举值	说明
15s	15秒
1m	1分钟
5m	5分钟
10m	10分钟
30m	30分钟
60m	60分钟