graphdb-workbench 10.0.0-M2-1 → 10.5.1

package/dist/js/angular/clustermanagement/templates/modal/add-nodes-dialog.html

@@ -0,0 +1,67 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()"></button>
+    <h3 class="modal-title">{{'cluster_management.add_nodes_dialog.title' | translate}}</h3>
+</div>
+<div class="modal-body">
+    <form name="form" id="addNodesForm">
+        <div class="row">
+            <div class="col-lg-6">
+                <h5>{{'cluster_management.cluster_page.cluster_nodes_list' | translate}}</h5>
+                <ul ng-if="clusterNodes && clusterNodes.length" class="list-group nodes-list">
+                    <li ng-repeat="node in clusterNodes" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+                        <div class="location-item">
+                            <div class="logo-image"></div>
+                            {{node.endpoint}}
+                        </div>
+                        <div ng-if="node.isLocal">
+                            {{'cluster_management.cluster_page.current_node' | translate}}
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="col-lg-6">
+                <h4>{{'cluster_management.cluster_page.remote_locations' | translate}}</h4>
+                <div class="locations-list mb-1">
+                    <div class="location-item hoverable" ng-repeat="location in locations | orderBy: ['endpoint']"
+                         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="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>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 mb-1 mt-1">
+                <h5>{{'cluster_management.add_nodes_dialog.nodes_to_add_label' | translate}}</h5>
+                <ul ng-if="nodes.length" class="list-group nodes-list">
+                    <li ng-repeat="node in nodes" class="list-group-item list-group-item-action list-group-item-node">
+                        <a ng-click="removeNodeFromList($index, node)" class="d-flex justify-content-between align-items-center"
+                           gdb-tooltip="{{'cluster_management.cluster_page.remove_node_btn_tooltip' | translate}}" tooltip-placement="top">
+                            <div class="location-item">
+                                <div class="logo-image"></div>
+                                {{node.endpoint}}
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+                <div ng-if="!nodes.length" class="at-least-one-error alert alert-warning mt-1">
+                    {{'cluster_management.cluster_page.select_from_locations_hint' | translate}}
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+    <button id="wb-add-nodes-to-cluster-submit" form="addNodesForm" class="btn btn-primary" ng-disabled="!nodes.length" ng-click="ok()" type="submit">{{'common.ok.btn' | translate}}</button>
+</div>

package/dist/js/angular/clustermanagement/templates/modal/cluster-create-dialog.html

