继续丰富我们的chrome 插件。
当我们在master上引入了新的regression case的时候，我们需要知道是什么时候引入，以及这个case真的是因为代码造成的，还是环境不稳定造成的。特别是在开发的人员众多的情况下，排查有一定的难度。于是我们想到了用甘特图来描述case的历史趋势。下图是我们的阶段性成果。
image.png
该图左边一列列出了跑这个case的PR（包含PR的title和owner）和Master build，数字显示的是这个PR或者Master跑这个case的不稳定率。用户可以纵向的比较其他PR和自己的PR同样跑这个case的失败率。也可以横向的查看是否是自己引入的。右边绿色的P标签表明这个时间点，改处case是通过的，红色F则表示失败，鼠标悬浮可以看到失败的原因。棕色M则表示此处时间节点该PRmerge进了master。当然，也可以点击这些标签，会自动引导用户到github页面（这个PR）和jenkins job（跑这个PR的automation job），可以进一步分析错误信息。
整个框子我们可以参考：link
由于页面是轻量级的，就直接在springboot里实现了，没有用前端框架类似于（Vue，React等），就直接用thymeleaf画了下。
传参如下：
@RequestMapping(value = "/ops/testcase/{testcaseId}")
public ModelAndView testcaseHistory(@PathVariable(name = "testcaseId") String testcaseId,@RequestParam(name = "caseName") String caseName,@RequestParam(name = "currentPR") String currentPR){
ModelAndView mv = new ModelAndView();
mv.setViewName("GanttChartHistory");
if(caseName.contains("@")) {
String[] caseInfo = caseName.split("@");
mv.addObject("caseName",caseInfo[0]);
mv.addObject("className",caseInfo[1]);
}
mv.addObject("testcaseId",testcaseId);
mv.addObject("currentPR",currentPR);
return mv;
}
页面接收：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Gantt TestCase History</title>
<link rel="icon" href="/js/css/img/icon48.png" type="image/x-icon">
<link href="/js/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="/js/css/bootstrap-table.css" type="text/css" rel="stylesheet">
<link href="/js/css/gantt.css" type="text/css" rel="stylesheet">
</head>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 0 0 50px 0;
}
.contain {
width: auto;
margin: 0 auto;
}
</style>
<body>
<div class="div_header">
<h1>15 days history of <h3><font color="brown"><span th:text="${className}"></span> > <span th:text="${caseName}"></span></font></h3></h1>
</div>
<div class="gantt_ot" style="width:95%; margin:20px;">
<div id="div-loading" style="display:none"><div align="center"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="80px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
<path fill="#FF6700" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
</path>
</div>
</svg></div>
<input type="hidden" id="testCaseId" th:value="${testcaseId}"></input>
<input type="hidden" id="currentPR" th:value="${currentPR}"></input>
<div class="gantt"></div>
</div>
<script src="/js/jquery.fn.gantt.js"></script>
<script th:src="@{/js/history-case.js}"></script>
</body>
</html>
这样我们再加入打开页面init的数据就大功告成了。
$(function () {
var sourceData;
var testcaseId = $("#testCaseId").val();
$("#div-loading").show()
$.ajax({
url: "/testcase/history/"+testcaseId,
type: "get",
dataType: "json",
cache: false,
success: function (data) {
$(".gantt").gantt({
source: data,
navigate: 'scroll',
scale: "hours",
maxScale: "days",
minScale: "hours",
itemsPerPage: 100,
scrollToToday: true,
waitText:"Please wait...",
onItemClick: function (data) {
console.info(data)
},
onAddClick: function (dt, rowId) {//无数据范围内的点击事件
// alert("Empty space clicked - add an item!");
},
onRender: function () {
if (window.console && typeof console.log === "function") {
// console.log("chart rendered");
}
$('[data-toggle="popover"]').each(function (){
var element = $(this);
element.popover({
trigger: 'hover',
placement: 'auto',
html: true
})
})
}
});
$("#div-loading").hide()
}
});
/* //弹窗功能
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover",
placement: "auto right"
});*/
});
网友评论