控制台内嵌及分享

如果您需要将云监控页面分享给其他人或者嵌入到第三方系统,可以通过本文生成免密且免登录的链接进行分享。

注意事项

概念介绍

生成的免密免登录链接主要由固定url,配置参数项,访问凭证三部分组成,其中访问凭证是指一个拥有时效性的令牌,每个令牌仅支持在浏览器中打开一次。获取链接的用户无需登录阿里云账户,就可以访问指定页面。

链接URL格式示例如下:

https://cmsnext.console.aliyun.com/next/region/<RegionId>/workspace/<Workspace名称>/app/apm/application-list?参数1&参数2
说明
  • <RegionId><Workspace名称>之外的参数必须位于URL末尾的问号(?)之后。

  • 支持同时设置多个参数,参数之间通过and(&)连接。

权限设置必读

  1. 若您使用RAM用户操作,根据需要进行的操作不同,请参考如下表格设置权限:

    重要

    生成的链接会继承CreateTicket接口调用者已有的权限,为避免使用主账号调用接口而造成的数据安全风险,在该场景中建议使用RAM用户。

    场景

    授权操作

    生成单个链接

    1. 授予指定资源权限的步骤,请参见RAM自定义授权示例

    2. 授予调用CreateTicket接口,具体操作步骤请参见RAM用户授权创建自定义权限策略

    {
        "Version": "1",
        "Statement": [
            {
                "Effect": "Allow",
                "Action": "cms:CreateTicket",
                "Resource": "acs:cms:*:*:ticket/*"
            }
        ]
    }

    需要动态生成链接

    1. 创建RAM用户创建可信实体为阿里云账号的RAM角色

    2. RAM用户授予STS的管理权限(AliyunSTSAssumeRoleAccess),为RAM角色授予调用CreateTicket接口的权限,授权操作请参见RAM角色授权RAM自定义授权示例

  2. 若您使用主账号操作,默认拥有全部权限,无需配置。

生成单个免密免登录链接

当您临时需要分享页面给他人时,使用以下方式可快速获取一个免密免登录链接。

  1. 准备链接:登录云监控2.0控制台<RegionId><Workspace名称>取值参考工作空间名称与所在地区。

    https://cmsnext.console.aliyun.com/next/region/<RegionId>/workspace/<Workspace名称>/app/apm/application-list
  2. 获取Ticket凭证:调用CreateTicket获取Ticket,每个生成的Ticket只能被同一个浏览器或主机访问,有效期默认一天。

  3. 拼接生成链接:将上述准备的链接与Ticket凭证拼接,生成免密且免登录访问链接。

    https://cmsnext.console.aliyun.com/next/region/<RegionId>/workspace/<Workspace名称>/app/apm/application-list?sls_ticket=eyJ***************.eyJ******************.KUT****************
  4. 链接测试:将生成的链接输入浏览器地址栏进行测试。若可正常打开,则说明已成功生成免登录链接。

    重要
    • 此处测试即为首次在浏览器中打开免登录链接,测试完成后,Ticket会失效。需要重新获取Ticket。

    • 建议将链接复制到文件中,然后传输文件。如果直接在第三方软件中发送链接,可能因为被第三方软件读取而失效。

嵌入第三方系统,如何动态生成链接

如果在第三方系统中嵌入控制台页面,由于Ticket会过期导致链接失效,因此需要在应用程序中动态调用CreateTicket接口,以定期获取Ticket。

说明
  • Ticket默认有效时长为24小时。

  • 生成Ticket的总数没有限制,CreateTicket QPS限制为每用户10次/s。

  1. RAM用户生成Ticket,此处以Java为例:

    1. 添加Maven依赖:在Java项目的根目录下,打开pom.xml文件,添加以下代码:

          <dependency>
          <groupId>com.aliyun</groupId>
          <artifactId>cms20240330</artifactId>
          <version>2.3.0</version>
          </dependency>
          <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>tea-openapi</artifactId>
            <version>0.3.2</version>
          </dependency>
          <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>tea-console</artifactId>
            <version>0.0.1</version>
          </dependency>
          <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>tea-util</artifactId>
            <version>0.2.21</version>
          </dependency>
    2. 使用RAM用户密钥创建Ticket。

      import com.aliyun.tea.*;
      
      public class Sample {
      
          /**
           * 使用AK&SK初始化账号Client
           * @return Client
           * @throws Exception
           */
          public static com.aliyun.cms20240330.Client createClient() throws Exception {
              // 工程代码泄露可能会导致 AccessKey 泄露,并威胁账号下所有资源的安全性。以下代码示例仅供参考。
              // 建议使用更安全的 STS 方式。
              com.aliyun.teaopenapi.models.Config config = new com.aliyun.teaopenapi.models.Config()
                      // 必填,请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_ID。
                      .setAccessKeyId(System.getenv("ALIBABA_CLOUD_ACCESS_KEY_ID"))
                      // 必填,请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_SECRET。
                      .setAccessKeySecret(System.getenv("ALIBABA_CLOUD_ACCESS_KEY_SECRET"));
              // Endpoint 请参考 https://api.aliyun.com/product/Sls
              config.endpoint = "cn-shanghai.log.aliyuncs.com";
              return new com.aliyun.cms20240330.Client(config);
          }
      
          public static void main(String[] args_) throws Exception {
              java.util.List<String> args = java.util.Arrays.asList(args_);
              com.aliyun.cms20240330.Client client = Sample.createClient();
              com.aliyun.cms20240330.models.CreateTicketRequest createTicketRequest = new com.aliyun.cms20240330.models.CreateTicketRequest();
              com.aliyun.teautil.models.RuntimeOptions runtime = new com.aliyun.teautil.models.RuntimeOptions();
              java.util.Map<String, String> headers = new java.util.HashMap<>();
              try {
                  com.aliyun.cms20240330.models.CreateTicketResponse resp = client.createTicketWithOptions(createTicketRequest, headers, runtime);
                  com.aliyun.teaconsole.Client.log(com.aliyun.teautil.Common.toJSONString(resp));
              } catch (TeaException error) {
                  // 此处仅做打印展示,请谨慎对待异常处理,在工程项目中切勿直接忽略异常。
                  // 错误 message
                  System.out.println(error.getMessage());
                  // 诊断地址
                  System.out.println(error.getData().get("Recommend"));
                  com.aliyun.teautil.Common.assertAsString(error.message);
              } catch (Exception _error) {
                  TeaException error = new TeaException(_error.getMessage(), _error);
                  // 此处仅做打印展示,请谨慎对待异常处理,在工程项目中切勿直接忽略异常。
                  // 错误 message
                  System.out.println(error.getMessage());
                  // 诊断地址
                  System.out.println(error.getData().get("Recommend"));
                  com.aliyun.teautil.Common.assertAsString(error.message);
              }
          }
      }
  2. 根据返回的Ticket拼接出免密链接。

