Logs: Added copy-to-clipboard fallback support and visual feedback after copying (#68874)

* Log row: use clipboard button component for copy log button

* Copy log: adjust button styles to match

* Define line height

* Slightly improve line height

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

@@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { LogRowModel, findHighlightChunksInText, CoreApp } from '@grafana/data';
-import { IconButton, Tooltip } from '@grafana/ui';
+import { ClipboardButton, IconButton, Tooltip } from '@grafana/ui';
 
 import { LogMessageAnsi } from './LogMessageAnsi';
 import { LogRowStyles } from './getLogRowStyles';
@@ -65,6 +65,16 @@ export class LogRowMessage extends PureComponent<Props> {
     onOpenContext(this.props.row);
   };
 
+  onLogRowClick = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+  };
+
+  getLogText = () => {
+    const { row, prettifyLogMessage } = this.props;
+    const { raw } = row;
+    return restructureLog(raw, prettifyLogMessage);
+  };
+
   render() {
     const { row, wrapLogMessage, prettifyLogMessage, showContextToggle, styles } = this.props;
     const { hasAnsi, raw } = row;
@@ -94,16 +104,23 @@ export class LogRowMessage extends PureComponent<Props> {
             className={cx('log-row-menu', styles.rowMenu, {
               [styles.rowMenuWithContextButton]: shouldShowContextToggle,
             })}
-            onClick={(e) => e.stopPropagation()}
+            onClick={this.onLogRowClick}
           >
             {shouldShowContextToggle && (
               <Tooltip placement="top" content={'Show context'}>
                 <IconButton size="md" name="gf-show-context" onClick={this.onShowContextClick} />
               </Tooltip>
             )}
-            <Tooltip placement="top" content={'Copy'}>
-              <IconButton size="md" name="copy" onClick={() => navigator.clipboard.writeText(restructuredEntry)} />
-            </Tooltip>
+            <ClipboardButton
+              className={styles.copyLogButton}
+              icon="copy"
+              variant="secondary"
+              fill="text"
+              size="md"
+              getText={this.getLogText}
+              tooltip="Copy"
+              tooltipPlacement="top"
+            />
           </span>
         </td>
       </>

public/app/features/logs/components/getLogRowStyles.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import memoizeOne from 'memoize-one';
 import tinycolor from 'tinycolor2';
 
-import { GrafanaTheme2, LogLevel } from '@grafana/data';
+import { colorManipulator, GrafanaTheme2, LogLevel } from '@grafana/data';
 import { styleMixins } from '@grafana/ui';
 
 export const getLogLevelStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
@@ -139,6 +139,17 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       width: 100%;
       text-align: left;
     `,
+    copyLogButton: css`
+      padding: 0 0 0 ${theme.spacing(0.5)};
+      height: ${theme.spacing(3)};
+      width: ${theme.spacing(3.25)};
+      line-height: ${theme.spacing(2.5)};
+      overflow: hidden;
+      &:hover {
+          background-color: ${colorManipulator.alpha(theme.colors.text.primary, 0.12)};
+        }
+      }
+    `,
     //Log details specific CSS
     logDetailsContainer: css`
       label: logs-row-details-table;