[OGUI-1453] Double click on value to move it to filter box

InfoLogger/public/Model.js

@@ -209,6 +209,7 @@ export default class Model extends Observable {
     // Enter
     if ((code === 13 && !this.messageFocused || code === 13 && e.metaKey) && !this.log.isLiveModeEnabled()) {
       this.log.query();
+      this.log.contextMenu.hide();
     }
     if (!this.messageFocused) {
       // don't listen to keys when it comes from an input (they transform into letters)
@@ -223,6 +224,7 @@ export default class Model extends Observable {
         case 27: // escape
           this.log.removeLogDownloadContent();
           this.accountMenuEnabled = false;
+          this.log.contextMenu.hide();
           break;
         case 37: // left
           if (e.altKey) {

InfoLogger/public/app.css

@@ -40,8 +40,15 @@
 td,
 th { max-width: 0; /* allow ellipsis on tables */ vertical-align: top; }
 
-.cell { line-height: 1rem; font-size: 1rem; padding: 0rem 0.2rem; font-weight: 100; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; /* must be sync with rowHeight constant in view */ }
+.cell { line-height: 1rem; font-size: 1rem; padding: 0rem 0.2rem; font-weight: 100; line-height: 18px; /* must be sync with rowHeight constant in view */ }
 .cell-bordered { border-left: 1px solid rgb(170, 170, 170); }
+.cell-content { display: flex; justify-content: space-between; align-items: center; max-width: 100%; }
+.cell-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
 
 .cell-xs { width: 2rem; }
 .cell-s { width: 4rem; }
@@ -56,6 +63,25 @@ th { max-width: 0; /* allow ellipsis on tables */ vertical-align: top; }
 .row-hover:hover { background-color: rgba(0, 0, 0, .075); }
 .row-selected, .row-selected:hover { background-color: #007bff; color: white; }
 
+/* context menu hint */
+.cell-context-menu-hint {
+  display: none;
+  font-size: 0.80rem;
+  font-weight: bold;
+  color: var(--color-black);
+  background-color: #e0e0e0;
+  border-radius: 3px;
+  padding: 0 3px;
+  line-height: 1;
+  cursor: pointer;
+}
+.cell:hover .cell-context-menu-hint { display: block; }
+.cell-context-menu-hint:hover { background-color: rgba(0, 0, 0, .15); }
+
+/* invert colors for selected rows */
+.row-selected .cell-context-menu-hint { color: var(--color-white); background-color: rgba(255, 255, 255, .15); }
+.row-selected .cell-context-menu-hint:hover { background-color: rgba(255, 255, 255, .3); }
+
 .table-max { width: 100%; }
 
 .pull-right { float: right; }
@@ -95,3 +121,85 @@ footer { border-top: 1px solid var(--color-gray); }
 
 .text-area-for-message:focus { width: 50%; height: 10rem !important; right: 0; position: absolute; }
 a.disabled { pointer-events: none; cursor: default; }
+
+.cell-context-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1100;
+}
+
+.cell-context-menu {
+  position: fixed;
+  z-index: 1101;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border: 1px solid rgba(0,0,0,.15);
+  border-radius: .25rem; 
+  min-width: 220px;
+  max-width: 220px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,.1);
+}
+
+.cell-context-menu-item {
+  cursor: pointer;
+  text-decoration: none;
+  padding: 0.55rem 0.75rem;
+  line-height: 1em;
+  color: var(--color-gray-darker);
+  font-weight: 100;
+  display: flex;
+  flex-direction: row;
+  user-select: none;
+}
+
+.cell-context-menu-item + .cell-context-menu-item {
+    border-top: 1px solid var(--color-gray-light);
+}
+
+.cell-context-menu:first-child { 
+    border-radius: 0.25em 0.25em 0 0;
+}
+
+.cell-context-menu-item:last-child { 
+    border-radius: 0 0 0.25em 0.25em;
+}
+
+.cell-context-menu-item:hover { 
+  text-decoration: none;
+  background-color: var(--color-gray-dark);
+  color: var(--color-gray-lighter);
+}
+
+.cell-context-menu-item:active { 
+  background-color: var(--color-gray-dark);
+  color: var(--color-black);
+}
+
+.cell-context-menu-item.selected { 
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.cell-context-menu-item.disabled,
+.cell-context-menu-item.disabled:hover,
+.cell-context-menu-item.disabled:active {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.cell-context-menu-header {
+  padding: 0.4rem 0.75rem;
+  color: var(--color-gray-darker);
+  background-color: var(--color-gray-light);
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  border-radius: 0.25rem 0.25rem 0 0;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}

InfoLogger/public/log/ContextMenu.js

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { Observable } from '/js/src/index.js';
+
+/**
+ * Model for the log table cell context menu state.
+ */
+export default class ContextMenu extends Observable {
+  constructor() {
+    super();
+
+    this.isOpen = false;
+    this.field = null;
+    this.value = null;
+    this.x = 0;
+    this.y = 0;
+  }
+
+  /**
+   * Open the context menu at the given position for a specific field/value.
+   * @param {string} field - the log field (e.g. 'hostname', 'severity', 'timestamp')
+   * @param {string} value - the cell value
+   * @param {number} x - mouse x position
+   * @param {number} y - mouse y position
+   */
+  show(field, value, x, y) {
+    this.isOpen = true;
+    this.field = field;
+    this.value = value;
+    this.x = x;
+    this.y = y;
+    this.notify();
+  }
+
+  /**
+   * Close the context menu.
+   */
+  hide() {
+    this.isOpen = false;
+    this.notify();
+  }
+}

InfoLogger/public/log/Log.js

@@ -14,6 +14,7 @@
 
 import { Observable, RemoteData } from '/js/src/index.js';
 import LogFilter from '../logFilter/LogFilter.js';
+import ContextMenu from './ContextMenu.js';
 import { MODE } from '../constants/mode.const.js';
 import { TIME_MS } from '../common/Timezone.js';
 import { ROW_HEIGHT } from '../constants/visual.const.js';
@@ -70,6 +71,9 @@ export default class Log extends Observable {
     this.dom = {
       table: '',
     };
+
+    this.contextMenu = new ContextMenu();
+    this.contextMenu.bubbleTo(this);
   }
 
   /**