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 filter the resources that are listed in the left-side navigation pane, use the following URL.

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

  In this case, you can set the value of the keyFilter parameter to a JSON object in the format of {"logstore":["aegis-","500osslog"],"savedserach":["oss"],"dashboard":["ddos"]}. The value aegis- indicates that all Logstores whose names contain aegis are queried in a fuzzy match. The value 500osslog indicates that the Logstore whose name is 500osslog is queried in an exact match. You can use a name and a hyphen (-) to specify a fuzzy match.

  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 

  
• To specify a time range of a query, use the following URL:

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

  

The following examples show the URL parameters and results:

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

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?queryString=${A Base64-encoded SQL statement}

• To hide the buttons such as the Edit and Alerts buttons, use the following URL:

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

  
• To hide the Data Transformation button, use the following URL:

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

  

The following example shows the URL parameters and result:

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

The following examples show the URL parameters and results:

• To hide edit buttons on a dashboard page, use the following URL. In this case, the dashboard page is not editable.

  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.

  After you specify the 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.

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('filters=key1:value1&filters=key2:value2') 

  
• To add multiple conditions to replace variables, use the following URL:

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]') 

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

  https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboard_name}?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	Manages Logstores.
template	string[]	No	Manages the Logstore list. For more information, see Table 4.
machineGroup	Object	No	Manages machine groups.
savedSearch	Object	No	Manages saved searches.
alert	Object	No	Manages alerts.
dashboard	Object	No	Manages dashboards.
etl	Object	No	Manages data transformation tasks.

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

If you embed an inline frame into a dashboard, the height of the inline frame cannot be calculated. The scroll bar of the dashboard and the scroll bar of the inline frame may appear at the same time. In this case, you can set advanced dashboard parameters to adjust the dashboard height.

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>