机器数据分析平台

  • 机器数据分析平台 > 产品手册 > 应用平台 > XML 引用 > xml参考手册

    xml参考手册

    最近更新时间:2020-01-15 19:30:08

    应用平台支持一套描述语言供开发者开发应用。本教程介绍系统支持的开发元素。

    数据传递

    token

    token 是一种变量,用于在 XML 中传递值。 token 可以在支持 token 的标签(目前支持 input、operation-bar)上定义一个 token 变量,在需要使用该变量的地方使用 {token} 即可实现值绑定。如果 token 变量值是一个对象,支持 {token.attr} 的形式使用。

    布局标签

    row

    页面中的每一行由<row>标签来定义。

    row属性

    属性 描述 默认值 说明
    type 行内元素布局方式 “split” type="split":行内的子元素等宽平均排列

    type="flex":行内的子元素宽度根据元素内容自动填充
    gutter 栅格间隔,单位为像素值 [0, 0] 使用数组形式同时设置 [水平间距, 垂直间距],如 gutter=[0,0]

    flex属性

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),以下简称"项目"。

    属性 描述 默认值 说明
    justify flex容器内的项目水平布局方式 "start" justify="start":项目从行首开始排列

    justify= "end", 项目从行尾开始排列

    justify="center":项目水平居中排列

    justify="space-around":每个项目两侧的间隔相等。所以,项目之间的间隔比项目与flex容器边框的间隔大一倍

    justify="space-between":两端对齐,项目之间的间隔都相等
    align flex容器内的项目垂直方向的布局方式 "top" align="top":与侧轴起点对齐

    align="middle":与侧轴中点对齐

    align="bottom":与侧轴终点对齐

    <row>在 split 布局下可以包含任意类型的子元素。而在 flex 布局下只能包含col子元素。

    col

    <col>为水平方向上的列,<col>必须作为<row>的子元素使用,不可以单独使用。

    col属性

    属性 描述 默认值
    offset 栅格左侧的间隔格数,间隔内不可以有栅格 0
    order 栅格顺序,flex 布局模式下生效 0
    pull 栅格向左移动格数 0
    push 栅格向右移动格数 0
    span 栅格占位格数,span=0 时相当于 display: none -

    内容标签

    html

    <html>标签用来渲染标准 html 元素,可直接写入html元素,也可通过src属性来引入其他地址的 html 元素。

    • 直接写html元素

      <html>展示内容</html>
      
    • 引入当前 app 下的 html 文件

      <html src="<file_name>.html">
      </html>
      
    • 引入其他 app 下的 html 文件

      <html src="<other_app_name>:<file_name>.html">
      </html>
      

    input

    <input>标签用于输入内容,可写入type属性:

    • type:用于不同类型的输入,支持文本框、下拉列表、多选框、单选框、复选框、事件选择器

    可指定每个<input>元素的名称、初始值、可选项:

    • label:设置标签名称
    • initial-value:设置 input 初始值
    • choice:对于拥有可选项的input类型,如下拉列表、多选框元素,可以通过choice设置可选项。

    输入框的内容可以通过 token 进行绑定,具体使用方式参见token。当 input使用token绑定内容时,支持设置 changeWhen 属性来控制 token 的变化时机,目前支持 'change', 'blur' 两个值。

    注意:input type 为 multiselect 或 checkbox 时,<initial-value>支持使用数组类型。

    text 普通文本类 input

    <input type="text" token="token">
      <label>标签</label>
      <initial-value>文本内容</initial-value>
    </input>
    
    <input type="dropdown" token="token">
      <label>选择一个选项</label>
      <initial-value>one</initial-value>
      <choice value="one">选项一</choice>
      <choice value="two">选项二</choice>
      <choice value="third">选项三</choice>
    </input>
    

    multiselect 多选列表类 input

    <input type="multiselect" token="token">
      <label>选择一个或者多个选项</label>
      <initial-value>{['one', 'two']}</initial-value>
      <choice value="*">全选</choice>
      <choice value="one">选项一</choice>
      <choice value="two">选项二</choice>
      <choice value="third">选项三</choice>
    </input>
    

    radio 单选框类 input

    <input type="radio" token="token">
      <label>选择一个选项</label>
      <initial-value>one</initial-value>
      <choice value="one">选项一</choice>
      <choice value="two">选项二</choice>
    </input>
    

    checkbox 复选框类 input

    <input type="checkbox" token="token">
      <label>选择一个选项</label>
      <initial-value>one<initial-value>
      <choice value="one">选项一</choice>
      <choice value="two">选项二</choice>
      <choice value="third">选项三</choice>
    </input>
    

    time 时间选择器类 input

    <input type="time" token="token">
        <label>时间</label>
        <initial-value>
          <earliest>-5m</earliest>
          <latest>-2m</latest>
        </initial-value>
    </input>
    

    time类型的input支持设置初始开始时间、结束时间,通过设置earliestlatest的值, 可以准确的表示出相对时间、绝对时间、和预设的时间。

    绝对时间

    • <earliest><latest>均有值,且值为时间戳表示, 表示从 earliest 里的时间到 latest 里的时间。
    <earliest>1572524870871</earliest>
    <latest>1572524870891</latest>
    
    • <earliest>值为 earliest 或不提供<earliest>元素, 表示在 latest 的时间之前:
      • <earliest>值为 earliest
        <earliest>earliest</earliest>
        <latest>1572524870891</latest>
        
      • <earliest>元素
        <latest>1572524870891</latest>
        
    • <latest>值为 now 或不提供<latest>元素, 表示在earliest的时间之后

      • <latest>值为 now
        <earliest>1572524870891</earliest>
        <latest>now</latest>
        
        相对时间
        相对时间通常用表示时间量的字符串来定义,使用数值加一个时间单位来表示时间量字符,如 2m。数值可以是正数或负数,均表示向前偏移时间,时间单位支持: s(秒)、m(分)、h(时)、d(天)、w(周)、M(月)、Q(季)、y(年) 。
    • earliest 和 latest 均指定时间量字符,如前三分钟到前两分钟:

      <earliest>3m</earliest>
      <latest>2m</latest>
      
    • earliest指定时间量字符,latest不指定或者指定latest值为 now ,如前三分钟到现在:

      值为 now:

      <earliest>-3m</earliest>
      <latest>now</latest>
      

      <latest>元素:

      <earliest>-3m</earliest>
      
    • <earliest>指定时间量字符,<latest>指定时间戳 ,如下面例子表示某个相对时间到一个固定时候的范围:

      <earliest>3m</earliest>
      <latest>1572527582426</latest>
      

    预设时间

    时间选择器支持预设时间,如下:

    预设时间 时间量字符
    前 5 分钟 m5 、 5m 、 -5m
    前 15 分钟 m15 、 15m 、 -15m

    支持和 search 结合,实现调用搜索接口将搜索结果作为 choice 选项。需要设置 fieldForLabel 和 fieldForValue 对应的值来标记 choice 的 label 和 value 字段。

    <input type="dropdown" token="source_tok">
      <label>Select a source type</label>
      <choice value="*">All</choice>
      <search>
        <query>
          index=_internal | stats count by sourcetype
        </query>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </search>
      <field-for-label>sourcetype</field-for-label>
      <field-for-value>sourcetype</field-for-value>
    </input>
    

    图表元素

    以上内容是否对您有帮助?
  • Icon free helper
    Close