开发者工具

Qingcloud 应用中心提供了 appcenter.css 样式库和 qclib.js 开发包,用于生成 Qingcloud 控制台的标准组件,并可以与控制台进行交互。

appcenter.css 样式库

应用以 iframe 方式嵌入 Qingcloud 控制台,因此需要展示上尽量保持与控制台风格统一。Qingcloud 应用中心提供了一套 css 样式库,定义了一系列组件类名和 html 代码结构,调用者可以在动态语言模板(或静态 html 文件)中按规范生成 html 代码。

常用页面组件包含toolbar、button、表格、form表单、tooltip、弹出层、提示框、图表等,以 button 为例。

首先,在页面中引用 appcenter.css 样式文件:

<link href="https://console.qingcloud.com/static/css/appcenter.css" rel="stylesheet" type="text/css" />

在页面中按控件样例的代码生成 html,保持类名,如:

<a class="btn" href="#"><span class="icon icon-create"></span><span class="text">添加></span></a>

即可生成如下的按钮:

添加

qclib.js 工具包

Qingcloud 应用中心还提供了一个 qclib.js 的应用工具包。该工具包有生成标准 Qingcloud 控制台组件的 Mods 模块,以及与控制台交互的App模块。后续还会提供直接在控制台调用 Qingcloud API 的 API 模块。

上述 button 的例子,使用Mods模块,可以生成 button 的 html 代码:

<script type="text/javascript" src="https://console.qingcloud.com/static/dist/js/qclib.min.js"></script>
<script type="text/javascript">
  var btn = new QCLIB.Mods.Button({type: 'create', text:'创建'});
  // 可以直接操作 Dom 元素
  some_element.appendChild(btn.el);
  // 或者获取 Dom 元素的 html 代码
  some_element.innerHTML = btn.html();
  // 也可以链式操作
  some_element.innerHTML = new QCLIB.Mods.Button({type: 'create', text:'创建'}).html();
</script>

qclib 的 App 模块提供了一些与 Qingcloud 控制台交互的方法:

<script type="text/javascript">
  // 设置控制台的 iframe 应用高度
  var height = getPageHeight();
  QCLIB.App.setAppHeight(height);

  // 返回控制台应用中心页面
  some_button.addEventListener('click', function(e) {
    QCLIB.App.toAppCenter();
  }, false);

  // 改变控制台 URL,下面的例子会将控制台改为
  // "https://console.qingcloud.com/{zone}/overview/"
  var location = "overview";
  some_button.addEventListener('click', function(e) {
    QCLIB.App.setLocation(location);
  }, false);
</script>


以下是各种组件使用 qclib.js Mods 模块生成组件,以及 html 的样式结构的代码示例

toolbar & button

>>查看 javascript 代码
  var toolbar = new QCLIB.Mods.Toolbar({
    buttons: [
      {type: 'refresh'},
      {type: 'create', text: '添加'},
      {type: 'start', text: '启动', forbidden: true},
      {type: 'stop', text: '关机', forbidden: true},
      {type: 'more', text: '更多操作', sub_buttons: [
        {type: 'restart', text: '重启', forbidden: true},
        {type: 'volumes', text: '硬盘', forbidden: true},
        {type: 'keypairs', text: '加载SSH密钥', forbidden: true},
        {type: 'security_groups', text: '加载防火墙规则', forbidden: true},
        {type: 'vxnet', text: '加入网络', forbidden: true},
        {type: 'resize', text: '更改配置', forbidden: true},
        {type: 'snapshot', text: '创建备份', forbidden: true},
        {type: 'alarms', text: '绑定告警策略', forbidden: true},
        {type: 'reset', text: '重置系统', forbidden: true},
        {type: 'terminate', text: '删除', forbidden: true},
      ]}
    ],
    search: true,
    pagination: true
  });
  
>>查看 html 结构

表格

