このトピックでは、自作の Web サイトに Log Service コンソールページを埋め込む際に、パラメーターを設定してページの表示効果をカスタマイズする方法について説明します。
Log Service を使用すると、特定のコンソールページを自作の Web サイトに埋め込み、ログインせずにこれらのページにアクセスすることができます。 クエリの視覚化とログの分析が簡略化されます。 さらに、Log Service には、コンソールページをサードパーティの Web ページと統合するためのカスタムパラメーターが用意されています。
URL エンコーディング
https://sls4service.console.aliyun.com/next/project/${ProjectName}/{logsearch|savedsearch|dashboard}/${LogstoreName}/?Parameter 1&Parameter 2
次の例は、未処理のログクエリページの URL を示しています。 readOnly パラメーターは、ページ上のすべての編集ボタンを非表示にするかどうかを指定するカスタム UI パラメーターです。
https://sls4service.console.aliyun.com/next/project/projectaaa/logsearch/logstorebbb/?readOnly=true
- $ {ProjectName} および $ {LogstoreName} を除くすべてのパラメーターは
/?
の後、つまり URL の最後に配置する必要があります。 - URL に複数のパラメーターを設定し、それらをアンパサンド (
&
) で区切ります。 - ダークテーマを使用するには、
theme=dark&sls_iframe=true
パラメーターを URL に追加します。
共通パラメーター
機能 | パラメーター | データ型 | 必須項目 | 説明 | 例 |
---|---|---|---|---|---|
サイドバーを隠す | hideTopbar | Boolean | いいえ | 上部のナビゲーションバーを非表示にするかどうかを指定します。 | hideTopbar=true |
hideSidebar | Boolean | いいえ | 左側のナビゲーションペインを非表示にするかどうかを指定します。 | hideSidebar=true | |
左側のナビゲーションペインで [戻る] ボタンを非表示にする | hiddenBack | Boolean | いいえ | 左側のナビゲーションペインで [戻る] ボタンを非表示にするかどうかを指定します。 | hiddenBack=true |
ナビゲーションペインにリストされているリソースをフィルタリングする | keyFilter | JSON | いいえ | 左側のナビゲーションペインにリストされているリソースをフィルタリングします。 フィルタリングできるリソースは次のとおりです。
注
|
{"logstore":["logstore-xx"],"savedsearch":["savedsearch-xx"],"dashboard":["dashboard-xx"]} |
時間セレクターを設定する | queryTimeType | Long | いいえ | クエリの時間範囲を指定します。
設定可能な値は以下の通りです。
|
queryTimeType=1 |
startTime | Timestamp (date) | いいえ | クエリの開始時刻を指定します。 このパラメーターは、queryTimeType パラメーターが 99 に設定された場合のみ指定します。
|
startTime=1547776643 | |
endTime | Timestamp (date) | いいえ | クエリの終了時刻を指定します。 このパラメーターは、queryTimeType パラメーターが 99 に設定された場合のみ指定します。
|
endTime=1547776731 |
queryTimeType | 説明 |
---|---|
1 | 1 分 (時間範囲は秒単位で指定できます。) |
2 | 5 分 (時間範囲は秒単位で指定できます。) |
3 | 15 分 (時間範囲は秒単位で指定できます。) |
4 | 1 時間 (時間範囲は秒単位で指定できます。) |
5 | 4 時間 (時間範囲は秒単位で指定できます。) |
6 | 1 日 (時間範囲は秒単位で指定できます。) |
7 | 1 週間 (時間範囲は秒単位で指定できます。) |
8 | 30 日 (時間範囲は秒単位で指定できます。) |
9 | 今月 (時間範囲は秒単位で指定できます。) |
10 | カスタム (時間範囲は秒単位で指定できます。) |
11 | 1 分 (時間範囲は分単位で指定できます。) |
12 | 15 分 (時間範囲は分単位で指定できます。) |
13 | 1 時間 (時間範囲は時間単位で指定できます。) |
14 | 4 時間 (時間範囲は時間単位で指定できます。) |
15 | 1 日 (時間範囲は日単位で指定できます。) |
16 | 1 週間 (時間範囲は日単位で指定できます。) |
17 | 30 日 (時間範囲は日単位で指定できます。) |
18 | 今日 (時間範囲は日単位で指定できます。) |
19 | 昨日 (時間範囲は日単位で指定できます。) |
20 | 一昨日 (時間範囲は日単位で指定できます。) |
21 | 今週 (時間範囲は日単位で指定できます。) |
22 | 先週 (時間範囲は日単位で指定できます。) |
23 | 今月 (時間範囲は日単位で指定できます。) |
24 | 今四半期 (時間範囲は日単位で指定できます。) |
25 | 今年 (時間範囲は日単位で指定できます。) |
26 | カスタム (時間範囲は日単位で指定できます。) |
99 | カスタムの時間範囲を指定します。 queryTimeType を 99 に設定する場合は、startTime パラメーターと endTime パラメーターを指定する必要があります。 |
- サイドバーを非表示化
- URL
生ログクエリページの上部ナビゲーションバーと左側のナビゲーションペインを非表示にするには、次のように URL に hideTopbar=true&hideSidebar=true を追加します。
https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?hideTopbar=true&hideSidebar=true
- 表示効果
- URL
- 左側のナビゲーションペインで [戻る] ボタンを非表示にします。
- URL
左側のナビゲーションウィンドウで [戻る] ボタンを非表示にするには、次のように URL で hiddenBack パラメーターを true に設定します。
https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?hiddenBack=true
- 表示効果
- URL
- 左側のナビゲーションウィンドウにリストされているリソースをフィルタリングします。
- URL
左側のナビゲーションペインにリストされているリソースをフィルタリングするには、URL に JSON 形式の keyFilter パラメーター値を設定します。 たとえば、名前に
aegis
を含むログストア、名前が500osslog
であるログストア、名前に oss を含む保存済み検索項目、および名前に ddos を含むダッシュボードを表示する必要があるとします。次のように、keyFilter パラメーターの値を JSON オブジェクトに設定できます。{"logstore":["aegis-","500osslog"],"savedserach":["oss"],"dashboard":["ddos"]}
。aegis-
を使用すると、名前にaegis
を含むすべてのログストアがあいまい一致で照会されます。500osslog
によって名前が500osslog
であるログストアが完全一致で照会されます。 ハイフン (-
) を使用してあいまい一致検索ができます。https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?keyFilter=%7B"logstore":%5B"aegis-","500osslog"%5D,"savedsearch":%5B"oss"%5D,"dashboard":%5B"ddos"%5D%7D
- 表示効果
- URL
- 時間セレクターを設定します。
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?queryTimeType=2
- 表示効果
- URL
生ログクエリページのパラメーター
パラメーター | データ型 | 説明 | 必須項目 |
---|---|---|---|
ProjectName | String | プロジェクトの名前です。 | はい |
LogstoreName | String | ログストアの名前 | はい |
queryString | String | クエリに使用される文字列です。 | いいえ |
readOnly | Boolean | ログストアページの編集および変更ボタンを非表示にするかどうかを指定します。[共有]、[インデックス属性]、[検索条件を保存]、[アラームとして保存] など。 | いいえ |
encode | String | クエリ文字列をエンコードするかどうかを指定します。 queryString パラメーターで特殊文字を回避するには encode パラメーターを base64 に設定すると、 queryString パラメーターは Base64 でエンコードされた文字列になります。 | いいえ |
hiddenEtl | Boolean | [データ変換] ボタンを非表示にするかどうかを指定します。 | いいえ |
hiddenShare | Boolean | [共有] ボタンを非表示にするかどうかを指定します。 | いいえ |
hiddenIndexSetting | Boolean | [インデックス属性] ボタンを非表示にするかどうかを指定します。 | いいえ |
hiddenSavedSearch | Boolean | [検索条件の保存] ボタンを非表示にするかどうかを指定します。 | |
hiddenAlert | Boolean | [アラート] ボタンを非表示にするかどうかを指定します。 | いいえ |
hiddenQuickAnalysis | Boolean | クイック分析検索バーを非表示にするかどうかを指定します。 デフォルト値は False です。 | いいえ |
keyDispalyMode | String | ログエントリの表示モードを指定します。
|
いいえ |
- URL に queryString パラメーターを指定します。
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?queryString=* | select count(1) as pv ,status group by status
- 表示効果
- URL
- URL に readOnly パラメーターを指定します。
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
- 表示効果
- URL
保存された検索ページのパラメーター
パラメーター | データ型 | 説明 | 必須項目 |
---|---|---|---|
ProjectName | String | プロジェクトの名前です。 | はい |
savedSearchName | String | 保存された検索条件の名前です。 | はい |
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/savedsearch/${savedSearchName}
- 表示効果
ダッシュボードページのパラメーター
パラメーター | データ型 | 説明 | 必須項目 |
---|---|---|---|
ProjectName | String | プロジェクトの名前です。 | はい |
dashboardName | String | ダッシュボードの名前を入力します。 | はい |
filters | String | フィルター条件です。 このパラメーターの値は手動でエンコードする必要があります。
元のフォーマットは filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2 になります。
|
いいえ |
token | JsonString | 置換される変数です。 このパラメーターの値は手動でエンコードする必要があります。
元のフォーマットは になります。
|
いいえ |
readOnly | Boolean | ダッシュボードページの編集ボタンと設定ボタンを非表示にするかどうかを指定します。[編集]、[アラート]など。 | いいえ |
hiddenFilter | Boolean | フィルター条件を非表示にするかどうかを指定します。 | いいえ |
hiddenToken | Boolean | 置換する変数を非表示にするかどうかを指定します。 | いいえ |
hiddenProject | Boolean | プロジェクト情報を非表示にするかどうかを指定します。 | いいえ |
autoFresh | String | ダッシュボードページを更新する間隔。30 秒 または 5 分 など。 最小更新間隔は 15 秒です。
|
いいえ |
- URL に readOnly パラメーターを指定して、ダッシュボードページの編集ボタンを非表示にします。
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}/?readOnly=true
- 表示効果
- URL
- ダッシュボードの URL で 2 つのフィルター条件を指定します (key 1 = value 1 and key 2 = value 2)。 URL で 2 つのフィルター条件を指定した後、クエリと分析用のステートメントが実装される前に、ダッシュボード内のすべてのグラフにフィルター条件が適用されます。
注 filters パラメーターの値は手動でエンコードする必要があります。
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('filters=key1:value1&filters=key2:value2')
- 表示効果
- URL
- URL でトークンパラメーターを指定して、変数を置き換えるための複数の条件を追加します。
注 トークンパラメーターの値は手動でエンコードする必要があります。
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboardId}?encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]')
- 表示効果
- URL
- URL で autoFresh パラメーターを指定して、ダッシュボードページを 5 分ごとに更新します。
- URL
https://sls4service.console.aliyun.com/next/project/${ProjectName}/dashboard/${dashboard_name}/?autoFresh=5m
- 表示効果
- URL
ダッシュボードページの高度なパラメーター
ダッシュボードページに iframe を埋め込むと、iframe の高さを決められません。 この場合、次のように 2 つのスクロールバーが同時に表示されることがあります。
- iframe 外のダッシュボードページのスクロールバー
- iframe 内のダッシュボードページのスクロールバー
この問題を解決するには、Log Service の postMessage メソッドを使用して、ダッシュボードページの高さを取得し、その値を iframe の高さとして指定します。
<! 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/next/project/${projectName}/dashboard/${dashboardName}?hideTopbar=true&product=${productCode}">
</body>
</html>