Add basic user interface for application repos

Adds support for creating app repos, viewing app repos and seeing the list of app repos in the Quay UI.

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

@@ -15,6 +15,10 @@ angular.module('quay').directive('repoPanelSettings', function () {
     controller: function($scope, $element, ApiService, Config) {
       $scope.deleteDialogCounter = 0;
 
+      var getTitle = function(repo) {
+        return repo.kind == 'application' ? 'application' : 'image';
+      };
+
       $scope.getBadgeFormat = function(format, repository) {
         if (!repository) { return ''; }
 
@@ -52,7 +56,8 @@ angular.module('quay').directive('repoPanelSettings', function () {
           'repository': $scope.repository.namespace + '/' + $scope.repository.name
         };
 
-        var errorHandler = ApiService.errorDisplay('Could not delete repository', callback);
+        var errorHandler = ApiService.errorDisplay(
+          'Could not delete ' + getTitle($scope.repository), callback);
 
         ApiService.deleteRepository(null, params).then(function() {
           callback(true);
@@ -62,9 +67,11 @@ angular.module('quay').directive('repoPanelSettings', function () {
         }, errorHandler);
       };
 
-
       $scope.askChangeAccess = function(newAccess) {
-        bootbox.confirm('Are you sure you want to make this repository ' + newAccess + '?', function(r) {
+        var msg = 'Are you sure you want to make this ' + getTitle($scope.repository) + ' ' +
+                   newAccess + '?';
+
+        bootbox.confirm(msg, function(r) {
           if (!r) { return; }
           $scope.changeAccess(newAccess);
         });
@@ -81,7 +88,7 @@ angular.module('quay').directive('repoPanelSettings', function () {
 
         ApiService.changeRepoVisibility(visibility, params).then(function() {
           $scope.repository.is_public = newAccess == 'public';
-        }, ApiService.errorDisplay('Could not change repository visibility'));
+        }, ApiService.errorDisplay('Could not change visibility'));
       };
     }
   };

static/js/directives/ui/app-public-view/app-public-view.component.html

@@ -0,0 +1,124 @@
+<div class="app-public-view-element">
+  <div class="co-main-content-panel">
+    <div class="app-row">
+      <!-- Main panel -->
+      <div class="col-md-9 main-content">
+        <!-- App Header -->
+        <div class="app-header">
+          <a href="https://coreos.com/blog/quay-application-registry-for-kubernetes.html" class="hidden-xs hidden-sm" style="float: right; padding: 6px;" ng-safenewtab><i class="fa fa-info-circle" style="margin-right: 6px;"></i>Learn more about applications</a>
+          <h3><i class="fa ci-appcube"></i>{{ $ctrl.repository.namespace }}/{{ $ctrl.repository.name }}</h3>
+        </div>
+
+        <!-- Tabs -->
+        <ul class="co-top-tab-bar">
+          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'description' ? 'active': ''" ng-click="$ctrl.showTab('description')">
+            Description
+          </li>
+          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'channels' ? 'active': ''" ng-click="$ctrl.showTab('channels')">
+            Channels
+          </li>
+          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'releases' ? 'active': ''" ng-click="$ctrl.showTab('releases')">
+            Releases
+          </li>
+          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'settings' ? 'active': ''" ng-click="$ctrl.showTab('settings')"
+              ng-if="$ctrl.repository.can_admin">
+            Settings
+          </li>
+        </ul>
+
+        <div class="tab-content">
+          <div ng-show="$ctrl.currentTab == 'description'">
+            <div class="description markdown-input"
+             content="$ctrl.repository.description"
+             can-write="$ctrl.repository.can_write"
+             content-changed="$ctrl.updateDescription"
+             field-title="'application description'">
+            </div>
+          </div>
+
+          <div ng-show="$ctrl.currentTab == 'channels'">
+            <div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write">
+              <h3>No channels found for this application</h3>
+              <br>
+              <p>
+                To push a new channel (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
+<pre class="command">
+helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
+</pre>
+              </p>
+            </div>
+
+            <div ng-show="$ctrl.repository.channels.length || !$ctrl.repository.can_write">
+              <cor-table table-data="$ctrl.repository.channels" table-item-title="channels" filter-fields="['name']">
+                <cor-table-col datafield="name" sortfield="name" title="Name"
+                               templateurl="/static/js/directives/ui/app-public-view/channel-name.html"></cor-table-col>
+                <cor-table-col datafield="release" sortfield="release" title="Current Release"></cor-table-col>
+                <cor-table-col datafield="last_modified" sortfield="last_modified" title="Last Modified"
+                               selected="true" dataKind="datetime"
+                               templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
+              </cor-table>
+            </div>
+          </div> <!-- /channels -->
+
+          <div ng-show="$ctrl.currentTab == 'releases'">
+            <div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write">
+              <h3>No releases found for this application</h3>
+              <br>
+              <p>
+                To push a new release (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
+<pre class="command">
+helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
+</pre>
+              </p>
+            </div>
+
+            <div ng-show="$ctrl.repository.releases.length || !$ctrl.repository.can_write">
+              <cor-table table-data="$ctrl.repository.releases" table-item-title="releases" filter-fields="['name']">
+                <cor-table-col datafield="name" sortfield="name" title="Name"></cor-table-col>
+                <cor-table-col datafield="last_modified" sortfield="last_modified"
+                               title="Created"
+                               selected="true" dataKind="datetime"
+                               templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
+                <cor-table-col datafield="channels" title="Channels"
+                               templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col>
+              </cor-table>
+            </div>
+          </div> <!-- /releases -->
+
+          <div ng-show="$ctrl.currentTab == 'settings'" ng-if="$ctrl.repository.can_admin">
+            <div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Side bar -->
+      <div class="col-md-3 side-bar">
+        <div>
+          <visibility-indicator repository="$ctrl.repository"></visibility-indicator>
+        </div>
+        <div ng-if="$ctrl.repository.is_public">{{ $ctrl.repository.namespace }} is sharing this application publicly</div>
+        <div ng-if="!$ctrl.repository.is_public">This application is private and only visible to those with permission</div>
+
+        <div class="sidebar-table" ng-if="$ctrl.repository.channels.length">
+          <h4>Latest Channels</h4>
+          <cor-table table-data="$ctrl.repository.channels" table-item-title="channels" filter-fields="['name']" compact="true" max-display-count="3">
+            <cor-table-col datafield="name" sortfield="name" title="Name"
+                           templateurl="/static/js/directives/ui/app-public-view/channel-name.html"></cor-table-col>
+            <cor-table-col datafield="release" sortfield="release" title="Current Release"></cor-table-col>
+          </cor-table>
+        </div>
+
+        <div class="sidebar-table" ng-if="$ctrl.repository.releases.length">
+          <h4>Latest Releases</h4>
+          <cor-table table-data="$ctrl.repository.releases" table-item-title="releases" filter-fields="['name']" compact="true" max-display-count="3">
+            <cor-table-col datafield="name" sortfield="name" title="Name"></cor-table-col>
+            <cor-table-col datafield="last_modified" sortfield="last_modified"
+                           title="Created"
+                           selected="true" dataKind="datetime"
+                           templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
+          </cor-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

static/js/directives/ui/app-public-view/app-public-view.component.ts

@@ -0,0 +1,30 @@
+import { Input, Component } from 'angular-ts-decorators';
+
+/**
+ * A component that displays the public information associated with an application repository.
+ */
+@Component({
+  selector: 'appPublicView',
+  templateUrl: '/static/js/directives/ui/app-public-view/app-public-view.component.html'
+})
+export class AppPublicViewComponent implements ng.IComponentController {
+  @Input('<') public repository: any;
+  private currentTab: string = 'description';
+  private settingsShown: number = 0;
+
+  constructor(private Config: any) {
+      this.updateDescription = this.updateDescription.bind(this);
+  }
+
+  private updateDescription(content: string) {
+    this.repository.description = content;
+    this.repository.put();
+  }
+
+  public showTab(tab: string): void {
+      this.currentTab = tab;
+      if (tab == 'settings') {
+          this.settingsShown++;
+      }
+  }
+}

static/js/directives/ui/app-public-view/channel-name.html

@@ -0,0 +1 @@
+<channel-icon name="item.name"></channel-icon><span style="vertical-align: middle; margin-left: 6px;">{{ item.name }}</span>

static/js/directives/ui/app-public-view/channels-list.html

@@ -0,0 +1,3 @@
+<span ng-repeat="channel_name in item.channels">
+  <channel-icon name="channel_name"></channel-icon>
+</span>

static/js/directives/ui/app-public-view/last-modified.html

@@ -0,0 +1,3 @@
+<span data-title="{{ item.last_modified | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}" bs-tooltip>
+    <span am-time-ago="item.last_modified"></span>
+</span>

static/js/directives/ui/channel-icon/channel-icon.component.html

@@ -0,0 +1,7 @@
+<span class="channel-icon-element" data-title="{{ $ctrl.name }}" bs-tooltip>
+  <span class="hexagon" ng-style="{'background-color': $ctrl.color($ctrl.name)}">
+    <span class="before" ng-style="{'border-bottom-color': $ctrl.color($ctrl.name)}"></span>
+    <span class="after" ng-style="{'border-top-color': $ctrl.color($ctrl.name)}"></span>
+  </span>
+  <b>{{ $ctrl.initial($ctrl.name) }}</b>
+</span>

static/js/directives/ui/channel-icon/channel-icon.component.ts

@@ -0,0 +1,47 @@
+import { Input, Component } from 'angular-ts-decorators';
+
+/**
+ * A component that displays the icon of a channel.
+ */
+@Component({
+  selector: 'channelIcon',
+  templateUrl: '/static/js/directives/ui/channel-icon/channel-icon.component.html',
+})
+export class ChannelIconComponent implements ng.IComponentController {
+  @Input('<') public name: string;
+
+  private colors: any;
+
+  constructor(Config: any, private md5: any) {
+    this.colors = Config['CHANNEL_COLORS'];
+  }
+
+  private initial(name: string): string {
+    if (name == 'alpha') {
+      return 'α';
+    }
+    if (name == 'beta') {
+      return 'β';
+    }
+    if (name == 'stable') {
+      return 'S';
+    }
+    return name[0].toUpperCase();
+  }
+
+  private color(name: string): string {
+    if (name == 'alpha') {
+      return this.colors[0];
+    }
+    if (name == 'beta') {
+      return this.colors[1];
+    }
+    if (name == 'stable') {
+      return this.colors[2];
+    }
+
+    var hash: string = this.md5.createHash(name);
+    var num: number = parseInt(hash.substr(0, 4));
+    return this.colors[num % this.colors.length];
+  }
+}

static/js/directives/ui/cor-table/cor-table-col.component.ts

@@ -0,0 +1,40 @@
+import { Input, Component } from 'angular-ts-decorators';
+import { CorTableComponent } from './cor-table.component';
+
+/**
+ * Defines a column (optionally sortable) in the table.
+ */
+@Component({
+  selector: 'corTableCol',
+  template: '',
+  require: {
+    parent: '^^corTable'
+  },
+})
+export class CorTableColumn implements ng.IComponentController {
+  @Input('@') public title: string;
+  @Input('@') public templateurl: string;
+
+  @Input('@') public datafield: string;
+  @Input('@') public sortfield: string;
+  @Input('@') public selected: string;
+  @Input('@') public dataKind: string;
+
+  private parent: CorTableComponent;
+
+  public $onInit(): void {
+    this.parent.addColumn(this);
+  }
+
+  public isNumeric(): boolean {
+    return this.dataKind == 'datetime';
+  }
+
+  public processColumnForOrdered(tableService: any, value: any): any {
+    if (this.dataKind == 'datetime') {
+       return tableService.getReversedTimestamp(value);
+    }
+
+    return value;
+  }
+}

static/js/directives/ui/cor-table/cor-table.component.html

@@ -0,0 +1,42 @@
+<div class="cor-table-element">
+  <span ng-transclude/>
+
+  <!-- Filter -->
+  <div class="co-top-bar" ng-if="$ctrl.compact != 'true'">
+    <span class="co-filter-box with-options" ng-if="$ctrl.tableData.length && $ctrl.filterFields.length">
+      <span class="filter-message" ng-if="$ctrl.options.filter">
+        Showing {{ $ctrl.orderedData.entries.length }} of {{ $ctrl.tableData.length }} {{ $ctrl.tableItemTitle }}
+      </span>
+      <input class="form-control" type="text" ng-model="$ctrl.options.filter"
+             placeholder="Filter {{ $ctrl.tableItemTitle }}..." ng-change="$ctrl.refreshOrder()">
+    </span>
+  </div>
+
+  <!-- Empty -->
+  <div class="empty" ng-if="!$ctrl.tableData.length && $ctrl.compact != 'true'">
+    <div class="empty-primary-msg">No {{ $ctrl.tableItemTitle }} found.</div>
+  </div>
+
+  <!-- Table -->
+  <table class="co-table" ng-show="$ctrl.tableData.length">
+    <thead>
+      <td ng-repeat="col in $ctrl.columns" ng-class="$ctrl.tablePredicateClass(col, $ctrl.options)">
+        <a ng-click="$ctrl.setOrder(col)">{{ col.title }}</a>
+      </td>
+    </thead>
+    <tbody ng-repeat="item in $ctrl.orderedData.visibleEntries | limitTo:$ctrl.maxDisplayCount">
+      <tr>
+        <td ng-repeat="col in $ctrl.columns">
+          <div ng-include="col.templateurl" ng-if="col.templateurl"></div>
+          <div ng-if="!col.templateurl">{{ item[col.datafield] }}</div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="empty" ng-if="!$ctrl.orderedData.entries.length && $ctrl.tableData.length"
+       style="margin-top: 20px;">
+    <div class="empty-primary-msg">No matching {{ $ctrl.tableItemTitle }} found.</div>
+    <div class="empty-secondary-msg">Try adjusting your filter above.</div>
+  </div>
+</div>

static/js/directives/ui/cor-table/cor-table.component.ts

@@ -0,0 +1,82 @@
+import { Input, Component } from 'angular-ts-decorators';
+import { CorTableColumn } from './cor-table-col.component';
+
+/**
+ * A component that displays a table of information, with optional filtering and automatic sorting.
+ */
+@Component({
+  selector: 'corTable',
+  templateUrl: '/static/js/directives/ui/cor-table/cor-table.component.html',
+  transclude: true,
+})
+export class CorTableComponent implements ng.IComponentController {
+  @Input('=') public tableData: any[];
+  @Input('@') public tableItemTitle: string;
+  @Input('<') public filterFields: string[];
+  @Input('@') public compact: string;
+  @Input('<') public maxDisplayCount: number;
+
+  private columns: CorTableColumn[];
+  private orderedData: any;
+  private options: any;
+
+  constructor(private TableService: any) {
+    this.columns = [];
+    this.options = {
+      'filter': '',
+      'reverse': false,
+      'predicate': '',
+      'page': 0,
+    };
+  }
+
+  public addColumn(col: CorTableColumn): void {
+    this.columns.push(col);
+
+    if (col.selected == 'true') {
+      this.options['predicate'] = col.datafield;
+    }
+
+    this.refreshOrder();
+  }
+
+  private setOrder(col: CorTableColumn): void {
+    this.TableService.orderBy(col.datafield, this.options);
+    this.refreshOrder();
+  }
+
+  private tablePredicateClass(col: CorTableColumn, options: any) {
+    return this.TableService.tablePredicateClass(col.datafield, this.options.predicate,
+                                                 this.options.reverse);
+  }
+
+  private refreshOrder(): void {
+    var columnMap = {};
+    this.columns.forEach(function(col) {
+      columnMap[col.datafield] = col;
+    });
+
+    var filterCols = this.columns.filter(function(col) {
+      return !!col.sortfield;
+    }).map((col) => (col.datafield));
+
+    var numericCols = this.columns.filter(function(col) {
+      return col.isNumeric();
+    }).map((col) => (col.datafield));
+
+    var processed = this.tableData.map((item) => {
+      var keys = Object.keys(item);
+      var newObj = {};
+      for (var i = 0; i < keys.length; ++i) {
+        var key = keys[i];
+        if (columnMap[key]) {
+          newObj[key] = columnMap[key].processColumnForOrdered(this.TableService, item[key]);
+        }
+      }
+      return newObj;
+    });
+
+    this.orderedData = this.TableService.buildOrderedItems(processed, this.options,
+            filterCols, numericCols);
+  }
+}

static/js/directives/ui/repo-list-grid.js

@@ -14,7 +14,8 @@ angular.module('quay').directive('repoListGrid', function () {
       namespace: '=namespace',
       starToggled: '&starToggled',
       hideTitle: '=hideTitle',
-      hideNamespaces: '=hideNamespaces'
+      hideNamespaces: '=hideNamespaces',
+      repoKind: '@repoKind'
     },
     controller: function($scope, $element, UserService) {
       $scope.isOrganization = function(namespace) {

static/js/directives/ui/repo-list-table.js

@@ -11,7 +11,8 @@ angular.module('quay').directive('repoListTable', function () {
     scope: {
       'repositoriesResources': '=repositoriesResources',
       'namespaces': '=namespaces',
-      'starToggled': '&starToggled'
+      'starToggled': '&starToggled',
+      'repoKind': '@repoKind'
     },
     controller: function($scope, $element, $filter, TableService, UserService) {
       $scope.repositories = null;

static/js/directives/ui/repo-list-view.js

@@ -12,6 +12,7 @@ angular.module('quay').directive('repoListView', function () {
       namespaces: '=namespaces',
       starredRepositories: '=starredRepositories',
       starToggled: '&starToggled',
+      repoKind: '@repoKind'
     },
     controller: function($scope, $element, CookieService) {
       $scope.resources = [];

static/js/directives/ui/repository-title.js

@@ -0,0 +1,18 @@
+/**
+ * An element which displays the title of a repository (either 'repository' or 'application').
+ */
+angular.module('quay').directive('repositoryTitle', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repository-title.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '<repository'
+    },
+    controller: function($scope, $element) {
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/visibility-indicator/visibility-indicator.component.html

@@ -0,0 +1,4 @@
+<span class="visibility-indicator-component-element" ng-class="{'public': $ctrl.repository.is_public, 'private': !$ctrl.repository.is_public}">
+  <span class="public" ng-if="$ctrl.repository.is_public">Public</span>
+  <span class="private" ng-if="!$ctrl.repository.is_public">Private</span>
+</span>

static/js/directives/ui/visibility-indicator/visibility-indicator.component.ts

@@ -0,0 +1,17 @@
+import { Input, Component } from 'angular-ts-decorators';
+
+/**
+ * A component that displays a box with "Public" or "Private", depending on the visibility
+ * of the repository.
+ */
+@Component({
+  selector: 'visibilityIndicator',
+  templateUrl: '/static/js/directives/ui/visibility-indicator/visibility-indicator.component.html'
+})
+export class VisibilityIndicatorComponent implements ng.IComponentController {
+  @Input('<') public repository: any;
+
+  constructor() {
+
+  }
+}