This topic describes how to set parameters to customize the UI of embedded Log Service console pages.

Log Service allows you to embed console pages in a user-created website without the need to log on to the service. This allows you to query and analyze logs with ease. Log Service also provides a set of UI parameters. You can set these parameters to customize the UI of console pages that are embed in a user-created website. For more information, see Embed pages and share log data.

URL format

All UI parameters are URL-encoded in the following format:
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/{logsearch|savedsearch|dashboard}/${LogstoreName}?Parameter 1&Parameter 2
Note
  • All parameters except for ${ProjectName} and ${LogstoreName} must follow /? at the end of a URL.
  • You can set multiple parameters in a URL. Separate these parameters with ampersands (&).
  • To use the dark theme, add theme=dark&sls_iframe=true to a URL.

Common parameters

UI Parameter Type Required Description Example
Left-side navigation pane hideSidebar boolean No Specifies whether to hide the left-side navigation pane. hideSidebar=true
Back button in the left-side navigation pane hiddenBack boolean No Specifies whether to hide the back button in the left-side navigation pane. hiddenBack=true
Resources that are listed in the left-side navigation pane keyFilter JSON No Filter resources that are listed in the left-side navigation pane. The following resources can be filtered:
  • Logstores
  • Saved searches
  • Dashboards
Note
  • Use a hyphen (-) to implement a fuzzy match.
  • The value of the parameter must be in the JSON format and encoded by using the encodeURI function.
{"logstore":["logstore-xx"],"savedsearch":["savedsearch-xx"],"dashboard":["dashboard-xx"]}
Time selector queryTimeType long No Specifies the time range of a query.
Valid values:
  • 1 to 26: Each value specifies a time range. For more information, see the following table.
  • -2: specifies a custom time range. You must set a start time and end time. For example, start:-10m,end:now.
  • -3: specifies a custom time frame. You must set a start time and end time. For example, start:-2h,end:absolute.
  • 99: specifies a custom time range. If you set queryTimeType to 99, the startTime and endTime parameters are required. You must set these parameters to timestamps.
queryTimeType=1
startTime TIMESTAMP (DATE) No Specifies the start time for a query. This parameter is available only when you set the queryTimeType parameter to 99. startTime=1547776643
endTime TIMESTAMP (DATE) No Specifies the end time of a query. This parameter is available only when you set the queryTimeType to 99. endTime=1547776731
Table 1. The following table lists the values from 1 to 26 of the queryTimeType parameter.
queryTimeType Description
1 1 minute (time range)
2 15 minutes (time range)
3 1 hour (time range)
4 4 hours (time range)
5 1 day (time range)
6 1 week (time range)
7 30 days (time range)
8 1 minute (time frame)
9 15 minutes (time frame)
10 1 hour (time frame)
11 1 hour (time frame)
12 4 hours (time frame)
13 1 week (time frame)
14 30 days (time frame)
15 This day (time frame)
16 Yesterday (time frame)
17 The day before yesterday (time frame)
18 This week (time frame)
19 Last week (time frame)
20 This month (time frame)
21 This quarter (time frame)
22 Today (time range)
23 5 minutes (time range)
24 This year (time frame)
25 This month (time range)
26 Last month (time frame)
URL parameters and examples:
  • To hide the top navigation bar and left-side navigation pane on the raw log query page, add hideTopbar=true&hideSidebar=true to a URL.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}/?hideSidebar=true
    • Example:Hide the left-side navigation pane
  • To hide the back button in the left-side navigation pane, add hiddenBack=true to a URL.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}/?hiddenBack=true
    • Example:Hide the back button in the left-side navigation pane
  • Filter the resources that are listed in the left-side navigation pane

    To filter the resources that are listed in the left-side navigation pane, add the keyFilter parameter to a URL. The value of the keyFilter parameter is a JSON object. For example, you need to show Logstores whose names contain aegis and a Logstore whose name is 500osslog, saved search items whose names contain oss, and dashboards whose names contain ddos.

    You can set the keyFilter parameter to the following JSON object: {"logstore":["aegis-","500osslog"],"savedserach":["oss"],"dashboard":["ddos"]}. In the JSON object, aegis- filters all Logstores whose names contain aegis, and 500osslog filters the Logstore whose name is 500osslog. You can use a hyphen (-) to implement a fuzzy match.

    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}/?keyFilter=%7B"logstore":%5B"aegis-","500osslog"%5D,"savedsearch":%5B"oss"%5D,"dashboard":%5B"ddos"%5D%7D 
    • Example:Filter the resources that are listed in the left-side navigation pane
  • Configure a time selector.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}/?queryTimeType=2
    • Example:Time selector

Parameters of the search and analysis page

