Added Server Side Pagination and sorting

DSL/Resql/services/get-common-services-list.sql

@@ -0,0 +1,41 @@
+WITH MaxServices AS (
+  SELECT MAX(id) AS maxId
+  FROM services
+  GROUP BY service_id
+)
+SELECT
+  id,
+  name,
+  description,
+  current_state AS state,
+  ruuter_type AS type,
+  is_common AS isCommon,
+  structure::json,
+  subquery.endpoints::json AS endpoints,
+  service_id,
+  CEIL(COUNT(*) OVER() / :page_size::DECIMAL) AS total_pages
+FROM services
+JOIN MaxServices ON id = maxId
+JOIN (
+  SELECT jsonb_agg(endpoint) AS endpoints
+  FROM (
+    SELECT DISTINCT endpoint
+    FROM (
+      SELECT endpoint::jsonb
+      FROM services, json_array_elements(endpoints) AS endpoint
+      WHERE (endpoint->>'isCommon')::boolean = true
+      UNION
+      SELECT endpoint::jsonb
+      FROM services, json_array_elements(endpoints) AS endpoint, MaxServices
+      WHERE id = maxId
+    ) AS combined_endpoints
+  ) subquery
+) subquery ON true
+WHERE NOT deleted AND is_common
+ORDER BY 
+   CASE WHEN :sorting = 'id asc' THEN id END ASC,
+   CASE WHEN :sorting = 'name asc' THEN name END ASC,
+   CASE WHEN :sorting = 'name desc' THEN name END DESC,
+   CASE WHEN :sorting = 'state asc' THEN current_state END ASC,
+   CASE WHEN :sorting = 'state desc' THEN current_state END DESC
+OFFSET ((GREATEST(:page, 1) - 1) * :page_size) LIMIT :page_size;

DSL/Resql/services/get-services-list.sql

@@ -12,7 +12,8 @@ SELECT
   is_common AS isCommon,
   structure::json,
   subquery.endpoints::json AS endpoints,
-  service_id
+  service_id,
+  CEIL(COUNT(*) OVER() / :page_size::DECIMAL) AS total_pages
 FROM services
 JOIN MaxServices ON id = maxId
 JOIN (
@@ -30,5 +31,11 @@ JOIN (
     ) AS combined_endpoints
   ) subquery
 ) subquery ON true
-WHERE NOT deleted
-ORDER BY id ASC;
+WHERE NOT deleted AND NOT is_common
+ORDER BY 
+   CASE WHEN :sorting = 'id asc' THEN id END ASC,
+   CASE WHEN :sorting = 'name asc' THEN name END ASC,
+   CASE WHEN :sorting = 'name desc' THEN name END DESC,
+   CASE WHEN :sorting = 'state asc' THEN current_state END ASC,
+   CASE WHEN :sorting = 'state desc' THEN current_state END DESC
+OFFSET ((GREATEST(:page, 1) - 1) * :page_size) LIMIT :page_size;

DSL/Resql/training/get-available-intents.sql

@@ -19,9 +19,12 @@ WITH connected_intents AS
                  service_name)
      AND status in ('pending',
                     'approved'))
-SELECT intent
+SELECT intent, CEIL(COUNT(*) OVER() / :page_size::DECIMAL) AS total_pages
 FROM intent
 WHERE intent NOT IN
     (SELECT intent
      FROM connected_intents)
-ORDER BY intent ASC
+ORDER BY 
+   CASE WHEN :sorting = 'intent asc' THEN intent END ASC,
+   CASE WHEN :sorting = 'intent desc' THEN intent END DESC
+OFFSET ((GREATEST(:page, 1) - 1) * :page_size) LIMIT :page_size;

DSL/Resql/training/get-requested-service-triggers.sql

@@ -2,9 +2,18 @@ SELECT intent,
        service,
        MAX(service_name) AS service_name,
        MAX(created) AS requested_at,
-       MAX(author_role) as author_role 
+       MAX(author_role) as author_role,
+       CEIL(COUNT(*) OVER() / :page_size::DECIMAL) AS total_pages
 FROM service_trigger
 GROUP BY intent,
-         service
+         service    
 HAVING MAX(status) = 'pending'
