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 = 0current_karma = 0SCHEDULER.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- data-view="Table" data-title="构建任务统计" data-moreinfo="更多信息"></div> </li>- docker 集成
基于已经做好的容器镜像
FROM dalongrong/smashingCOPY . /appRUN bundleEXPOSE 3030ENTRYPOINT [ "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
