设置控制台内嵌参数调整内嵌页面的显示效果 - Simple Log Service

Configure los parámetros de incrustación de consola para personalizar la apariencia de las páginas de Log Service incrustadas en su sitio web.

Simple Log Service permite incrustar sus páginas de consola en su sitio web sin necesidad de iniciar sesión, lo que facilita la consulta y el análisis rápidos de registros. También proporciona parámetros de interfaz de usuario para integrar las páginas incrustadas con su sitio web. Para obtener instrucciones detalladas sobre cómo incrustar páginas en modo sin inicio de sesión, consulte Embed console pages and share log data.

Notas

La consola de Log Service se incrusta mediante un iframe. De forma predeterminada, las políticas de seguridad del navegador bloquean funciones como la apertura de nuevas ventanas y la descarga de registros. Para habilitar estas funciones, configure el atributo sandbox del iframe.

Las políticas de seguridad del navegador impiden que los enlaces dentro del iframe abran ventanas emergentes. Para permitir ventanas emergentes, agregue allow-popups al atributo sandbox del iframe.
```
<iframe
  src="https://sls4service.console.alibabacloud.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups"
/>
```
Estas políticas también bloquean las descargas de registros. Para permitir descargas, agregue tanto allow-popups como allow-downloads al atributo sandbox del iframe.
```
<iframe
  src="https://sls4service.console.alibabacloud.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups allow-downloads"
/>
```

Formato de URL

Todos los parámetros de la interfaz de usuario se especifican en la URL con el siguiente formato:

https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?parameter1&parameter2

Nota

Coloque todos los parámetros, excepto ${ProjectName}, ${LogstoreName}, ${savedsearchID} y ${dashboardID}, después del signo de interrogación (?) al final de la URL.
Utilice un signo et (&) para separar varios parámetros.
Para usar el tema oscuro, agregue theme=dark&sls_iframe=true a la URL.
Los siguientes parámetros de URL distinguen entre mayúsculas y minúsculas.

Parámetros comunes

Utilice los parámetros comunes para configurar la consola.

Parámetro	Tipo	Obligatorio	Descripción	Ejemplo
hiddenBack	boolean	No	Oculta el botón de retorno en la consola del proyecto actual.	hiddenBack=true
hiddenChangeProject	boolean	No	Oculta el control de cambio de proyecto.	hiddenChangeProject=true
hiddenOverview	boolean	No	Oculta el punto de entrada a la descripción general del proyecto.	hiddenOverview=true
hideSidebar	boolean	No	Oculta el panel de navegación izquierdo.	hideSidebar=true
hideTopbar	boolean	No	Oculta la barra de navegación superior.	hideTopbar=true
isShare	boolean	No	Oculta el panel de navegación izquierdo y otras pestañas.	isShare=true
ignoreTabLocalStorage	boolean	No	Deshabilita el historial de navegación de pestañas.	ignoreTabLocalStorage=true
queryTimeType	long	No	El intervalo de tiempo para consulta y análisis. Para obtener más información, consulte queryTimeType values. 1 a 26: Un intervalo de tiempo preestablecido identificado por su valor entero correspondiente. -2: Un intervalo de tiempo relativo personalizado. Requiere los parámetros start y end; por ejemplo, start:-10m,end:now. -3: Un marco de tiempo personalizado. Requiere los parámetros start y end; por ejemplo, start:-2h,end:absolute. 99: Un intervalo de tiempo personalizado. Requiere startTime y endTime como marcas de tiempo.	queryTimeType=1
startTime	timestamp	No	La hora de inicio del intervalo de tiempo de consulta. Solo surte efecto cuando queryTimeType se establece en 99.	startTime=1547776643
endTime	timestamp	No	La hora de fin del intervalo de tiempo de consulta. Solo surte efecto cuando queryTimeType se establece en 99.	endTime=1547776731
disablePublicShare	boolean	No	Oculta el botón Create Password-free Share en un panel.	disablePublicShare=true

Tabla 1. Valores de queryTimeType

queryTimeType	Descripción
1	1 minuto (relativo)
2	15 minutos (relativo)
3	1 hora (relativo)
4	4 horas (relativo)
5	1 día (relativo)
6	1 semana (relativo)
7	30 días (relativo)
8	1 minuto (marco de tiempo)
9	15 minutos (marco de tiempo)
10	1 hora (marco de tiempo)
11	4 horas (marco de tiempo)
12	1 día (marco de tiempo)
13	1 semana (marco de tiempo)
14	30 días (marco de tiempo)
15	Hoy (marco de tiempo)
16	Ayer (marco de tiempo)
17	Anteayer (marco de tiempo)
18	Esta semana (marco de tiempo)
19	La semana pasada (marco de tiempo)
20	Este mes (marco de tiempo)
21	Este trimestre (marco de tiempo)
22	Hoy (relativo)
23	5 minutos (relativo)
24	Este año (marco de tiempo)
25	Este mes (relativo)
26	El mes pasado (marco de tiempo)
27	Esta semana (relativo)
28	5 minutos (marco de tiempo)
29	Ayer (relativo)
30	Anteayer (relativo)
31	La semana pasada (relativo)
32	El mes pasado (relativo)
33	Este trimestre (relativo)
34	Este año (relativo)
99	Un intervalo de tiempo personalizado. Requiere los parámetros `startTime` y `endTime`.

