Add transaction ids to viewer and a filter for them am: 166b11bcb5

Original change: https://googleplex-android-review.googlesource.com/c/platform/development/+/23602064

Change-Id: I409a3f4e5a357bac33777bfb796fc0f34e34c337
Signed-off-by: Automerger Merge Worker <android-build-automerger-merge-worker@system.gserviceaccount.com>
This commit is contained in:
Pablo Gamito
2023-06-09 14:18:28 +00:00
committed by Automerger Merge Worker
7 changed files with 101 additions and 28 deletions

View File

@@ -19,9 +19,10 @@ class Events {
static PidFilterChanged = 'ViewerTransactionsEvent_PidFilterChanged';
static UidFilterChanged = 'ViewerTransactionsEvent_UidFilterChanged';
static TypeFilterChanged = 'ViewerTransactionsEvent_TypeFilterChanged';
static IdFilterChanged = 'ViewerTransactionsEvent_IdFilterChanged';
static LayerIdFilterChanged = 'ViewerTransactionsEvent_LayerIdFilterChanged';
static WhatSearchStringChanged = 'ViewerTransactionsEvent_WhatSearchStringChanged';
static EntryClicked = 'ViewerTransactionsEvent_EntryClicked';
static IdFilterChanges = 'ViewerTransactionsEvent_IdFilterChanged';
}
export {Events};

View File

