feat(images): enable auto completion for image names when creating a container or a service (#1355)

app/components/createContainer/createcontainer.html

@@ -28,7 +28,7 @@
           <div ng-if="formValues.Registry || !fromContainer">
             <!-- image-and-registry -->
             <div class="form-group">
-              <por-image-registry image="config.Image" registry="formValues.Registry" ng-if="formValues.Registry"></por-image-registry>
+              <por-image-registry image="config.Image" registry="formValues.Registry" ng-if="formValues.Registry" auto-complete="true"></por-image-registry>
             </div>
             <!-- !image-and-registry -->
             <!-- always-pull -->

app/components/createService/createservice.html

@@ -25,7 +25,7 @@
           </div>
           <!-- image-and-registry -->
           <div class="form-group">
-            <por-image-registry image="formValues.Image" registry="formValues.Registry"></por-image-registry>
+            <por-image-registry image="formValues.Image" registry="formValues.Registry" auto-complete="true"></por-image-registry>
           </div>
           <!-- !image-and-registry -->
           <div class="col-sm-12 form-section-title">

app/directives/imageRegistry/por-image-registry.js

@@ -3,6 +3,7 @@ angular.module('portainer').component('porImageRegistry', {
   controller: 'porImageRegistryController',
   bindings: {
     'image': '=',
-    'registry': '='
+    'registry': '=',
+    'autoComplete': '<'
   }
 });

app/directives/imageRegistry/porImageRegistry.html

@@ -1,7 +1,9 @@
 <div>
   <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
   <div class="col-sm-11 col-md-6">
-    <input type="text" class="form-control" ng-model="$ctrl.image" id="image_name" placeholder="e.g. myImage:myTag">
+    <input type="text" class="form-control"
+      uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5" 
+      ng-model="$ctrl.image" id="image_name" placeholder="e.g. myImage:myTag">
   </div>
   <label for="image_registry" class="col-sm-2 col-md-1 margin-sm-top control-label text-left">
     Registry

app/directives/imageRegistry/porImageRegistryController.js

@@ -1,16 +1,21 @@
 angular.module('portainer')
-.controller('porImageRegistryController', ['$q', 'RegistryService', 'DockerHubService', 'Notifications',
-function ($q, RegistryService, DockerHubService, Notifications) {
+.controller('porImageRegistryController', ['$q', 'RegistryService', 'DockerHubService', 'ImageService', 'Notifications',
+function ($q, RegistryService, DockerHubService, ImageService, Notifications) {
   var ctrl = this;
-
+  ctrl.availableImages = [];
+  
   function initComponent() {
     $q.all({
       registries: RegistryService.registries(),
-      dockerhub: DockerHubService.dockerhub()
+      dockerhub: DockerHubService.dockerhub(),
+      availableImages: ctrl.autoComplete ? ImageService.images() : []
     })
     .then(function success(data) {
       var dockerhub = data.dockerhub;
       var registries = data.registries;
+      ctrl.availableImages = _.flatten(_.map(data.availableImages, function (image) {
+        return image.RepoTags ? image.RepoTags : [];
+      }));
       ctrl.availableRegistries = [dockerhub].concat(registries);
       if (!ctrl.registry.Id) {
         ctrl.registry = dockerhub;