Guide improvements

static/css/quay.css

@@ -7,6 +7,15 @@ html, body {
   height: 100%;
 }
 
+.tooltip {
+  word-break: normal !important;
+  word-wrap: normal !important;
+}
+
+.code-info {
+  border-bottom: 1px dashed #aaa;
+}
+
 .content-container {
   padding-bottom: 70px;
 }
@@ -831,7 +840,13 @@ p.editable:hover i {
 .repo .empty-message {
   padding: 6px;
   font-size: 1.8em;
-  color: #ccc;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.repo .empty-description {
+  max-width: 600px;
+  padding: 6px;
 }
 
 .repo dl.dl-horizontal dt {
@@ -1071,6 +1086,12 @@ p.editable:hover i {
   padding-left: 44px;
 }
 
+.repo-admin .right-info {
+  font-size: 11px;
+  margin-top: 10px;
+  text-align: right;
+}
+
 .repo-admin .entity-search input {
   width: 300px;
 }

static/partials/guide.html

@@ -3,24 +3,36 @@
 
   <h2>User Guide</h2>
   <div class="user-guide container">
-  
+    <h3>Signing into Quay <span class="label label-default">Setup</span></h3>
-    <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 setup your Docker client for pushing to Quay, login with your credentials:
-      To pull a repository from Quay, run the following command:
       <br><br>
-      <pre>docker pull quay.io/<i>username/repo_name</i></pre>
+      <pre>$ sudo docker login quay.io
+
+Login against server at https://quay.io/v1/
+Username: myusername
+Password: mypassword
+Email: my@email.com</pre>
     </div>
     <br>   
 
-
     <h3>Pushing a repository to Quay <span class="label label-success">Requires Write Access</span></h3>
     <div class="container">
-      First, tag the image with your repository name:<br><br>
+      In order to push a repository to Quay, it must be <b>tagged</b> with the <b>quay.io</b> domain and the namespace under which it will live:
-      <pre>docker tag <i>0u123imageid</i> quay.io/<i>username/repo_name</i></pre>
+      <br><br>
+      <pre>sudo docker tag <i>0u123imageid</i> quay.io/<i>username/repo_name</i></pre>
       <br>
-      Second, push the repository to Quay:<br><br>
+      Once tagged, the repository can be pushed to Quay:<br><br>
-      <pre>docker push quay.io/<i>username/repo_name</i></pre>
+      <pre>sudo docker push quay.io/<i>username/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 above 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>sudo docker pull quay.io/<i>username/repo_name</i></pre>
     </div>
     <br>
 
@@ -58,15 +70,28 @@
           <dt>Email</dt><dd>This value is ignored, any value may be used.</dd>
         </dl>
       </ul>
-
     </div>
-    <br>
 
-    <h3>Signing into Quay <span class="label label-default">Optional</span></h3>
+    <a name="#post-hook"></a>
+    <h3>Using push web hooks <span class="label label-info">Requires Admin Access</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:
+      A repository can have one or more <b>push web hooks</b> setup, which will be invoked whenever <u>a successful push occurs</u>. Web hooks can be managed from the repository's admin interface.
-      <br><br>
+      <br><br> A web hook will be invoked
-      <pre>docker login quay.io</pre>
+      as an HTTP <b>POST</b> to the specified URL, with a JSON body describing the push:<br><br>
+      <pre>
+{
+  <span class="code-info" title="The number of images pushed" bs-tooltip="tooltip.title">"pushed_image_count"</span>: 2,
+  <span class="code-info" title="The name of the repository (without its namespace)" bs-tooltip="tooltip.title">"name"</span>: "ubuntu",
+  <span class="code-info" title="The full name of the repository" bs-tooltip="tooltip.title">"repository"</span>:"devtable/ubuntu",
+  <span class="code-info" title="The URL at which the repository can be pulled by Docker" bs-tooltip="tooltip.title">"docker_url"</span>: "quay.io/devtable/ubuntu",
+  <span class="code-info" title="Map of updated tag names to their latest image IDs" bs-tooltip="tooltip.title">"updated_tags"</span>: {
+    "latest": "b750fe79269d2ec9a3c593ef05b4332b1d1a02a62b4accb2c21d589ff2f5f2dc"
+  },
+  <span class="code-info" title="The namespace of the repository" bs-tooltip="tooltip.title">"namespace"</span>: "devtable",
+  <span class="code-info" title="Whether the repository is public or private" bs-tooltip="tooltip.title">"visibility"</span>: "private",
+  <span class="code-info" title="The Quay URL for the repository" bs-tooltip="tooltip.title">"homepage"</span>: "https://quay.io/repository/devtable/ubuntu"
+}
+</pre>
     </div>
   </div>
 </div>

static/partials/repo-admin.html

@@ -20,7 +20,7 @@
     <div class="col-md-2">
       <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#permissions">Permissions</a></li>
-        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#webhook" ng-click="loadWebhooks()">Webhooks</a></li>
+        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#webhook" ng-click="loadWebhooks()">Web Hooks</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#publicprivate">Public/Private</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#delete">Delete</a></li>
       </ul>
@@ -148,19 +148,19 @@
         <!-- Webhook tab -->
         <div id="webhook" class="tab-pane">
           <div class="panel panel-default">
-            <div class="panel-heading">Push Webhooks
+            <div class="panel-heading">Push Web Hooks
-              <i class="info-icon fa fa-info-circle" data-placement="left" data-content="URLs which will be invoked when a successful push to the repository occurs."></i>
+              <i class="info-icon fa fa-info-circle" data-placement="left" data-content="URLs which will be invoked with an HTTP POST and JSON payload when a successful push to the repository occurs."></i>
             </div>
 
             <div class="panel-body" ng-show="webhooksLoading">
-              Loading webhooks: <i class="fa fa-spinner fa-spin fa-2x" style="vertical-align: middle; margin-left: 4px"></i>
+              Loading web hooks: <i class="fa fa-spinner fa-spin fa-2x" style="vertical-align: middle; margin-left: 4px"></i>
             </div>
 
             <div class="panel-body" ng-show="!webhooksLoading">
               <table class="permissions" ng-form="newWebhookForm">
                 <thead>
                   <tr>
-                    <td style="width: 500px;">Webhook URL</td>
+                    <td style="width: 500px;">Web Hook URL</td>
                     <td></td>
                   </tr>
                 </thead>
@@ -171,13 +171,13 @@
                     <td>
                       <span class="delete-ui" tabindex="0">
                         <span class="delete-ui-button" ng-click="deleteWebhook(webhook)"><button class="btn btn-danger">Delete</button></span>
-                        <i class="fa fa-times" bs-tooltip="tooltip.title" data-placement="right" title="Delete Webhook"></i>
+                        <i class="fa fa-times" bs-tooltip="tooltip.title" data-placement="right" title="Delete Web Hook"></i>
                       </span>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      <input type="url" class="form-control" placeholder="New webhook url..." ng-model="newWebhook.url" required>
+                      <input type="url" class="form-control" placeholder="New web hook url..." ng-model="newWebhook.url" required>
                     </td>
                     <td>
                       <button class="btn btn-primary" type="submit" ng-click="createWebhook()">Create</button>
@@ -185,6 +185,10 @@
                   </tr>
                 </tbody>
               </table>
+
+              <div class="right-info">
+                Quay will <b>POST</b> to these web hooks whenever a push occurs. See the <a href="/guide">User Guide</a> for more information.
+              </div>
             </div>
           </div>
         </div>

static/partials/view-repo.html

@@ -57,7 +57,15 @@
 
   <!-- Empty message -->
   <div class="repo-content" ng-show="!currentTag.image && !repo.is_building">
-    <div class="empty-message">(This repository is empty)</div>
+    <div class="empty-message">
+      This repository is empty
+    </div>
+
+    <div class="empty-description" ng-show="repo.can_write">
+      To push images to this repository:<br><br>
+      <pre>sudo docker tag <i>0u123imageidgoeshere</i> quay.io/{{repo.namespace}}/{{repo.name}}
+sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}</pre>
+    </div>
   </div>
 
   <div class="repo-content" ng-show="!currentTag.image && repo.is_building">