diff --git a/src/api/SwaggerApi.js b/src/api/SwaggerApi.js
index 606a341a3bf98811960ab22b8fdf77736991444d..4a1c315708b4c3bc14dc371ebe69837f953bf970 100644
--- a/src/api/SwaggerApi.js
+++ b/src/api/SwaggerApi.js
@@ -205,13 +205,6 @@ export function unpackIocInfo(ioc) {
return ioc;
}
-const emptyIocListResponse = {
- totalCount: 0,
- pageNumber: 0,
- limit: 0,
- iocList: []
-};
-
export function unpackIOCList(iocs) {
let iocArray = iocs.iocList.map((ioc) => unpackIocInfo(ioc));
@@ -225,21 +218,6 @@ export function unpackIOCList(iocs) {
return unpackedIOCList;
}
-export function useIOCList() {
- const api = useContext(apiContext);
- const method = useCallAndUnpack(api.apis.IOCs.listIocs, unpackIOCList);
- return useAsync({ fcn: method, init: emptyIocListResponse });
-}
-
-export function useIOCSearch() {
- const api = useContext(apiContext);
- const method = useCallAndUnpack(
- (params) => api.apis.IOCs.listIocs(params),
- unpackIOCList
- );
- return useAsync({ fcn: method, call: false, init: emptyIocListResponse });
-}
-
export function useCreateIOC(onError) {
const api = useContext(apiContext);
const method = useCallAndUnpack(
diff --git a/src/components/IOC/IOCAsyncList/IOCAsyncList.js b/src/components/IOC/IOCAsyncList/IOCAsyncList.js
deleted file mode 100644
index be2a276e598c3895edeb67a64f2b807fcff3a86a..0000000000000000000000000000000000000000
--- a/src/components/IOC/IOCAsyncList/IOCAsyncList.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { useMediaQuery } from "@mui/material";
-import { IOCList } from "../IOCList";
-import { IOCTable } from "../IOCTable";
-
-export function IOCAsyncList({
- iocs,
- setIocs,
- rowType,
- pagination,
- onPage,
- loading
-}) {
- const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
- const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-
- return (
- <>
- {smDown ? <IOCList iocs={iocs} /> : null}
- {smUp ? (
- <IOCTable
- iocs={iocs}
- setIocs={setIocs}
- loading={loading}
- rowType={rowType}
- pagination={pagination}
- onPage={onPage}
- />
- ) : null}
- </>
- );
-}
diff --git a/src/components/IOC/IOCAsyncList/index.js b/src/components/IOC/IOCAsyncList/index.js
deleted file mode 100644
index f126132a95505fcfcdda2f2fd4598f67078b6c8d..0000000000000000000000000000000000000000
--- a/src/components/IOC/IOCAsyncList/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { IOCAsyncList } from "./IOCAsyncList";
-
-export { IOCAsyncList };
-export default IOCAsyncList;
diff --git a/src/components/IOC/IOCTable/IOCTable.js b/src/components/IOC/IOCTable/IOCTable.js
index 7b747f81d9e94de7cecce162893ff24e32b356d3..b6eca03c720ebf98d162823c4650e6eda2b57c0c 100644
--- a/src/components/IOC/IOCTable/IOCTable.js
+++ b/src/components/IOC/IOCTable/IOCTable.js
@@ -1,9 +1,10 @@
import React from "react";
import { Table } from "@ess-ics/ce-ui-common";
-import { Link } from "@mui/material";
+import { Link, useMediaQuery } from "@mui/material";
import { IOCDescription } from "./IOCDescription";
import { IOCStatus } from "./IOCStatus";
import { noWrapText } from "../../common/Helper";
+import IOCList from "../IOCList";
const ownIocsColumns = [
{
@@ -146,12 +147,15 @@ function createTableRowForExploreIocs(ioc) {
}
export function IOCTable({
- iocs,
+ iocs = [],
rowType = "own",
loading,
pagination,
onPage
}) {
+ const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
+ const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+
const tableTypeSpecifics = {
own: [ownIocsColumns, createTableRowForOwnIocs],
host: [hostDetailsColumns, createTableRowForHostDetails],
@@ -162,12 +166,17 @@ export function IOCTable({
const rows = iocs.map((ioc) => createRow(ioc));
return (
- <Table
- columns={columns}
- rows={rows}
- pagination={pagination}
- onPage={onPage}
- loading={loading}
- />
+ <>
+ {smDown ? <IOCList iocs={iocs} /> : null}
+ {smUp ? (
+ <Table
+ columns={columns}
+ rows={rows}
+ pagination={pagination}
+ onPage={onPage}
+ loading={loading}
+ />
+ ) : null}
+ </>
);
}
diff --git a/src/components/common/User/UserIOCList.js b/src/components/common/User/UserIOCList.js
index 93398e3e43189073ceeaeecfe2f8dd21d550749b..aac7a9ec3001a8a6613b2aebfa339d86afec3e6d 100644
--- a/src/components/common/User/UserIOCList.js
+++ b/src/components/common/User/UserIOCList.js
@@ -1,19 +1,24 @@
-import React from "react";
+import React, { useContext } from "react";
import { Card, CardHeader } from "@mui/material";
-import { useState, useEffect } from "react";
-import { useIOCSearch } from "../../../api/SwaggerApi";
-import { IOCAsyncList } from "../../IOC/IOCAsyncList";
+import { useEffect } from "react";
import { initRequestParams } from "../Helper";
import { usePagination } from "../../../hooks/pagination";
+import IOCTable from "../../IOC/IOCTable";
+import { apiContext } from "../../../api/DeployApi";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
export function UserIocList({ userName }) {
- const [iocs, getIocs, , loading] = useIOCSearch();
- const [iocList, setIocList] = useState([]);
+ const client = useContext(apiContext);
- // Sync manipulatable ioc list copy
- useEffect(() => {
- setIocList(iocs.iocList);
- }, [iocs, setIocList]);
+ const {
+ value: iocs,
+ wrapper: getIocs,
+ loading,
+ dataReady
+ } = useAPIMethod({
+ fcn: client.apis.IOCs.listIocs,
+ call: false
+ });
const rowsPerPage = [20, 50];
const { pagination, setPagination } = usePagination({
@@ -24,8 +29,8 @@ export function UserIocList({ userName }) {
// update pagination whenever search result total pages change
useEffect(() => {
- setPagination({ totalCount: iocs.totalCount ?? 0 });
- }, [setPagination, iocs.totalCount]);
+ setPagination({ totalCount: iocs?.totalCount ?? 0 });
+ }, [setPagination, iocs?.totalCount]);
// Request more results when pagination changes
useEffect(() => {
@@ -50,10 +55,9 @@ export function UserIocList({ userName }) {
component: "h2"
}}
/>
- <IOCAsyncList
- iocs={iocList}
- setIocs={setIocList}
- loading={loading}
+ <IOCTable
+ iocs={iocs?.iocList}
+ loading={loading || !dataReady}
rowType="explore"
pagination={pagination}
onPage={onPage}
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index 7c7cfea55e952fcf178d7ed7accae7e65ea03a59..40d68506988a5281405cc476a19b628ad4364e69 100644
--- a/src/views/IOC/IOCListView.js
+++ b/src/views/IOC/IOCListView.js
@@ -1,8 +1,10 @@
import React, { useState, useEffect, useContext, useCallback } from "react";
import { Container, Grid, Typography, Tabs, Tab } from "@mui/material";
-import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
-import { IOCAsyncList } from "../../components/IOC/IOCAsyncList";
-import { useIOCSearch } from "../../api/SwaggerApi";
+import {
+ GlobalAppBarContext,
+ RootPaper,
+ useAPIMethod
+} from "@ess-ics/ce-ui-common";
import {
applicationTitle,
initRequestParams
@@ -15,19 +17,24 @@ import {
} from "../../components/common/URLState/URLState";
import { usePagination } from "../../hooks/pagination";
import { useMemo } from "react";
-import { RootPaper } from "@ess-ics/ce-ui-common/dist/components/common/container/RootPaper";
+import IOCTable from "../../components/IOC/IOCTable";
+import { apiContext } from "../../api/DeployApi";
export function IOCListView() {
const { setTitle } = useContext(GlobalAppBarContext);
useEffect(() => setTitle(applicationTitle("IOCs")), [setTitle]);
- const [iocs, getIocs /* reset*/, , loading] = useIOCSearch();
- const [iocList, setIocList] = useState([]);
+ const client = useContext(apiContext);
- // Sync manipulatable ioc list copy
- useEffect(() => {
- setIocList(iocs.iocList);
- }, [iocs, setIocList]);
+ const {
+ value: iocs,
+ wrapper: getIocs,
+ loading,
+ dataReady
+ } = useAPIMethod({
+ fcn: client.apis.IOCs.listIocs,
+ call: false
+ });
const [urlState, setUrlState] = useUrlState(
{
@@ -94,8 +101,8 @@ export function IOCListView() {
// update pagination whenever search result total pages change
useEffect(() => {
- setPagination({ totalCount: iocs.totalCount ?? 0 });
- }, [setPagination, iocs.totalCount]);
+ setPagination({ totalCount: iocs?.totalCount ?? 0 });
+ }, [setPagination, iocs?.totalCount]);
// whenever url state changes, update pagination
useEffect(() => {
@@ -139,10 +146,9 @@ export function IOCListView() {
loading={loading}
placeholder="Search in IOC name"
>
- <IOCAsyncList
- iocs={iocList}
- setIocs={setIocList}
- loading={loading}
+ <IOCTable
+ iocs={iocs?.iocList}
+ loading={loading || !dataReady}
rowType="explore"
pagination={pagination}
onPage={onPage}
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index 379241dfcbfee661e58ca3583d5e6b93ac0bd5a9..2ff8f10bbe1169e0afd85098c295a41c20eb81c7 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -1,10 +1,4 @@
-import React, {
- useState,
- useEffect,
- useCallback,
- useContext,
- useMemo
-} from "react";
+import React, { useEffect, useCallback, useContext, useMemo } from "react";
import {
Link,
Container,
@@ -19,7 +13,6 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useHostIOCList } from "../../api/SwaggerApi";
import { HostBadge } from "../../components/host/HostBadge";
import { SimpleAccordion } from "../../components/common/Accordion/SimpleAccordion";
-import { IOCAsyncList } from "../../components/IOC/IOCAsyncList";
import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { LokiPanel } from "../../components/common/Loki/LokiPanel";
import { useNavigate, Link as ReactRouterLink } from "react-router-dom";
@@ -38,6 +31,7 @@ import {
import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
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);
@@ -49,11 +43,6 @@ export function HostDetailsView({ id }) {
}, [host, setTitle]);
const [iocs, getIocs /* reset*/, , loading] = useHostIOCList();
- const [deployedIocs, setDeployedIocs] = useState([]);
- // Sync manipulatable ioc list copy
- useEffect(() => {
- setDeployedIocs(iocs?.deployedList ?? []);
- }, [iocs, setDeployedIocs]);
const [urlState, setUrlState] = useUrlState(
{
@@ -203,9 +192,8 @@ export function HostDetailsView({ id }) {
setUrlState({ iocs_open: serialize(expanded) })
}
>
- <IOCAsyncList
- iocs={deployedIocs}
- setIocs={setDeployedIocs}
+ <IOCTable
+ iocs={iocs?.deployedList}
loading={loading}
rowType="host"
pagination={pagination}