このトピックでは、自作の Web サイトに Log Service コンソールページを埋め込む際に、パラメーターを設定してページの表示効果をカスタマイズする方法について説明します。

Log Service を使用すると、特定のコンソールページを自作の Web サイトに埋め込み、ログインせずにこれらのページにアクセスすることができます。 クエリの視覚化とログの分析が簡略化されます。 さらに、Log Service には、コンソールページをサードパーティの Web ページと統合するためのカスタムパラメーターが用意されています。

URL エンコーディング

すべての UI パラメーターは、次の形式で 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 いいえ 左側のナビゲーションペインにリストされているリソースをフィルタリングします。 フィルタリングできるリソースは次のとおりです。
  • ログストア
  • 保存された検索条件
  • ダッシュボード
  • ハイフン (-) を使用してあいまい一致検索ができます。
  • パラメーター値は JSON 形式で、encodeURI 関数を使用してエンコードする必要があります。
{"logstore":["logstore-xx"],"savedsearch":["savedsearch-xx"],"dashboard":["dashboard-xx"]}
時間セレクターを設定する queryTimeType Long いいえ クエリの時間範囲を指定します。
設定可能な値は以下の通りです。
  • 1 から 26:これらの各整数は時間範囲を示します。 詳細については、下表をご参照ください。
  • 99:カスタム時間範囲を示します。 queryTimeType を 99 に設定する場合は、startTime および endTime パラメーターを指定する必要があります。
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 で hiddenBack パラメーターを true に設定します。
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?hiddenBack=true
    • 表示効果 [戻る] ボタンを非表示化
  • 左側のナビゲーションウィンドウにリストされているリソースをフィルタリングします。
    • 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
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}/?queryTimeType=2
    • 表示効果 時間セレクターを設定

生ログクエリページのパラメーター

パラメーター データ型 説明 必須項目
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 ログエントリの表示モードを指定します。
  • Single:ログエントリを 1 行で表示することを指定します。
  • Multi:ログエントリを複数行で表示することを指定します。
いいえ
  • URL に queryString パラメーターを指定します。
    • URL
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?queryString=* | select count(1) as pv ,status group by status
    • 表示効果queryString パラメーターを指定
  • URL に readOnly パラメーターを指定します。
    • URL
      https://sls4service.console.aliyun.com/next/project/${ProjectName}/logsearch/${LogstoreName}?readOnly=true
    • 表示効果readOnly パラメーターを指定

保存された検索ページのパラメーター

パラメーター データ型 説明 必須項目
ProjectName String プロジェクトの名前です。 はい
savedSearchName String 保存された検索条件の名前です。 はい
  • URL
    https://sls4service.console.aliyun.com/next/project/${ProjectName}/savedsearch/${savedSearchName} 
    					
  • 表示効果 クイック検索

ダッシュボードページのパラメーター

パラメーター データ型 説明 必須項目
ProjectName String プロジェクトの名前です。 はい
dashboardName String ダッシュボードの名前を入力します。 はい
filters String フィルター条件です。 このパラメーターの値は手動でエンコードする必要があります。

元のフォーマットは encodeURIComponent('filters=key1:value1&filters=key2:value2') です。

エンコード後、フォーマットは filters%3Dkey1%3Avalue1%26filters%3Dkey2%3Avalue2 になります。
いいえ
token JsonString 置換される変数です。 このパラメーターの値は手動でエンコードする必要があります。

元のフォーマットは encodeURIComponent('token=[{"key": "projectName","value":"1"}, {"key": "xxx", "value": "yy"}]') です。

エンコード後、フォーマットは "token%3D%5B%7B%22key%22%3A%20%22projectName%22%2C%22value%22%3A%221%22%7D%2C%20%7B%22key%22%3A%20%22xxx %22%2C%20%22value%22%3A%20%22yy%22%7D%5D" になります。
いいえ
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 で 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
      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
    • 表示効果自動更新

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

ダッシュボードページに iframe を埋め込むと、iframe の高さを決められません。 この場合、次のように 2 つのスクロールバーが同時に表示されることがあります。

  • iframe 外のダッシュボードページのスクロールバー
  • iframe 内のダッシュボードページのスクロールバー

この問題を解決するには、Log Service の postMessage メソッドを使用して、ダッシュボードページの高さを取得し、その値を iframe の高さとして指定します。

サンプルコードは次のとおりです。
$ {projectName} などのパラメーターを業務ニーズ固有の値に置き換える必要があります。
<! 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>