eclipse-cdt-cloud / theia-trace-extension Goto Github PK

If while the user navigates on the theia-trace-extension, either the trace server or the theia backend is shut down, the UI should handle the absence of server correctly and reconnect when it is coming back

• Provide the data through a data provider in Trace Compass

XY Component is using ChartJs wrapped in a react-chartjs-2 library. We should create our own instead of using the library. It's not hard to do and will offer way more flexibility to change the axis, draw over the chart and add plugins to chartjs. This should be looked into before subsequent tasks as it may have an impact on how to solve them. Some problems occur when panning. Observe what is happening, that shouldn’t be.

It should be possible to navigate the time graph in a fast seamless way, no matter the size of the trace. Any performance issue observed should be improved.

See #23

It should be possible to trigger actions on various items of the time graph: follow thread, filtering, etc.

Outputs are now sorted arbitrarily, such that 2 traces having the same outputs or at least many common ones, will show the outputs differently sorted.

They should be sorted in a consistent way, such that if output X if before output Y for one trace, it is always so for other traces.

XY Component should use a custom axis instead of the one used right now. Custom axis are supported in ChartJs and the axis created should take all the information needed from the "universal" time axis

When clicking elements in the various sub-view, the user should have visual feedback that something was selected, especially if the action takes time.

The data on the theia frontend should be filterable and searchable

• Add the ability to filter and search: a box somewhere to send the query to the server
• Survey other tracing/monitoring frontend to see how they do filters
• Show active filters, enable/disable them. A lot of web app have such nice UX for those filters
• In the Trace Compass incubator is a language server for the filters, it can be used to make global filters and searches in Theia, which would filter all the opened viewers
• Add a filter builder interface? given the outputs that are opened, pre-fill some fields. Should this kind of filter be done client-side too? Needs some thinking

• In Trace Compass, density data should be provided by data providers. It can maybe use the existing XY data provider, but using a different scale
• The density viewers in Trace Compass should use the data provider
• Theia should support this view type too. The different X axis may be tricky.
• Support many density series

• When one of the calls to the trace server returns with an error, the theia frontend should handle it properly, either by doing the appropriate actions to fix it (post again, re-post the trace, etc), or add the error to the status bar at the bottom so the user can see why an output is not shown or what he expected did not happen.

• The frontend should also handle when the trace server is not online

For now, the trace server supports only one user. But eventually, it should support more than one, many users can open the same trace/experiment at once. Keep track of who have the trace opened and delete the traces from server only when all users have stopped using it.

The various Theia outputs now open at the full width of the trace viewer and with a fixed height. It should be possible to resize and move all outputs. The layout used, the react-grid-layout, should provide everything needed to do this (https://github.com/STRML/react-grid-layout)

But all the containees should also be responsive.

Add mechanism to cancel a request. Using the abort signal from the tsp-typescript-client and the listener in the Trace Compass server

The time-axis used is part of the timeline-chart library. It should be moved in a separate library so that it can be reused (eg for XY charts) and updated separately. The time-axis is the basis for navigation: zoom in/out, show the current time range.

• There is a unit controller "TimeGraphUnitController in the timeline-chart library that control the "time" and a "TimeAxisComponent" that use the unit controller to draw the axis
• Maybe everything can stay in the timeline-chart library or can be split into different components that can be added as dependencies
• The time-axis also has a visual representation. Be creative ;-) Lttng-scope had an interesting approach

Entries have a parentID which represents a tree structure. The entry list side should thus be displayed as a tree

It should be easy for users to install and run the theia-trace-extension and trace server.

We should look at how other nodejs applications do, like vscode. For ubuntu, snap can be used

When a request takes a lot of time to run, there should be a way to show progress.

Maybe using server-side events?

Some data providers support arrows, they should be supported by the time graph.

For arrows and annotations, look if the use of different layers for time graph would be useful.

When a state has a label, it should be displayed in the state if it is wide enough to be actually read.

If the theia server restarts, the traces that were opened on the server should be openable again by the clients.

requires #43

The left part of the view showing the entries should be a filtered tree, with the possibility to check elements to display their data.

When hovering over a state, the tooltips should be displayed in the time graph

This is the type of categorical view that can be used as base output

• Make sure the data is provided through a data provider in Trace Compass
• Support this data type with pie chart in Theia

Currently to know if an analysis is completed, it uses fetchTree() to get the status. This is bad since fetchTree() can be a long call. Need to use OutputDescriptor at some point or other better way (maybe Server-side events)

• Add to the TSP a way to send extensions to the server, retrieve and execute them. This, along with everything that involves the TSP will require a more thorough review, maybe on mail on the mailing list.
• Have the Trace Compass Server implement the extension for scripting
• Have the Trace Compass Server implement the extension for XML analysis
• Allow any extension to be overwritten
• Support providing extension from the theia frontend

8.14 fails 12.16.1 works, a minimum requirement would be nice.

