opensearch-project / dashboards-observability

Visualize and explore your logs, traces and metrics data in OpenSearch Dashboards
https://opensearch.org/docs/latest/observability-plugin/index/
Apache License 2.0
16 stars 55 forks source link

[Look&Feel] Traces Density and Consistency Improvements #2072

Closed danieldong51 closed 2 months ago

danieldong51 commented 3 months ago

Description

This PR applies the Look & Feel density and consistency changes to Traces and Metrics:

  1. Use small context menus
  2. Use small tabs
  3. Standardize paragraph size (15.75px next theme / 14px V7 theme)
  4. Use semantic headers (H1s on main pages, H2s on modals/flyouts)
  5. Modal/Flyout Typography
  6. Buttons for actions, only using primary buttons for primary calls to action
  7. Use small padding on popovers

Screenshots

Metrics: Popover Padding

Scope Before After
Metrics Popover Before Popover Post

Small context Menu

Scope Before After
Save Trace Save Popover Before Trace Save Popover Post
Filters Trace Analytics Filters Before Trace Analytics Post
Actions Trace Actions Popover Before Trace Actions Popover Post

Buttons

Scope Before After
Empty Trace Empty Button Before Trace Empty Button Post

Paragraph size

Scope Before After
Empty Trace Empty Message Before Trace Empty Message Post
Map Trace Map Node Before Trace Map Node Post

Semantic Headers

Scope Before After
Trace ID Trace View ID Before Trace View ID Post
Service Traces Service Page Before Traces Service Page Post

Flyouts

Scope Before After
Header Trace Header Before Trace Header Post
Span Header Trace Span Header Before Trace Span Header Post

Check List

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license. For more information on following Developer Certificate of Origin and signing off your commits, please check here.