GDB-8576 Add ability to remove locations from cluster view dialogs (#…

…1072) ## What After typing invalid location from the Create cluster/Add node to cluster modal dialogs, it is stuck in the Remote locations list and can be only removed from the repositories section ## Why There is only button to add locations, not to remove or edit. If cluster is created the repository page does not show remote locations, and it is impossible to remove any from the workbench. ## How - added button to remove location from the add node/create cluster screens
Ontotext-AD · Oct 17, 2023 · 9396e79 · 9396e79
1 parent f83cd34
commit 9396e79
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 7 deletions.
diff --git a/src/css/clustermanagement.css b/src/css/clustermanagement.css
@@ -203,6 +203,10 @@ div.nodetooltip {
   overflow: auto;
 }
 
+.locations-list .location-item {
+  justify-content: space-between;
+}
+
 .location-item {
   padding: 2px;
   -webkit-user-select: none;

diff --git a/src/js/angular/clustermanagement/controllers.js b/src/js/angular/clustermanagement/controllers.js
@@ -218,6 +218,7 @@ function ClusterManagementCtrl($scope, $http, $q, toastr, $repositories, $uibMod
             resolve: {
                 data: function () {
                     return {
+                        deleteLocation: deleteLocation,
                         clusterModel: $scope.clusterModel
                     };
                 }
@@ -310,6 +311,15 @@ function ClusterManagementCtrl($scope, $http, $q, toastr, $repositories, $uibMod
             });
     }
 
+    //Delete location
+    const deleteLocation = function (location) {
+        return ModalService.openSimpleModal({
+            title: $translate.instant('location.confirm.detach'),
+            message: $translate.instant('location.confirm.detach.warning', {uri: location.endpoint}),
+            warning: true
+        }).result.then(() => $repositories.deleteLocation(location.endpoint));
+    };
+
     $scope.showAddNodeToClusterDialog = () => {
         const modalInstance = $uibModal.open({
             templateUrl: 'js/angular/clustermanagement/templates/modal/add-nodes-dialog.html',
@@ -318,6 +328,7 @@ function ClusterManagementCtrl($scope, $http, $q, toastr, $repositories, $uibMod
             resolve: {
                 data: function () {
                     return {
+                        deleteLocation: deleteLocation,
                         clusterModel: $scope.clusterModel,
                         clusterConfiguration: $scope.clusterConfiguration
                     };
@@ -466,6 +477,12 @@ function CreateClusterCtrl($scope, $uibModalInstance, $timeout, ClusterRestServi
 
     $scope.loader = false;
 
+    $scope.deleteLocation = function (event, location) {
+        event.preventDefault();
+        event.stopPropagation();
+        data.deleteLocation(location).then(() => $scope.locations = $scope.locations.filter((loc) => loc.endpoint !== location.endpoint));
+    };
+
     $scope.getAdvancedOptionsClass = getAdvancedOptionsClass;
 
     $scope.createCluster = function () {
@@ -793,6 +810,12 @@ function AddNodesDialogCtrl($scope, $uibModalInstance, data, $uibModal, RemoteLo
     $scope.locations = clusterModel.locations.filter((location) => !clusterConfiguration.nodes.includes(location.rpcAddress));
     $scope.locations.forEach((location) => location.isNew = true);
 
+    $scope.deleteLocation = function (event, location) {
+        event.preventDefault();
+        event.stopPropagation();
+        data.deleteLocation(location).then(() => $scope.locations = $scope.locations.filter((loc) => loc.endpoint !== location.endpoint));
+    };
+
     $scope.addNodeToList = function (location) {
         if (!location.rpcAddress) {
             return;

diff --git a/src/js/angular/clustermanagement/templates/modal/add-nodes-dialog.html b/src/js/angular/clustermanagement/templates/modal/add-nodes-dialog.html
@@ -21,13 +21,20 @@ <h4>{{'cluster_management.cluster_page.cluster_nodes_list' | translate}}</h4>
             </div>
             <div class="col-lg-6">
                 <h4>{{'cluster_management.cluster_page.remote_locations' | translate}}</h4>
-                <div class="pre-scrollable locations-list mb-1">
+                <div class="locations-list mb-1">
                     <div class="location-item hoverable" ng-repeat="location in locations | orderBy: ['endpoint']"
-                         ng-class="!location.rpcAddress ? 'list-group-item-danger' : ''"
-                         gdb-tooltip="{{location.rpcAddress ? '' : 'cluster_management.cluster_page.errors.no_rpc_address' | translate: {error: location.error} }}"
+                         ng-class="location.error ? 'list-group-item-danger' : ''"
+                         gdb-tooltip="{{location.error ? ('cluster_management.cluster_page.errors.no_rpc_address' | translate: {error: location.error}) : '' }}"
                          ng-click="addNodeToList(location)">
-                        <div class="logo-image"></div>
-                        {{location.endpoint}}
+                        <div class="location d-flex">
+                            <div class="logo-image"></div>
+                            {{location.endpoint}}
+                        </div>
+                        <button class="btn btn-link p-0 secondary"
+                                gdb-tooltip="{{'detach.location' | translate}}" tooltip-placement="top"
+                                ng-click="deleteLocation($event, location)">
+                            <em class="icon-close"></em>
+                        </button>
                     </div>
                 </div>
                 <button type="button" id="addLocation" ng-click="addLocation()" class="btn btn-primary"><span class="icon-plus"></span>{{'attach.remote.location' | translate}}</button>

diff --git a/src/js/angular/clustermanagement/templates/modal/cluster-create-dialog.html b/src/js/angular/clustermanagement/templates/modal/cluster-create-dialog.html
@@ -33,8 +33,15 @@ <h4>{{'cluster_management.cluster_page.remote_locations' | translate}}</h4>
                              ng-class="location.error ? 'list-group-item-danger' : ''"
                              gdb-tooltip="{{location.error ? ('cluster_management.cluster_page.errors.no_rpc_address' | translate: {error: location.error}) : '' }}"
                              ng-click="addNodeToList(location)">
-                            <div class="logo-image"></div>
-                            {{location.endpoint}}
+                            <div class="location d-flex">
+                                <div class="logo-image"></div>
+                                {{location.endpoint}}
+                            </div>
+                            <button class="btn btn-link p-0 secondary"
+                                    gdb-tooltip="{{'detach.location' | translate}}" tooltip-placement="top"
+                                    ng-click="deleteLocation($event, location)">
+                                <em class="icon-close"></em>
+                            </button>
                         </div>
                     </div>
                     <button type="button" id="addLocation" ng-click="addLocation()" class="btn btn-primary"><span class="icon-plus"></span>{{'attach.remote.location' | translate}}</button>