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