简单实现海量数据的管理平台 [saltstack hadoop]
要写一套海量数据分析的管理平台，当然是简易便用，业务线用的爽就好了。
为了开发的效率选用欧美和国内大公司内流行的flask框架，为了能快速安全的管理其他主机选用了saltstack集群管理。
前端框架用的是bootstarp，但是经常用twitter的风格，也确实用腻味了，所以加了点metro的效果。
数据的渲染更多的是用jquery ajax。
www.xiaorui.cc == ruifengyun.com
主要是为了实现：
hadoop的节点部署，以及服务的start stop restart的控制。 还有各个节点的cpu 内存使用情况。
用到的技术：
前端框架：bootstrap，jquery
后端框架：flask，saltstack
这是周六上午花了三个小时写的小demo ~
7-26
关于saltstack我就不多说了~ 个人感觉这是个比puppet操作要简单，效率更高的工具。
开发环境
建议用https://github.com/saltstack/salt-vim
salt的api 可以去
http://salt-api.readthedocs.org/en/latest/
安装salt的时候 发现他和flask的jinja2 是有冲突的
执行app的时候 ，会提示
有jinja2的字眼。。。。
web访问的时候，出现debug的界面
后来重新pip install jinja2 就偶了~
7-27
前端的页面，已经搞完，里面加了不少win8 的metro风格的dd
实现了简单对hdfs的操作，以及命令的推送
7-28
图表的demo
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.area.above {
fill: rgb(252,141,89);
}
.area.below {
fill: rgb(145,207,96);
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d["New York"]); });
var area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y1(function(d) { return y(d["New York"]); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d["New York"]= +d["New York"];
d["San Francisco"] = +d["San Francisco"];
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(data, function(d) { return Math.min(d["New York"], d["San Francisco"]); }),
d3.max(data, function(d) { return Math.max(d["New York"], d["San Francisco"]); })
]);
svg.datum(data);
svg.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", area.y0(height));
svg.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", area.y0(0));
svg.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", area.y0(function(d) { return y(d["San Francisco"]); }));
svg.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", area);
svg.append("path")
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (oF)");
});
</script>
7-29
晚上和沈灿谈女人扯淡到半夜，才想起来做东西。。。
把salt页面的大多的功能多做完了，后端还很多的欠缺，有时间再搞。。。
7-30
想把 hadoop的hbase的管理和基本shell搞定，可以简单的通过mq发出统计信息，用ajax把状态给打印出来。
7-31
加了分组的显示信息，下午把拖动分组的效果做出来，后端方面让沈灿做。
8-1
分组的功能已经独立到一个页面，现在要做的是 移动鼠标的时候，把该服务器的信息展现出来 。 比如 服务器类型 cpu 内存 流量 业务数据啥的。。。
晚上实现文件的推送，页面正题展现和后端功能
www.xiaorui.cc == ruifengyun.com
www.xiaorui.cc == ruifengyun.com
xiaorui.cc
分组的拖动效果
xiaorui.cc
根据ip显示不同的图片，这个需要用jinja和re的实现
在线查看模块~
日志的查看
xiaorui.cc
本文出自 “峰云，就她了。” 博客，谢绝转载！