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

Notes

La console Log Service est intégrée via un iframe. Par défaut, les politiques de sécurité du navigateur bloquent certaines fonctionnalités, telles que l'ouverture de nouvelles fenêtres et le téléchargement des journaux. Pour activer ces fonctionnalités, configurez l'attribut sandbox de l'iframe.

Les politiques de sécurité du navigateur empêchent les liens contenus dans l'iframe d'ouvrir des fenêtres contextuelles. Pour autoriser les pop-ups, ajoutez allow-popups à l'attribut sandbox de l'iframe.
```
<iframe
  src="https://sls4service.console.alibabacloud.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups"
/>
```
Ces politiques bloquent également le téléchargement des journaux. Pour autoriser les téléchargements, ajoutez à la fois allow-popups et allow-downloads à l'attribut sandbox de l'iframe.
```
<iframe
  src="https://sls4service.console.alibabacloud.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups allow-downloads"
/>
```

Format de l'URL

Tous les paramètres d'interface utilisateur sont spécifiés dans l'URL selon le format suivant :

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

Remarque

Placez tous les paramètres, à l'exception de ${ProjectName}, ${LogstoreName}, ${savedsearchID} et ${dashboardID}, après le point d'interrogation (?) à la fin de l'URL.
Utilisez une esperluette (&) pour séparer plusieurs paramètres.
Pour utiliser le thème sombre, ajoutez theme=dark&sls_iframe=true à l'URL.
Les paramètres d'URL suivants sont sensibles à la casse.

Paramètres courants

Utilisez les paramètres courants pour configurer la console.

Paramètre	Type	Obligatoire	Description	Exemple
hiddenBack	boolean	Non	Masque le bouton de retour de la console pour le projet actuel.	hiddenBack=true
hiddenChangeProject	boolean	Non	Masque le contrôle de changement de projet.	hiddenChangeProject=true
hiddenOverview	boolean	Non	Masque le point d'entrée de l'aperçu du projet.	hiddenOverview=true
hideSidebar	boolean	Non	Masque le volet de navigation de gauche.	hideSidebar=true
hideTopbar	boolean	Non	Masque la barre de navigation supérieure.	hideTopbar=true
isShare	boolean	Non	Masque le volet de navigation de gauche ainsi que les autres onglets.	isShare=true
ignoreTabLocalStorage	boolean	Non	Désactive l'historique de navigation par onglets.	ignoreTabLocalStorage=true
queryTimeType	long	Non	Plage de temps pour la requête et l'analyse. Pour plus d'informations, consultez Valeurs de queryTimeType. 1 à 26 : plage de temps prédéfinie identifiée par sa valeur entière correspondante. -2 : plage de temps relative personnalisée. Nécessite les paramètres start et end, par exemple, start:-10m,end:now. -3 : cadre temporel personnalisé. Nécessite les paramètres start et end, par exemple, start:-2h,end:absolute. 99 : plage de temps personnalisée. Nécessite startTime et endTime sous forme d'horodatages.	queryTimeType=1
startTime	timestamp	Non	Heure de début de la plage de temps de la requête. Prend effet uniquement lorsque queryTimeType est défini sur 99.	startTime=1547776643
endTime	timestamp	Non	Heure de fin de la plage de temps de la requête. Prend effet uniquement lorsque queryTimeType est défini sur 99.	endTime=1547776731
disablePublicShare	boolean	Non	Masque le bouton Create Password-free Share sur un tableau de bord.	disablePublicShare=true

Tableau 1. Valeurs de queryTimeType

queryTimeType

Description

1

1 minute (relative)

2

15 minutes (relative)

3

1 heure (relative)

4

4 heures (relative)

5

1 jour (relative)

6

1 semaine (relative)

7

30 jours (relative)

8

1 minute (cadre temporel)

9

15 minutes (cadre temporel)

10

1 heure (cadre temporel)

11

4 heures (cadre temporel)

12

1 jour (cadre temporel)

13

1 semaine (cadre temporel)

14

30 jours (cadre temporel)

15

Aujourd'hui (cadre temporel)

16

Hier (cadre temporel)

17

Avant-hier (cadre temporel)

18

Cette semaine (cadre temporel)

19

Semaine dernière (cadre temporel)

20

Ce mois-ci (cadre temporel)

21

Ce trimestre (cadre temporel)

22

Aujourd'hui (relative)

23

5 minutes (relative)

24

Cette année (cadre temporel)

25

Ce mois-ci (relative)

26

Mois dernier (cadre temporel)

27

Cette semaine (relative)

28

5 minutes (cadre temporel)

29

Hier (relative)

30

Avant-hier (relative)

31

Semaine dernière (relative)

32

Mois dernier (relative)

33

Ce trimestre (relative)

34

Cette année (relative)

99

