vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Redo the landing page to:

Browse source 
- Show the user's top repos if they have any
  - Show a link to the guide and the repos list if they do not

- Add a getting starting guide
- Redo the repos list to show the user's repos and the top 10 public repos separately
This commit is contained in:
Joseph Schorr 2013-10-02 00:28:24 -04:00
parent f12ed9859c
commit 927b280f1a
9 changed files with 220 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
data/model.py
View file

@ -96,9 +96,11 @@ def get_token(code):
return AccessToken.get(AccessToken.code == code)
def get_visible_repositories(username=None):
def get_visible_repositories(username=None, include_public=True, limit=None, sort=False):
query = Repository.select().distinct().join(Visibility)
or_clauses = [(Visibility.name == 'public')]
or_clauses = []
if include_public:
or_clauses.append((Visibility.name == 'public'));
if username:
with_perms = query.switch(Repository).join(RepositoryPermission,
@ -106,8 +108,15 @@ def get_visible_repositories(username=None):
query = with_perms.join(User)
or_clauses.append(User.username == username)
return query.where(reduce(operator.or_, or_clauses))
if sort:
with_images = query.switch(Repository).join(Image, JOIN_LEFT_OUTER)
query = with_images.order_by(Image.created.desc())
query = query.where(reduce(operator.or_, or_clauses))
if limit:
query = query.limit(limit)
return query
def get_matching_repositories(repo_term, username=None):
namespace_term = repo_term

19
endpoints/api.py
View file

@ -125,10 +125,25 @@ def list_repos_api():
'name': repo_obj.name,
'description': repo_obj.description,
}
limit = request.args.get('limit', None)
include_public = request.args.get('public', 'true')
include_private = request.args.get('private', 'true')
sort = request.args.get('sort', 'false')
username = current_user.db_user.username if current_user.is_authenticated() else None
try:
limit = int(limit) if limit else None
except:
limit = None
include_public = include_public == 'true'
include_private = include_private == 'true'
sort = sort == 'true'
username = current_user.db_user.username if current_user.is_authenticated() and include_private else None
repos = [repo_view(repo)
for repo in model.get_visible_repositories(username)]
for repo in model.get_visible_repositories(
username, limit = limit, include_public = include_public, sort = sort)]
response = {
'repositories': repos
}

51
static/css/quay.css
View file

@ -62,6 +62,19 @@
margin-bottom: 20px;
}
.landing .welcome-message {
text-align: center;
}
.landing .welcome-message .sub-message {
margin-top: 16px;
}
.landing .welcome-message .gravatar {
display: inline-block;
border: 1px solid #94C9F7;
}
.landing .sub-message b {
color: #94C9F7;
}
@ -136,6 +149,32 @@ background: linear-gradient(to bottom, #141414 0%,transparent 15%,transparent 8
z-index: 1;
}
.landing .options {
display: inline-block;
padding: 10px;
margin-top: 20px;
}
.landing .options .option {
}
.landing .options .or {
margin: 14px;
text-align: center;
}
.landing .options .or span {
display: inline-block;
border-radius: 50%;
background: #444;
padding: 6px;
width: 48px;
height: 48px;
line-height: 36px;
text-transform: uppercase;
text-align: center;
}
.landing-footer {
padding: 20px;
@ -392,6 +431,9 @@ p.editable:hover i {
text-decoration: none !important;
}
.repo-list {
margin-bottom: 40px;
}
.repo-listing {
display: block;
@ -400,6 +442,15 @@ p.editable:hover i {
padding: 10px;
}
.repo-listing:last-child {
border-bottom: 0px;
}
.landing .repo-listing {
border-bottom: 0px;
margin-bottom: 0px;
}
.repo-listing a {
font-size: 1.5em;
}

1
static/js/app.js
View file

@ -72,6 +72,7 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment'], function($pro
when('/repository/:namespace/:name/tag/:tag', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl}).
when('/repository/:namespace/:name/admin', {templateUrl: '/static/partials/repo-admin.html', controller:RepoAdminCtrl}).
when('/repository/', {title: 'Repositories', templateUrl: '/static/partials/repo-list.html', controller: RepoListCtrl}).
when('/guide/', {title: 'Getting Started Guide', templateUrl: '/static/partials/guide.html', controller: GuideCtrl}).
when('/', {title: 'Quay', templateUrl: '/static/partials/landing.html', controller: LandingCtrl}).
otherwise({redirectTo: '/'});
}]).

