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
toxl
on modalsize
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)