埋め込むコンソールページの表示効果をカスタマイズするために使用されるパラメーターを構成する - Simple Log Service

このトピックでは、埋め込むコンソールページの表示効果をカスタマイズするために使用されるパラメーターを構成する方法について説明します。

Simple Log Service では、コンソールページをセルフマネージド Web サイトに埋め込むことができます。これにより、コンソールにログインする必要なくページにアクセスし、より効率的な方法でログクエリと分析を実行できます。 Simple Log Service はまた、埋め込まれたコンソールページの表示設定をカスタマイズするために構成できる一連の UI パラメーターを提供します。詳細については、「コンソールページを埋め込み、ログデータを共有する」をご参照ください。

使用上の注意

Simple Log Service のコンソールページは、iframe の形式で他の Web ページに埋め込まれています。デフォルトでは、ブラウザはポップアップとログのダウンロード操作をブロックします。たとえば、ファイルへのリンクをクリックすると、ブラウザは対応するポップアップをブロックします。この場合、iframe の属性構成を変更する必要があります。

iframe 内では、ページへのリンクをクリックしたときにコンソールページにアクセスしようとすると、ブラウザのセキュリティポリシーによりブロックされます。allow-popups を iframe のサンドボックスフィールドに追加する必要があります。
```
<iframe
  src="https://sls4service.console.aliyun.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups"
/>
```
iframe では、コンソールページでサポートされているログダウンロード操作は、ブラウザのセキュリティポリシーによりブロックされます。ログをダウンロードするには、iframe の allow-popupsallow-downloadssandbox フィールドにとを追加する必要があります。
```
<iframe
  src="https://sls4service.console.aliyun.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups allow-downloads"
/>
```

URL 形式

UI パラメーターは、次の形式で URL エンコードされます。

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

説明

${ProjectName}、${LogstoreName}、${savedsearchID}、および ${dashboardID} パラメーターを除くすべてのパラメーターは、URL の末尾にある疑問符（?）の後に配置する必要があります。
一度に複数のパラメーターを構成できます。パラメーターは、アンパサンド（&）を使用して連結されます。
ダークテーマを使用するには、URL に theme=dark&sls_iframe=true を追加できます。
URL 内の以下のパラメーターの大文字と小文字の区別に注意してください。

共通パラメーター

次の表に、コンソールページをカスタマイズするために構成できる共通パラメーターを示します。

パラメーター	タイプ	必須	説明	例
hiddenBack	boolean	いいえ	現在のプロジェクトの戻るアイコンを非表示にするかどうかを指定します。	hiddenBack=true
hiddenChangeProject	boolean	いいえ	プロジェクト間の切り替えに使用する GUI 要素を非表示にするかどうかを指定します。	hiddenChangeProject=true
hiddenOverview	boolean	いいえ	プロジェクトの [プロジェクト概要] タブへのエントリポイントを非表示にするかどうかを指定します。	hiddenOverview=true
hideSidebar	boolean	いいえ	左側のナビゲーションウィンドウを非表示にするかどうかを指定します。	hideSidebar=true
hideTopbar	boolean	いいえ	上部のナビゲーションバーを非表示にするかどうかを指定します。	hideTopbar=true
isShare	boolean	いいえ	左側のナビゲーションウィンドウと他のタブを非表示にするかどうかを指定します。	isShare=true
ignoreTabLocalStorage	boolean	いいえ	アクセスしたタブの閲覧を無効にするかどうかを指定します。	ignoreTabLocalStorage=true
queryTimeType	long	いいえ	クエリの時間範囲を指定します。詳細については、queryTimeType パラメーターの有効値を参照してください。有効な値： 1 ～ 26 の整数：各整数は時間範囲を指定します。 -2：カスタムの相対時間範囲。開始時刻と終了時刻を指定する必要があります。例：start:-10m,end:now。 -3：カスタムの時間枠。開始時刻と終了時刻を指定する必要があります。例：start:-2h,end:absolute。 99：カスタムの時間範囲。 queryTimeType を 99 に設定する場合は、startTime パラメーターと endTime パラメーターをタイムスタンプに設定する必要があります。	queryTimeType=1
startTime	timestamp (date)	いいえ	クエリの開始時刻を指定します。このパラメーターは、queryTimeType を 99 に設定した場合にのみ有効になります。	startTime=1547776643
endTime	timestamp (date)	いいえ	クエリの終了時刻を指定します。このパラメーターは、queryTimeType を 99 に設定した場合にのみ有効になります。	endTime=1547776731
disablePublicShare	boolean	いいえ	ダッシュボードの [パスワードなし共有を作成] ボタンを非表示にするかどうかを指定します。	disablePublicShare=true

