Instance metrics design tweaks #2676

benjaminleonard · 2025-02-05T14:05:25Z

Quick pass to get it closer to the instance metrics designs. Will need a more vigorous going over for the following release but this is reasonable.

As usual the date range picker is a little awkward to work with because of its size. It's worth looking how we might be able to improve it outside of this PR.

vercel · 2025-02-05T14:05:31Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Feb 12, 2025 8:52pm

benjaminleonard · 2025-02-05T14:06:46Z

.licenserc.yaml

    - '.husky'
    - 'mockServiceWorker.js'
+    - 'app/util/format-date-range.ts'
+    - 'app/util/format-date-range.test.ts'


This lib is MIT licensed. Unsure if there's a better way to handle this – it's so small it feels better to copy it over rather than importing.

benjaminleonard · 2025-02-05T14:07:46Z

app/components/RefetchIntervalPicker.tsx

  fn: () => void
+  showLastFetched?: boolean
+  className?: string
+  isSlim?: boolean


This gives us a version that has the dropdown but not the number...perhaps we just scrap the selected interval in the listbox all together here and we can simplify the implementation. I don't think the interval necessarily needs to be visible anywhere.

benjaminleonard · 2025-02-05T14:08:43Z

app/components/RouteTabs.tsx

    : cn('ox-tabs', { 'full-width': fullWidth })
  const tabListClasses = sideTabs ? 'ox-side-tabs-list' : 'ox-tabs-list'
-  const panelClasses = cn('ox-tabs-panel', { 'flex-grow': sideTabs })
+  const panelClasses = cn('ox-tabs-panel @container', { 'ml-5 flex-grow': sideTabs })


Container query lets us move the datepicker onto the next line when we start running out of space. Flex wrap might work here, but eventually I think I'd like to do something cleverer with the layout when it reflows.

benjaminleonard · 2025-02-05T14:09:01Z

app/components/TimeSeriesChart.tsx

  // re-render on every render of the parent when the data is undefined
  const data = useMemo(() => rawData || [], [rawData])

+  if (!data || data.length === 0) {


Temporary empty state. We should handle errors and loading differently.

benjaminleonard · 2025-02-05T14:09:43Z

app/ui/lib/DateRangePicker.tsx

-          <div className={cn('relative flex w-[17rem] items-center px-3 text-sans-md')}>
-            {label}
+          <div className="relative flex w-[16rem] items-center px-3 text-sans-md">
+            <div className="truncate">{label}</div>


This is useful more generally to stop the date picker text from wrapping

benjaminleonard · 2025-02-05T14:10:31Z

tailwind.config.ts

      addUtilities(colorUtilities)
      addUtilities(elevationUtilities)
    }),
+    containerQueriesPlugin,


Not necessary after we upgrade to Tailwind v4.

benjaminleonard · 2025-02-05T15:21:36Z

app/pages/project/instances/instance/tabs/MetricsTab.tsx