@@ -0,0 +1,173 @@
+<div onto-loader-new ng-if="loader" class="create-cluster-loader" message="getLoaderMessage" size="75"></div>
+
+<div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()"></button>
+    <h3 class="modal-title">{{pageTitle}}</h3>
+</div>
+
+<div class="modal-body create-cluster-dialog">
+    <form novalidate id="clusterConfigurationForm" name="clusterConfigurationForm">
+        <div class="form-horizontal">
+            <div class="container mb-1">
+                <div class="col-lg-6 cluster-nodes">
+                    <h4>{{'cluster_management.cluster_page.cluster_nodes_list' | translate}}</h4>
+                    <ul ng-if="selectedLocations && selectedLocations.length" class="list-group nodes-list">
+                        <li ng-repeat="node in selectedLocations" class="list-group-item list-group-item-action" ng-class="{'list-group-item-node': !node.isLocal}">
+                            <a ng-click="removeNodeFromList($index, node)" class="d-flex justify-content-between align-items-center"
+                               gdb-tooltip="{{node.isLocal ? '' : 'cluster_management.cluster_page.remove_node_btn_tooltip' | translate}}" tooltip-placement="top">
+                                <div class="location-item">
+                                    <div class="logo-image"></div>
+                                    {{node.endpoint}}
+                                </div>
+                                <div ng-if="node.isLocal">
+                                    {{'cluster_management.cluster_page.current_node' | translate}}
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col-lg-6 remote-locations">
+                    <h4>{{'cluster_management.cluster_page.remote_locations' | translate}}</h4>
+                    <div class="locations-list mb-1">
+                        <div class="location-item hoverable" ng-repeat="location in locations | orderBy: ['endpoint']"
+                             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="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>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <div class="indented-div">
+                        <span class="padding-label wrapper-div"
+                              gdb-tooltip="{{'cluster_management.cluster_page.advanced_options_tooltip' | translate}}">
+                            <button type="button" class="text-btn" data-toggle="collapse" style="text-align: left" data-target="#advancedOptions">
+                                <i class="{{getAdvancedOptionsClass()}} advanced-options-toggle" aria-hidden="true"></i>
+                                {{'cluster_management.cluster_page.advanced_options' | translate}}
+                            </button>
+                        </span>
+                </div>
+
+                <div id="advancedOptions" class="collapse pb-1 pl-2">
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.electionMinTimeout.$invalid}">
+                            <label for="election-minimum-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.election_min_timeout' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_min_timeout_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.electionMinTimeout"
+                                       required id="election-minimum-timeout" min="0" pattern="[0-9]+" name="electionMinTimeout">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionMinTimeout.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionMinTimeout.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.electionRangeTimeout.$invalid}">
+                            <label for="election-range-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.election_range_timeout' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_range_timeout_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.electionRangeTimeout"
+                                       required id="election-range-timeout" min="0" pattern="[0-9]+" name="electionRangeTimeout">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionRangeTimeout.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionRangeTimeout.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.heartbeatInterval.$invalid}">
+                            <label for="heartbeat-interval" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.heartbeat_interval' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.heartbeat_interval_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.heartbeatInterval"
+                                       required id="heartbeat-interval" min="0" pattern="[0-9]+" name="heartbeatInterval">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.heartbeatInterval.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.heartbeatInterval.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.messageSizeKB.$invalid}">
+                            <label for="message-size" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.message_size_kb' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.message_size_kb_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.messageSizeKB"
+                                       required id="message-size" min="0" pattern="[0-9]+" name="messageSizeKB">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.messageSizeKB.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.messageSizeKB.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.verificationTimeout.$invalid}">
+                            <label for="verification-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.verification_timeout' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.verification_timeout_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.verificationTimeout"
+                                       required id="verification-timeout" min="0" pattern="[0-9]+" name="verificationTimeout">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.verificationTimeout.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.verificationTimeout.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.transactionLogMaximumSizeGB.$invalid}">
+                            <label for="verification-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.transactionLogMaximumSizeGB"
+                                       required id="transaction-log-maximum-size-gb" pattern="-?[1-9][0-9]*(\.[0-9]+)?"  name="transaction_log_maximum_size_gb">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.pattern">{{'cluster_management.cluster_page.errors.small_transaction_log_max_size' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="form-group">
+                <div ng-if="selectedLocations.length < 2" class="alert alert-warning mt-1 no-selected-nodes">
+                    {{'cluster_management.cluster_page.select_from_locations_hint' | translate}}
+                </div>
+                <div ng-repeat="error in errors" class="cluster-properties-error alert alert-danger mt-1">
+                    {{error}}
+                </div>
+                <div ng-if="preconditionErrors" class="precondition-errors alert alert-danger">
+                    <div class="row">
+                        <div class="col-xs-6">
+                            {{'cluster_management.cluster_page.errors.preconditions_failed.label' | translate}}
+                            <ul>
+                                <li>{{'cluster_management.cluster_page.errors.preconditions_failed.valid_license' | translate}}</li>
+                                <li>{{'cluster_management.cluster_page.errors.preconditions_failed.authentication_secret' | translate}}</li>
+                                <li>{{'cluster_management.cluster_page.errors.preconditions_failed.nodes_reachable' | translate}}</li>
+                                <li>{{'cluster_management.cluster_page.errors.preconditions_failed.no_cluster_configured' | translate}}</li>
+                            </ul>
+                        </div>
+                        <div class="col-xs-6">
+                            {{'cluster_management.cluster_page.errors.nodes_status_label' | translate}}
+                            <ul>
+                                <li ng-repeat="error in preconditionErrors">
+                                    {{error}}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary cancel-btn" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+    <button type="submit" ng-disabled="!isClusterConfigurationValid()" ng-click="ok()" form="clusterConfigurationForm"
+            class="btn btn-primary create-cluster-btn">{{'cluster_management.cluster_page.create_btn' | translate}}</button>
+</div>

package/dist/js/angular/clustermanagement/templates/modal/cluster-delete-dialog.html

@@ -1,27 +1,22 @@
-<!-- Start delete cluster modal -->
-
 <div class="modal-header">
   <button type="button" class="close" ng-click="cancel()"></button>
   <h3 class="modal-title">{{'cluster_management.delete_cluster_dialog.title' | translate}}</h3>
 </div>
