continue typescript & chakra v1 migrations [skip ci]

hyperglass/ui/hooks/index.ts

@@ -1,6 +1,7 @@
 export * from './useBooleanValue';
 export * from './useDevice';
 export * from './useGreeting';
+export * from './useLGQuery';
 export * from './useOpposingColor';
 export * from './useSessionStorage';
 export * from './useStrf';

hyperglass/ui/hooks/types.ts

@@ -3,8 +3,4 @@ export interface TOpposingOptions {
   dark?: string;
 }
 
-export interface TStringTableData extends Omit<TQueryResponse, 'output'> {
-  output: TStructuredResponse;
-}
-
 export type TUseGreetingReturn = [boolean, (v?: boolean) => void];

hyperglass/ui/hooks/useLGQuery.ts

@@ -0,0 +1,62 @@
+import { useQuery } from 'react-query';
+import { useConfig } from '~/context';
+
+import type { TFormState } from '~/types';
+
+/**
+ * Fetch Wrapper that incorporates a timeout via a passed AbortController instance.
+ *
+ * Adapted from: https://lowmess.com/blog/fetch-with-timeout
+ */
+export async function fetchWithTimeout(
+  uri: string,
+  options: RequestInit = {},
+  timeout: number,
+  controller: AbortController,
+): Promise<Response> {
+  /**
+   * Lets set up our `AbortController`, and create a request options object that includes the
+   * controller's `signal` to pass to `fetch`.
+   */
+  const { signal = new AbortController().signal, ...allOptions } = options;
+  const config = { ...allOptions, signal };
+  /**
+   * Set a timeout limit for the request using `setTimeout`. If the body of this timeout is
+   * reached before the request is completed, it will be cancelled.
+   */
+  setTimeout(() => {
+    controller.abort();
+  }, timeout);
+  return await fetch(uri, config);
+}
+
+export function useLGQuery(query: TFormState) {
+  const { request_timeout } = useConfig();
+  const controller = new AbortController();
+
+  async function runQuery(url: string, requestData: TFormState): Promise<TQueryResponse> {
+    const { queryLocation, queryTarget, queryType, queryVrf } = requestData;
+    const res = await fetchWithTimeout(
+      url,
+      {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          query_location: queryLocation,
+          query_target: queryTarget,
+          query_type: queryType,
+          query_vrf: queryVrf,
+        }),
+        mode: 'cors',
+      },
+      request_timeout * 1000,
+      controller,
+    );
+    return await res.json();
+  }
+  return useQuery<TQueryResponse, Response | TQueryResponse | Error>(
+    ['/api/query/', query],
+    runQuery,
+    { refetchInterval: false },
+  );
+}

hyperglass/ui/hooks/useTableToString.ts

@@ -3,8 +3,7 @@ import dayjs from 'dayjs';
 import relativeTimePlugin from 'dayjs/plugin/relativeTime';
 import utcPlugin from 'dayjs/plugin/utc';
 import { useConfig } from '~/context';
-
-import { TStringTableData } from './types';
+import { isStructuredOutput } from '~/types';
 
 dayjs.extend(relativeTimePlugin);
 dayjs.extend(utcPlugin);
@@ -48,10 +47,10 @@ function formatTime(val: number): string {
 
 export function useTableToString(
   target: string,
-  data: TStringTableData,
+  data: TQueryResponse | undefined,
   ...deps: any
 ): () => string {
-  const { web, parsed_data_fields } = useConfig();
+  const { web, parsed_data_fields, messages } = useConfig();
 
   function formatRpkiState(val: number): string {
     const rpkiStates = [
@@ -83,26 +82,29 @@ export function useTableToString(
     }
   }
 
-  function doFormat(target: string, data: TStringTableData): string {
+  function doFormat(target: string, data: TQueryResponse | undefined): string {
+    let result = messages.no_output;
     try {
-      let tableStringParts = [`Routes For: ${target}`, `Timestamp: ${data.timestamp} UTC`];
-
-      data.output.routes.map(route => {
-        parsed_data_fields.map(field => {
-          const [header, accessor, align] = field;
-          if (align !== null) {
-            let value = route[accessor];
-            const fmtFunc = getFmtFunc(accessor);
-            value = fmtFunc(value);
-            if (accessor === 'prefix') {
-              tableStringParts.push(`  - ${header}: ${value}`);
-            } else {
-              tableStringParts.push(`    - ${header}: ${value}`);
+      if (typeof data !== 'undefined' && isStructuredOutput(data)) {
+        let tableStringParts = [`Routes For: ${target}`, `Timestamp: ${data.timestamp} UTC`];
+        for (const route of data.output.routes) {
+          for (const field of parsed_data_fields) {
+            const [header, accessor, align] = field;
+            if (align !== null) {
+              let value = route[accessor];
+              const fmtFunc = getFmtFunc(accessor);
+              value = fmtFunc(value);
+              if (accessor === 'prefix') {
+                tableStringParts.push(`  - ${header}: ${value}`);
+              } else {
+                tableStringParts.push(`    - ${header}: ${value}`);
+              }
             }
           }
-        });
-      });
-      return tableStringParts.join('\n');
+        }
+        result = tableStringParts.join('\n');
+      }
+      return result;
     } catch (err) {
       console.error(err);
       return `An error occurred while parsing the output: '${err.message}'`;