From 7ec1d137b4beb513846f5eb23bfab9d17090d287 Mon Sep 17 00:00:00 2001
From: Seyaji <67058118+Seyaji@users.noreply.github.com>
Date: Thu, 15 Sep 2022 16:13:58 +0100
Subject: [PATCH] Logs: Relocate "show context" button, add copy line log
 button  (#50977)

* add context button to right side of log row

* add context button to right side of log row

* add context button to right side of log row

* add context button to right side of log row

* add show-context icon

Co-authored-by: Sven Grossmann <svennergr@gmail.com>
---
 packages/grafana-data/src/types/icon.ts       |  1 +
 .../src/components/Logs/LogRowMessage.tsx     | 39 ++++++++++++++++---
 public/img/icons/custom/gf-show-context.svg   |  6 +++
 3 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 public/img/icons/custom/gf-show-context.svg

diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts
index bbc1d0a0c8f..d53de9d1a3b 100644
--- a/packages/grafana-data/src/types/icon.ts
+++ b/packages/grafana-data/src/types/icon.ts
@@ -101,6 +101,7 @@ export const availableIconsIndex = {
   'gf-logs': true,
   'gf-portrait': true,
   'gf-service-account': true,
+  'gf-show-context': true,
   grafana: true,
   'graph-bar': true,
   heart: true,
diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
index 6b7d753f1bd..090fcbd3976 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
@@ -6,10 +6,10 @@ import tinycolor from 'tinycolor2';
 
 import { LogRowModel, findHighlightChunksInText, GrafanaTheme2 } from '@grafana/data';
 
-// @ts-ignore
-
 import { withTheme2 } from '../../themes/index';
 import { Themeable2 } from '../../types/theme';
+import { IconButton } from '../IconButton/IconButton';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 import { LogMessageAnsi } from './LogMessageAnsi';
 import { LogRowContext } from './LogRowContext';
@@ -55,6 +55,24 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: block;
       margin-left: 0px;
     `,
+    contextButton: css`
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      align-content: flex-end;
+      justify-content: space-evenly;
+      align-items: center;
+      position: absolute;
+      right: -8px;
+      top: 0;
+      bottom: auto;
+      width: 80px;
+      height: 36px;
+      background: ${theme.colors.background.primary};
+      box-shadow: ${theme.shadows.z3};
+      padding: ${theme.spacing(0, 0, 0, 0.5)};
+      z-index: 100;
+    `,
   };
 };
 
@@ -146,12 +164,21 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
           <span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
             {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
           </span>
-          {showContextToggle?.(row) && (
+          {!contextIsOpen && showContextToggle?.(row) && (
             <span
-              onClick={this.onContextToggle}
-              className={cx('log-row-context', style.context, { [styles.contextNewline]: !wrapLogMessage })}
+              className={cx('log-row-context', style.context, styles.contextButton)}
+              onClick={(e) => e.stopPropagation()}
             >
-              {contextIsOpen ? 'Hide' : 'Show'} context
+              <Tooltip placement="top" content={'Show context'}>
+                <IconButton size="md" name="gf-show-context" onClick={this.onContextToggle} />
+              </Tooltip>
+              <Tooltip placement="top" content={'Copy'}>
+                <IconButton
+                  size="md"
+                  name="copy"
+                  onClick={() => navigator.clipboard.writeText(JSON.stringify(restructuredEntry))}
+                />
+              </Tooltip>
             </span>
           )}
         </div>
diff --git a/public/img/icons/custom/gf-show-context.svg b/public/img/icons/custom/gf-show-context.svg
new file mode 100644
index 00000000000..ad16b4d9635
--- /dev/null
+++ b/public/img/icons/custom/gf-show-context.svg
@@ -0,0 +1,6 @@
+<svg width="101" height="167" viewBox="0 0 101 167" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.33341 44.2285L45.015 2.54693C45.79 1.76559 46.712 1.14539 47.7278 0.722174C48.7437 0.298946 49.8333 0.0810547 50.9338 0.0810547C52.0343 0.0810546 53.1239 0.298946 54.1397 0.722173C55.1556 1.14539 56.0776 1.76559 56.8526 2.54693L98.5341 44.2285C99.3155 45.0035 99.9357 45.9255 100.359 46.9413C100.782 47.9572 101 49.0468 101 50.1473C101 51.2478 100.782 52.3374 100.359 53.3533C99.9357 54.3691 99.3155 55.2911 98.5341 56.0661C97.7592 56.8474 96.8372 57.4676 95.8213 57.8908C94.8054 58.314 93.7158 58.5319 92.6154 58.5319C91.5149 58.5319 90.4253 58.314 89.4094 57.8908C88.3935 57.4676 87.4715 56.8474 86.6966 56.0661L50.9338 20.2199L15.171 56.0661C13.6012 57.6358 11.4722 58.5177 9.2522 58.5177C8.15298 58.5177 7.06452 58.3012 6.04897 57.8806C5.03343 57.4599 4.11068 56.8433 3.33341 56.0661C1.76365 54.4963 0.881771 52.3673 0.881771 50.1473C0.881771 49.0481 1.09828 47.9596 1.51893 46.9441C1.93959 45.9285 2.55615 45.0058 3.33341 44.2285Z" fill="#CCCCDC"/>
+  <path d="M98.4644 122.853L56.7829 164.534C56.0079 165.315 55.0859 165.936 54.07 166.359C53.0542 166.782 51.9646 167 50.8641 167C49.7636 167 48.674 166.782 47.6581 166.359C46.6423 165.936 45.7203 165.315 44.9453 164.534L3.26372 122.853C2.48238 122.078 1.86218 121.156 1.43896 120.14C1.01574 119.124 0.797852 118.034 0.797852 116.934C0.797852 115.833 1.01574 114.744 1.43896 113.728C1.86218 112.712 2.48238 111.79 3.26372 111.015C4.03869 110.234 4.96069 109.613 5.97655 109.19C6.99241 108.767 8.08201 108.549 9.1825 108.549C10.283 108.549 11.3726 108.767 12.3885 109.19C13.4043 109.613 14.3263 110.234 15.1013 111.015L50.8641 146.861L86.6269 111.015C88.1966 109.445 90.3257 108.563 92.5457 108.563C93.6449 108.563 94.7333 108.78 95.7489 109.2C96.7644 109.621 97.6872 110.238 98.4644 111.015C100.034 112.585 100.916 114.714 100.916 116.934C100.916 118.033 100.7 119.121 100.279 120.137C99.8583 121.153 99.2417 122.075 98.4644 122.853Z" fill="#CCCCDC"/>
+  <path d="M9.21809 75.2049C4.61407 75.2049 0.881772 78.9372 0.881772 83.5412C0.881772 88.1452 4.61407 91.8775 9.21809 91.8775H92.5813C97.1853 91.8775 100.918 88.1452 100.918 83.5412C100.918 78.9372 97.1853 75.2049 92.5813 75.2049H9.21809Z" fill="#CCCCDC"/>
+</svg>