基于underscore和jQuery的微型告警系统

一个监控系统 我们今天要使用underscore.js和jQuery来构建一个客户端的应用,这个应用是一个监控系统的前端,设计师已经给出了界面设计: 而对应的服务器端的API也已经就绪了: $ curl http://localhost:9527/alarms.json -s | jq . 会看到诸如这样的返回值: [ { "proiority": "critical", "occurrence": "2/12/2015 01:23 AM", "summary": "heartbeat failure", "node": "VIQ002" }, { "proiority": "major", "occurrence": "2/12/2015 01:22 AM", "summary": "packages are rejected", "node": "VIQ002" }, { "proiority": "medium", "occurrence": "2/11/2015 01:23 AM", "summary": "connection cannot be established", "node": "VIQ002" } ] 每条告警信息都包含:优先级,发生时间,描述信息,以及发生告警的节点名称。 我们要将这些信息整合,并展示在页面上。 mockup 我在《3周3页面》中讨论过现代前端开发的方式,你也可以参考这篇文章以及这篇文章。我们这里还是采用相同的方式来实现这个mockup,也就是静态页面。 首先我们在index.html中编写HTML: <div class="container"> <h1>Active Event List in transmission</h1> <ul class="events"> <li> <div class="event critical"> <h3>heartbeat failure @ VIQ002</h3> <span class="date">2/12/2015 01:23 AM</span> </div> </li> <li> <div class="event major"> <h3>packages are rejected</h3> <span class="date">2/12/2015 01:23 AM</span> </div> </li> <li> <div class="event medium"> <h3>connection cannot be established</h3> <span class="date">2/12/2015 01:23 AM</span> </div> </li> <!...

February 21, 2015 · 3 min · 邱俊涛 | Juntao Qiu