grim/port-authority

spent a lot of time reformatting, think I might go back to the acordian though..
develop
2014-12-07, Gary Kramlich
79e1d0b01380
Parents cef04d0cf2bc
Children de45abf09a44
spent a lot of time reformatting, think I might go back to the acordian though..
4 files changed, 92 insertions(+), 39 deletions(-)
  • +33 -0
    css/style.css
  • +0 -0
    fonts/glyphicons-halflings-regular.woff
  • +28 -15
    html/window.html
  • +31 -24
    js/app.js
    • --- a/css/style.css Sat Dec 06 18:38:02 2014 -0600
    +++ b/css/style.css Sun Dec 07 22:06:23 2014 -0600
    @@ -1,3 +1,5 @@
    +@charset "UTF-8";
    +
    html {
    overflow-y: scroll;
    }
    @@ -13,3 +15,34 @@
    margin: 0 auto;
    width: 75%;
    }
    +
    +.listing {
    + padding-top: 1em;
    + display: flex;
    + flex-direction: row;
    +}
    +
    +.repositories {
    + order: 0;
    + flex-grow: 1;
    + max-width: 25%;
    + min-width: 25%;
    +}
    +
    +.repository {
    + order: 1;
    + flex-grow: 4;
    + margin-left: 1em;
    + min-width: 75%;
    + max-width: 75%;
    +}
    +
    +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
    +.ng-cloak, .x-ng-cloak,
    +.ng-hide {
    + display: none !important;
    +}
    +
    +ng\:form {
    + display: block;
    +}
    Binary file fonts/glyphicons-halflings-regular.woff has changed
    --- a/html/window.html Sat Dec 06 18:38:02 2014 -0600
    +++ b/html/window.html Sun Dec 07 22:06:23 2014 -0600
    @@ -9,27 +9,40 @@
    </head>
    <body data-ng-controller="ManifestController">
    <div class="container">
    - <div class="input-group">
    + <form data-ng-submit="refresh()" class="input-group">
    <span class="input-group-addon">Registry</span>
    <input class="form-control" data-ng-model="registry" placeholder="enter the url of your registry">
    + <span class="input-group-addon">Query</span>
    + <input class="form-control" data-ng-model="query" placeholder="Search Query">
    <span class="input-group-btn">
    <button type="button" class="btn btn-primary" data-ng-click="refresh()">Refresh</button>
    </span>
    - </div>
    -<!-- <div class="list-group">
    - <a href="#" class="list-group-item" data-ng-repeat="repo in repos" data-ng-click="select_repo(repo)">{{repo.name}}<span class="badge">{{repo.images.length}}</span>
    + </form>
    + <div class="listing">
    + <div class="list-group repositories">
    + <span class="list-group-item active"><span class="badge">{{repos.length}}</span>Repositories</span>
    + <a href="#" class="list-group-item" data-ng-repeat="repo in repos" data-ng-click="select_repo(repo)">{{repo.name}}</a>
    + </div>
    + <div class="repository">
    + <div data-ng-show="repo">
    + <h1 class="page-header">{{repo.name}}<br>
    + <small>{{repo.description}}<br>
    + <span data-ng-show="repo.is_official" class="label label-info">Official</span>
    + <span data-ng-show="repo.is_trusted" class="label label-info">Trusted</span>
    + <span data-ng-show="repo.is_automated" class="label label-info">Automated</span>
    + <span class="label label-info" data-ng-show="repo.star_count > 0">{{repo.star_count}}<span class="glyphicon glyphicon-star"></span></span>
    + </small>
    + </h1>
    +
    + <ul class="list-group">
    + <li data-ng-repeat="(layer, tags) in tags" class="list-group-item">
    + <span class="label label-info" data-ng-repeat="tag in tags">{{tag}}</span>
    + <span class="glyphicon glyphicon-info-sign" tooltip="layer:{{layer}}"></span>
    + </li>
    + </ul>
    + </div>
    + </div>
    </div>
    - --> <accordion close-others="true">
    - <accordion-group data-ng-repeat="repo in repos" data-ng-click="select_repo(repo)">
    - <accordion-heading>{{repo.name}}<span class="badge">{{repo.images.length}}</span></accordion-heading>
    - <span>{{repo.description}}</span>
    - <ul class="list-group">
    - <li data-ng-repeat="image in repo.images" class="list-group-item">
    - <span tooltip="{{image.id}}">{{image.short_id}}<span class="badge" data-ng-repeat="tag in repo.tags[image.id]">{{tag}}</span>
    - </li>
    - </ul>
    - </accordion-group>
    - </accordion>
    </div>
    </body>
    </html>
    --- a/js/app.js Sat Dec 06 18:38:02 2014 -0600
    +++ b/js/app.js Sun Dec 07 22:06:23 2014 -0600
    @@ -9,8 +9,12 @@
    manifest.factory("manifestREST", function($http) {
    return {
    - list: function(registry) {
    - return $http.get(registry + "/v1/search");
    + search: function(registry, query) {
    + var url = registry + "/v1/search";
    + if(query) {
    + url += "?q=" + query;
    + }
    + return $http.get(url);
    },
    images: function(registry, repo) {
    return $http.get(registry + "/v1/repositories/" + repo + "/images")
    @@ -26,27 +30,33 @@
    },
    tags: function(registry, repo) {
    return $http.get(registry + "/v1/repositories/" + repo + "/tags");
    + },
    + info: function(registry, image) {
    + return $http.get(registry + "/v1/images/" + image + "/json");
    }
    }
    });
    function ManifestController($scope, manifestREST) {
    - $scope.registry = "";
    + $scope.registry = "registry.hub.docker.com";
    + $scope.query = "busybox";
    $scope.repos = null;
    $scope.repo = null;
    + $scope.error = null;
    + $scope.tags = null;
    $scope.refresh = function() {
    if($scope.registry.indexOf("http://") !== 0 && $scope.registry.indexOf("http://") !== 0) {
    $scope.registry = "http://" + $scope.registry;
    }
    - manifestREST.list($scope.registry)
    + manifestREST.search($scope.registry, $scope.query)
    .success(function(data, status, headers, config) {
    - $scope.repos = data.results.map(function(repo) {
    - repo.expanded = false;
    + $scope.repos = data.results.map(function(repo) {
    + repo.expanded = false;
    - return repo;
    - });
    + return repo;
    + });
    })
    .error(function(data, status, headers, config) {
    console.log("Failed to get the registry list: " + status);
    @@ -56,26 +66,23 @@
    $scope.select_repo = function(repo) {
    $scope.repo = repo;
    - manifestREST.images($scope.registry, repo.name)
    - .success(function(data, status, headers, config) {
    - repo.images = data;
    - })
    - .error(function(data, status, headers, config) {
    - console.log("Failed to get the image list: " + status);
    - });
    + // manifestREST.images($scope.registry, repo.name)
    + // .success(function(data, status, headers, config) {
    + // repo.images = data;
    + // })
    + // .error(function(data, status, headers, config) {
    + // console.log("Failed to get the image list: " + status);
    + // });
    manifestREST.tags($scope.registry, repo.name)
    .success(function(data, status, headers, config) {
    - repo.tags = {};
    -
    - for(var tag in data) {
    - var img = data[tag];
    + $scope.tags = {};
    + for(var ntag in data) {
    + var tag = data[ntag];
    + console.log(tag);
    + $scope.tags[tag.layer] = $scope.tags[tag.layer] || [];
    - if(img in repo.tags) {
    - repo.tags[img].push(tag);
    - } else {
    - repo.tags[img] = [tag];
    - }
    + $scope.tags[tag.layer].push(tag.name);
    }
    })
    .error(function(data, status, headers, config) {