From ea61a68bcb2a6b0a3cd1e800ba1fff62039d7738 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Wed, 11 Mar 2015 17:47:12 -0700
Subject: [PATCH] Add missing files from last commit (stupid SourceTree...)

---
 .../repo-view/repo-panel-changes.css          |  28 +++++
 .../css/directives/ui/image-changes-view.css  |  47 ++++++++
 .../css/directives/ui/image-info-sidebar.css  |  68 ++++++++++++
 static/css/directives/ui/tag-info-sidebar.css |   5 +
 static/css/quay.css                           |   4 +
 static/directives/image-changes-view.html     |  33 ++++++
 static/directives/image-info-sidebar.html     | 105 ++++++++++++++++++
 .../repo-view/repo-panel-changes.html         |  64 +++++++++++
 .../directives/repo-view/repo-panel-tags.html |  38 +------
 static/directives/resource-view.html          |   2 +-
 static/directives/tag-info-sidebar.html       |  42 +++++++
 static/directives/tag-operations-dialog.html  |  87 +++++++++++++++
 12 files changed, 488 insertions(+), 35 deletions(-)
 create mode 100644 static/css/directives/repo-view/repo-panel-changes.css
 create mode 100644 static/css/directives/ui/image-changes-view.css
 create mode 100644 static/css/directives/ui/image-info-sidebar.css
 create mode 100644 static/css/directives/ui/tag-info-sidebar.css
 create mode 100644 static/directives/image-changes-view.html
 create mode 100644 static/directives/image-info-sidebar.html
 create mode 100644 static/directives/repo-view/repo-panel-changes.html
 create mode 100644 static/directives/tag-info-sidebar.html
 create mode 100644 static/directives/tag-operations-dialog.html

