Merge "Yardstick GUI & GUI deployment"

19 files changed, 4381 insertions, 0 deletions

diff --git a/gui/app/scripts/app.js b/gui/app/scripts/app.js
new file mode 100644
index 000000000..ecb642c95
--- /dev/null
+++ b/gui/app/scripts/app.js
@@ -0,0 +1,30 @@
+'use strict';
+
+/**
+ * @ngdoc overview
+ * @name yardStickGui2App
+ * @description
+ * # yardStickGui2App
+ *
+ * Main module of the application.
+ */
+angular
+    .module('yardStickGui2App', [
+        'ui.router',
+        'ngAnimate',
+        'ngSanitize',
+        'mgcrea.ngStrap',
+        'ncy-angular-breadcrumb',
+        'mgo-angular-wizard',
+        'ngResource',
+        'ngFileUpload',
+        'toaster',
+        'ngDialog',
+        'angularUtils.directives.dirPagination',
+        'ngStorage',
+        'vAccordion',
+        'darthwade.dwLoading',
+        'ui.bootstrap'
+
+
+    ]);
diff --git a/gui/app/scripts/controllers/container.controller.js b/gui/app/scripts/controllers/container.controller.js
new file mode 100644
index 000000000..6c2ccd8ff
--- /dev/null
+++ b/gui/app/scripts/controllers/container.controller.js
@@ -0,0 +1,182 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('ContainerController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog) {
+
+
+            init();
+            $scope.showloading = false;
+
+            $scope.displayContainerInfo = [];
+            $scope.containerList = [{ value: 'create_influxdb', name: "InfluxDB" }, { value: 'create_grafana', name: "Grafana" }]
+
+            function init() {
+
+
+                $scope.uuid = $stateParams.uuid;
+                $scope.createContainer = createContainer;
+                $scope.openChooseContainnerDialog = openChooseContainnerDialog;
+
+
+                getItemIdDetail();
+
+            }
+
+            function getItemIdDetail() {
+                $scope.displayContainerInfo = [];
+                mainFactory.ItemDetail().get({
+                    'envId': $scope.uuid
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.envName = response.result.environment.name;
+                        $scope.containerId = response.result.environment.container_id;
+                        if ($scope.containerId != null) {
+
+                            var keysArray = Object.keys($scope.containerId);
+                            for (var k in $scope.containerId) {
+                                getConDetail($scope.containerId[k]);
+                            }
+                        } else {
+                            $scope.podData = null;
+                        }
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getConDetail(id) {
+                mainFactory.containerDetail().get({
+                    'containerId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        // $scope.podData = response.result;
+                        response.result.container['id'] = id;
+                        $scope.displayContainerInfo.push(response.result.container);
+
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+
+            }
+
+            function createContainer() {
+
+                $scope.showloading = true;
+                mainFactory.runAcontainer().post({
+                    'action': $scope.selectContainer.value,
+                    'args': {
+                        'environment_id': $scope.uuid,
+                    }
+                }).$promise.then(function(response) {
+                    $scope.showloading = false;
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create container success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        setTimeout(function() {
+                            getItemIdDetail();
+                        }, 10000);
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            function openChooseContainnerDialog() {
+                ngDialog.open({
+                    template: 'views/modal/chooseContainer.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+            }
+
+            function chooseResult(name) {
+                $scope.selectContainer = name;
+            }
+            $scope.goBack = function goBack() {
+                $state.go('app2.projectList');
+            }
+
+            $scope.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id;
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deleteContainer = function deleteContainer() {
+                mainFactory.deleteContainer().delete({ 'containerId': $scope.deleteId }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete container success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getItemIdDetail();
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+
+        }
+    ]);
diff --git a/gui/app/scripts/controllers/content.controller.js b/gui/app/scripts/controllers/content.controller.js
new file mode 100644
index 000000000..d2bc19eea
--- /dev/null
+++ b/gui/app/scripts/controllers/content.controller.js
@@ -0,0 +1,136 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('ContentController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', '$location', '$localStorage',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, $location, $localStorage) {
+
+
+
+
+            init();
+            $scope.showEnvironment = false;
+            $scope.counldGoDetail = false;
+            $scope.activeStatus = 0;
+
+            $scope.$watch(function() {
+                return location.hash
+            }, function(newvalue, oldvalue) {
+                if (location.hash.indexOf('project') > -1) {
+                    $scope.projectShow = true;
+                    $scope.taskShow = false;
+                    $scope.reportShow = false;
+                } else if (location.hash.indexOf('task') > -1) {
+                    $scope.taskShow = true;
+                    $scope.projectShow = true;
+                } else if (location.hash.indexOf('report') > -1) {
+                    $scope.reportShow = true;
+                    $scope.taskShow = true;
+                    $scope.projectShow = true;
+                }
+
+            })
+
+
+            function init() {
+
+
+                $scope.showEnvironments = showEnvironments;
+                $scope.showSteps = $location.path().indexOf('project');
+                $scope.test = test;
+                $scope.gotoUploadPage = gotoUploadPage;
+                $scope.gotoOpenrcPage = gotoOpenrcPage;
+                $scope.gotoPodPage = gotoPodPage;
+                $scope.gotoContainerPage = gotoContainerPage;
+                $scope.gotoTestcase = gotoTestcase;
+                $scope.gotoEnviron = gotoEnviron;
+                $scope.gotoSuite = gotoSuite;
+                $scope.gotoProject = gotoProject;
+                $scope.gotoTask = gotoTask;
+                $scope.gotoReport = gotoReport;
+                $scope.stepsStatus = $localStorage.stepsStatus;
+                $scope.goBack = goBack;
+
+
+            }
+
+
+
+            function showEnvironments() {
+                $scope.showEnvironment = true;
+            }
+
+            function test() {
+                alert('test');
+            }
+
+            function gotoOpenrcPage() {
+                $scope.path = $location.path();
+                $scope.uuid = $scope.path.split('/').pop();
+                $state.go('app.environmentDetail', { uuid: $scope.uuid })
+            }
+
+            function gotoUploadPage() {
+                $scope.path = $location.path();
+                $scope.uuid = $scope.path.split('/').pop();
+                $state.go('app.uploadImage', { uuid: $scope.uuid });
+            }
+
+            function gotoPodPage() {
+                $scope.path = $location.path();
+                $scope.uuid = $scope.path.split('/').pop();
+                $state.go('app.podUpload', { uuid: $scope.uuid });
+            }
+
+            function gotoContainerPage() {
+                $scope.path = $location.path();
+                $scope.uuid = $scope.path.split('/').pop();
+                $state.go('app.container', { uuid: $scope.uuid });
+            }
+
+            function gotoTestcase() {
+                $state.go('app2.testcase');
+            }
+
+            function gotoEnviron() {
+                if ($location.path().indexOf('env') > -1 || $location.path().indexOf('environment') > -1) {
+                    $scope.counldGoDetail = true;
+                }
+                $state.go('app2.environment');
+            }
+
+            function gotoSuite() {
+                $state.go('app2.testsuite');
+            }
+
+            function gotoProject() {
+                $state.go('app2.projectList');
+            }
+
+            function gotoTask() {
+                $state.go('app2.tasklist');
+            }
+
+            function gotoReport() {
+                $state.go('app2.report');
+            }
+
+            function goBack() {
+                if ($location.path().indexOf('main/environment')) {
+                    return;
+                } else if ($location.path().indexOf('main/envDetail/') || $location.path().indexOf('main/imageDetail/') ||
+                    $location.path().indexOf('main/podupload/') || $location.path().indexOf('main/container/')) {
+                    $state.go('app2.environment');
+                    return;
+                } else {
+                    window.history.back();
+                }
+
+            }
+
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/controllers/detail.controller.js b/gui/app/scripts/controllers/detail.controller.js
new file mode 100644
index 000000000..3e2eaa100
--- /dev/null
+++ b/gui/app/scripts/controllers/detail.controller.js
@@ -0,0 +1,384 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('DetailController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', '$location', 'ngDialog',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, $location, ngDialog) {
+
+
+
+
+            init();
+            $scope.showEnvironment = false;
+            $scope.envInfo = [];
+
+            function init() {
+                $scope.showEnvironments = showEnvironments;
+                // $scope.openrcID = $stateParams.uuid;
+                $scope.deleteEnvItem = deleteEnvItem;
+                $scope.addInfo = addInfo;
+                $scope.submitOpenRcFile = submitOpenRcFile;
+                $scope.uploadFiles = uploadFiles;
+                $scope.addEnvironment = addEnvironment;
+
+                $scope.uuid = $stateParams.uuid;
+                $scope.openrcID = $stateParams.opercId;
+                $scope.imageID = $stateParams.imageId;
+                $scope.podID = $stateParams.podId;
+                $scope.containerId = $stateParams.containerId;
+                $scope.ifNew = $stateParams.ifNew;
+
+
+                getItemIdDetail();
+            }
+
+
+
+            function showEnvironments() {
+                $scope.showEnvironment = true;
+            }
+
+
+            function deleteEnvItem(index) {
+                $scope.envInfo.splice(index, 1);
+            }
+
+            function addInfo() {
+                var tempKey = null;
+                var tempValue = null;
+                var temp = {
+                    name: tempKey,
+                    value: tempValue
+                }
+                $scope.envInfo.push(temp);
+
+            }
+
+            function submitOpenRcFile() {
+                $scope.showloading = true;
+
+                var postData = {};
+                postData['action'] = 'update_openrc';
+                rebuildEnvInfo();
+                postData['args'] = {};
+                postData['args']['openrc'] = $scope.postEnvInfo;
+                postData['args']['environment_id'] = $scope.uuid;
+
+
+                mainFactory.postEnvironmentVariable().post(postData).$promise.then(function(response) {
+                    $scope.showloading = false;
+
+                    if (response.status == 1) {
+
+                        $scope.openrcInfo = response.result;
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.showEnvrionment = true;
+                        getItemIdDetail();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'faile',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //reconstruc EnvInfo
+            function rebuildEnvInfo() {
+                $scope.postEnvInfo = {};
+                for (var i = 0; i < $scope.envInfo.length; i++) {
+                    $scope.postEnvInfo[$scope.envInfo[i].name] = $scope.envInfo[i].value;
+                }
+
+            }
+
+            //buildtoEnvInfo
+            function buildToEnvInfo(object) {
+                var tempKeyArray = Object.keys(object);
+
+                for (var i = 0; i < tempKeyArray.length; i++) {
+                    var tempkey = tempKeyArray[i];
+                    var tempValue = object[tempKeyArray[i]];
+                    var temp = {
+                        name: tempkey,
+                        value: tempValue
+                    };
+                    $scope.envInfo.push(temp);
+                }
+            }
+
+            function uploadFiles($file, $invalidFiles) {
+                $scope.openrcInfo = {};
+                $scope.loadingOPENrc = true;
+
+                $scope.displayOpenrcFile = $file;
+                timeConstruct($scope.displayOpenrcFile.lastModified);
+                Upload.upload({
+                    url: Base_URL + '/api/v2/yardstick/openrcs',
+                    data: { file: $file, 'environment_id': $scope.uuid, 'action': 'upload_openrc' }
+                }).then(function(response) {
+
+                    $scope.loadingOPENrc = false;
+                    if (response.data.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'upload success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.openrcInfo = response.data.result;
+                        getItemIdDetail();
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'faile',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    $scope.uploadfile = null;
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function timeConstruct(array) {
+                var date = new Date(1398250549490);
+                var Y = date.getFullYear() + '-';
+                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+                var D = date.getDate() + ' ';
+                var h = date.getHours() + ':';
+                var m = date.getMinutes() + ':';
+                var s = date.getSeconds();
+                $scope.filelastModified = Y + M + D + h + m + s;
+
+            }
+
+            function addEnvironment() {
+                mainFactory.addEnvName().post({
+                    'action': 'create_environment',
+                    args: {
+                        'name': $scope.baseElementInfo.name
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create name success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.uuid = response.result.uuid;
+                        var path = $location.path();
+                        path = path + $scope.uuid;
+                        $location.url(path);
+                        getItemIdDetail();
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getItemIdDetail() {
+
+                mainFactory.ItemDetail().get({
+                    'envId': $scope.uuid
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.baseElementInfo = response.result.environment;
+
+
+                        if ($scope.ifNew != 'true') {
+                            $scope.baseElementInfo = response.result.environment;
+                            if ($scope.baseElementInfo.openrc_id != null) {
+                                getOpenrcDetail($scope.baseElementInfo.openrc_id);
+                            }
+                        }
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+            //getopenRcid
+            function getOpenrcDetail(openrcId) {
+                mainFactory.getEnvironmentDetail().get({
+                    'openrc_id': openrcId
+                }).$promise.then(function(response) {
+                    $scope.openrcInfo = response.result;
+                    buildToEnvInfo($scope.openrcInfo.openrc)
+                }, function(response) {
+
+                })
+            }
+
+
+            //getImgDetail
+            function getImageDetail() {
+                mainFactory.ImageDetail().get({
+                    'image_id': $scope.baseElementInfo.image_id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.imageDetail = response.result.image;
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //getPodDetail
+            function getPodDetail() {
+                mainFactory.podDeatil().get({
+                    'podId': $scope.baseElementInfo.pod_id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.podDetail = response.result.pod;
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+            //getContainerDetail
+            function getPodDetail(containerId) {
+                mainFactory.containerDetail().get({
+                    'containerId': containerId
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.podDetail = response.result.pod;
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+            $scope.goBack = function goBack() {
+                window.history.back();
+            }
+
+            $scope.goNext = function goNext() {
+                $scope.path = $location.path();
+                $scope.uuid = $scope.path.split('/').pop();
+                $state.go('app.uploadImage', { uuid: $scope.uuid });
+            }
+
+            $scope.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id;
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deleteOpenRc = function deleteOpenRc() {
+                mainFactory.deleteOpenrc().delete({ 'openrc': $scope.baseElementInfo.openrc_id }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete openrc success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getItemIdDetail();
+                        $scope.openrcInfo = null;
+                        $scope.envInfo = [];
+                        $scope.displayOpenrcFile = null;
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+
+
+
+
+
+
+
+        }
+
+
+    ]);
diff --git a/gui/app/scripts/controllers/image.controller.js b/gui/app/scripts/controllers/image.controller.js
new file mode 100644
index 000000000..53acff405
--- /dev/null
+++ b/gui/app/scripts/controllers/image.controller.js
@@ -0,0 +1,166 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('ImageController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', '$location', '$interval',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, $location, $interval) {
+
+
+            init();
+            $scope.showloading = false;
+            $scope.ifshowStatus = 0;
+
+            function init() {
+
+
+                $scope.uuid = $stateParams.uuid;
+                $scope.uploadImage = uploadImage;
+                getItemIdDetail();
+                getImageListSimple();
+            }
+
+            function getItemIdDetail() {
+                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
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            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
+                    });
+                })
+            }
+
+
+            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);
+                        }
+
+                    } 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 uploadImage() {
+                $scope.imageStatus = 0;
+                $interval.cancel($scope.intervalImgae);
+                $scope.ifshowStatus = 1;
+                $scope.showloading = true;
+                mainFactory.uploadImage().post({
+                    'action': 'load_image',
+                    'args': {
+                        'environment_id': $scope.uuid
+
+                    }
+                }).$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);
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'failed',
+                            body: 'something wrong',
+                            timeout: 3000
+                        });
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'failed',
+                        body: 'something wrong',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            $scope.goBack = function goBack() {
+                $state.go('app2.projectList');
+            }
+
+            $scope.goNext = function goNext() {
+                $scope.path = $location.path();
+                $scope.uuid = $scope.path.split('/').pop();
+                $state.go('app.podUpload', { uuid: $scope.uuid });
+            }
+
+
+
+
+
+        }
+    ]);
diff --git a/gui/app/scripts/controllers/main.js b/gui/app/scripts/controllers/main.js
new file mode 100644
index 000000000..e3e880e62
--- /dev/null
+++ b/gui/app/scripts/controllers/main.js
@@ -0,0 +1,725 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('MainCtrl', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog', '$localStorage', '$loading', '$interval',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog, $localStorage, $loading, $interval) {
+
+
+            init();
+            $scope.project = 0;
+            $scope.showloading = false;
+            $scope.showEnvrionment = false;
+            $scope.loadingOPENrc = false;
+            $scope.uuidEnv = null;
+            $scope.showPod = null;
+            $scope.showImage = null;
+            $scope.showContainer = null;
+            $scope.showNextOpenRc = null;
+            $scope.showNextPod = null;
+            $scope.displayContainerInfo = [];
+            $scope.containerList = [{ value: 'create_influxdb', name: "InfluxDB" }, { value: 'create_grafana', name: "Grafana" }]
+            $scope.items = [
+                'The first choice!',
+                'And another choice for you.',
+                'but wait! A third!'
+            ];
+            $scope.$on('$destroy', function() {
+                $interval.cancel($scope.intervalImgae)
+            });
+            $scope.showImageStatus = 0;
+
+
+
+
+
+
+            function init() {
+
+
+                $scope.gotoProject = gotoProject;
+                $scope.gotoEnvironment = gotoEnvironment;
+                $scope.gotoTask = gotoTask;
+                $scope.gotoExcute = gotoExcute;
+                $scope.gotoReport = gotoReport;
+                $scope.deleteEnvItem = deleteEnvItem;
+                $scope.addInfo = addInfo;
+                $scope.submitOpenRcFile = submitOpenRcFile;
+                $scope.uploadFilesPod = uploadFilesPod;
+                $scope.uploadFiles = uploadFiles;
+                $scope.showEnvriomentStatus = showEnvriomentStatus;
+                $scope.openEnvironmentDialog = openEnvironmentDialog;
+                $scope.getEnvironmentList = getEnvironmentList;
+                $scope.gotoDetail = gotoDetail;
+                $scope.addEnvironment = addEnvironment;
+                $scope.createContainer = createContainer;
+                $scope.chooseResult = chooseResult;
+
+                getEnvironmentList();
+                // getImageList();
+
+            }
+
+            function gotoProject() {
+                $scope.project = 1;
+            }
+
+            function gotoEnvironment() {
+                $scope.project = 0;
+            }
+
+            function gotoTask() {
+                $scope.project = 2;
+            }
+
+            function gotoExcute() {
+                $scope.project = 3;
+
+            }
+
+            function gotoReport() {
+                $scope.project = 4;
+            }
+            $scope.skipPod = function skipPod() {
+                $scope.showContainer = 1;
+
+            }
+            $scope.skipContainer = function skipContainer() {
+                getEnvironmentList();
+                ngDialog.close();
+            }
+
+            $scope.goToImage = function goToImage() {
+                getImageListSimple();
+                $scope.showImage = 1;
+            }
+            $scope.goToPod = function goToPod() {
+                $scope.showPod = 1;
+            }
+            $scope.goToPodPrev = function goToPodPrev() {
+                $scope.showImage = null;
+
+            }
+            $scope.skipPodPrev = function skipPodPrev() {
+                $scope.showImage = 1;
+                $scope.showPod = null;
+
+            }
+            $scope.skipContainerPrev = function skipContainerPrev() {
+                $scope.showPod = 1;
+                $scope.showContainer = null;
+            }
+
+            $scope.envInfo = [
+                { name: 'OS_USERNAME', value: '' },
+                { name: 'OS_PASSWORD', value: '' },
+                { name: 'OS_TENANT_NAME', value: '' },
+                { name: 'EXTERNAL_NETWORK', value: '' }
+            ];
+
+
+            function deleteEnvItem(index) {
+                $scope.envInfo.splice(index, 1);
+            }
+
+            function addInfo() {
+                var tempKey = null;
+                var tempValue = null;
+                var temp = {
+                    name: tempKey,
+                    value: tempValue
+                }
+                $scope.envInfo.push(temp);
+
+            }
+
+            function submitOpenRcFile() {
+                $scope.showloading = true;
+
+                var postData = {};
+                postData['action'] = 'update_openrc';
+                rebuildEnvInfo();
+                postData['args'] = {};
+                postData.args["openrc"] = $scope.postEnvInfo;
+                postData.args['environment_id'] = $scope.uuidEnv;
+                mainFactory.postEnvironmentVariable().post(postData).$promise.then(function(response) {
+                    $scope.showloading = false;
+
+                    if (response.status == 1) {
+
+                        $scope.openrcInfo = response.result;
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.showEnvrionment = true;
+                        // $scope.showImage = response.status;
+                        $scope.showNextOpenRc = 1;
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            function uploadFiles($file, $invalidFiles) {
+                $scope.openrcInfo = {};
+                $scope.loadingOPENrc = true;
+                $scope.displayOpenrcFile = $file;
+                timeConstruct($scope.displayOpenrcFile.lastModified);
+                Upload.upload({
+                    url: Base_URL + '/api/v2/yardstick/openrcs',
+                    data: { file: $file, 'environment_id': $scope.uuidEnv, 'action': 'upload_openrc' }
+                }).then(function(response) {
+
+                    $scope.loadingOPENrc = false;
+                    if (response.data.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'upload success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.openrcInfo = response.data.result;
+
+                        getItemIdDetailforOpenrc();
+                        $scope.showNextOpenRc = 1;
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    $scope.uploadfile = null;
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //reconstruc EnvInfo
+            function rebuildEnvInfo() {
+                $scope.postEnvInfo = {};
+                for (var i = 0; i < $scope.envInfo.length; i++) {
+                    $scope.postEnvInfo[$scope.envInfo[i].name] = $scope.envInfo[i].value;
+                }
+
+            }
+            function uploadFilesPod($file, $invalidFiles) {
+                $scope.loadingOPENrc = true;
+
+                $scope.displayPodFile = $file;
+                timeConstruct($scope.displayPodFile.lastModified);
+                Upload.upload({
+                    url: Base_URL + '/api/v2/yardstick/pods',
+                    data: { file: $file, 'environment_id': $scope.uuidEnv, 'action': 'upload_pod_file' }
+                }).then(function(response) {
+
+                    $scope.loadingOPENrc = false;
+                    if (response.data.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'upload success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+
+                        $scope.podData = response.data.result;
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    $scope.uploadfile = null;
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function timeConstruct(array) {
+                var date = new Date(1398250549490);
+                var Y = date.getFullYear() + '-';
+                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+                var D = date.getDate() + ' ';
+                var h = date.getHours() + ':';
+                var m = date.getMinutes() + ':';
+                var s = date.getSeconds();
+                $scope.filelastModified = Y + M + D + h + m + s;
+
+            }
+
+            //display environment
+            function showEnvriomentStatus() {
+                $scope.showEnvironment = true;
+            }
+
+            //open Environment dialog
+            function openEnvironmentDialog() {
+                $scope.showEnvrionment = false;
+                $scope.loadingOPENrc = false;
+                $scope.uuidEnv = null;
+                $scope.showPod = null;
+                $scope.showImage = null;
+                $scope.showContainer = null;
+                $scope.showNextOpenRc = null;
+                $scope.showNextPod = null;
+                $scope.displayContainerInfo = [];
+
+                $scope.displayPodFile = null;
+                $scope.name = null;
+                $scope.openrcInfo = null;
+                $scope.envInfo = [
+                    { name: 'OS_USERNAME', value: '' },
+                    { name: 'OS_PASSWORD', value: '' },
+                    { name: 'OS_TENANT_NAME', value: '' },
+                    { name: 'EXTERNAL_NETWORK', value: '' }
+                ];
+                $scope.displayOpenrcFile = null;
+                $scope.podData = null;
+                $scope.displayContainerInfo = null;
+                ngDialog.open({
+                    preCloseCallback: function(value) {
+                        getEnvironmentList();
+                        // getImageList();
+                    },
+                    template: 'views/modal/environmentDialog.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 950,
+                    showClose: true,
+                    closeByDocument: false
+                })
+            }
+
+            function getEnvironmentList() {
+                $loading.start('key');
+
+                mainFactory.getEnvironmentList().get().$promise.then(function(response) {
+                    $scope.environmentList = response.result.environments;
+                    $loading.finish('key');
+
+                }, function(error) {
+                    $loading.finish('key');
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            //go to detail page
+            function gotoDetail(ifNew, uuid) {
+
+                $state.go('app.environmentDetail', { uuid: uuid, ifNew: ifNew });
+            }
+
+
+            function addEnvironment(name) {
+                mainFactory.addEnvName().post({
+                    'action': 'create_environment',
+                    args: {
+                        'name': name
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create name success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.uuidEnv = response.result.uuid;
+                        $scope.name = name;
+
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+
+            $scope.goBack = function goBack() {
+                    $state.go('app2.projectList');
+                }
+            $scope.displayContainerInfo = [];
+
+            function createContainer(selectContainer) {
+
+                $scope.showloading = true;
+                mainFactory.runAcontainer().post({
+                    'action': selectContainer.value,
+                    'args': {
+                        'environment_id': $scope.uuidEnv,
+                    }
+                }).$promise.then(function(response) {
+                    $scope.showloading = false;
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create container success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+
+                        setTimeout(function() {
+                            getItemIdDetail();
+                        }, 10000);
+                        $scope.ifskipOrClose = 1;
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getConDetail(id) {
+                mainFactory.containerDetail().get({
+                    'containerId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        // $scope.podData = response.result;
+                        $scope.displayContainerInfo.push(response.result.container);
+
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+
+            }
+
+            function chooseResult(name) {
+                $scope.selectContainer = name;
+            }
+
+            function getItemIdDetail() {
+                $scope.displayContainerInfo = [];
+                mainFactory.ItemDetail().get({
+                    'envId': $scope.uuidEnv
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.envName = response.result.environment.name;
+                        $scope.containerId = response.result.environment.container_id;
+                        if ($scope.containerId != null) {
+
+                            var keysArray = Object.keys($scope.containerId);
+                            for (var k in $scope.containerId) {
+                                getConDetail($scope.containerId[k]);
+
+                            }
+
+
+                        } else {
+                            $scope.podData = null;
+                        }
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            $scope.uploadImage = function uploadImage() {
+                $scope.imageStatus = 0;
+                $scope.showImageStatus = 1;
+                $scope.showloading = true;
+                mainFactory.uploadImage().post({
+                    'action': 'load_image',
+                    'args': {
+                        'environment_id': $scope.uuid
+
+                    }
+                }).$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;
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'failed',
+                            body: 'something wrong',
+                            timeout: 3000
+                        });
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'failed',
+                        body: 'something wrong',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            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);
+                        }
+
+                    } 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 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.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id;
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deleteEnv = function deleteEnv() {
+                mainFactory.deleteEnv().delete({ 'env_id': $scope.deleteId }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete environment success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getEnvironmentList();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+
+
+
+
+            function getItemIdDetailforOpenrc() {
+
+                mainFactory.ItemDetail().get({
+                    'envId': $scope.uuidEnv
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.baseElementInfo = response.result.environment;
+
+
+                        if ($scope.ifNew != 'true') {
+                            $scope.baseElementInfo = response.result.environment;
+                            if ($scope.baseElementInfo.openrc_id != null) {
+                                getOpenrcDetailForOpenrc($scope.baseElementInfo.openrc_id);
+                            }
+                        }
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+
+                    }
+                }, function(error) {
+
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+
+
+            //getopenRcid
+            function getOpenrcDetailForOpenrc(openrcId) {
+                mainFactory.getEnvironmentDetail().get({
+                    'openrc_id': openrcId
+                }).$promise.then(function(response) {
+                    $scope.openrcInfo = response.result;
+                    buildToEnvInfoOpenrc($scope.openrcInfo.openrc)
+                }, function(response) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'error',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //buildtoEnvInfo
+            function buildToEnvInfoOpenrc(object) {
+                var tempKeyArray = Object.keys(object);
+                $scope.envInfo = [];
+
+
+                for (var i = 0; i < tempKeyArray.length; i++) {
+                    var tempkey = tempKeyArray[i];
+                    var tempValue = object[tempKeyArray[i]];
+                    var temp = {
+                        name: tempkey,
+                        value: tempValue
+                    };
+                    $scope.envInfo.push(temp);
+                }
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        }
+    ]);
diff --git a/gui/app/scripts/controllers/pod.controller.js b/gui/app/scripts/controllers/pod.controller.js
new file mode 100644
index 000000000..3ef236854
--- /dev/null
+++ b/gui/app/scripts/controllers/pod.controller.js
@@ -0,0 +1,179 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('PodController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', '$location', 'ngDialog',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, $location, ngDialog) {
+
+
+            init();
+            $scope.showloading = false;
+            $scope.loadingOPENrc = false;
+
+            function init() {
+
+
+                $scope.uuid = $stateParams.uuid;
+                $scope.uploadFiles = uploadFiles;
+                getItemIdDetail();
+
+            }
+
+            function getItemIdDetail() {
+                mainFactory.ItemDetail().get({
+                    'envId': $scope.uuid
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.name = response.result.environment.name;
+                        $scope.podId = response.result.environment.pod_id;
+                        if ($scope.podId != null) {
+                            getPodDetail($scope.podId);
+                        } else {
+                            $scope.podData = null;
+                        }
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getPodDetail(id) {
+                mainFactory.getPodDetail().get({
+                    'podId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.podData = response.result;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+
+            }
+
+            //upload pod file
+            function uploadFiles($file, $invalidFiles) {
+                $scope.loadingOPENrc = true;
+
+                $scope.displayOpenrcFile = $file;
+                timeConstruct($scope.displayOpenrcFile.lastModified);
+                Upload.upload({
+                    url: Base_URL + '/api/v2/yardstick/pods',
+                    data: { file: $file, 'environment_id': $scope.uuid, 'action': 'upload_pod_file' }
+                }).then(function(response) {
+
+                    $scope.loadingOPENrc = false;
+                    if (response.data.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'upload success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+
+                        $scope.podData = response.data.result;
+
+                        getItemIdDetail();
+
+
+                    } else {
+
+                    }
+
+                }, function(error) {
+                    $scope.uploadfile = null;
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function timeConstruct(array) {
+                var date = new Date(1398250549490);
+                var Y = date.getFullYear() + '-';
+                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+                var D = date.getDate() + ' ';
+                var h = date.getHours() + ':';
+                var m = date.getMinutes() + ':';
+                var s = date.getSeconds();
+                $scope.filelastModified = Y + M + D + h + m + s;
+
+            }
+            $scope.goBack = function goBack() {
+                $state.go('app2.projectList');
+            }
+
+
+            $scope.goNext = function goNext() {
+                $scope.path = $location.path();
+                $scope.uuid = $scope.path.split('/').pop();
+                $state.go('app.container', { uuid: $scope.uuid });
+            }
+
+            $scope.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id;
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deletePod = function deletePod() {
+                mainFactory.deletePod().delete({ 'podId': $scope.podId }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete pod success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        $scope.uuid = $stateParams.uuid;
+                        $scope.uploadFiles = uploadFiles;
+                        $scope.displayOpenrcFile = null;
+                        getItemIdDetail();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/controllers/project.controller.js b/gui/app/scripts/controllers/project.controller.js
new file mode 100644
index 000000000..0a7b8b932
--- /dev/null
+++ b/gui/app/scripts/controllers/project.controller.js
@@ -0,0 +1,160 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('ProjectController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog', '$loading',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog, $loading) {
+
+
+            init();
+
+
+            function init() {
+
+
+                getProjectList();
+                $scope.openCreateProject = openCreateProject;
+                $scope.createName = createName;
+                $scope.gotoDetail = gotoDetail;
+
+
+            }
+
+            function getProjectList() {
+                $loading.start('key');
+                mainFactory.projectList().get({}).$promise.then(function(response) {
+                    $loading.finish('key');
+                    if (response.status == 1) {
+                        $scope.projectListData = response.result.projects;
+
+
+                    } else {
+
+                    }
+                }, function(error) {
+                    $loading.finish('key');
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            function openCreateProject() {
+
+                ngDialog.open({
+                    template: 'views/modal/projectCreate.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 400,
+                    showClose: true,
+                    closeByDocument: false
+                })
+            }
+
+            function createName(name) {
+
+                mainFactory.createProjectName().post({
+                    'action': 'create_project',
+                    'args': {
+                        'name': name,
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create project success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getProjectList();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'failed',
+                            body: 'create project failed',
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'failed',
+                        body: 'Something Wrong',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function gotoDetail(id) {
+                $state.go('app2.projectdetail', { projectId: id })
+            }
+
+
+            $scope.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id;
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deleteProject = function deleteProject() {
+                mainFactory.deleteProject().delete({ 'project_id': $scope.deleteId }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete Project success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getProjectList();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        }
+    ]);
diff --git a/gui/app/scripts/controllers/projectDetail.controller.js b/gui/app/scripts/controllers/projectDetail.controller.js
new file mode 100644
index 000000000..4ab4a055a
--- /dev/null
+++ b/gui/app/scripts/controllers/projectDetail.controller.js
@@ -0,0 +1,690 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('ProjectDetailController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog', '$localStorage', '$loading', '$interval',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog, $localStorage, $loading, $interval) {
+
+
+            init();
+            // $scope.taskListDisplay = [];
+            $scope.blisterPackTemplates = [{ id: 1, name: "Test Case" }, { id: 2, name: "Test Suite" }]
+            $scope.selectType = null;
+            $scope.ifHasEnv = false;
+            $scope.ifHasCase = false;
+            $scope.ifHasSuite = false;
+            $scope.$on('$destroy', function() {
+                $interval.cancel($scope.intervalCount)
+            });
+            $scope.finalTaskListDisplay = [];
+
+
+            function init() {
+
+
+                getProjectDetail();
+
+                $scope.openCreate = openCreate;
+                $scope.createTask = createTask;
+                $scope.constructTestSuit = constructTestSuit;
+                $scope.addEnvToTask = addEnvToTask;
+                $scope.triggerContent = triggerContent;
+                $scope.constructTestCase = constructTestCase;
+                $scope.getTestDeatil = getTestDeatil;
+                $scope.confirmAddCaseOrSuite = confirmAddCaseOrSuite;
+                $scope.runAtask = runAtask;
+                $scope.gotoDetail = gotoDetail;
+                $scope.gotoReport = gotoReport;
+                $scope.gotoModify = gotoModify;
+                $scope.goBack = goBack;
+                $scope.goToExternal = goToExternal;
+
+
+            }
+
+            function getProjectDetail() {
+                if ($scope.intervalCount != undefined) {
+                    $interval.cancel($scope.intervalCount);
+                }
+                $loading.start('key');
+                $scope.taskListDisplay = [];
+                $scope.finalTaskListDisplay = [];
+                mainFactory.getProjectDetail().get({
+                    project_id: $stateParams.projectId
+                }).$promise.then(function(response) {
+                    $loading.finish('key');
+                    if (response.status == 1) {
+
+                        $scope.projectData = response.result.project;
+                        if ($scope.projectData.tasks.length != 0) {
+
+
+                            for (var i = 0; i < $scope.projectData.tasks.length; i++) {
+                                getDetailTaskForList($scope.projectData.tasks[i]);
+                            }
+                            $scope.intervalCount = $interval(function() {
+                                getDetailForEachTask();
+                            }, 10000);
+                        } else {
+
+                            if ($scope.intervalCount != undefined) {
+                                $interval.cancel($scope.intervalCount);
+                            }
+                        }
+                    } else {
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            // function getProjectDetailSimple() {
+            //     getDetailForEachTask();
+            // }
+
+            function openCreate() {
+                $scope.newUUID = null;
+                $scope.displayEnvName = null;
+                $scope.selectEnv = null;
+                $scope.selectCase = null;
+                $scope.selectType = null;
+                $scope.contentInfo = null;
+                $scope.ifHasEnv = false;
+                $scope.ifHasCase = false;
+                $scope.ifHasSuite = false;
+
+                // getEnvironmentList();
+                $scope.selectEnv = null;
+                ngDialog.open({
+                    template: 'views/modal/taskCreate.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 800,
+                    showClose: true,
+                    closeByDocument: false,
+                    preCloseCallback: function(value) {
+                        getProjectDetail();
+                    },
+                })
+            }
+
+            function createTask(name) {
+                mainFactory.createTask().post({
+                    'action': 'create_task',
+                    'args': {
+                        'name': name,
+                        'project_id': $stateParams.projectId
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create task success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.newUUID = response.result.uuid;
+                        getEnvironmentList();
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'create task wrong',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                    }
+
+
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'create task wrong',
+                        body: 'you can go next step',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getDetailTaskForList(id) {
+
+                mainFactory.getTaskDetail().get({
+                    'taskId': id
+                }).$promise.then(function(response) {
+
+                    if (response.status == 1) {
+                        if (response.result.task.status == -1) {
+                            response.result.task['stausWidth'] = '5%';
+                        } else if (response.result.task.status == 0) {
+                            response.result.task['stausWidth'] = '50%';
+                        } else if (response.result.task.status == 1) {
+                            response.result.task['stausWidth'] = '100%';
+                        } else if (response.result.task.status == 2) {
+                            response.result.task['stausWidth'] = 'red';
+                        }
+                        $scope.taskListDisplay.push(response.result.task);
+                        console.log($scope.taskListDisplay);
+
+                        $scope.finalTaskListDisplay = $scope.taskListDisplay;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            function getDetailTaskForListSimple(id, index) {
+
+                mainFactory.getTaskDetail().get({
+                    'taskId': id
+                }).$promise.then(function(response) {
+
+                    if (response.status == 1) {
+                        if (response.result.task.status == -1) {
+
+                            $scope.finalTaskListDisplay[index].stausWidth = '5%';
+                            $scope.finalTaskListDisplay[index].status = response.result.task.status;
+                        } else if (response.result.task.status == 0) {
+
+                            $scope.finalTaskListDisplay[index].stausWidth = '50%';
+                            $scope.finalTaskListDisplay[index].status = response.result.task.status;
+                        } else if (response.result.task.status == 1) {
+
+                            $scope.finalTaskListDisplay[index].stausWidth = '100%';
+                            $scope.finalTaskListDisplay[index].status = response.result.task.status;
+                        } else if (response.result.task.status == 2) {
+
+                            $scope.finalTaskListDisplay[index].stausWidth = 'red';
+                            $scope.finalTaskListDisplay[index].status = response.result.task.status;
+                        }
+
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            function getDetailForEachTask() {
+                for (var i = 0; i < $scope.finalTaskListDisplay.length; i++) {
+                    if ($scope.finalTaskListDisplay[i].status != 1 && $scope.finalTaskListDisplay[i].status != -1) {
+                        getDetailTaskForListSimple($scope.finalTaskListDisplay[i].uuid, i);
+                    }
+                }
+            }
+
+            function getEnvironmentList() {
+                mainFactory.getEnvironmentList().get().$promise.then(function(response) {
+                    $scope.environmentList = response.result.environments;
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            function constructTestSuit(id, name) {
+                $scope.displayEnvName = name;
+                $scope.selectEnv = id;
+
+            }
+
+            function constructTestCase(name) {
+
+                $scope.selectCase = name;
+                if ($scope.selectType.name == 'Test Case') {
+                    getCaseInfo();
+                } else {
+                    getSuiteInfo();
+                }
+
+            }
+
+
+
+
+            function addEnvToTask() {
+                mainFactory.taskAddEnv().put({
+                    'taskId': $scope.newUUID,
+                    'action': 'add_environment',
+                    'args': {
+                        'task_id': $scope.newUUID,
+                        'environment_id': $scope.selectEnv
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'add environment success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.ifHasEnv = true;
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'create task wrong',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                    }
+
+
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'create task wrong',
+                        body: 'you can go next step',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function triggerContent(name) {
+                $scope.selectCase = null;
+                $scope.displayTable = true;
+
+                $scope.selectType = name;
+                if (name.name == 'Test Case') {
+                    getTestcaseList();
+                } else if (name.name == 'Test Suite') {
+                    getsuiteList();
+                }
+            }
+
+            function getTestcaseList() {
+                mainFactory.getTestcaselist().get({
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.testcaselist = response.result;
+
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getsuiteList() {
+                mainFactory.suiteList().get({
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.testsuitlist = response.result.testsuites;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getTestDeatil() {
+
+
+                if ($scope.selectType.name == 'Test Case') {
+                    getTestcaseDetail();
+                } else {
+                    getSuiteDetail();
+                }
+
+            }
+
+            function getCaseInfo() {
+
+
+
+                mainFactory.getTestcaseDetail().get({
+                    'testcasename': $scope.selectCase
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+
+                        $scope.contentInfo = response.result.testcase;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getSuiteInfo() {
+                mainFactory.suiteDetail().get({
+                    'suiteName': $scope.selectCase.split('.')[0]
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.contentInfo = response.result.testsuite;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+            function getSuiteDetail() {
+                mainFactory.suiteDetail().get({
+                    'suiteName': $scope.selectCase.split('.')[0]
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.displayTable = false;
+                        $scope.contentInfo = response.result.testsuite;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+            function getTestcaseDetail() {
+                mainFactory.getTestcaseDetail().get({
+                    'testcasename': $scope.selectCase
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+
+                        $scope.displayTable = false;
+                        $scope.contentInfo = response.result.testcase;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function addCasetoTask(content) {
+                mainFactory.taskAddEnv().put({
+                    'taskId': $scope.newUUID,
+                    'action': 'add_case',
+                    'args': {
+                        'task_id': $scope.newUUID,
+                        'case_name': $scope.selectCase,
+                        'case_content': content
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'add test case success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.ifHasCase = true;
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'create task wrong',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'create task wrong',
+                        body: 'you can go next step',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function addSuitetoTask(content) {
+                mainFactory.taskAddEnv().put({
+                    'taskId': $scope.newUUID,
+                    'action': 'add_suite',
+                    'args': {
+                        'task_id': $scope.newUUID,
+                        'suite_name': $scope.selectCase.split('.')[0],
+                        'suite_content': content
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'add test suite success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.ifHasSuite = true;
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'create task wrong',
+                            body: 'wrong',
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'create task wrong',
+                        body: 'something wrong',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function confirmAddCaseOrSuite(content) {
+                if ($scope.selectType.name == "Test Case") {
+                    addCasetoTask(content);
+                } else {
+                    addSuitetoTask(content);
+                }
+            }
+
+            function runAtask(id) {
+                mainFactory.taskAddEnv().put({
+                    'taskId': id,
+                    'action': 'run',
+                    'args': {
+                        'task_id': id
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'run a task success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        // getProjectDetail();
+                    } else {
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            $scope.runAtaskForTable = function runAtaskForTable(id) {
+                mainFactory.taskAddEnv().put({
+                    'taskId': id,
+                    'action': 'run',
+                    'args': {
+                        'task_id': id
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        // toaster.pop({
+                        //     type: 'success',
+                        //     title: 'run a task success',
+                        //     body: 'you can go next step',
+                        //     timeout: 3000
+                        // });
+                        // ngDialog.close();
+                        getProjectDetail();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.result,
+                            timeout: 3000
+                        });
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            function gotoDetail(id) {
+
+
+                $state.go('app2.tasklist', { taskId: id });
+
+            }
+
+            function gotoReport(id) {
+                $state.go('app2.report', { taskId: id });
+            }
+
+            function gotoModify(id) {
+                $state.go('app2.taskModify', { taskId: id });
+            }
+
+            function goBack() {
+                window.history.back();
+            }
+
+            function goToExternal() {
+                window.open(External_URL, '_blank');
+            }
+
+            $scope.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id;
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deleteTask = function deleteTask() {
+                mainFactory.deleteTask().delete({ 'task_id': $scope.deleteId }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete Task success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getProjectDetail();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/controllers/report.controller.js b/gui/app/scripts/controllers/report.controller.js
new file mode 100644
index 000000000..9b6b5958b
--- /dev/null
+++ b/gui/app/scripts/controllers/report.controller.js
@@ -0,0 +1,115 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('ReportController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog) {
+
+
+            init();
+
+
+            function init() {
+                getDetailTaskForList();
+
+
+
+            }
+            $scope.goBack = function goBack() {
+                window.history.back();
+            }
+
+            function getDetailTaskForList(id) {
+                mainFactory.getTaskDetail().get({
+                    'taskId': $stateParams.taskId
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        if (response.result.task.status == -1) {
+                            response.result.task['stausWidth'] = '5%';
+                        } else if (response.result.task.status == 0) {
+                            response.result.task['stausWidth'] = '50%';
+                        } else if (response.result.task.status == 1) {
+                            response.result.task['stausWidth'] = '100%';
+                        } else if (response.result.task.status == 2) {
+                            response.result.task['stausWidth'] = 'red';
+                        }
+                        $scope.result = response.result.task;
+                        $scope.testcaseinfo = response.result.task.result.testcases;
+                        var key = Object.keys($scope.testcaseinfo);
+                        $scope.testcaseResult = $scope.testcaseinfo[key];
+
+                        $scope.envIdForTask = response.result.task.environment_id;
+                        getItemIdDetail();
+
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+            $scope.goToExternal = function goToExternal(id) {
+                var url = External_URL + ':' + $scope.jumpPort + '/dashboard/db' + '/' + id;
+
+                window.open(url, '_blank');
+            }
+
+            function getItemIdDetail() {
+                $scope.displayContainerInfo = [];
+                mainFactory.ItemDetail().get({
+                    'envId': $scope.envIdForTask
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        if (response.result.environment.container_id.grafana != null) {
+                            getConDetail(response.result.environment.container_id.grafana);
+
+                        } else {
+                            $scope.jumpPort = 3000;
+                        }
+
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getConDetail(id) {
+                mainFactory.containerDetail().get({
+                    'containerId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        // $scope.podData = response.result;
+                        $scope.jumpPort = response.result.container.port;
+
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+
+            }
+
+
+
+
+
+
+
+        }
+    ]);
diff --git a/gui/app/scripts/controllers/suitecreate.controller.js b/gui/app/scripts/controllers/suitecreate.controller.js
new file mode 100644
index 000000000..4a7b6fe85
--- /dev/null
+++ b/gui/app/scripts/controllers/suitecreate.controller.js
@@ -0,0 +1,104 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('suitcreateController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog) {
+
+
+            init();
+
+
+            function init() {
+
+                getTestcaseList();
+                $scope.constructTestSuit = constructTestSuit;
+                $scope.openDialog = openDialog;
+                $scope.createSuite = createSuite;
+
+            }
+
+            function getTestcaseList() {
+                mainFactory.getTestcaselist().get({
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.testcaselist = response.result;
+
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            $scope.testsuiteList = [];
+            $scope.suitReconstructList = [];
+
+            function constructTestSuit(name) {
+
+                var index = $scope.testsuiteList.indexOf(name);
+                if (index > -1) {
+                    $scope.testsuiteList.splice(index, 1);
+                } else {
+                    $scope.testsuiteList.push(name);
+                }
+
+
+                $scope.suitReconstructList = $scope.testsuiteList;
+
+            }
+
+            function createSuite(name) {
+                mainFactory.suiteCreate().post({
+                    'action': 'create_suite',
+                    'args': {
+                        'name': name,
+                        'testcases': $scope.testsuiteList
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'create suite success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                    } else {
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function openDialog() {
+                ngDialog.open({
+                    template: 'views/modal/suiteName.html',
+                    className: 'ngdialog-theme-default',
+                    scope: $scope,
+                    width: 314,
+                    showClose: true,
+                    closeByDocument: false
+                })
+            }
+
+
+
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/controllers/suitedetail.controller.js b/gui/app/scripts/controllers/suitedetail.controller.js
new file mode 100644
index 000000000..0dd39c389
--- /dev/null
+++ b/gui/app/scripts/controllers/suitedetail.controller.js
@@ -0,0 +1,48 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('suiteDetailController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster) {
+
+
+            init();
+
+
+            function init() {
+
+                getSuiteDetail();
+
+            }
+
+            function getSuiteDetail() {
+                mainFactory.suiteDetail().get({
+                    'suiteName': $stateParams.name
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.suiteinfo = response.result.testsuite;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+            $scope.goBack = function goBack() {
+                window.history.back();
+            }
+
+
+
+
+
+
+
+
+
+        }
+    ]);
diff --git a/gui/app/scripts/controllers/task.controller.js b/gui/app/scripts/controllers/task.controller.js
new file mode 100644
index 000000000..05546f9bf
--- /dev/null
+++ b/gui/app/scripts/controllers/task.controller.js
@@ -0,0 +1,175 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('TaskController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog) {
+
+
+            init();
+
+
+            function init() {
+                getDetailTaskForList();
+
+            }
+
+            function getDetailTaskForList() {
+                mainFactory.getTaskDetail().get({
+                    'taskId': $stateParams.taskId
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        if (response.result.task.status == -1) {
+                            response.result.task['stausWidth'] = '5%';
+                        } else if (response.result.task.status == 0) {
+                            response.result.task['stausWidth'] = '50%';
+                        } else if (response.result.task.status == 1) {
+                            response.result.task['stausWidth'] = '100%';
+                        } else if (response.result.task.status == 2) {
+                            response.result.task['stausWidth'] = 'red';
+                        }
+
+                        $scope.taskDetailData = response.result.task;
+                        if ($scope.taskDetailData.environment_id != null) {
+                            getItemIdDetail($scope.taskDetailData.environment_id);
+                        }
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+            function getItemIdDetail(id) {
+                mainFactory.ItemDetail().get({
+                    'envId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.displayEnv = response.result.environment;
+
+                        if (response.result.environment.pod_id != null) {
+                            getPodDetail(response.result.environment.pod_id);
+                        } else if (response.result.environment.image_id != null) {
+                            getImageDetail(response.result.environment.image_id);
+                        } else if (response.result.environment.openrc_id != null) {
+                            getOpenrcDetail(response.result.environment.openrc_id != null);
+                        } else if (response.result.environment.container_id.length != 0) {
+                            $scope.displayContainerDetail = [];
+                            var containerArray = response.result.environment.container_id;
+                            for (var i = 0; i < containerArray.length; i++) {
+                                getContainerId(containerArray[i]);
+                            }
+
+                        }
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //getopenRcid
+            function getOpenrcDetail(openrcId) {
+                mainFactory.getEnvironmentDetail().get({
+                    'openrc_id': openrcId
+                }).$promise.then(function(response) {
+                    //openrc数据
+                    $scope.openrcInfo = response.result;
+                    // buildToEnvInfo($scope.openrcInfo.openrc)
+                }, function(response) {
+
+                })
+            }
+
+
+            //getImgDetail
+            function getImageDetail(id) {
+                mainFactory.ImageDetail().get({
+                    'image_id': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.imageDetail = response.result.image;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //getPodDetail
+            function getPodDetail(id) {
+                mainFactory.podDeatil().get({
+                    'podId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.podDetail = response.result.pod;
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+            //getContainerDetail
+            function getContainerId(containerId) {
+                mainFactory.containerDetail().get({
+                    'containerId': containerId
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.container = response.result.container;
+                        $scope.displayContainerDetail.push($scope.container);
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+            $scope.goBack = function goBack() {
+                window.history.back();
+            }
+
+
+
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/controllers/taskModify.controller.js b/gui/app/scripts/controllers/taskModify.controller.js
new file mode 100644
index 000000000..757d65866
--- /dev/null
+++ b/gui/app/scripts/controllers/taskModify.controller.js
@@ -0,0 +1,533 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('TaskModifyController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster) {
+
+
+            init();
+            $scope.blisterPackTemplates = [{ id: 1, name: "Test Case" }, { id: 2, name: "Test Suite" }]
+            $scope.selectType = null;
+
+            $scope.sourceShow = null;
+
+
+
+            function init() {
+                getDetailTaskForList();
+                getEnvironmentList();
+                $scope.triggerContent = triggerContent;
+                $scope.constructTestSuit = constructTestSuit;
+                $scope.constructTestCase = constructTestCase;
+                $scope.getTestDeatil = getTestDeatil;
+                $scope.confirmToServer = confirmToServer;
+                $scope.addEnvToTask = addEnvToTask;
+            }
+
+            function getDetailTaskForList() {
+                mainFactory.getTaskDetail().get({
+                    'taskId': $stateParams.taskId
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        if (response.result.task.status == -1) {
+                            response.result.task['stausWidth'] = '5%';
+                        } else if (response.result.task.status == 0) {
+                            response.result.task['stausWidth'] = '50%';
+                        } else if (response.result.task.status == 1) {
+                            response.result.task['stausWidth'] = '100%';
+                        } else if (response.result.task.status == 2) {
+                            response.result.task['stausWidth'] = 'red';
+                        }
+
+                        $scope.taskDetailData = response.result.task;
+                        $scope.selectEnv = $scope.taskDetailData.environment_id;
+
+                        if ($scope.taskDetailData.environment_id != null) {
+                            getItemIdDetail($scope.taskDetailData.environment_id);
+                        }
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getItemIdDetail(id) {
+                mainFactory.ItemDetail().get({
+                    'envId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.envName = response.result.environment.name;
+                        // $scope.selectEnv = $scope.envName;
+                    } else {
+                        alert('Something Wrong!');
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //getopenRcid
+            function getOpenrcDetail(openrcId) {
+                mainFactory.getEnvironmentDetail().get({
+                    'openrc_id': openrcId
+                }).$promise.then(function(response) {
+                    $scope.openrcInfo = response.result;
+                    // buildToEnvInfo($scope.openrcInfo.openrc)
+                }, function(response) {
+
+                })
+            }
+
+
+            //getImgDetail
+            function getImageDetail(id) {
+                mainFactory.ImageDetail().get({
+                    'image_id': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.imageDetail = response.result.image;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            //getPodDetail
+            function getPodDetail(id) {
+                mainFactory.podDeatil().get({
+                    'podId': id
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.podDetail = response.result.pod;
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+            //getContainerDetail
+            function getContainerId(containerId) {
+                mainFactory.containerDetail().get({
+                    'containerId': containerId
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.container = response.result.container;
+                        $scope.displayContainerDetail.push($scope.container);
+
+                    } else {
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getEnvironmentList() {
+                mainFactory.getEnvironmentList().get().$promise.then(function(response) {
+                    $scope.environmentList = response.result.environments;
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+            function triggerContent(name) {
+                $scope.selectCase = null;
+                $scope.displayTable = true;
+
+                $scope.selectType = name;
+                if (name.name == 'Test Case') {
+                    $scope.taskDetailData.suite = false;
+                    getTestcaseList();
+                } else if (name.name == 'Test Suite') {
+                    $scope.taskDetailData.suite = true;
+                    getsuiteList();
+                }
+            }
+
+            function getTestcaseList() {
+                mainFactory.getTestcaselist().get({
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.testcaselist = response.result;
+
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getsuiteList() {
+                mainFactory.suiteList().get({
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.testsuitlist = response.result.testsuites;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+            function constructTestSuit(id, name) {
+
+                $scope.envName = name;
+                $scope.selectEnv = id;
+
+            }
+
+            function constructTestCase(name) {
+
+                $scope.selectCase = name;
+                if ($scope.selectType.name == 'Test Case') {
+                    getCaseInfo();
+                } else {
+                    getSuiteInfo();
+                }
+
+            }
+
+            function getCaseInfo() {
+
+
+
+                mainFactory.getTestcaseDetail().get({
+                    'testcasename': $scope.selectCase
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+
+                        $scope.contentInfo = response.result.testcase;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function getSuiteInfo() {
+                mainFactory.suiteDetail().get({
+                    'suiteName': $scope.selectCase.split('.')[0]
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.contentInfo = response.result.testsuite;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+            function getTestDeatil() {
+
+
+                if ($scope.selectType.name == 'Test Case') {
+                    getTestcaseDetail();
+                } else {
+                    getSuiteDetail();
+                }
+
+            }
+
+            function getSuiteDetail() {
+                mainFactory.suiteDetail().get({
+                    'suiteName': $scope.selectCase.split('.')[0]
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.displayTable = false;
+                        $scope.contentInfo = response.result.testsuite;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+            function getTestcaseDetail() {
+                mainFactory.getTestcaseDetail().get({
+                    'testcasename': $scope.selectCase
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+
+                        $scope.displayTable = false;
+                        $scope.contentInfo = response.result.testcase;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+
+            function addCasetoTask(content) {
+                mainFactory.taskAddEnv().put({
+                    'taskId': $stateParams.taskId,
+                    'action': 'add_case',
+                    'args': {
+                        'task_id': $stateParams.taskId,
+                        'case_name': $scope.selectCase,
+                        'case_content': content
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'add test case success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.ifHasCase = true;
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'create task wrong',
+                            body: '',
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'create task wrong',
+                        body: '',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function addSuitetoTask(content) {
+                mainFactory.taskAddEnv().put({
+                    'taskId': $stateParams.taskId,
+                    'action': 'add_suite',
+                    'args': {
+                        'task_id': $stateParams.taskId,
+                        'suite_name': $scope.selectCase.split('.')[0],
+                        'suite_content': content
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'add test suite success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.ifHasSuite = true;
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'create task wrong',
+                            body: 'wrong',
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'create task wrong',
+                        body: 'something wrong',
+                        timeout: 3000
+                    });
+                })
+            }
+            $scope.changeStatussourceTrue = function changeStatussourceTrue() {
+                $scope.selectCase = null;
+                $scope.sourceShow = true;
+            }
+
+            $scope.changeStatussourceFalse = function changeStatussourceFalse() {
+                $scope.sourceShow = false;
+            }
+
+            function confirmToServer(content1, content2) {
+
+                var content;
+                if ($scope.sourceShow == false) {
+                    content = content2;
+                    $scope.selectCase = $scope.taskDetailData.case_name;
+                } else if ($scope.sourceShow == true) {
+                    content = content1;
+                }
+                if ($scope.selectCase == 'Test Case' || $scope.taskDetailData.suite == false) {
+
+                    addCasetoTask(content);
+                } else {
+                    addSuitetoTask(content);
+                }
+            }
+
+
+            function addEnvToTask() {
+
+                mainFactory.taskAddEnv().put({
+                    'taskId': $stateParams.taskId,
+                    'action': 'add_environment',
+                    'args': {
+                        'task_id': $stateParams.taskId,
+                        'environment_id': $scope.selectEnv
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'add environment success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        $scope.ifHasEnv = true;
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'create task wrong',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                    }
+
+
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'create task wrong',
+                        body: 'you can go next step',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            $scope.goBack = function goBack() {
+                window.history.back();
+            }
+
+            $scope.runAtask = function runAtask() {
+                mainFactory.taskAddEnv().put({
+                    'taskId': $stateParams.taskId,
+                    'action': 'run',
+                    'args': {
+                        'task_id': $stateParams.taskId
+                    }
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'run a task success',
+                            body: 'go to task list page...',
+                            timeout: 3000
+                        });
+                        setTimeout(function() {
+                            window.history.back();
+                        }, 2000);
+
+
+
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'fail',
+                            body: response.error_msg,
+                            timeout: 3000
+                        });
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        }
+    ]);
diff --git a/gui/app/scripts/controllers/testcase.controller.js b/gui/app/scripts/controllers/testcase.controller.js
new file mode 100644
index 000000000..616ceb4a8
--- /dev/null
+++ b/gui/app/scripts/controllers/testcase.controller.js
@@ -0,0 +1,154 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('TestcaseController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog', '$loading',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog, $loading) {
+
+
+            init();
+            $scope.loadingOPENrc = false;
+
+
+            function init() {
+                $scope.testcaselist = [];
+                getTestcaseList();
+                $scope.gotoDetail = gotoDetail;
+                $scope.uploadFiles = uploadFiles;
+
+
+            }
+
+            function getTestcaseList() {
+                $loading.start('key');
+                mainFactory.getTestcaselist().get({
+
+                }).$promise.then(function(response) {
+                    $loading.finish('key');
+                    if (response.status == 1) {
+                        $scope.testcaselist = response.result;
+
+
+                    }
+                }, function(error) {
+                    $loading.finish('key');
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function gotoDetail(name) {
+                $state.go('app2.testcasedetail', { name: name });
+            }
+
+
+            function uploadFiles($file, $invalidFiles) {
+                $scope.loadingOPENrc = true;
+
+                $scope.displayOpenrcFile = $file;
+                timeConstruct($scope.displayOpenrcFile.lastModified);
+                Upload.upload({
+                    url: Base_URL + '/api/v2/yardstick/testcases',
+                    data: { file: $file, 'action': 'upload_case' }
+                }).then(function(response) {
+
+                    $scope.loadingOPENrc = false;
+                    if (response.data.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'upload success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+
+
+
+                    } else {
+
+                    }
+
+                }, function(error) {
+                    $scope.uploadfile = null;
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function timeConstruct(array) {
+                var date = new Date(1398250549490);
+                var Y = date.getFullYear() + '-';
+                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+                var D = date.getDate() + ' ';
+                var h = date.getHours() + ':';
+                var m = date.getMinutes() + ':';
+                var s = date.getSeconds();
+                $scope.filelastModified = Y + M + D + h + m + s;
+
+            }
+            $scope.goBack = function goBack() {
+                $state.go('app2.projectList');
+            }
+
+            $scope.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id;
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deleteTestCase = function deleteTestCase() {
+                mainFactory.deleteTestCase().delete({ 'caseName': $scope.deleteId }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete Test Case success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getTestcaseList();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+
+                })
+            }
+
+
+
+
+
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/controllers/testcasedetail.controller.js b/gui/app/scripts/controllers/testcasedetail.controller.js
new file mode 100644
index 000000000..4e824ca85
--- /dev/null
+++ b/gui/app/scripts/controllers/testcasedetail.controller.js
@@ -0,0 +1,50 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('testcaseDetailController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster) {
+
+
+            init();
+
+
+            function init() {
+
+                getTestcaseDetail();
+
+
+            }
+
+            function getTestcaseDetail() {
+                mainFactory.getTestcaseDetail().get({
+                    'testcasename': $stateParams.name
+
+                }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        $scope.testcaseInfo = response.result.testcase;
+
+                    }
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            $scope.goBack = function goBack() {
+                window.history.back();
+            }
+
+
+
+
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/controllers/testsuit.controller.js b/gui/app/scripts/controllers/testsuit.controller.js
new file mode 100644
index 000000000..abc9095c7
--- /dev/null
+++ b/gui/app/scripts/controllers/testsuit.controller.js
@@ -0,0 +1,119 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .controller('SuiteListController', ['$scope', '$state', '$stateParams', 'mainFactory', 'Upload', 'toaster', 'ngDialog', '$loading',
+        function($scope, $state, $stateParams, mainFactory, Upload, toaster, ngDialog, $loading) {
+
+
+            init();
+
+
+            function init() {
+                $scope.testsuitlist = [];
+                getsuiteList();
+                $scope.gotoDetail = gotoDetail;
+                $scope.gotoCreateSuite = gotoCreateSuite;
+
+
+            }
+
+            function getsuiteList() {
+                $loading.start('key');
+                mainFactory.suiteList().get({
+
+                }).$promise.then(function(response) {
+                    $loading.finish('key');
+                    if (response.status == 1) {
+                        $scope.testsuitlist = response.result.testsuites;
+
+                    }
+                }, function(error) {
+                    $loading.finish('key');
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+            function gotoDetail(name) {
+                var temp = name.split('.')[0];
+
+                $state.go('app2.suitedetail', { name: temp })
+
+            }
+
+            function gotoCreateSuite() {
+                $state.go('app2.suitcreate');
+            }
+
+            $scope.goBack = function goBack() {
+                $state.go('app2.projectList');
+            }
+
+
+            $scope.openDeleteEnv = function openDeleteEnv(id, name) {
+                $scope.deleteName = name;
+                $scope.deleteId = id.split('.')[0];
+                ngDialog.open({
+                    template: 'views/modal/deleteConfirm.html',
+                    scope: $scope,
+                    className: 'ngdialog-theme-default',
+                    width: 500,
+                    showClose: true,
+                    closeByDocument: false
+                })
+
+            }
+
+            $scope.deleteSuite = function deleteSuite() {
+                mainFactory.deleteTestSuite().delete({ 'suite_name': $scope.deleteId }).$promise.then(function(response) {
+                    if (response.status == 1) {
+                        toaster.pop({
+                            type: 'success',
+                            title: 'delete Test Suite success',
+                            body: 'you can go next step',
+                            timeout: 3000
+                        });
+                        ngDialog.close();
+                        getTestcaseList();
+                    } else {
+                        toaster.pop({
+                            type: 'error',
+                            title: 'Wrong',
+                            body: response.result,
+                            timeout: 3000
+                        });
+                    }
+
+                }, function(error) {
+                    toaster.pop({
+                        type: 'error',
+                        title: 'fail',
+                        body: 'unknow error',
+                        timeout: 3000
+                    });
+                })
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        }
+    ]);
\ No newline at end of file
diff --git a/gui/app/scripts/factory/main.factory.js b/gui/app/scripts/factory/main.factory.js
new file mode 100644
index 000000000..f8e9df9a1
--- /dev/null
+++ b/gui/app/scripts/factory/main.factory.js
@@ -0,0 +1,247 @@
+'use strict';
+
+/**
+ * get data factory
+ */
+
+
+var Base_URL;
+var Grafana_URL;
+
+angular.module('yardStickGui2App')
+    .factory('mainFactory', ['$resource','$rootScope','$http', '$location',function($resource, $rootScope,$http,$location) {
+
+        Base_URL = 'http://' + $location.host() + ':' + $location.port();
+        Grafana_URL = 'http://' + $location.host();
+
+        return {
+
+            postEnvironmentVariable: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/openrcs', {}, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            uploadOpenrc: function() {
+                return $resource(Base_URL + '/ap/v2/yardstick/openrcs', {}, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            getEnvironmentList: function() {
+                return $resource(Base_URL+ '/api/v2/yardstick/environments', {}, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            getEnvironmentDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/openrcs/:openrc_id', { openrc_id: "@openrc_id" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            addEnvName: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/environments', {}, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            ItemDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/environments/:envId', { envId: "@envId" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            ImageDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/images/:image_id', { image_id: "@image_id" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            podDeatil: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/pods/:podId', { podId: "@podId" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            containerDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/containers/:containerId', { containerId: "@containerId" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            ImageList: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/images', {}, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            uploadImage: 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': {
+                        method: 'GET'
+                    }
+                })
+            },
+            runAcontainer: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/containers', { podId: "@podId" }, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            getTestcaselist: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/testcases', {}, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            getTestcaseDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/testcases/:testcasename', { testcasename: "@testcasename" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            suiteList: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/testsuites', {}, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            suiteDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/testsuites/:suiteName', { suiteName: "@suiteName" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            suiteCreate: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/testsuites', {}, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            projectList: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/projects', {}, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+            createProjectName: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/projects', {}, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            getProjectDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/projects/:project_id', { project_id: "@project_id" }, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            createTask: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/tasks', {}, {
+                    'post': {
+                        method: 'POST'
+                    }
+                })
+            },
+            getTaskDetail: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/tasks/:taskId', { taskId: "@taskId" }, {
+                    'get': {
+                        method: 'GET'
+                    }
+                })
+            },
+
+            taskAddEnv: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/tasks/:taskId', { taskId: "@taskId" }, {
+                    'put': {
+                        method: 'PUT'
+                    }
+                })
+            },
+            //delete operate
+            deleteEnv: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/environments/:env_id', { env_id: '@env_id' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
+            deleteOpenrc: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/openrcs/:openrc', { openrc: '@openrc' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
+            deletePod: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/pods/:podId', { podId: '@podId' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
+            deleteContainer: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/containers/:containerId', { containerId: '@containerId' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
+            deleteTestCase: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/testcases/:caseName', { caseName: '@caseName' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
+            deleteTestSuite: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/testsuites/:suite_name', { suite_name: '@suite_name' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
+            deleteProject: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/projects/:project_id', { project_id: '@project_id' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            },
+            deleteTask: function() {
+                return $resource(Base_URL + '/api/v2/yardstick/tasks/:task_id', { task_id: '@task_id' }, {
+                    'delete': {
+                        method: 'DELETE'
+                    }
+                })
+            }
+
+        };
+    }]);
diff --git a/gui/app/scripts/router.config.js b/gui/app/scripts/router.config.js
new file mode 100644
index 000000000..b42954272
--- /dev/null
+++ b/gui/app/scripts/router.config.js
@@ -0,0 +1,184 @@
+'use strict';
+
+angular.module('yardStickGui2App')
+    .run(
+        ['$rootScope', '$state', '$stateParams',
+            function($rootScope, $state, $stateParams) {
+                $rootScope.$state = $state;
+                $rootScope.$stateParams = $stateParams;
+
+            }
+        ]
+    )
+    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
+        function($stateProvider, $urlRouterProvider, $locationProvider) {
+            $urlRouterProvider
+                .otherwise('main/environment');
+
+
+
+
+            $stateProvider
+
+                .state('app2', {
+                    url: "/main",
+                    controller: 'ContentController',
+                    templateUrl: "views/main2.html",
+                    ncyBreadcrumb: {
+                        label: 'Main'
+                    }
+                })
+                .state('app', {
+                    url: "/main",
+                    controller: 'ContentController',
+                    templateUrl: "views/main.html",
+                    ncyBreadcrumb: {
+                        label: 'Main'
+                    }
+                })
+
+            .state('app2.environment', {
+                    url: '/environment',
+                    templateUrl: 'views/environmentList.html',
+                    controller: 'MainCtrl',
+                    ncyBreadcrumb: {
+                        label: 'Environment'
+                    }
+                })
+                .state('app2.testcase', {
+                    url: '/testcase',
+                    templateUrl: 'views/testcaselist.html',
+                    controller: 'TestcaseController',
+                    ncyBreadcrumb: {
+                        label: 'Test Case'
+                    }
+                })
+                .state('app2.testsuite', {
+                    url: '/suite',
+                    templateUrl: 'views/suite.html',
+                    controller: 'SuiteListController',
+                    ncyBreadcrumb: {
+                        label: 'Test Suite'
+                    }
+                })
+                .state('app2.suitcreate', {
+                    url: '/suitcreate',
+                    templateUrl: 'views/testcasechoose.html',
+                    controller: 'suitcreateController',
+                    ncyBreadcrumb: {
+                        label: 'Suite Create'
+                    }
+                })
+                .state('app2.testcasedetail', {
+                    url: '/testdetail/:name',
+                    templateUrl: 'views/testcasedetail.html',
+                    controller: 'testcaseDetailController',
+                    ncyBreadcrumb: {
+                        label: 'Test Case Detail'
+                    },
+                    params: { name: null }
+                })
+                .state('app2.suitedetail', {
+                    url: '/suitedetail/:name',
+                    templateUrl: 'views/suitedetail.html',
+                    controller: 'suiteDetailController',
+                    ncyBreadcrumb: {
+                        label: 'Suite Detail'
+                    },
+                    params: { name: null }
+                })
+                .state('app.environmentDetail', {
+                    url: '/envDetail/:uuid',
+                    templateUrl: 'views/environmentDetail.html',
+                    controller: 'DetailController',
+                    params: { uuid: null, ifNew: null },
+                    ncyBreadcrumb: {
+                        label: 'Environment Detail'
+                    }
+                })
+                .state('app.uploadImage', {
+                    url: '/envimageDetail/:uuid',
+                    templateUrl: 'views/uploadImage.html',
+                    controller: 'ImageController',
+                    params: { uuid: null },
+                    ncyBreadcrumb: {
+                        label: 'Upload Image'
+                    }
+
+                })
+                .state('app.podUpload', {
+                    url: '/envpodupload/:uuid',
+                    templateUrl: 'views/podupload.html',
+                    controller: 'PodController',
+                    params: { uuid: null },
+                    ncyBreadcrumb: {
+                        label: 'Pod Upload'
+                    }
+                })
+                .state('app.container', {
+                    url: '/envcontainer/:uuid',
+                    templateUrl: 'views/container.html',
+                    controller: 'ContainerController',
+                    params: { uuid: null },
+                    ncyBreadcrumb: {
+                        label: 'Container Manage'
+                    }
+                })
+                .state('app2.projectList', {
+                    url: '/project',
+                    templateUrl: 'views/projectList.html',
+                    controller: 'ProjectController',
+                    ncyBreadcrumb: {
+                        label: 'Project'
+                    }
+
+                })
+                .state('app2.tasklist', {
+                    url: '/task/:taskId',
+                    templateUrl: 'views/taskList.html',
+                    controller: 'TaskController',
+                    params: { taskId: null },
+                    ncyBreadcrumb: {
+                        label: 'Task'
+                    }
+
+                })
+                .state('app2.report', {
+                    url: '/report/:taskId',
+                    templateUrl: 'views/report.html',
+                    controller: 'ReportController',
+                    params: { taskId: null },
+                    ncyBreadcrumb: {
+                        label: 'Report'
+                    }
+
+                })
+                .state('app2.projectdetail', {
+                    url: '/projectdetail/:projectId',
+                    templateUrl: 'views/projectdetail.html',
+                    controller: 'ProjectDetailController',
+                    params: { projectId: null },
+                    ncyBreadcrumb: {
+                        label: 'Project Detail'
+                    }
+
+                })
+                .state('app2.taskModify', {
+                    url: '/taskModify/:taskId',
+                    templateUrl: 'views/taskmodify.html',
+                    controller: 'TaskModifyController',
+                    params: { taskId: null },
+                    ncyBreadcrumb: {
+                        label: 'Modify Task'
+                    }
+
+
+                })
+
+
+
+
+
+        }
+    ])
+    .run();