Implement basic Digma analytics on react app

It possible for a user to have the Docker Desktop installed, but it's not explicitly noted which version is required for Digma Docker extension.

According to the official website Docker Desktop supports extensions starting from 4.8.0 and later

To improve the UX we can add this information to the wizard instructions.

The application types are:

1. Running/debugging in the IDE
2. Gradle Tasks
3. Docker compose
4. K9s
5. Running via terminal

Each would have its own page with instruction

Motivation: Sometimes the duration breakdown is completely different when things are slow
breakdown insights.

related issue :https://github.com/digma-ai/digma-collector-backend/issues/982
user should be able to toggle between the 2 different measurements: average and slowest 5%
@doppleware UI mock is needed

Motivation: Sometimes operations will fail fast on exception and will show a duration that is not indicative of the real performance.

1. If unhandled exception or http error paint dot red
2. Add filter to show only successful results

See UI:

As it allowed to relaunch the Installation wizard from the plugin, there is a possible scenario when status of the Observability toggle is not synced between the Wizard and the plugin.

To synchronise value of the observability status we can add additional boolean environment variable to the Wizard React app isObservabilityEnabled.

Insights:

1. Errors

• Links:
  • Error - Open Error details view on click
• Buttons:
  • Expand - Navigate to the Errors tab on click

2. Duration

• Buttons:
  • Histogram
  • Live
  • Compare
• Menu items:
  • Recalculate

3. Request Breakdown

• Menu items:
  • Recalculate

4. Top Usage

• Links
  • Span
• Buttons:
  • Trace
• Menu items:
  • Recalculate

5. Duration Breakdown:

• Links
  • Span
• Menu items:
  • Recalculate

6. Suspected N-Plus-1 (Endpoint)

• Links (?)
  • SQL Query
• Buttons:
  • Trace

7. Span Bottleneck

• Links
  • Span

8. Bottleneck

• Links
  • Endpoint

9. Duration Slowdown Source

• Links
  • Span

10. Scaling Issue

• Links
  • Span
• Buttons:
  • Trace
  • Histogram

11. Suspected N-Plus-1 (Span)

• Links
  • Span
• Buttons:
  • Trace

See the mockup Figma here:
https://www.figma.com/file/9WRmS8uKjUIv45ldWun2pt?node-id=2321%3A237696&utm_source=notification&utm_medium=slack&utm_content=37a6146b08f23ee7820ba4f4398aaf13&type=design#589499513

We should start with the basic UI,
then add the deployment status and action for the environment
then finally add the insight status

When starting the Docker Extension for the first time, add an empty state:

Also add a link to the empty state from the normal view:

We might need to add a story for the backend to know whether a plugin has ever connected to it, to know whether to show the plugin message

Implement first time installation Wizard first page (backend install and wait for install) #369
https://www.figma.com/file/MTZJH09SSbyJjrKkbXcd3L/UX---shared?node-id=154%3A19759&t=VbH4yyOfhQ8P0J7v-1

This first page will present the user with instructions on how to install Digma.
Optionally, it will include a button with a link to install Digma via an extension.

The view will wait for Digma to become available and then allow the user to proceed to the next screen.

If the user skips/close the idea, there is no way to go back.
We will add a link in the 'No Connection' widget of Digma to go back to this page.

TBD
@doppleware please add events to this issue:
For example, clicking on the recent activity endpoint link which is not related directly to the react...

Add installation type choice on start
Remove 'skip' options from wizard UI
Add thumbnail for the video start guide
Update styles and wording

Mockups: https://www.figma.com/file/knBV9hsfk9Au7mDQdFAFea/READY-TO-DEV?node-id=1264-189839&t=Ko1puV1wqOXVh7qr-0

If we 'stopped in debug' in a specific trace in the recent activity, we should see an indication that this was detected
when the trace appears

https://www.figma.com/file/knBV9hsfk9Au7mDQdFAFea/READY-TO-DEV?type=design&node-id=2851%3A375052&mode=design&t=Z9hzdQaAPfb0Z27n-1

Allow sorting (client side) of the data by performance / name / number of critical insights (2 and below)
With the labels: "Performance, Name, Critical Insights".

should work on Docker as well

See details inside issue #digma-ai/digma-collector-backend#619

Related to digma-ai/digma-intellij-plugin#366

STR

1. Having multiple environments
2. When changing multiple times between environments
3. observe get assets API is being called every 100-200 ms

connect the plugin to meloona in order to reproduce it

1. Show indication if error in trace
2. Show list of exception
3. Ability to open exception details in other side panel

