設定控制台內嵌參數調整內嵌頁面的顯示效果 - Simple Log Service

通過設定Log Service控制台內嵌參數，可調整內嵌頁面的顯示效果。

Log Service提供免登方式嵌入自建的Web頁面，支援您快速方便地對日誌進行查詢和分析。在此基礎上，還提供了一系列UI參數與第三方自建Web頁面進行融合展示。通過免登方式嵌入自建Web頁面的具體操作，請參見控制台內嵌及分享。

注意事項

Log Service控制台是以iframe方式被內嵌到其他Web頁面。預設情況下，開啟瀏覽器新視窗（例如單擊文檔連結）和下載日誌功能會被瀏覽器攔截，無法使用，需要您手動修改iframe屬性配置。

在iframe內，Log Service控制台的訪問連結單擊互動會被瀏覽器的安全性原則攔截，您需要在iframe的sandbox欄位中添加allow-popups。
```
<iframe
  src="https://sls4service.console.aliyun.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups"
/>
```
在iframe內，Log Service控制台提供的日誌下載功能會被瀏覽器的安全性原則攔截，您需要在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指定查詢的時間範圍說明。取值範圍如下： 1~26：指定查詢和分析的時間範圍為數字對應的區間。 -2：自訂（相對）。此時必須配置start和end。例如：start:-10m,end:now。 -3：自訂（整點）。此時必須配置start和end。例如：start:-2h,end:absolute。 99：自訂時間範圍。此時必須設定startTime和endTime，且只能配置為時間戳記。	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	本周（相對）
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編碼後的查詢和分析語句。例如`\|select count()`語句經過BASE 64編碼後為`KnxzZWxlY3QgY291bnQoKik=`。	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增強按鈕。	hiddenModeSwitch=true
keyDispalyMode	string	否	內容列顯示。 single：整行。 multi：換行。	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

設定readOnly

使用如下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	否	變數替換，需要使用`encodeURIComponent()`函數轉碼。例如`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`	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	否	過濾條件，需要使用`encodeURIComponent()`函數轉碼。例如`filters=key1:value1&filters=key2:value2`經過轉碼後為`filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2`。	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完成轉碼。

例如{"logstore":{"expand":true,"resourceList":["delete-log"],"template":["savedsearch","alert"]}}經過BASE64轉碼後為eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19。

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的高度可以通過Log Servicepostmessage的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>