@@ -38,7 +38,8 @@ export class Presenter {
private pidFilter: string[] = [];
private uidFilter: string[] = [];
private typeFilter: string[] = [];
private idFilter: string[] = [];
private layerIdFilter: string[] = [];
private idFilter: string | undefined = undefined;
private whatSearchString = '';
constructor(traces: Traces, notifyUiDataCallback: (data: UiData) => void) {
@@ -88,8 +89,18 @@ export class Presenter {
this.notifyUiDataCallback(this.uiData);
}
onIdFilterChanged(ids: string[]) {
this.idFilter = ids;
onLayerIdFilterChanged(ids: string[]) {
this.layerIdFilter = ids;
this.computeUiData();
this.notifyUiDataCallback(this.uiData);
}
onIdFilterChanged(id: string) {
if (id === '') {
this.idFilter = undefined;
} else {
this.idFilter = id;
}
this.computeUiData();
this.notifyUiDataCallback(this.uiData);
}
@@ -127,7 +138,14 @@ export class Presenter {
const allPids = this.getUniqueUiDataEntryValues(entries, (entry: UiDataEntry) => entry.pid);
const allUids = this.getUniqueUiDataEntryValues(entries, (entry: UiDataEntry) => entry.uid);
const allTypes = this.getUniqueUiDataEntryValues(entries, (entry: UiDataEntry) => entry.type);
const allIds = this.getUniqueUiDataEntryValues(entries, (entry: UiDataEntry) => entry.id);
const allLayerAndDisplayIds = this.getUniqueUiDataEntryValues(
entries,
(entry: UiDataEntry) => entry.layerOrDisplayId
);
const allTransactionIds = this.getUniqueUiDataEntryValues(
entries,
(entry: UiDataEntry) => entry.transactionId
);
let filteredEntries = entries;
@@ -149,8 +167,15 @@ export class Presenter {
filteredEntries = filteredEntries.filter((entry) => this.typeFilter.includes(entry.type));
}
if (this.idFilter.length > 0) {
filteredEntries = filteredEntries.filter((entry) => this.idFilter.includes(entry.id));
if (this.layerIdFilter.length > 0) {
filteredEntries = filteredEntries.filter((entry) =>
this.layerIdFilter.includes(entry.layerOrDisplayId)
);
}
if (this.idFilter !== undefined) {
filteredEntries = filteredEntries.filter(
(entry) => entry.transactionId.toString() === this.idFilter
);
}
filteredEntries = filteredEntries.filter((entry) => entry.what.includes(this.whatSearchString));
@@ -172,7 +197,8 @@ export class Presenter {
allPids,
allUids,
allTypes,
allIds,
allLayerAndDisplayIds,
allTransactionIds,
filteredEntries,
currentEntryIndex,
selectedEntryIndex,
@@ -234,6 +260,7 @@ export class Presenter {
transactionStateProto.uid.toString(),
UiDataEntryType.LAYER_CHANGED,
layerStateProto.layerId.toString(),
transactionStateProto.transactionId.toString(),
layerStateProto.what,
treeGenerator.generate('LayerState', ObjectFormatter.format(layerStateProto))
)
@@ -250,6 +277,7 @@ export class Presenter {
transactionStateProto.uid.toString(),
UiDataEntryType.DISPLAY_CHANGED,
displayStateProto.id.toString(),
transactionStateProto.transactionId.toString(),
displayStateProto.what,
treeGenerator.generate('DisplayState', ObjectFormatter.format(displayStateProto))
)
@@ -268,6 +296,7 @@ export class Presenter {
UiDataEntryType.LAYER_ADDED,
layerCreationArgsProto.layerId.toString(),
'',
'',
treeGenerator.generate(
'LayerCreationArgs',
ObjectFormatter.format(layerCreationArgsProto)
@@ -287,6 +316,7 @@ export class Presenter {
UiDataEntryType.LAYER_DESTROYED,
destroyedLayerId.toString(),
'',
'',
treeGenerator.generate('DestroyedLayerId', ObjectFormatter.format(destroyedLayerId))
)
);
@@ -302,6 +332,7 @@ export class Presenter {
Presenter.VALUE_NA,
UiDataEntryType.DISPLAY_ADDED,
displayStateProto.id.toString(),
'',
displayStateProto.what,
treeGenerator.generate('DisplayState', ObjectFormatter.format(displayStateProto))
)
@@ -319,6 +350,7 @@ export class Presenter {
UiDataEntryType.DISPLAY_REMOVED,
removedDisplayId.toString(),
'',
'',
treeGenerator.generate('RemovedDisplayId', ObjectFormatter.format(removedDisplayId))
)
);
@@ -335,6 +367,7 @@ export class Presenter {
UiDataEntryType.LAYER_HANDLE_DESTROYED,
destroyedLayerHandleId.toString(),
'',
'',
treeGenerator.generate(
'DestroyedLayerHandleId',
ObjectFormatter.format(destroyedLayerHandleId)

View File

@@ -76,7 +76,9 @@ describe('PresenterTransactions', () => {
'LAYER_DESTROYED',
'LAYER_HANDLE_DESTROYED',
]);
expect(outputUiData?.allIds.length).toEqual(116);
expect(outputUiData?.allTransactionIds.length).toEqual(1152);
expect(outputUiData?.allLayerAndDisplayIds.length).toEqual(116);
expect(outputUiData?.entries.length).toEqual(TOTAL_OUTPUT_ENTRIES);
@@ -96,6 +98,16 @@ describe('PresenterTransactions', () => {
expect(outputUiData!.scrollToIndex).toEqual(13);
});
it('filters entries according to transaction ID filter', () => {
presenter.onIdFilterChanged('');
expect(outputUiData!.entries.length).toEqual(TOTAL_OUTPUT_ENTRIES);
presenter.onIdFilterChanged('2211908157465');
expect(new Set(outputUiData!.entries.map((entry) => entry.transactionId))).toEqual(
new Set(['2211908157465'])
);
});
it('filters entries according to VSYNC ID filter', () => {
presenter.onVSyncIdFilterChanged([]);
expect(outputUiData!.entries.length).toEqual(TOTAL_OUTPUT_ENTRIES);
@@ -160,15 +172,21 @@ describe('PresenterTransactions', () => {
);
});
it('filters entries according to ID filter', () => {
presenter.onIdFilterChanged([]);
expect(new Set(outputUiData!.entries.map((entry) => entry.id)).size).toBeGreaterThan(20);
it('filters entries according to layer or display ID filter', () => {
presenter.onLayerIdFilterChanged([]);
expect(
new Set(outputUiData!.entries.map((entry) => entry.layerOrDisplayId)).size
).toBeGreaterThan(20);
presenter.onIdFilterChanged(['1']);
expect(new Set(outputUiData!.entries.map((entry) => entry.id))).toEqual(new Set(['1']));
presenter.onLayerIdFilterChanged(['1']);
expect(new Set(outputUiData!.entries.map((entry) => entry.layerOrDisplayId))).toEqual(
new Set(['1'])
);
presenter.onIdFilterChanged(['1', '3']);
expect(new Set(outputUiData!.entries.map((entry) => entry.id))).toEqual(new Set(['1', '3']));
presenter.onLayerIdFilterChanged(['1', '3']);
expect(new Set(outputUiData!.entries.map((entry) => entry.layerOrDisplayId))).toEqual(
new Set(['1', '3'])
);
});
it('filters entries according to "what" search string', () => {

View File

@@ -21,7 +21,8 @@ class UiData {
public allPids: string[],
public allUids: string[],
public allTypes: string[],
public allIds: string[],
public allLayerAndDisplayIds: string[],
public allTransactionIds: string[],
public entries: UiDataEntry[],
public currentEntryIndex: undefined | number,
public selectedEntryIndex: undefined | number,
@@ -29,7 +30,7 @@ class UiData {
public currentPropertiesTree: undefined | PropertiesTreeNode
) {}
static EMPTY = new UiData([], [], [], [], [], [], undefined, undefined, undefined, undefined);
static EMPTY = new UiData([], [], [], [], [], [], [], undefined, undefined, undefined, undefined);
}
class UiDataEntry {
@@ -40,7 +41,8 @@ class UiDataEntry {
public pid: string,
public uid: string,
public type: string,
public id: string,
public layerOrDisplayId: string,
public transactionId: string,
public what: string,
public propertiesTree?: PropertiesTreeNode
) {}

View File

@@ -46,14 +46,18 @@ class ViewerTransactions implements Viewer {
this.presenter.onTypeFilterChanged((event as CustomEvent).detail);
});
this.htmlElement.addEventListener(Events.IdFilterChanged, (event) => {
this.presenter.onIdFilterChanged((event as CustomEvent).detail);
this.htmlElement.addEventListener(Events.LayerIdFilterChanged, (event) => {
this.presenter.onLayerIdFilterChanged((event as CustomEvent).detail);
});
this.htmlElement.addEventListener(Events.WhatSearchStringChanged, (event) => {
this.presenter.onWhatSearchStringChanged((event as CustomEvent).detail);
});
this.htmlElement.addEventListener(Events.IdFilterChanges, (event) => {
this.presenter.onIdFilterChanged((event as CustomEvent).detail);
});
this.htmlElement.addEventListener(Events.EntryClicked, (event) => {
this.presenter.onEntryClicked((event as CustomEvent).detail);
});

View File

@@ -26,6 +26,12 @@ import {UiData} from './ui_data';
<div class="entries">
<div class="filters">
<div class="time"></div>
<div class="id">
<mat-form-field appearance="fill">
<mat-label>TX ID</mat-label>
<input matInput [(ngModel)]="idString" (input)="onIdSearchStringChanged()" />
</mat-form-field>
</div>
<div class="vsyncid">
<mat-form-field appearance="fill">
<mat-label>VSYNC ID</mat-label>
@@ -69,8 +75,8 @@ import {UiData} from './ui_data';
<div class="id">
<mat-form-field appearance="fill">
<mat-label>LAYER/DISP ID</mat-label>
<mat-select (selectionChange)="onIdFilterChanged($event)" multiple>
<mat-option *ngFor="let id of uiData.allIds" [value]="id">
<mat-select (selectionChange)="onLayerIdFilterChanged($event)" multiple>
<mat-option *ngFor="let id of uiData.allLayerAndDisplayIds" [value]="id">
{{ id }}
</mat-option>
</mat-select>
@@ -94,6 +100,9 @@ import {UiData} from './ui_data';
<div class="time">
<span class="mat-body-1">{{ entry.time }}</span>
</div>
<div class="id">
<span class="mat-body-1">{{ entry.transactionId }}</span>
</div>
<div class="vsyncid">
<span class="mat-body-1">{{ entry.vsyncId }}</span>
</div>
@@ -107,7 +116,7 @@ import {UiData} from './ui_data';
<span class="mat-body-1">{{ entry.type }}</span>
</div>
<div class="id">
<span class="mat-body-1">{{ entry.id }}</span>
<span class="mat-body-1">{{ entry.layerOrDisplayId }}</span>
</div>
<div class="what">
<span class="mat-body-1">{{ entry.what }}</span>
@@ -222,6 +231,7 @@ import {UiData} from './ui_data';
})
class ViewerTransactionsComponent {
uiData: UiData = UiData.EMPTY;
idString = '';
whatSearchString = '';
@ViewChild(CdkVirtualScrollViewport) private scrollComponent?: CdkVirtualScrollViewport;
@@ -255,14 +265,18 @@ class ViewerTransactionsComponent {
this.emitEvent(Events.TypeFilterChanged, event.value);
}
onIdFilterChanged(event: MatSelectChange) {
this.emitEvent(Events.IdFilterChanged, event.value);
onLayerIdFilterChanged(event: MatSelectChange) {
this.emitEvent(Events.LayerIdFilterChanged, event.value);
}
onWhatSearchStringChange() {
this.emitEvent(Events.WhatSearchStringChanged, this.whatSearchString);
}
onIdSearchStringChanged() {
this.emitEvent(Events.IdFilterChanges, this.idString);
}
onEntryClicked(index: number) {
this.emitEvent(Events.EntryClicked, index);
}

View File

@@ -82,10 +82,11 @@ async function makeUiData(): Promise<UiData> {
'PID_VALUE',
'UID_VALUE',
'TYPE_VALUE',
'ID_VALUE',
'LAYER_OR_DISPLAY_ID_VALUE',
'TRANSACTION_ID_VALUE',
'flag1 | flag2 | ...',
propertiesTree
);
return new UiData([], [], [], [], [], [entry], 0, 0, 0, propertiesTree);
return new UiData([], [], [], [], [], [], [entry], 0, 0, 0, propertiesTree);
}