allow column to proper resize

Signed-off-by: Anan Z <ananzh@amazon.com>

src/plugins/data/common/search/search_source/types.ts

@@ -29,6 +29,7 @@
  */
 
 import { NameList } from 'elasticsearch';
+// import { ColumnWidths } from 'src/plugins/discover/public/application/components/data_grid/data_grid_table_columns';
 import { Filter, IndexPattern, Query } from '../..';
 import { SearchSource } from './search_source';
 
@@ -103,6 +104,7 @@ export interface SearchSourceFields {
   searchAfter?: OpenSearchQuerySearchAfter;
   timeout?: string;
   terminate_after?: number;
+  // columnWidths?: ColumnWidths;
 }
 
 export interface SearchSourceOptions {

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -6,7 +6,7 @@
 import './_data_grid_table.scss';
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
+import { EuiDataGrid, EuiDataGridSorting, EuiPanel, EuiDataGridProps } from '@elastic/eui';
 import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
@@ -26,9 +26,11 @@ import { LegacyDiscoverTable } from '../default_discover_table/default_discover_
 import { getNewDiscoverSetting } from '../utils/local_storage';
 import { SortDirection, SortOrder } from '../../../saved_searches/types';
 import { useToolbarOptions } from './data_grid_toolbar';
+import { ColumnWidths } from './data_grid_table_columns';
 
 export interface DataGridTableProps {
   columns: string[];
+  columnWidths?: ColumnWidths;
   indexPattern: IndexPattern;
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
@@ -38,6 +40,7 @@ export interface DataGridTableProps {
   onSort: (s: SortOrder[]) => void;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
+  onColumnResize: any;
   sort: SortOrder[];
   displayTimeColumn: boolean;
   title?: string;
@@ -50,13 +53,15 @@ export interface DataGridTableProps {
 
 export const DataGridTable = ({
   columns,
+  columnWidths,
   indexPattern,
   onAddColumn,
   onFilter,
   onMoveColumn,
   onRemoveColumn,
   onSetColumns,
   onSort,
+  onColumnResize,
   sort,
   hits,
   rows,
@@ -123,9 +128,17 @@ export const DataGridTable = ({
         indexPattern,
         displayTimeColumn,
         includeSourceInColumns,
-        isContextView
+        isContextView,
+        columnWidths
       ),
-    [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView]
+    [
+      adjustedColumns,
+      indexPattern,
+      displayTimeColumn,
+      includeSourceInColumns,
+      isContextView,
+      columnWidths,
+    ]
   );
 
   const dataGridTableColumnsVisibility = useMemo(
@@ -214,6 +227,7 @@ export const DataGridTable = ({
         sorting={sorting}
         toolbarVisibility={isToolbarVisible ? toolbarOptions : false}
         rowHeightsOptions={rowHeightsOptions}
+        onColumnResize={onColumnResize}
         className="discoverDataGrid"
       />
     ),
@@ -228,6 +242,7 @@ export const DataGridTable = ({
       isToolbarVisible,
       toolbarOptions,
       rowHeightsOptions,
+      onColumnResize,
     ]
   );
 

src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx

@@ -8,30 +8,47 @@ import { i18n } from '@osd/i18n';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { getCellActions } from './data_grid_table_cell_actions';
 
+export interface ColumnWidth {
+  width?: number;
+}
+
+export interface ColumnWidths {
+  [columnName: string]: ColumnWidth;
+}
+
 export function buildDataGridColumns(
   columnNames: string[],
   idxPattern: IndexPattern,
   displayTimeColumn: boolean,
   includeSourceInColumns: boolean,
-  isContextView: boolean
+  isContextView: boolean,
+  columnWidths?: ColumnWidths
 ) {
   const timeFieldName = idxPattern.timeFieldName;
   let columnsToUse = columnNames;
+  const getColumnWidth = (columnName: string) => columnWidths?.[columnName]?.width ?? 0;
 
   if (displayTimeColumn && timeFieldName && !columnNames.includes(timeFieldName)) {
     columnsToUse = [timeFieldName, ...columnNames];
   }
 
   return columnsToUse.map((colName) =>
-    generateDataGridTableColumn(colName, idxPattern, includeSourceInColumns, isContextView)
+    generateDataGridTableColumn(
+      colName,
+      idxPattern,
+      includeSourceInColumns,
+      isContextView,
+      getColumnWidth(colName)
+    )
   );
 }
 
 export function generateDataGridTableColumn(
   colName: string,
   idxPattern: IndexPattern,
   includeSourceInColumns: boolean,
-  isContextView: boolean
+  isContextView: boolean,
+  columnWidth: number | undefined = 0
 ) {
   const timeLabel = i18n.translate('discover.timeLabel', {
     defaultMessage: 'Time',
@@ -69,6 +86,9 @@ export function generateDataGridTableColumn(
       defaultMessage: 'Source',
     });
   }
+  if (columnWidth > 0) {
+    dataGridCol.initialWidth = Number(columnWidth);
+  }
   return dataGridCol;
 }
 

src/plugins/discover/public/application/components/doc_views/context_app.tsx

@@ -104,6 +104,7 @@ export function ContextApp({
           onRemoveColumn={() => {}}
           onSetColumns={() => {}}
           onSort={() => {}}
+          onColumnResize={() => {}}
           sort={sort}
           rows={rows}
           displayTimeColumn={displayTimeColumn}

src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx

@@ -92,6 +92,7 @@ export const getTopNavLinks = (
 
         savedSearch.columns = state.columns;
         savedSearch.sort = state.sort;
+        savedSearch.columnWidths = state.columnWidths;
 
         try {
           const id = await savedSearch.save(saveOptions);

src/plugins/discover/public/application/utils/state_management/discover_slice.tsx

@@ -12,6 +12,7 @@ import { buildColumns } from '../columns';
 import * as utils from './common';
 import { SortOrder } from '../../../saved_searches/types';
 import { DEFAULT_COLUMNS_SETTING, PLUGIN_ID } from '../../../../common';
+import { ColumnWidth, ColumnWidths } from '../../components/data_grid/data_grid_table_columns';
 
 export interface DiscoverState {
   /**
@@ -52,6 +53,7 @@ export interface DiscoverState {
      */
     lineCount?: number;
   };
+  columnWidths?: ColumnWidths;
 }
 
 export interface DiscoverRootState extends RootState {
@@ -86,6 +88,7 @@ export const getPreloadedState = async ({
       preloadedState.state.columns = savedSearchInstance.columns;
       preloadedState.state.sort = savedSearchInstance.sort;
       preloadedState.state.savedSearch = savedSearchInstance.id;
+      preloadedState.state.columnWidths = savedSearchInstance.columnWidths;
       const indexPatternId = savedSearchInstance.searchSource.getField('index')?.id;
       preloadedState.root = {
         metadata: {
@@ -166,6 +169,12 @@ export const discoverSlice = createSlice({
         interval: action.payload,
       };
     },
+    setColumnWidths(state, action: PayloadAction<{ columnName: string; width: number }>) {
+      const { columnName, width } = action.payload;
+      // Check if `columnWidths` is defined, if not, initialize it
+      if (!state.columnWidths) state.columnWidths = {};
+      state.columnWidths[columnName] = { width };
+    },
     updateState(state, action: PayloadAction<Partial<DiscoverState>>) {
       return {
         ...state,
@@ -200,6 +209,7 @@ export const {
   setColumns,
   setSort,
   setInterval,
+  setColumnWidths,
   setState,
   updateState,
   setSavedSearchId,

src/plugins/discover/public/application/view_components/canvas/discover_table.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
+import { EuiDataGridProps } from '@elastic/eui';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DataGridTable } from '../../components/data_grid/data_grid_table';
@@ -12,9 +13,9 @@ import {
   addColumn,
   moveColumn,
   removeColumn,
-  reorderColumn,
   setColumns,
   setSort,
+  setColumnWidths,
   useDispatch,
   useSelector,
 } from '../../utils/state_management';
@@ -41,7 +42,7 @@ export const DiscoverTable = ({ rows }: Props) => {
   } = services;
 
   const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
-  const { columns, sort } = useSelector((state) => state.discover);
+  const { columns, sort, columnWidths } = useSelector((state) => state.discover);
   const dispatch = useDispatch();
   const onAddColumn = (col: string) => {
     if (indexPattern && capabilities.discover?.save) {
@@ -85,6 +86,15 @@ export const DiscoverTable = ({ rows }: Props) => {
     },
     [filterManager, indexPattern]
   );
+
+  const onColumnResize: EuiDataGridProps['onColumnResize'] = useCallback(
+    ({ columnId, width }: { columnId: string; width: number }) => {
+      // update width in uiState
+      dispatch(setColumnWidths({ columnName: columnId, width }));
+    },
+    [dispatch]
+  );
+
   const displayTimeColumn = useMemo(
     () => !!(!uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased()),
     [indexPattern, uiSettings]
@@ -103,13 +113,15 @@ export const DiscoverTable = ({ rows }: Props) => {
   return (
     <DataGridTable
       columns={columns}
+      columnWidths={columnWidths}
       indexPattern={indexPattern}
       onAddColumn={onAddColumn}
       onFilter={onAddFilter as DocViewFilterFn}
       onMoveColumn={onMoveColumn}
       onRemoveColumn={onRemoveColumn}
       onSetColumns={onSetColumns}
       onSort={onSetSort}
+      onColumnResize={onColumnResize}
       sort={sort}
       rows={rows}
       displayTimeColumn={displayTimeColumn}

src/plugins/discover/public/application/view_components/utils/use_search.ts

@@ -69,7 +69,9 @@ export type RefetchSubject = Subject<SearchRefetch>;
 export const useSearch = (services: DiscoverViewServices) => {
   const initalSearchComplete = useRef(false);
   const [savedSearch, setSavedSearch] = useState<SavedSearch | undefined>(undefined);
-  const { savedSearch: savedSearchId, sort, interval } = useSelector((state) => state.discover);
+  const { savedSearch: savedSearchId, sort, interval, columnWidths } = useSelector(
+    (state) => state.discover
+  );
   const { data, filterManager, getSavedSearchById, core, toastNotifications, chrome } = services;
   const indexPattern = useIndexPattern(services);
   const timefilter = data.query.timefilter.timefilter;

src/plugins/discover/public/embeddable/search_embeddable.tsx

@@ -68,9 +68,11 @@ import { SearchEmbeddableComponent } from './search_embeddable_component';
 import { DiscoverServices } from '../build_services';
 import * as columnActions from '../application/utils/state_management/common';
 import { buildColumns } from '../application/utils/columns';
+import { ColumnWidths } from '../application/components/data_grid/data_grid_table_columns';
 
 export interface SearchProps {
   columns?: string[];
+  columnWidths?: ColumnWidths;
   description?: string;
   sort?: SortOrder[];
   onSort?: (sort: SortOrder[]) => void;
@@ -82,6 +84,7 @@ export interface SearchProps {
   onMoveColumn?: (column: string, index: number) => void;
   onReorderColumn?: (col: string, source: number, destination: number) => void;
   onFilter?: (field: IFieldType, value: string[], operator: string) => void;
+  onColumnResize?: any;
   rows?: any[];
   indexPattern?: IndexPattern;
   hits?: number;
@@ -224,6 +227,7 @@ export class SearchEmbeddable
 
     const searchProps: SearchProps = {
       columns: this.savedSearch.columns,
+      columnWidths: this.savedSearch.columnWidths,
       sort: [],
       inspectorAdapters: this.inspectorAdaptors,
       rows: [],
@@ -305,6 +309,17 @@ export class SearchEmbeddable
       });
     };
 
+    searchProps.onColumnResize = (action: any) => {
+      const { columnId, width } = action;
+      let columnWidthsState = searchProps.columnWidths;
+      // Check if `columnWidths` is defined, if not, initialize it
+      if (!columnWidthsState) {
+        columnWidthsState = {};
+      }
+      columnWidthsState[columnId] = { width };
+      this.updateInput({ columnWidths: columnWidthsState });
+    };
+
     this.pushContainerStateParamsToProps(searchProps);
   }
 

src/plugins/discover/public/embeddable/search_embeddable_component.tsx

@@ -29,13 +29,15 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
   const services = getServices();
   const discoverEmbeddableProps = {
     columns: searchProps.columns,
+    columnWidths: searchProps.columnWidths,
     indexPattern: searchProps.indexPattern,
     onAddColumn: searchProps.onAddColumn,
     onFilter: searchProps.onFilter,
     onMoveColumn: searchProps.onMoveColumn,
     onRemoveColumn: searchProps.onRemoveColumn,
     onReorderColumn: searchProps.onReorderColumn,
     onSort: searchProps.onSort,
+    onColumnResize: searchProps.onColumnResize,
     rows: searchProps.rows,
     onSetColumns: searchProps.onSetColumns,
     sort: searchProps.sort,

src/plugins/discover/public/embeddable/types.ts

@@ -37,6 +37,7 @@ import {
 import { Filter, IIndexPattern, TimeRange, Query } from 'src/plugins/data/public';
 import { SortOrder } from '../saved_searches/types';
 import { SavedSearch } from '../saved_searches';
+import { ColumnWidths } from '../application/components/data_grid/data_grid_table_columns';
 
 export interface SearchInput extends EmbeddableInput {
   timeRange: TimeRange;
@@ -45,6 +46,7 @@ export interface SearchInput extends EmbeddableInput {
   hidePanelTitles?: boolean;
   columns?: string[];
   sort?: SortOrder[];
+  columnWidths?: ColumnWidths;
 }
 
 export interface SearchOutput extends EmbeddableOutput {