in web/frontend/src/app/pages/streams/modules/monitor-log/components/monitor-log-grid/monitor-log-grid.component.ts [211:412]
private gridIsReady(readyEvent: GridReadyEvent) {
this.readyApi = {...readyEvent};
this.gridReady$.next(readyEvent);
this.gridService.setTooltipDelay(readyEvent);
const tab$ = this.appStore.pipe(
select(getActiveOrFirstTab),
filter((tab: TabModel) => tab && tab.monitor),
distinctUntilChanged((prevTabModel: TabModel, nextTabModel: TabModel) => {
const PREV = new TabModel(prevTabModel);
const NEXT = new TabModel(nextTabModel);
delete PREV.tabSettings;
delete NEXT.tabSettings;
return Diff(PREV, NEXT);
}),
);
this.appStore
.pipe(
select(getActiveTabFilters),
filter((filter) => !!filter),
takeUntil(this.destroy$),
)
.subscribe((filter: FilterModel) => {
this.tabFilter = {...filter};
});
this.schema$ = tab$.pipe(
tap(() => {
this.loaded$.next(false);
this.error$.next(null);
}),
switchMap(tab => this.schemaService.getSchema(tab.stream, null, true).pipe(
catchError(e => {
this.error$.next(e);
return of(null);
}),
filter(s => !!s),
)),
tap(() => this.loaded$.next(true)),
);
this.schema$.pipe(
switchMap(schema => this.tabName$.pipe(filter(t => !!t)).pipe(map(tabName => [schema, tabName]), take(1))),
takeUntil(this.destroy$),
).subscribe(([schema, tabName]) => {
if (!schema.types) {
return;
}
this.schemaMap = this.streamModelsService.getSchemaMap(schema.all);
if (schema.types?.length) {
this.schema = [...schema.types];
}
const hideAllColumns = false;
const props = [
columnsVisibleColumn(),
{
headerName: 'Symbol',
field: 'symbol',
tooltipField: 'symbol',
pinned: 'left',
filter: false,
sortable: false,
width: 100,
headerTooltip: 'Symbol',
},
{
headerName: 'Timestamp',
field: 'timestamp',
pinned: 'left',
filter: false,
sortable: false,
sort: 'desc',
comparator: (valueA, valueB, nodeA, nodeB, isInverted) => {
let VALUE = new Date(valueA).getTime() - new Date(valueB).getTime();
if (isInverted) VALUE = -1 * VALUE;
if (VALUE > 0) {
return -1;
} else if (VALUE === 0) {
return 0;
}
return 1;
},
width: 180,
headerTooltip: 'Timestamp',
cellRenderer: (params: ICellRendererParams) => this.gridService.dateFormat(params, params.data?.nanoTime, true),
tooltipValueGetter: (params: ICellRendererParams) => this.gridService.dateFormat(params, params.data?.nanoTime, true),
},
{
headerName: 'Type',
field: '$type',
pinned: 'left',
filter: false,
sortable: false,
headerTooltip: 'Type',
hide: true,
},
...this.gridService.columnFromSchema(
this.streamModelsService.getSchemaForColumns(
schema.types,
schema.all,
),
hideAllColumns,
),
];
readyEvent.api.setColumnDefs(null);
readyEvent.api.setColumnDefs(props);
this.gridStateLS = gridStateLSInit(readyEvent.columnApi, tabName, this.gridStateLS);
this.gridContextMenuService.addColumnSizeMenuItems(() => this.gridStateLS, () => this.subIsInited, tabName);
this.messageInfoService.setGridApi(this.readyApi);
if (
this.tabFilter &&
this.tabFilter.filter_types &&
this.readyApi &&
this.readyApi.columnApi &&
this.readyApi.columnApi.getAllColumns() &&
this.readyApi.columnApi.getAllColumns().length
) {
const columns = [...this.readyApi.columnApi.getAllColumns()];
const filter_types_arr = this.tabFilter.filter_types;
const columnsVisible = [];
for (let j = 0; j < filter_types_arr.length; j++) {
for (let i = 0; i < columns.length; i++) {
if (
String(columns[i]['colId']).indexOf(
String(filter_types_arr[j]).replace(/\./g, '-'),
) !== -1
) {
columnsVisible.push(columns[i]['colId']);
} else if (
columns[i]['colId'] !== '0' &&
columns[i]['colId'] !== 'symbol' &&
columns[i]['colId'] !== 'timestamp'
) {
this.readyApi.columnApi.setColumnVisible(columns[i]['colId'], false);
}
}
}
for (const col of columnsVisible) {
this.readyApi.columnApi.setColumnVisible(col, true);
}
}
});
tab$
.pipe(takeUntil(this.destroy$), distinctUntilChanged())
.subscribe((tab: TabModel) => {
this.tabData = tab;
if (tab.symbol) {
this.symbolName = tab.symbol;
}
if (tab.id) {
this.tabName$.next(tab.stream + tab.id);
}
if (this.subscribeTimer) {
clearTimeout(this.subscribeTimer);
delete this.subscribeTimer;
}
this.cleanWebsocketSubscription();
this.subscribeTimer = setTimeout(() => {
const socketData: WSLiveModel = {
fromTimestamp: null,
};
if (tab.symbol) {
socketData.symbols = [tab.symbol];
}
if (tab.space) {
socketData.space = tab.space;
}
if (tab.filter.filter_symbols && tab.filter.filter_symbols.length) {
socketData.symbols = tab.filter.filter_symbols;
}
if (tab.filter.filter_types && tab.filter.filter_types.length) {
socketData.types = tab.filter.filter_types;
}
this.monitorLogGridDataService?.destroy();
this.subIsInited = true;
this.monitorLogGridDataService
.getSubscription(
`/user/topic/monitor/${escape(tab.stream)}`,
socketData,
this.schemaMap,
)
.pipe(takeUntil(this.destroy$))
.subscribe(({data, newDataLength}) => {
this.readyApi.api.setRowData(data);
if (newDataLength) {
this.flashRows(this.readyApi.api, newDataLength);
}
});
}, 500);
});
}