Parameter Type Required Description Example
ProjectName string Yes The name of the project. None
LogstoreName string Yes The name of the Logstore. None
queryString string No The search string. queryString=${A Base64-encoded SQL statement}
readOnly boolean No Specifies whether to hide the edit and modification buttons on the Logstores page, such as Share, Index Attributes, Save Search, and Save as Alert. readOnly=true
encode string No Specifies whether to encode a query string. To avoid the use of special characters in the value of the queryString parameter, set the encode parameter to base64. Then, the value of the queryString parameter is changed to a Base64-encoded string. encode=base64
hiddenEtl boolean No Specifies whether to hide the Data Transformation button. hiddenEtl=ture
hiddenShare boolean No Specifies whether to hide the Share button. hiddenShare=ture
hiddenIndexSetting boolean No Specifies whether to hide the Index Attributes button. hiddenIndexSetting=ture
hiddenSavedSearch boolean No Specifies whether to hide the Save Search button. hiddenSavedSearch=ture
hiddenAlert boolean No Specifies whether to hide the Save as Alert button. hiddenAlert=ture
hiddenQuickAnalysis boolean No Specifies whether to hide the Quick Analysis search bar. Default value: false. hiddenQuickAnalysis=ture
hiddenDownload boolean No Specifies whether to hide the download icon. hiddenDownload=ture
keyDispalyMode string No Specifies the display mode of log entries.
  • Single: specifies that log entries are displayed in the single-line mode.
  • Multi: specifies that log entries are displayed in the multi-line mode.
keyDispalyMode=single
URL parameters and examples:
  • Set the queryString parameter.
    Sample URL:
    https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?queryString=${Base64-encoded SQL statements}
  • Set the readOnly parameter.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
    • Example:Set the readOnly parameter
  • Set the hiddenEtl parameter to hide the Data Transformation button.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenEtl=true
    • Example:Hide the Data Transformation button

Parameters of the saved search page

Parameter Type Required Description Example
ProjectName string Yes The name of the project. None
savedSearchName string Yes The name of the saved search. {savedSearchName}
URL parameters and examples:
  • Sample URL:
    https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/savedsearch/${savedSearchName}                   
  • Example:Saved search page

Common dashboard parameters

Parameter Type Required Description Example
ProjectName string Yes The name of the project. None
dashboardName string Yes The name of the dashboard. None
filters string No The filter conditions. The value of this parameter must be transcoded.

For example, the encodeURIComponent('filters=key1:value1&filters=key2:value2') function includes a string of filter conditions.

After you run the function, the string is changed to "filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2" format.
encodeURIComponent('filters=key1:value1&filters=key2:value2')
token JsonString No The variables to be replaced. The value of this parameter must be transcoded.

For example, the encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]') function includes a string of tokens.

After you run the function, the string is changed to "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".
encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]')
readOnly boolean No Specifies whether to hide the edit and setting buttons on the dashboard page, such as the Edit and Save as Alert buttons. readOnly=true
hiddenFilter boolean No Specifies whether to hide the filter conditions. hiddenFilter=ture
hiddenToken boolean No Specifies whether to hide the variables to be replaced. hiddenToken=ture
hiddenProject boolean No Specifies whether to hide the project information. hiddenProject=ture
hiddenEdit boolean No Specifies whether to hide the Edit button. hiddenEdit=ture
hiddenReport boolean No Specifies whether to hide the Subscribe button. hiddenReport=ture
hiddenTitleSeting boolean No Specifies whether to hide the Title Configuration button. hiddenTitleSeting=ture
hiddenReset boolean No Specifies whether to hide the Reset Time button. hiddenReset=ture
autoFresh string No The interval at which the dashboard is refreshed, for example, 30s or 5min. The minimum refresh interval is 15 seconds. autoFresh=5m
URL parameters and examples:
  • Specify the readOnly parameter in the URL to hide edit buttons on the dashboard page.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardId}/?readOnly=true 
    • Example:Read-only dashboards
  • Add the following filter conditions: key 1=value 1 and key 2=value 2. After you specify two filter conditions in the URL, the filter conditions are applied to all charts of the dashboard. The query statements of all charts are executed after log data is filtered based on the filter conditions.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('filters=key1:value1&filters=key2:value2') 
    • Example:Filter dashboards
  • Specify the token parameter in the URL to add multiple conditions that replace variables.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]') 
    • Example:Specify the token parameter in the URL to replace variables
  • Specify the autoFresh parameter in the URL to refresh the dashboard page every 5 minutes.
    • Sample URL:
      https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboard_name}/?autoFresh=5m
    • Example:Automatic update

Advanced dashboard parameters

If you embed an inline frame into a dashboard, the height of the inline frame cannot be calculated. The following scroll bars may appear at the same time:
  • The scroll bar of the dashboard
  • The scroll bar of the inline frame
Advanced dashboard parameters

To fix this issue, you can use the postMessage method of Log Service to obtain the height of the dashboard and specify the height for the inline frame.

Sample code:
<! DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>POST message test</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}?hideTopbar=true&product=${productCode}">
</body>
</html>