This topic describes how to set embedment parameters to customize the display effect of Log Service console pages when you embed the pages into a self-built website.

Log Service allows you to embed specific console pages into a self-built website and access these pages without logon. This simplifies visualized search and analysis of log data. In addition, Log Service provides custom parameters that allow you to integrate the console pages with third-party web pages.

URL encoding

All UI parameters are included in URLs that are formatted as follows: 
https://sls4service.console.aliyun.com/next/project/${ProjectName}/{logsearch|savedsearch|dashboard}/${LogstoreName}/?Parameter 1&Parameter 2

The following example shows the URL of the raw log query page. The readOnly parameter is a custom UI parameter that specifies whether to hide all edit buttons on the page. 

https://sls4service.console.aliyun.com/next/project/projectaaa/logsearch/logstorebbb/?readOnly=true
Note
  • All parameters except for ${ProjectName} and ${LogstoreName} must be placed after /? at the end of a URL.
  • You can set multiple parameters in a URL and separate them with an ampersand (&).
  • To use the dark theme, you can set the theme and sls_iframe parameters in the format of theme=dark&sls_iframe=true in the URL.

Common parameters

Feature Parameter Date type Required Description Example
Hide side bars hideTopbar Boolean No Specifies whether to hide the top navigation bar. hideTopbar=true
hideSidebar Boolean No Specifies whether to hide the left-side navigation pane. hideSidebar=true
Hide the 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
Filter the resources that are listed in the left-side navigation pane keyFilter JSON No Filters resources that are listed in the left-side navigation pane. The following resources can be filtered:
  • Logstores
  • Saved searches
  • Dashboards
Note
  • You can use a hyphen (-) to implement fuzzy match.
  • The parameter value must be in the JSON format and be encoded by using the encodeURI function.
{"logstore":["logstore-xx"],"savedsearch":["savedsearch-xx"],"dashboard":["dashboard-xx"]}
Time selector queryTimeType LONG No Specifies the time range for queries.
Valid values:
  • 1 to 26: Each integer in the interval indicates a time range. For more information, see the following table.
  • 99: indicates a custom time range. If you set queryTimeType to 99, you must specify the startTime and endTime parameters.
queryTimeType=1
startTime TIMESTAMP (DATE) No Specifies the start time for a query. This parameter can be specified only when the queryTimeType parameter is set to 99. startTime=1547776643
endTime TIMESTAMP (DATE) No Specifies the end time for a query. This parameter can be specified only when the queryTimeType parameter is set to 99. endTime=1547776731
queryTimeType Description
1 1 minute (You can specify the time range to the second.)
2 15 minutes (You can specify the time range to the second.)
3 1 hour (You can specify the time range to the second.)
4 4 hours (You can specify the time range to the second.)
5 1 day (You can specify the time range to the second.)
6 1 week (You can specify the time range to the second.)
7 30 days (You can specify the time range to the second.)
8 1 minute (You can specify the time range to the minute.)
9 15 minutes (You can specify the time range to the minute.)
10 1 hour (You can specify the time range to the hour.)
11 1 hour (You can specify the time range to the hour.)
12 4 hours (You can specify the time range to the hour.)
13 1 week (You can specify the time range to the day.)
14 30 days (You can specify the time range to the day.)
15 Today (You can specify the time range to the day.)
16 Yesterday (You can specify the time range to the day.)
17 The day before yesterday (You can specify the time range to the day.)
18 This week (You can specify the time range to the day.)
19 Last week (You can specify the time range to the day.)
20 This month (You can specify the time range to the day.)
21 This quarter (You can specify the time range to the day.)
22 Today (You can specify the time range to the second.)
23 5 minutes (You can specify the time range to the second.)
24 This year (You can specify the time range to the day.)
25 This month (You can specify the time range to the second.)
-2 A custom time range. You can specify the time range to the second. If you set queryTimeType to -2, you must specify the start and end parameters, for example, start:-10m,end:now.
-3 A custom time range. You can specify the time range to the minute, hour, or day. If you set queryTimeType to -3, you must specify the start and end parameters, for example, start:-2h,end:absolute.
99 A custom time range. If you set queryTimeType to 99, you must specify the startTime and endTime parameters. The parameter values are timestamps.
  • Hide sidebars.
    • URL
      To hide the top navigation bar and left-side navigation pane on the raw log query page, add hideTopbar=true&hideSidebar=true to the URL as follows: 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?hideTopbar=true&hideSidebar=true
    • Display effect Hide the top navigation bar
  • Hide the back button in the left-side navigation pane.
    • URL
      To hide the back button in the left-side navigation pane, set the hiddenBack parameter to true in the URL as follows: 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?hiddenBack=true
    • Display effect Hide the back button
  • Filter the resources that are listed in the left-side navigation pane.
    • URL

      To filter the resources listed in the left-side navigation pane, you can set the keyFilter parameter value in the JSON format in the URL. For example, you need to display 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 value of the keyFilter parameter to a JSON object as follows: {"logstore":["aegis-","500osslog"],"savedserach":["oss"],"dashboard":["ddos"]}. aegis- specifies that all Logstores whose names contain aegis are queried in fuzzy match. 500osslog specifies that the Logstore whose name is 500osslog is queried in exact match. You can use a hyphen (-) to implement fuzzy match. 
      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
    • Display effect Filter the resources that are listed in the left-side navigation pane
  • Configure a time selector.
    • URL 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?queryTimeType=2
    • Display effect Configure a time selector