-AND MAX("author_role") != 'service_manager';
+AND MAX("author_role") != 'service_manager'
+ORDER BY 
+   CASE WHEN :sorting = 'intent asc' THEN intent END ASC,
+   CASE WHEN :sorting = 'intent desc' THEN intent END DESC,
+   CASE WHEN :sorting = 'serviceName asc' THEN MAX(service_name) END ASC,
+   CASE WHEN :sorting = 'serviceName desc' THEN MAX(service_name) END DESC,
+   CASE WHEN :sorting = 'requestedAt asc' THEN MAX(created) END ASC,
+   CASE WHEN :sorting = 'requestedAt desc' THEN MAX(created) END DESC
+OFFSET ((GREATEST(:page, 1) - 1) * :page_size) LIMIT :page_size;

DSL/Ruuter/GET/services/services-detailed/nok.yml

@@ -12,27 +12,27 @@ getFaults:
   args:
     url: "[#SERVICE_OPENSEARCH]/ruuterlog/_search"
     query:
-      size: 20
+      from: ${(incoming.params.page - 1) * incoming.params.page_size}
+      size: ${incoming.params.page_size}
       _source_excludes: "stackTrace,statusCode"
     body:
+      sort: [{ "timestamp": { "order": "${incoming.params.order}" } }]
       query:
         match_phrase_prefix:
           dslName:
-            query: "services/active"  
+            query: "services/active"
   result: getFaultsResult
 
 mapFaultsData:
   call: http.post
   args:
     url: "[#SERVICE_DMAPPER]/hbs/services/get-faults"
     headers:
-      type: 'json'
+      type: "json"
     body:
-      data: {
-        "hits": "${getFaultsResult.response.body.hits.hits}"
-      }
+      data: { "hits": "${getFaultsResult.response.body.hits.hits}" }
   result: faultsData
 
 returnSuccess:
   wrapper: false
-  return: ${faultsData.response.body}
+  return: ${[faultsData.response.body, getFaultsResult.response.body.hits.total.value]}

DSL/Ruuter/POST/common-services.yml

@@ -0,0 +1,37 @@
+declaration:
+  call: declare
+  version: 0.1
+  description: "Decription placeholder for 'COMMON SERVICES'"
+  method: get
+  accepts: json
+  returns: json
+  namespace: service
+
+get_services_list:
+  call: http.post
+  args:
+    url: "[#SERVICE_RESQL]/get-common-services-list"
+    body:
+      page: ${incoming.body.page}
+      page_size: ${incoming.body.page_size}
+      sorting: ${incoming.body.sorting}
+  result: services_res
+
+assign_services_result:
+  assign:
+    services: ${services_res.response.body}
+
+get_approved_triggers:
+  call: http.post
+  args:
+    url: "[#SERVICE_TRAINING_RESQL]/get-approved-tiggers"
+  result: triggers_res
+
+assign_training_result:
+  assign:
+    triggers: ${triggers_res.response.body}
+
+return_ok:
+  status: 200
+  return: ${[services, triggers]}
+  next: end

DSL/Ruuter/GET/services.yml → DSL/Ruuter/POST/services.yml

@@ -11,10 +11,14 @@ get_services_list:
   call: http.post
   args:
     url: "[#SERVICE_RESQL]/get-services-list"
+    body:
+      page: ${incoming.body.page}
+      page_size: ${incoming.body.page_size}
+      sorting: ${incoming.body.sorting}
   result: services_res
 
 assign_services_result:
-  assign: 
+  assign:
     services: ${services_res.response.body}
 
 get_approved_triggers:
@@ -24,7 +28,7 @@ get_approved_triggers:
   result: triggers_res
 
 assign_training_result:
-  assign: 
+  assign:
     triggers: ${triggers_res.response.body}
 
 return_ok:

DSL/Ruuter/GET/services/available-intents.yml → DSL/Ruuter/POST/services/available-intents.yml

@@ -11,6 +11,10 @@ get_available_intents:
   call: http.post
   args:
     url: "[#SERVICE_TRAINING_RESQL]/get-available-intents"
+    body:
+      page: ${incoming.body.page}
+      page_size: ${incoming.body.page_size}
+      sorting: ${incoming.body.sorting}
   result: res
 
 return_result:

DSL/Ruuter/GET/services/connection-requests.yml → DSL/Ruuter/POST/services/connection-requests.yml

