openrca / orca-ui Goto Github PK

Add node properties to graph payload in Mock API.

Switch object name with object kind in the details box title.

Add Update button for triggering graph reload on-demand.

Add datetime picker (bottom bar) to query the state of the graph in time. Try to reuse a picker from a library instead of writing one from scratch.

After picking a datetime, the UI should perform a request to the graph API and reload the graph visualization. The request to the API can be the same as the request used to load a regular graph.

Add an option to filter alerts by parameters, for instance namespace or severity.

The graph force feature costs lots of CPU 💰💰, especially for large graph structures. It makes the graph navigation inconvenient. We should make the force disabled by default and add an option to activate. For instance, a button with a pin icon to enable/disable the force.

Large icons reveal doubled icons:

Add a simple mock of graph API with static graph payload read from a file.

• Static file with JSON payload of a sample entity graph (infra + alerts).
• Simple Flask server exposing graph API endpoint.
• The server returns graph payload read from the static file.

Tracking issue for items related to MVP detailing:

Layout:

• Organize buttons and filters in the bottom bar (#68).
• Apply dark mode colors to selectors (#68).
• Display graph as main page (#81).

Graph:

• Add object type selector (#66).
• Include cluster and node objects in namespace view (#74).
• Add togglable node labels (#59).
• Fix double icons (#64).
• Decrease graph force (#75).
• Add icon for HPA (#90).
• Fix graph loading for large payload (#91).
• Mark fault trajectories (#107).

Details box:

• Stretch details box to full height (#69).
• Switch object name with object kind in box title (#71).
• Render table from node data (#70).
• Style property table (#92).

Alerts dashboard:

• Reduce alerts table width (#72).
• Use uppercase for severity badges (#72).
• Alert origin should start with a capital case (#72).
• Apply dark mode colors to the table (#72).
• Add alerts count badge (#73).

Let's consider centering the graph and scaling it down to fit entirely into the visible graph space.

Something like this:

I think that would ease finding relevant patterns and pinpointing issues: start from the bird's eye view and then zoom into the interesting part.

What do you think?

Add an option to filter the entity graph by application namespace.

• Add text input for the namespace name.
• Add Filter button.
• Perform API request to retrieve the graph filtered by namespace, for instance: /graph?namespace=<namespace>. Consider filtering the graph on client side.
• Reload obtained graph in the graph area.

The above functionality will enable answering the question:

How did the X application look like 13 days ago at 3 PM?

Load graph payload (nodes, links) from the Mock API.

Normalize payload into a format compatible with D3.js.

Display the obtained graph structure using current graph layout.

Due to the size of the graph, graph navigation must be improved:

• Stretch the graph box into full width and full height (more space).
• Add graph element drag&drop.
• Add graph panning.
• Add graph zooming.

Example: http://bl.ocks.org/robschmuecker/7880033

Main page should display graph. Logo should redirect to graph as well.

Dockerfile that utilizes multi-stage building would be beneficial for deploying Orca UI in production environments

Add button enabling rescaling (and centering?) graph into the visible space.

Restyle the UI into a dark color scheme.

Improve the visual appearance of the graph:

• Add nodes coloring based on node kind.
• Add nodes hovering.
• Add nodes iconography.

The date-time picker is positioned too far on the right side of the bottom bar. After clicking it, the time selector is out of the visible space.

Graph API has been extended by time filtering option (openrca/orca#92).

The datetime picker should integrate with the API by passing additional time_point argument in request path. Time point should be in UTC timestamp format.

Sample query:

http://localhost:5000//v1/graph?time_point=1598293127

Customize the alerts table with the following items:

• Remove ID column
• Add columns: severity, timestamp, origin, name, message (in that order)
• Add badges for severity
• Add column sorting
• Set default table sorting by alert severity
• Add severity and origin selector
• Add searching columns by phrase (generic)
• Add pagination with selectable number of rows

Add alerts count badge next to the button in the top navbar.

According to the solution proposed in #20 (review), we should allow all CORS origins in OpenRCA API to enable seamless communication from the UI. The Flask server should be configured with a proper CORS policy. Consider using a plugin such as Flask-CORS or try to modify the headers manually.

First, let's test the fix in the Mock API. Second, we will apply a similar patch to the core repository.

Some useful materials:

• https://medium.com/@baphemot/understanding-cors-18ad6b478e2b#:~:text=Cross%2DOrigin%20Resource%20Sharing%20(CORS)&text=CORS%20is%20a%20mechanism%20which,a%20different%20sub%20domain%20(eg.
• https://www.youtube.com/watch?v=mdQvEqqdFEI

Mark alert nodes with red color.

The title should be: OpenRCA Web UI

Add details box with JSON viewer for entity properties (pod name, namespace, image, volumes).

Decrease the graph force to let user move selected subgraphs within the visible space:

Add basic graph stats:

• total number of nodes
• number of nodes by object type (pod, config map, secret etc.)

After changes with using orca-mock API in orca-ui, to use application in every browser CORS headers need to be present on requested source.

Here is an example error message:

Access to XMLHttpRequest at 'http://localhost:5000/v1/graph' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Now in development process browser with disabled web security option can be used. In case of Google Chrome:
google-chrome --disable-web-security --user-data-dir="/tmp/chrome-test"

Display loading animation while the graph is being fetched from the API.

• Add Dockerfile for UI.
• Automate image build using Docker Hub.

• Reduce alerts table width.
• Use uppercase for severity badges.
• Alert origin should start with a capital case.
• Apply dark mode colors to the table.

Find and use a library to render a table from node JSON data into the details box.

After filtering the graph by a namespace, cluster and node objects should be included even though they do not provide the namespace property (similarly to alerts).

There is no icon defined for Horizontal Pod Autoscaler (HPA). HPA nodes display as black holes ⚫.

Add selector enabling selecting multiple object types to show in the graph.

Prepare Docker compose for development.

The compose should contain two containers:

• Container with UI application.
• Container with Mock API.

Mock API must be accessible for the UI application via the loopback interface.

After deployment in testbed, alerts dashboard fails with error:

TypeError: Cannot read property 'map' of undefined
    at Alerts.js:26

Code:

  loadData() {
    axios.get(process.env.REACT_APP_BACKEND_HOST + '/v1/alerts')
      .then((response) => {
        const alerts = response.data.alerts.map(alert => {
          alert.updated_at = new Date(1000 * alert.updated_at);
          return alert;
        });
...

There is no alerts root in alerts payload:

[
    {
        "id": "falco-alert-attach/exec-pod-pod-arangodb-7fc5bc8fbc-bz7w2-rca",
        "origin": "falco",
        "name": "Attach/Exec Pod",
        "message": "18:27:54.593231872: Notice Attach/Exec to pod (user=kubernetes-admin pod=arangodb-7fc5bc8fbc-bz7w2 ns=rca action=exec command=python3)",
        "severity": "Notice",
        "source": {
            "origin": null,
            "kind": null,
            "properties": {
                "name": null,
                "namespace": "n/a"
            }
        },
        "created_at": "1598293671",
        "updated_at": "1598293683"
    },

Default graph view (all namespaces, all object types) displays too many nodes. Object types should be limited to the most essential ones. Also, we should prevent creating cycles in the graph because they disturb the UX.

Let's set the default set of object types to: cluster, node, pod and alert.

The process of making the final graph structure will take some time. It would be great to held discussion in one issue.

During this process we should pay attention to many available visualization and get the best out of them. Examples shared in this issue will definitly be a good inspiration to OpenRCA final graph.

I want to share with example of Force-Directed Tree from D3.js library. This hierarchial graph captures well network structure and visualize it in very intuitive way. We can easily extract sets of vertices forming a group in a graph.

It would be great to share your ideas and examples of network visualizations!

All .scss or .css files should be moved to the /src/assets directory. In /src/components we want only to keep React components.

Add graph visualization using D3.js with sample nodes and edges.

User should have an option to display node names in the graph. There should be a toggle button (in the bottom bar?) to enable/disable node names.

Add a new dashboard with a list of all alerts detected in the cluster.

Alert objects don't have namespace property. When filtering the graph by namespace, alerts are not linked with the source objects. All alerts are hidden in a {} namespace (in namespace selector).

Tracking issue for discussion regarding UI MVP.

The picture below presents the agreed design for the first iteration:

Key implementation items:

• Dashboard skeleton: navbar, details box (on the left), graph area, bottom bar.
• Graph visualization in D3.js - layout options discussed in (#4).
• Alerts highlighting (#38).
• Basic graph styling (#5).
• Details box with JSON viewer for entity properties (pod name, namespace, volumes) (#25).
• Datetime picker (bottom bar) to query state of the graph in time (#26).
• On-demand graph reloading (#40).
• Filtering graph by app namespace (#30).
• Logo and favicon.

Currently, if some key in node details has empty value, it is displayed as below:

I think we might hide empty details altogether:

Let me know what you think. The solution is already implemented.