Deleting services implemented (#145)

diff --git a/frontend/app/apiList/apiList.js b/frontend/app/apiList/apiList.js
index 2b0bf4e..7373c9d 100644
--- a/frontend/app/apiList/apiList.js
+++ b/frontend/app/apiList/apiList.js
@@ -43,6 +43,10 @@
             allServices: {
                 url: 'v4/default/govern/microservices',
                 method: 'GET'
+            },
+            deleteService: {
+                url: 'v4/default/registry/microservices/{{serviceId}}',
+                method: 'DELETE'
             }
         }
 //       v3 api's
@@ -70,6 +74,10 @@
 //			allServices: {
 //				url: 'registry/v3/govern/services?options=all',
 //				method: 'GET'
-//			}
+//			},
+//          deleteService: {
+//              url: 'registry/v3/microservices/{{serviceId}}',
+//              method: 'DELETE'
+//          }
 //		}
 	});
diff --git a/frontend/app/scripts/directives/tableDirective.js b/frontend/app/scripts/directives/tableDirective.js
index 54f4e98..1d814a7 100644
--- a/frontend/app/scripts/directives/tableDirective.js
+++ b/frontend/app/scripts/directives/tableDirective.js
@@ -22,6 +22,7 @@
                 data: '=data',
                 pagination: '=pagination',
                 refresh: '=refresh',
+                removes: '=removes',
                 dialogClose: '=dialogClose',
                 buttons: '=buttons',
                 enableSearch: '=search',
@@ -73,6 +74,10 @@
                 scope.close = function() {
                     $mdDialog.cancel();
                 };
+
+                scope.remove = function(serviceId, instances) {
+                    scope.removes(serviceId, instances)
+                };
             }
         };
     }]);
diff --git a/frontend/app/scripts/languages/locale-cz.js b/frontend/app/scripts/languages/locale-cz.js
index d657b5d..da597fd 100644
--- a/frontend/app/scripts/languages/locale-cz.js
+++ b/frontend/app/scripts/languages/locale-cz.js
@@ -75,6 +75,13 @@
 	"noSchemaAvailableToDownload": "服务中心不提供模式文件",
 	"download": "下载",
 	"downloadAll": "全部下载",
-	"alert": "Alert"
+	"alert": "警报",
+	"delete": "删除",
+	"warning": "警告",
+	"prompt": "提示",
+	"areYouSureToDelete": "你确定删除吗?",
+	"cannotDeleteServiceWhenInstanceIsAvailable": "实例可用时无法删除服务",
+	"serviceDeletedSuccessfully": "服务已成功删除",
+	"unableToDeleteService": "无法删除服务 再试一次"
 
 });
diff --git a/frontend/app/scripts/languages/locale-en.js b/frontend/app/scripts/languages/locale-en.js
index e3b8771..b6ff7e0 100644
--- a/frontend/app/scripts/languages/locale-en.js
+++ b/frontend/app/scripts/languages/locale-en.js
@@ -75,6 +75,13 @@
 	"noSchemaAvailableToDownload" :"Schema file is not available in service center",
 	"download": "Download",
     "downloadAll": "Download All",
-    "alert": "Alert"
+    "alert": "Alert",
+	"delete": "Delete",
+	"warning": "Warning",
+	"prompt": "Prompt",
+	"areYouSureToDelete": "Are you sure to delete ?",
+	"cannotDeleteServiceWhenInstanceIsAvailable": "Cannot delete service when instance is available",
+	"serviceDeletedSuccessfully": "Service Deleted Successfully",
+	"unableToDeleteService": "Unable to delete service..Try again"
 
 });
diff --git a/frontend/app/scripts/modules/serviceCenter/controllers/servicesListCtrl.js b/frontend/app/scripts/modules/serviceCenter/controllers/servicesListCtrl.js
index 3721b61..facfbf6 100644
--- a/frontend/app/scripts/modules/serviceCenter/controllers/servicesListCtrl.js
+++ b/frontend/app/scripts/modules/serviceCenter/controllers/servicesListCtrl.js
@@ -13,8 +13,8 @@
 //limitations under the License.
 'use strict';
 angular.module('serviceCenter.sc', [])