表 1. queryTimeType パラメーターの有効値

queryTimeType	説明
1	1 分（相対）
2	15 分（相対）
3	1 時間（相対）
4	4 時間（相対）
5	1 日（相対）
6	1 週間（相対）
7	30 日（相対）
8	1 分（時間枠）
9	15 分（時間枠）
10	1 時間（時間枠）
11	4 時間（時間枠）
12	1 日（時間枠）
13	1 週間（時間枠）
14	30 日（時間枠）
15	今日（時間枠）
16	前日（時間枠）
17	2 日前（時間枠）
18	今週（時間枠）
19	先週（時間枠）
20	今月（時間枠）
21	今四半期（時間枠）
22	今日（相対）
23	5 分（相対）
24	今年（時間枠）
25	今月（相対）
26	前月（時間枠）
27	今週（相対）
28	5 分（時間枠）
29	前日（相対）
30	2 日前（相対）
31	先週（相対）
32	前月（相対）
33	今四半期（相対）
34	今年（相対）
99	カスタムの時間範囲（queryTimeType を 99 に設定する場合は、startTime パラメーターと endTime パラメーターを構成する必要があります。）

次の例は、URL と、URL 内の UI パラメーターに基づいて表示されるページを示しています。

現在のプロジェクトの戻るアイコン、プロジェクトを切り替えるために使用される GUI 要素、およびプロジェクトの [プロジェクト概要] タブへのエントリポイントを非表示にするには、次の URL を使用します。
```
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenBack=true&hiddenChangeProject=true&hiddenOverview=true
```

現在のプロジェクトの戻るアイコンを非表示にするには、次の URL を使用します。

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

隐藏导航栏返回按钮

クエリの時間範囲を指定するには、次の URL を使用します。

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

时间选择器

Logstore のクエリと分析ページに関連するパラメーター

次の表に、Logstore のクエリと分析ページをカスタマイズするために構成できるパラメーターを示します。

パラメーター	タイプ	必須	説明	例
ProjectName	string	はい	プロジェクトの名前。	website-01
LogstoreName	string	はい	Logstore の名前。	logstore01
queryString	string	いいえ	Base64 でエンコードされたクエリ文。 Base64 でエンコードされたクエリ文。例：`\|select count()` 文は、Base64 で `KnxzZWxlY3QgY291bnQoKik=` にエンコードされます。	KnxzZWxlY3QgY291bnQoKik=
readOnly	boolean	いいえ	Logstore のクエリと分析ページで構成を編集または変更するために使用される GUI 要素を非表示にするかどうかを指定します。 GUI 要素には、[共有]、[インデックス属性]、[クイック検索として保存]、および [アラートとして保存] が含まれます。	readOnly=true
encode	string	いいえ	クエリ文字列のエンコード形式。 queryString パラメーターの値に特殊文字が表示されないようにするには、encode パラメーターを base64 に設定することをお勧めします。 Base64 エンコーディングを指定した場合、queryString パラメーターの値は Base64 エンコードされた文字列です。	encode=base64
hiddenEtl	boolean	いいえ	現在の Logstore のデータ変換ページにリダイレクトする GUI 要素を非表示にするかどうかを指定します。	hiddenEtl=true
hiddenShare	boolean	いいえ	現在の Logstore の URL を共有するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenShare=true
hiddenIndexSetting	boolean	いいえ	現在の Logstore のインデックス構成ページにリダイレクトする GUI 要素を非表示にするかどうかを指定します。	hiddenIndexSetting=true
hiddenSavedSearch	boolean	いいえ	現在の Logstore のクイック検索構成ページにリダイレクトする GUI 要素を非表示にするかどうかを指定します。	hiddenSavedSearch=true
hiddenAlert	boolean	いいえ	現在の Logstore のアラートを構成するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenAlert=true
hiddenQuickAnalysis	boolean	いいえ	[クイック分析] ウィンドウを自動的に非表示にするかどうかを指定します。	hiddenQuickAnalysis=true
hiddenDownload	boolean	いいえ	現在の Logstore 内のデータをダウンロードするために使用されるアイコンを非表示にするかどうかを指定します。	hiddenDownload=true
hiddenModeSwitch	boolean	いいえ	現在の Logstore の専用 SQL 機能を構成するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenModeSwitch=true
keyDispalyMode	string	いいえ	ログの表示モード。有効な値： single：ログは 1 行で表示されます。 multi：ログは複数行で表示されます。	keyDispalyMode=single
hiddenLogChart	boolean	いいえ	現在の Logstore の [グラフ] タブを非表示にするかどうかを指定します。	hiddenLogChart=true
hiddenLogReduce	boolean	いいえ	現在の Logstore の [LogReduce] タブを非表示にするかどうかを指定します。	hiddenLogReduce=true
hiddenColSetting	boolean	いいえ	左側のフィールド列を非表示にするかどうかを指定します。	hiddenColSetting=true

