Add UI for viewing labels on a manifest in the tags view

static/js/directives/repo-view/repo-panel-tags.js

@@ -35,6 +35,8 @@ angular.module('quay').directive('repoPanelTags', function () {
       $scope.tagActionHandler = null;
       $scope.tagsPerPage = 25;
 
+      $scope.expandedView = false;
+
       $scope.imageVulnerabilities = {};
       $scope.defcon1 = {};
       $scope.hasDefcon1 = false;
@@ -262,6 +264,26 @@ angular.module('quay').directive('repoPanelTags', function () {
         $scope.checkedTags.setChecked($scope.tags);
       };
 
+      $scope.trackLineExpandedClass = function(index, track_info) {
+        var startIndex = $.inArray(track_info.tags[0], $scope.tags);
+        var endIndex = $.inArray(track_info.tags[track_info.tags.length - 1], $scope.tags);
+        index += $scope.options.page * $scope.tagsPerPage;
+
+        if (index < startIndex) {
+          return 'before';
+        }
+
+        if (index > endIndex) {
+          return 'after';
+        }
+
+        if (index >= startIndex && index < endIndex) {
+          return 'middle';
+        }
+
+        return '';
+      };
+
       $scope.trackLineClass = function(index, track_info) {
         var startIndex = $.inArray(track_info.tags[0], $scope.tags);
         var endIndex = $.inArray(track_info.tags[track_info.tags.length - 1], $scope.tags);
@@ -359,6 +381,10 @@ angular.module('quay').directive('repoPanelTags', function () {
         $scope.setTab('history');
       };
 
+      $scope.setExpanded = function(expanded) {
+        $scope.expandedView = expanded;
+      };
+
       $scope.getTagNames = function(checked) {
         var names = checked.map(function(tag) {
           return tag.name;

static/js/directives/ui/label-list.js

@@ -0,0 +1,15 @@
+/**
+ * An element which displays labels.
+ */
+angular.module('quay').directive('labelList', function () {
+  return {
+    templateUrl: '/static/directives/label-list.html',
+    restrict: 'C',
+    replace: true,
+    scope: {
+      expand: '@expand',
+      labels: '=labels'
+    },
+    controller: function($scope) {}
+  };
+});

static/js/directives/ui/label-view.js

@@ -0,0 +1,32 @@
+/**
+ * An element which displays a single label.
+ */
+angular.module('quay').directive('labelView', function () {
+  return {
+    templateUrl: '/static/directives/label-view.html',
+    restrict: 'C',
+    replace: true,
+    scope: {
+      expand: '@expand',
+      label: '=label'
+    },
+    controller: function($scope, $sanitize) {
+      $scope.getKind = function(label) {
+        switch (label.media_type) {
+          case 'application/json':
+            return 'json';
+        }
+
+        return '';
+      };
+
+      $scope.viewLabelValue = function() {
+        bootbox.alert({
+          size: "small",
+          title: $scope.label.key,
+          message: '<pre>' + $sanitize($scope.label.value) + '</pre>'
+        });
+      };
+    }
+  };
+});

static/js/directives/ui/manifest-label-list.js

@@ -0,0 +1,47 @@
+/**
+ * An element which displays the labels on a repository manifest.
+ */
+angular.module('quay').directive('manifestLabelList', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/manifest-label-list.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'manifestDigest': '=manifestDigest',
+    },
+    controller: function($scope, $element, ApiService) {
+      $scope.labels = null;
+
+      var loadLabels = function() {
+        if (!$scope.repository) {
+          return;
+        }
+
+        if (!$scope.manifestDigest) {
+          return;
+        }
+
+        $scope.labels = null;
+        $scope.loadError = false;
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'manifestref': $scope.manifestDigest
+        };
+
+        ApiService.listManifestLabels(null, params).then(function(resp) {
+          $scope.labels = resp['labels'];
+        }, function() {
+          $scope.loadError = true;
+        });
+      };
+
+      $scope.$watch('repository', loadLabels);
+      $scope.$watch('manifestDigest', loadLabels);
+    }
+  };
+  return directiveDefinitionObject;
+});