-	.controller('servicesListController', ['$scope', 'httpService', 'apiConstant', 'commonService', '$stateParams',
-		function($scope, httpService, apiConstant, commonService, $stateParams){
+	.controller('servicesListController', ['$scope', 'httpService', 'apiConstant', 'commonService', '$stateParams', '$mdDialog',
+		function($scope, httpService, apiConstant, commonService, $stateParams, $mdDialog){
 
 			$scope.appList = 'fetching';
 			$scope.serviceList = 'serviceList';
@@ -49,6 +49,37 @@
 				$scope.getAllServices();
 			};
 
+            var deleteService = function(response){
+            	if(response == "yes"){
+            		$(".loader").show();
+        			var url = apiConstant.api.deleteService.url;
+        			var api =  url.replace("{{serviceId}}", $scope.deleteServiceId);
+					var method = apiConstant.api.deleteService.method;
+					httpService.apiRequest(api, method, null, null, "nopopup").then(function(response){
+						if(response && response.status == 200){
+							$(".loader").hide();
+							$scope.refreshAppList();
+							commonService.oneBtnMsg("prompt", "serviceDeletedSuccessfully")
+						}else{
+							$(".loader").hide();
+							commonService.oneBtnMsg("error","unableToDeleteService")
+						}
+					},function(error){
+							$(".loader").hide();
+							commonService.oneBtnMsg("error","unableToDeleteService")
+					})
+            	}
+            };
+
+		  	$scope.removeService = function(serviceId, instances) {
+		  		$scope.deleteServiceId = serviceId;
+		  		if(instances == 0){
+		  			commonService.twoBtnMsg("warning", "areYouSureToDelete", deleteService);
+		  		}else {
+		  			commonService.oneBtnMsg("prompt", "cannotDeleteServiceWhenInstanceIsAvailable");
+		  		}
+            };
+
 			$scope.getAllServices = function() {
 				var filter = '';
 				if($stateParams.status) {
@@ -74,11 +105,15 @@
 									createdAt: commonService.timeFormat(service.timestamp),
 									instances: 0,
 									operation: '',
-									serviceId: service.serviceId
+									serviceId: service.serviceId,
+									disableBtn: false
 								};
 								httpService.apiRequest(instanceUrl, instanceMethod, null, headers, "nopopup").then(function(resp){
 									if(resp && resp.data && resp.data.instances){
 									   servicesList.instances = resp.data.instances.length;
+									   if(servicesList.instances > 0){
+									   		servicesList.disableBtn = true;
+									   }
 									}
 								});
 							
@@ -93,11 +128,15 @@
 									createdAt: commonService.timeFormat(service.timestamp),
 									instances: 0,
 									operation: '',
-									serviceId: service.serviceId
+									serviceId: service.serviceId,
+									disableBtn: false
 								};
 								httpService.apiRequest(instanceUrl, instanceMethod, null, headers, "nopopup").then(function(resp){
 									if(resp && resp.data && resp.data.instances){
 									   servicesList.instances = resp.data.instances.length;
+									   if(servicesList.instances > 0){
+									   		servicesList.disableBtn = true;
+									   }
 									}
 								});
 							
diff --git a/frontend/app/scripts/modules/serviceCenter/views/serviceConsumer.html b/frontend/app/scripts/modules/serviceCenter/views/serviceConsumer.html
index 24795b2..c260e5c 100644
--- a/frontend/app/scripts/modules/serviceCenter/views/serviceConsumer.html
+++ b/frontend/app/scripts/modules/serviceCenter/views/serviceConsumer.html
@@ -14,7 +14,7 @@
 <table class="table table-bordered table-responsive margin20" >
 	<thead class="infoTableHead">
 		<th>{{ 'name' | translate }}</th>
-		<th>{{ 'application' | translate }}</th>
+		<th>{{ 'status' | translate }}</th>
 		<th>{{ 'version' | translate }}</th>
 		<th>{{ 'createdAt' | translate }}</th>
 		<th>{{ 'description' | translate }}</th>
diff --git a/frontend/app/scripts/modules/serviceCenter/views/serviceProvider.html b/frontend/app/scripts/modules/serviceCenter/views/serviceProvider.html
index ab5f249..4caabf4 100644
--- a/frontend/app/scripts/modules/serviceCenter/views/serviceProvider.html
+++ b/frontend/app/scripts/modules/serviceCenter/views/serviceProvider.html
@@ -14,7 +14,7 @@
 <table class="table table-bordered table-responsive margin20" >
 	<thead class="infoTableHead">
 		<th>{{ 'name' | translate }}</th>
-		<th>{{ 'application' | translate }}</th>
+		<th>{{ 'status' | translate }}</th>
 		<th>{{ 'version' | translate }}</th>
 		<th>{{ 'createdAt' | translate }}</th>
 		<th>{{ 'description' | translate }}</th>
diff --git a/frontend/app/scripts/modules/serviceCenter/views/servicesList.html b/frontend/app/scripts/modules/serviceCenter/views/servicesList.html
index 3475c14..cf5f429 100644
--- a/frontend/app/scripts/modules/serviceCenter/views/servicesList.html
+++ b/frontend/app/scripts/modules/serviceCenter/views/servicesList.html
@@ -12,4 +12,5 @@
 limitations under the License.
 -->
 
-<table-data headers='tableHeaders' heading='serviceList' pagination='rowsPerPage' data='services' search='true' refresh='refreshAppList' app-list='appList'></table-data>
+<table-data headers='tableHeaders' heading='serviceList' pagination='rowsPerPage' data='services' search='true' refresh='refreshAppList' 
+removes="removeService" app-list='appList'></table-data>
diff --git a/frontend/app/scripts/services/commonService.js b/frontend/app/scripts/services/commonService.js
index 16a2313..c983ec8 100644
--- a/frontend/app/scripts/services/commonService.js
+++ b/frontend/app/scripts/services/commonService.js
@@ -13,7 +13,7 @@
 //limitations under the License.
 'use strict';
 angular.module('serviceCenter')
-		.service('commonService', [function(){
+		.service('commonService', ['$mdDialog', function($mdDialog){
 
 			var timeFormat = function(timestamp) {
 				var date = new Date(timestamp * 1000);
@@ -22,8 +22,85 @@
 				return formatedDate;
 			};
 
+			var oneBtnMsg = function(title, message){
+				$mdDialog.show({
+                    parent: angular.element(document.body),
+                    template: `<md-dialog flex="30">
+                             <md-toolbar>
+                                 <div class="md-toolbar-tools">
+                                    <h2>{{ title | translate }}</h2>
+                                    <span flex></span>
+                                    <md-button class="md-icon-button" ng-click="cancel()">
+                                      <md-icon class="glyphicon glyphicon-remove" aria-label="Close dialog"></md-icon>
+                                    </md-button>
+                                  </div>
+                             </md-toolbar>
+                             <md-dialog-content>
+                                <h3 class="text-center" style="margin-top:15px;">{{ message | translate }}</h3>
+                             </md-dialog-content>
+                             <md-dialog-actions layout="row">
+                                <span flex></span>
+                                <md-button ng-click="cancel()">
+                                 {{ "close" | translate }}
+                                </md-button>
+                              </md-dialog-actions>
+                            </md-dialog>`,
+                    skipHide : true,
+                    controller: function($scope, $mdDialog) {
+                        $scope.message = message;
+                        $scope.title = title;
+                        $scope.cancel = function() {
+                            $mdDialog.hide();
+                        };
+                    }
+                });
+			};
+
+			var twoBtnMsg = function(title, message, callback){
+				$mdDialog.show({
+                    parent: angular.element(document.body),
+                    template: `<md-dialog flex="30">
+                             <md-toolbar>
+                                 <div class="md-toolbar-tools">
+                                    <h2>{{ title | translate }}</h2>
+                                    <span flex></span>
+                                    <md-button class="md-icon-button" ng-click="cancel()">
+                                      <md-icon class="glyphicon glyphicon-remove" aria-label="Close dialog"></md-icon>
+                                    </md-button>
+                                  </div>
+                             </md-toolbar>
+                             <md-dialog-content>
+                                <h3 class="text-center" style="margin-top:15px;">{{ message | translate }}</h3>
+                             </md-dialog-content>
+                             <md-dialog-actions layout="row">
+                                <span flex></span>
+                                <md-button ng-click="yes()">
+                                 {{ "yes" | translate }}
+                                </md-button>
+                                <md-button ng-click="no()">
+                                 {{ "no" | translate }}
+                                </md-button>
+                              </md-dialog-actions>
+                            </md-dialog>`,
+                    skipHide : true,
+                    controller: function($scope, $mdDialog) {
+                        $scope.message = message;
+                        $scope.title = title;
+                        $scope.yes = function() {
+                            $mdDialog.hide();
+                            callback("yes");
+                        };
+                         $scope.no = function() {
+                            $mdDialog.hide();
+                        };
+                    }
+                });
+			};
+
 			return {
-				timeFormat: timeFormat
+				timeFormat: timeFormat,
+				oneBtnMsg: oneBtnMsg,
+				twoBtnMsg: twoBtnMsg
 			};
 
 }]);
diff --git a/frontend/app/scripts/views/tableData.html b/frontend/app/scripts/views/tableData.html
index 1bab5f0..89cdd99 100644
--- a/frontend/app/scripts/views/tableData.html
+++ b/frontend/app/scripts/views/tableData.html
@@ -59,14 +59,16 @@
                                 <div ng-if="value == 'outofservice'" class="serviceStatus outofservice">{{value}}</div>
                             </span>
                             <span ng-if="key == 'operation'">
-                                <span class="glyphicon glyphicon-trash"></span>
+                                <md-button class="md-icon-button" ng-disabled="appData.instances != 0" ng-click="remove(appData.serviceId, appData.instances)" aria-label="{{ 'delete' | translate }}" title="{{ 'delete' | translate }}">
+                                    <span class="glyphicon glyphicon-trash"></span>
+                                </md-button>
                             </span>
                             <span ng-if="key == 'address'">
                                 <span ng-repeat="endpoints in value track by $index">
                                     <li>{{endpoints}}</li>
                                 </span>
                             </span>
-                            <span ng-if="key != 'serviceId' && key != 'serviceName' && key != 'address' && key != 'operation' && key !='status'">
+                            <span ng-if="key != 'serviceId' && key != 'serviceName' && key != 'disableBtn' && key != 'address' && key != 'operation' && key !='status'">
                                 {{value}}
                             </span>
                         </td>
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index ae62815..3dc13e6 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -39,8 +39,6 @@
     display: none; }
   body .no-margin {
     margin: 0px !important; }
-  body .glyphicon-trash:hover {
-    cursor: pointer; }
   body .pagination-class .label {
     color: rgba(0, 0, 0, 0.54);
     font-size: 12px;