[Data Explorer][Discover 2.0] Replace hide column and add move left/r…

…ight (#4838) * disable full screen mode * customize hide column to delete column * add move left and move right Issue Resolve: #4822 #4823 #4824 Signed-off-by: ananzh <[email protected]>
opensearch-project · Aug 30, 2023 · 2738131 · 2738131
1 parent a239fc2
commit 2738131
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 27 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/constants.ts b/src/plugins/discover/public/application/components/data_grid/constants.ts
@@ -9,4 +9,5 @@ export const toolbarVisibility = {
     allowReorder: true,
   },
   showStyleSelector: false,
+  showFullScreenSelector: false,
 };
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -16,6 +16,7 @@ import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_
 import { DiscoverServices } from '../../../build_services';
 import { usePagination } from '../utils/use_pagination';
 import { SortOrder } from '../../../saved_searches/types';
+import { buildColumns } from '../../utils/columns';
 
 export interface DataGridTableProps {
   columns: string[];
@@ -30,6 +31,7 @@ export interface DataGridTableProps {
   displayTimeColumn: boolean;
   services: DiscoverServices;
   isToolbarVisible?: boolean;
+  isContextView?: boolean;
 }
 
 export const DataGridTable = ({
@@ -44,19 +46,31 @@ export const DataGridTable = ({
   rows,
   displayTimeColumn,
   isToolbarVisible = true,
+  isContextView = false,
 }: DataGridTableProps) => {
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
   const pagination = usePagination(rowCount);
 
+  let adjustedColumns = buildColumns(columns);
+  // handle case where the user removes selected filed and leaves only time column
+  if (
+    adjustedColumns.length === 1 &&
+    indexPattern &&
+    adjustedColumns[0] === indexPattern.timeFieldName
+  ) {
+    adjustedColumns = [...adjustedColumns, '_source'];
+  }
+
+  const includeSourceInColumns = adjustedColumns.includes('_source');
   const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]);
   const rowHeightsOptions = useMemo(
     () => ({
       defaultHeight: {
-        lineCount: columns.includes('_source') ? 3 : 1,
+        lineCount: adjustedColumns.includes('_source') ? 3 : 1,
       },
     }),
-    [columns]
+    [adjustedColumns]
   );
 
   const onColumnSort = useCallback(
@@ -72,18 +86,29 @@ export const DataGridTable = ({
   ]);
 
   const dataGridTableColumns = useMemo(
-    () => buildDataGridColumns(columns, indexPattern, displayTimeColumn),
-    [columns, indexPattern, displayTimeColumn]
+    () =>
+      buildDataGridColumns(
+        adjustedColumns,
+        indexPattern,
+        displayTimeColumn,
+        includeSourceInColumns,
+        isContextView
+      ),
+    [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView]
   );
 
   const dataGridTableColumnsVisibility = useMemo(
     () => ({
-      visibleColumns: computeVisibleColumns(columns, indexPattern, displayTimeColumn) as string[],
+      visibleColumns: computeVisibleColumns(
+        adjustedColumns,
+        indexPattern,
+        displayTimeColumn
+      ) as string[],
       setVisibleColumns: (cols: string[]) => {
         onSetColumns(cols);
       },
     }),
-    [columns, indexPattern, displayTimeColumn, onSetColumns]
+    [adjustedColumns, indexPattern, displayTimeColumn, onSetColumns]
   );
 
   const sorting: EuiDataGridSorting = useMemo(
@@ -151,7 +176,7 @@ export const DataGridTable = ({
           <DataGridFlyout
             indexPattern={indexPattern}
             hit={inspectedHit}
-            columns={columns}
+            columns={adjustedColumns}
             onRemoveColumn={onRemoveColumn}
             onAddColumn={onAddColumn}
             onFilter={onFilter}

diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx
@@ -11,33 +11,52 @@ import { getCellActions } from './data_grid_table_cell_actions';
 export function buildDataGridColumns(
   columnNames: string[],
   idxPattern: IndexPattern,
-  displayTimeColumn: boolean
+  displayTimeColumn: boolean,
+  includeSourceInColumns: boolean,
+  isContextView: boolean
 ) {
   const timeFieldName = idxPattern.timeFieldName;
   let columnsToUse = columnNames;
 
-  if (displayTimeColumn && idxPattern.timeFieldName && !columnNames.includes(timeFieldName)) {
-    columnsToUse = [idxPattern.timeFieldName, ...columnNames];
+  if (displayTimeColumn && timeFieldName && !columnNames.includes(timeFieldName)) {
+    columnsToUse = [timeFieldName, ...columnNames];
   }
 
-  return columnsToUse.map((colName) => generateDataGridTableColumn(colName, idxPattern));
+  return columnsToUse.map((colName) =>
+    generateDataGridTableColumn(colName, idxPattern, includeSourceInColumns, isContextView)
+  );
 }
 
-export function generateDataGridTableColumn(colName: string, idxPattern: IndexPattern) {
+export function generateDataGridTableColumn(
+  colName: string,
+  idxPattern: IndexPattern,
+  includeSourceInColumns: boolean,
+  isContextView: boolean
+) {
   const timeLabel = i18n.translate('discover.timeLabel', {
     defaultMessage: 'Time',
   });
   const idxPatternField = idxPattern.getFieldByName(colName);
+  const shouldHide = colName === '_source' || colName === idxPattern.timeFieldName;
   const dataGridCol: EuiDataGridColumn = {
     id: colName,
     schema: idxPatternField?.type,
     isSortable: idxPatternField?.sortable,
     display: idxPatternField?.displayName,
-    actions: {
-      showHide: true,
-      showMoveLeft: false,
-      showMoveRight: false,
-    },
+    actions: isContextView
+      ? false
+      : {
+          showHide: shouldHide
+            ? false
+            : {
+                label: i18n.translate('discover.removeColumn.label', {
+                  defaultMessage: 'Remove column',
+                }),
+                iconType: 'cross',
+              },
+          showMoveLeft: !includeSourceInColumns,
+          showMoveRight: !includeSourceInColumns,
+        },
     cellActions: idxPatternField ? getCellActions(idxPatternField) : [],
   };
 

diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx
@@ -103,6 +103,7 @@ export function ContextApp({
           displayTimeColumn={true}
           services={services}
           isToolbarVisible={false}
+          isContextView={true}
         />
       </div>
       <ActionBar

diff --git a/src/plugins/discover/public/application/utils/state_management/common.ts b/src/plugins/discover/public/application/utils/state_management/common.ts
@@ -21,8 +21,3 @@ export const reorderColumn = (columns: string[], source: number, destination: nu
   newColumns.splice(destination, 0, removed);
   return newColumns;
 };
-
-export const setColumns = (timeField: string | undefined, columns: string[]) => {
-  const newColumns = timeField && timeField === columns[0] ? columns.slice(1) : columns;
-  return newColumns;
-};
diff --git a/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx b/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx
@@ -123,11 +123,10 @@ export const discoverSlice = createSlice({
         isDirty: true,
       };
     },
-    setColumns(state, action: PayloadAction<{ timeField: string | undefined; columns: string[] }>) {
-      const columns = utils.setColumns(action.payload.timeField, action.payload.columns);
+    setColumns(state, action: PayloadAction<{ columns: string[] }>) {
       return {
         ...state,
-        columns,
+        columns: action.payload.columns,
       };
     },
     setSort(state, action: PayloadAction<SortOrder[]>) {

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -39,8 +39,7 @@ export const DiscoverTable = ({ history }: Props) => {
   const dispatch = useDispatch();
   const onAddColumn = (col: string) => dispatch(addColumn({ column: col }));
   const onRemoveColumn = (col: string) => dispatch(removeColumn(col));
-  const onSetColumns = (cols: string[]) =>
-    dispatch(setColumns({ timefield: indexPattern.timeFieldName, columns: cols }));
+  const onSetColumns = (cols: string[]) => dispatch(setColumns({ columns: cols }));
   const onSetSort = (s: SortOrder[]) => {
     dispatch(setSort(s));
     refetch$.next();