Support displaying statistics for a region selection in the chart

Show statistics for selected region in datatree-output-component Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
eclipse-cdt-cloud · Mar 8, 2022 · 2fb88b4 · 2fb88b4
1 parent b7edff2
commit 2fb88b4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/packages/react-components/src/components/datatree-output-component.tsx b/packages/react-components/src/components/datatree-output-component.tsx
@@ -8,6 +8,8 @@ import { EntryTree } from './utils/filter-tree/entry-tree';
 import { getAllExpandedNodeIds } from './utils/filter-tree/utils';
 import { TreeNode } from './utils/filter-tree/tree-node';
 import ColumnHeader from './utils/filter-tree/column-header';
+import { cloneDeep } from 'lodash';
+import debounce from 'lodash.debounce';
 
 type DataTreeOutputProps = AbstractOutputProps & {
 };
@@ -23,6 +25,8 @@ type DataTreeOuputState = AbstractOutputState & {
 export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOutputProps, DataTreeOuputState> {
     treeRef: React.RefObject<HTMLDivElement> = React.createRef();
 
+    private _debouncedFetchSelectionData = debounce(() => this.fetchSelectionData(), 500);
+
     constructor(props: AbstractOutputProps) {
         super(props);
         this.state = {
@@ -154,4 +158,35 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
         // fix Warning: Can't perform a React state update on an unmounted component
         this.setState = (_state, _callback) => undefined;
     }
+
+    protected async fetchSelectionData(): Promise<void> {
+        if (this.props.selectionRange) {
+            let payload: any;
+            if (this.props.selectionRange.getStart() < this.props.selectionRange.getEnd()) {
+                payload = QueryHelper.timeQuery([this.props.selectionRange.getStart(), this.props.selectionRange.getEnd()]);
+            } else {
+                payload = QueryHelper.timeQuery([this.props.selectionRange.getEnd(), this.props.selectionRange.getStart()]);
+            }
+
+            payload.parameters.isFiltered = true;
+
+            // TODO: use the data tree endpoint instead of the xy tree endpoint
+            const tspClientResponse = await this.props.tspClient.fetchXYTree(this.props.traceId, this.props.outputDescriptor.id, payload);
+            const treeResponse = tspClientResponse.getModel();
+            if (tspClientResponse.isOk() && treeResponse) {
+                if (treeResponse.model) {
+                    this.setState({
+                        outputStatus: treeResponse.status,
+                        xyTree: treeResponse.model.entries,
+                    });
+                }
+            }
+        }
+    }
+
+    async componentDidUpdate(prevProps: DataTreeOutputProps): Promise<void> {
+        if (this.props.selectionRange && this.props.selectionRange !== prevProps.selectionRange) {
+            this._debouncedFetchSelectionData();
+        }
+    }
 }
diff --git a/packages/react-components/src/components/utils/filter-tree/tree.tsx b/packages/react-components/src/components/utils/filter-tree/tree.tsx
@@ -6,6 +6,7 @@ import { Table } from './table';
 import { getAllExpandedNodeIds } from './utils';
 import { SortConfig, sortNodes } from './sort';
 import ColumnHeader from './column-header';
+import { isEqual } from 'lodash';
 
 interface FilterTreeProps {
     nodes: TreeNode[];
@@ -44,6 +45,8 @@ export class FilterTree extends React.Component<FilterTreeProps, FilterTreeState
         };
     }
 
+    private _filter = '';
+
     getRootNodes = (): TreeNode[] => {
         const nodes = [...this.props.nodes];
         return nodes.filter((node: TreeNode) => node.isRoot === true);
@@ -211,6 +214,7 @@ export class FilterTree extends React.Component<FilterTreeProps, FilterTreeState
     isCollapsed = (id: number): boolean => this.props.collapsedNodes.includes(id);
 
     handleFilterChanged = (filter: string): void => {
+        this._filter = filter;
         let filteredTree: TreeNode[] = [];
         const matchedIds: number[] = [];
         const rootNodes = this.getRootNodes();
@@ -261,8 +265,7 @@ export class FilterTree extends React.Component<FilterTreeProps, FilterTreeState
             onSortConfigChange={this.handleSortConfigChange}
             showHeader={this.props.showHeader}
             headers={this.props.headers}
-            className={this.props.className}
-        />;
+            className={this.props.className} />;
 
     render(): JSX.Element | undefined {
         if (!this.props.nodes) { return undefined; }
@@ -279,4 +282,10 @@ export class FilterTree extends React.Component<FilterTreeProps, FilterTreeState
             return <Message></Message>;
         }
     }
+
+    componentDidUpdate(prevProps: FilterTreeProps): void {
+        if (!isEqual(this.props.nodes, prevProps.nodes)) {
+            this.handleFilterChanged(this._filter);
+        }
+    }
 }