-<form ng-submit="ok()" name="form">
-  <div class="modal-body">
+<div class="modal-body">
+  <form name="form" id="clusterDeleteForm">
     <p>{{'cluster_management.delete_cluster_dialog.content' | translate}}</p>
 
     <div class="form-group row">
       <div class="checkbox offset-md-3 offset-lg-2">
-        <label class="padding-label" tooltip="{{'cluster_management.delete_cluster_dialog.force_delete_tooltip' | translate}}">
+        <label class="padding-label" gdb-tooltip="{{'cluster_management.delete_cluster_dialog.force_delete_tooltip' | translate}}">
           <input id="forceDelete" type="checkbox" ng-model="forceDelete"/>
           {{'cluster_management.delete_cluster_dialog.force_delete_label' | translate}}
         </label>
       </div>
     </div>
-
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-secondary" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
-    <button id="wb-delete-cluster-submit" class="btn btn-primary" ng-click="ok()" type="submit">{{'common.ok.btn' | translate}}</button>
-  </div>
-</form>
-
-<!-- End delete cluster modal -->
+  </form>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+  <button id="wb-delete-cluster-submit" form="clusterDeleteForm" class="btn btn-primary" ng-click="ok()" type="submit">{{'common.ok.btn' | translate}}</button>
+</div>

package/dist/js/angular/clustermanagement/templates/modal/cluster-edit-dialog.html