A continuación se muestran ejemplos de cómo utilizar los parámetros de URL:

Para ocultar el botón de retorno, el control de cambio de proyecto y el punto de entrada a la descripción general del proyecto, utilice la siguiente URL:

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

Para ocultar el botón de retorno, utilice la siguiente URL:

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

Para establecer el intervalo de tiempo de consulta y análisis, utilice la siguiente URL:
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?queryTimeType=3
```
Cuando queryTimeType se establece en 3, el selector de intervalo de tiempo en la esquina superior derecha de la página de consulta muestra 1 hour (relative).

Parámetros de la página de consulta y análisis de logstore

Utilice los siguientes parámetros para configurar la página de consulta y análisis de un logstore.

Parámetro	Tipo	Obligatorio	Descripción	Ejemplo
ProjectName	string	Sí	El nombre del proyecto.	website-01
LogstoreName	string	Sí	El nombre del logstore.	logstore01
queryString	string	No	Una sentencia de consulta codificada en Base64. Por ejemplo, la sentencia de consulta`\|select count()` se codifica en Base64 como`KnxzZWxlY3QgY291bnQoKik=`.	KnxzZWxlY3QgY291bnQoKik=
readOnly	boolean	No	Oculta elementos editables de la interfaz de usuario, como Share, Index Attributes, Save as Saved Search y Save as Alert.	readOnly=true
encode	string	No	Para evitar caracteres especiales en queryString, utilice `encode=base64`. De este modo, queryString será una cadena codificada en Base64.	encode=base64
hiddenEtl	boolean	No	Oculta el botón de transformación de datos.	hiddenEtl=true
hiddenShare	boolean	No	Oculta el botón Share.	hiddenShare=true
hiddenIndexSetting	boolean	No	Oculta el botón de configuración de índices.	hiddenIndexSetting=true
hiddenSavedSearch	boolean	No	Oculta el botón de búsqueda guardada.	hiddenSavedSearch=true
hiddenAlert	boolean	No	Oculta el botón de alerta.	hiddenAlert=true
hiddenQuickAnalysis	boolean	No	Contrae el panel Quick Analysis de forma predeterminada.	hiddenQuickAnalysis=true
hiddenDownload	boolean	No	Oculta la función de descarga de registros.	hiddenDownload=true
hiddenModeSwitch	boolean	No	Oculta el botón Dedicated SQL.	hiddenModeSwitch=true
keyDispalyMode	string	No	El modo de visualización de la columna de contenido. `single`: Muestra cada registro en una sola línea. `multi`: Ajusta los registros largos en varias líneas.	keyDispalyMode=single
hiddenLogChart	boolean	No	Oculta la pestaña Graph.	hiddenLogChart=true
hiddenLogReduce	boolean	No	Oculta la pestaña LogReduce.	hiddenLogReduce=true
hiddenColSetting	boolean	No	Oculta la columna de campos del lado izquierdo.	hiddenColSetting=true
hiddenLogInspection	boolean	No	Oculta la pestaña Intelligent Health Check.	hiddenLogInspection=true

A continuación se muestran ejemplos de cómo utilizar los parámetros de URL:

Utilice la siguiente URL para especificar una sentencia de consulta.

Por ejemplo, la sentencia de consulta *|select count(*) se codifica en Base64 como KnxzZWxlY3QgY291bnQoKik=.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?encode=base64&queryString=KnxzZWxlY3QgY291bnQoKik=
```
Utilice la siguiente URL para ocultar elementos editables de la interfaz de usuario, como Index Attributes y Save as Alert.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
```
Utilice la siguiente URL para ocultar las pestañas Graph y LogReduce.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenLogChart=true&hiddenLogReduce=true
```
Con estas pestañas ocultas, la página de consulta y análisis solo muestra la pestaña de registros sin procesar.

Parámetros de búsqueda guardada de LogStore

Utilice los siguientes parámetros para personalizar una página de búsqueda guardada de LogStore.

Parámetro	Tipo	Obligatorio	Descripción	Ejemplo
ProjectName	string	Sí	El nombre del proyecto.	website-01
savedSearchName	string	No	El nombre de la búsqueda guardada.	quick-search01
savedsearchID	string	Sí	El ID de la búsqueda guardada. Nota Después de crear una búsqueda guardada, puede obtener su ID desde la URL. Para obtener más información, consulte Get a saved search ID.	savedsearch-1621845672511-314813

