smashing 三方widgets 使用

smashing 有一套自己的约定，包括widgets 以及dashboard，还有就是关于数据的处理

约定如下

• 三方widgets 统一在widgets 目录下，一般包含了基于coffee 的js 组件，基于scss 的css 还有就是html
• 数据的统一通过job 处理，可以配置数据获取的频率，然后就是发送数据
• dashboard 统一在dashboards 目录中
  以下是一个table 组件的使用

集成table 组件

说明集成是基于脚手架工具生成的项目

• 项目地址

 

https://github.com/nick123pig/dashing-table

• clone 或者下载代码
• copy 对应widgets 的内容到widgets 目录中
• 编写简单job
  注意send_event 方法的第一个参数my-table,数据绑定需要

 

current_valuation = 0

current_karma = 0

SCHEDULER.every '2s' do

    hrows = [

        {

          style: 'color:#888;',

          class: 'right',

          cols: [

            {class: 'left', value: '项目'},

            {style: 'color:red; text-align:center;',value: '构建次数'},

           ]

        }

      ]

​

      rows = [

        { cols: [ {class: 'left', value: 'test'+rand(100).to_s}, {value: rand(100)}]},

        { cols: [ {class: 'left', value: 'ci'+rand(100).to_s}, {value: rand(100)}]},

        { cols: [ {class: 'left', value: 'cd'+rand(100).to_s}, {value: rand(100)}]},

        { cols: [ {class: 'left', value: 'demo'+rand(100).to_s}, {value: rand(100)}]}

      ]

​

      send_event('my-table', { hrows: hrows, rows: rows } )

end

 

• 添加dashboard
  为了方便直接在sample 中配置,其中data-id 关联了数据，data-view 关联了widgets

    <li data-row="1" data-col="1" data-sizex="4" data-sizey="1">

       <div data-id="my-table" data-view="Table" data-title="构建任务统计" data-moreinfo="更多信息"></div>

    </li>

• docker 集成

  基于已经做好的容器镜像

FROM dalongrong/smashing

COPY . /app

RUN bundle

EXPOSE 3030

ENTRYPOINT [ "smashing","start" ]

• docker-compose 文件

version: "3"

services: 

    dash:

      build: ./

      ports: 

      - "3030:3030"

      image: dalongrong/smashing-demo

启动&&效果

• 启动

docker-compose up -d

• 效果

 

说明

以上是一个简单的使用，实际上在官方的wiki 中已经提供了很多可选的widgets，还是很方便的，而且编写一个widgets 也很容易

参考资料

https://github.com/nick123pig/dashing-table
https://github.com/Smashing/smashing/wiki
https://github.com/rongfengliang/smashing-docker