コンソール埋め込みパラメーターを設定して、埋め込みページの外観をカスタマイズします。 - Simple Log Service

Log Service コンソールで、埋め込みパラメーターを設定して、埋め込みページの外観をカスタマイズします。

Simple Log Service は、Web サイトへのページのログイン不要の埋め込みをサポートしており、迅速かつ便利なログのクエリと分析が可能です。また、埋め込みページを Web サイトとシームレスに統合するための UI パラメーターも提供しています。ログイン不要モードでページを埋め込む詳細な手順については、「コンソールページの埋め込みとログデータの共有」をご参照ください。

注意事項

Log Service コンソールが iframe に埋め込まれている場合、ブラウザのデフォルトのセキュリティポリシーにより、新しいウィンドウを開いたり、ログをダウンロードしたりするなどの機能がブロックされます。これらの機能を有効にするには、iframe の sandbox 属性を設定する必要があります。

ブラウザのセキュリティポリシーにより、iframe 内のリンクがポップアップを開くことがブロックされます。ポップアップを許可するには、iframe の sandbox 属性に allow-popups を追加します。
```
<iframe
  src="https://sls4servims.console.alibabacloud.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups"
/>
```
これらのポリシーはログのダウンロードもブロックします。ダウンロードを許可するには、allow-popups と allow-downloads の両方を iframe の sandbox 属性に追加します。
```
<iframe
  src="https://sls4servims.console.alibabacloud.com/lognext/project/**..."
  sandbox="allow-scripts allow-popups allow-downloads"
/>
```

URL フォーマット

すべての UI パラメーターは URL を通じて制御され、次のフォーマットになります：

https://sls4servims.console.alibabacloud.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	いいえ	プロジェクト切り替えコントロールを非表示にします。	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 と end パラメーターが必要です。例：start:-10m,end:now -3：カスタム時間枠です。start と end パラメーターが必要です。例：start:-2h,end:absolute 99：カスタム時間範囲です。startTime と endTime をタイムスタンプとして設定する必要があります。	queryTimeType=1
startTime	timestamp	いいえ	クエリ時間範囲の開始時刻を指定します。このパラメーターは、queryTimeType が 99 に設定されている場合に有効になります。	startTime=1547776643
endTime	timestamp	いいえ	クエリ時間範囲の終了時刻を指定します。このパラメーターは、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	一昨日 (時間枠)
18	今週 (時間枠)
19	先週 (時間枠)
20	今月 (時間枠)
21	今四半期 (時間枠)
22	今日 (相対)
23	5 分 (相対)
24	今年 (時間枠)
25	今月 (相対)
26	先月 (時間枠)
27	今週 (相対)
28	5 分 (時間枠)
29	昨日 (相対)
30	一昨日 (相対)
31	先週 (相対)
32	先月 (相対)
33	今四半期 (相対)
34	今年 (相対)
99	カスタム時間範囲です。`startTime` と `endTime` パラメーターが必要です。

次の例は、URL パラメーターの使用方法を示しています：

戻るボタン、プロジェクト切り替えコントロール、プロジェクト概要のエントリポイントを非表示にするには、次の URL を使用します：
```
https://sls4servims.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?hiddenBack=true&hiddenChangeProject=true&hiddenOverview=true
```

戻るボタンを非表示にするには、次の URL を使用します：

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

クエリと分析の時間範囲を設定するには、次の URL を使用します：
```
https://sls4servims.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?queryTimeType=3
```
queryTimeType が 3 に設定されている場合、クエリページの右上隅にある時間範囲ピッカーに [1 時間 (相対)] と表示されます。

Logstore のクエリと分析ページのパラメーター

Logstore のクエリと分析ページを設定するには、次のパラメーターを使用します。

パラメーター	タイプ	必須	説明	例
ProjectName	string	はい	プロジェクトの名前です。	website-01
LogstoreName	string	はい	Logstore の名前です。	logstore01
queryString	string	いいえ	Base64 エンコードされたクエリ文です。たとえば、クエリ文 `\|select count()` は、Base64 で `KnxzZWxlY3QgY291bnQoKik=` とエンコードされます。	KnxzZWxlY3QgY291bnQoKik=
readOnly	boolean	いいえ	共有、インデックス属性、クイック検索として保存、新規アラームに保存などの編集可能な UI 要素を非表示にします。	readOnly=true
encode	string	いいえ	queryString 内の特殊文字を避けるために、`encode=base64` を使用することを推奨します。この場合、queryString は Base64 エンコードされた文字列になります。	encode=base64
hiddenEtl	boolean	いいえ	データ変換ボタンを非表示にします。	hiddenEtl=true
hiddenShare	boolean	いいえ	[共有] ボタンを非表示にします。	hiddenShare=true
hiddenIndexSetting	boolean	いいえ	インデックス構成ボタンを非表示にします。	hiddenIndexSetting=true
hiddenSavedSearch	boolean	いいえ	クイック検索ボタンを非表示にします。	hiddenSavedSearch=true
hiddenAlert	boolean	いいえ	アラートボタンを非表示にします。	hiddenAlert=true
hiddenQuickAnalysis	boolean	いいえ	デフォルトで [クイック分析] ウィンドウを折りたたみます。	hiddenQuickAnalysis=true
hiddenDownload	boolean	いいえ	ログのダウンロード機能を非表示にします。	hiddenDownload=true
hiddenModeSwitch	boolean	いいえ	[専用 SQL] ボタンを非表示にします。	hiddenModeSwitch=true
keyDispalyMode	string	いいえ	コンテンツ列の表示モードです。 `single`：各ログを 1 行で表示します。 `multi`：長いログを複数行に折り返します。	keyDispalyMode=single
hiddenLogChart	boolean	いいえ	[グラフ] タブを非表示にします。	hiddenLogChart=true
hiddenLogReduce	boolean	いいえ	LogReduce タブを非表示にします。	hiddenLogReduce=true
hiddenColSetting	boolean	いいえ	左側のフィールド列を非表示にします。	hiddenColSetting=true