El siguiente ejemplo muestra el formato de la URL:

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

Esta URL abre la página de la búsqueda guardada especificada, como quick-search01, en el proyecto correspondiente, como website-01. La página muestra la sentencia de consulta guardada, como *|select count(*), y proporciona operaciones que incluyen transformación de datos, propiedades de consulta y análisis, guardar como alerta y modificar una búsqueda guardada.

Parámetros del panel

Utilice los siguientes parámetros para personalizar un panel.

Parámetro	Tipo	Obligatorio	Descripción	Ejemplo
ProjectName	string	Sí	Nombre del proyecto.	website-01
dashboardName	string	No	Nombre del panel.	Website Analysis Logs
dashboardID	string	Sí	ID del panel. Nota Después de crear un panel, puede obtener su ID desde la URL. Para más información, consulte ListDashboard.	dashboard-1609817292009-742588
isShare	boolean	No	Indica si el panel se consulta mediante un enlace compartido. Si se establece en `true`, solo se muestra la interfaz del panel y el botón Share se oculta.	isShare=true
token	JsonString	No	Token para el reemplazo de variables. El valor debe codificarse en URL con la función `encodeURIComponent()`. Por ejemplo, `token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}]` se codifica como `token=%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`.	token=%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
readOnly	boolean	No	Indica si se habilita el modo de solo lectura. Si se establece en `true`, se ocultan los botones relacionados con la edición, como Edit y Alerts.	readOnly=true
openPsql	boolean	No	Indica si se habilita la función Dedicated SQL.	openPsql=true
autoFresh	string	No	Intervalo de actualización automática del panel; por ejemplo, `30s` o `5min`. El intervalo mínimo debe ser superior a 15 s.	autoFresh=5m
filters	string	No	Condiciones de filtro que se aplicarán. El valor debe codificarse en URL con la función `encodeURIComponent()`. Por ejemplo, `filters=key1:value1&filters=key2:value2` se codifica como `filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2`.	filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2
hiddenFilter	boolean	No	Oculta la sección Filter Conditions.	hiddenFilter=true
fixedFilter	boolean	No	Impide la modificación o eliminación de las condiciones de filtro.	fixedFilter=true
disableFilterAndToken	boolean	No	Deshabilita las condiciones de filtro y el reemplazo de variables.	disableFilterAndToken=true
fixedToken	boolean	No	Impide la modificación o eliminación de la configuración de reemplazo de variables.	fixedToken=true
hiddenToken	boolean	No	Oculta la sección Variable Replacement.	hiddenToken=true
hiddenProject	boolean	No	Oculta la información del proyecto.	hiddenProject=true
hiddenEdit	boolean	No	Oculta el botón Edit.	hiddenEdit=true
hiddenReport	boolean	No	Oculta el botón Subscribe.	hiddenReport=true
hiddenTitleSetting	boolean	No	Oculta el botón Title Setting.	hiddenTitleSetting=true
hiddenReset	boolean	No	Oculta el botón Reset Time.	hiddenReset=true
hiddenModeSwitch	boolean	No	Oculta el botón Dedicated SQL.	hiddenModeSwitch=true
hiddenAlert	boolean	No	Oculta la opción Save as Alert.	hiddenAlert=true
hiddenSearch	boolean	No	Oculta la opción Preview Query.	hiddenSearch=true
hiddenShare	boolean	No	Oculta el botón Share en la barra superior. Este botón incluye las opciones Share Link y Send Dashboard.	hiddenShare=true
hiddenPSql	boolean	No	Oculta el botón Dedicated SQL.	hiddenPSql=true
hiddenFullScreen	boolean	No	Oculta las opciones de pantalla completa (Monitor Full Screen y Window Full Screen) en la barra superior.	hiddenFullScreen=true
hiddenSelectTime	boolean	No	Oculta el selector Time Range en la barra superior.	hiddenSelectTime=true
hiddenChartTime	boolean	No	Oculta la visualización del intervalo de tiempo de cada gráfico, que aparece después del título del gráfico.	hiddenChartTime=true
hiddenChartMenus	boolean	No	Oculta el menú desplegable en la esquina superior derecha de cada gráfico.	hiddenChartMenus=true
hiddenTitle	boolean	No	Oculta el título del panel.	hiddenTitle=true
hiddenTopBar	boolean	No	Oculta la barra superior del panel, que incluye el título y todos los botones de acción.	hiddenTopBar=true
hiddenCopy	boolean	No	Oculta el botón Save as.	hiddenCopy=true
hiddenSurvey	boolean	No	Oculta el punto de entrada de la encuesta.	hiddenSurvey=true
hiddenDrilldown	boolean	No	Oculta la pestaña Drill-down en el modo de edición del panel.	hiddenDrilldown=true
hiddenFieldConfig	boolean	No	Oculta la pestaña Field Configuration en el modo de edición del panel.	hiddenFieldConfig=true
disableViewChart	boolean	No	Oculta la opción View para gráficos individuales.	disableViewChart=true