次の例は、URL と、URL 内の UI パラメーターに基づいて表示されるページを示しています。

クエリ文を指定するには、次の URL を使用します。
クエリ文を指定するには、次の URL を使用します。例：*|select count(*) 文は、Base64 で KnxzZWxlY3QgY291bnQoKik= にエンコードされます。
```
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?encode=base64&queryString=KnxzZWxlY3QgY291bnQoKik=
```
[インデックス属性] や [アラートとして保存] など、Logstore のクエリと分析ページで構成を編集または変更するために使用される GUI 要素を非表示にするには、次の URL を使用します。
```
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
```

Logstore の [グラフ] タブと [LogReduce] タブを非表示にするには、次の URL を使用します。

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

隐藏统计图表和日志聚类

Logstore のクイック検索ページに関連するパラメーター

次の表に、Logstore のクイック検索ページをカスタマイズするために構成できるパラメーターを示します。

パラメーター	タイプ	必須	説明	例
ProjectName	string	はい	プロジェクトの名前。	website-01
savedSearchName	string	いいえ	クイック検索の名前。	quick-search01
savedsearchID	string	はい	保存済み検索の ID です。説明クイック検索を作成した後、URL でクイック検索の ID を取得できます。詳細については、「クイック検索の ID を取得する」をご参照ください。	savedsearch-1621845672511-314813

次の例は、URL と、URL 内の UI パラメーターに基づいて表示されるページを示しています。

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

快速查询页

ダッシュボードページに関連するパラメーター

次の表に、ダッシュボードページをカスタマイズするために構成できるパラメーターを示します。

