Change repo stats to use the RAC table and a nice UI

This commit is contained in:
Joseph Schorr 2016-06-22 14:50:59 -04:00
parent dbe14fe729
commit 853cca35f3
10 changed files with 184 additions and 125 deletions

View file

@ -56,6 +56,7 @@
.repo-panel-info-element .stat-col {
border-right: 2px solid #eee;
padding-right: 26px;
}
.repo-panel-info-element .stat-title {
@ -65,11 +66,21 @@
margin-bottom: 10px;
}
.repo-panel-info-element .stat {
.repo-panel-info-element .stat-row {
text-align: center;
margin-bottom: 20px;
}
.repo-panel-info-element .stat-row .heatmap {
margin-top: 20px;
}
.repo-panel-info-element .stat {
display: inline-block;
margin-left: 20px;
margin-right: 20px;
}
.repo-panel-info-element .stat .stat-value {
font-size: 46px;
}

View file

@ -0,0 +1,17 @@
.heatmap-element {
display: inline-block;
}
.heatmap-element svg {
overflow: visible;
}
.heatmap-element .cal-heatmap-container {
display: inline-block !important;
}
.heatmap-element .graph-label {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
text-transform: uppercase;
}

View file

@ -0,0 +1 @@
<div class="heatmap-element"></div>

View file

@ -1,38 +1,29 @@
<div class="repo-panel-info-element">
<!-- Repository stats and builds summary -->
<div class="repository-stats row">
<!-- Pull Stats -->
<div class="col-sm-3 stat-col">
<div class="stat-title">Repo Pulls</div>
<!-- Stats -->
<div class="col-sm-5 stat-col">
<div class="stat-title">Repository Activity</div>
<div class="stat">
<div class="stat-value">{{ repository.stats.pulls.today | abbreviated }}</div>
<div class="stat-subtitle">Last 24 hours</div>
</div>
<div class="stat-row">
<div class="heatmap hidden-xs hidden-sm" data="repository.stats"
item-name="action" domain="month" range="3"
start-count="-2" start-domain="months"></div>
<div class="stat">
<div class="stat-value">{{ repository.stats.pulls.thirty_day | abbreviated }}</div>
<div class="stat-subtitle">Last 30 days</div>
</div>
</div>
<div class="stat visible-xs visible-sm">
<div class="stat-value">{{ getAggregatedUsage(repository.stats, 1) | abbreviated }}</div>
<div class="stat-subtitle">Yesterday</div>
</div>
<!-- Push Stats -->
<div class="col-sm-3 stat-col">
<div class="stat-title">Repo Pushes</div>
<div class="stat">
<div class="stat-value">{{ repository.stats.pushes.today | abbreviated }}</div>
<div class="stat-subtitle">Last 24 hours</div>
</div>
<div class="stat">
<div class="stat-value">{{ repository.stats.pushes.thirty_day | abbreviated }}</div>
<div class="stat-subtitle">Last 30 days</div>
<div class="stat visible-xs visible-sm">
<div class="stat-value">{{ getAggregatedUsage(repository.stats, 30) | abbreviated }}</div>
<div class="stat-subtitle">Last 30 days</div>
</div>
</div>
</div>
<!-- Builds -->
<div class="col-sm-6 builds-list">
<div class="col-sm-7 builds-list">
<div class="stat-title">Recent Repo Builds</div>
<!-- Loading -->

View file

@ -27,6 +27,21 @@ angular.module('quay').directive('repoPanelInfo', function () {
$scope.repository.description = content;
$scope.repository.put();
};
$scope.getAggregatedUsage = function(stats, days) {
var count = 0;
var startDate = moment().subtract(days + 1, 'days');
for (var i = 0; i < stats.length; ++i) {
var stat = stats[i];
var statDate = moment(stat['date']);
if (statDate.isBefore(startDate)) {
continue;
}
count += stat['count'];
}
return count;
};
}
};
return directiveDefinitionObject;

View file

@ -0,0 +1,67 @@
/**
* An element which displays a date+count heatmap.
*/
angular.module('quay').directive('heatmap', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/heatmap.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'data': '=data',
'startCount': '@startCount',
'startDomain': '@startDomain',
'itemName': '@itemName',
'domain': '@domain',
'range': '@range'
},
controller: function($scope, $element, $timeout) {
var cal = null;
var refresh = function() {
var data = $scope.data;
if (!data) { return; }
if (!cal) {
var start = moment().add($scope.startCount * 1, $scope.startDomain).toDate();
cal = new CalHeatMap();
cal.init({
itemName: $scope.itemName,
domain: $scope.domain,
range: $scope.range * 1,
start: start,
itemSelector: $element.find('.heatmap-element')[0],
cellSize: 15,
domainMargin: [10, 10, 10, 10],
displayLegend: false,
tooltip: true,
legendColors: {
empty: "#f4f4f4",
min: "#c9e9fb",
max: "steelblue",
}
});
}
cal.update(formatData(data));
};
var formatData = function(data) {
var timestamps = {};
data.forEach(function(entry) {
timestamps[moment(entry.date).unix()] = entry.count;
});
return timestamps;
};
$scope.$watch('data', function() {
$timeout(refresh, 500);
});
}
};
return directiveDefinitionObject;
});