48
static/js/controllers.js
View file

@ -77,6 +77,9 @@ function HeaderCtrl($scope, UserService) {
});
}
function GuideCtrl($scope, Restangular) {
}
function RepoListCtrl($scope, Restangular) {
$scope.getCommentFirstLine = function(commentString) {
return getMarkedDown(getFirstTextLine(commentString));
@ -89,12 +92,22 @@ function RepoListCtrl($scope, Restangular) {
$('.spin').spin();
$scope.loading = true;
$scope.public_repositories = null;
$scope.private_repositories = null;
// Load the list of repositories.
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList().then(function(resp) {
$scope.repositories = resp.repositories;
$scope.loading = false;
// Load the list of personal repositories.
var repositoryPrivateFetch = Restangular.all('repository/');
repositoryPrivateFetch.getList({'public': false, 'sort': true}).then(function(resp) {
$scope.private_repositories = resp.repositories;
$scope.loading = !($scope.public_repositories && $scope.private_repositories);
});
// Load the list of public repositories.
var options = {'public': true, 'private': false, 'sort': true, 'limit': 10};
var repositoryPublicFetch = Restangular.all('repository/');
repositoryPublicFetch.getList(options).then(function(resp) {
$scope.public_repositories = resp.repositories;
$scope.loading = !($scope.public_repositories && $scope.private_repositories);
});
}
@ -103,12 +116,20 @@ function LandingCtrl($scope, $timeout, Restangular, UserService) {
$('.spin').spin();
$scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
if (!currentUser.anonymous) {
$scope.loadMyRepos();
}
$scope.user = currentUser;
}, true);
$scope.awaitingConfirmation = false;
$scope.registering = false;
$scope.getCommentFirstLine = function(commentString) {
return getMarkedDown(getFirstTextLine(commentString));
};
$scope.browseRepos = function() {
document.location = '/#/repository';
};
@ -130,6 +151,23 @@ function LandingCtrl($scope, $timeout, Restangular, UserService) {
});
});
};
$scope.loadMyRepos = function() {
$scope.loadingmyrepos = true;
// Load the list of repositories.
var params = {
'limit': 5,
'public': false,
'sort': true
};
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList(params).then(function(resp) {
$scope.myrepos = resp.repositories;
$scope.loadingmyrepos = false;
});
};
}
function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {

33
static/partials/guide.html Normal file
View file

@ -0,0 +1,33 @@
<div class="container">
<div class="alert alert-warning">Warning: Quay requires docker version 0.7 or higher to work</div>
<h2>Getting started guide</h2>
<div class="container">
<h3>Pushing a repository to Quay</h3>
<div class="container">
First, tag the image with your repository name:<br><br>
<pre>docker tag <i>0u123imageid</i> quay.io/<i>repo_namespace/repo_name</i></pre>
<br>
Second, push the repository to Quay:<br><br>
<pre>docker push quay.io/<i>repo_namespace/repo_name</i></pre>
</div>
<br>
<h3>Pulling a repository from Quay</h3>
<div class="container">
<div class="alert alert-info">Note: <b>Private</b> repositories require you to be <b>logged in</b> or the pull will fail. See below for how to sign into Quay if you have never done so before. </div>
To pull a repository from Quay, run the following command:
<br><br>
<pre>docker pull quay.io/<i>path/to/repository</i></pre>
</div>
<br>
<h3>Signing into to Quay <span class="label label-default">Optional</span></h3>
<div class="container">
If you have never pushed a repository to Quay and wish to pull a <b>private</b> repository, you can sign into Quay by running the following command:
<br><br>
<pre>docker login quay.io</pre>
</div>
</div>
</div>

40
static/partials/landing.html
View file

@ -1,10 +1,36 @@
<div class="landing">
<div class="background"></div>
<div class="background-mask"></div>
<div class="message-container">
<div class="message-container" ng-show="user.anonymous">
<div class="message">Secure hosting for <b>private</b> docker containers</div>
<div class="sub-message" ng-show="user.anonymous">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
<div class="sellcall" ng-show="user.anonymous"><a href="">Starting at $7/mo</a></div>
<div class="sub-message">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
<div class="sellcall"><a href="">Starting at $7/mo</a></div>
</div>
<div class="message-container" ng-show="!user.anonymous">
<div ng-show="loadingmyrepos">
<div class="spin"></div>
</div>
<div ng-show="!loadingmyrepos && myrepos.length > 0">
<h2>Your Top Repositories</h4>
<div class="repo-listing" ng-repeat="repository in myrepos">
<i class="icon-hdd icon-large"></i>
<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
<div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
</div>
</div>
<div ng-show="!loadingmyrepos && myrepos.length == 0">
<div class="sub-message">
You don't have any <b>private</b> repositories yet!
<div class="options">
<div class="option"><a href="#/guide">Learn how to create a repository</a></div>
<div class="or"><span>or</span></div>
<div class="option"><a href="#/repository">Browse the public repositories</a></div>
</div>
</div>
</div>
</div>
<div class="signup-container">
@ -24,10 +50,11 @@
</div>
</div>
<div ng-show="!user.anonymous">
<div class="sub-message">
Welcome <b>{{ user.username }}</b>!
<div class="welcome-message">
<img class="gravatar" src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=128&d=identicon" />
<div class="sub-message">Welcome <b>{{ user.username }}</b>!</div>
</div>
<button class="btn btn-lg btn-primary btn-block" ng-click="browseRepos()">Browse repositories</button>
<button ng-show="myrepos" class="btn btn-lg btn-primary btn-block" ng-click="browseRepos()">Browse all repositories</button>
</div>
</div>
@ -74,6 +101,7 @@
<h4>Support</h4>
<ul>
<li><a href="">Contact Support</a></li>
<li><a href="#/guide/">Getting Started Guide</a></li>
</ul>
</div>

31
static/partials/repo-list.html
View file

@ -3,10 +3,31 @@
</div>
<div class="container" ng-show="!loading">
<h3>Repositories</h3>
<div class="repo-listing" ng-repeat="repository in repositories">
<i class="icon-hdd icon-large"></i>
<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
<div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
<div class="repo-list">
<h3>Your Repositories</h3>
<div ng-show="private_repositories.length > 0">
<div class="repo-listing" ng-repeat="repository in private_repositories">
<i class="icon-hdd icon-large"></i>
<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
<div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
</div>
</div>
<div ng-show="private_repositories.length == 0" style="padding:20px;">
<div class="alert alert-info">
<h4>You don't have any repositories yet!</h4>
<a href="#/guide"><b>Click here</b> to learn how to create a repository</a>
</div>
</div>
</div>
<div class="repo-list">
<h3>Top Public Repositories</h3>
<div class="repo-listing" ng-repeat="repository in public_repositories">
<i class="icon-hdd icon-large"></i>
<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
<div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
</div>
</div>
</div>

5
templates/index.html
View file

@ -43,13 +43,14 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ user.anonymous ? '#' : '#/repository' }}">Quay</a>
<a class="navbar-brand" href="#">Quay</a>
</div>
<!-- Collapsable stuff -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a ng-href="#/repository/">Repositories</a></li>
<li><a ng-href="#/repository/">Repositories</a></li>
<li><a ng-href="#/guide/">Getting Started Guide</a></li>
</ul>