From f419eba33d8c9799ab2192e3bb83eb4aae37f217 Mon Sep 17 00:00:00 2001
From: kohinoor98 <kohinoorchatterjee1998@gmail.com>
Date: Thu, 16 Nov 2023 02:26:05 -0800
Subject: [PATCH 1/4] increased width for indices index column

Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com>
---
 public/pages/Indices/utils/constants.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/pages/Indices/utils/constants.tsx b/public/pages/Indices/utils/constants.tsx
index a529f712a..543cc0384 100644
--- a/public/pages/Indices/utils/constants.tsx
+++ b/public/pages/Indices/utils/constants.tsx
@@ -45,7 +45,7 @@ const getColumns = (props: IColumnOptions): EuiTableFieldDataColumnType<ManagedC
       sortable: true,
       truncateText: false,
       textOnly: true,
-      width: "250px",
+      width: "320px",
       render: (index: string) => {
         return <IndexDetail {...props} index={index} />;
       },

From b262a018de2ba4ee65c60287b0b35ae17f099dd5 Mon Sep 17 00:00:00 2001
From: kohinoor98 <kohinoorchatterjee1998@gmail.com>
Date: Thu, 16 Nov 2023 02:38:23 -0800
Subject: [PATCH 2/4] changing page size options for indices page

Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com>
---
 public/pages/Indices/containers/Indices/Indices.tsx | 4 ++--
 public/pages/Indices/utils/constants.tsx            | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 2d882693e..94d269a66 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -24,7 +24,7 @@ import {
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import IndexControls from "../../components/IndexControls";
 import IndexEmptyPrompt from "../../components/IndexEmptyPrompt";
-import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS, indicesColumns } from "../../utils/constants";
+import { DEFAULT_PAGE_SIZE_OPTIONS_INDICES, DEFAULT_QUERY_PARAMS, indicesColumns } from "../../utils/constants";
 import IndexService from "../../../../services/IndexService";
 import CommonService from "../../../../services/CommonService";
 import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
@@ -214,7 +214,7 @@ export default class Indices extends Component<IndicesProps, IndicesState> {
     const pagination: Pagination = {
       pageIndex: page,
       pageSize: size,
-      pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
+      pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS_INDICES,
       totalItemCount: totalIndices,
     };
 
diff --git a/public/pages/Indices/utils/constants.tsx b/public/pages/Indices/utils/constants.tsx
index 543cc0384..ac7e98d67 100644
--- a/public/pages/Indices/utils/constants.tsx
+++ b/public/pages/Indices/utils/constants.tsx
@@ -14,6 +14,7 @@ const renderNumber = (value) => {
 };
 
 export const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
+export const DEFAULT_PAGE_SIZE_OPTIONS_INDICES = [10, 20, 50, 100, 500];
 
 export const DEFAULT_QUERY_PARAMS = {
   from: 0,

From e84dd3f31aa2e6bed55807f89884edfa455fe264 Mon Sep 17 00:00:00 2001
From: kohinoor98 <kohinoorchatterjee1998@gmail.com>
Date: Thu, 16 Nov 2023 02:52:23 -0800
Subject: [PATCH 3/4] snapshot changes

Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com>
---
 .../containers/Indices/__snapshots__/Indices.test.tsx.snap    | 2 +-
 .../__snapshots__/AssociatedComponentsModal.test.tsx.snap     | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
index 493fc52b4..6960e513f 100644
--- a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
+++ b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
@@ -303,7 +303,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 data-test-subj="tableHeaderCell_index_0"
                 role="columnheader"
                 scope="col"
-                style="width: 250px;"
+                style="width: 320px;"
               >
                 <button
                   class="euiTableHeaderButton euiTableHeaderButton-isSorted"
diff --git a/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap b/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap
index c5401295c..2c7cfd9ab 100644
--- a/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap
+++ b/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap
@@ -82,9 +82,7 @@ HTMLCollection [
                   >
                     <caption
                       class="euiScreenReaderOnly euiTableCaption"
-                    >
-                      This table contains 1 rows out of 1 rows; Page 1 of 1.
-                    </caption>
+                    />
                     <thead>
                       <tr>
                         <th

From 65a68ab276ea20aa7cb9b3d85f2ec6a2217cbcb4 Mon Sep 17 00:00:00 2001
From: kohinoor98 <kohinoorchatterjee1998@gmail.com>
Date: Sat, 6 Jan 2024 14:57:52 -0800
Subject: [PATCH 4/4] migrating to DataGrid

Signed-off-by: kohinoor98 <kohinoorchatterjee1998@gmail.com>
---
 package.json                                  |   5 +-
 public/index.ts                               |   1 +
 .../Indices/containers/Indices/Indices.tsx    | 111 ++++++++++---
 public/pages/Indices/utils/constants.tsx      | 146 +++++++-----------
 4 files changed, 145 insertions(+), 118 deletions(-)

diff --git a/package.json b/package.json
index 7c079c666..94e53eada 100644
--- a/package.json
+++ b/package.json
@@ -72,5 +72,8 @@
   },
   "engines": {
     "yarn": "^1.21.1"
+  },
+  "dependencies": {
+    "@opensearch-project/oui": "^1.4.0"
   }
-}
\ No newline at end of file
+}
diff --git a/public/index.ts b/public/index.ts
index 058e4d57b..2167bfb7d 100644
--- a/public/index.ts
+++ b/public/index.ts
@@ -6,6 +6,7 @@
 import { PluginInitializerContext } from "opensearch-dashboards/public";
 import { IndexManagementPlugin } from "./plugin";
 import { Action, UIAction } from "../models/interfaces";
