forked from thanos-io/thanos
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Return Query Explaination in QueryAPI A param `explain` is added to QueryAPI, if true then explanation returned by the `Explain()` method of the query having structure `ExplainOutputNode` is returned in response. Query Explanation is added under new field in response that is `thanosInfo`. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Add explain checkbox in thanos UI A explain checkbox is added to Thanos Query UI, that requests for query explanation from thanos query api. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Add ExpandableNode Component ExpandableNode component renders Query Explanation in the thanos UI. Requires a new package `react-accessible-treeview`. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Disable Explain checkbox on prometheus engine Prometheus engine sends out error if toggle explain button. To provide better experience, the explain checkbox get disbaled on switching to prometheus engine and enable back on switching to thanos engine. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Add alert box with horizontal scrolling for Explanation Signed-off-by: Pradyumna Krishna <git@onpy.in> * Remove ExpandableNode and Add ListTree Updates the design for query explanation box, removes `ExpandableNode` and the dependency. Builts a new `ListTree` that does the same using reactstrap and custom css. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Minor refactor in Query API response `thanosInfo` is removed from Query reponse and used `explanation` directly. `disableCheckbox` is also renamed to `disableExplainCheckbox` in thanos UI. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Update UI tests to passing Signed-off-by: Pradyumna Krishna <git@onpy.in> * Minor UI changes and test fix UI improvements and Panel test fix other way around, resetting the results on panel construction. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Update promql-engine to use Explain method Signed-off-by: Pradyumna Krishna <git@onpy.in> * Build UI assets Build UI assets, that runs new thanos UI with explain button. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Revert proxy url change from package.json `proxy` was accidently changed and committed with package.json when removed dependency. Hence, reverting it back. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Minor changes in UI Fix requested changes in UI. - Rename `state` and `setState` to `mapping` and `setMapping`. - Rename `NodeTree` to `QueryTree`. - Use unicode characters instead of `-` and `+`. - Fix blue box on explain button. Signed-off-by: Pradyumna Krishna <git@onpy.in> * Update UI assets Signed-off-by: Pradyumna Krishna <git@onpy.in> --------- Signed-off-by: Pradyumna Krishna <git@onpy.in>
- Loading branch information
1 parent
6e7a7a5
commit 1160a88
Showing
9 changed files
with
270 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React, { useState } from 'react'; | ||
| import { InputProps, Collapse, ListGroupItem, ListGroup } from 'reactstrap'; | ||
|
|
||
| export interface QueryTree { | ||
| name: string; | ||
| children?: QueryTree[]; | ||
| } | ||
|
|
||
| interface NodeProps extends InputProps { | ||
| node: QueryTree | null; | ||
| } | ||
|
|
||
| const ListTree: React.FC<NodeProps> = ({ id, node }) => { | ||
| type idMapping = { | ||
| [key: string]: boolean; | ||
| }; | ||
|
|
||
| const [mapping, setMapping] = useState<idMapping>({}); | ||
| const toggle = (e: React.MouseEvent<HTMLDivElement>) => { | ||
| const el = e.target as HTMLDivElement; | ||
| const id = el.getAttribute('id'); | ||
| if (id) { | ||
| setMapping({ ...mapping, [id]: !mapping[id] }); | ||
| } | ||
| }; | ||
|
|
||
| // Constructing List Items recursively. | ||
| const mapper = (nodes: QueryTree[], parentId?: any, lvl?: any) => { | ||
| return nodes.map((node: QueryTree, index: number) => { | ||
| const id = `${index}-${parentId ? parentId : 'top'}`.replace(/[^a-zA-Z0-9-_]/g, ''); | ||
| const item = ( | ||
| <React.Fragment> | ||
| <ListGroupItem | ||
| className={`bg-transparent p-0 border-0 ${parentId ? `rounded-0 ${lvl ? 'border-bottom-0' : ''}` : ''}`} | ||
| > | ||
| { | ||
| <div className={`d-flex align-items-center`} style={{ paddingLeft: `${25 * lvl}px` }}> | ||
| {node.children && ( | ||
| <div className="pl-0 btn text-primary" style={{ cursor: 'inherit' }} color="link"> | ||
| {mapping[id] ? '\u002B' : '\u002D'} | ||
| </div> | ||
| )} | ||
| <div id={id} style={{ cursor: `${node.children ? 'pointer' : 'inherit'}` }} onClick={toggle}> | ||
| {node.name} | ||
| </div> | ||
| </div> | ||
| } | ||
| </ListGroupItem> | ||
| {node.children && <Collapse isOpen={mapping[id]}>{mapper(node.children, id, (lvl || 0) + 1)}</Collapse>} | ||
| </React.Fragment> | ||
| ); | ||
|
|
||
| return item; | ||
| }); | ||
| }; | ||
|
|
||
| if (node) { | ||
| return <ListGroup>{mapper([node], id)}</ListGroup>; | ||
| } else { | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| export default ListTree; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.