Ilya Shakhat 85e2f99134 Client-side search in drop-down boxes
1. Drop-down contents are pre-loaded during page load, search is made local
2. Search support is moved out of API
3. Removed API methods:
   * /releases/<release>
   * /project_types/<project_type>
   * /metrics/<metric>
4. Response of API methods used in drop-downs is unified. All of them
   return content under "data" key, default value under "default"
5. Rename JS functions from c_style to camelCase
6. Adapt DriverLog report to new drop-downs behavior

Part of blueprint ui-performance

Change-Id: I7bd9e9d1176d8419aa1e4bc1ccbb7ab4afdf7583
2014-05-28 18:31:12 +04:00

137 lines
5.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Stackalytics Widget</title>
<meta name="description" content="OpenStack contribution dashboard collects and processes development activity data such as commits, lines of code changed, and code reviews"/>
<meta name="keywords" content="openstack, contribution, community, review, commit, {{ company }}"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
<link rel="icon" href="{{ url_for('static', filename='images/favicon.png') }}" type="image/png"/>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/jquery.jqplot.min.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/jquery.dataTables.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/select2.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.9.1.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.jqplot.min.js') }}"></script>
<!--[if lt IE 9]><script type="text/javascript" src="{{ url_for('static', filename='js/excanvas.min.js') }}"></script><![endif]-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.json2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.pieRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.dateAxisRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.canvasTextRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.canvasAxisTickRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.cursor.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.highlighter.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.tmpl.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/stackalytics-ui.js') }}"></script>
<script type="text/javascript">
var base_url = "http://stackalytics.com";
$(document).ready(function () {
initSelectors(base_url);
renderTableAndChart(base_url + "/api/1.0/stats/companies", null, null, "company_chart", null);
});
$(function () {
$("#tabs").tabs({
activate: function( event, ui ) {
if (ui.newTab.index() == 0) {
renderTableAndChart(base_url + "/api/1.0/stats/companies", null, null, "company_chart", null);
} else {
renderTableAndChart(base_url + "/api/1.0/stats/modules", null, null, "module_chart", null);
}
}
});
});
$(function () {
$("#more")
.button()
.click(function (event) {
event.preventDefault();
window.open('http://stackalytics.com/', 'stackalytics');
return false;
});
});
</script>
<style type="text/css">
html, body, p {
font-size: 12px;
}
h2 {
font-size: 20px;
}
.drop {
margin: 0;
height: auto;
}
.jqplot-target {
font-size: 10px;
}
table.jqplot-table-legend, table.jqplot-cursor-legend {
font-size: 10px;
}
.ui-tabs .ui-tabs-panel {
padding: 0;
}
</style>
</head>
<body>
<div class="page" style="width: 320px; height: 400px; padding: 10px;">
<h2>OpenStack&reg; Contribution Tracker</h2>
<div id="tabs" style="position: relative;">
<ul>
<li><a href="#tabs-1">By companies</a></li>
<li><a href="#tabs-2">By modules</a></li>
</ul>
<div id="tabs-1">
<div id="company_chart" style="width: 100%; height: 260px;"></div>
</div>
<div id="tabs-2">
<div id="module_chart" style="width: 100%; height: 260px;"></div>
</div>
<div style="position: absolute; left: 20px; top: 240px;"><a id="more" href="#">More</a>
</div>
</div>
<div>
<div class="drop" style="margin-right: 15px;">
<label for="release">Release</label>
<input type="hidden" id="release" style="width: 95px" data-placeholder="Select release"/>
</div>
<div class="drop" style="margin-right: 15px;">
<label for="project_type">Projects</label>
<input type="hidden" id="project_type" style="width: 95px" data-placeholder="Select project type"/>
</div>
<div class="drop">
<label for="metric">Metric</label>
<input type="hidden" id="metric" style="width: 95px" data-placeholder="Select metric"/>
</div>
</div>
</div>
</body>
</html>