パラメーター	タイプ	必須	説明	例
ProjectName	string	はい	プロジェクトの名前。	website-01
dashboardName	string	いいえ	ダッシュボードの名前。	Web サイト分析ログ
dashboardID	string	はい	ダッシュボードの ID です。説明ダッシュボードを作成した後、URL でダッシュボードの ID を取得できます。詳細については、「ListDashboard」をご参照ください。	dashboard-1609817292009-742588
isShare	boolean	いいえ	共有リンクを使用してダッシュボードを表示するかどうかを指定します。このパラメーターを true に設定すると、ダッシュボードが表示され、ダッシュボードの URL を共有するために使用される GUI 要素は非表示になります。	isShare=true
token	JsonString	いいえ	置き換えたい変数。値は `encodeURIComponent()` 関数でトランスコードする必要があります。たとえば、`token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}]` は `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	いいえ	ダッシュボードページで設定を編集または構成するために使用される GUI 要素を非表示にするかどうかを指定します。 GUI 要素には、[編集] と [アラート] が含まれます。	readOnly=true
openPsql	boolean	いいえ	ダッシュボードの専用 SQL 機能を有効にするかどうかを指定します。	openPsql=true
autoFresh	string	いいえ	ダッシュボードのデータが更新される間隔。例：30 秒、5 分。最小間隔は 15 秒です。	autoFresh=5m
filters	string	いいえ	フィルター条件。値は `encodeURIComponent()` 関数でトランスコードする必要があります。たとえば、`filters=key1:value1&filters=key2:value2` は `filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2` にトランスコードされます。	filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2
hiddenFilter	boolean	いいえ	条件付きフィルタリングへのエントリポイントを非表示にするかどうかを指定します。	hiddenFilter=true
fixedFilter	boolean	いいえ	フィルター条件を修正するかどうかを指定します。このパラメーターを true に設定すると、指定されたフィルター条件を削除または変更することはできません。	fixedFilter=true
disableFilterAndToken	boolean	いいえ	フィルタリングと変数の置換を無効にするかどうかを指定します。	disableFilterAndToken=true
fixedToken	boolean	いいえ	置換する変数を修正するかどうかを指定します。このパラメーターを true に設定すると、指定された変数を削除または変更することはできません。	fixedToken=true
hiddenToken	boolean	いいえ	変数の置換へのエントリポイントを非表示にするかどうかを指定します。	hiddenToken=true
hiddenProject	boolean	いいえ	プロジェクトに関する情報を非表示にするかどうかを指定します。	hiddenProject=true
hiddenEdit	boolean	いいえ	ダッシュボードページの設定を編集するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenEdit=true
hiddenReport	boolean	いいえ	ダッシュボードをサブスクライブするために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenReport=true
hiddenTitleSetting	boolean	いいえ	ダッシュボードのタイトルを構成するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenTitleSetting=true
hiddenReset	boolean	いいえ	ダッシュボードの時間をリセットするために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenReset=true
hiddenModeSwitch	boolean	いいえ	ダッシュボードの専用 SQL 機能を構成するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenModeSwitch=true
hiddenAlert	boolean	いいえ	ダッシュボードのグラフのアラートを構成するためのエントリポイントを非表示にするかどうかを指定します。	hiddenAlert=true
hiddenSearch	boolean	いいえ	ダッシュボードのグラフのクエリ文をプレビューするためのエントリポイントを非表示にするかどうかを指定します。	hiddenSearch=true
hiddenShare	boolean	いいえ	トップバーにあるダッシュボードの URL を共有するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenShare=true
hiddenPSql	boolean	いいえ	ダッシュボードの専用 SQL 機能を構成するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenPSql=true
hiddenFullScreen	boolean	いいえ	トップバーにある全画面表示またはウィンドウ全画面表示を有効にするために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenFullScreen=true
hiddenSelectTime	boolean	いいえ	トップバーにあるダッシュボードの時間範囲を指定するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenSelectTime=true
hiddenChartTime	boolean	いいえ	ダッシュボードのグラフのタイトルの末尾に表示される時間を非表示にするかどうかを指定します。	hiddenChartTime=true
hiddenChartMenus	boolean	いいえ	ダッシュボードのグラフの右上隅にあるドロップダウンリストを非表示にするかどうかを指定します。	hiddenChartMenus=true
hiddenTitle	boolean	いいえ	ダッシュボードのタイトルを非表示にするかどうかを指定します。	hiddenTitle=true
hiddenTopBar	boolean	いいえ	トップバーにあるダッシュボードのタイトルとその他の設定を構成するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenTopBar=true
hiddenCopy	boolean	いいえ	ダッシュボードを新しいダッシュボードとして保存するために使用される GUI 要素を非表示にするかどうかを指定します。	hiddenCopy=true
hiddenSurvey	boolean	いいえ	ダッシュボードのアンケートへのエントリポイントを非表示にするかどうかを指定します。	hiddenSurvey=true
hiddenDrilldown	boolean	いいえ	ダッシュボードを編集するときに、対話発生の設定を構成できるタブを非表示にするかどうかを指定します。	hiddenDrilldown=true
hiddenFieldConfig	boolean	いいえ	ダッシュボードを編集するときに、フィールドの設定を構成できるタブを非表示にするかどうかを指定します。	hiddenFieldConfig=true
disableViewChart	boolean	いいえ	グラフを表示するためのエントリポイントを非表示にするかどうかを指定します。	disableViewChart=true

次の例は、URL と、URL 内の UI パラメーターに基づいて表示されるページを示しています。

ダッシュボードページの読み取り専用モードを有効にするには、次の URL を使用します。
```
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?readOnly=true 
```
key1=value1 および key2=value2 条件を追加するには、次の URL を使用します。 filters=key1:value1&filters=key2:value2 条件は、filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2 にトランスコードされます。
```
https://sls4service.console.aliyun.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2
```
変数を置き換えるために projectname=1 および region=hangzhou 条件を追加するには、次の URL を使用します。 token=[{"key": "projectname","value":"1"}, {"key": "region", "value": "hangzhou"}] は 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.aliyun.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
```