See Figma
https://www.figma.com/file/9WRmS8uKjUIv45ldWun2pt/UI---Shared?type=design&node-id=1056%3A222463&mode=design&t=yoMCzUaklxMCxRo3-1

action buttons:

1. Histogram
2. Compare
3. Live

Let's do two things:

1. Add a tab for "I don't have docker"
2. Make sure we raise an analytics event when you click that tab and include the name of the tab in the event details
3. The tab content text should be: "We'll be adding more options soon but please reach out via Slack (with link) and we'll see if we can still get your Digma up and running - add analytics for the link
4. In addition, lets add a link to the Slack at the bottom of the page with the title "Having trouble? Please reach out in our Slack group"

Buttons don't look clickable
Fonts are too small

https://www.figma.com/file/knBV9hsfk9Au7mDQdFAFea/READY-TO-DEV?node-id=31%3A24032&t=z4kNFWKishReB9a3-1

Dark/Light themes

We want to know:

1. If the users clicked the 'Digma Docker' button
2. If the users passed the first page
3. If the user automatically passed the first page because the server was already up
4. If the users clicked the 'observabiliy button' in the wizard (new design)

1. Show a list of the groups (classifications) of different assets with count
2. Drilldown into an individual asset group. For now, use server-side data only (don't use client discovered assets).
   Don't implement the filter yet - that will come later. Implement sort by: performance, latest
3. Each asset should have a link to its code object page (that also opens that code location, for now).

https://www.figma.com/proto/MTZJH09SSbyJjrKkbXcd3L/UX---shared?node-id=375%3A103505&scaling=min-zoom&page-id=180%3A29370&starting-point-node-id=375%3A99851

Currently it uses some internal document which shows some ads and may not be best interface

[Update: Please see the following Figma: https://www.figma.com/file/knBV9hsfk9Au7mDQdFAFea/READY-TO-DEV?type=design&node-id=3226%3A481312&mode=design&t=dXP4wYesk0uKHX6L-1]

As a part of the setup wizard, check if Docker and Docker Compose (via docker_compose or Docker compose ) are installed locally and try to do an automatic installation if that is the case.

1. This should run the Docker Compose file locally
2. Include complete analytics about issues, what strategy was used etc.
3. Add an env variable for deployment type to ensure we know this is autoinstalled

If it is not possible to install automatically we should fallback to the current screens for manual installation

Otherwise, indicate success and move to the next stage:

Required changes:

1. Page 2 should not appear.
2. Add a section to page 3, use the 'wheels' icon for it:

Section text should read:
Instrument your code: Follow our [quickstart] guide to begin collecting data from your code

Link:
Python:
https://digma.ai/python-quick-start-guide/
.NET
https://digma.ai/net-quick-start-guide/

1. Discover asynchronous operations by finding spans that end after their parent
2. If the request had asynchronous operations show a different request breakdown insight
3. In the duration breakdown, add the tag ' async' in the duration breakdown insight for spans with greater end time

See the request breakdown version for async:
https://www.figma.com/file/9WRmS8uKjUIv45ldWun2pt/UI---Shared?type=design&node-id=1075%3A241920&mode=design&t=VTioZBRq6unlwWsZ-1

If env variable is added, it should start appearing again

The graph should receive the last 100 samples from the backend as well as the latest P50 and P95 and Duration Changes if they exist.

The graph should render the samples (stretching the time and duration axises based on the same values)
The graph should have horizontal lines for the median and P95
The graph should have an indication status message for detected changes

STR

1. Using Rider with a black theme
2. observe the attached screenshot

next to the performance field in each asset item add slowest 5% field and enable sorting by it

1. Move between tabs between 'Docker extension' and 'Docker compose' in the wizard
2. Opening the observability panel
3. Fix 'Docker Extension Install' button click event

https://images.zenhubusercontent.com/595600071/bab98b32-9193-4283-9c9e-45dccfe09c3b/screen_recording_2023_06_07_at_8_53_31_am.mov

0 - duration values in y-axis (see attached)

@doppleware commented on Wed Jun 07 2023

See image:

in addition to the average add slowest 5%

https://www.figma.com/file/knBV9hsfk9Au7mDQdFAFea/READY-TO-DEV?type=design&node-id=2525%3A391172&mode=design&t=Z9hzdQaAPfb0Z27n-1

Add an optional 'Email' field to the last step of the wizard.

Mockups: https://www.figma.com/file/knBV9hsfk9Au7mDQdFAFea/READY-TO-DEV?node-id=1129-170553&t=uT9PTv2cF01dO9Jm-0