Customize the UI of embedded pages

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

Parameters are classified into the following categories:

• Common parameters
• Parameters of the search and analysis page
• Parameters of the saved search page
• Common dashboard parameters
• Advanced dashboard 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:
• 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:
• 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:
• Configure a time selector.
  • Sample URL:

    https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}/?queryTimeType=2

  • Example:

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:
• 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:
• 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 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:

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

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>