Skip to content
This repository has been archived by the owner on Nov 10, 2017. It is now read-only.

Commit

Permalink
Bug 1142680 - Add a user interface for choosing compare data
Browse files Browse the repository at this point in the history
  • Loading branch information
@wlach
wlach committed Apr 21, 2015
1 parent 7a2f85f commit 3fced10
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 66 deletions.
19 changes: 17 additions & 2 deletions webapp/app/compareperf.html
View file
Expand Up @@ -13,8 +13,18 @@
</head>
<body>

<section ui-view>
</section>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Perfherder Compare</a>
</div>
</div>
</nav>

<div class="container-fluid">
<section ui-view>
</section>
</div>

<script src="js/config/local.conf.js"></script>

Expand All @@ -34,7 +44,12 @@
<script src="vendor/bootstrap.js"></script>
<script src="vendor/mousetrap.min.js"></script>
<script src="js/treeherder.js"></script>
<script src="js/services/treestatus.js"></script>
<script src="js/providers.js"></script>
<script src="js/values.js"></script>
<script src="js/services/main.js"></script>
<script src="js/services/log.js"></script>
<script src="js/models/repository.js"></script>
<script src="js/compareperf.js"></script>
<!-- endbuild -->

Expand Down
25 changes: 25 additions & 0 deletions webapp/app/css/perf.css
View file
Expand Up @@ -201,6 +201,31 @@ to { opacity: 0; }
overflow: hidden;
}

/* Compare interface stuff */

.compare-form {
align: center;
display: flex;
flex-flow: column;
}

.compare-form .form-group {
display: flex;
flex-flow: row;
flex: none;
}

.compare-form .form-group .panel {
flex: none;
width: 280px;
margin-right: 15px;
margin-bottom: 0px;
}

.compare-form .button-container {
width: 575px;
}

.compare-improvement {
background-color: green;
color: white;
Expand Down
61 changes: 30 additions & 31 deletions webapp/app/js/compareperf.js
View file
Expand Up @@ -77,9 +77,30 @@ comparePerf.factory('getSeriesSummary', [ function() {
};
}]);