@@ -0,0 +1,118 @@
+<div onto-loader-new ng-if="loader" class="create-cluster-loader" message="getLoaderMessage" size="75"></div>
+
+<div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()"></button>
+    <h3 class="modal-title">{{pageTitle}}</h3>
+</div>
+
+<div class="modal-body">
+    <form novalidate id="clusterConfigurationForm" name="clusterConfigurationForm">
+        <div class="form-horizontal">
+            <div class="form-group">
+                <div>
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.electionMinTimeout.$invalid}">
+                            <label for="election-minimum-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.election_min_timeout' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_min_timeout_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.electionMinTimeout"
+                                       required id="election-minimum-timeout" min="0" pattern="[0-9]+" name="electionMinTimeout">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionMinTimeout.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionMinTimeout.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.electionRangeTimeout.$invalid}">
+                            <label for="election-range-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.election_range_timeout' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_range_timeout_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.electionRangeTimeout"
+                                       required id="election-range-timeout" min="0" pattern="[0-9]+" name="electionRangeTimeout">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionRangeTimeout.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.electionRangeTimeout.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.heartbeatInterval.$invalid}">
+                            <label for="heartbeat-interval" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.heartbeat_interval' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.heartbeat_interval_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.heartbeatInterval"
+                                       required id="heartbeat-interval" min="0" pattern="[0-9]+" name="heartbeatInterval">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.heartbeatInterval.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.heartbeatInterval.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.messageSizeKB.$invalid}">
+                            <label for="message-size" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.message_size_kb' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.message_size_kb_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.messageSizeKB"
+                                       required id="message-size" min="0" pattern="[0-9]+" name="messageSizeKB">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.messageSizeKB.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.messageSizeKB.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.verificationTimeout.$invalid}">
+                            <label for="verification-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.verification_timeout' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.verification_timeout_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.verificationTimeout"
+                                       required id="verification-timeout" min="0" pattern="[0-9]+" name="verificationTimeout">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.verificationTimeout.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.verificationTimeout.$error.pattern">{{'cluster_management.cluster_page.errors.only_positive_integers' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="input-group" ng-class="{'has-danger': clusterConfigurationForm.transactionLogMaximumSizeGB.$invalid}">
+                            <label for="verification-timeout" class="col-xs-4 col-form-label">{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb' | translate}}*</label>
+                            <div class="col-xs-8" gdb-tooltip="{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb_tooltip' | translate}}">
+                                <input class="form-control" placeholder="{{'required.field' | translate}}" type="number" ng-model="clusterConfiguration.transactionLogMaximumSizeGB"
+                                       required id="transaction-log-max-size" pattern="-?[1-9][0-9]*(\.[0-9]+)?" name="transactionLogMaximumSizeGB">
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.required">{{'required.field' | translate}}</div>
+                                <div class="form-control-feedback" ng-show="clusterConfigurationForm.transactionLogMaximumSizeGB.$error.pattern">{{'cluster_management.cluster_page.errors.small_transaction_log_max_size' | translate}}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <div ng-repeat="error in errors" class="cluster-properties-error alert alert-danger mt-1">
+                    {{error}}
+                </div>
+                <div ng-if="preconditionErrors" class="precondition-errors alert alert-danger">
+                    <div class="row">
+                        <div class="col-xs-6">
+                            {{'cluster_management.cluster_page.errors.preconditions_failed.label' | translate}}
+                            <ul>
+                                <li>{{'cluster_management.cluster_page.errors.preconditions_failed.valid_license' | translate}}</li>
+                                <li>{{'cluster_management.cluster_page.errors.preconditions_failed.authentication_secret' | translate}}</li>
+                                <li>{{'cluster_management.cluster_page.errors.preconditions_failed.nodes_reachable' | translate}}</li>
+                            </ul>
+                        </div>
+                        <div class="col-xs-6">
+                            {{'cluster_management.cluster_page.errors.nodes_status_label' | translate}}
+                            <ul>
+                                <li ng-repeat="error in preconditionErrors">
+                                    {{error}}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+    <button type="submit" ng-click="ok()" ng-disabled="!isClusterConfigurationValid()" form="clusterConfigurationForm"
+            class="btn btn-primary create-connector-btn">{{'cluster_management.cluster_page.save_btn' | translate}}</button>
+</div>

package/dist/js/angular/clustermanagement/templates/modal/remove-nodes-dialog.html

@@ -0,0 +1,39 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()"></button>
+    <h3 class="modal-title">{{'cluster_management.remove_nodes_dialog.title' | translate}}</h3>
+</div>
+<div class="modal-body">
+    <form name="form" id="removeNodesForm">
+        <h5>{{'cluster_management.remove_nodes_dialog.content' | translate}}</h5>
+        <div class="row">
+            <div class="col-xs-12 mb-1 mt-1">
+                <h5>{{'cluster_management.cluster_page.cluster_nodes_list' | translate}}</h5>
+                <ul ng-if="clusterNodes.length" class="list-group nodes-list">
+                    <li ng-repeat="node in clusterNodes" ng-class="{'list-group-item-danger': node.shouldRemove}"
+                        class="list-group-item list-group-item-action list-group-item-node">
+                        <a ng-click="toggleNode($index, node)" class="d-flex justify-content-between align-items-center">
+                            <div class="location-item">
+                                <div class="logo-image"></div>
+                                {{node.endpoint}}
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+                <div class="row">
+                    <div class="col-xs-12">
+                        <div ng-if="leftNodesLessThanTwo" class="not-enough-nodes-error alert alert-danger mt-1">
+                            {{'cluster_management.cluster_page.errors.at_least_two_nodes' | translate}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+    <button id="wb-remove-nodes-from-cluster-submit" class="btn btn-primary"
+            ng-disabled="!nodesToRemoveCount || leftNodesLessThanTwo" form="removeNodesForm"
+            ng-click="ok()" type="submit">{{'common.ok.btn' | translate}}
+    </button>
+</div>

package/dist/js/angular/clustermanagement/templates/modal/replace-nodes-dialog.html

@@ -0,0 +1,86 @@
+<div onto-loader-new ng-if="loader" class="create-cluster-loader" message="getLoaderMessage" size="75"></div>
+
+<div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()"></button>
+    <h3 class="modal-title">{{'cluster_management.replace_nodes_dialog.title' | translate}}</h3>
+</div>
+
+<div class="modal-body replace-cluster-nodes-dialog">
+    <div class="row">
+        <div class="col-lg-6">
+            <h5>{{'cluster_management.replace_nodes_dialog.cluster_nodes_list' | translate}}</h5>
+            <ul ng-if="clusterNodes && clusterNodes.length" class="list-group nodes-list">
+                <li ng-repeat="node in clusterNodes"
+                    ng-class="{'list-group-item-danger': node.shouldReplace}"
+                    class="list-group-item list-group-item-action list-group-item-node">
+                    <a ng-click="toggleNode($index, node)" class="d-flex justify-content-between align-items-center">
+                        <div class="location-item">
+                            <div class="logo-image"></div>
+                            {{node.endpoint}}
+                        </div>
+                        <div ng-if="node.isLocal">
+                            {{'cluster_management.cluster_page.current_node' | translate}}
+                        </div>
+                    </a>
+                </li>
+            </ul>
+            <div class="row">
+                <div class="col-xs-12">
+                    <div ng-if="leftNodesMajority" class="not-enough-nodes-error alert alert-danger mt-1">
+                        {{'cluster_management.cluster_page.errors.cant_replace_majority_of_nodes' | translate}}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6 remote-locations">
+            <h4>{{'cluster_management.cluster_page.remote_locations' | translate}}</h4>
+            <div class="locations-list mb-1">
+                <div class="location-item hoverable" ng-repeat="location in locations | orderBy: ['endpoint']"
+                     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="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>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-12 mb-1 mt-1">
+            <h5>{{'cluster_management.replace_nodes_dialog.nodes_to_replace_label' | translate}}</h5>
+            <ul ng-if="replacementNodes.length" class="selected-remote-locations list-group nodes-list">
+                <li ng-repeat="node in replacementNodes" class="list-group-item list-group-item-action list-group-item-node">
+                    <a ng-click="removeNodeFromList($index, node)"
+                       class="d-flex justify-content-between align-items-center"
+                       gdb-tooltip="{{'cluster_management.cluster_page.remove_node_btn_tooltip' | translate}}"
+                       tooltip-placement="top">
+                        <div class="location-item">
+                            <div class="logo-image"></div>
+                            {{node.endpoint}}
+                        </div>
+                    </a>
+                </li>
+            </ul>
+            <div ng-if="!replacementNodes.length" class="at-least-one-error alert alert-warning mt-1">
+                {{'cluster_management.cluster_page.select_from_locations_hint' | translate}}
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+    <button id="wb-replace-nodes-in-cluster-submit" class="btn btn-primary" ng-disabled="!permitNodesReplace()" ng-click="ok()">
+        {{'common.ok.btn' | translate}}
+    </button>
+</div>

package/dist/js/angular/core/directives/autocomplete/templates/autocomplete.html

@@ -0,0 +1,18 @@
+<link href="css/autocomplete-select.css?v=10.5.1" rel="stylesheet"/>
+
+<div class="autocomplete-select-wrapper">
+    <div class="autocomplete-select">
+        <input type="text" ng-model="searchInput" ng-change="onChange()" ng-keydown="onKeyDown($event)"
+               ng-blur="onBlur()"
+               class="autocomplete-input" ng-class="styleClass" placeholder="{{placeholder}}">
+    </div>
+    <div class="autocomplete-results-wrapper card">
+        <div ng-repeat="autoCompleteUriResult in autoCompleteUriResults track by $index"
+             ng-click="selectResource(autoCompleteUriResult)"
+             ng-mousemove="setActiveItemIndex($index)"
+             ng-class="{active: activeSearchElm === $index, selected: selectedElementIndex === $index}"
+             class="result-item">
+            <p ng-bind-html="getResultItemHtml(autoCompleteUriResult)"></p>
+        </div>
+    </div>
+</div>

package/dist/js/angular/core/directives/languageselector/templates/languageSelector.html

@@ -1,18 +1,20 @@
 <div class="btn-group" role="group" ng-if="languages.length > 0">
     <button id="languageGroupDrop" type="button"
-            class="btn btn-lg btn-secondary dropdown-toggle translate-button"
-            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            class="btn btn-secondary dropdown-toggle translate-button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+            tooltip-placement="left"
+            gdb-tooltip="{{ 'current.language.tooltip' | translate }}: {{selectedLang.name}}">
+        <span class="icon-translation icon-1-5x"></span>
         {{selectedLang.key}}
     </button>
     <ul class="dropdown-menu dropdown-menu-right pre-scrollable" aria-labelledby="languageGroupDrop">
         <li ng-repeat="language in languages"
-            ng-if="language.key !== selectedLang.key"
-            tooltip-trigger="mouseenter"
             tooltip-placement="left"
-            tooltip="{{'change.language.tooltip' | translate}} {{language.translation | translate}}">
-            <a class="dropdown-item" ng-click="changeLanguage(language)">
+            gdb-tooltip="{{ getLanguageTooltip(language) }}">
+            <a class="dropdown-item" id="lang-select-{{language.key}}" ng-if="!isLoadingLocation() && hasActiveLocation()" ng-click="changeLanguage(language)">
+                <i ng-style="{'visibility':language.key !== selectedLang.key ? 'hidden' : 'visible'}" class="icon-tick"></i>
                 <span class="multiline-text">
-                    <small ng-if="!isLoadingLocation() && hasActiveLocation()">{{language.translation | translate}}</small>
+                    {{language.key}} &middot; {{language.name}}
                 </span>
             </a>
         </li>