Change repo stats to use the RAC table and a nice UI
This commit is contained in:
parent
dbe14fe729
commit
853cca35f3
10 changed files with 184 additions and 125 deletions
|
@ -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;
|
||||
}
|
||||
|
|
17
static/css/directives/ui/heatmap.css
Normal file
17
static/css/directives/ui/heatmap.css
Normal 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;
|
||||
}
|
1
static/directives/heatmap.html
Normal file
1
static/directives/heatmap.html
Normal file
|
@ -0,0 +1 @@
|
|||
<div class="heatmap-element"></div>
|
|
@ -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 -->
|
||||
|
|
|
@ -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;
|
||||
|
|
67
static/js/directives/ui/heatmap.js
Normal file
67
static/js/directives/ui/heatmap.js
Normal 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;
|
||||
});
|
Reference in a new issue