comparePerf.controller('CompareCtrl', [ '$state', '$stateParams', '$scope', '$rootScope', '$location',
comparePerf.controller('CompareChooserCtrl', [ '$state', '$stateParams',
'$scope',
'$rootScope', '$location',
'thServiceDomain', '$http',
'$q', '$timeout', 'ThRepositoryModel',
function CompareChooserCtrl($state, $stateParams, $scope, $rootScope, $location,
thServiceDomain, $http, $q, $timeout, ThRepositoryModel) {
ThRepositoryModel.get_list().success(function(projects) {
$scope.projects = projects;
$scope.originalProject = $scope.newProject = projects[0];

$scope.runCompare = function() {
$state.go('compare', {
originalProject: $scope.originalProject.name,
originalRevision: $scope.originalRevision,
newProject: $scope.newProject.name,
newRevision: $scope.newRevision });
};
});
}]);

comparePerf.controller('CompareResultsCtrl', [ '$state', '$stateParams', '$scope', '$rootScope', '$location',
'thServiceDomain', '$http', '$q', '$timeout', 'getSeriesSummary',
function CompareCtrl($state, $stateParams, $scope, $rootScope, $location,
function CompareResultsCtrl($state, $stateParams, $scope, $rootScope, $location,
thServiceDomain, $http, $q, $timeout, getSeriesSummary) {

function displayComparision() {
Expand Down Expand Up @@ -321,14 +342,6 @@ comparePerf.controller('CompareCtrl', [ '$state', '$stateParams', '$scope', '$ro
});
}

function updateURL() {
$state.transitionTo('compare', { 'originalProject': $scope.originalProject,
'originalRevision': $scope.originalRevision,
'newProject': $scope.newProject,
'newRevision': $scope.newRevision},
{location: true, inherit: true, notify: false, relative: $state.$current});
}

var optionCollectionMap = {};
$scope.dataLoading = true;

Expand Down Expand Up @@ -371,29 +384,15 @@ comparePerf.controller('CompareCtrl', [ '$state', '$stateParams', '$scope', '$ro


comparePerf.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.deferIntercept(); // so we don't reload on url change

$stateProvider.state('compare', {
templateUrl: 'partials/perf/comparectrl.html',
url: '/compare?originalProject&originalRevision&newProject&newRevision&hideMinorChanges&e10s&pgo',
controller: 'CompareCtrl'
controller: 'CompareResultsCtrl'
}).state('comparechooser', {
templateUrl: 'partials/perf/comparechooserctrl.html',
url: '/comparechooser',
controller: 'CompareChooserCtrl'
});

$urlRouterProvider.otherwise('/compare');
})
// define the interception
.run(function ($rootScope, $urlRouter, $location, $state) {
$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
// Prevent $urlRouter's default handler from firing
e.preventDefault();
if ($state.current.name !== 'compare') {
// here for first time, synchronize
$urlRouter.sync();
}
});

// Configures $urlRouter's listener *after* custom listener
$urlRouter.listen();
})


$urlRouterProvider.otherwise('/comparechooser');
});
54 changes: 21 additions & 33 deletions webapp/app/partials/perf/comparectrl.html
View file
@@ -1,36 +1,24 @@
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Perfherder Compare</a>
</div>
<div id="datapoint-detail" ng-show="originalRevision && newRevision">
<div ng-if="dataLoading">
Loading all results, please wait a minute...
<img src="img/dancing_cat.gif" />
</div>
</nav>

<div class="container-fluid">
<div id="datapoint-detail" ng-show="originalRevision && newRevision">
<div ng-if="dataLoading">
Loading all results, please wait a minute...
<img src="img/dancing_cat.gif" />
</div>
<div id="subtest-summary" ng-if="!dataLoading">
<h4>Compare all data for revision {{newProject}}: {{newRevision}} to {{originalProject}}: {{originalRevision}}</h4>
<p class="help-block">Hover over each entry for more options.</p>
<table class="table">
<tbody>
<tr ng-class="{'subtest-header': compareResult.headerColumns==2, 'subtest-empty': compareResult.isEmpty && !compareResult.headerColumns==2, 'subtest-empty': (hideMinorChanges && compareResult.isMinor)}" ng-repeat="compareResult in compareResults">
<td colspan="{{compareResult.headerColumns}}">{{compareResult.name}}</td>
<td ng-class="{'subtest-empty': compareResult.headerColumns==2}"><a ng-href="{{compareResult.detailsLink}}">Details</a></td>
<td ng-attr-title="runs: {{compareResult.originalRuns}}">{{compareResult.originalGeoMean}}</td>
<td>+/-{{compareResult.originalStddev}} ({{compareResult.originalStddevPct}}%)</td>
<td ng-attr-title="runs: {{compareResult.newRuns}}">{{compareResult.newGeoMean}}</td>
<td>+/-{{compareResult.newStddev}} ({{compareResult.newStddevPct}}%)</td>
<td ng-class="{'subtest-regression': compareResult.isRegression, 'subtest-improvement': compareResult.isImprovement}">{{compareResult.delta}}</td>
<td ng-class="{'subtest-regression': compareResult.isRegression, 'subtest-improvement': compareResult.isImprovement}">{{compareResult.deltaPercentage}}%</td>
</tr>
</tbody>
</table>
</div>
<div id="subtest-summary" ng-if="!dataLoading">
<h4>Compare all data for revision {{newProject}}: {{newRevision}} to {{originalProject}}: {{originalRevision}}</h4>
<p class="help-block">Hover over each entry for more options.</p>
<table class="table">
<tbody>
<tr ng-class="{'subtest-header': compareResult.headerColumns==2, 'subtest-empty': compareResult.isEmpty && !compareResult.headerColumns==2, 'subtest-empty': (hideMinorChanges && compareResult.isMinor)}" ng-repeat="compareResult in compareResults">
<td colspan="{{compareResult.headerColumns}}">{{compareResult.name}}</td>
<td ng-class="{'subtest-empty': compareResult.headerColumns==2}"><a ng-href="{{compareResult.detailsLink}}">Details</a></td>
<td ng-attr-title="runs: {{compareResult.originalRuns}}">{{compareResult.originalGeoMean}}</td>
<td>+/-{{compareResult.originalStddev}} ({{compareResult.originalStddevPct}}%)</td>
<td ng-attr-title="runs: {{compareResult.newRuns}}">{{compareResult.newGeoMean}}</td>
<td>+/-{{compareResult.newStddev}} ({{compareResult.newStddevPct}}%)</td>
<td ng-class="{'subtest-regression': compareResult.isRegression, 'subtest-improvement': compareResult.isImprovement}">{{compareResult.delta}}</td>
<td ng-class="{'subtest-regression': compareResult.isRegression, 'subtest-improvement': compareResult.isImprovement}">{{compareResult.deltaPercentage}}%</td>
</tr>
</tbody>
</table>
</div>
</div>


0 comments on commit 3fced10

Please sign in to comment.