调整页面显示效果

通过设置控制台内嵌参数,可调整内嵌页面的显示效果。云监控2.0提供了一系列UI参数与第三方自建Web页面进行融合展示。

参数表

公共参数表

参数名

类型

是否必选

说明

示例

hideSiderbar

boolean

隐藏左侧菜单

hideSiderbar=true

hideBreadcrumb

boolean

隐藏面包屑

hideBreadcrumb=true

hideTopbar

boolean

隐藏阿里云公共头

hideTopbar=true

hiddenBack

boolean

隐藏返回按钮

image.png

hiddenBack=true

hiddenCopilot

boolean

隐藏copilot

image.png

hiddenCopilot=true

hideTopbarTabs

boolean

隐藏app 下的tabs

image.png

hideTopbarTabs=true

hideEntityTopbar

boolean

隐藏app 的header

image.png

hideEntityTopbar=true

var_app_forbiddenTabs

string

隐藏任意tab,隐藏多个tab,需要用英文逗号隔开

var_app_forbiddenTabs=metric-explorer,log-explorer

readOnly

boolean

只读模式:禁止仪表盘编辑

readOnly=true

hideAlertManagement

boolean

隐藏告警(目前仅适配应用监控)

hideAlertManagement=true

ONLY_ENTITY_OVERVIEW

boolean

仅仅限制在实体查询的路由内跳转,跳出显示暂无权限。PS: 第一次进入的路由不会检查

ONLY_ENTITY_OVERVIEW=true

queryTimeType

long

指定查询和分析的时间范围。取值范围如下:

  • 1~26:指定查询和分析的时间范围为数字对应的区间。

  • -2:自定义(相对)。此时必须配置startend。例如:start:-10m,end:now。

  • -3:自定义(整点)。此时必须配置startend。例如:start:-2h,end:absolute。

  • 99:自定义时间范围。此时必须设置startTimeendTime,且只能配置为时间戳。

queryTimeType=2

startTime

timestamp(date)

指定查询时间范围的起始时间。当queryTimeType设置为99时生效。

startTime=1547776643

endTime

timestamp(date)

指定查询时间范围的结束时间。当queryTimeType设置为99时生效。

endTime=1547776731

Data Explorer & Dashboard

参数名

类型

是否必选

说明

示例

renderChartOnly

boolean

只渲染 Chart

renderChartOnly=true

hideDatasourceType

boolean

隐藏数据源选择

image.png

hideDatasourceType=true

fixDatasourceConfig

boolean

禁用数据源配置image.png

fixDatasourceConfig=true

chartType

Enum

图表类型:取值tablepro,linepro

image.png

chartType=linepro

hideChartSelect

boolean

hideChartSelect=true

queries

Array<Query>

查询配置

image.png

queries=[{"refId":"A",

"datasource":{"type":"prometheus"},

"regionId":"cn-beijing",

"clusterId":"caa66a552a02846fbb15de610be39ce3c",

"expr":"up"}]

datasourceTypeList

Array<string>

数据源插件列表

datasourceTypeList=["prometheus","logstore"]

datasourceConfig

Array<Object>

各数据源插件的datasourceConfig

datasourceConfig={"regionList":[{"label":"北京","value":"cn-beijing"},{"label":"上海","value":"cn-shanghai"}],"clusterList":[{"label":"可视化集群","value":"caa66a552a02846fbb15de610be39ce3c"},{"label":"可视化集群2","value":"cluster2"}],"projectList":[{"label":"project1","value":"project1"},{"label":"project2","value":"project2"}],"logstoreList":[{"label":"logstore1","value":"logstore1"},{"label":"logstore2","value":"logstore2"}]}

tags

Array

标签

tags=[{"key":"a","value":"b"}]