Plage de temps personnalisée. Nécessite les paramètres startTime et endTime.

Les exemples suivants illustrent l'utilisation des paramètres d'URL :

Pour masquer le bouton de retour, le contrôle de changement de projet et le point d'entrée de l'aperçu du projet, utilisez l'URL suivante :

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

Pour masquer le bouton de retour, utilisez l'URL suivante :

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

Pour définir la plage de temps pour la requête et l'analyse, utilisez l'URL suivante :
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?queryTimeType=3
```
Lorsque queryTimeType est défini sur 3, le sélecteur de plage de temps situé dans le coin supérieur droit de la page de requête affiche 1 hour (relative).

Paramètres de la page de requête et d'analyse du Logstore

Utilisez les paramètres suivants pour configurer la page de requête et d'analyse d'un Logstore.

Paramètre	Type	Obligatoire	Description	Exemple
ProjectName	string	Oui	Nom du projet.	website-01
LogstoreName	string	Oui	Nom du Logstore.	logstore01
queryString	string	Non	Instruction de requête encodée en Base64. Par exemple, l'instruction de requête`\|select count()` est encodée en Base64 sous la forme`KnxzZWxlY3QgY291bnQoKik=`.	KnxzZWxlY3QgY291bnQoKik=
readOnly	boolean	Non	Masque les éléments d'interface utilisateur modifiables, tels que Share, Index Attributes, Save as Saved Search et Save as Alert.	readOnly=true
encode	string	Non	Pour éviter les caractères spéciaux dans le paramètre queryString, utilisez `encode=base64`. Le paramètre queryString devient alors une chaîne encodée en Base64.	encode=base64
hiddenEtl	boolean	Non	Masque le bouton de transformation des données.	hiddenEtl=true
hiddenShare	boolean	Non	Masque le bouton Share.	hiddenShare=true
hiddenIndexSetting	boolean	Non	Masque le bouton de configuration des index.	hiddenIndexSetting=true
hiddenSavedSearch	boolean	Non	Masque le bouton de recherche enregistrée.	hiddenSavedSearch=true
hiddenAlert	boolean	Non	Masque le bouton d'alerte.	hiddenAlert=true
hiddenQuickAnalysis	boolean	Non	Réduit par défaut le volet Quick Analysis.	hiddenQuickAnalysis=true
hiddenDownload	boolean	Non	Masque la fonctionnalité de téléchargement des journaux.	hiddenDownload=true
hiddenModeSwitch	boolean	Non	Masque le bouton Dedicated SQL.	hiddenModeSwitch=true
keyDispalyMode	string	Non	Mode d'affichage de la colonne de contenu. `single` : affiche chaque journal sur une seule ligne. `multi` : renvoie à la ligne les journaux longs sur plusieurs lignes.	keyDispalyMode=single
hiddenLogChart	boolean	Non	Masque l'onglet Graph.	hiddenLogChart=true
hiddenLogReduce	boolean	Non	Masque l'onglet LogReduce.	hiddenLogReduce=true
hiddenColSetting	boolean	Non	Masque la colonne de champs située à gauche.	hiddenColSetting=true
hiddenLogInspection	boolean	Non	Masque l'onglet Intelligent Health Check.	hiddenLogInspection=true

Les exemples suivants illustrent l'utilisation des paramètres d'URL :

Utilisez l'URL suivante pour spécifier une instruction de requête.

Par exemple, l'instruction de requête *|select count(*) est encodée en Base64 sous la forme KnxzZWxlY3QgY291bnQoKik=.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?encode=base64&queryString=KnxzZWxlY3QgY291bnQoKik=
```
Utilisez l'URL suivante pour masquer les éléments d'interface utilisateur modifiables, tels que Index Attributes et Save as Alert.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
```
Utilisez l'URL suivante pour masquer les onglets Graph et LogReduce.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenLogChart=true&hiddenLogReduce=true
```
Lorsque ces onglets sont masqués, la page de requête et d'analyse affiche uniquement l'onglet raw logs.

Paramètres de recherche enregistrée dans un LogStore

Utilisez les paramètres suivants pour personnaliser la page de recherche enregistrée d'un LogStore.

Paramètre	Type	Obligatoire	Description	Exemple
ProjectName	string	Oui	Nom du projet.	website-01
savedSearchName	string	Non	Nom de la recherche enregistrée.	quick-search01
savedsearchID	string	Oui	ID de la recherche enregistrée. Remarque Après avoir créé une recherche enregistrée, vous pouvez obtenir son ID à partir de l'URL. Pour plus d'informations, consultez Obtenir l'ID d'une recherche enregistrée.	savedsearch-1621845672511-314813

L'exemple suivant illustre le format de l'URL :

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