Parameters of the raw log query page

Parameter Data type Description Required
ProjectName String The name of the project. Yes
LogstoreName String The name of the Logstore. Yes
queryString String The string used for a query. No
readOnly Boolean Specifies whether to hide the edit and modification buttons on the Logstores page, such as Share, Index Attributes, Save Search, and Save as Alert. No
encode String Specifies whether to encode a query string. To avoid special characters in the value of the queryString parameter, you can set the encode parameter to base64. Then the value of the queryString parameter becomes a Base64-encoded string. No
hiddenEtl Boolean Specifies whether to hide the Data Transformation button. No
hiddenShare Boolean Specifies whether to hide the Share button. No
hiddenIndexSetting Boolean Specifies whether to hide the Index Attributes button. No
hiddenSavedSearch Boolean Specifies whether to hide the Save Search button.
hiddenAlert Boolean Specifies whether to hide the Save as Alert button. No
hiddenQuickAnalysis Boolean Specifies whether to hide the Quick Analysis search bar. Default value: False. No
hiddenDownload Boolean Specifies whether to hide the download icon. No
keyDispalyMode String 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.
 No
  • Specify the queryString parameter in the URL.
    • URL 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?queryString=${Base64-encoded SQL statements}
    • Display effectSpecify the queryString parameter
  • Specify the readOnly parameter in the URL.
    • URL 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
    • Display effectSpecify the readOnly parameter

Parameters of the saved search page

Parameter Data type Description Required
ProjectName String The name of the project. Yes
savedSearchName String The name of the saved search. Yes
  • URL 
    https://sls4service.console.aliyun.com/next/project/${ProjectName}/savedsearch/${savedSearchName}
  • Display effect Saved search

Parameters of the dashboard page

Parameter Data type Description Required
ProjectName String The name of the project. Yes
dashboardName String The name of the dashboard. Yes
filters String The filter conditions. The value of this parameter must be manually encoded.

The original format is encodeURIComponent('filters=key1:value1&filters=key2:value2').

After being encoded, the format is "filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2". 		No
token JsonString The variables to be replaced. The value of this parameter must be manually encoded.

The original format is encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]').

After being encoded, the format is "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". 		No
readOnly Boolean Specifies whether to hide the edit and setting buttons on the dashboard page, such as Edit and Alerts. No
hiddenFilter Boolean Specifies whether to hide the filter conditions. No
hiddenToken Boolean Specifies whether to hide the variables to be replaced. No
hiddenProject Boolean Specifies whether to hide the project information. No
autoFresh String The interval at which the dashboard page is refreshed, such as 30s or 5min. The minimum refresh interval is 15 seconds. No
  • Specify the readOnly parameter in the URL to hide edit buttons on the dashboard page.
    • URL 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}/?readOnly=true
    • Display effect Read-only dashboards
  • Specify two filter conditions in the URL for a dashboard: key 1=value 1 and key 2=value 2. After you specify two filter conditions in the URL, the filter conditions are applied for all charts in the dashboard. The query statements of all charts are executed after log data is filtered based on the filter conditions.
    Note You must encode the value of the filters parameter manually.
    • URL 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('filters=key1:value1&filters=key2:value2')
    • Display effect Filter dashboards
  • Specify the token parameter in the URL to add multiple conditions that replace variables.
    Note You must encode the value of the token parameter manually.
    • URL 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]')
    • Display effect 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.
    • URL 
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboard_name}/?autoFresh=5m
    • Display effectAutomatic refresh

Advanced parameters of the dashboard page

If you embed an iframe into the dashboard page, the height of the iframe cannot be determined. In this case, two scroll bars may appear at the same time as follows:

  • The scroll bar of the dashboard page outside the iframe
  • The scroll bar on the dashboard page in the iframe

To resolve this issue, you can use the postMessage method of Log Service to obtain the height of the dashboard page and specify the height as the height of the iframe.

Sample code:
Note You must replace parameters such as ${projectName} with values based on your business needs. 
<! 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/next/project/${projectName}/dashboard/${dashboardName}?hideTopbar=true&product=${productCode}">
</body>
</html>