全部產品
Search
文件中心

Simple Log Service:配置控制台內嵌參數

更新時間:Oct 25, 2024

通過設定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-popupsallow-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

本周(相對)

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編碼後的查詢和分析語句。

例如*|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

定義左側導航樹狀結構。如果設定treeEncodebase64,則需先使用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>