次の例は、URL パラメーターの使用方法とその効果を示しています：

クエリ文を指定するには、次の URL を使用します。

たとえば、クエリ文 *|select count(*) は、Base64 で KnxzZWxlY3QgY291bnQoKik= とエンコードされます。
```
https://sls4servims.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?encode=base64&queryString=KnxzZWxlY3QgY291bnQoKik=
```
インデックス属性 や 新規アラームに保存 などの編集可能な UI 要素を非表示にするには、次の URL を使用します。
```
https://sls4servims.console.alibabacloud.com/lognext/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
```
[グラフ] タブと [LogReduce] タブを非表示にするには、次の URL を使用します。
```
https://sls4servims.console.alibabacloud.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 フォーマットと結果のページを示しています：

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

この URL にアクセスすると、指定したクイック検索 (例：quick-search01) のページが、対応するプロジェクト (例：website-01) で開きます。保存されたクエリ文 (例：*|select count(*)) が表示され、[データ変換]、[クエリと分析のプロパティ]、[アラートとして保存]、[クイック検索の変更] などの操作が提供されます。

ダッシュボードパラメーター

ダッシュボードパラメーターを使用してダッシュボードをカスタマイズします。

パラメーター	タイプ	必須	説明	例
ProjectName	string	はい	プロジェクトの名前です。	website-01
dashboardName	string	いいえ	ダッシュボードの名前です。	Website Analysis Logs
dashboardID	string	はい	ダッシュボードの ID です。説明ダッシュボードを作成した後、URL からその ID を取得できます。詳細については、「ListDashboard」をご参照ください。	dashboard-1609817292009-742588
isShare	boolean	いいえ	ダッシュボードが共有リンク経由で表示されるかどうかを指定します。`true` に設定すると、ダッシュボード UI のみが表示され、[共有] ボタンは非表示になります。	isShare=true
token	JsonString	いいえ	変数置換のトークンを指定します。値は `encodeURIComponent()` 関数を使用して 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` にエンコードされます。	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	いいえ	読み取り専用モードを有効にするかどうかを指定します。`true` に設定すると、編集やアラートなどの編集関連ボタンが非表示になります。	readOnly=true
openPsql	boolean	いいえ	[専用 SQL] 機能を有効にするかどうかを指定します。	openPsql=true
autoFresh	string	いいえ	ダッシュボードが自動更新される間隔です。例：`30s`、`5min`。最小間隔は 15 秒より長くする必要があります。	autoFresh=5m
filters	string	いいえ	適用するフィルター条件です。値は `encodeURIComponent()` 関数を使用して URL エンコードする必要があります。たとえば、`filters=key1:value1&filters=key2:value2` は `filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2` にエンコードされます。	filters=key1%3Avalue1%26filters%3Dkey2%3Avalue2
hiddenFilter	boolean	いいえ	[フィルター条件] セクションを非表示にします。	hiddenFilter=true
fixedFilter	boolean	いいえ	フィルター条件の変更または削除を禁止します。	fixedFilter=true
disableFilterAndToken	boolean	いいえ	フィルター条件と変数置換を無効にします。	disableFilterAndToken=true
fixedToken	boolean	いいえ	変数置換設定の変更または削除を禁止します。	fixedToken=true
hiddenToken	boolean	いいえ	[変数置換] セクションを非表示にします。	hiddenToken=true
hiddenProject	boolean	いいえ	プロジェクト情報を非表示にします。	hiddenProject=true
hiddenEdit	boolean	いいえ	[編集] ボタンを非表示にします。	hiddenEdit=true
hiddenReport	boolean	いいえ	[サブスクライブ] ボタンを非表示にします。	hiddenReport=true
hiddenTitleSetting	boolean	いいえ	[タイトル設定] ボタンを非表示にします。	hiddenTitleSetting=true
hiddenReset	boolean	いいえ	[時間のリセット] ボタンを非表示にします。	hiddenReset=true
hiddenModeSwitch	boolean	いいえ	[専用 SQL] ボタンを非表示にします。	hiddenModeSwitch=true
hiddenAlert	boolean	いいえ	[アラートとして保存] オプションを非表示にします。	hiddenAlert=true
hiddenSearch	boolean	いいえ	[クエリのプレビュー] オプションを非表示にします。	hiddenSearch=true
hiddenShare	boolean	いいえ	上部バーの [共有] ボタンを非表示にします。このボタンには、リンクの共有とダッシュボードの送信オプションが含まれます。	hiddenShare=true
hiddenPSql	boolean	いいえ	[専用 SQL] ボタンを非表示にします。	hiddenPSql=true
hiddenFullScreen	boolean	いいえ	上部バーの全画面オプション (モニター全画面とウィンドウ全画面) を非表示にします。	hiddenFullScreen=true
hiddenSelectTime	boolean	いいえ	上部バーの [時間範囲] セレクターを非表示にします。	hiddenSelectTime=true
hiddenChartTime	boolean	いいえ	チャートタイトルの後に表示される、個々のチャートの時間範囲表示を非表示にします。	hiddenChartTime=true
hiddenChartMenus	boolean	いいえ	各チャートの右上隅にあるドロップダウンメニューを非表示にします。	hiddenChartMenus=true
hiddenTitle	boolean	いいえ	ダッシュボードのタイトルを非表示にします。	hiddenTitle=true
hiddenTopBar	boolean	いいえ	ダッシュボードの上部バーを非表示にします。これにはタイトルとすべてのアクションボタンが含まれます。	hiddenTopBar=true
hiddenCopy	boolean	いいえ	[名前を付けて保存] ボタンを非表示にします。	hiddenCopy=true
hiddenSurvey	boolean	いいえ	アンケートのエントリポイントを非表示にします。	hiddenSurvey=true
hiddenDrilldown	boolean	いいえ	ダッシュボードの編集モードで [ドリルダウン] タブを非表示にします。	hiddenDrilldown=true
hiddenFieldConfig	boolean	いいえ	ダッシュボードの編集モードで [フィールド設定] タブを非表示にします。	hiddenFieldConfig=true
disableViewChart	boolean	いいえ	個々のチャートの [表示] オプションを非表示にします。	disableViewChart=true

