Customize the UI of embedded pages

UI parameters are encoded in the URL based on the following format:

https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?Parameter1&Parameter2

The following examples show the URL parameters and results:

• To hide the back button, Switch button, Overview tab, and the Alibaba Cloud title bar, use the following URL:

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenBack=true&hiddenChangeProject=true&hiddenOverview=true&hideTopbar=true

  
• To hide the left-side navigation pane, use the following URL:

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

  
• To hide the back button on the Search & Analysis page of a specified Logstore, use the following URL:

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

  
• To set the query and analysis time, use the following URL:

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

  

The following examples show the URL parameters and results:

• To set a string for a query, use the following URL:

  For example, the *|select count(*) statement is KnxzZWxlY3QgY291bnQoKik= after it is encoded in Base64.

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?encode=base64&queryString=KnxzZWxlY3QgY291bnQoKik=

  
• To hide buttons such as Index Attributes and Save as Alert, use the following URL:

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

  

The following example shows the URL parameters and result:

https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/savedsearch/${savedsearchID}

The following examples show the URL parameters and results:

• To enable read-only mode for the dashboard page, use the following URL:

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?readOnly=true 

  
• To add two filter conditions of key 1=value 1 and key 2=value 2, use the following URL. The filter condition filters=key1:value1&filters=key2:value2 is transcoded to filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2.

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2

  
• To add multiple conditions projectname=1 and region=hangzhou to replace variables, use the following URL. token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}] is transcoded 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%22region%22%2C%20%22value%22%3A%20%22hangzhou%22%7D%5D.

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?token%3D%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

  
• To refresh a dashboard every 5 minutes, use the following URL:

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardId}?autoFresh=5m

  

The following example shows the related parameters in the treeConfig parameter:

{
    "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"
        ]
    }
}

Table 2. Parameters of treeConfig

Parameter	Type	Required	Description
logstore	object	No	Specifies whether to display the nodes in the left-side navigation pane of the Logstores tab.
template	string[]	No	Specifies whether to display the icons on the Logstores tab. For more information, see Table 4.
machineGroup	object	No	Specifies whether to display the nodes in the left-side navigation pane of the Machine Groups tab.
savedSearch	object	No	Specifies whether to display the nodes in the left-side navigation pane of the Saved Search tab.
alert	object	No	Specifies whether to display the nodes in the left-side navigation pane of the Alerts tab.
dashboard	object	No	Specifies whether to display the nodes in the left-side navigation pane of the Dashboard tab.
etl	object	No	Specifies whether to display the nodes in the left-side navigation pane of the Data Transformation tab.

Table 3. Resource parameters

Parameter	Type	Required	Description
search	boolean	No	Specifies whether to display the search box. Default value: true. This value indicates that the search box is displayed.
resourceList	String[]	No	Displays the resource list of the specified resource. If this parameter is set to an empty array, an empty list is displayed. If this parameter is unspecified, all resources are displayed in the list based on an exact match. By default, all resources of the list are displayed.
expand	boolean	No	Specifies whether to expand the list. Default value: false. This value indicates that the list is not expanded. This parameter is valid only for the Logstore list.

Table 4. Parameters of template

Parameter	Type	Required	Description
favor	string	No	The watchlist.
logtail	string	No	The Logtail configurations.
import	string	No	The data import configurations.
etl	string	No	The data transformation tasks.
savedsearch	string	No	The saved searches.
alert	string	No	The alerts.
export	string	No	The data export tasks.
consumergroup	string	No	The data consumption.
dashboard	string	No	The visual dashboards.

To customize the left-side navigation pane, use the following URL:

https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?treeconfig=eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19&hiddenBack=true&hiddenChangeProject=true&hiddenOverview=true&hideTopbar=true&treeEncode=base64&ignoreTabLocalStorage=true

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. The following sample code is used:

<!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>