I am working on developing a log viewer using Angular.
Upon user entry, I aim to load historical logs and also begin monitoring for new logs.
Users have the ability to filter logs using a simple form that emits a query object. Each time the query changes, the process restarts (meaning old results are removed, new historical data is loaded, and a new live stream begins).
I have two possible ways of achieving this, but I am not entirely satisfied with either approach.
The first method seems easier to comprehend but it does not adhere to the DRY principle:
const historicalLogs = this.querySubject
.pipe(
debounceTime(250),
tap(() => this.logs = []),
switchMap(
query => this.deviceLogsService.getLogsBefore(query, moment())
)
);
const futureLogs = this.querySubject
.pipe(
debounceTime(250),
tap(() => this.logs = []),
switchMap(
query => timer(1000, 2000).pipe(mergeMap(t => this.deviceLogsService.getLogsAfter(query, moment())))
)
);
merge(historicalLogs, futureLogs)
.subscribe(newLogs => {
this.logs.push(...newLogs);
this.scrollToVeryBottom();
});
The second method avoids violating DRY principles, but may be challenging to understand or analyze in the future:
this.querySubject
.pipe(
debounceTime(250),
tap(() => this.logs = []),
switchMap(query => concat([
this.deviceLogsService.getLogsBefore(query, moment()),
timer(1000, 2000).pipe(mergeMap(t => this.deviceLogsService.getLogsAfter(query, moment())))
]).pipe(mergeAll()))
)
.subscribe(newLogs => {
this.logs.push(...newLogs);
this.scrollToVeryBottom();
});
I am open to any suggestions on how to implement this functionality in a more elegant and readable manner.