ID 名称 状态 公网IP 类型 告警状态 创建于
i-xxxxxxxx 主机1   运行中 xxx.xxx.xxx.xxx 1核2G 无监控 5天前
i-xxxxxxxx 主机2   运行中 1核2G 2个月前
>>查看 javascript 代码
  // 定义嵌套在table中的dropdown组件
  // 可以分别定义filter的字段名和展示名称
  var dropdown = new QCLIB.Mods.Dropdown({
    filters: [
      {filter: 'pending', text: '等待中'},
      {filter: 'running', text: '运行中'},
      {filter: 'stopped', text: '已关机'},
      {filter: 'suspended', text: '已暂停'},
      {filter: 'terminated', text: '已删除'},
      {filter: 'ceased', text: '已销毁'}
   ]});
  // 也可以省略展示名称,字段名与展示名统一
  // var dropdown = new QCLIB.Mods.Dropdown({
  //   filters: ['pending','running','stopped','suspended','terminated','ceased']
  // });
  // 定义嵌套在table中的icon插件
  var icon = new QCLIB.Mods.Icon({type: 'status', status: 'running'});
  // table的head和body都可以嵌套组件
  var qctable = new QCLIB.Mods.Table({
    checkbox: true,
    head: ['ID', '名称', ['状态', dropdown], '公网IP', '类型', '告警状态', '创建于'],
    body: [['i-xxxxxxxx', '主机1', [icon, ' 运行中'], 'xxx.xxx.xxx.xxx', '1核2G', '无监控', '5天前']]
  });
  // 可以动态添加一行内容
  var alarm_icon = new QCLIB.Mods.Icon({type: 'alarms', alarms: 'alarm-ok'});
  var row = ['i-xxxxxxxx', '主机1', [icon, ' 运行中'], '', '1核2G', alarm_icon, '2个月前'];
  qctable.appendRow(row);
  
>>查看 html 结构

form表单

名称
数量
类型
IO 吞吐 128 MB/s,单块最小容量10GB、最大容量1000GB。
监控周期
容量
10 GB
GB 10GB - 1000GB
>>查看 javascript 代码
  // 每个表单项作为一个item添加
  // 如果有多行tips,可以用数组作为参数,否则可以用一个对象或字符串。
  // 当使用字符串时,自动作为text,而不指定额外的className
  var form = new QCLIB.Mods.Form({
    items: [
      {label: '名称', type: 'text', name: 'volume_name'},
      {label: '数量', type: 'text', length:'medium', name: 'count', value: 1},
      {label: '类型', type: 'radio', name: 'volume_type', radios: [
        {text: '性能型', value: "0", checked: true},
        {text: '容量型', value: "1"}
      ], tips: [
        {
          text: 'IO 吞吐 128 MB/s,单块最小容量10GB、最大容量1000GB。',
          className: 'volume'
        },
        {
          text: 'IO 吞吐 36 MB/s,单块最小容量100GB、最大容量5000GB。',
          className: 'volume'
        }
      ]},
      {label: '监控周期', type: 'select', name: 'period', options: [
        {value: '1m', text: '1分钟'}, {value: '5m', text: '5分钟', selected: true}
      ]},
      {label: '容量', type: 'slider', name: 'size', value: '10', unit: 'GB',
       tips: '10GB - 1000GB'
      }
    ]
  });
  
>>查看 html 结构

tooltip

创建备份
>>查看 javascript 代码
  var tooltip = new QCLIB.Mods.Tooltip({
    text: '创建备份',
    rel: document.querySelectorAll('.wrapper .icon-snapshot')[0]
  });
  
>>查看 html 结构

弹出层

>>查看 javascript 代码
  var modal = new QCLIB.Mods.Modal({
    title: '创建私有网络',
    width: 600
  });
  var form = new QCLIB.Mods.Form({
    legend: '创建私有网络',
    items: [
      {label: '名称', type: 'text', name: 'vxnet_name'},
      {label: '数量', type: 'text', name: 'count', value: 1, length: 'medium'},
      {label: '', type: 'more', text: '显示高级选项...'}
    ],
    actions: {submit: '提交', cancel: '取消'}
  });
  modal.addContent(form);
  
>>查看 html 结构

提示框

>>查看 javascript 代码
  var qcconfirm = new QCLIB.Mods.Confirm({
    type: 'info',
    message: '确定要删除私有网络?'
  });
  
>>查看 html 结构

图表

图表

CPU

单位:  % CPU
间隔:  5分钟
18:00 19:00 20:00 21:00 22:00 23:00 0 20 40 60 80 100
>>查看 javascript 代码

    // javascript库暂不支持
  
>>查看 html 结构