+import "@opensearch-project/oui/dist/oui_theme_light.css";
 
 // export for other plugins to register action
 export { Action, UIAction } from "../models/interfaces";
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index a2877d207..091672e26 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -8,11 +8,9 @@ import _ from "lodash";
 import { RouteComponentProps } from "react-router-dom";
 import queryString from "query-string";
 import {
-  EuiBasicTable,
   EuiHorizontalRule,
   // @ts-ignore
   Criteria,
-  EuiTableSortingType,
   Direction,
   // @ts-ignore
   Pagination,
@@ -20,11 +18,16 @@ import {
   ArgsWithError,
   ArgsWithQuery,
   Query,
+  EuiHealth,
+  EuiLink,
 } from "@elastic/eui";
+
+import { OuiDataGrid, OuiDataGridPaginationProps, OuiDataGridSorting, OuiText, OuiTitle } from "@opensearch-project/oui";
+
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import IndexControls from "../../components/IndexControls";
 import IndexEmptyPrompt from "../../components/IndexEmptyPrompt";
-import { DEFAULT_PAGE_SIZE_OPTIONS_INDICES, DEFAULT_QUERY_PARAMS, indicesColumns } from "../../utils/constants";
+import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS, HEALTH_TO_COLOR, indicesColumns, renderNumber } from "../../utils/constants";
 import IndexService from "../../../../services/IndexService";
 import CommonService from "../../../../services/CommonService";
 import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
@@ -37,6 +40,7 @@ import { SECURITY_EXCEPTION_PREFIX } from "../../../../../server/utils/constants
 import IndicesActions from "../IndicesActions";
 import { destroyListener, EVENT_MAP, listenEvent } from "../../../../JobHandler";
 import "./index.scss";