@@ -11,6 +11,10 @@ get_connection_requests:
   call: http.post
   args:
     url: "[#SERVICE_TRAINING_RESQL]/get-requested-service-triggers"
+    body:
+      page: ${incoming.body.page}
+      page_size: ${incoming.body.page_size}
+      sorting: ${incoming.body.sorting}
   result: res
 
 return_result:

GUI/src/components/ApiEndpointCard/Endpoints/RequestVariables/index.tsx

@@ -18,6 +18,7 @@ import {
 } from "../../../../types/request-variables";
 import useServiceStore from "store/new-services.store";
 import { getColumns } from "./columns";
+import { PaginationState, SortingState } from "@tanstack/react-table";
 
 type RequestVariablesProps = {
   disableRawData?: boolean;
@@ -45,6 +46,12 @@ const RequestVariables: React.FC<RequestVariablesProps> = ({
   const [jsonError, setJsonError] = useState<string>();
   const [key, setKey] = useState<number>(0);
   const { setEndpoints, updateEndpointRawData, updateEndpointData } = useServiceStore();
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [sorting, setSorting] = useState<SortingState>([]);
 
   const constructRow = (id: number, data: EndpointVariableData, nestedLevel: number): RequestVariablesRowData => {
     const value = isLive ? data.value : data.testValue;
@@ -178,21 +185,21 @@ const RequestVariables: React.FC<RequestVariablesProps> = ({
 
   const deleteVariable = (rowData: RequestVariablesRowData) => {
     setEndpoints((prevEndpoints: EndpointData[]) => {
-      const newEndpoints : EndpointData[] = [];
+      const newEndpoints: EndpointData[] = [];
       for (const prevEndpoint of prevEndpoints) {
-        const defEndpoint = prevEndpoint.definedEndpoints.find(x => x.id === endpointData.id);
+        const defEndpoint = prevEndpoint.definedEndpoints.find((x) => x.id === endpointData.id);
         const endpoint = defEndpoint?.[requestTab.tab];
 
-        if(defEndpoint && endpoint) {
+        if (defEndpoint && endpoint) {
           if (rowData.endpointVariableId && endpoint.variables.map((v) => v.id).includes(rowData.endpointVariableId)) {
             endpoint.variables = endpoint.variables.filter((v) => v.id !== rowData.endpointVariableId);
           } else {
             endpoint.variables
-              .filter(variable => ["schema", "array"].includes(variable.type))
-              .forEach(variable => checkNestedVariables(rowData.endpointVariableId!, variable));
+              .filter((variable) => ["schema", "array"].includes(variable.type))
+              .forEach((variable) => checkNestedVariables(rowData.endpointVariableId!, variable));
           }
         }
-        
+
         newEndpoints.push(prevEndpoint);
       }
       return newEndpoints;
@@ -228,19 +235,23 @@ const RequestVariables: React.FC<RequestVariablesProps> = ({
       onParametersChange(parameters);
     }
   };
-
-  const columns = useMemo(() => getColumns({
-    rowsData,
-    updateParams,
-    requestTab,
-    deleteVariable,
-    setRowsData,
-    updateRowVariable,
-    requestValues,
-    isLive,
-    updateRowValue,
-    getTabsRowsData,
-  }), []);
+
+  const columns = useMemo(
+    () =>
+      getColumns({
+        rowsData,
+        updateParams,
+        requestTab,
+        deleteVariable,
+        setRowsData,
+        updateRowVariable,
+        requestValues,
+        isLive,
+        updateRowValue,
+        getTabsRowsData,
+      }),
+    []
+  );
 
   const buildRawDataView = (): JSX.Element => {
     return (
@@ -328,7 +339,15 @@ const RequestVariables: React.FC<RequestVariablesProps> = ({
             buildRawDataView()
           ) : (
             <>
-              <DataTable sortable data={rowsData[tab as EndpointTab]} columns={columns} />
+              <DataTable
+                sortable
+                data={rowsData[tab as EndpointTab]}
+                columns={columns}
+                setPagination={setPagination}
+                setSorting={setSorting}
+                pagination={pagination}
+                sorting={sorting}
+              />
               <hr style={{ margin: 0, borderTop: "1px solid #D2D3D8" }} />
             </>
           )}

GUI/src/components/DataTable/DataTable.scss

@@ -1,11 +1,25 @@
-@import 'src/styles/tools/spacing';
-@import 'src/styles/tools/color';
-@import 'src/styles/settings/variables/typography';
+@import "src/styles/tools/spacing";
+@import "src/styles/tools/color";
+@import "src/styles/settings/variables/typography";
 
 .data-table {
   width: 100%;
   color: get-color(black-coral-20);
   text-align: left;
+  margin-bottom: 0;
+  display: table;
+
+  &__scrollWrapper {
+    height: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+    display: block;
+  }
+
+  thead,
+  tbody {
+    width: 100%;
+  }
 
   th {
     padding: 12px 14.5px;
@@ -20,6 +34,11 @@
     padding: 12px 24px 12px 16px;
     border-bottom: 1px solid get-color(black-coral-2);
     vertical-align: middle;
+    max-width: fit-content;
+
+    p {
+      white-space: break-spaces;
+    }
 
     .entity {
       display: inline-flex;
@@ -121,7 +140,8 @@
       li {
         display: block;
 
-        a, span {
+        a,
+        span {
           display: flex;
           align-items: center;
           justify-content: center;
@@ -135,7 +155,8 @@
         }
 
         &.active {
-          a, span {
+          a,
+          span {
             color: get-color(white);
             background-color: get-color(sapphire-blue-10);
           }
@@ -160,10 +181,10 @@
       height: 30px;
       min-width: 50px;
       padding: 6px 10px;
-      border: 1px solid #8F91A8;
+      border: 1px solid #8f91a8;
       border-radius: 2px;
       background-color: get-color(white);
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4zMTMwNiA1LjgwODIyQzUuMTU2ODUgNS45NjQ0MyA0LjkwMzU4IDUuOTY0NDMgNC43NDczNyA1LjgwODIyTDAuMjgyNzMgMS4zNDM1OEMwLjEyNjUyIDEuMTg3MzcgMC4xMjY1MiAwLjkzNDEwMiAwLjI4MjczIDAuNzc3ODkzTDAuNzc3NzA0IDAuMjgyOTE4QzAuOTMzOTE0IDAuMTI2NzA4IDEuMTg3MTggMC4xMjY3MDggMS4zNDMzOSAwLjI4MjkxN0w1LjAzMDIyIDMuOTY5NzRMOC43MTcwNCAwLjI4MjkxN0M4Ljg3MzI1IDAuMTI2NzA4IDkuMTI2NTIgMC4xMjY3MDggOS4yODI3MyAwLjI4MjkxN0w5Ljc3NzcgMC43Nzc4OTJDOS45MzM5MSAwLjkzNDEwMiA5LjkzMzkxIDEuMTg3MzcgOS43Nzc3IDEuMzQzNThMNS4zMTMwNiA1LjgwODIyWiIgZmlsbD0iIzU1NTg2NyIvPgo8L3N2Zz4K');
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4zMTMwNiA1LjgwODIyQzUuMTU2ODUgNS45NjQ0MyA0LjkwMzU4IDUuOTY0NDMgNC43NDczNyA1LjgwODIyTDAuMjgyNzMgMS4zNDM1OEMwLjEyNjUyIDEuMTg3MzcgMC4xMjY1MiAwLjkzNDEwMiAwLjI4MjczIDAuNzc3ODkzTDAuNzc3NzA0IDAuMjgyOTE4QzAuOTMzOTE0IDAuMTI2NzA4IDEuMTg3MTggMC4xMjY3MDggMS4zNDMzOSAwLjI4MjkxN0w1LjAzMDIyIDMuOTY5NzRMOC43MTcwNCAwLjI4MjkxN0M4Ljg3MzI1IDAuMTI2NzA4IDkuMTI2NTIgMC4xMjY3MDggOS4yODI3MyAwLjI4MjkxN0w5Ljc3NzcgMC43Nzc4OTJDOS45MzM5MSAwLjkzNDEwMiA5LjkzMzkxIDEuMTg3MzcgOS43Nzc3IDEuMzQzNThMNS4zMTMwNiA1LjgwODIyWiIgZmlsbD0iIzU1NTg2NyIvPgo8L3N2Zz4K");
       background-repeat: no-repeat;
       background-position: top 11px right 10px;
     }