Replace restful-react

frontend/__tests__/App.test.tsx

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   act,
   fireEvent,
@@ -9,10 +10,18 @@ import mockRouter from "next-router-mock";
 import singletonRouter from "next/router";
 import nock from "nock";
 import React from "react";
-import App from "../components/App";
+import AppComponent from "../components/App";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <AppComponent />
+  </QueryClientProvider>
+);
+
 // -- Mock GraphVisualization
 jest.mock("../components/graph/Visualization", () => {
   return function StubGraphVisualization() {

frontend/__tests__/Details.test.tsx

@@ -1,15 +1,16 @@
-import nock from "nock";
-import React from "react";
-import { RestfulProvider } from "restful-react";
-
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   fireEvent,
   render,
   waitFor,
   waitForElementToBeRemoved,
 } from "@testing-library/react";
+import nock from "nock";
+import React from "react";
 import Details from "../components/Details";
 
+const queryClient = new QueryClient();
+
 describe("display node information", () => {
   beforeAll(() => {
     Object.defineProperty(window, "matchMedia", {
@@ -33,9 +34,9 @@ describe("display node information", () => {
     });
 
     const { findByTestId, asFragment } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="1" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByTestId("no-node-info");
@@ -50,9 +51,9 @@ describe("display node information", () => {
     });
 
     const { findByText, asFragment } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="2" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByText("connector");
@@ -67,9 +68,9 @@ describe("display node information", () => {
     });
 
     const { findByText, asFragment } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="2" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByText("connector");
@@ -106,9 +107,9 @@ describe("display node information", () => {
         "http://localhost:5601/app/kibana#/discover?_a=(columns:!(_source),query:(language:lucene,query:'kubernetes.labels.app:%20%22atm-fraud-transactionavroproducer%22'))"
       );
     const { findByText, asFragment, queryByText } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="atm-fraud-transactionavroproducer" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByText("streaming-app");
@@ -191,18 +192,17 @@ describe("display node information", () => {
       });
 
     nock("http://localhost")
-      .get(
-        "/api/node/linking/atm-fraud-incoming-transactions-topic?link_type=grafana"
-      )
+      .get("/api/node/linking/atm-fraud-incoming-transactions-topic")
+      .query({ link_type: "grafana" })
       .reply(
         200,
         "http://localhost:3000/d/path/to/dashboard?var-topics=atm-fraud-incoming-transactions-topic"
       );
 
     const { getByText, findByText, getByTestId } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="atm-fraud-incoming-transactions-topic" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByText("v2"); // get dropdown menu for schema version
@@ -252,9 +252,9 @@ describe("display node information", () => {
       .reply(404);
 
     const { findByTestId } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="atm-fraud-incoming-transactions-topic" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByTestId("no-schema-versions");
@@ -280,9 +280,9 @@ describe("display node information", () => {
       .reply(200, []);
 
     const { findByTestId } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="atm-fraud-incoming-transactions-topic" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByTestId("no-schema-versions");
@@ -312,9 +312,9 @@ describe("display node information", () => {
       .reply(404);
 
     const { findByTestId } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <Details nodeId="atm-fraud-incoming-transactions-topic" />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     await findByTestId("no-schema");

frontend/__tests__/DetailsCard.test.tsx

@@ -1,10 +1,12 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render } from "@testing-library/react";
 import nock from "nock";
 import React from "react";
-import { RestfulProvider } from "restful-react";
 import DetailsCard from "../components/DetailsCard";
 import Node from "../components/graph/Node";
 
+const queryClient = new QueryClient();
+
 describe("display card for node details", () => {
   beforeAll(() => {
     Object.defineProperty(window, "matchMedia", {
@@ -38,9 +40,9 @@ describe("display card for node details", () => {
     });
 
     const { queryByText } = render(
-      <RestfulProvider base="http://localhost">
+      <QueryClientProvider client={queryClient}>
         <DetailsCard node={node} />
-      </RestfulProvider>
+      </QueryClientProvider>
     );
 
     expect(queryByText("test-app-name - Details")).toBeInTheDocument();

frontend/__tests__/Search.test.tsx

@@ -1,10 +1,19 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, within } from "@testing-library/react";
 import nock from "nock";
 import React from "react";
-import App from "../components/App";
+import AppComponent from "../components/App";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <AppComponent />
+  </QueryClientProvider>
+);
+
 // -- Mock GraphVisualization
 jest.mock("../components/graph/Visualization", () => {
   return function StubGraphVisualization() {

frontend/components/App.tsx

@@ -12,13 +12,13 @@ import {
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useMutate } from "restful-react";
 import {
-  HTTPValidationError,
   useGetMetricsApiMetricsGet,
   useGetPipelinesApiPipelinesGet,
   useGetPositionedGraphApiGraphGet,
-} from "./api/fetchers";
+  useUpdateApiUpdatePost,
+} from "./api/apiComponents";
+import { HTTPValidationError } from "./api/apiSchemas";
 import DetailsCard from "./DetailsCard";
 import Node from "./graph/Node";
 import GraphVisualization from "./graph/Visualization";
@@ -68,15 +68,14 @@ const App: React.FC = () => {
     localStorage.setItem(REFRESH_INTERVAL, refreshInterval.toString());
   }, [refreshInterval]);
 
-  const { mutate: update, loading: isUpdating } = useMutate({
-    verb: "POST",
-    path: "/api/update",
-  });
+  const { mutate: update, isLoading: isUpdating, isError: isUpdateError } =
+    useUpdateApiUpdatePost();
 
   const {
     data: graph,
-    loading: isLoadingGraph,
     error: graphError,
+    isLoading: isLoadingGraph,
+    isError: isGraphError,
     refetch: graphRefetch,
   } = useGetPositionedGraphApiGraphGet({
     queryParams: currentPipeline !== ALL_PIPELINES
@@ -87,24 +86,24 @@ const App: React.FC = () => {
   const {
     refetch: retryPipelineGraph,
     error: retryPipelineGraphError,
+    isError: isRetryPipelineGraphError,
     data: retryPipelineGraphData,
   } = useGetPositionedGraphApiGraphGet({
     queryParams: { pipeline_name: currentPipeline },
-    lazy: true,
-  });
+  }, { enabled: false });
 
   const {
     data: pipelines,
-    loading: isLoadingPipelines,
+    isLoading: isLoadingPipelines,
     error: pipelineError,
   } = useGetPipelinesApiPipelinesGet({});
 
   const {
     data: metrics,
-    loading: isLoadingMetrics,
+    isLoading: isLoadingMetrics,
     refetch: refetchMetrics,
     error: metricsError,
-  } = useGetMetricsApiMetricsGet({ lazy: true });
+  } = useGetMetricsApiMetricsGet({}, { enabled: false });
 
   useEffect(() => {
     if (refreshInterval && refreshInterval > 0) {
@@ -132,38 +131,31 @@ const App: React.FC = () => {
   }, [graph, query]);
 
   useEffect(() => {
-    if (graphError) {
+    if (isGraphError) {
       let errorMessage: string | undefined;
-      if ("data" in graphError) {
-        // specific pipeline was not found
-        const data = graphError["data"] as HTTPValidationError;
-        if (data.detail) {
-          errorMessage = data.detail.toString();
-        }
+      // specific pipeline was not found
+      const data = graphError.payload as HTTPValidationError;
+      if (data.detail) {
+        errorMessage = data.detail.toString();
       }
       message.error(errorMessage || "Failed loading graph", 5);
 
-      if (graphError.status === 404 && currentPipeline !== ALL_PIPELINES) {
+      if (isGraphError && currentPipeline !== ALL_PIPELINES) {
         // check if a re-scrape solves it
         const hideMessage = message.warning("Refreshing pipelines", 0);
-        update({})
-          .then(() => {
-            retryPipelineGraph();
-          })
-          .catch(() => {
-            redirectAllPipelines();
-          })
-          .finally(() => {
-            hideMessage();
-          });
+        update({});
+        if (isUpdateError) {
+          redirectAllPipelines();
+        } else {
+          hideMessage();
+        }
       }
     }
   }, [graphError]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (
-      retryPipelineGraphError
-      && retryPipelineGraphError.status === 404
+      isRetryPipelineGraphError
       && currentPipeline !== ALL_PIPELINES
     ) {
       // pipeline still not found
@@ -261,9 +253,10 @@ const App: React.FC = () => {
                 key="3"
                 style={{ float: "right", marginLeft: "auto" }}
                 onClick={() => {
-                  update({})
-                    .then(() => router.reload())
-                    .catch(() => message.error("Failed to update!"));
+                  update({});
+                  router.reload();
+                  // .then(() => router.reload())
+                  // .catch(() => message.error("Failed to update!"));
                 }}
               >
                 <Button type="dashed" ghost={true}>

frontend/components/Details.tsx

@@ -4,10 +4,10 @@ import copy from "copy-to-clipboard";
 import React from "react";
 import ReactJson from "react-json-view";
 import {
-  NodeInfoListItem,
   useGetLinkingApiNodeLinkingNodeIdGet,
   useGetNodeInfoApiNodeNodeIdGet,
-} from "./api/fetchers";
+} from "./api/apiComponents";
+import { NodeInfoListItem } from "./api/apiSchemas";
 import style from "./Details.module.css";
 import Schema from "./Schema";
 
@@ -16,17 +16,17 @@ interface DetailsProps {
 }
 
 const Details = ({ nodeId }: DetailsProps) => {
-  const { data, loading, error } = useGetNodeInfoApiNodeNodeIdGet({
-    node_id: nodeId,
+  const { data, isLoading, isError } = useGetNodeInfoApiNodeNodeIdGet({
+    pathParams: { nodeId: nodeId },
   });
-  if (loading) {
+  if (isLoading) {
     return (
       <div className={style.loadingSpinnerContainer}>
         <Spin tip="Loading..." />
       </div>
     );
   }
-  if (!data || error) {
+  if (!data || isError) {
     return (
       <Alert
         data-testid="no-node-info"
@@ -82,14 +82,15 @@ const NodeInfoDetail = ({ infoListItem, nodeId }: NodeInfoDetailProps) => {
 };
 
 const LinkInfo = ({ infoListItem, nodeId }: NodeInfoDetailProps) => {
-  const { data: linkToService, loading } = useGetLinkingApiNodeLinkingNodeIdGet(
-    {
-      node_id: nodeId,
-      queryParams: { link_type: infoListItem.value as string },
-    }
-  );
+  const { data: linkToService, isLoading } =
+    useGetLinkingApiNodeLinkingNodeIdGet(
+      {
+        pathParams: { nodeId: nodeId },
+        queryParams: { link_type: infoListItem.value as string },
+      }
+    );
 
-  if (loading) {
+  if (isLoading) {
     return <Spin tip="Loading link..." />;
   }
   if (linkToService) {