clp icon indicating copy to clipboard operation
clp copied to clipboard

webui: Add timeline for visualizing results count aggregation; replace `Luxon` with `dayjs`.

Open junhaoliao opened this issue 1 year ago • 2 comments

References

  1. #309 integrated reducer server and added support for count aggregations.
  2. #331 added support for the time bucketed count aggregation.

Description

  1. Add timeline for visualizing results count aggregation.
  2. Replace datetime manipulation library Luxon with dayjs.
  3. Avoid removing inserted collections in SearchJobCollectionsManager to avoid creating a new Meteor.Mongo.Collection object with a same name.

Validation performed

  1. cd <PROJECT_ROOT>; task
  2. cd ./build/clp-package/sbin; ./start-clp.sh
  3. ./compress.sh ~/samples/hive-24hr/i-00c90a0f/
  4. Opened the WebUI address in a browser.
  5. Started a query with string 1 and observed the job finished without error.
  6. Observed the timeline was displayed in default time range selection, which is from Unix epoch to a year from now. image
  7. Hovering onto the one-and-only-one column showed a tooltip, which displayed logs count in the time bucket of desired size of 2 years. image
  8. Dragged to zoom in. Kept zooming in until the time buckets are broken down into reasonable sizes and spanned across the whole timeline. Observed the full starting date time on the left bottom corner of the chart correctly reflected the start of the timeline. image
  9. Kept zooming in until a single column was visible. Verified the timestamp of the one-and-only-one bucket was matching the ones in the results table. image

junhaoliao avatar Mar 29 '24 11:03 junhaoliao

AI @junhaoliao : PR column alignment changes to Chart.js .

junhaoliao avatar Apr 01 '24 05:04 junhaoliao

Nice work. A few high level comments besides the inline ones:

  • Can we set a min height for the bars in the graph? Right now sometimes the height is so low that even tool tips don't show up.
  • Can we improve some of the docstrings to especially document object parameter types and callbacks? Right now, I find myself having to read through the implementation and the call sites to get a clear picture of how the method should be used.
  • Perhaps we can make timelineConfig a class so that we don't have to document its non-trivial structure everywhere.
  • Achieved by adding a minBarLength property into the dataset config.
  • Added a types.js files to document all non-trivial object definiitons.

junhaoliao avatar Apr 04 '24 19:04 junhaoliao