+
+  const { intervalPicker } = useIntervalPicker({
+    enabled: preset !== 'custom',
+    isLoading: useIsFetching({ queryKey: ['siloMetric'] }) > 0,


Need to update with query keys

david-crespo · 2025-02-07T22:32:24Z

Design changes look good. I think I have to veto little-date — it was made for a hackathon and probably hasn't been worked on further, so it's not very polished and has some weird behaviors that I don't think fit, like if you select all of January precisely it just says January 2025 in the label. I'd rather have it say the range and not abbreviate. It also increases the bundle size by 1% gz (4kb) over sticking with the react-aria thing, I assume because it imports a bunch of date-fns things we don't otherwise use.

Made #2682 so we don't lose track of improving the label.

little-date edge cases

2025-02-07-little-date.mp4

react-aria `useDateFormatter`

The react-aria thing is a little ugly but I think it's more consistent and reliable.

2025-02-07-react-aria-date.mp4

react-aria wtf (fixed above)

Turns out h24 here is not right, it gets you 24:10 instead of 00:10. Changing that to h23 gets us what we want. No idea why that option is even in there.

console/app/ui/lib/DateRangePicker.tsx

Lines 36 to 40 in 93c5abc

    
           const formatter = useDateFormatter({ 
        
             dateStyle: 'short', 
        
             timeStyle: 'short', 
        
             hourCycle: 'h24', 
        
           })

2025-02-07-aria-date-wtf.mp4

charliepark

Thank you for getting all of these bits cleaned up, Ben. I'll merge in to oxql_disk_metrics and prep it for final reviews.

* Add stub of Disk Metrics using OxQL * Refactoring; getting chart working; needs better default situation * refacotrs; remove old DiskMetrics; add writes and flushes charts * initial stub for CPU metrics * file reorg * More CPU metrics, though we mgiht need to rethink the long-term plan * working group_by * Updates to routes to handle sub-tabs * Dropdown working on CPU charts * cleanup * more work on charts; networking * Standardize wrapper components * Reorder charts a bit * getting side tabs into place * Update side tab CSS * Consolidate SideTabs into legacy tabs, using props to control layout * refactoring; getting rollups working for disks and network interfaces * Pass pre-formed query string to metric component * Move date selector up a level, using useContext * Update routes in path-builder test * Small refactor to align approach to useState and dropdowns for network and disk metrics tabs * Add static values for metrics for testing and mock service worker * Removes TS guard that was a bit onerous; relying on casting now, though, which isn't great * Updated mock data for disks * small refactor before integrating Ben's PR * Refactoring chart logic * Add tests for OxQL charts * Better handle cumulative_u64 data with initial sum value * Instance metrics design tweaks (#2676) Co-authored-by: David Crespo <david.crespo@oxidecomputer.com> Co-authored-by: Charlie Park <charlie@oxidecomputer.com> * a little code cleanup * make getOxqlQuery args more generic and structured * view/copy oxql modal * inline oxql query modal, remove comment about showing query * NonEmptyArray whaaaaaaat * highlight oxql * Add 'More about OxQL queries' button/link to modal * test for rendered oxql in modal * Better link style for OxQL docs * slightly smaller text * clean up my weird half-finished metrics props change * CopyCode footer * handle no nics case on network metrics * small aria label fix * Add restriction to only turn on query reloading once initial data have succcessfully loaded in * Simplify CPU utilization tab * Metrics more actions (#2700) * OxQL metrics more actions * take CopyCodeModal refactor further, fix motion import * move oxql schema docs thing into links file --------- Co-authored-by: David Crespo <david.crespo@oxidecomputer.com> * tweak more actions menu copy one more time * Dynamic chart Y axis width (#2697) * Dynamic Y axis width * Remove spacing and make tick size/margin explicit * Need spacing on old cards * Updates, and better logic on utilization chart; still accounting for cpus count * Updates to incorporate nCPUs in utilization calculation * small refactor * Updated test for utilization * Move OxqlMetric files to own component directory * A few more tests * update import * tests are easier to make sense of when you can see all the data at once * Default to single state on CPU utiization tab; offer 'total' option * Update metrics schema URL * Metrics error & loading states (#2698) * Move some loaders to parent component * Update dropdown to cap at 24 hours and handle minimum mean_within * Use seconds when determining durations * remove intervalPicker until OxQL is faster * Less twitchy datepicker wrap * clean up chart loading states * init MetricsContext with null instead of dummy values * Update mock numbers so CPU utilization range is normal * use lazy imports in the routes * blarg lint * Clean up CPU charts * revert CpuStateMetric component * utils file tweaks, abstract slightly less * replace getUnit with explicit unit prop * use date-fns * use delay function for sleeps --------- Co-authored-by: Benjamin Leonard <benji@oxide.computer> Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>

benjaminleonard added 2 commits February 5, 2025 11:42

Use @vercel/little-date

7fc945c

Lots of small design improvements to instance metrics

3590b62

benjaminleonard requested a review from charliepark February 5, 2025 14:05

vercel bot deployed to Preview February 5, 2025 14:05 View deployment

benjaminleonard commented Feb 5, 2025

View reviewed changes

Lint

0aabe23

vercel bot deployed to Preview February 5, 2025 14:15 View deployment

benjaminleonard commented Feb 5, 2025

View reviewed changes

charliepark mentioned this pull request Feb 7, 2025

Add isSmall prop to enable a smaller MoreActionsMenu #2679

Closed

vercel bot deployed to Preview February 7, 2025 22:36 View deployment

switch back to useDateFormatter, h24 -> h23

b351ecc

david-crespo force-pushed the instance-metrics-design-tweaks branch from c6b858a to b351ecc Compare February 7, 2025 22:40

vercel bot deployed to Preview February 7, 2025 22:41 View deployment

david-crespo mentioned this pull request Feb 7, 2025

Nicer abbreviated dates for range picker label #2682

Open

Merge branch 'oxql_disk_metrics' into instance-metrics-design-tweaks

f30f649

vercel bot deployed to Preview February 12, 2025 15:27 View deployment

Add placeholder data to prevent flashing of charts while refreshing

d4b1cbe

vercel bot deployed to Preview February 12, 2025 16:05 View deployment

small TS fix

e2e1ad9

vercel bot deployed to Preview February 12, 2025 16:36 View deployment

cn fix

7de7de4

vercel bot deployed to Preview February 12, 2025 16:47 View deployment

linter adjustments

0372ca9

vercel bot deployed to Preview February 12, 2025 20:03 View deployment

Updated snapshot

ebf4ece

vercel bot deployed to Preview February 12, 2025 20:07 View deployment

CSS tweaks

172df67

vercel bot deployed to Preview February 12, 2025 20:52 View deployment

charliepark approved these changes Feb 12, 2025

View reviewed changes

charliepark merged commit bb8d32b into oxql_disk_metrics Feb 12, 2025
7 checks passed

charliepark deleted the instance-metrics-design-tweaks branch February 12, 2025 21:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Instance metrics design tweaks #2676

Instance metrics design tweaks #2676

Uh oh!

benjaminleonard commented Feb 5, 2025 •

edited

Loading

Uh oh!

vercel bot commented Feb 5, 2025 •

edited

Loading

Uh oh!

benjaminleonard Feb 5, 2025

Uh oh!

benjaminleonard Feb 5, 2025

Uh oh!

benjaminleonard Feb 5, 2025

Uh oh!

benjaminleonard Feb 5, 2025

Uh oh!

benjaminleonard Feb 5, 2025

Uh oh!

benjaminleonard Feb 5, 2025

Uh oh!

benjaminleonard Feb 5, 2025

Uh oh!

david-crespo commented Feb 7, 2025 •

edited

Loading

Uh oh!

charliepark left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Instance metrics design tweaks #2676

Instance metrics design tweaks #2676

Uh oh!

Conversation

benjaminleonard commented Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjaminleonard Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

david-crespo commented Feb 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

little-date edge cases

react-aria useDateFormatter

react-aria wtf (fixed above)

Uh oh!

charliepark left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

benjaminleonard commented Feb 5, 2025 •

edited

Loading

vercel bot commented Feb 5, 2025 •

edited

Loading

david-crespo commented Feb 7, 2025 •

edited

Loading

react-aria `useDateFormatter`