通過設置日志服務控制臺內嵌參數,可調整內嵌頁面的顯示效果。
日志服務提供免登方式嵌入自建的Web頁面,支持您快速方便地對日志進行查詢和分析。在此基礎上,還提供了一系列UI參數與第三方自建Web頁面進行融合展示。通過免登方式嵌入自建Web頁面的具體操作,請參見控制臺內嵌及分享。
注意事項
日志服務控制臺是以iframe方式被內嵌到其他Web頁面。默認情況下,打開瀏覽器新窗口(例如單擊文檔鏈接)和下載日志功能會被瀏覽器攔截,無法使用,需要您手動修改iframe屬性配置。
在iframe內,日志服務控制臺的訪問鏈接單擊交互會被瀏覽器的安全策略攔截,您需要在iframe的sandbox字段中添加
allow-popups
。<iframe src="https://sls4service.console.aliyun.com/lognext/project/**..." sandbox="allow-scripts allow-popups" />
在iframe內,日志服務控制臺提供的日志下載功能會被瀏覽器的安全策略攔截,您需要在iframe的sandbox字段中添加
allow-popups
和allow-downloads
。<iframe src="https://sls4service.console.aliyun.com/lognext/project/**..." sandbox="allow-scripts allow-popups allow-downloads" />
URL格式
所有UI參數均通過URL格式進行控制,URL格式示例如下:
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?參數1&參數2
除${ProjectName}、${LogstoreName}、${savedsearchID}和${dashboardID}之外的參數必須位于URL末尾的問號(?)之后。
支持同時設置多個參數,參數之間通過and(&)連接。
增加參數theme=dark&sls_iframe=true,可將界面設置為黑色主題。
公共參數
使用公共參數設置控制臺頁面。
參數名 | 類型 | 是否必選 | 說明 | 示例 |
hiddenBack | boolean | 否 | 隱藏當前Project控制臺的返回按鈕。 | hiddenBack=true |
hiddenChangeProject | boolean | 否 | 隱藏切換Project功能。 | hiddenChangeProject=true |
hiddenOverview | boolean | 否 | 隱藏Project概覽入口。 | hiddenOverview=true |
hideSidebar | boolean | 否 | 隱藏左側導航欄 | hideSidebar=true |
hideTopBar | boolean | 否 | 隱藏頂部導航欄 | hideTopBar=true |
isShare | boolean | 否 | 隱藏左側導航欄和其他Tab頁 | isShare=true |
ignoreTabLocalStorage | boolean | 否 | 關閉Tab訪問的歷史記錄。 | ignoreTabLocalStorage=true |
queryTimeType | long | 否 | 指定查詢和分析的時間范圍。更多信息,請參見queryTimeType指定查詢的時間范圍說明。取值范圍如下:
| queryTimeType=1 |
startTime | timestamp(date) | 否 | 指定查詢時間范圍的起始時間。當queryTimeType設置為99時生效。 | startTime=1547776643 |
endTime | timestamp(date) | 否 | 指定查詢時間范圍的結束時間。當queryTimeType設置為99時生效。 | endTime=1547776731 |
表 1. queryTimeType指定查詢的時間范圍說明
queryTimeType | 代表含義 |
1 | 1分鐘(相對) |
2 | 15分鐘(相對) |
3 | 1小時(相對) |
4 | 4小時(相對) |
5 | 1天(相對) |
6 | 1周(相對) |
7 | 30天(相對) |
8 | 1分鐘(整點) |
9 | 15分鐘(整點) |
10 | 1小時(整點) |
11 | 4小時(整點) |
12 | 1天(整點) |
13 | 1周(整點) |
14 | 30天(整點) |
15 | 今天(整點) |
16 | 昨天(整點) |
17 | 前天(整點) |
18 | 本周(整點) |
19 | 上周(整點) |
20 | 本月(整點) |
21 | 本季度(整點) |
22 | 今天(相對) |
23 | 5分鐘(相對) |
24 | 今年(整點) |
25 | 本月(相對) |
26 | 上月(整點) |
27 | 本周(相對) |
28 | 5分鐘(整點) |
29 | 昨天(相對) |
30 | 前天(相對) |
31 | 上周(相對) |
32 | 上月(相對) |
33 | 本季度(相對) |
34 | 本年度(相對) |
99 | 自定義時間,此時要傳入startTime和endTime。 |
URL參數及效果示例如下所示:
使用如下URL隱藏當前Project控制臺的返回按鈕、Project切換按鈕、Project概覽入口。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenBack=true&hiddenChangeProject=true&hiddenOverview=true
使用如下URL隱藏當前Project控制臺的返回按鈕。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenBack=true
使用如下URL設置查詢和分析時間。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?queryTimeType=3
Logstore查詢和分析頁面相關參數
使用Logstore查詢和分析頁面相關參數設置Logstore查詢和分析頁面。
參數名 | 類型 | 是否必選 | 說明 | 示例 |
ProjectName | string | 是 | Project名稱。 | website-01 |
LogstoreName | string | 是 | Logstore名稱。 | logstore01 |
queryString | string | 否 | 使用BASE 64編碼后的查詢和分析語句。 例如 | KnxzZWxlY3QgY291bnQoKik= |
readOnly | boolean | 否 | 隱藏編輯、修改按鈕,例如分享、查詢分析屬性,另存為快速查詢、另存為告警等。 | readOnly=true |
encode | string | 否 | 為了避免queryString中出現特殊字符,建議使用encode=base64,此時queryString為base64編碼后的字符串。 | encode=base64 |
hiddenEtl | boolean | 否 | 隱藏當前Logstore的數據加工按鈕。 | hiddenEtl=true |
hiddenShare | boolean | 否 | 隱藏當前Logstore的分享按鈕。 | hiddenShare=true |
hiddenIndexSetting | boolean | 否 | 隱藏當前Logstore的索引設置按鈕。 | hiddenIndexSetting=true |
hiddenSavedSearch | boolean | 否 | 隱藏當前Logstore的快速查詢按鈕。 | hiddenSavedSearch=true |
hiddenAlert | boolean | 否 | 隱藏當前Logstore的告警按鈕。 | hiddenAlert=true |
hiddenQuickAnalysis | boolean | 否 | 默認收起快速分析欄。 | hiddenQuickAnalysis=true |
hiddenDownload | boolean | 否 | 隱藏當前Logstore的下載功能。 | hiddenDownload=true |
hiddenModeSwitch | boolean | 否 | 隱藏當前Logstore的SQL增強按鈕和Scan掃描按鈕。 | hiddenModeSwitch=true |
keyDispalyMode | string | 否 | 內容列顯示。
| keyDispalyMode=single |
hiddenLogChart | boolean | 否 | 隱藏當前Logstore的統計圖表頁簽。 | hiddenLogChart=true |
hiddenLogReduce | boolean | 否 | 隱藏當前Logstore的日志聚類頁簽。 | hiddenLogReduce=true |
hiddenColSetting | boolean | 否 | 隱藏左側字段列 | hiddenColSetting=true |
URL參數及效果示例如下所示:
使用如下URL設置查詢和分析語句。
例如
*|select count(*)
語句經過BASE 64編碼后為KnxzZWxlY3QgY291bnQoKik=
。https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?encode=base64&queryString=KnxzZWxlY3QgY291bnQoKik=
使用如下URL隱藏編輯、修改相關的按鈕,例如查詢分析屬性、另存為告警等。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
使用如下URL隱藏Logstore的統計圖表和日志聚類頁簽。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenLogChart=true&hiddenLogReduce=true
Logstore快速查詢頁面相關參數
使用Logstore快速查詢頁面相關參數設置快速查詢頁面。
參數名 | 類型 | 是否必選 | 說明 | 示例 |
ProjectName | string | 是 | Project名稱。 | website-01 |
savedSearchName | string | 否 | 快速查詢名稱。 | quick-search01 |
savedsearchID | string | 是 | 快速查詢ID。 說明 您在創建快速查詢后,可以在URL中獲取快速查詢ID。更多信息,請參見獲取快速查詢ID。 | savedsearch-1621845672511-314813 |
URL參數及效果示例如下所示:
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/savedsearch/${savedsearchID}
儀表盤相關參數
使用儀表盤相關參數設置儀表盤頁面。
參數名 | 類型 | 是否必選 | 說明 | 示例 |
ProjectName | string | 是 | Project名稱。 | website-01 |
dashboardName | string | 否 | 儀表盤名稱。 | 網站分析日志 |
dashboardID | string | 是 | 儀表盤ID。 說明 您在創建儀表盤后,可以在URL中獲取儀表盤ID。更多信息,請參見ListDashboard。 | dashboard-1609817292009-742588 |
isShare | boolean | 否 | 儀表盤是否是通過分享查看的,為true的時候只展示儀表盤ui同時隱藏分享功能按鈕 | isShare=true |
token | JsonString | 否 | 變量替換,需要使用 例如 | token=%5B%7B%22key%22%3A%20%22projectname%22%2C%22value%22%3A%221%22%7D%2C%20%7B%22key%22%3A%20%22region%22%2C%20%22value%22%3A%20%22hangzhou%22%7D%5D |
readOnly | boolean | 否 | 隱藏儀表盤頁面中的編輯、設置相關的按鈕,例如編輯、告警等。 | readOnly=true |
openPsql | boolean | 否 | 開啟增強sql | openPsql=true |
autoFresh | string | 否 | 報表定時刷新,例如:30s、5min,最小刷新間隔必須大于15s。 | autoFresh=5m |
filters | string | 否 | 過濾條件,需要使用 例如 | filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2 |
hiddenFilter | boolean | 否 | 隱藏過濾條件。 | hiddenFilter=true |
fixedFilter | boolean | 否 | 固定過濾條件,禁止刪除修改 | fixedFilter=true |
disableFilterAndToken | boolean | 否 | 禁用過濾器和變量替換 | disableFilterAndToken=true |
fixedToken | boolean | 否 | 固定變量替換,禁止刪除修改 | fixedToken=true |
hiddenToken | boolean | 否 | 隱藏變量替換。 | hiddenToken=true |
hiddenProject | boolean | 否 | 隱藏Project信息。 | hiddenProject=true |
hiddenEdit | boolean | 否 | 隱藏編輯按鈕。 | hiddenEdit=true |
hiddenReport | boolean | 否 | 隱藏訂閱按鈕。 | hiddenReport=true |
hiddenTitleSetting | boolean | 否 | 隱藏標題設置按鈕。 | hiddenTitleSetting=true |
hiddenReset | boolean | 否 | 隱藏重置時間按鈕。 | hiddenReset=true |
hiddenModeSwitch | boolean | 否 | 隱藏SQL增強按鈕。 | hiddenModeSwitch=true |
hiddenAlert | boolean | 否 | 隱藏另存為告警 | hiddenAlert=true |
hiddenSearch | boolean | 否 | 隱藏預覽查詢語句 | hiddenSearch=true |
hiddenShare | boolean | 否 | 隱藏topbar的分享按鈕(分享鏈接和發送儀表盤) | hiddenShare=true |
hiddenPSql | boolean | 否 | 隱藏 sql增強按鈕 | hiddenPSql=true |
hiddenFullScreen | boolean | 否 | 隱藏topbar的顯示器全屏和窗口全屏 | hiddenFullScreen=true |
hiddenSelectTime | boolean | 否 | 隱藏topbar的儀表盤時間選擇按鈕 | hiddenSelectTime=true |
hiddenChartTime | boolean | 否 | 隱藏單個圖表的時間顯示(標題后面) | hiddenChartTime=true |
hiddenChartMenus | boolean | 否 | 隱藏圖表右上角下拉菜單 | hiddenChartMenus=true |
hiddenTitle | boolean | 否 | 隱藏儀表盤標題 | hiddenTitle=true |
hiddenTopBar | boolean | 否 | 隱藏儀表盤的頭部標題和所有操作欄 | hiddenTopBar=true |
hiddenCopy | boolean | 否 | 隱藏另存為按鈕 | hiddenCopy=true |
hiddenSurvey | boolean | 否 | 隱藏問卷入口 | hiddenSurvey=true |
hiddenDrilldown | boolean | 否 | 隱藏儀表盤編輯時交互事件配置 tab | hiddenDrilldown=true |
hiddenFieldConfig | boolean | 否 | 隱藏儀表盤編輯時的字段配置 tab | hiddenFieldConfig=true |
disableViewChart | boolean | 否 | 隱藏單個chart的查看操作 | disableViewChart=true |
URL參數及效果示例如下所示:
使用如下URL使儀表盤頁面為只讀模式。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?readOnly=true
使用如下URL為儀表盤增加兩個過濾條件key1=value1和key2=value2。其中,過濾條件
filters=key1:value1&filters=key2:value2
經過轉碼后為filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2
。https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2
使用如下URL增加多個變量替換條件projectname=1和region=hangzhou。其中
token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}]
經過轉碼后為token=%5B%7B%22key%22%3A%20%22projectname%22%2C%22value%22%3A%221%22%7D%2C%20%7B%22key%22%3A%20%22region%22%2C%20%22value%22%3A%20%22hangzhou%22%7D%5D
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?token=%5B%7B%22key%22%3A%20%22projectname%22%2C%22value%22%3A%221%22%7D%2C%20%7B%22key%22%3A%20%22region%22%2C%20%22value%22%3A%20%22hangzhou%22%7D%5D
使用如下URL使儀表盤每5分鐘刷新一次。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardId}?autoFresh=5m
樹狀結構參數
樹狀結構參數用于定義控制臺的左側導航欄。
參數名 | 類型 | 是否必選 | 說明 | 示例 |
treeConfig | JSON | 否 | 定義左側導航樹狀結構。如果設置treeEncode為base64,則需先使用BASE64完成轉碼。 例如 | eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19 |
treeEncode | string | 否 | treeConfig的編碼方式。默認為空,表示不編碼。如果要編碼,僅支持BASE64。 | treeEncode=base64 |
treeConfig參數完整示例如下所示:
{
"logstore": {
"search": true,
"expand": true,
"resourceList": [
"L1",
"L2"
],
"template": [
"favor",
"logtail",
"import",
"etl",
"savedsearch",
"alert",
"export",
"consumergroup",
"dashboard"
]
},
"machineGroup": {
"search": true,
"resourceList": [
"m1",
"m2"
]
},
"savedSearch": {
"search": true,
"resourceList": [
"s1",
"s2"
]
},
"alarm": {
"search": true,
"resourceList": [
"a1",
"a2"
]
},
"dashboard": {
"search": true,
"resourceList": [
"d1",
"d2"
]
},
"etl": {
"search": true,
"resourceList": [
"e1",
"e2"
]
}
}
表 2. treeConfig參數說明
參數名 | 類型 | 是否必選 | 說明 |
logstore | object | 否 | 用于控制Logstore列表中的資源入口。 |
template | string[] | 否 | 用于控制Logstore列表中的一些功能入口。更多信息,請參見template參數說明。 |
machineGroup | object | 否 | 用于控制機器組列表中的資源入口。 |
savedSearch | object | 否 | 用于控制快速查詢列表中的資源入口。 |
alert | object | 否 | 用于控制告警列表中的資源入口。 |
dashboard | object | 否 | 用于控制儀表盤列表中的資源入口。 |
etl | object | 否 | 用于控制數據加工列表中的資源入口。 |
表 3. 資源相關參數說明
參數名 | 類型 | 是否必選 | 說明 |
search | boolean | 否 | 是否顯示搜索框。默認為true,表示顯示。 |
resourceList | String[] | 否 | 顯示當前資源的列表。如果為空數組,則顯示空列表;如果不設置該參數,則全部顯示,精準匹配。默認顯示全部列表。 |
expand | boolean | 否 | 是否展開列表。默認為false,表示不展開,僅針對Logstore列表有效。 |
表 4. template參數說明
參數名 | 類型 | 是否必選 | 說明 |
favor | string | 否 | 我的關注 |
logtail | string | 否 | Logtail配置 |
import | string | 否 | 數據導入 |
etl | string | 否 | 數據加工 |
savedsearch | string | 否 | 快速查詢 |
alert | string | 否 | 告警 |
export | string | 否 | 數據導出 |
consumergroup | string | 否 | 數據消費 |
dashboard | string | 否 | 可視化儀表盤 |
URL參數及效果示例如下所示:
使用如下URL設置左側導航欄。
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?treeconfig=eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19&hiddenBack=true&hiddenChangeProject=true&hiddenOverview=true&treeEncode=base64&ignoreTabLocalStorage=true
儀表盤高階參數
以iframe方式嵌入儀表盤頁面時,無法確定iframe的高度,有可能導致兩層滾動條,包括嵌入頁面外層滾動條和iframe內部報表的滾動條。此時,您可以使用儀表盤高階參數用于自適應儀表盤高度。
對于外層iframe的高度可以通過日志服務postmessage的dashboardHeight來獲取,并設置為iframe高度。示例代碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>POST message測試</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
iframe {
display: block;
width: 100%;
}
</style>
<body>
<script>
window.addEventListener('message',function(e){
console.log(e.data.dashboardHeight)
document.getElementById('test').style.height = e.data.dashboardHeight + 'px'
});
</script>
<div style="height: 700px;">somethings</div>
<iframe id="test" src="http://sls4service.console.aliyun.com/lognext/project/${projectName}/dashboard/${dashboardName}?product=${productCode}">
</body>
</html>