Display a metric #1095

david-crespo · 2022-07-27T19:44:07Z

It's time. Closes #1051

Limitations/issues

Need to show full selected date range on x-axis, not just the range of the data we actually got back
Bug where validation error doesn't get cleared when you go from custom to preset
Only fetching 1 page of 1000 data points (won't fix in this PR, except maybe we could bump the page size)

vercel · 2022-07-27T19:44:10Z

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

Name	Status	Preview	Updated
console-ui-storybook	✅ Ready (Inspect)	Visit Preview	Aug 31, 2022 at 5:24PM (UTC)

david-crespo · 2022-07-27T19:45:07Z

david-crespo · 2022-08-24T21:46:23Z

david-crespo · 2022-08-26T23:36:42Z

leftwo · 2022-08-30T22:39:41Z

Can I run this change on folgers and see how it works with "real" data?

david-crespo · 2022-08-30T22:47:41Z

Yeah, definitely, though it will be easier to do after I merge this and update the pinned console in Omicron. Two undone todos you will definitely run into:

We are only fetching one page of 1000 data points. If there are more the chart will be incomplete. We can easily bump that up to the max page size of 10k, but to solve this in a general way we will need to reduce the number of data points server side so that they'll fit in a single page (see my comment on RFD 304 about this)
Rather than setting the x-axis of the graphs to show the entire selected range, it is set to auto, which computes the range from the available data points. So for example if you select a month but there's only data for a week, the graph should show the whole month with most of it empty but it won't.

david-crespo · 2022-08-31T14:06:26Z

vite.config.ts

+    //     plugins:
+    //       mode === 'development' ? ['./libs/babel-transform-react-display-name'] : [],
+    //   },
+    // }),


Ran into an issue where it was trying to put a displayName on my hook and I have no idea why. Will look into it.

It's trying to put a displayName

dateTimeRangePicker.displayName = "dateTimeRangePicker - app/components/form/fields/useDateTimeRangePicker.tsx";

on this line, which is an element, not a component

const dateTimeRangePicker = <Formik ... />

Got a minimal repro. Holy shit AST Explorer rules.

https://astexplorer.net/#/gist/d6da05485105d9b03cdf70559acc92fa/c7774e3ecda85343141fa21b1c4cc81555a73e36

This should only be happening for top level components meaning one of the escape hatches is failing. I'm fiddling with it.

I resolved this in #1133. There needs to be another follow up to fix an invalid base assumption, but the proposed fix should be sufficient.

zephraph · 2022-08-31T17:01:21Z

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

+        {/* TODO: need a nicer way of saying what the boot disk is */}
+        Boot disk ( <code>{diskName}</code> )


Forever a challenge, ha.

app/components/TimeSeriesChart.tsx

zephraph · 2022-08-31T17:09:20Z

app/components/TimeSeriesChart.tsx

+const longDateTime = (ts: number) => format(new Date(ts), 'MMM d, yyyy HH:mm:ss zz')
+
+// TODO: change these to theme colors so they work in light mode
+const LIGHT_GRAY = 'var(--base-grey-600)'


The closest I can find that makes sense here is chart-fill-inactive which maps to base-black-600. Not sure if that's right or not though.

Co-authored-by: Justin Bennett <[email protected]>

leftwo

the activated stat is really an internal stat for the upstairs, and I don't think we need to expose that to the end user.

zephraph · 2022-08-31T17:51:07Z

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

+  // TODO: we're only pulling the first page. Should we bump the cap to 10k?
+  // Fetch multiple pages if 10k is not enough? That's a bit much.


It'll be interesting to see the granularity of data required to get meaningful visualizations at different time ranges. I really hope 10k isn't necessary, that seems like an awfully large payload.

Yeah, I think if we were doing moving averages server-side to reduce the size of the result set, I would never choose to get that many points back.

zephraph

Great start. I know there are still a lot of TODOs and follow up work, but I'm all for rolling forward.

vercel bot deployed to Preview July 27, 2022 19:47 View deployment

vercel bot deployed to Preview July 27, 2022 20:27 View deployment

david-crespo force-pushed the babbys-first-metric branch from aa80fae to a3fbd8c Compare August 18, 2022 19:36

vercel bot deployed to Preview August 18, 2022 19:39 View deployment

vercel bot deployed to Preview August 18, 2022 21:26 View deployment

david-crespo added 4 commits August 23, 2022 14:51

we are literally displaying metrics right now

dc7d223

1000 data points instead of 6

103064c

correct metrics list req body, delete unused metrics page

96bc7c9

helper to extract value from datum

124ca60

david-crespo force-pushed the babbys-first-metric branch from 016f21f to 124ca60 Compare August 23, 2022 19:52

vercel bot deployed to Preview August 23, 2022 19:55 View deployment

vercel bot deployed to Preview August 24, 2022 21:17 View deployment

display all 6 disk metrics. whatever

48ab308

david-crespo force-pushed the babbys-first-metric branch from d7e708b to 48ab308 Compare August 24, 2022 21:33

vercel bot deployed to Preview August 24, 2022 21:36 View deployment

upgrade recharts, make mock server behave itself

d3ffe4c

vercel bot deployed to Preview August 24, 2022 22:11 View deployment

david-crespo added 4 commits August 26, 2022 10:24

improve x-axis

846501e

Merge main into babbys-first-metric

1eeaacc

shitty tooltip, data should be integers

47769d6

tooltip still bad, make data look cumulative instead of not

70e3542

vercel bot deployed to Preview August 26, 2022 23:21 View deployment

bunch of todo comments

c810af8

vercel bot deployed to Preview August 26, 2022 23:39 View deployment

vercel bot deployed to Preview August 27, 2022 02:53 View deployment

use css vars for colors, mono font on ticks, other tweaks

f7a13dc

vercel bot deployed to Preview August 30, 2022 22:32 View deployment

david-crespo mentioned this pull request Aug 30, 2022

DateTime picker #1132

Closed

extract date range picker into hook. this was revealed to me in a dream

b6d41bf

vercel bot deployed to Preview August 31, 2022 05:56 View deployment

extract TimeSeriesChart

a1b3fba

david-crespo commented Aug 31, 2022

View reviewed changes

david-crespo requested a review from zephraph August 31, 2022 14:06

vercel bot deployed to Preview August 31, 2022 14:08 View deployment

keepPreviousData to avoid blank flash while loading

c8217be

david-crespo force-pushed the babbys-first-metric branch from 9a787d0 to c8217be Compare August 31, 2022 15:26

vercel bot deployed to Preview August 31, 2022 15:32 View deployment

zephraph mentioned this pull request Aug 31, 2022

Ensure transforms are only applied to top level components #1133

Merged

zephraph reviewed Aug 31, 2022

View reviewed changes

app/components/TimeSeriesChart.tsx Outdated Show resolved Hide resolved

zephraph reviewed Aug 31, 2022

View reviewed changes

app/components/TimeSeriesChart.tsx Outdated Show resolved Hide resolved

zephraph reviewed Aug 31, 2022

View reviewed changes

david-crespo and others added 3 commits August 31, 2022 12:13

Apply color css var suggestions

205ac29

Co-authored-by: Justin Bennett <[email protected]>

Merge branch 'main' into babbys-first-metric

6fb633b

turn babel plugin back on

f718c4e

leftwo reviewed Aug 31, 2022

View reviewed changes

don't show activations

23f9c73

vercel bot deployed to Preview August 31, 2022 17:24 View deployment

zephraph reviewed Aug 31, 2022

View reviewed changes

zephraph approved these changes Aug 31, 2022

View reviewed changes

david-crespo merged commit fd2935c into main Aug 31, 2022

david-crespo deleted the babbys-first-metric branch August 31, 2022 18:34

david-crespo mentioned this pull request Sep 1, 2022

Unit tests for date picker #1134

Merged

david-crespo mentioned this pull request Sep 16, 2022

Metrics chart visual issue #1087

Closed

		{/* TODO: need a nicer way of saying what the boot disk is */}
		Boot disk ( <code>{diskName}</code> )

		// TODO: we're only pulling the first page. Should we bump the cap to 10k?
		// Fetch multiple pages if 10k is not enough? That's a bit much.

Display a metric #1095

Display a metric #1095

Uh oh!

Conversation

david-crespo commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Limitations/issues

Uh oh!

vercel bot commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

david-crespo commented Jul 27, 2022

Uh oh!

david-crespo commented Aug 24, 2022

Uh oh!

david-crespo commented Aug 26, 2022

Uh oh!

leftwo commented Aug 30, 2022

Uh oh!

david-crespo commented Aug 30, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leftwo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zephraph left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

david-crespo commented Jul 27, 2022 •

edited

Loading

vercel bot commented Jul 27, 2022 •

edited

Loading