+import IndexDetail from "../../../IndexDetail/containers/IndexDetail";
 
 interface IndicesProps extends RouteComponentProps {
   indexService: IndexService;
@@ -60,6 +64,7 @@ interface IndicesState {
 
 export default class Indices extends Component<IndicesProps, IndicesState> {
   static contextType = CoreServicesContext;
+
   constructor(props: IndicesProps) {
     super(props);
     const { from, size, search, sortField, sortDirection, showDataStreams } = getURLQueryParams(this.props.location);
@@ -194,6 +199,16 @@ export default class Indices extends Component<IndicesProps, IndicesState> {
     this.setState({ search: DEFAULT_QUERY_PARAMS.search, query: Query.parse(DEFAULT_QUERY_PARAMS.search) });
   };
 
+  onSort = (sortingColumns: string | any[]) => {
+    const sort = sortingColumns.length > 0 ? sortingColumns[0] : undefined;
+    if (sort) {
+      this.setState({
+        sortField: sort.id,
+        sortDirection: sort.direction,
+      });
+    }
+  };
+
   render() {
     const {
       totalIndices,
@@ -211,25 +226,79 @@ export default class Indices extends Component<IndicesProps, IndicesState> {
     const filterIsApplied = !!search;
     const page = Math.floor(from / size);
 
-    const pagination: Pagination = {
+    const pagination: OuiDataGridPaginationProps = {
       pageIndex: page,
       pageSize: size,
-      pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS_INDICES,
-      totalItemCount: totalIndices,
+      pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
+      onChangeItemsPerPage: (newSize) => this.setState({ size: newSize }),
+      onChangePage: (newPage) => this.setState({ from: newPage * size }),
     };
 
-    const sorting: EuiTableSortingType<ManagedCatIndex> = {
-      sort: {
-        direction: sortDirection,
-        field: sortField,
-      },
+    const sorting: OuiDataGridSorting = {
+      onSort: this.onSort,
+      columns: this.state.sortField ? [{ id: this.state.sortField, direction: this.state.sortDirection }] : [],
     };
 
     const selection: EuiTableSelectionType<ManagedCatIndex> = {
       onSelectionChange: this.onSelectionChange,
     };
 
-    const { history } = this.props;
+    const renderCellValue = ({ rowIndex, columnId }) => {
+      const rowData = this.state.indices[rowIndex];
+
+      console.log(rowData);
+
+      switch (columnId) {
+        case "index":
+          return <IndexDetail {...this.props} index={rowData.index} />;
+
+        case "health":
+          const color = rowData.health ? HEALTH_TO_COLOR[rowData.health] : "subdued";
+          return (
+            <EuiHealth color={color} className="indices-health">
+              {rowData.health || rowData.status}
+            </EuiHealth>
+          );
+
+        case "data_stream":
+          return rowData.data_stream ? (
+            <EuiLink href={`#${ROUTES.CREATE_DATA_STREAM}/${rowData.data_stream}`}>{rowData.data_stream}</EuiLink>
+          ) : (
+            "-"
+          );
+
+        case "managed":
+          return renderNumber(rowData.managed);
+
+        case "status":
+          return <span className="camel-first-letter">{rowData.extraStatus || rowData.status}</span>;
+
+        case "store.size":
+          return renderNumber(rowData["store.size"]);
+
+        case "pri.store.size":
+          return renderNumber(rowData["pri.store.size"]);
+
+        case "docs.count":
+          return <span title={rowData["docs.count"].toString()}>{rowData["docs.count"] || "-"}</span>;
+
+        case "docs.deleted":
+          return <span title={rowData["docs.deleted"].toString()}>{rowData["docs.deleted"] || "-"}</span>;
+
+        case "pri":
+          return rowData.pri.toString();
+
+        case "rep":
+          return rowData.rep.toString();
+
+        default:
+          return rowData[columnId] ?? "-";
+      }
+    };
+
+    const columns = indicesColumns(isDataStreamColumnVisible, { history: this.props.history });
+
+    const gridLabelId = "tableIndexMangementPlugin";
 
     return (
       <ContentPanel
@@ -283,18 +352,14 @@ export default class Indices extends Component<IndicesProps, IndicesState> {
 
         <EuiHorizontalRule margin="xs" />
 
-        <EuiBasicTable
-          columns={indicesColumns(isDataStreamColumnVisible, {
-            history,
-          })}
-          loading={this.state.loadingIndices}
-          isSelectable={true}
-          itemId="index"
-          items={indices}
-          noItemsMessage={<IndexEmptyPrompt filterIsApplied={filterIsApplied} loading={loadingIndices} resetFilters={this.resetFilters} />}
-          onChange={this.onTableChange}
+        <OuiDataGrid
+          aria-labelledby={gridLabelId}
+          columns={columns}
+          columnVisibility={{ visibleColumns: columns.map((column) => column.id), setVisibleColumns: () => {} }}
+          rowCount={totalIndices}
+          inMemory={{ level: "sorting" }}
+          renderCellValue={renderCellValue}
           pagination={pagination}
-          selection={selection}
           sorting={sorting}
         />
       </ContentPanel>
diff --git a/public/pages/Indices/utils/constants.tsx b/public/pages/Indices/utils/constants.tsx
index ac7e98d67..44b11b64e 100644
--- a/public/pages/Indices/utils/constants.tsx
+++ b/public/pages/Indices/utils/constants.tsx
@@ -3,18 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from "react";
-import { EuiHealth, EuiLink, EuiTableFieldDataColumnType } from "@elastic/eui";
+import { OuiDataGridColumn } from "@opensearch-project/oui";
 import IndexDetail, { IndexDetailModalProps } from "../containers/IndexDetail";
 import { ManagedCatIndex } from "../../../../server/models/interfaces";
 import { ROUTES, SortDirection } from "../../../utils/constants";
 
-const renderNumber = (value) => {
+export const renderNumber = (value) => {
   return value || "-";
 };
 
 export const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
-export const DEFAULT_PAGE_SIZE_OPTIONS_INDICES = [10, 20, 50, 100, 500];
 
 export const DEFAULT_QUERY_PARAMS = {
   from: 0,
@@ -38,122 +36,82 @@ export const HEALTH_TO_COLOR: {
 
 interface IColumnOptions extends Omit<IndexDetailModalProps, "index"> {}
 
-const getColumns = (props: IColumnOptions): EuiTableFieldDataColumnType<ManagedCatIndex>[] => {
+const getColumns = (props: IColumnOptions): OuiDataGridColumn[] => {
   return [
     {
-      field: "index",
-      name: "Index",
-      sortable: true,
-      truncateText: false,
-      textOnly: true,
-      width: "320px",
-      render: (index: string) => {
-        return <IndexDetail {...props} index={index} />;
-      },
+      id: "index",
+      displayAsText: "Index",
+      isSortable: true,
+      initialWidth: 320,
     },
     {
-      field: "health",
-      name: "Health",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      render: (health: string, item: ManagedCatIndex) => {
-        const color = health ? HEALTH_TO_COLOR[health] : "subdued";
-        const text = health || item.status;
-        return (
-          <EuiHealth color={color} className="indices-health">
-            {text}
-          </EuiHealth>
-        );
-      },
+      id: "health",
+      displayAsText: "Health",
+      isSortable: true,
     },
     {
-      field: "data_stream",
-      name: "Data stream",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      width: "120px",
-      render: (data_stream) => (data_stream ? <EuiLink href={`#${ROUTES.CREATE_DATA_STREAM}/${data_stream}`}>{data_stream}</EuiLink> : "-"),
+      id: "data_stream",
+      displayAsText: "Data stream",
+      isSortable: true,
+      initialWidth: 120,
     },
     {
-      field: "managed",
-      name: "Managed by policy",
-      sortable: false,
-      truncateText: true,
-      textOnly: true,
-      render: renderNumber,
+      id: "managed",
+      displayAsText: "Managed by policy",
+      isSortable: false,
     },
     {
-      field: "status",
-      name: "Status",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      render: (status: string, item: ManagedCatIndex) => {
-        return <span className="camel-first-letter">{item.extraStatus || status}</span>;
-      },
+      id: "status",
+      displayAsText: "Status",
+      isSortable: true,
     },
     {
-      field: "store.size",
-      name: "Total size",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      dataType: "number",
-      render: renderNumber,
+      id: "store.size",
+      displayAsText: "Total size",
+      isSortable: true,
+      schema: "numeric",
     },
     {
-      field: "pri.store.size",
-      name: "Size of primaries",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      dataType: "number",
-      render: renderNumber,
+      id: "pri.store.size",
+      displayAsText: "Size of primaries",
+      isSortable: true,
+      schema: "numeric",
     },
     {
-      field: "docs.count",
-      name: "Total documents",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      dataType: "number",
-      render: (count: string) => <span title={count}>{count || "-"}</span>,
+      id: "docs.count",
+      displayAsText: "Total documents",
+      isSortable: true,
+      schema: "numeric",
     },
     {
-      field: "docs.deleted",
-      name: "Deleted documents",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      dataType: "number",
-      render: (deleted: string) => <span title={deleted}>{deleted || "-"}</span>,
+      id: "docs.deleted",
+      displayAsText: "Deleted documents",
+      isSortable: true,
+      schema: "numeric",
     },
     {
-      field: "pri",
-      name: "Primaries",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      dataType: "number",
+      id: "pri",
+      displayAsText: "Primaries",
+      isSortable: true,
+      schema: "numeric",
     },
     {
-      field: "rep",
-      name: "Replicas",
-      sortable: true,
-      truncateText: true,
-      textOnly: true,
-      dataType: "number",
+      id: "rep",
+      displayAsText: "Replicas",
+      isSortable: true,
+      schema: "numeric",
     },
   ];
 };
 
-export const indicesColumns = (
-  isDataStreamColumnVisible: boolean,
-  options: IColumnOptions
-): EuiTableFieldDataColumnType<ManagedCatIndex>[] => {
-  return isDataStreamColumnVisible ? getColumns(options) : getColumns(options).filter((col) => col["field"] !== "data_stream");
+export const indicesColumns = (isDataStreamColumnVisible: boolean, options: IColumnOptions): OuiDataGridColumn[] => {
+  let columns = getColumns(options);
+
+  if (!isDataStreamColumnVisible) {
+    columns = columns.filter((column) => column.id !== "data_stream");
+  }
+
+  return columns;
 };
 
 export const DEFAULT_QUERY = JSON.stringify(