diff --git a/static/css/directives/repo-view/repo-panel-changes.css b/static/css/directives/repo-view/repo-panel-changes.css
new file mode 100644
index 000000000..14838ee1d
--- /dev/null
+++ b/static/css/directives/repo-view/repo-panel-changes.css
@@ -0,0 +1,28 @@
+.repo-panel-changes .tab-header {
+  margin-bottom: 30px !important;
+}
+
+.repo-panel-changes .side-panel-title {
+  font-size: 20px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+
+.repo-panel-changes .side-panel-title i.fa {
+  margin-right: 10px;
+}
+
+.repo-panel-changes .side-panel {
+  padding: 10px;
+}
+
+.repo-panel-changes .visualized-tag {
+  font-size: 18px;
+  margin-left: 10px;
+}
+
+.repo-panel-changes .visualized-tag .fa {
+  margin-right: 8px;
+  vertical-align: middle;
+}
diff --git a/static/css/directives/ui/image-changes-view.css b/static/css/directives/ui/image-changes-view.css
new file mode 100644
index 000000000..9e7b8940e
--- /dev/null
+++ b/static/css/directives/ui/image-changes-view.css
@@ -0,0 +1,47 @@
+.image-changes-view .change-count {
+  font-size: 16px;
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.image-changes-view .change-count b {
+  font-weight: normal;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+.image-changes-view .changes-container .well {
+  border: 0px;
+}
+
+.image-changes-view .changes-container i.fa-plus-square {
+  color: rgb(73, 209, 73);
+}
+
+.image-changes-view .changes-container i.fa-minus-square {
+  color: rgb(209, 73, 73);
+}
+
+.image-changes-view .changes-container i.fa-pencil-square {
+  color: rgb(73, 100, 209);
+}
+
+.image-changes-view .change-count:last-child {
+  margin-right: 0px;
+}
+
+.image-changes-view .change-count i {
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+.image-changes-view .change i {
+  float: right;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+
+.image-changes-view .more-changes {
+  padding: 6px;
+  text-align: right;
+}
diff --git a/static/css/directives/ui/image-info-sidebar.css b/static/css/directives/ui/image-info-sidebar.css
new file mode 100644
index 000000000..5dffade2b
--- /dev/null
+++ b/static/css/directives/ui/image-info-sidebar.css
@@ -0,0 +1,68 @@
+.image-info-sidebar .image-comment {
+  margin-bottom: 4px;
+}
+
+.image-info-sidebar .image-section {
+  margin-top: 12px;
+  padding-bottom: 2px;
+  position: relative;
+}
+
+.image-info-sidebar .image-section .tag {
+  margin: 2px;
+  border-radius: 8px;
+  display: inline-block;
+  padding: 4px;
+}
+
+.image-info-sidebar .image-section .section-icon {
+    float: left;
+    font-size: 16px;
+    margin-left: -4px;
+    margin-right: 14px;
+    color: #bbb;
+    width: 18px;
+    text-align: center;
+    padding-top: 6px;
+}
+
+.image-info-sidebar .image-section .section-info {
+  padding: 4px;
+  padding-left: 6px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+  background-color: #f5f5f5;
+
+  vertical-align: middle;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.image-info-sidebar .image-section .section-info-with-dropdown {
+  padding-right: 30px;
+}
+
+.image-info-sidebar .image-section .dropdown {
+  display: inline-block;
+  position: absolute;
+  top: 0px;
+  bottom: 2px;
+  right: 0px;
+}
+
+.image-info-sidebar .image-section .dropdown-button {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+
+  background: white;
+  padding: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border: 1px solid #eee;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  cursor: pointer;
+}
diff --git a/static/css/directives/ui/tag-info-sidebar.css b/static/css/directives/ui/tag-info-sidebar.css
new file mode 100644
index 000000000..020625ad0
--- /dev/null
+++ b/static/css/directives/ui/tag-info-sidebar.css
@@ -0,0 +1,5 @@
+.tag-info-sidebar .control-bar {
+  padding-top: 10px;
+  margin-top: 10px;
+  border-top: 1px solid #eee;
+}
\ No newline at end of file
diff --git a/static/css/quay.css b/static/css/quay.css
index 3062f95e2..bcc0f6584 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -324,6 +324,10 @@ nav.navbar-default .navbar-nav>li>a.active {
   visibility: hidden;
 }
 
+.resource-view.element .resource-content.hidden .tab-content > .active {
+  visibility: hidden;
+}
+
 .resource-view-element .resource-content.visible {
   z-index: 2;
   visibility: visible;
diff --git a/static/directives/image-changes-view.html b/static/directives/image-changes-view.html
new file mode 100644
index 000000000..65a5e99ed
--- /dev/null
+++ b/static/directives/image-changes-view.html
@@ -0,0 +1,33 @@
+<div class="image-changes-view-element">
+  <div class="resource-view" resource="imageChangesResource">
+    <div class="changes-container" ng-show="hasChanges">
+      <span class="change-count added"
+            ng-show="changeData.added.length > 0"
+            data-title="Files Added"
+            data-placement="top"
+            data-container="body"
+            bs-tooltip>
+        <i class="fa fa-plus-square"></i>
+        <b>{{ changeData.added.length }}</b>
+      </span>
+      <span class="change-count removed"
+            ng-show="changeData.removed.length > 0"
+            data-title="Files Removed"
+            data-placement="top"
+            data-container="body"
+            bs-tooltip>
+        <i class="fa fa-minus-square"></i>
+        <b>{{ changeData.removed.length }}</b>
+      </span>
+      <span class="change-count changed"
+            ng-show="changeData.changed.length > 0"
+            data-title="Files Changes"
+            data-placement="top"
+            data-container="body"
+            bs-tooltip>
+        <i class="fa fa-pencil-square"></i>
+        <b>{{ changeData.changed.length }}</b>
+      </span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/static/directives/image-info-sidebar.html b/static/directives/image-info-sidebar.html
new file mode 100644
index 000000000..14bd00a46
--- /dev/null
+++ b/static/directives/image-info-sidebar.html
@@ -0,0 +1,105 @@
+<div class="image-info-sidebar-element">
+  <!-- Comment -->
+  <div class="image-comment" ng-if="imageData.comment">
+    <blockquote style="margin-top: 10px;">
+      <span class="markdown-view" content="imageData.comment"></span>
+    </blockquote>
+  </div>
+
+  <!-- Image ID -->
+  <div class="image-section">
+    <i class="fa fa-code section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i>
+    <span class="section-info">
+      <a class="image-link" ng-href="{{ tracker.imageLink(image) }}">
+        {{ imageData.id }}
+      </a>
+    </span>
+  </div>
+
+  <!-- Tags -->
+  <div class="image-section">
+    <i class="fa fa-tag section-icon" data-title="Current Tags" bs-tooltip></i>
+    <span class="section-info section-info-with-dropdown">
+      <a class="label tag label-default" ng-repeat="tag in imageData.tags"
+         href="javascript:void(0)" ng-click="tagSelected({'tag': tag})">
+        {{ tag }}
+      </a>
+      <span style="color: #ccc;" ng-if="!imageData.tags.length">(No Tags)</span>
+
+      <div class="dropdown" data-placement="top"
+           ng-if="tracker.repository.can_write || imageData.tags">
+        <a href="javascript:void(0)" class="dropdown-button" data-toggle="dropdown"
+           bs-tooltip="tooltip.title" data-title="Manage Tags"
+           data-container="body">
+          <b class="caret"></b>
+        </a>
+
+        <ul class="dropdown-menu pull-right">
+          <li ng-repeat="tag in imageData.tags">
+            <a href="javascript:void(0)" ng-click="tagSelected({'tag': tag})">
+              <i class="fa fa-tag"></i>{{ tag }}
+            </a>
+          </li>
+          <li class="divider" role="presentation"
+              ng-if="tracker.repository.can_write && imageData.tags"></li>
+          <li>
+            <a href="javascript:void(0)"
+               ng-click="addTagRequested({'image': image})"
+               ng-if="tracker.repository.can_write">
+              <i class="fa fa-plus"></i>Add New Tag
+            </a>
+          </li>
+        </ul>
+      </div>
+    </span>
+  </div>
+
+  <!-- Command -->
+  <div class="image-section" ng-if="imageData.command && imageData.command.length">
+    <i class="fa fa-terminal section-icon" data-title="Image Command" bs-tooltip></i>
+    <span class="section-info">
+      <span class="formatted-command trimmed"
+         data-html="true"
+         data-title="{{ getTooltipCommand(imageData) }}"
+         data-placement="top" bs-tooltip>{{ getFormattedCommand(imageData) }}</span>
+    </span>
+  </div>
+
+  <!-- Created -->
+  <div class="image-section">
+    <i class="fa fa-calendar section-icon" data-title="Created" bs-tooltip></i>
+    <span class="section-info">
+      <dd am-time-ago="parseDate(imageData.created)"></dd>
+    </span>
+  </div>
+
+  <!-- Size -->
+  <div class="image-section">
+    <i class="fa fa-cloud-upload section-icon"
+       data-title="The amount of data sent between Docker and the registry when pushing/pulling"
+       bs-tooltip></i>
+    <span class="section-info">{{ imageData.size | bytes }}</span>
+  </div>
+
+  <!-- Locations -->
+  <div class="image-section">
+    <i class="fa fa-map-marker section-icon"
+       data-title="The geographic region(s) in which this image data is located"
+       bs-tooltip></i>
+    <span class="section-info">
+      <span class="location-view" location="location"
+            ng-repeat="location in imageData.locations"></span>
+    </span>
+  </div>
+
+  <!-- Changes -->
+  <div class="image-section" ng-show="hasImageChanges">
+    <i class="fa fa-code-fork section-icon"
+       data-title="File Changes"
+       bs-tooltip></i>
+    <span class="section-info">
+      <div class="image-changes-view" repository="tracker.repository" image="image"
+           has-changes="hasImageChanges"></div>
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/static/directives/repo-view/repo-panel-changes.html b/static/directives/repo-view/repo-panel-changes.html
new file mode 100644
index 000000000..470fc5649
--- /dev/null
+++ b/static/directives/repo-view/repo-panel-changes.html
@@ -0,0 +1,64 @@
+<div class="repo-panel-changes-element">
+  <!-- No Tags Selected -->
+  <div class="empty" ng-if="!selectedTags.length">
+    <div class="empty-primary-msg">No tags selected to view</div>
+    <div class="empty-secondary-msg">
+      Please select one or more tags on the <i class="fa fa-tags" style="margin-left: 4px; margin-right: 4px;"></i> Tags tab to visualize.
+    </div>
+  </div>
+
+  <!-- Tags Selected -->
+  <div ng-if="selectedTags.length > 0">
+    <h3 class="tab-header">
+      Visualize Tags:
+      <span class="visualized-tag" ng-repeat="tag in selectedTags">
+        <i class="fa fa-tag"></i>{{ tag }}
+      </span>
+    </h3>
+
+    <div id="image-history row" class="resource-view" resource="imagesResource"
+         error-message="'Cannot load repository images'">
+
+      <!-- Tree View container -->
+      <div  class="col-md-8">
+        <div class="panel panel-default">
+          <!-- Image history tree -->
+          <div id="image-history-container" onresize="tree.notifyResized()"></div>
+        </div>
+      </div>
+
+      <!-- Side Panel -->
+      <div class="col-md-4">
+        <div class="side-panel-title" ng-if="currentTag">
+          <i class="fa fa-tag"></i>{{ currentTag }}
+        </div>
+        <div class="side-panel-title" ng-if="currentImage">
+          <i class="fa fa-archive"></i>{{ currentImage.substr(0, 12) }}
+        </div>
+
+        <div class="side-panel">
+          <!-- Tag Info -->
+          <div class="tag-info-sidebar"
+               tracker="tracker"
+               tag="currentTag"
+               image-selected="setImage(image)"
+               delete-tag-requested="tagActionHandler.askDeleteTag(tag)"
+               ng-if="currentTag">
+          </div>
+
+          <!-- Image Info -->
+          <div class="image-info-sidebar"
+               tracker="tracker"
+               image="currentImage"
+               tag-selected="setTag(tag)"
+               add-tag-requested="tagActionHandler.askAddTag(image)"
+               ng-if="currentImage">
+          </div>
+        </div>
+      </div>
+  </div>
+</div>
+
+<div class="tag-operations-dialog" repository="repository" images="images"
+     action-handler="tagActionHandler"
+     tag-changed="handleTagChanged(data)"></div>
\ No newline at end of file
diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html
index a6782d6b8..11dc45847 100644
--- a/static/directives/repo-view/repo-panel-tags.html
+++ b/static/directives/repo-view/repo-panel-tags.html
@@ -21,7 +21,8 @@
      </span>
 
      <span class="co-checked-actions" ng-if="checkedTags.checked.length">
-       <!--<button class="btn btn-default"><i class="fa fa-code-fork"></i> Visualize</button>-->
+       <a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}?tab=changes&tags={{ getCheckedTagsString(checkedTags.checked) }}"
+          class="btn btn-default"><i class="fa fa-code-fork"></i> Visualize</a>
        <button class="btn btn-default" ng-click="askDeleteMultipleTags(checkedTags.checked)">
          <i class="fa fa-times"></i> Delete
        </button>
@@ -86,36 +87,5 @@
   </div>
 </div>
 
-
-<!-- Delete Tags Confirm -->
-<div class="cor-confirm-dialog"
-     dialog-context="deleteMultipleTagsInfo"
-     dialog-action="deleteMultipleTags(info.tags, callback)"
-     dialog-title="Delete Tags"
-     dialog-action-title="Delete Tags">
-  Are you sure you want to delete the following tags:
-  <ul>
-    <li ng-repeat="tag_info in deleteMultipleTagsInfo.tags">
-      <span class="label label-default tag">{{ tag_info.name }}</span>
-    </li>
-  </ul>
-
-  <div style="margin-top: 20px">
-    <strong>Note: </strong>This operation can take several minutes.
-  </div>
-</div>
-
-<!-- Delete Tag Confirm -->
-<div class="cor-confirm-dialog"
-     dialog-context="deleteTagInfo"
-     dialog-action="deleteTag(info.tags, callback)"
-     dialog-title="Delete Tag"
-     dialog-action-title="Delete Tag">
-  Are you sure you want to delete tag
-  <span class="label label-default tag">{{ deleteTagInfo.tag }}</span>?
-
-  <div class="tag-specific-images-view" tag="deleteTagInfo.tag" repository="repository"
-       images="images" style="margin-top: 20px">
-    The following images and any other images not referenced by a tag will be deleted:
-  </div>
-</div>
\ No newline at end of file
+<div class="tag-operations-dialog" repository="repository" images="images"
+     action-handler="tagActionHandler"></div>
\ No newline at end of file
diff --git a/static/directives/resource-view.html b/static/directives/resource-view.html
index 30e23559b..1ea780c1f 100644
--- a/static/directives/resource-view.html
+++ b/static/directives/resource-view.html
@@ -3,7 +3,7 @@
   <div class="resource-error alert alert-info" ng-show="getState(resources) == 'error'">
     {{ errorMessage }}
   </div>
-  <div class="resource-content" ng-class="getState(resources) == 'ready' ? 'visible' : ''">
+  <div class="resource-content" ng-class="getState(resources) == 'ready' ? 'visible' : 'hidden'">
     <span ng-transclude></span>
   </div>
 </div>
diff --git a/static/directives/tag-info-sidebar.html b/static/directives/tag-info-sidebar.html
new file mode 100644
index 000000000..a4dfc10de
--- /dev/null
+++ b/static/directives/tag-info-sidebar.html
@@ -0,0 +1,42 @@
+<div class="tag-info-sidebar-element">
+  <dl class="dl-normal">
+    <dt>Last Modified</dt>
+    <dd am-time-ago="parseDate(tagImage.created)"></dd>
+
+    <dt>Total Compressed Size</dt>
+    <dd>
+      <span class="context-tooltip"
+            data-title="The amount of data sent between Docker and the registry when pushing/pulling"
+            data-container="body"
+            bs-tooltip>
+            {{ tracker.getTotalSize(tag) | bytes }}
+      </span>
+    </dd>
+  </dl>
+
+  <div class="tag-image-sizes">
+    <div class="tag-image-size" ng-repeat="image in tracker.getImagesForTagBySize(tag) | limitTo: 10">
+      <span class="size-limiter">
+        <span class="size-bar"
+              ng-style="{'width': (image.size / tracker.getTotalSize(tag)) * 100 + '%'}"
+              data-title="{{ image.size | bytes }}"
+              bs-tooltip>
+        </span>
+      </span>
+      <span class="size-title">
+        <a class="image-size-link"
+           href="javascript:void(0)"
+           ng-click="imageSelected({'image': image.id})"
+           data-image="{{ image.id.substr(0, 12) }}">
+          {{ image.id.substr(0, 12) }}
+        </a>
+      </span>
+    </div>
+  </div>
+
+  <div class="control-bar" ng-show="tracker.repository.can_admin">
+    <button class="btn btn-default" ng-click="deleteTagRequested({'tag': tag})">
+      <i class="fa fa-times" style="margin-right: 6px;"></i>Delete Tag
+    </button>
+  </div>
+</div>
diff --git a/static/directives/tag-operations-dialog.html b/static/directives/tag-operations-dialog.html
new file mode 100644
index 000000000..d47d4651c
--- /dev/null
+++ b/static/directives/tag-operations-dialog.html
@@ -0,0 +1,87 @@
+<div class="tag-operations-dialog-element">
+  <!-- Add Tag Dialog -->
+  <div class="modal fade" id="createOrMoveTagModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal"
+                  aria-hidden="true" ng-show="!addingTag">&times;</button>
+          <h4 class="modal-title">{{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move' : 'Add' }} Tag to Image {{ toTagImage.substr(0, 12) }}</h4>
+        </div>
+        <form name="addTagForm" ng-submit="createOrMoveTag(toTagImage, tagToCreate);">
+          <div class="modal-body">
+            <div class="cor-loader" ng-show="addingTag"></div>
+            <div ng-show="!addingTag">
+              <input type="text" class="form-control" id="tagName"
+                     placeholder="Enter tag name"
+                     ng-model="tagToCreate" ng-pattern="/^([a-z0-9_\.-]){3,30}$/"
+                     ng-disabled="creatingTag" autofocus required>
+
+              <div style="margin: 10px; margin-top: 20px;"
+                   ng-show="isOwnedTag(toTagImage, tagToCreate)">
+                Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to this image.
+              </div>
+
+              <div style="margin: 10px; margin-top: 20px;"
+                   ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
+                Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to another image. This will <b>move</b> the tag.
+              </div>
+
+              <div class="tag-specific-images-view"
+                   tag="tagToCreate"
+                   repository="repo"
+                   images="images"
+                   image-cutoff="toTagImage"
+                   style="margin: 10px; margin-top: 20px; margin-bottom: -10px;"
+                   ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
+                This will also delete any unattach images and delete the following images:
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer" ng-show="!addingTag">
+            <button type="submit" class="btn btn-primary"
+                    ng-disabled="addTagForm.$invalid || isOwnedTag(toTagImage, tagToCreate)"
+                    ng-class="isAnotherImageTag(toTagImage, tagToCreate) ? 'btn-warning' : 'btn-primary'"
+                    ng-show="!creatingTag">
+              {{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move Tag' : 'Create Tag' }}
+            </button>
+            <button class="btn btn-default" data-dismiss="modal" ng-show="!addingTag">Cancel</button>
+          </div>
+        </form>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+
+  <!-- Delete Tags Confirm -->
+  <div class="cor-confirm-dialog"
+       dialog-context="deleteMultipleTagsInfo"
+       dialog-action="deleteMultipleTags(info.tags, callback)"
+       dialog-title="Delete Tags"
+       dialog-action-title="Delete Tags">
+    Are you sure you want to delete the following tags:
+    <ul>
+      <li ng-repeat="tag_info in deleteMultipleTagsInfo.tags">
+        <span class="label label-default tag">{{ tag_info.name }}</span>
+      </li>
+    </ul>
+
+    <div style="margin-top: 20px">
+      <strong>Note: </strong>This operation can take several minutes.
+    </div>
+  </div>
+
+  <!-- Delete Tag Confirm -->
+  <div class="cor-confirm-dialog"
+       dialog-context="deleteTagInfo"
+       dialog-action="deleteTag(info.tag, callback)"
+       dialog-title="Delete Tag"
+       dialog-action-title="Delete Tag">
+    Are you sure you want to delete tag
+    <span class="label label-default tag">{{ deleteTagInfo.tag }}</span>?
+
+    <div class="tag-specific-images-view" tag="deleteTagInfo.tag" repository="repository"
+         images="images" style="margin-top: 20px">
+      The following images and any other images not referenced by a tag will be deleted:
+    </div>
+  </div>
+</div>
\ No newline at end of file