diff --git a/src/api/SwaggerApi.js b/src/api/SwaggerApi.js index 4a1c315708b4c3bc14dc371ebe69837f953bf970..3ecdf8a967b0632a297a326c6876bde218ea33c8 100644 --- a/src/api/SwaggerApi.js +++ b/src/api/SwaggerApi.js @@ -356,15 +356,6 @@ export function unpackHost(host) { return { ...host }; } -export function useHost(id, onError) { - const api = useContext(apiContext); - const method = useCallAndUnpack(api.apis.Hosts.findHostById, unpackHost); - const boundMethod = useCallback(method.bind(null, { host_csentry_id: id }), [ - id - ]); - return useAsync({ fcn: boundMethod, onError: onError }); -} - export function unpackCSEntryHost(host) { return { ...host }; } diff --git a/src/components/common/Loki/LokiContainer.js b/src/components/common/Loki/LokiContainer.js index 704b6c1d1fe1a5a21d7fcc79e0f029551f3a0b0d..e3fc892967529e465a4b524b907564be17187466 100644 --- a/src/components/common/Loki/LokiContainer.js +++ b/src/components/common/Loki/LokiContainer.js @@ -1,10 +1,16 @@ -import React from "react"; +import React, { useContext, useMemo } from "react"; import { Container } from "@mui/material"; -import { useHost } from "../../../api/SwaggerApi"; import { LokiPanel } from "./LokiPanel"; +import { apiContext } from "../../../api/DeployApi"; +import { useAPIMethod } from "@ess-ics/ce-ui-common"; export function LokiContainer({ csEntryId, iocName, isDeployed }) { - const [iocHost] = useHost(csEntryId); + const client = useContext(apiContext); + + const { value: iocHost } = useAPIMethod({ + fcn: client.apis.Hosts.findHostById, + params: useMemo(() => ({ host_csentry_id: csEntryId }), [csEntryId]) + }); return ( <> diff --git a/src/views/host/HostDetailsContainer.js b/src/views/host/HostDetailsContainer.js index 38f033c9793d58c07349d61598ad656a3c9aef84..cb30fd5718ddc60b3202bbc50bef1d6fba023a1c 100644 --- a/src/views/host/HostDetailsContainer.js +++ b/src/views/host/HostDetailsContainer.js @@ -1,20 +1,36 @@ -import React, { useState } from "react"; +import React, { useState, useMemo, useContext, useEffect } from "react"; import { HostDetailsView } from "./HostDetailsView"; import { LinearProgress } from "@mui/material"; -import { useHost } from "../../api/SwaggerApi"; import { onFetchEntityError } from "../../components/common/Helper"; import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView"; +import { apiContext } from "../../api/DeployApi"; +import { useAPIMethod } from "@ess-ics/ce-ui-common"; export function HostDetailsContainer({ id }) { - const [notFoundError, setNotFoundError] = useState(); - const [host] = useHost(id, (m, s) => { - // handle error code 404, and define custom message on the UI because BE sends back generic error message - onFetchEntityError(m, s, setNotFoundError); + const [error, setError] = useState(null); + const client = useContext(apiContext); + + const params = useMemo( + () => ({ + host_csentry_id: id + }), + [id] + ); + + const { value: host, error: fetchError } = useAPIMethod({ + fcn: client.apis.Hosts.findHostById, + params }); + useEffect(() => { + if (fetchError) { + onFetchEntityError(fetchError?.message, fetchError?.status, setError); + } + }, [fetchError]); + return ( <> - {notFoundError ? ( + {error ? ( <NotFoundView /> ) : host ? ( <HostDetailsView diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js index 2ff8f10bbe1169e0afd85098c295a41c20eb81c7..22d1c563acde948cf6207a2f21f99e8710bf881b 100644 --- a/src/views/host/HostDetailsView.js +++ b/src/views/host/HostDetailsView.js @@ -21,7 +21,6 @@ import { initRequestParams } from "../../components/common/Helper"; import AccessControl from "../../components/auth/AccessControl"; -import { useHost } from "../../api/SwaggerApi"; import AlertMessages from "../../components/IOC/AlertMessages"; import useUrlState from "@ahooksjs/use-url-state"; import { @@ -33,8 +32,7 @@ import { usePagination } from "../../hooks/pagination"; import { RootPaper } from "@ess-ics/ce-ui-common"; import IOCTable from "../../components/IOC/IOCTable"; -export function HostDetailsView({ id }) { - const [host] = useHost(id); +export function HostDetailsView({ id, host }) { const { setTitle } = useContext(GlobalAppBarContext); useEffect(() => { if (host && host.csEntryHost) {