Cette URL ouvre la page de recherche enregistrée pour la recherche spécifiée, par exemple quick-search01, dans le projet correspondant, tel que website-01. La page affiche l'instruction de requête enregistrée, comme *|select count(*), et propose des opérations telles que data transformation, query and analysis properties, save as alert et modify a saved search.

Paramètres du tableau de bord

Utilisez les paramètres suivants pour personnaliser un tableau de bord.

Paramètre	Type	Obligatoire	Description	Exemple
ProjectName	string	Oui	Nom du projet.	website-01
dashboardName	string	Non	Nom du tableau de bord.	Website Analysis Logs
dashboardID	string	Oui	ID du tableau de bord. Remarque Après avoir créé un tableau de bord, vous pouvez obtenir son ID à partir de l'URL. Pour plus d'informations, consultez ListDashboard.	dashboard-1609817292009-742588
isShare	boolean	Non	Indique si le tableau de bord est consulté via un lien de partage. Si la valeur est définie sur `true`, seule l'interface utilisateur du tableau de bord s'affiche et le bouton Share est masqué.	isShare=true
token	JsonString	Non	Jeton pour le remplacement de variables. La valeur doit être encodée en URL à l'aide de la fonction `encodeURIComponent()`. Par exemple, `token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}]` est encodé en `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	Non	Active le mode lecture seule. Si la valeur est définie sur `true`, les boutons liés à la modification, tels que Edit et Alerts, sont masqués.	readOnly=true
openPsql	boolean	Non	Active la fonctionnalité Dedicated SQL.	openPsql=true
autoFresh	string	Non	Intervalle d'actualisation automatique du tableau de bord, par exemple `30s` ou `5min`. L'intervalle minimal doit être supérieur à 15 s.	autoFresh=5m
filters	string	Non	Conditions de filtre à appliquer. La valeur doit être encodée en URL à l'aide de la fonction `encodeURIComponent()`. Par exemple, `filters=key1:value1&filters=key2:value2` est encodé en `filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2`.	filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2
hiddenFilter	boolean	Non	Masque la section Filter Conditions.	hiddenFilter=true
fixedFilter	boolean	Non	Empêche la modification ou la suppression des conditions de filtre.	fixedFilter=true
disableFilterAndToken	boolean	Non	Désactive les conditions de filtre et le remplacement de variables.	disableFilterAndToken=true
fixedToken	boolean	Non	Empêche la modification ou la suppression des paramètres de remplacement de variables.	fixedToken=true
hiddenToken	boolean	Non	Masque la section Variable Replacement.	hiddenToken=true
hiddenProject	boolean	Non	Masque les informations du projet.	hiddenProject=true
hiddenEdit	boolean	Non	Masque le bouton Edit.	hiddenEdit=true
hiddenReport	boolean	Non	Masque le bouton Subscribe.	hiddenReport=true
hiddenTitleSetting	boolean	Non	Masque le bouton Title Setting.	hiddenTitleSetting=true
hiddenReset	boolean	Non	Masque le bouton Reset Time.	hiddenReset=true
hiddenModeSwitch	boolean	Non	Masque le bouton Dedicated SQL.	hiddenModeSwitch=true
hiddenAlert	boolean	Non	Masque l'option Save as Alert.	hiddenAlert=true
hiddenSearch	boolean	Non	Masque l'option Preview Query.	hiddenSearch=true
hiddenShare	boolean	Non	Masque le bouton Share dans la barre supérieure. Ce bouton inclut les options Share Link et Send Dashboard.	hiddenShare=true
hiddenPSql	boolean	Non	Masque le bouton Dedicated SQL.	hiddenPSql=true
hiddenFullScreen	boolean	Non	Masque les options plein écran (Monitor Full Screen et Window Full Screen) dans la barre supérieure.	hiddenFullScreen=true
hiddenSelectTime	boolean	Non	Masque le sélecteur Time Range dans la barre supérieure.	hiddenSelectTime=true
hiddenChartTime	boolean	Non	Masque l'affichage de la plage horaire pour chaque graphique, qui apparaît après le titre du graphique.	hiddenChartTime=true
hiddenChartMenus	boolean	Non	Masque le menu déroulant dans le coin supérieur droit de chaque graphique.	hiddenChartMenus=true
hiddenTitle	boolean	Non	Masque le titre du tableau de bord.	hiddenTitle=true
hiddenTopBar	boolean	Non	Masque la barre supérieure du tableau de bord, qui comprend le titre et tous les boutons d'action.	hiddenTopBar=true
hiddenCopy	boolean	Non	Masque le bouton Save as.	hiddenCopy=true
hiddenSurvey	boolean	Non	Masque le point d'entrée de l'enquête.	hiddenSurvey=true
hiddenDrilldown	boolean	Non	Masque l'onglet Drill-down en mode édition du tableau de bord.	hiddenDrilldown=true
hiddenFieldConfig	boolean	Non	Masque l'onglet Field Configuration en mode édition du tableau de bord.	hiddenFieldConfig=true
disableViewChart	boolean	Non	Masque l'option View pour chaque graphique.	disableViewChart=true

