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!")); }} >