diff --git a/frontend/__tests__/App.test.tsx b/frontend/__tests__/App.test.tsx
index e43f88a2..26b458e4 100644
--- a/frontend/__tests__/App.test.tsx
+++ b/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 = () => (
+
+
+
+);
+
// -- Mock GraphVisualization
jest.mock("../components/graph/Visualization", () => {
return function StubGraphVisualization() {
diff --git a/frontend/__tests__/Details.test.tsx b/frontend/__tests__/Details.test.tsx
index 9120461a..7fcbddd2 100644
--- a/frontend/__tests__/Details.test.tsx
+++ b/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(
-
+
-
+
);
await findByTestId("no-node-info");
@@ -50,9 +51,9 @@ describe("display node information", () => {
});
const { findByText, asFragment } = render(
-
+
-
+
);
await findByText("connector");
@@ -67,9 +68,9 @@ describe("display node information", () => {
});
const { findByText, asFragment } = render(
-
+
-
+
);
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(
-
+
-
+
);
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(
-
+
-
+
);
await findByText("v2"); // get dropdown menu for schema version
@@ -252,9 +252,9 @@ describe("display node information", () => {
.reply(404);
const { findByTestId } = render(
-
+
-
+
);
await findByTestId("no-schema-versions");
@@ -280,9 +280,9 @@ describe("display node information", () => {
.reply(200, []);
const { findByTestId } = render(
-
+
-
+
);
await findByTestId("no-schema-versions");
@@ -312,9 +312,9 @@ describe("display node information", () => {
.reply(404);
const { findByTestId } = render(
-
+
-
+
);
await findByTestId("no-schema");
diff --git a/frontend/__tests__/DetailsCard.test.tsx b/frontend/__tests__/DetailsCard.test.tsx
index 065e5c77..4a3d2f6b 100644
--- a/frontend/__tests__/DetailsCard.test.tsx
+++ b/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(
-
+
-
+
);
expect(queryByText("test-app-name - Details")).toBeInTheDocument();
diff --git a/frontend/__tests__/Search.test.tsx b/frontend/__tests__/Search.test.tsx
index 809fdd7a..a262b4b8 100644
--- a/frontend/__tests__/Search.test.tsx
+++ b/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 = () => (
+
+
+
+);
+
// -- Mock GraphVisualization
jest.mock("../components/graph/Visualization", () => {
return function StubGraphVisualization() {
diff --git a/frontend/components/App.tsx b/frontend/components/App.tsx
index eeec143a..a8cadb02 100644
--- a/frontend/components/App.tsx
+++ b/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!"));
}}
>