HParams: Update tb_http_client to support the hparams plugin backend (#6337)

## Motivation for features / changes
In #6318 I ported over the runs_data_source from internal tensorboard in
order to begin fetching hparams data in the timeseries dashboard.
However, I later learned that it didn't play well with internal Colab
which does not allow POST requests and thus had to revert the change in
#6336.

## Technical description of changes
The current implementation of this "hackaround" converts post bodies to
query params and assumes that all post bodies are of type `FormData`.
This does not work in this situation for two reasons:
1) HParams Plugin backend does not accept `FormData`
2) The [the hparams
plugin](https://github.com/tensorflow/tensorboard/blob/master/tensorboard/plugins/hparams/hparams_plugin.py#L191)
only expects GET requests to have a query parameter titled "request"
which is a serialized JSON object.

## Screenshots of UI changes
N/A

## Alternate designs / implementations considered
I considered modifying the hparams plugin to accept many query
parameters but decided that the logic required to convert them to a
single JSON object (including nested objects/arrays and parsing numbers)
was messier than the just doing it on the client.

Author: rileyajones

tensorboard/webapp/webapp_data_source/tb_http_client.ts

@@ -45,6 +45,20 @@ function convertFormDataToObject(formData: FormData) {
   return result;
 }
 
+function bodyToParams(body: any | null, serializeUnder?: string) {
+  if (!body) {
+    return;
+  }
+  const params =
+    body instanceof FormData ? convertFormDataToObject(body) : body;
+  if (serializeUnder) {
+    return {
+      [serializeUnder]: JSON.stringify(params),
+    };
+  }
+  return params;
+}
+
 export const XSRF_REQUIRED_HEADER = 'X-XSRF-Protected';
 
 /**
@@ -84,7 +98,8 @@ export class TBHttpClient implements TBHttpClientInterface {
     path: string,
     // Angular's HttpClient is typed exactly this way.
     body: any | null,
-    options: PostOptions | undefined = {}
+    options: PostOptions | undefined = {},
+    serializeUnder: string | undefined = undefined
   ): Observable<ResponseType> {
     options = withXsrfHeader(options);
     return this.store.select(getIsFeatureFlagsLoaded).pipe(
@@ -100,7 +115,7 @@ export class TBHttpClient implements TBHttpClientInterface {
         if (isInColab) {
           return this.http.get<ResponseType>(resolvedPath, {
             headers: options.headers ?? {},
-            params: convertFormDataToObject(body),
+            params: bodyToParams(body, serializeUnder),
           });
         } else {
           return this.http.post<ResponseType>(resolvedPath, body, options);

tensorboard/webapp/webapp_data_source/tb_http_client_test.ts

@@ -92,18 +92,51 @@ describe('TBHttpClient', () => {
     });
   });
 
-  it('converts POST requests to GET when in Colab', () => {
-    const body = new FormData();
-    body.append('formKey', 'value');
-    store.overrideSelector(getIsFeatureFlagsLoaded, true);
-    store.overrideSelector(getIsInColab, true);
-    tbHttpClient.post('foo', body).subscribe(jasmine.createSpy());
-    httpMock.expectOne((req) => {
-      return (
-        req.method === 'GET' &&
-        req.urlWithParams === 'foo?formKey=value' &&
-        !req.body
-      );
+  describe('converts POST requests to GET when in Colab', () => {
+    it('using form data', () => {
+      const body = new FormData();
+      body.append('formKey', 'value');
+      store.overrideSelector(getIsFeatureFlagsLoaded, true);
+      store.overrideSelector(getIsInColab, true);
+      tbHttpClient.post('foo', body).subscribe(jasmine.createSpy());
+      httpMock.expectOne((req) => {
+        return (
+          req.method === 'GET' &&
+          req.urlWithParams === 'foo?formKey=value' &&
+          !req.body
+        );
+      });
+    });
+
+    it('using json', () => {
+      const body = {key: 'value'};
+      store.overrideSelector(getIsFeatureFlagsLoaded, true);
+      store.overrideSelector(getIsInColab, true);
+      tbHttpClient.post('foo', body).subscribe(jasmine.createSpy());
+      httpMock.expectOne((req) => {
+        return (
+          req.method === 'GET' &&
+          req.urlWithParams === 'foo?key=value' &&
+          !req.body
+        );
+      });
+    });
+
+    it('sets body as a serialized query param when serializeUnder is set', () => {
+      const body = {key: 'value', foo: [1, 2, 3]};
+      store.overrideSelector(getIsFeatureFlagsLoaded, true);
+      store.overrideSelector(getIsInColab, true);
+      tbHttpClient
+        .post('foo', body, {}, 'request')
+        .subscribe(jasmine.createSpy());
+      httpMock.expectOne((req) => {
+        return (
+          req.method === 'GET' &&
+          req.urlWithParams ===
+            'foo?request=%7B%22key%22:%22value%22,%22foo%22:%5B1,2,3%5D%7D' &&
+          !req.body
+        );
+      });
     });
   });