5 分間隔でダッシュボードのデータを更新するには、次の URL を使用します。

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

自动更新

ツリー構造パラメーター

次の表に、コンソールページの左側のナビゲーションウィンドウをカスタマイズするために構成できるツリー構造パラメーターを示します。

パラメーター

タイプ

必須

説明

例

treeConfig

JSON

いいえ

左側のナビゲーションウィンドウのツリー構造。 treeEncode を base64 に設定した場合、treeConfig の値を Base64 でエンコードする必要があります。

たとえば、{"logstore":{"expand":true,"resourceList":["delete-log"],"template":["savedsearch","alert"]}} はBase64 で eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19 にエンコードされます。

eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19

treeEncode

string

いいえ

treeConfig のエンコード形式。このパラメーターはデフォルトでは空で、treeConfig の値がエンコードされていないことを示します。 Base64 エンコーディングのみがサポートされています。

treeEncode=base64

次の例は、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"
        ]
    }
}

表 2. treeConfig パラメーターのフィールド

フィールド	タイプ	必須	説明
logstore	object	いいえ	Logstore へのエントリポイント。
template	string[]	いいえ	Logstore の一部の機能へのエントリポイント。詳細については、template フィールドのパラメーターを参照してください。
machineGroup	object	いいえ	マシングループへのエントリポイント。
savedSearch	object	いいえ	クイック検索へのエントリポイント。
alert	object	いいえ	アラートへのエントリポイント。
dashboard	object	いいえ	ダッシュボードへのエントリポイント。
etl	object	いいえ	データ変換ジョブへのエントリポイント。

表 3. logstore フィールドのリソースのパラメーター

パラメーター	タイプ	必須	説明
search	boolean	いいえ	検索ボックスを表示するかどうかを指定します。デフォルト値：true。検索ボックスが表示されることを示します。
resourceList	String[]	いいえ	表示される現在のリソース。このパラメーターを空の配列に設定すると、空のリストが表示されます。このパラメーターを構成しない場合、すべてのリソースが表示されます。デフォルトでは、すべてのリソースが表示されます。
expand	boolean	いいえ	リストを展開するかどうかを指定します。デフォルト値：false。リストが展開されないことを示します。このパラメーターは、Logstore リストに対してのみ有効です。

表 4. template フィールドのパラメーター

パラメーター	タイプ	必須	説明
favor	string	いいえ	ウォッチリスト
logtail	string	いいえ	Logtail 構成
import	string	いいえ	データインポート
etl	string	いいえ	データ変換
savedsearch	string	いいえ	クイック検索
alert	string	いいえ	アラート
export	string	いいえ	エクスポート
consumergroup	string	いいえ	データ消費
dashboard	string	いいえ	ダッシュボード

次の例は、URL と、URL 内の UI パラメーターに基づいて表示されるページを示しています。

左側のナビゲーションウィンドウをカスタマイズするには、次の URL を使用します。

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

树状结构

ダッシュボードに関連する高度なパラメーター

iframe を使用してダッシュボードを埋め込む場合、iframe の高さを計算することはできません。この場合、ダッシュボードのスクロールバーと iframe のスクロールバーの 2 つのスクロールバーが表示されることがあります。この問題を解決するには、高度なダッシュボードパラメーターを構成して、ダッシュボードの高さを適応モードで調整できます。

Simple Log Service の postmessage メソッドを使用して、ダッシュボードの高さを取得し、インラインフレームの高さを指定できます。サンプルコード：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>POST メッセージテスト</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}?product=${productCode}">
</body>
</html>