Add function to upload image from local/url in GUI

JIRA: YARDSTICK-782

As user, we need to upload image from local/url.
If upload image from local, user need to choose local image, then
we will load it to openstack.
If upload image from url, we will download it and load it to openstack.

Change-Id: Ia9a42fda15a1dfc91476643635343a2f77a94a6b
Signed-off-by: chenjiankun <chenjiankun1@huawei.com>

4 files changed, 309 insertions, 202 deletions

diff --git a/gui/app/scripts/controllers/image.controller.js b/gui/app/scripts/controllers/image.controller.js
index f6c91592f..d7a7edfa9 100644
--- a/gui/app/scripts/controllers/image.controller.js
+++ b/gui/app/scripts/controllers/image.controller.js
@@ -1,150 +1,235 @@
 'use strict';
 
 angular.module('yardStickGui2App')
-    .controller('ImageController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', '$location', '$interval',
-        function($scope, $state, $stateParams, mainFactory, Upload, toaster, $location, $interval) {
+    .controller('ImageController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', '$location', '$interval', 'ngDialog',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, $location, $interval, ngDialog) {
 
 
             init();
-            $scope.showloading = false;
-            $scope.ifshowStatus = 0;
 
             function init() {
+                $scope.showloading = false;
+                $scope.ifshowStatus = 0;
+
+                $scope.yardstickImage = [
+                    {
+                        'name': 'yardstick-image',
+                        'description': '',
+                        'size': 'N/A',
+                        'status': 'N/A',
+                        'time': 'N/A'
+                    },
+                    {
+                        'name': 'Ubuntu-16.04',
+                        'description': '',
+                        'size': 'N/A',
+                        'status': 'N/A',
+                        'time': 'N/A'
+                    },
+                    {
+                        'name': 'cirros-0.3.5',
+                        'description': '',
+                        'size': 'N/A',
+                        'status': 'N/A',
+                        'time': 'N/A'
+                    }
+                ];
+                $scope.customImage = [];
 
 
                 $scope.uuid = $stateParams.uuid;
-                $scope.uploadImage = uploadImage;
-                getItemIdDetail();
-                getImageListSimple();
+                $scope.showloading = false;
+                $scope.url = null;
+                $scope.environmentInfo = null;
+
+                getYardstickImageList();
+                getCustomImageList(function(image, image_id){});
             }
 
-            function getItemIdDetail() {
+            function getYardstickImageList(){
+                mainFactory.ImageList().get({}).$promise.then(function(response){
+                    if(response.status == 1){
+                        angular.forEach($scope.yardstickImage, function(ele, index){
+                            if(typeof(response.result.images[ele.name]) != 'undefined'){
+                                $scope.yardstickImage[index] = response.result.images[ele.name];
+                            }
+                        });
+                    }else{
+                        mainFactory.errorHandler1(response);
+                    }
+                }, function(response){
+                    mainFactory.errorHandler2(response);
+                });
+            }
+
+            function getCustomImageList(func){
                 mainFactory.ItemDetail().get({
                     'envId': $stateParams.uuid
                 }).$promise.then(function(response) {
-                    if (response.status == 1) {
-                        $scope.baseElementInfo = response.result.environment;
-
-
-                    } else {
-                        toaster.pop({
-                            type: 'error',
-                            title: 'fail',
-                            body: response.error_msg,
-                            timeout: 3000
+                    if(response.status == 1){
+                        $scope.environmentInfo = response.result.environment;
+                        $scope.customImage = [];
+                        angular.forEach(response.result.environment.image_id, function(ele){
+                            mainFactory.getImage().get({'imageId': ele}).$promise.then(function(responseData){
+                                if(responseData.status == 1){
+                                    $scope.customImage.push(responseData.result.image);
+                                    func(responseData.result.image, ele);
+                                }else{
+                                    mainFactory.errorHandler1(responseData);
+                                }
+                            }, function(errorData){
+                                mainFactory.errorHandler2(errorData);
+                            });
                         });
+                    }else{
+                        mainFactory.errorHandler1(response);
                     }
-                }, function(error) {
-                    toaster.pop({
-                        type: 'error',
-                        title: 'fail',
-                        body: 'unknow error',
-                        timeout: 3000
-                    });
-                })
+                }, function(response){
+                    mainFactory.errorHandler2(response);
+                });
             }
 
-            function getImageListSimple() {
-
-                mainFactory.ImageList().get({}).$promise.then(function(response) {
-                    if (response.status == 1) {
-                        $scope.imageListData = response.result.images;
-                        // $scope.imageStatus = response.result.status;
-
-                    } else {
-                        toaster.pop({
-                            type: 'error',
-                            title: 'get data failed',
-                            body: 'please retry',
-                            timeout: 3000
-                        });
-                    }
-                }, function(error) {
-                    toaster.pop({
-                        type: 'error',
-                        title: 'get data failed',
-                        body: 'please retry',
-                        timeout: 3000
+            $scope.loadYardstickImage = function(image_name){
+
+                var updateImageTask = $interval(updateYardstickImage, 10000);
+
+                function updateYardstickImage(){
+                    mainFactory.ImageList().get({}).$promise.then(function(responseData){
+                        if(responseData.status == 1){
+                            if(typeof(responseData.result.images[image_name]) != 'undefined' && responseData.result.images[image_name].status == 'ACTIVE'){
+                                angular.forEach($scope.yardstickImage, function(ele, index){
+                                    if(ele.name == image_name){
+                                        $scope.yardstickImage[index] = responseData.result.images[ele.name];
+                                    }
+                                });
+                                $interval.cancel(updateImageTask);
+                            }
+                        }else{
+                            mainFactory.errorHandler1(responseData);
+                        }
+                    },function(errorData){
+                        mainFactory.errorHandler2(errorData);
                     });
-                })
-            }
+                }
 
+                mainFactory.uploadImage().post({'action': 'load_image', 'args': {'name': image_name}}).$promise.then(function(response){
+                },function(response){
+                    mainFactory.errorHandler2(response);
+                });
+            }
 
-            function getImageList() {
-                if ($scope.intervalImgae != undefined) {
-                    $interval.cancel($scope.intervalImgae);
-                }
-                mainFactory.ImageList().get({}).$promise.then(function(response) {
-                    if (response.status == 1) {
-                        $scope.imageListData = response.result.images;
-                        $scope.imageStatus = response.result.status;
-
-                        if ($scope.imageStatus == 0) {
-                            $scope.intervalImgae = $interval(function() {
-                                getImageList();
-                            }, 5000);
-                        } else if ($scope.intervalImgae != undefined) {
-                            $interval.cancel($scope.intervalImgae);
+            $scope.deleteYardstickImage = function(image_name){
+
+                var updateImageTask = $interval(updateYardstickImage, 10000);
+
+                function updateYardstickImage(){
+                    mainFactory.ImageList().get({}).$promise.then(function(response){
+                        if(response.status == 1){
+                            if(typeof(response.result.images[image_name]) == 'undefined'){
+                                angular.forEach($scope.yardstickImage, function(ele, index){
+                                    if(ele.name == image_name){
+                                        $scope.yardstickImage[index].size = 'N/A';
+                                        $scope.yardstickImage[index].status = 'N/A';
+                                        $scope.yardstickImage[index].time = 'N/A';
+                                    }
+                                });
+                                $interval.cancel(updateImageTask);
+                            }
+                        }else{
+                            mainFactory.errorHandler1(response);
                         }
+                    },function(response){
+                        mainFactory.errorHandler2(response);
+                    });
+                }
 
-                    } else {
-                        toaster.pop({
-                            type: 'error',
-                            title: 'get data failed',
-                            body: 'please retry',
-                            timeout: 3000
+                mainFactory.uploadImage().post({'action': 'delete_image', 'args': {'name': image_name}}).$promise.then(function(response){
+                },function(response){
+                    mainFactory.errorHandler2(response);
+                });
+            }
+
+            $scope.uploadCustomImageByUrl = function(url){
+                mainFactory.uploadImageByUrl().post({
+                    'action': 'upload_image_by_url',
+                    'args': {
+                        'environment_id': $stateParams.uuid,
+                        'url': url
+                    }
+                }).$promise.then(function(response){
+                    if(response.status == 1){
+                        var updateImageTask = $interval(getCustomImageList, 30000, 10, true, function(image, image_id){
+                            if(image_id == response.result.uuid && image.status == 'ACTIVE'){
+                                $interval.cancel(updateImageTask);
+                            }
                         });
+                        ngDialog.close();
+                    }else{
+                        mainFactory.errorHandler1(response);
                     }
-                }, function(error) {
-                    toaster.pop({
-                        type: 'error',
-                        title: 'get data failed',
-                        body: 'please retry',
-                        timeout: 3000
-                    });
-                })
+                }, function(response){
+                    mainFactory.errorHandler2(response);
+                });
             }
 
-            function uploadImage() {
-                $scope.imageStatus = 0;
-                $interval.cancel($scope.intervalImgae);
-                $scope.ifshowStatus = 1;
+            $scope.uploadCustomImage = function($file, $invalidFiles) {
                 $scope.showloading = true;
-                mainFactory.uploadImage().post({
-                    'action': 'load_image',
-                    'args': {
-                        'environment_id': $scope.uuid
 
-                    }
-                }).$promise.then(function(response) {
+                $scope.displayImageFile = $file;
+                Upload.upload({
+                    url: Base_URL + '/api/v2/yardstick/images',
+                    data: { file: $file, 'environment_id': $scope.uuid, 'action': 'upload_image' }
+                }).then(function(response) {
+
                     $scope.showloading = false;
-                    if (response.status == 1) {
+                    if (response.data.status == 1) {
+
                         toaster.pop({
                             type: 'success',
-                            title: 'create success',
+                            title: 'upload success',
                             body: 'you can go next step',
                             timeout: 3000
                         });
-                        setTimeout(function() {
-                            getImageList();
-                        }, 10000);
 
-                    } else {
-                        toaster.pop({
-                            type: 'error',
-                            title: 'failed',
-                            body: 'something wrong',
-                            timeout: 3000
+                        var updateImageTask = $interval(getCustomImageList, 10000, 10, true, function(image, image_id){
+                            if(image_id == response.data.result.uuid && image.status == 'ACTIVE'){
+                                $interval.cancel(updateImageTask);
+                            }
                         });
+                    }else{
+                        mainFactory.errorHandler1(response);
+                    }
 
+                }, function(response) {
+                    $scope.uploadfile = null;
+                    mainFactory.errorHandler2(response);
+                })
+            }
+
+            $scope.deleteCustomImage = function(image_id){
+                mainFactory.deleteImage().delete({'imageId': image_id}).$promise.then(function(response){
+                    if(response.status == 1){
+                        $interval(getCustomImageList, 10000, 5, true, function(image, image_id){
+                        });
+                    }else{
+                        mainFactory.errorHandler2(response);
                     }
-                }, function(error) {
-                    toaster.pop({
-                        type: 'error',
-                        title: 'failed',
-                        body: 'something wrong',
-                        timeout: 3000
-                    });
+                }, function(response){
+                    mainFactory.errorHandler2(response);
+                });
+            }
+
+            $scope.openImageDialog = function(){
+                $scope.url = null;
+                ngDialog.open({
+                    preCloseCallback: function(value) {
+                    },
+                    template: 'views/modal/imageDialog.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 950,
+                    showClose: true,
+                    closeByDocument: false
                 })
             }
 
@@ -158,9 +243,5 @@ angular.module('yardStickGui2App')
                 $state.go('app.podUpload', { uuid: $scope.uuid });
             }
 
-
-
-
-
         }
     ]);
diff --git a/gui/app/scripts/controllers/main.js b/gui/app/scripts/controllers/main.js
index ab76bf0f2..ceec83fa9 100644
--- a/gui/app/scripts/controllers/main.js
+++ b/gui/app/scripts/controllers/main.js
@@ -15,7 +15,7 @@ angular.module('yardStickGui2App')
             $scope.showImage = null;
             $scope.showContainer = null;
             $scope.showNextOpenRc = null;
-            $scope.showNextPod = null;
+            $scope.showNextPod = 1;
             $scope.displayContainerInfo = [];
             $scope.containerList = [{ value: 'create_influxdb', name: "InfluxDB" }, { value: 'create_grafana', name: "Grafana" }]
 
@@ -51,7 +51,6 @@ angular.module('yardStickGui2App')
                 $scope.chooseResult = chooseResult;
 
                 getEnvironmentList();
-                // getImageList();
 
             }
 
@@ -85,7 +84,7 @@ angular.module('yardStickGui2App')
             }
 
             $scope.goToImage = function goToImage() {
-                getImageListSimple();
+                getImageList();
                 $scope.showImage = 1;
             }
             $scope.goToPod = function goToPod() {
@@ -290,7 +289,7 @@ angular.module('yardStickGui2App')
                 $scope.showImage = null;
                 $scope.showContainer = null;
                 $scope.showNextOpenRc = null;
-                $scope.showNextPod = null;
+                $scope.showNextPod = 1;
                 $scope.displayContainerInfo = [];
 
                 $scope.displayPodFile = null;
@@ -308,7 +307,6 @@ angular.module('yardStickGui2App')
                 ngDialog.open({
                     preCloseCallback: function(value) {
                         getEnvironmentList();
-                        // getImageList();
                     },
                     template: 'views/modal/environmentDialog.html',
                     scope: $scope,
@@ -479,106 +477,97 @@ angular.module('yardStickGui2App')
                 })
             }
 
-            $scope.uploadImage = function uploadImage() {
-                $scope.imageStatus = 0;
-                $scope.showImageStatus = 1;
-                $scope.showloading = true;
-                mainFactory.uploadImage().post({
-                    'action': 'load_image',
-                    'args': {
-                        'environment_id': $scope.uuid
+            $scope.yardstickImage = {
+                'yardstick-image': {
+                    'name': 'yardstick-image',
+                    'description': '',
+                    'status': 'N/A'
+                },
+                'Ubuntu-16.04': {
+                    'name': 'Ubuntu-16.04',
+                    'description': '',
+                    'status': 'N/A'
+                },
+                'cirros-0.3.5': {
+                    'name': 'cirros-0.3.5',
+                    'description': '',
+                    'status': 'N/A'
+                }
+            };
 
-                    }
-                }).$promise.then(function(response) {
-                    $scope.showloading = false;
-                    if (response.status == 1) {
-                        toaster.pop({
-                            type: 'success',
-                            title: 'create success',
-                            body: 'you can go next step',
-                            timeout: 3000
-                        });
-                        setTimeout(function() {
-                            getImageList();
-                        }, 10000);
-                        $scope.showNextPod = 1;
+            $scope.selectImageList = [];
 
-                    } else {
-                        toaster.pop({
-                            type: 'error',
-                            title: 'failed',
-                            body: 'something wrong',
-                            timeout: 3000
-                        });
+            $scope.selectImage = function(name){
+                $scope.selectImageList.push(name);
+            }
 
-                    }
-                }, function(error) {
-                    toaster.pop({
-                        type: 'error',
-                        title: 'failed',
-                        body: 'something wrong',
-                        timeout: 3000
-                    });
-                })
+            $scope.unselectImage = function(name){
+                var index = $scope.selectImageList.indexOf(name);
+                $scope.selectImageList.splice(index, 1);
             }
 
-            function getImageList() {
-                if ($scope.intervalImgae != undefined) {
-                    $interval.cancel($scope.intervalImgae);
-                }
-                mainFactory.ImageList().get({}).$promise.then(function(response) {
-                    if (response.status == 1) {
-                        $scope.imageListData = response.result.images;
-                        $scope.imageStatus = response.result.status;
+            $scope.uploadImage = function() {
+                $scope.imageStatus = 0;
+                $scope.showImageStatus = 1;
+                $scope.showloading = true;
 
-                        if ($scope.imageStatus == 0) {
-                            $scope.intervalImgae = $interval(function() {
-                                getImageList();
-                            }, 5000);
-                        } else if ($scope.intervalImgae != undefined) {
-                            $interval.cancel($scope.intervalImgae);
+                var updateImageTask = $interval(function(){
+                    mainFactory.ImageList().get({}).$promise.then(function(response){
+                        if(response.status == 1){
+                            var isOk = true;
+                            angular.forEach($scope.selectImageList, function(ele){
+                                if(typeof(response.result.images[ele]) != 'undefined' && response.result.images[ele].status == 'ACTIVE'){
+                                    $scope.yardstickImage[ele] = response.result.images[ele];
+                                }else{
+                                    isOk = false;
+                                }
+                            });
+                            if(isOk){
+                                $interval.cancel(updateImageTask);
+                                $scope.imageStatus = 1;
+                            }
+                        }else{
+                            mainFactory.errorHandler1(response);
                         }
-
-                    } else {
-                        toaster.pop({
-                            type: 'error',
-                            title: 'get data failed',
-                            body: 'please retry',
-                            timeout: 3000
-                        });
-                    }
-                }, function(error) {
-                    toaster.pop({
-                        type: 'error',
-                        title: 'get data failed',
-                        body: 'please retry',
-                        timeout: 3000
+                    }, function(response){
+                        mainFactory.errorHandler2(response);
                     });
-                })
+                }, 10000);
+
+                angular.forEach($scope.selectImageList, function(ele){
+                    mainFactory.uploadImage().post({
+                        'action': 'load_image',
+                        'args': {
+                            'name': ele
+                        }
+                    }).$promise.then(function(response) {
+                        if(response.status == 1){
+                            $scope.showloading = false;
+                            $scope.showNextPod = 1;
+                        }else{
+                            mainFactory.errorHandler1(response);
+                        }
+                    }, function(response) {
+                        mainFactory.errorHandler2(response);
+                    })
+                });
             }
 
-            function getImageListSimple() {
+            function getImageList() {
 
                 mainFactory.ImageList().get({}).$promise.then(function(response) {
                     if (response.status == 1) {
-                        $scope.imageListData = response.result.images;
-                        $scope.imageStatus = response.result.status;
-
-                    } else {
-                        toaster.pop({
-                            type: 'error',
-                            title: 'get data failed',
-                            body: 'please retry',
-                            timeout: 3000
+                        angular.forEach($scope.yardstickImage, function(value, key){
+                            if(typeof(response.result.images[key]) != 'undefined'){
+                                $scope.yardstickImage[key] = response.result.images[key];
+                            }
                         });
+                        $scope.imageStatus = response.result.status;
+                    }else{
+                        mainFactory.errorHandler1(response);
                     }
-                }, function(error) {
-                    toaster.pop({
-                        type: 'error',
-                        title: 'get data failed',
-                        body: 'please retry',
-                        timeout: 3000
-                    });
+                }, function(response) {
+                    mainFactory.errorHandler2(response);
                 })
             }
 
diff --git a/gui/app/scripts/controllers/projectDetail.controller.js b/gui/app/scripts/controllers/projectDetail.controller.js
index 843f66c57..e8468045d 100644
--- a/gui/app/scripts/controllers/projectDetail.controller.js
+++ b/gui/app/scripts/controllers/projectDetail.controller.js
@@ -672,7 +672,7 @@ angular.module('yardStickGui2App')
             }
 
             $scope.gotoLog = function gotoLog(task_id) {
-                $state.go('app2.taskLog', { taskId: task_id });
+                $state.go('app.taskLog', { taskId: task_id });
             }
         }
     ]);
diff --git a/gui/app/scripts/factory/main.factory.js b/gui/app/scripts/factory/main.factory.js
index 44fbeb39f..7637a9ff3 100644
--- a/gui/app/scripts/factory/main.factory.js
+++ b/gui/app/scripts/factory/main.factory.js
@@ -9,7 +9,7 @@ var Base_URL;
 var Grafana_URL;
 
 angular.module('yardStickGui2App')
-    .factory('mainFactory', ['$resource','$rootScope','$http', '$location',function($resource, $rootScope,$http,$location) {
+    .factory('mainFactory', ['$resource','$rootScope','$http', '$location', 'toaster',function($resource, $rootScope ,$http ,$location, toaster) {
 
         Base_URL = 'http://' + $location.host() + ':' + $location.port();
         Grafana_URL = 'http://' + $location.host();
@@ -86,6 +86,20 @@ angular.module('yardStickGui2App')
                     }
                 })
             },
+            getImage: function(){
+                return $resource(Base_URL + '/api/v2/yardstick/images/:imageId', {imageId: "@imageId"}, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            deleteImage: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/images/:imageId', { imageId: '@imageId' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
             uploadImage: function() {
                 return $resource(Base_URL + '/api/v2/yardstick/images', {}, {
                     'post': {
@@ -93,6 +107,13 @@ angular.module('yardStickGui2App')
                     }
                 })
             },
+            uploadImageByUrl: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/images', {}, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
             getPodDetail: function() {
                 return $resource(Base_URL + '/api/v2/yardstick/pods/:podId', { podId: "@podId" }, {
                     'get': {
@@ -249,6 +270,22 @@ angular.module('yardStickGui2App')
                         method: 'DELETE'
                     }
                 })
+            },
+            errorHandler1: function(response){
+                toaster.pop({
+                    'type': 'error',
+                    'title': 'error',
+                    'body': response.result,
+                    'showCloseButton': true
+                });
+            },
+            errorHandler2: function(response){
+                toaster.pop({
+                    'type': 'error',
+                    'title': response.status,
+                    'body': response.statusText,
+                    'showCloseButton': true
+                });
             }
 
         };