sort by managed policy feature (#950)

* sort by managed policy feature

Signed-off-by: Mansi Shinde <[email protected]>

* add customSort function and remove comment

Signed-off-by: Mansi Shinde <[email protected]>

* update managed by policy sorting logic

Signed-off-by: Mansi Shinde <[email protected]>

---------

Signed-off-by: Mansi Shinde <[email protected]>

Author: MansiShinde

public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx

@@ -103,7 +103,7 @@ export default function BackingIndices(props: SubDetailProps) {
           {
             field: "managed",
             name: "Managed by policy",
-            sortable: false,
+            sortable: true,
             truncateText: true,
             textOnly: true,
             render: renderNumber,

public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap

@@ -349,21 +349,29 @@ exports[`<Indices /> spec renders the component 1`] = `
                 </button>
               </th>
               <th
+                aria-live="polite"
+                aria-sort="none"
                 class="euiTableHeaderCell"
                 data-test-subj="tableHeaderCell_managed_2"
                 role="columnheader"
                 scope="col"
               >
-                <span
-                  class="euiTableCellContent"
+                <button
+                  class="euiTableHeaderButton"
+                  data-test-subj="tableHeaderSortButton"
+                  type="button"
                 >
                   <span
-                    class="euiTableCellContent__text"
-                    title="Managed by policy"
+                    class="euiTableCellContent"
                   >
-                    Managed by policy
+                    <span
+                      class="euiTableCellContent__text"
+                      title="Managed by policy"
+                    >
+                      Managed by policy
+                    </span>
                   </span>
-                </span>
+                </button>
               </th>
               <th
                 aria-live="polite"

public/pages/Indices/utils/constants.tsx

@@ -78,7 +78,7 @@ const getColumns = (props: IColumnOptions): EuiTableFieldDataColumnType<ManagedC
     {
       field: "managed",
       name: "Managed by policy",
-      sortable: false,
+      sortable: true,
       truncateText: true,
       textOnly: true,
       render: renderNumber,

server/services/IndexService.ts

@@ -66,14 +66,17 @@ export default class IndexService {
       const params: {
         index: string;
         format: string;
-        s: string;
+        s?: string;
         expand_wildcards?: string;
       } = {
         index: getSearchString(terms, indices, dataStreams),
         format: "json",
-        s: `${sortField}:${sortDirection}`,
       };
 
+      if (sortField !== "managed" && sortField !== "data_stream") {
+        params.s = `${sortField}:${sortDirection}`;
+      }
+
       if (expandWildcards) {
         params.expand_wildcards = expandWildcards;
       }
@@ -142,22 +145,27 @@ export default class IndexService {
         }
       });
 
-      if (sortField === "status") {
-        // add new more status to status field so we need to sort
-        indicesResponse.sort((a, b) => {
+      function customSort(array, key, sortDirection) {
+        return array.sort((a, b) => {
           let flag;
-          const aStatus = a.extraStatus as string;
-          const bStatus = b.extraStatus as string;
+          const aValue = a[key] as string;
+          const bValue = b[key] as string;
+
           if (sortDirection === "asc") {
-            flag = aStatus < bStatus;
+            flag = aValue < bValue;
           } else {
-            flag = aStatus > bStatus;
+            flag = aValue > bValue;
           }
 
           return flag ? -1 : 1;
         });
       }
 
+      if (sortField === "status") {
+        // add new more status to status field so we need to sort
+        customSort(indicesResponse, "extraStatus", sortDirection);
+      }
+
       // Filtering out indices that belong to a data stream. This must be done before pagination.
       const filteredIndices = showDataStreams ? indicesResponse : indicesResponse.filter((index) => index.data_stream === null);
 
@@ -169,17 +177,19 @@ export default class IndexService {
 
       const managedStatus = await this._getManagedStatus(request, indexNames);
 
+      const allIndices = paginatedIndices.map((catIndex: CatIndex) => ({
+        ...catIndex,
+        managed: managedStatus[catIndex.index] ? "Yes" : "No",
+        managedPolicy: managedStatus[catIndex.index],
+      }));
+
       // NOTE: Cannot use response.ok due to typescript type checking
       return response.custom({
         statusCode: 200,
         body: {
           ok: true,
           response: {
-            indices: paginatedIndices.map((catIndex: CatIndex) => ({
-              ...catIndex,
-              managed: managedStatus[catIndex.index] ? "Yes" : "No",
-              managedPolicy: managedStatus[catIndex.index],
-            })),
+            indices: sortField === "managed" ? customSort(allIndices, "managed", sortDirection) : allIndices,
             totalIndices: filteredIndices.length,
           },
         },