Skip to content

Commit

Permalink
Support for searching for previous event in the Events Table
Browse files Browse the repository at this point in the history 
- Add a 'previous' button in the column search cells right beside the
'next' button
- Use keyboard short-cut SHIFT+ENTER to search previous event

fixes #412

Change-Id: Ia26095eee1dc7f6feb8072e9587390b4c6dff793
Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
  • Loading branch information
@bhufmann
bhufmann committed Jul 27, 2021
1 parent cb7d812 commit f5a06e6
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 7 deletions.
55 changes: 50 additions & 5 deletions packages/react-components/src/components/table-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ type TableOutputProps = AbstractOutputProps & {
tableWidth?: string;
};

enum Direction {
NEXT,
PREVIOUS
}

export class TableOutputComponent extends AbstractOutputComponent<TableOutputProps, TableOuputState> {
private debugMode = false;
private columnIds: Array<number> = [];
Expand Down Expand Up @@ -84,6 +89,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
this.onKeyDown = this.onKeyDown.bind(this);
this.searchEvents = this.searchEvents.bind(this);
this.findNextMatchedEvent = this.findNextMatchedEvent.bind(this);
this.findPreviousMatchedEvent = this.findPreviousMatchedEvent.bind(this);
}

renderMainArea(): React.ReactNode {
Expand Down Expand Up @@ -315,6 +321,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
suppressFilterButton: true,
onFilterChange: this.searchEvents,
onclickNext: this.findNextMatchedEvent,
onclickPrevious: this.findPreviousMatchedEvent,
colName: columnHeader.id.toString()
},
icons: {
Expand Down Expand Up @@ -409,7 +416,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
return lines[0].index;
}

private fetchAdditionalParams(isFiltered = false): ({ [key: string]: any }) {
private fetchAdditionalParams(isFiltered: boolean, direction?: Direction): ({ [key: string]: any }) {
let additionalParams: { [key: string]: any } = {};
const filterObj: { [key: number]: string } = {};
if (this.filterModel) {
Expand All @@ -421,6 +428,9 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
['table_search_expressions']: filterObj,
['isFiltered']: isFiltered
};
if (direction !== undefined) {
additionalParams['table_search_direction'] = direction.toString;
}
}
return additionalParams;

Expand All @@ -431,7 +441,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
const tspClient = this.props.tspClient;
const outputId = this.props.outputDescriptor.id;

const additionalParams = this.fetchAdditionalParams();
const additionalParams = this.fetchAdditionalParams(false);
const tspClientResponse = await tspClient.fetchTableLines(traceUUID, outputId, QueryHelper.tableQuery(this.columnIds, fetchIndex, linesToFetch, additionalParams));
const lineResponse = tspClientResponse.getModel();
const linesArray = new Array<Line>();
Expand Down Expand Up @@ -490,11 +500,11 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
}
}

private async findNextMatchIndex(currRowIndex: number) {
private async findMatchIndex(currRowIndex: number, direction = Direction.NEXT) {
const traceUUID = this.props.traceId;
const tspClient = this.props.tspClient;
const outputId = this.props.outputDescriptor.id;
const additionalParams = this.fetchAdditionalParams(true);
const additionalParams = this.fetchAdditionalParams(true, direction);
const tspClientResponse = await tspClient.fetchTableLines(traceUUID, outputId, QueryHelper.tableQuery(this.columnIds, currRowIndex, 1, additionalParams));
const lineResponse = tspClientResponse.getModel();
if (!tspClientResponse.isOk() || !lineResponse) {
Expand Down Expand Up @@ -528,7 +538,42 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
}

const currRowIndex = this.gridApi?.getLastDisplayedRow() + 1;
const lineIndex = await this.findNextMatchIndex(currRowIndex);
const lineIndex = await this.findMatchIndex(currRowIndex);
if (lineIndex) {
this.gridApi.ensureIndexVisible(lineIndex);
this.selectStartIndex = this.selectEndIndex = lineIndex;
this.handleRowSelectionChange();
this.enableIndexSelection = true;
this.selectRows();
}
}
}