Les exemples suivants montrent comment utiliser les paramètres d'URL :

Pour activer le mode lecture seule d'un tableau de bord, utilisez l'URL suivante :
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?readOnly=true 
```
En mode lecture seule, la barre d'outils supérieure du tableau de bord n'affiche que les boutons liés à la consultation, tels que Time Range, Refresh, Reset Time, Share, Full Screen et Subscribe. Les fonctionnalités de modification ne sont pas disponibles.
Pour ajouter deux conditions de filtre, key1:value1 et key2:value2, à un tableau de bord, utilisez l'URL suivante. La chaîne de condition de filtre filters=key1:value1&filters=key2:value2 est encodée en filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2.
```
https://sls4service.console.alibabacloud.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2
```
Après avoir défini les conditions de filtre, le tableau de bord affiche les données filtrées par key1:value1.
Pour ajouter plusieurs conditions de remplacement de variables, telles que projectname=1, utilisez l'URL suivante. Dans cet exemple, token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}] est encodé en 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
```

Pour actualiser automatiquement le tableau de bord toutes les 5 minutes, utilisez l'URL suivante :

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

Paramètres de structure arborescente

Les paramètres de structure arborescente configurent le volet de navigation de gauche de la console.

Paramètre

Type

Obligatoire

Description

Exemple

treeConfig

JSON

Non

Définit la structure arborescente du volet de navigation de gauche. Si vous définissez le paramètre treeEncode sur base64, la valeur de ce paramètre doit être encodée en Base64.

Par exemple, {"logstore":{"expand":true,"resourceList":["delete-log"],"template":["savedsearch","alert"]}} est encodé en Base64 sous la forme eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19.

eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19

treeEncode

string

Non

Format d'encodage pour le paramètre treeConfig. La valeur par défaut est une chaîne vide, ce qui indique l'absence d'encodage. Le seul encodage pris en charge est Base64.

treeEncode=base64

Voici un exemple complet du paramètre 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"
        ]
    }
}

Tableau 2. Paramètres de treeConfig

Paramètre

Type

Obligatoire

Description

logstore

object

Non

Contrôle les entrées de ressources dans la liste Logstore.

template

string[]

Non

Contrôle les entrées de fonctionnalités dans la liste Logstore. Pour plus d'informations, consultez la section Valeurs des paramètres template.

machineGroup

object

Non

Contrôle les entrées de ressources dans la liste des groupes de machines.

savedSearch

object

Non

Contrôle les entrées de ressources dans la liste des recherches enregistrées.

alert

object

Non

Contrôle les entrées de ressources dans la liste des alertes.

dashboard

object

Non

Contrôle les entrées de ressources dans la liste des tableaux de bord.

etl

object

Non

Contrôle les entrées de ressources dans la liste des transformations de données.

Tableau 3. Paramètres liés aux ressources

Paramètre

Type

Obligatoire

Description

search

boolean

Non

Indique s'il faut afficher la zone de recherche. Valeur par défaut : true.

resourceList

String[]

Non

Liste des ressources à afficher. Seules les ressources dont les noms correspondent exactement à une entrée de ce tableau sont affichées. Si ce paramètre n'est pas configuré, toutes les ressources du type correspondant sont affichées.

expand

boolean

Non

Indique s'il faut développer la liste des ressources. Valeur par défaut : false. Ce paramètre s'applique uniquement à la liste Logstore.

Tableau 4. Paramètres template

Paramètre

Type

Obligatoire

Description

favor

string

Non

liste de surveillance

logtail

string

Non

configuration Logtail

import

string

Non

importation de données

etl

string

Non

transformation de données

savedsearch

string

Non

recherche enregistrée

alert

string

Non

alerte

export

string

Non

exportation de données

consumergroup

string

Non

consommation de données

dashboard

string

Non

tableau de bord

Utilisez l'URL suivante pour configurer le volet de navigation de gauche :

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

Après application de cette configuration, le volet de navigation de gauche affiche le Logstore delete-log sous le projet website-01. Le Logstore est développé pour afficher deux sous-fonctionnalités : saved search et alert.

Paramètres avancés du tableau de bord

Lorsqu'un tableau de bord est intégré dans un iframe, la hauteur de l'iframe n'est pas définie automatiquement, ce qui peut générer deux barres de défilement : une pour la page parente et une pour le tableau de bord. Utilisez les paramètres avancés pour ajuster dynamiquement la hauteur du tableau de bord.

Vous pouvez récupérer la hauteur de l'iframe à partir de la propriété dashboardHeight, que Simple Log Service transmet via un événement postmessage. Exemple :

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