From 1b6b4733bd26682698ecc13a753fabeb29f79a34 Mon Sep 17 00:00:00 2001
From: Yassir Hannoun <yassir.hannoun@gmail.com>
Date: Tue, 7 Nov 2017 08:05:13 +0100
Subject: [PATCH] feat(images): enable auto completion for image names when
 creating a container or a service (#1355)

---
 app/components/createContainer/createcontainer.html |  2 +-
 app/components/createService/createservice.html     |  2 +-
 app/directives/imageRegistry/por-image-registry.js  |  3 ++-
 app/directives/imageRegistry/porImageRegistry.html  |  4 +++-
 .../imageRegistry/porImageRegistryController.js     | 13 +++++++++----
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/components/createContainer/createcontainer.html b/app/components/createContainer/createcontainer.html
index c784d7517..a90f8da59 100644
--- a/app/components/createContainer/createcontainer.html
+++ b/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 -->
diff --git a/app/components/createService/createservice.html b/app/components/createService/createservice.html
index b59053509..e2c404fc0 100644
--- a/app/components/createService/createservice.html
+++ b/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">
diff --git a/app/directives/imageRegistry/por-image-registry.js b/app/directives/imageRegistry/por-image-registry.js
index f8d004967..ccc65cdc9 100644
--- a/app/directives/imageRegistry/por-image-registry.js
+++ b/app/directives/imageRegistry/por-image-registry.js
@@ -3,6 +3,7 @@ angular.module('portainer').component('porImageRegistry', {
   controller: 'porImageRegistryController',
   bindings: {
     'image': '=',
-    'registry': '='
+    'registry': '=',
+    'autoComplete': '<'
   }
 });
diff --git a/app/directives/imageRegistry/porImageRegistry.html b/app/directives/imageRegistry/porImageRegistry.html
index 3f1dbcd43..06fc192e9 100644
--- a/app/directives/imageRegistry/porImageRegistry.html
+++ b/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
diff --git a/app/directives/imageRegistry/porImageRegistryController.js b/app/directives/imageRegistry/porImageRegistryController.js
index 496209be7..a2d2bc43e 100644
--- a/app/directives/imageRegistry/porImageRegistryController.js
+++ b/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;