private async findPreviousMatchedEvent() {
let isFound = false;
if (this.gridApi) {
this.gridApi.deselectAll();
const rowNodes: RowNode[] = [];

const currRowIndex = this.selectStartIndex === -1 ? this.gridApi?.getLastDisplayedRow() + 1 : this.selectStartIndex;
this.gridApi.forEachNode(rowNode => rowNodes.push(rowNode));

rowNodes.reverse().forEach(rowNode => {
if (rowNode.rowIndex < Math.max(this.selectStartIndex, this.selectEndIndex) && rowNode.data
&& rowNode.data['isMatched'] && !isFound) {
this.gridApi?.ensureIndexVisible(rowNode.rowIndex);
this.selectStartIndex = this.selectEndIndex = rowNode.rowIndex;
this.handleRowSelectionChange();
rowNode.setSelected(true);
isFound = true;
}
});

if (isFound) {
return;
}

const lineIndex = await this.findMatchIndex(currRowIndex, Direction.PREVIOUS);
if (lineIndex) {
this.gridApi.ensureIndexVisible(lineIndex);
this.selectStartIndex = this.selectEndIndex = lineIndex;
Expand Down
16 changes: 14 additions & 2 deletions packages/react-components/src/components/table-renderer-components.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { faAngleDown, faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
import { faAngleDown, faAngleUp, faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ICellRendererParams, IFloatingFilterParams } from 'ag-grid-community';
import debounce from 'lodash.debounce';
Expand All @@ -12,6 +12,7 @@ type CellRendererProps = ICellRendererParams & {
type SearchFilterRendererProps = IFloatingFilterParams & {
onFilterChange: (colName: string, filterValue: string) => void;
onclickNext: () => void;
onclickPrevious: () => void;
colName: string;
};

Expand Down Expand Up @@ -90,6 +91,7 @@ export class SearchFilterRenderer extends React.Component<SearchFilterRendererPr
this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
this.onClickHandler = this.onClickHandler.bind(this);
this.onDownClickHandler = this.onDownClickHandler.bind(this);
this.onUpClickHandler = this.onUpClickHandler.bind(this);
this.onCloseClickHandler = this.onCloseClickHandler.bind(this);
this.onKeyDownEvent = this.onKeyDownEvent.bind(this);

Expand All @@ -110,14 +112,19 @@ export class SearchFilterRenderer extends React.Component<SearchFilterRendererPr
<input type="text" autoFocus={true} onKeyDown={this.onKeyDownEvent} onInput={this.onInputBoxChanged} style={{ width: '50%', margin: '10px' }} />
<FontAwesomeIcon className='hoverClass' icon={faTimes} style={{ marginTop: '20px' }} onClick={this.onCloseClickHandler} />
<FontAwesomeIcon className='hoverClass' icon={faAngleDown} style={{ marginLeft: '10px', marginTop: '20px' }} onClick={this.onDownClickHandler} />
<FontAwesomeIcon className='hoverClass' icon={faAngleUp} style={{ marginLeft: '10px', marginTop: '20px' }} onClick={this.onUpClickHandler} />
</div>}
</div>
);
}

private onKeyDownEvent(event: React.KeyboardEvent) {
if (event.key === 'Enter') {
this.props.onclickNext();
if (event.shiftKey) {
this.props.onclickPrevious();
} else {
this.props.onclickNext();
}
} else if (event.key === 'Escape') {
this.setState({
hasClicked: false
Expand Down Expand Up @@ -158,6 +165,11 @@ export class SearchFilterRenderer extends React.Component<SearchFilterRendererPr
return;
}

private onUpClickHandler() {
this.props.onclickPrevious();
return;
}

private onCloseClickHandler(event: React.MouseEvent) {
this.setState({
hasClicked: false
Expand Down

0 comments on commit f5a06e6

Please sign in to comment.