首页 日志服务 开发参考 可视化开发 配置控制台内嵌参数

配置控制台内嵌参数

更新时间: 2023-10-26 15:09:41

通过设置日志服务控制台内嵌参数,可调整内嵌页面的显示效果。

日志服务提供免登方式嵌入自建的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-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,可将界面设置为黑色主题。

公共参数

使用公共参数设置控制台页面。

参数名类型是否必选说明示例
hiddenBackboolean隐藏当前Project控制台的返回按钮。hiddenBack=true
hiddenChangeProjectboolean隐藏切换Project功能。hiddenChangeProject=true
hiddenOverviewboolean隐藏Project概览入口。hiddenOverview=true
ignoreTabLocalStorageboolean关闭Tab访问的历史记录。ignoreTabLocalStorage=true
queryTimeTypelong指定查询和分析的时间范围。更多信息,请参见queryTimeType指定查询的时间范围说明。取值范围如下:
  • 1~26:指定查询和分析的时间范围为数字对应的区间。
  • -2:自定义(相对)。此时必须配置start和end。例如:start:-10m,end:now。
  • -3:自定义(整点)。此时必须配置start和end。例如:start:-2h,end:absolute。
  • 99:自定义时间范围。此时必须设置startTime和endTime,且只能配置为时间戳。
queryTimeType=1
startTimetimestamp(date)指定查询时间范围的起始时间。当queryTimeType设置为99时生效。startTime=1547776643
endTimetimestamp(date)指定查询时间范围的结束时间。当queryTimeType设置为99时生效。endTime=1547776731
表 1. queryTimeType指定查询的时间范围说明
queryTimeType代表含义
11分钟(相对)
215分钟(相对)
31小时(相对)
44小时(相对)
51天(相对)
61周(相对)
730天(相对)
81分钟(整点)
915分钟(整点)
101小时(整点)
114小时(整点)
121天(整点)
131周(整点)
1430天(整点)
15今天(整点)
16昨天(整点)
17前天(整点)
18本周(整点)
19上周(整点)
20本月(整点)
21本季度(整点)
22今天(相对)
235分钟(相对)
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查询和分析页面。

参数名类型是否必选说明示例
ProjectNamestringProject名称。website-01
LogstoreNamestringLogstore名称。logstore01
queryStringstring使用BASE 64编码后的查询和分析语句。

例如*|select count(*)语句经过BASE 64编码后为KnxzZWxlY3QgY291bnQoKik=

KnxzZWxlY3QgY291bnQoKik=
readOnlyboolean隐藏编辑、修改按钮,例如分享查询分析属性另存为快速查询另存为告警等。readOnly=true
encodestring为了避免queryString中出现特殊字符,建议使用encode=base64,此时queryString为base64编码后的字符串。encode=base64
hiddenEtlboolean隐藏当前Logstore的数据加工按钮。hiddenEtl=true
hiddenShareboolean隐藏当前Logstore的分享按钮。hiddenShare=true
hiddenIndexSettingboolean隐藏当前Logstore的索引设置按钮。hiddenIndexSetting=true
hiddenSavedSearchboolean隐藏当前Logstore的快速查询按钮。hiddenSavedSearch=true
hiddenAlertboolean隐藏当前Logstore的告警按钮。hiddenAlert=true
hiddenQuickAnalysisboolean默认收起快速分析栏。hiddenQuickAnalysis=true
hiddenDownloadboolean隐藏当前Logstore的下载功能。hiddenDownload=true
hiddenModeSwitchboolean隐藏当前Logstore的SQL增强按钮和Scan扫描按钮hiddenModeSwitch=true
keyDispalyModestring内容列显示。
  • single:整行。
  • multi:换行。
keyDispalyMode=single
hiddenLogChartboolean隐藏当前Logstore的统计图表页签。hiddenLogChart=true
hiddenLogReduceboolean隐藏当前Logstore的日志聚类页签。hiddenLogReduce=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快速查询页面相关参数设置快速查询页面。

参数名类型是否必选说明示例
ProjectNamestringProject名称。website-01
savedSearchNamestring快速查询名称。quick-search01
savedsearchIDstring快速查询ID。
说明 您在创建快速查询后,可以在URL中获取快速查询ID。更多信息,请参见获取快速查询ID
savedsearch-1621845672511-314813
URL参数及效果示例如下所示:
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/savedsearch/${savedsearchID}
快速查询页

仪表盘相关参数

使用仪表盘相关参数设置仪表盘页面。

参数名类型是否必选说明示例
ProjectNamestringProject名称。website-01
dashboardNamestring仪表盘名称。网站分析日志
dashboardIDstring仪表盘ID。
说明 您在创建仪表盘后,可以在URL中获取仪表盘ID。更多信息,请参见ListDashboard
dashboard-1609817292009-742588
filtersstring过滤条件,需要使用encodeURIComponent()函数转码。

例如filters=key1:value1&filters=key2:value2经过转码后为filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2

filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2
tokenJsonString变量替换,需要使用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
readOnlyboolean隐藏仪表盘页面中的编辑、设置相关的按钮,例如编辑告警等。readOnly=true
hiddenFilterboolean隐藏过滤条件。hiddenFilter=true
hiddenTokenboolean隐藏变量替换。hiddenToken=true
hiddenProjectboolean隐藏Project信息。hiddenProject=true
hiddenEditboolean隐藏编辑按钮。hiddenEdit=true
hiddenReportboolean隐藏订阅按钮。hiddenReport=true
hiddenTitleSettingboolean隐藏标题设置按钮。hiddenTitleSetting=true
hiddenResetboolean隐藏重置时间按钮。hiddenReset=true
hiddenModeSwitchboolean隐藏SQL增强按钮和Scan扫描按钮hiddenModeSwitch=true
autoFreshstring报表定时刷新,例如:30s、5min,最小刷新间隔必须大于15s。autoFresh=5m
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
    自动更新

树状结构参数

树状结构参数用于定义控制台的左侧导航栏。

参数名类型是否必选说明示例
treeConfigJSON定义左侧导航树状结构。如果设置treeEncodebase64,则需先使用BASE64完成转码。

例如{"logstore":{"expand":true,"resourceList":["delete-log"],"template":["savedsearch","alert"]}}经过BASE64转码后为eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19

eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19
treeEncodestringtreeConfig的编码方式。默认为空,表示不编码。如果要编码,仅支持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参数说明
参数名类型是否必选说明
logstoreobject用于控制Logstore列表中的资源入口。
templatestring[]用于控制Logstore列表中的一些功能入口。更多信息,请参见template参数说明
machineGroupobject用于控制机器组列表中的资源入口。
savedSearchobject用于控制快速查询列表中的资源入口。
alertobject用于控制告警列表中的资源入口。
dashboardobject用于控制仪表盘列表中的资源入口。
etlobject用于控制数据加工列表中的资源入口。
表 3. 资源相关参数说明
参数名类型是否必选说明
searchboolean是否显示搜索框。默认为true,表示显示。
resourceListString[]显示当前资源的列表。如果为空数组,则显示空列表;如果不设置该参数,则全部显示,精准匹配。默认显示全部列表。
expandboolean是否展开列表。默认为false,表示不展开,仅针对Logstore列表有效。
表 4. template参数说明
参数名类型是否必选说明
favorstring我的关注
logtailstringLogtail配置
importstring数据导入
etlstring数据加工
savedsearchstring快速查询
alertstring告警
exportstring数据导出
consumergroupstring数据消费
dashboardstring可视化仪表盘

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>
阿里云首页 日志服务 相关技术圈