[vtadmin-web] Query vtadmin-api from vtadmin-web with fetch + react-query #7239

doeg · 2021-01-03T19:43:53Z

Description

tl;dr:
This PR implements the humble beginnings of our vtadmin-api HTTP fetchers using native fetch and react-query. The API boundary is one of the spicier parts of any client, particularly when it comes to testing and (strong) typing. To that end, I focused on adding a bunch of tests + commentary -- I would love your feedback on these parts, in particular, if you have any.

Now the usual rambling...

react-query is still somewhat new to me, and Mock Service Workers are brand new to me. I really like how this implementation came together, but I expect a lot of unknown unknowns (for me) here. So I've tried to keep this implementation very modular + flexible in anticipation of us wanting to, say, swap in redux instead of react-query, or use gRPC instead of HTTP.

I expect the functions in api/http.ts to become more general as we add more bindings for other vtadmin-api endpoints. I also have a feeling we'll want to pull out the Mock Service Worker parts of api/http.test.ts (especially since we could re-use it as a hermetic/offline development server, which might be interesting). For this PR, though, I tried to keep things straightforward and co-located.

This is also the first use of one (1) environment variable!

It still doesn't look like much... but! The exciting thing is that vtadmin-web is now issuing HTTP requests against vtadmin-api and populating the UI with ✨ real data ✨ from the local Vitess + Docker example.

A couple of TODOs for me that I'll need to ticket:

Add CI targets for vtadmin-web unit tests + linting
Streamline the local development process described in the README

Related Issue(s)

[vtadmin-api] Add static file service discovery implementation #7229

Checklist

Should this PR be backported?
Tests were added or are not required
Documentation was added or is not required

Deployment Notes

N/A (yet)

Impacted Areas in Vitess

Components that this PR will affect:

Query Serving
VReplication
Cluster Management
Build

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

ajm188

I really really like this setup. I have one concern about error testing, but after that this lg2m

ajm188 · 2021-01-03T20:47:54Z

web/vtadmin/README.md

+				"host": {
+					"hostname": "127.0.0.1:15992"
+				},
+				"tags": ["dead-dove-do-not-eat"]


but where did the lighter fluid come from?

(muffled final_countdown.wav plays in the distance)

ajm188 · 2021-01-03T20:58:15Z

web/vtadmin/src/api/http.test.ts

+// means our fake is more robust than it would be otherwise. Since we are using
+// the exact same protos in our fake as in our real vtadmin-api server, we're guaranteed
+// to have type parity.
+//


(curious) As a Go programmer, this trailing comment line looks odd to me. Is this JS/TS convention that I should learn to get used to?

Nah I just like whitespace for multi-paragraph comments. I can remove it though!

No, totally fine!

Too bad I did it anyway!!! 😈

ajm188 · 2021-01-03T21:00:48Z

web/vtadmin/src/api/http.ts

+    ok: false;
+}
+
+type HttpResponse = HttpOkResponse | HttpErrorResponse;


God I love union types so much, go2 pls 🥺

ajm188 · 2021-01-03T21:04:47Z

web/vtadmin/src/api/http.test.ts

+                await api.vtfetch(endpoint);
+            } catch (e) {
+                /* eslint-disable jest/no-conditional-expect */
+                expect(e.message).toEqual('invalid http envelope');


One of the potential downsides to doing exact equality checks on error messages means that if we ever add additional context to errors, then we can potentially break a bunch of tests for an unrelated change. Do we want to force that, or does it make sense to expect().contains()?

Hm, probably the best way is to extend Error with custom subclasses. Unfortunately, this is pretty cumbersome to do in JS/TS (especially compared to go 🥺) BUT we can then do assertions like expect(e.name).toEqual('InvalidHttpEnvelope') or whatever, which also gives us more flexibility with e.message.

I considered this before and didn't do it because I'm uh... well, it's a little bit of work 😬 but it's super worth it, so thanks for pointing this out!

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

doeg · 2021-01-03T22:31:40Z

@ajm188 thank you for the great suggestions. 🙏 I made a couple of changes:

I defined subclasses of Error for anticipated failure scenarios in api/http.ts per your comment here. The tests are a lot sturdier now.
I added a test case for when /api/tablets returns an { ok: false } response.
I added a dumb error placeholder to the UI, which looks silly but shows off how nice react-query's error handling is.

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

doeg added 6 commits January 3, 2021 11:23

Add env variable + some modest documentation

1f8f661

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

A first pass at testing fetch with msw

a7c45cb

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

Add react-query + populate UI from API

073dc1c

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

Add a bunch of commentary about MSW in http.test.ts

92681ca

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

More commentary in api/http.ts

b0e678c

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

Add current setup instructions (ugh) to the README (ugh)

b46e03d

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

doeg requested a review from ajm188 as a code owner January 3, 2021 19:43

doeg requested a review from rohit-nayak-ps January 3, 2021 19:46

ajm188 approved these changes Jan 3, 2021

View reviewed changes

Extend Error for API erorrs + add placeholder error UI to the front-end

776dbc6

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

ajm188 approved these changes Jan 4, 2021

View reviewed changes

Small nit (removes vestigial variable)

cb6087c

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>

deepthi merged commit 446725d into vitessio:master Jan 5, 2021

askdba added this to the v9.0 milestone Jan 6, 2021

doeg added the Component: VTAdmin VTadmin interface label Mar 16, 2021

doeg changed the title ~~[vtadmin] Query vtadmin-api from vtadmin-web with fetch + react-query~~ [vtadmin-web] Query vtadmin-api from vtadmin-web with fetch + react-query Mar 16, 2021

rafael mentioned this pull request Mar 17, 2021

Slack vitess 9 2021.03.16r0 tinyspeck/vitess#200

Merged

doeg deleted the sarabee-vtadmin-trying-to-make-fetch-happen branch November 1, 2021 19:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[vtadmin-web] Query vtadmin-api from vtadmin-web with fetch + react-query #7239

[vtadmin-web] Query vtadmin-api from vtadmin-web with fetch + react-query #7239

doeg commented Jan 3, 2021 •

edited

Loading

ajm188 left a comment

ajm188 Jan 3, 2021

doeg Jan 4, 2021

ajm188 Jan 3, 2021

doeg Jan 3, 2021

ajm188 Jan 3, 2021

doeg Jan 4, 2021

ajm188 Jan 3, 2021

ajm188 Jan 3, 2021

doeg Jan 3, 2021 •

edited

Loading

doeg commented Jan 3, 2021 •

edited

Loading

[vtadmin-web] Query vtadmin-api from vtadmin-web with fetch + react-query #7239

[vtadmin-web] Query vtadmin-api from vtadmin-web with fetch + react-query #7239

Conversation

doeg commented Jan 3, 2021 • edited Loading

Description

Related Issue(s)

Checklist

Deployment Notes

Impacted Areas in Vitess

ajm188 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doeg Jan 3, 2021 • edited Loading

Choose a reason for hiding this comment

doeg commented Jan 3, 2021 • edited Loading

doeg commented Jan 3, 2021 •

edited

Loading

doeg Jan 3, 2021 •

edited

Loading

doeg commented Jan 3, 2021 •

edited

Loading