次の例は、URL パラメーターの使用方法とその効果を示しています：

ダッシュボードの読み取り専用モードを有効にするには、次の URL を使用します：
```
https://sls4servims.console.alibabacloud.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?readOnly=true 
```
読み取り専用モードが有効な場合、ダッシュボードの上部ツールバーには、[時間範囲]、[更新]、[時間のリセット]、[共有]、[全画面]、[サブスクライブ] などの表示関連ボタンのみが表示されます。編集機能は利用できません。
ダッシュボードに key1:value1 と key2:value2 の 2 つのフィルター条件を追加するには、次の URL を使用します。フィルター条件の文字列 filters=key1:value1&filters=key2:value2 は filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2 にエンコードされます。
```
https://sls4servims.console.alibabacloud.com/lognext/project/${ProjectName}/dashboard/${dashboardID}?filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2
```
フィルター条件を設定すると、ダッシュボードには `key1:value1` と `key2:value2` でフィルターされたデータが表示されます。
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://sls4servims.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
```

ダッシュボードを 5 分ごとに自動更新するには、次の URL を使用します：

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

ツリー構造パラメーター

ツリー構造パラメーターは、コンソールの左側のナビゲーションウィンドウを定義します。

パラメーター

タイプ

必須

説明

例

treeConfig

JSON

いいえ

左側のナビゲーションウィンドウのツリー構造を定義します。treeEncode パラメーターを base64 に設定した場合、このパラメーターの値は Base64 エンコードされている必要があります。

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

eyJsb2dzdG9yZSI6eyJleHBhbmQiOnRydWUsInJlc291cmNlTGlzdCI6WyJkZWxldGUtbG9nIl0sInRlbXBsYXRlIjpbInNhdmVkc2VhcmNoIiwiYWxlcnQiXX19

treeEncode

string

いいえ

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. リソース関連パラメーター

パラメーター	タイプ	必須	説明
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 を使用します：

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

この構成を適用すると、左側のナビゲーションウィンドウに、プロジェクト website-01 配下の Logstore delete-log が表示されます。Logstore は展開され、[クイック検索] と [アラート] の 2 つのサブ機能が表示されます。

ダッシュボードの高度なパラメーター

ダッシュボードを iframe に埋め込むと、iframe の高さは自動的に設定されません。これにより、親ページ用と iframe 内のダッシュボード用の 2 つのスクロールバーが作成される可能性があります。高度なパラメーターを使用して、ダッシュボードの高さを自動的に調整します。

iframe の高さは、Simple Log Service が `postmessage` イベントで渡す `dashboardHeight` プロパティから取得できます。次のコードに例を示します：

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