Query: Add pop-up when Explain Checkbox is disabled (thanos-io#6662)

* Added popup when hovering Signed-off-by: Luis Marques <[email protected]> * Small temp fixes Signed-off-by: Luis Marques <[email protected]> * Reverting temp changes Signed-off-by: Luis Marques <[email protected]> * Fixed pop-up Signed-off-by: Luis Marques <[email protected]> * Solved infinite loop caused by useState function Signed-off-by: Luis Marques <[email protected]> * reverted htmlFor Signed-off-by: Luis Marques <[email protected]> * Fixed the tests Signed-off-by: Luis Marques <[email protected]> * Small fixes Signed-off-by: Luis Marques <[email protected]> * Adding explanation to pop-up text Signed-off-by: Luís Marques <[email protected]> --------- Signed-off-by: Luis Marques <[email protected]> Signed-off-by: Luís Marques <[email protected]>
coleenquadros · Sep 18, 2023 · 8006a8f · 8006a8f
1 parent 504e38d
commit 8006a8f
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 62 deletions.
diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/react-app/src/components/Checkbox.test.tsx b/pkg/ui/react-app/src/components/Checkbox.test.tsx
@@ -31,7 +31,7 @@ describe('Checkbox', () => {
     };
     const checkBox = shallow(<Checkbox {...checkBoxProps} id="1" />);
     const input = checkBox.find(Input);
-    expect(Object.keys(input.props())).toHaveLength(4);
+    expect(Object.keys(input.props())).toHaveLength(5);
     expect(input.prop('className')).toEqual('custom-control-input');
     expect(input.prop('id')).toMatch('1');
     expect(input.prop('type')).toEqual('checkbox');

diff --git a/pkg/ui/react-app/src/components/Checkbox.tsx b/pkg/ui/react-app/src/components/Checkbox.tsx
@@ -3,14 +3,21 @@ import { FormGroup, Label, Input, InputProps } from 'reactstrap';
 
 interface CheckboxProps extends InputProps {
   wrapperStyles?: CSSProperties;
+  isExplainCheckbox?: boolean;
 }
 
-const Checkbox: FC<CheckboxProps> = ({ children, wrapperStyles, id, ...rest }) => {
+const Checkbox: FC<CheckboxProps> = ({ children, wrapperStyles, id, disabled, isExplainCheckbox, ...rest }) => {
   return (
     <FormGroup className="custom-control custom-checkbox" style={wrapperStyles}>
-      <Input {...rest} id={id} type="checkbox" className="custom-control-input" />
+      <Input {...rest} id={id} type="checkbox" className="custom-control-input" disabled={disabled} />
       <Label style={{ userSelect: 'none' }} className="custom-control-label" for={id}>
         {children}
+        {isExplainCheckbox && disabled && (
+          <div className="popup-message">
+            Explain allows you to view an expandable query plan of the PromQL query similar to SQL EXPLAIN. This
+            functionality is only available when using the Thanos engine
+          </div>
+        )}
       </Label>
     </FormGroup>
   );

diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx
@@ -436,6 +436,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
                 onChange={this.handleChangeExplain}
                 checked={options.explain}
                 disabled={options.disableExplainCheckbox}
+                isExplainCheckbox={true}
               >
                 Explain
               </Checkbox>

diff --git a/pkg/ui/react-app/src/themes/_shared.scss b/pkg/ui/react-app/src/themes/_shared.scss
@@ -336,4 +336,26 @@
     background-color: #f5f5f5;
     display: block;
     font-family: monospace;
-  }
+  }
+
+  .popup-message {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #ffffff;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin-right: 15px;
+    min-width: 120px;
+    max-width: 250px;
+    width: max-content;
+    white-space: normal;
+    font-size: 14px;
+}
+
+.custom-control-label:hover .popup-message {
+  display: block; 
+}