remove interactions while in full screen mode

Signed-off-by: Adam Tackett <[email protected]>
opensearch-project · Jan 29, 2025 · e45e5f4 · e45e5f4
1 parent bd3560f
commit e45e5f4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/public/components/trace_analytics/components/common/shared_components/custom_datagrid.tsx b/public/components/trace_analytics/components/common/shared_components/custom_datagrid.tsx
@@ -84,6 +84,8 @@ export const RenderCustomDataGrid: React.FC<RenderCustomDataGridParams> = ({
   );
   const [isFullScreen, setIsFullScreen] = useState(fullScreen);
 
+  const disableInteractions = useMemo(() => isFullScreen, [isFullScreen]);
+
   const toolbarControls = useMemo(
     () => [
       <EuiButtonEmpty
@@ -132,7 +134,12 @@ export const RenderCustomDataGrid: React.FC<RenderCustomDataGridParams> = ({
               setVisibleColumns: setLocalVisibleColumns,
             }}
             rowCount={rowCount}
-            renderCellValue={renderCellValue}
+            renderCellValue={(props) =>
+              renderCellValue({
+                ...props,
+                disableInteractions,
+              })
+            }
             sorting={sorting}
             toolbarVisibility={{
               showColumnSelector: true,

diff --git a/public/components/trace_analytics/components/traces/span_detail_table.tsx b/public/components/trace_analytics/components/traces/span_detail_table.tsx
@@ -89,12 +89,14 @@ const renderCommonCellValue = ({
   items,
   tableParams,
   props,
+  disableInteractions,
 }: {
   rowIndex: number;
   columnId: string;
   items: any[];
   tableParams: any;
   props: SpanDetailTableProps;
+  disableInteractions: boolean;
 }) => {
   const adjustedRowIndex = rowIndex - tableParams.page * tableParams.size;
   const item = items[adjustedRowIndex];
@@ -117,7 +119,9 @@ const renderCommonCellValue = ({
       return value?.serviceName;
     case 'spanId':
     case 'spanID':
-      return (
+      return disableInteractions ? (
+        <span>{value}</span>
+      ) : (
         <EuiLink data-test-subj="spanId-link" onClick={() => props.openFlyout(value)}>
           {value}
         </EuiLink>
@@ -193,13 +197,14 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
   }, [total]);
   const columns = useMemo(() => getColumns(props.mode), [props.mode]);
   const renderCellValue = useCallback(
-    ({ rowIndex, columnId }) =>
+    ({ rowIndex, columnId, disableInteractions }) =>
       renderCommonCellValue({
         rowIndex,
         columnId,
         items,
         tableParams,
         props,
+        disableInteractions,
       }),
     [items, tableParams, props]
   );
@@ -331,7 +336,7 @@ export function SpanDetailTableHierarchy(props: SpanDetailTableProps) {
   };
 
   const renderCellValue = useCallback(
-    ({ rowIndex, columnId }) => {
+    ({ rowIndex, columnId, disableInteractions }) => {
       const item = flattenedItems[rowIndex];
       const value = item[columnId];
 
@@ -360,14 +365,17 @@ export function SpanDetailTableHierarchy(props: SpanDetailTableProps) {
             ) : (
               <EuiIcon type="empty" style={{ visibility: 'hidden', marginRight: 5 }} />
             )}
-            <EuiButtonEmpty
-              size="xs"
-              onClick={() => openFlyout(value)}
-              color="primary"
-              data-test-subj="spanId-flyout-button"
-            >
-              {value}
-            </EuiButtonEmpty>
+            {disableInteractions ? (
+              <span>{value}</span>
+            ) : (
+              <EuiLink
+                onClick={() => openFlyout(value)}
+                color="primary"
+                data-test-subj="spanId-flyout-button"
+              >
+                {value}
+              </EuiLink>
+            )}
           </div>
         );
       }