Add Queryable component to show a green circle and use it in EntryViewLine

ui/src/components/EntryDetailed/EntrySections.module.sass

@@ -31,11 +31,8 @@
 
     .dataKey
         color: $blue-gray
-        margin: 0 0.5rem 0 0
         text-align: right
-        overflow: hidden
         text-overflow: ellipsis
-        width: 1%
         max-width: 15rem
 
     .rulesTitleSuccess

ui/src/components/EntryDetailed/EntrySections.tsx

@@ -3,6 +3,7 @@ import React, {useState} from "react";
 import {SyntaxHighlighter} from "../UI/SyntaxHighlighter/index";
 import CollapsibleContainer from "../UI/CollapsibleContainer";
 import FancyTextDisplay from "../UI/FancyTextDisplay";
+import Queryable from "../UI/Queryable";
 import Checkbox from "../UI/Checkbox";
 import ProtobufDecoder from "protobuf-decoder";
 
@@ -15,22 +16,27 @@ interface EntryViewLineProps {
 }
 
 const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery, selector, overrideQueryValue}) => {
-    return (label && <tr className={styles.dataLine}>
-                <td
-                    className={`queryable ${styles.dataKey}`}
-                    onClick={() => {
-                        if (!selector) {
-                            return
-                        } else if (overrideQueryValue) {
-                            updateQuery(`${selector} == ${overrideQueryValue}`)
-                        } else if (typeof(value) === "string") {
-                            updateQuery(`${selector} == "${JSON.stringify(value).slice(1, -1)}"`)
-                        } else {
-                            updateQuery(`${selector} == ${value}`)
-                        }
-                    }}
-                >
-                    {label}
+    var query = "";
+    if (!selector) {
+        query = "";
+    } else if (overrideQueryValue) {
+        query = `${selector} == ${overrideQueryValue}`;
+    } else if (typeof(value) == "string") {
+        query = `${selector} == "${JSON.stringify(value).slice(1, -1)}"`;
+    } else {
+        query = `${selector} == ${value}`;
+    }
+    return (label && value && <tr className={styles.dataLine}>
+                <td>
+                    <Queryable
+                        text={label}
+                        query={query}
+                        updateQuery={updateQuery}
+                        style={{float: "right"}}
+                        className={`queryable ${styles.dataKey}`}
+                        applyTextEllipsis={false}
+                        displayIconOnMouseOver={true}
+                    />
                 </td>
                 <td>
                     <FancyTextDisplay

ui/src/components/UI/Queryable.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import './style/Queryable.sass';
+
+interface Props {
+    text: string | number,
+    query: string,
+    updateQuery: any,
+    style?: object,
+    className?: string,
+    isPossibleToCopy?: boolean,
+    applyTextEllipsis?: boolean,
+    useTooltip?: boolean,
+    displayIconOnMouseOver?: boolean,
+    onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
+}
+
+const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
+    const [showCopiedNotification, setCopied] = useState(false);
+    const [showTooltip, setShowTooltip] = useState(false);
+    text = String(text);
+
+    console.log(style);
+
+    const onCopy = () => {
+        setCopied(true)
+    };
+
+    useEffect(() => {
+        let timer;
+        if (showCopiedNotification) {
+            updateQuery(query);
+            timer = setTimeout(() => {
+                setCopied(false);
+            }, 1000);
+        }
+        return () => clearTimeout(timer);
+        // eslint-disable-next-line
+    }, [showCopiedNotification]);
+
+    const textElement = <span className={'Queryable-Text'}>{text}</span>;
+
+    const copyButton = text ? <CopyToClipboard text={text} onCopy={onCopy}>
+                    <span
+                        className={`Queryable-Icon`}
+                        title={`Add "${query}" to the filter`}
+                    >
+                        <AddCircleIcon fontSize="small" color="inherit"></AddCircleIcon>
+                        {showCopiedNotification && <span className={'Queryable-CopyNotifier'}>Added</span>}
+                    </span>
+				</CopyToClipboard> : null;
+
+    return <div
+        className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
+        style={style}
+        onMouseOver={ e => setShowTooltip(true)}
+        onMouseLeave={ e => setShowTooltip(false)}
+    >
+            {textElement}
+            {copyButton}
+            {useTooltip && showTooltip && <span className={'Queryable-CopyNotifier'}>{text}</span>}
+    </div>;
+};
+
+export default Queryable;

ui/src/components/UI/style/Queryable.sass

@@ -0,0 +1,45 @@
+.Queryable-Container
+    display: flex
+    align-items: center
+
+    &.displayIconOnMouseOver
+        .Queryable-Icon
+            opacity: 0
+            width: 0px
+            pointer-events: none
+        &:hover
+            .Queryable-Icon
+                opacity: 1
+                pointer-events: all
+
+
+    .Queryable-Icon
+        height: 22px
+        width: 22px
+        cursor: pointer
+        margin-right: 3px
+        color: #27AE60
+
+        &:hover
+            background-color: rgba(255, 255, 255, 0.06)
+            border-radius: 4px
+            color: #1E884B
+
+    &.Queryable-ContainerEllipsis
+        .Queryable-Text
+            text-align: left
+            text-overflow: ellipsis
+            overflow: hidden
+            white-space: nowrap
+            width: calc(100% - 30px)
+
+    .Queryable-CopyNotifier
+        background-color: #1E884B
+        font-weight: normal
+        padding: 2px 5px
+        border-radius: 4px
+        position: absolute
+        transform: translate(0, -80%)
+        color: white
+        z-index: 1000
+