The XY chart part should support all styles:

• scatter
• line
• bar
• stack
• area

When extensions are supported in Theia, support uploading and running XML analyses

• Allow to edit XML in Theia
• Implement an LSP to autofill some possible information in the XML

Some data providers only provide tree or table data (no time line required). The respective outputs should be displayed properly.

• In Trace Compass, segment tables should be implemented using data providers
• Segment tables should be pageable to avoid transmitting too much data

The Trace Compass Incubator supports scripting in Javascript and Python. Part of those scripts are UI specific and should be run on the client (that should be implemented differently than in Eclipse), other part are data-specific, so should be run in the server backend (common)

• Package EASE plugins so that there can be core-only features (require modification on the Eclipse EASE project)
• Package the Trace Compass feature as core-only features (those are features in the incubator)
• Support the core-only functionalities (for example script-defined data providers) in Theia.
• Test more complex use cases, involving UI-side or python third-party libraries features.

Use semver for component versions:

Versioning should be done for the following components:

• Theia backend
• Trace Server
• Trace server protocol

Compatibility of version should be handled as well.

Get inspiration from other trace or related viewers and UI:

• Perfetto: https://ui.perfetto.dev/#!/viewer
• Grafana
• Kibana
• Wireshark
• Kernelshark
• Windows Performance Analyzer

It should be possible to navigate a trace using either the keyboard or mouse, like in Trace Compass:

• WASD: WS to zoom, AD to pan
• Arrows: navigate at the same zoom level in the direction
• Mouse: scroll: zoom in/out

When hovering in the XY chart zone, it should open a box and show the current value for all available series

Add a widget to display a filtered tree with various columns

Next to the trace name in the trace explorer is a button to copy-paste a URL to share with someone else. The source URL does not work right now

Some data providers provider styles for the series, containing the type of series, or colors. They should be taken into account when possible. Otherwise, the xy charts should provide nice defaults if no styles are available.

The web use case is the one best tested, but it's possible to build the electron app. Make sure everything works properly there too

Propose for discussion a mechanism to pass possible actions from the server. Or maybe we miss something entirely if we think we need such a mechanism? Anyway, see example actions below, maybe look at other web software for interaction between views ideas.

Some views in Trace Compass have specific actions, for instance the entry filters, follow threads from the control flow view to get the critical path, etc. We should think about how to support those actions from Theia.

• Propose a mechanism to suggest actions on data and how to execute those actions
• Make the critical path available through theia

Pie charts are used for example with the event statistics, but also in some incubator views, like flame graphs, etc.

A variation on pie charts is the multi-level pie charts

To find traces programmatically in the file system where the source code (language server) is. For this I'd like to issue a command on a folder and search for file/directories with a given file pattern. For example:
"From a start directory, find all files with the file suffix *.log"
"From a start directory, find all directories that contains a file called metadata"

• Sending "long" times using JSON number is a potential problem to any javascript or any language that doesn't support big integer. It will work in Theia if we use BigInt, but not in other frontend if the dev doesn't or can't support BigInt.
• Sending as string might impact the size or the response but need to test if it really does something. The advantage is that the frontend can convert that string in something that can be useful
• We can either force BigInt in TSP or use String
• NodeJS 10 and Chrome supports it, (JavaScript version?)
• Time Graph library uses currently offset scheme

On basic installations, there may not be a trace server running separately from theia. Admins need to make sure such a server exists and is started. The Theia default installation should include fetching and starting the web server.

The trace server should also be configurable, so if there's a remote server running, it should all point to it.

Some data provider support styles. They should be used when available

That means when we navigate a trace, it saves the current context: visible time range, selection, opened views, the visible entries in each view, etc. Context can be shared, i.e. we can copy paste some kind of url that we can send to a colleague to see the same “view” of the system.

Note that the trace server itself is stateless, so the context data should be saved in the theia server backend.

• Develop the classes to save the current context stack
• Time ranges and current outputs are a good first start for the context
• As the user navigate, save a stack of the current context
• Add the whole context to the copy-paste URL of a trace, so the person who will open the link will directly arrive at the same context
• Save the "state" of the frontend to not lose the current work when you refresh the browser
• Add the possibility to undo/redo. Find some key binding (ctrl-z/ctrl-y in a browser? Some other standard for that kind of application?) and stack/unstack contexts to go back to previous context
• Look if there are any browser standard fro that kind of context: for example snowflake
• Test that all actions supposed to change the context do so correctly and can be done/undone

The time line widget should allow to navigate the time range.

LTTng-scope or the chrome trace viewer have good UIs for a navigable time line.

In LTTng-scope, the time line also includes an XY chart that can be customized, this is an interesting feature.

The file explorer could directly show trace folders (like lttng folders) as traces that can be opened easily.

Some data providers, like the Open Tracing span view, have annotations to display in the time graph view (they are typically additional symbols to put at certain entries/time ranges). They should be displayed in the time graph