(Figma Design) UI Enhancements and New Features

[Jad31]

Description

This issue outlines a series of enhancements and new features to improve the user interface and functionality based on the Figma design specifications. The changes include updates to existing pages, new pages, and various other improvements for a more streamlined and user-friendly experience.

Existing Pages

Home Page

• OK
• Reponsive:
  • Display everything

Status Page

• Reduce the table width
• Modify Hero description
• Reduce the size of metrics cards and their text
• Reponsive:
  • Display whole hero section
  • Shadcn handles responsiveness on table by making it scrollable horizontaly by default

Daily Page

• Align Hero section with Status Page
• Reuse the same chart card as on the Home Page
• Make the first chart card selected by default on page load
• Reponsive:
  • Display whole hero section
  • Make charts scrollable horizontally

Compare Page

• Remove Macro Benchmark title
• Add Hero section @frouioui
• Add options to choose between release, and commits for old and new
• Table:
  • Align Metrics column to the right
  • Center-align all other columns
  • Add tooltips on hover for badges in the delta column (Significant/No Significant)
  • Add vertical line between Metrics and old column
  • Add vertical line between new and P column
  • Group P and delta columns closely
  • Make QPS category including Read, Write, and others
  • Make Total CPU category including vtgate and vttablet
  • Make Total Allocated category including vtgate and vttablet
  • Reponsive:
    • Display whole hero section
    • Inputs on top of the others
    • Shadcn handles responsiveness on table by making it scrollable horizontaly by default

Foreign Keys

• @frouioui is considering changes 🤔
• Have two "search workload" input
• One "search commit" input
• Add a compare button like in the compare page
• Table:
  • Same table than in compare page with a different title
  • Old and New SHA columns page replaced by the workload
• Reponsive:
  • Display whole hero section
  • Inputs on top of the others
  • Shadcn handles responsiveness on table by making it scrollable horizontaly by default

Pull Request

• Use the same date UI for "Opened at" as on the Compare Page table
• Refactor UI with Shadcn design
• Reponsive:
  • Display whole hero section
  • Shadcn handles responsiveness on table by making it scrollable horizontaly by default

Pull Request/{prNumber}

• @frouioui is considering changes 🤔

Compare Query Plans

• Replace A and B labels with Old and New respectively
• Update Hero section to match other pages
• Display queries in a table:
  • First column: query
  • Second column: ExecutionsTimeDiff
  • Second column: ExecutionsCountDiff
• Refactor modal using Shadcn design
• Reponsive:
  • Display whole hero section
  • Shadcn handles responsiveness on table by making it scrollable horizontaly by default
  • Same modal behavior as current one

New Pages

History

• Add Hero section @frouioui
• Table:
  • First column: SHA
  • Second column: Source
  • Third column: Workload (number of benchmarks)
  • Add Add to compare option like in Status Page
  • Add filters like in Status Page for SHA, source, and workloads
• Reponsive:
  • Display whole hero section
  • Shadcn handles responsiveness on table by making it scrollable horizontaly by default

Other:

• Add submenu for "Add to compare" with old and new options
• Redesign loader
• Display a toaster/popup/modal notification when clicking "Add to compare" that contains:
  • Old and new input fields filled automatically
  • Compare button activates when both fields are filled, redirecting to the Compare Page
  • Close button
• Reponsive:
• Add to compare bottom of the page with inputs on top of each other

Related issues:

• LFX third iteration of UI improvement: Shadcn, Typescript and Responsive #525