Logs: Center `show context` modal on click (#55989)

* added center implementation

* fixed passing `scrollElement` to wrong component

* rather destructure than direct ref

* removed unnecessary `undefined`

public/app/features/explore/Explore.tsx

@@ -275,6 +275,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
         onClickFilterOutLabel={this.onClickFilterOutLabel}
         onStartScanning={this.onStartScanning}
         onStopScanning={this.onStopScanning}
+        scrollElement={this.scrollElement}
       />
     );
   }

public/app/features/explore/Logs.tsx

@@ -66,6 +66,7 @@ interface Props extends Themeable2 {
   datasourceType?: string;
   logsVolumeEnabled: boolean;
   logsVolumeData: DataQueryResponse | undefined;
+  scrollElement?: HTMLDivElement;
   onSetLogsVolumeEnabled: (enabled: boolean) => void;
   loadLogsVolumeData: (exploreId: ExploreId) => void;
   showContextToggle?: (row?: LogRowModel) => boolean;
@@ -318,6 +319,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
       clearCache,
       addResultsToCache,
       exploreId,
+      scrollElement,
     } = this.props;
 
     const {
@@ -477,6 +479,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
                 onClickShowDetectedField={this.showDetectedField}
                 onClickHideDetectedField={this.hideDetectedField}
                 app={CoreApp.Explore}
+                scrollElement={scrollElement}
               />
             </div>
             <LogsNavigation

public/app/features/explore/LogsContainer.tsx

@@ -30,6 +30,7 @@ interface LogsContainerProps extends PropsFromRedux {
   scanRange?: RawTimeRange;
   syncedTimes: boolean;
   loadingState: LoadingState;
+  scrollElement?: HTMLDivElement;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
   onStartScanning: () => void;
@@ -97,6 +98,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
       exploreId,
       addResultsToCache,
       clearCache,
+      scrollElement,
     } = this.props;
 
     if (!logRows) {
@@ -152,6 +154,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
             getFieldLinks={this.getFieldLinks}
             addResultsToCache={() => addResultsToCache(exploreId)}
             clearCache={() => clearCache(exploreId)}
+            scrollElement={scrollElement}
           />
         </LogsCrossFadeTransition>
       </>

public/app/features/logs/components/LogRow.tsx

@@ -43,6 +43,7 @@ interface Props extends Themeable2 {
   logsSortOrder?: LogsSortOrder | null;
   forceEscape?: boolean;
   showDetectedFields?: string[];
+  scrollElement?: HTMLDivElement;
   showRowMenu?: boolean;
   app?: CoreApp;
   getRows: () => LogRowModel[];
@@ -148,6 +149,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
       forceEscape,
       onLogRowHover,
       app,
+      scrollElement,
     } = this.props;
     const { showDetails, showContext } = this.state;
     const style = getLogRowStyles(theme, row.logLevel);
@@ -219,6 +221,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
               prettifyLogMessage={prettifyLogMessage}
               onToggleContext={this.toggleContext}
               app={app}
+              scrollElement={scrollElement}
               logsSortOrder={logsSortOrder}
             />
           )}

public/app/features/logs/components/LogRowMessage.tsx

@@ -24,6 +24,7 @@ interface Props extends Themeable2 {
   context?: LogRowContextRows;
   showRowMenu?: boolean;
   app?: CoreApp;
+  scrollElement?: HTMLDivElement;
   showContextToggle?: (row?: LogRowModel) => boolean;
   getRows: () => LogRowModel[];
   onToggleContext: () => void;
@@ -112,11 +113,24 @@ const restructureLog = memoizeOne((line: string, prettifyLogMessage: boolean): s
 });
 
 class UnThemedLogRowMessage extends PureComponent<Props> {
+  logRowRef: React.RefObject<HTMLTableCellElement> = React.createRef();
+
   onContextToggle = (e: React.SyntheticEvent<HTMLElement>) => {
     e.stopPropagation();
     this.props.onToggleContext();
   };
 
+  onShowContextClick = (e: React.SyntheticEvent<HTMLElement, Event>) => {
+    const { scrollElement } = this.props;
+    this.onContextToggle(e);
+    if (scrollElement && this.logRowRef.current) {
+      scrollElement.scroll({
+        behavior: 'smooth',
+        top: scrollElement.scrollTop + this.logRowRef.current.getBoundingClientRect().top - window.innerHeight / 2,
+      });
+    }
+  };
+
   render() {
     const {
       row,
@@ -144,7 +158,11 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
     return (
       // When context is open, the position has to be NOT relative.
       // Setting the postion as inline-style to overwrite the more sepecific style definition from `style.logsRowMessage`.
-      <td style={contextIsOpen ? { position: 'unset' } : undefined} className={style.logsRowMessage}>
+      <td
+        ref={this.logRowRef}
+        style={contextIsOpen ? { position: 'unset' } : undefined}
+        className={style.logsRowMessage}
+      >
         <div
           className={cx({ [styles.positionRelative]: wrapLogMessage }, { [styles.horizontalScroll]: !wrapLogMessage })}
         >
@@ -171,7 +189,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
             <span className={cx('log-row-menu', styles.rowMenu)} onClick={(e) => e.stopPropagation()}>
               {shouldShowContextToggle && (
                 <Tooltip placement="top" content={'Show context'}>
-                  <IconButton size="md" name="gf-show-context" onClick={this.onContextToggle} />
+                  <IconButton size="md" name="gf-show-context" onClick={this.onShowContextClick} />
                 </Tooltip>
               )}
               <Tooltip placement="top" content={'Copy'}>

public/app/features/logs/components/LogRows.tsx

@@ -35,6 +35,7 @@ export interface Props extends Themeable2 {
   forceEscape?: boolean;
   showDetectedFields?: string[];
   app?: CoreApp;
+  scrollElement?: HTMLDivElement;
   showContextToggle?: (row?: LogRowModel) => boolean;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
@@ -124,6 +125,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
       forceEscape,
       onLogRowHover,
       app,
+      scrollElement,
     } = this.props;
     const { renderAll, contextIsOpen } = this.state;
     const { logsRowsTable } = getLogRowStyles(theme);
@@ -173,6 +175,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
                 toggleContextIsOpen={this.toggleContextIsOpen}
                 onLogRowHover={onLogRowHover}
                 app={app}
+                scrollElement={scrollElement}
               />
             ))}
           {hasData &&
@@ -203,6 +206,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
                 toggleContextIsOpen={this.toggleContextIsOpen}
                 onLogRowHover={onLogRowHover}
                 app={app}
+                scrollElement={scrollElement}
               />
             ))}
           {hasData && !renderAll && (