A continuación se muestran ejemplos de cómo usar los parámetros de URL:

Para habilitar el modo de solo lectura en un panel, utilice la siguiente URL:
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?readOnly=true 
```
En el modo de solo lectura, la barra de herramientas superior del panel muestra únicamente botones relacionados con la visualización, como Time Range, Refresh, Reset Time, Share, Full Screen y Subscribe. Las funciones de edición no están disponibles.
Para agregar dos condiciones de filtro, key1:value1 y key2:value2, a un panel, utilice la siguiente URL. La cadena de condiciones de filtro filters=key1:value1&filters=key2:value2 se codifica como filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2
```
Después de establecer las condiciones de filtro, el panel muestra los datos filtrados por key1:value1.
Para agregar varias condiciones de reemplazo de variables, como projectname=1, utilice la siguiente URL. En este ejemplo, token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}] se codifica como token=%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.alibabacloud.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?token=%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
```

Para actualizar automáticamente el panel cada 5 minutos, utilice la siguiente URL:

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

Parámetros de estructura de árbol

Los parámetros de estructura de árbol configuran el panel de navegación izquierdo de la consola.

Parámetro

Tipo

Obligatorio

Descripción

Ejemplo

treeConfig

JSON

Define la estructura de árbol del panel de navegación izquierdo. Si establece el parámetro treeEncode en base64, el valor de este parámetro debe codificarse en Base64.

Por ejemplo, {"logstore":{"expand":true,"resourceList":["delete-log"],"template":["savedsearch","alert"]}} se codifica en Base64 como eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19.

eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19

treeEncode

string

Formato de codificación del parámetro treeConfig. El valor predeterminado es una cadena vacía, lo que indica que no hay codificación. La única codificación compatible es Base64.

treeEncode=base64

A continuación se muestra un ejemplo completo del parámetro treeConfig:

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

Tabla 2. Parámetros de treeConfig

Parámetro	Tipo	Obligatorio	Descripción
logstore	object	No	Controla las entradas de recursos en la lista de logstore.
template	string[]	No	Controla las entradas de funciones en la lista de logstore. Para más información, consulte template parameter values.
machineGroup	object	No	Controla las entradas de recursos en la lista de grupos de máquinas.
savedSearch	object	No	Controla las entradas de recursos en la lista de búsquedas guardadas.
alert	object	No	Controla las entradas de recursos en la lista de alertas.
dashboard	object	No	Controla las entradas de recursos en la lista de paneles.
etl	object	No	Controla las entradas de recursos en la lista de transformación de datos.

Tabla 3. Parámetros relacionados con recursos

Parámetro	Tipo	Obligatorio	Descripción
search	boolean	No	Indica si se muestra el cuadro de búsqueda. Valor predeterminado: `true`.
resourceList	String[]	No	Lista de recursos que se mostrarán. Solo se muestran los recursos cuyos nombres coinciden exactamente con una entrada de esta matriz. Si no se configura, se muestran todos los recursos del tipo correspondiente.
expand	boolean	No	Indica si se expande la lista de recursos. Valor predeterminado: `false`. Este parámetro solo aplica a la lista de logstore.

Tabla 4. Parámetros de template

Parámetro	Tipo	Obligatorio	Descripción
favor	string	No	watchlist
logtail	string	No	Configuración de Logtail
import	string	No	Importación de datos
etl	string	No	Transformación de datos
savedsearch	string	No	Búsqueda guardada
alert	string	No	Alerta
export	string	No	Exportación de datos
consumergroup	string	No	Consumo de datos
dashboard	string	No	Panel

Utilice la siguiente URL para configurar el panel de navegación izquierdo:

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

Después de aplicar esta configuración, el panel de navegación izquierdo muestra el logstore delete-log bajo el proyecto website-01. El logstore se expande para mostrar dos subfunciones: saved search y alert.

Parámetros avanzados del panel

Cuando un panel se incrusta en un iframe, la altura del iframe no se establece automáticamente, lo que puede generar dos barras de desplazamiento: una para la página principal y otra para el panel. Utilice parámetros avanzados para que la altura del panel se ajuste dinámicamente.

Puede recuperar la altura del iframe desde la propiedad dashboardHeight, que Simple Log Service pasa en un evento postmessage. Ejemplo:

<!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.alibabacloud.com/lognext/project/${projectName}/dashboard/${dashboardName}?product=${productCode}">
</body>
</html>