Update detailed_metric.vue modal to match Pajamas guidelines

What does this MR do?

Update app/assets/javascripts/performance_bar/components/detailed_metric.vue to use gl-button and gl-modal. This component is used to show GDK metrics in the performance top bar of the app for SQL, Gitaly, redis, Elastic search. Note that the modal size is now using lg and therefore no longer takes full width. Also the trace icon to toggle is bigger using the gl-button.

In term of usability, the js-class used to toggle the backtrace on and off was no longer working with the modal component, so I implemented a small addition in Vue that keeps track of the opened traces in an array and removes them when closing the trace in question, that way we stop having interactive JS on top of Vue, which keep everything contains in the component. I added some tests for that usecase (aka that we can open and close the backtraces).

To note:

• There are style changes to keep the elements center aligned in the perf bar
• Now, any modal background will cover the perf bar instead of just the modals that are opened from the perf bar. This is because Bootstrap sets a hardcoded z-index and now that we use our UI component
• The width is now smaller than what it used to because it looked better but it's changeable if reviewers disagree (from lg to xl on modal size prop)
• There are some old utility classes or other components that could have been changed (like using gl-table but I opeted out for keeping this focus on the modal as in itself it is already a big css change.
• In the after screenshots, the red bar is visible when they shouldn't be, the screenshots are outdated for that part.. If you take a look at the video, you'll see it works properly

Closes #229704 (closed)

Screenshots (strongly suggested)

When opening a local installation, this file controls the displays of each of the modals that display when you click one of the performance metrics in the top menu bar. You can see the text links in the dimmed area of the screen, just above the top of the modal window.

Before

After

Screen_Recording_2020-11-10_at_1.35.04_PM

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry
• Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Related to #229704 (closed)