Repository: provectus/kafka-ui
Issue: Implement connectors sorting
Labels: type/enhancement
good first issue
scope/backend
scope/frontend
status/accepted
hacktoberfest
status/pending-frontend

1. Migrate table to new table component
2. Implement sorting
3. Related issue https://github.com/provectus/kafka-ui/issues/2325
The list is unsorted at all

<img width="299" alt="image" src="https://user-images.githubusercontent.com/1494347/171179908-5447271c-e17d-4921-abfe-3a7e4239756a.png">


Issue comments:
Implement sorting by: name, connect, type and status.
Sorting by Name, Connect, Type, Plugin, Status implemented.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/controller/KafkaConnectController.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/controller/KafkaConnectController.java
index 8011fe8e5fc..2813618abf9 100644
--- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/controller/KafkaConnectController.java
+++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/controller/KafkaConnectController.java
@@ -3,13 +3,16 @@
 import com.provectus.kafka.ui.api.KafkaConnectApi;
 import com.provectus.kafka.ui.model.ConnectDTO;
 import com.provectus.kafka.ui.model.ConnectorActionDTO;
+import com.provectus.kafka.ui.model.ConnectorColumnsToSortDTO;
 import com.provectus.kafka.ui.model.ConnectorDTO;
 import com.provectus.kafka.ui.model.ConnectorPluginConfigValidationResponseDTO;
 import com.provectus.kafka.ui.model.ConnectorPluginDTO;
 import com.provectus.kafka.ui.model.FullConnectorInfoDTO;
 import com.provectus.kafka.ui.model.NewConnectorDTO;
+import com.provectus.kafka.ui.model.SortOrderDTO;
 import com.provectus.kafka.ui.model.TaskDTO;
 import com.provectus.kafka.ui.service.KafkaConnectService;
+import java.util.Comparator;
 import java.util.Map;
 import javax.validation.Valid;
 import lombok.RequiredArgsConstructor;
@@ -68,10 +71,16 @@ public Mono<ResponseEntity<Void>> deleteConnector(String clusterName, String con
   public Mono<ResponseEntity<Flux<FullConnectorInfoDTO>>> getAllConnectors(
       String clusterName,
       String search,
+      ConnectorColumnsToSortDTO orderBy,
+      SortOrderDTO sortOrder,
       ServerWebExchange exchange
   ) {
+    var comparator = sortOrder == null || sortOrder.equals(SortOrderDTO.ASC)
+            ? getConnectorsComparator(orderBy)
+            : getConnectorsComparator(orderBy).reversed();
     return Mono.just(ResponseEntity.ok(
-        kafkaConnectService.getAllConnectors(getCluster(clusterName), search)));
+        kafkaConnectService.getAllConnectors(getCluster(clusterName), search).sort(comparator))
+    );
   }
 
   @Override
@@ -142,4 +151,22 @@ public Mono<ResponseEntity<Flux<ConnectorPluginDTO>>> getConnectorPlugins(
             getCluster(clusterName), connectName, pluginName, requestBody)
         .map(ResponseEntity::ok);
   }
+
+  private Comparator<FullConnectorInfoDTO> getConnectorsComparator(ConnectorColumnsToSortDTO orderBy) {
+    var defaultComparator = Comparator.comparing(FullConnectorInfoDTO::getName);
+    if (orderBy == null) {
+      return defaultComparator;
+    }
+    switch (orderBy) {
+      case CONNECT:
+        return Comparator.comparing(FullConnectorInfoDTO::getConnect);
+      case TYPE:
+        return Comparator.comparing(FullConnectorInfoDTO::getType);
+      case STATUS:
+        return Comparator.comparing(fullConnectorInfoDTO -> fullConnectorInfoDTO.getStatus().getState());
+      case NAME:
+      default:
+        return defaultComparator;
+    }
+  }
 }
diff --git a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
index af6c6c3e6ae..d07c24a61b1 100644
--- a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
+++ b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml
@@ -1267,6 +1267,16 @@ paths:
           required: false
           schema:
             type: string
+        - name: orderBy
+          in: query
+          required: false
+          schema:
+            $ref: '#/components/schemas/ConnectorColumnsToSort'
+        - name: sortOrder
+          in: query
+          required: false
+          schema:
+            $ref: '#/components/schemas/SortOrder'
       responses:
         200:
           description: OK
@@ -2009,6 +2019,14 @@ components:
         - REPLICATION_FACTOR
         - SIZE
 
+    ConnectorColumnsToSort:
+      type: string
+      enum:
+        - NAME
+        - CONNECT
+        - TYPE
+        - STATUS
+
     SortOrder:
       type: string
       enum:


Test patch: