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

日志服务控制台提供免登方式嵌入用户自有WEB页面,以支持用户快速方便对日志进行可视化查询分析,在此基础上,还提供了一系列UI定制参数以便与第三方WEB页面进行融合展示。

URL格式

所有UI参数都是以URL参数的形式进行显示控制,URL格式为:
https://sls4service.console.aliyun.com/next/project/${ProjectName}/{logsearch|savedsearch|dashboard}/${LogstoreName}/?参数1&参数2

例如,以下URL以原始日志查询页面为例,其中readOnly即为UI定制参数,表示隐藏页面上的所有编辑按钮入口。

https://sls4service.console.aliyun.com/next/project/projectaaa/logsearch/logstorebbb/?readOnly=true 
			
说明
  • ${ProjectName}${LogstoreName}之外的参数必须位于URL末尾的/?之后。
  • 支持同时设置多个参数,参数之间通过&连接。

公共参数

参数类型 参数名 类型 是否必须 说明 示例
隐藏边栏 hideTopbar boolean 用于隐藏上边栏。 hideTopbar=true
hideSidebar boolean 用于隐藏侧边栏。 hideSidebar=true
隐藏导航栏返回按钮 hiddenBack boolean 用于隐藏Logstore页面返回按钮。 hiddenBack=true
过滤显示导航栏资源列表 keyFilter json 用于过滤显示导航栏资源列表。支持过滤的资源类型为:
  • 日志库(logstore)
  • 快速查询(savedsearch)
  • 报表(dashboard)
说明
  • 通过-表示模糊匹配。
  • 格式为JSON类型,必须经encodeURI编码。
{"logstore":["logstore-xx"],"savedsearch":["savedsearch-xx"],"dashboard":["dashboard-xx"]}
时间选择器 queryTimeType long 指定查询的时间范围。
取值范围为:
  • 1~26:表示指定查询的时间范围为数字对应的区间,详细说明见下表。
  • 99:表示自定义时间范围。此时必须设置startTimeendTime
queryTimeType=1
startTime timestamp(date) 查询时间范围的起始时间。当queryTimeType设置为99时生效。 startTime=1547776643
endTime timestamp(date) 查询时间范围的结束时间。当queryTimeType设置为99时生效。 endTime=1547776731
queryTimeType 代表含义
1 1分钟(相对)
2 5分钟(相对)
3 15分钟(相对)
4 1小时(相对)
5 4小时(相对)
6 1天(相对)
7 1周(相对)
8 30天(相对)
9 本月(相对)
10 自定义(相对)
11 1分钟(整点)
12 15分钟(整点)
13 1小时(整点)
14 4小时(整点)
15 1天(整点)
16 1周(整点)
17 30天(整点)
18 今天(整点)
19 昨天(整点)
20 前天(整点)
21 本周(整点)
22 上周(整点)
23 本月(整点)
24 本季度(整点)
25 本年度(整点)
26 自定义(整点)
99 自定义时间,此时需要设置startTime和endTime。
  • 隐藏上边栏和侧边栏
    • URL
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?hideTopbar=true&hideSidebar=true
    • 示例效果
      为查询页面设置参数hideTopbar=true&hideSidebar=true,隐藏上边栏和侧边栏,显示效果如下:

  • 隐藏导航栏返回按钮
    • URL
      在URL中设置参数hiddenBack,在原始查询页面中隐藏左上角的返回按钮:
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?hiddenBack=true
    • 示例效果


  • 过滤导航栏资源列表
    • URL

      例如在URL中设置参数keyFilter,通过设置的json对象对左侧资源列表进行筛选。需要指定显示名称包含aegis-和名称为500osslog的日志库、包含oss的快速查询以及包含ddos的报表。

      原始JSON为("{"logstore":["aegis-","500osslog"],"savedserach":["oss"],"dashboard":["ddos"]}"),其中aegis-表示模糊匹配名称中包含aegis的所有日志库;500osslog表示精确匹配名称为500osslog的日志库,即通过-表示模糊匹配。

      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?keyFilter=%7B"logstore":%5B"aegis-","500osslog"%5D,"savedsearch":%5B"oss"%5D,"dashboard":%5B"ddos"%5D%7D 
    • 示例效果


  • 时间选择器
    • URL
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?queryTimeType=2
    • 示例效果


原始查询页面相关参数

参数名 类型 说明 是否必须
ProjectName string Project名称。
LogstoreName string Logstore名称。
queryString string 预先搜索的字符串。
readOnly boolean 隐藏Logstore页面编辑修改按钮,例如分享查询分析属性另存为快速查询另存为告警等。
encode string 为了避免queryString中出现特殊字符,可以使用encode=base64,此时queryStringbase64编码后的字符串。
例如:
  • 设置queryString
    • URL
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?queryString=* | select count(1) as pv ,status group by status
    • 示例效果


  • 设置readOnly
    • URL
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
    • 示例效果


快速查询页面相关参数

参数名 类型 说明 是否必须
ProjectName string Project名称。
savedSearchName string 快速查询名称。
  • URL
    https://sls4service.console.aliyun.com/next/project/${ProjectName}/savedsearch/${savedSearchName} 
    					
  • 示例效果


报表页面相关参数

参数名 类型 说明 是否必须
ProjectName string Project名称。
dashboardName string 仪表盘名称。
filters string 过滤条件,需要手动转码。

转码前格式为encodeURIComponent('filters=key1:value1&filters=key2:value2

例如,上式转码后为"filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2"
token JsonString 变量替换,需要手动转码。

转码前格式为encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]')

例如,上式转码后为"token%3D%5B%7B%22key%22%3A%20%22projectName%22%2C%22value%22%3A%221%22%7D%2C%20%7B%22key%22%3A%20%22xxx%22%2C%20%22value%22%3A%20%22yy%22%7D%5D"
readOnly boolean 隐藏仪表盘页面的编辑和设置按钮,例如编辑告警等按钮。
hiddenFilter boolean 是否隐藏过滤条件。
hiddenToken boolean 是否隐藏变量替换。
hiddenProject boolean 是否隐藏Project信息。
autoFresh string 报表定时刷新(如:30s5min,最小刷新间隔必须大于15秒)。
  • 在url中设置参数readOnly,使仪表盘页面为只读模式,即不可编辑。
    • URL:
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}/?readOnly=true 
    • 示例效果


  • 为仪表盘增加两个过滤条件:key1=value1和key2=value2,设置后,仪表盘中所有图表的查询分析语句会针对过滤条件进行一次过滤,然后继续执行查询语句中的条件。
    说明 需手动对filter参数转码。
    • URL:
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('filters=key1:value1&filters=key2:value2') 
    • 示例效果


  • 增加多个变量替换条件。
    说明 需手动对token参数转码。
    • URL:
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]') 
    • 示例效果


  • 在url中设置参数autoFresh,让dashboard每5分钟刷新一次:
    • URL:
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboard_name}/?autoFresh=5m
    • 示例效果:

报表页面高阶参数

由于iframe嵌入报表页面时候,无法确定iframe容器的高度,此时很有可能导致两层滚动条,包括:

  • 嵌入页面外层滚动条
  • iframe内部报表的滚动条


对于外层iframe的高度可以通过日志服务postmessage的dashboardHeight来获取,并设置为iframe的高度,从而避免该问题。

示例代码:
说明 示例代码中${projectName}等参数需要替换为真实值。
<!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/next/project/${projectName}/dashboard/${dashboardName}?hideTopbar=true&product=${productCode}">
</body>
</html>