feat(docker/registries): introduce a default DockerHub (anonymous) registry (#4920)

* feat(docker/registries): introduce a default DockerHub (anonymous) registry

* feat(app/registries): improve dockerHubViewModel

* feat(app/registries): remove extra code

app/portainer/components/datatables/registries-datatable/registriesDatatable.html

@@ -54,10 +54,11 @@
             >
               <td>
                 <span class="md-checkbox" ng-if="$ctrl.accessManagement">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" ng-disabled="!$ctrl.allowSelection(item)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ui-sref="portainer.registries.registry({id: item.Id})" ng-if="$ctrl.accessManagement">{{ item.Name }}</a>
+                <a ui-sref="portainer.registries.registry({id: item.Id})" ng-if="$ctrl.accessManagement && item.Id">{{ item.Name }}</a>
+                <span ng-if="$ctrl.accessManagement && !item.Id">{{ item.Name }}</span>
                 <span ng-if="!$ctrl.accessManagement">{{ item.Name }}</span>
                 <span ng-if="item.Authentication" style="margin-left: 5px;" class="label label-info image-tag">authentication-enabled</span>
               </td>
@@ -65,10 +66,13 @@
                 {{ item.URL }}
               </td>
               <td>
-                <a ui-sref="portainer.registries.registry.access({id: item.Id})" ng-if="$ctrl.accessManagement"> <i class="fa fa-users" aria-hidden="true"></i> Manage access </a>
-                <span class="text-muted space-left" style="cursor: pointer;" data-toggle="tooltip" title="This feature is available in Portainer Business Edition">
-                  <i class="fa fa-search" aria-hidden="true"></i> Browse</span
-                >
+                <span ng-if="item.Id">
+                  <a ui-sref="portainer.registries.registry.access({id: item.Id})" ng-if="$ctrl.accessManagement"> <i class="fa fa-users" aria-hidden="true"></i> Manage access </a>
+                  <span class="text-muted space-left" style="cursor: pointer;" data-toggle="tooltip" title="This feature is available in Portainer Business Edition">
+                    <i class="fa fa-search" aria-hidden="true"></i> Browse</span
+                  >
+                </span>
+                <span ng-if="!item.Id"> - </span>
               </td>
             </tr>
             <tr ng-if="!$ctrl.dataset">

app/portainer/components/datatables/registries-datatable/registriesDatatable.js

@@ -1,6 +1,6 @@
 angular.module('portainer.app').component('registriesDatatable', {
   templateUrl: './registriesDatatable.html',
-  controller: 'GenericDatatableController',
+  controller: 'RegistriesDatatableController',
   bindings: {
     titleText: '@',
     titleIcon: '@',

app/portainer/components/datatables/registries-datatable/registriesDatatableController.js

@@ -0,0 +1,51 @@
+angular.module('portainer.docker').controller('RegistriesDatatableController', [
+  '$scope',
+  '$controller',
+  'orderByFilter',
+  'DatatableService',
+  function ($scope, $controller, orderByFilter, DatatableService) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
+
+    this.allowSelection = function (item) {
+      return item.Id;
+    };
+
+    this.$onInit = function () {
+      this.setDefaults();
+      this.prepareTableFromDataset();
+
+      this.state.orderBy = this.orderBy;
+      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
+      if (storedOrder !== null) {
+        this.state.reverseOrder = storedOrder.reverse;
+        this.state.orderBy = storedOrder.orderBy;
+      }
+
+      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
+      if (textFilter !== null) {
+        this.state.textFilter = textFilter;
+        this.onTextFilterChange();
+      }
+
+      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
+      if (storedFilters !== null) {
+        this.filters = storedFilters;
+      }
+      if (this.filters && this.filters.state) {
+        this.filters.state.open = false;
+      }
+
+      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+      if (storedSettings !== null) {
+        this.settings = storedSettings;
+        this.settings.open = false;
+      }
+      this.onSettingsRepeaterChange();
+
+      var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
+      if (storedColumnVisibility !== null) {
+        this.columnVisibility = storedColumnVisibility;
+      }
+    };
+  },
+]);

app/portainer/models/dockerhub.js

@@ -1,7 +1,4 @@
-export function DockerHubViewModel(data) {
-  this.Name = 'DockerHub';
-  this.URL = '';
-  this.Authentication = data.Authentication;
-  this.Username = data.Username;
-  this.Password = data.Password;
+export function DockerHubViewModel() {
+  this.Name = 'DockerHub (anonymous)';
+  this.URL = 'docker.io';
 }

app/portainer/services/api/dockerhubService.js

@@ -8,18 +8,7 @@ angular.module('portainer.app').factory('DockerHubService', [
     var service = {};
 
     service.dockerhub = function () {
-      var deferred = $q.defer();
-
-      DockerHub.get()
-        .$promise.then(function success(data) {
-          var dockerhub = new DockerHubViewModel(data);
-          deferred.resolve(dockerhub);
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to retrieve DockerHub details', err: err });
-        });
-
-      return deferred.promise;
+      return new DockerHubViewModel();
     };
 
     service.update = function (dockerhub) {

app/portainer/views/registries/registries.html

@@ -7,79 +7,6 @@
   <rd-header-content>Registry management</rd-header-content>
 </rd-header>
 
-<information-panel title-text="Registry usage">
-  <span class="small">
-    <p class="text-muted">
-      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
-      DockerHub credentials and registries can only be used with Docker endpoints at the time.
-    </p>
-  </span>
-</information-panel>
-
-<div class="row" ng-if="dockerhub && isAdmin">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-database" title-text="DockerHub"> </rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal">
-          <!-- note -->
-          <div class="form-group">
-            <span class="col-sm-12 text-muted small">
-              The DockerHub registry can be used by any user. You can specify the credentials that will be used to push &amp; pull images here.
-            </span>
-          </div>
-          <!-- !note -->
-          <!-- authentication-checkbox -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <label for="registry_auth" class="control-label text-left">
-                Authentication
-                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to push/pull private images."></portainer-tooltip>
-              </label>
-              <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="dockerhub.Authentication" /><i></i> </label>
-            </div>
-          </div>
-          <!-- !authentication-checkbox -->
-          <!-- authentication-credentials -->
-          <div ng-if="dockerhub.Authentication">
-            <!-- credentials-user -->
-            <div class="form-group">
-              <label for="hub_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="hub_username" ng-model="dockerhub.Username" />
-              </div>
-            </div>
-            <!-- !credentials-user -->
-            <!-- credentials-password -->
-            <div class="form-group">
-              <label for="hub_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="password" class="form-control" id="hub_password" ng-model="formValues.dockerHubPassword" placeholder="*******" />
-              </div>
-            </div>
-            <!-- !credentials-password -->
-          </div>
-          <!-- !authentication-credentials -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <button
-                type="button"
-                class="btn btn-primary btn-sm"
-                ng-disabled="state.actionInProgress || dockerhub.Authentication && (!dockerhub.Username || !formValues.dockerHubPassword)"
-                ng-click="updateDockerHub()"
-                button-spinner="state.actionInProgress"
-              >
-                <span ng-hide="state.actionInProgress">Update</span>
-                <span ng-show="state.actionInProgress">Updating DockerHub settings...</span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
 <div class="row">
   <div class="col-sm-12">
     <registries-datatable

app/portainer/views/registries/registriesController.js

@@ -77,7 +77,7 @@ angular.module('portainer.app').controller('RegistriesController', [
       })
         .then(function success(data) {
           $scope.registries = data.registries;
-          $scope.dockerhub = data.dockerhub;
+          $scope.registries.push(data.dockerhub);
           $scope.isAdmin = Authentication.isAdmin();
         })
         .catch(function error(err) {