From 2410b88ad1b39a774b9d60e5a44277584c38c7c4 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <Svennergr@gmail.com>
Date: Wed, 5 Oct 2022 16:11:08 +0200
Subject: [PATCH] Logs: Show LogRowMenu also for long logs and wrap-lines
 turned off (#56030)

* show logrowmenu as new table-cell

* fix dashboard position

* added reasonable position

* fix log row message not beeing 100%
---
 .../logs/components/LogRowMessage.tsx         | 79 +++++++++++--------
 .../logs/components/getLogRowStyles.ts        |  5 +-
 2 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index a29c2f9c850..046b5116898 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -61,7 +61,6 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
       justify-content: space-evenly;
       align-items: center;
       position: absolute;
-      right: ${isInDashboard ? '0px' : '-8px'};
       top: 0;
       bottom: auto;
       height: 36px;
@@ -72,6 +71,11 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
       visibility: hidden;
       width: ${showContextButton ? '80px' : '40px'};
     `,
+    logRowMenuCell: css`
+      position: absolute;
+      right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`};
+      margin-top: -1px;
+    `,
   };
 };
 
@@ -156,36 +160,45 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
     const styles = getStyles(theme, shouldShowContextToggle, app === CoreApp.Dashboard);
 
     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
-        ref={this.logRowRef}
-        style={contextIsOpen ? { position: 'unset' } : undefined}
-        className={style.logsRowMessage}
-      >
-        <div
-          className={cx({ [styles.positionRelative]: wrapLogMessage }, { [styles.horizontalScroll]: !wrapLogMessage })}
+      <>
+        {
+          // 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
+          ref={this.logRowRef}
+          style={contextIsOpen ? { position: 'unset' } : undefined}
+          className={style.logsRowMessage}
         >
-          {contextIsOpen && context && (
-            <LogRowContext
-              row={row}
-              context={context}
-              errors={errors}
-              wrapLogMessage={wrapLogMessage}
-              hasMoreContextRows={hasMoreContextRows}
-              onOutsideClick={onToggleContext}
-              logsSortOrder={logsSortOrder}
-              onLoadMoreContext={() => {
-                if (updateLimit) {
-                  updateLimit();
-                }
-              }}
-            />
-          )}
-          <span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
-            {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
-          </span>
-          {showRowMenu && (
+          <div
+            className={cx(
+              { [styles.positionRelative]: wrapLogMessage },
+              { [styles.horizontalScroll]: !wrapLogMessage }
+            )}
+          >
+            {contextIsOpen && context && (
+              <LogRowContext
+                row={row}
+                context={context}
+                errors={errors}
+                wrapLogMessage={wrapLogMessage}
+                hasMoreContextRows={hasMoreContextRows}
+                onOutsideClick={onToggleContext}
+                logsSortOrder={logsSortOrder}
+                onLoadMoreContext={() => {
+                  if (updateLimit) {
+                    updateLimit();
+                  }
+                }}
+              />
+            )}
+            <span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
+              {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
+            </span>
+          </div>
+        </td>
+        {showRowMenu && (
+          <td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
             <span className={cx('log-row-menu', styles.rowMenu)} onClick={(e) => e.stopPropagation()}>
               {shouldShowContextToggle && (
                 <Tooltip placement="top" content={'Show context'}>
@@ -200,9 +213,9 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
                 />
               </Tooltip>
             </span>
-          )}
-        </div>
-      </td>
+          </td>
+        )}
+      </>
     );
   }
 }
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index b6a2b734bd0..a1c2bbda54a 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -58,11 +58,11 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
         }
       }
 
-      td:last-child {
+      td:not(.log-row-menu-cell):last-child {
         width: 100%;
       }
 
-      > td {
+      > td:not(.log-row-menu-cell) {
         position: relative;
         padding-right: ${theme.spacing(1)};
         border-top: 1px solid transparent;
@@ -122,6 +122,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
       label: logs-row__message;
       white-space: pre-wrap;
       word-break: break-all;
+      width: 100%;
     `,
     //Log details specific CSS
     logDetailsContainer: css`