New pagination

src/main/webui/src/app/components/content/group/GroupEdit.jsx

@@ -147,10 +147,14 @@
 
 export default function GroupEdit() {
   const [store, setStore] = useState({"type": "group", "constituents": []});
-  const [available, setAvailable] = useState([]);
+  const [state, setState] = useState({
+    available: [],
+    nextPage: ''
+  });
   const location = useLocation();
   const {packageType, name} = useParams();
-  const [avaiLoading, setAvaiLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState("");
   const {
     register,
     reset,
@@ -164,20 +168,26 @@
   useEffect(() => {
     const pkgType = mode === "edit" ? packageType : "all";
     const fetchAvailable = async () => {
-      setAvaiLoading(true);
+      setLoading(true);
       // get available Store data
-      const availableRes = await storeQueryRes.getEndpoints(pkgType);
+      const availableRes = await storeQueryRes.getEndpoints(pkgType, page);
       let allAvailable = new Set();
+      let nextAvailablePage = "";
       if (availableRes.success) {
         let availableResult = availableRes.result.items;
+
+        if (availableRes.result.hasOwnProperty("next_page")) {
+          nextAvailablePage = availableRes.result.next_page;
+        }
+
         availableResult.forEach(item => {
           allAvailable.add(item.packageType + ':' + item.type + ':' + item.name);
         });
       } else {
         Utils.logMessage(`Getting available constituents failed! Error reason: ${availableRes.error.message}`);
       }
-      setAvaiLoading(false);
-      return allAvailable;
+      setLoading(false);
+      return {available: allAvailable, nextPage: nextAvailablePage};
     };
 
     if (mode === 'edit') {
@@ -188,7 +198,8 @@
           const raw = res.result;
           const storeView = Utils.cloneObj(raw);
           storeView.disabled = raw.disabled === undefined ? false : raw.disabled;
-          let allAvailable = await fetchAvailable();
+          let newState = await fetchAvailable();
+          let allAvailable = newState.available;
           raw.constituents.forEach(item => allAvailable.delete(item));
           allAvailable.delete(raw.key);
           // get Store disablement data
@@ -200,9 +211,10 @@
           } else {
             Utils.logMessage(`disable timeout getting failed! Error reason: ${timeoutRes.error.message}`);
           }
+          newState.available = [...state.available, ...Array.from(allAvailable)];
           // Change state and re-rendering
           setStore(raw);
-          setAvailable(Array.from(allAvailable));
+          setState(newState);
           reset(raw);
         } else {
           // TODO: find another way to do error handling
@@ -215,11 +227,11 @@
 
     if (mode === "new") {
       (async () => {
-        let allAvailable = await fetchAvailable();
-        setAvailable(Array.from(allAvailable));
+        let newState = await fetchAvailable();
+        setState(newState);
       })();
     }
-  }, [packageType, name, mode, reset]);
+  }, [packageType, name, mode, reset, page]);
 
   const updatePackageType = newPackageType => {
     let newStore = store;
@@ -294,9 +306,9 @@
           </div>
           <div className="fieldset-caption">Constituents</div>
           {
-           avaiLoading?
+           loading?
             <LoadingSpiner /> :
-            <EditConstituents store={store} currentAvailable={available} />
+            <EditConstituents store={store} currentAvailable={state.available} />
           }
         </div>
       </div>

src/main/webui/src/app/components/content/group/GroupList.jsx

@@ -52,34 +52,51 @@
     listing: [],
     enableDebug: false,
     message: "",
+    nextPage: ''
   });
   const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState("");
+
+  const handleScroll = () => {
+    if (window.innerHeight + document.documentElement.scrollTop + 1
+          >= document.documentElement.scrollHeight) {
+            if (state.nextPage !== undefined) {
+              setPage(state.nextPage);
+            }
+          }
+  };
+
+  useEffect(()=>{
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  });
 
   useEffect(() => {
     setLoading(true);
     (async () => {
-      const res = await storeRes.getStores(packageType, "group");
+      const res = await storeRes.getStores(packageType, "group", page);
       if (res.success) {
         let data = res.result;
         if (typeof data === "string") {
           data = JSON.parse(data);
         }
-        setState({
-          rawList: data.items,
-          listing: data.items
-        });
+        const newState = {
+          rawList: [...state.rawList, ...data.items],
+          listing: [...state.listing, ...data.items],
+        };
+
+        if (data.hasOwnProperty("next_page")) {
+          newState.nextPage = data.next_page;
+        }
+        setState(newState);
       } else {
         setState({
           message: res.error.message,
         });
       }
       setLoading(false);
     })();
-  }, [packageType]);
-
-  if (loading) {
-    return <LoadingSpiner />;
-  }
+  }, [packageType, page]);
 
   return (
     <React.Fragment>
@@ -100,6 +117,7 @@
        :
         <div className="container-fluid">No content fetched!</div>
       }
+      {loading && <LoadingSpiner />}
       <ListJsonDebugger
         enableDebug={state.enableDebug}
         jsonObj={state.listing}

src/main/webui/src/app/components/content/remote/RemoteList.jsx

@@ -52,35 +52,52 @@
     rawList: [],
     listing: [],
     enableDebug: false,
-    message: ''
+    message: '',
+    nextPage: ''
   });
   const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState("");
+
+  const handleScroll = () => {
+    if (window.innerHeight + document.documentElement.scrollTop + 1
+          >= document.documentElement.scrollHeight) {
+            if (state.nextPage !== undefined) {
+              setPage(state.nextPage);
+            }
+          }
+  };
+
+  useEffect(()=>{
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  });
 
   useEffect(()=>{
     setLoading(true);
     (async ()=>{
-      const res = await storeRes.getStores(packageType, "remote");
+      const res = await storeRes.getStores(packageType, "remote", page);
       if (res.success){
         let data = res.result;
         if(typeof data === 'string'){
           data = JSON.parse(data);
         }
-        setState({
-          rawList: data.items,
-          listing: data.items
-        });
+        const newState = {
+          rawList: [...state.rawList, ...data.items],
+          listing: [...state.listing, ...data.items],
+        };
+
+        if (data.hasOwnProperty("next_page")) {
+          newState.nextPage = data.next_page;
+        }
+        setState(newState);
       }else{
         setState({
           message: res.error.message
         });
       }
       setLoading(false);
     })();
-  }, [packageType]);
-
-  if (loading) {
-    return <LoadingSpiner />;
-  }
+  }, [packageType, page]);
 
   return (
     <React.Fragment>
@@ -98,6 +115,7 @@
         No content fetched!
       </div>
       }
+      {loading && <LoadingSpiner />}
       <ListJsonDebugger enableDebug={state.enableDebug} jsonObj={state.listing} />
     </React.Fragment>
   );

src/main/webui/src/app/utils/RestClient.js

@@ -69,6 +69,14 @@ const genPageParam = (index, size) => {
   return queryParam;
 };
 
+const genPageStringParam = page => {
+  let queryParam = "";
+  if(page !== undefined && page.length > 0) {
+    queryParam = `page=${page}`;
+  }
+  return queryParam;
+};
+
 const handleResponse = async response => {
   if (response.ok){
     let result = {};
@@ -123,14 +131,24 @@ const IndyRest = {
       const response = await http.delete(storeAPIEndpoint(pkgType, type, name));
       return handleResponse(response);
     },
-    getStores: async (pkgType, type) => {
-      const response = await jsonRest.get(`${BASE_STORE_API_PATH}/${pkgType}/${type}`);
+    getStores: async (pkgType, type, page) => {
+      const queryParam = genPageStringParam(page);
+      let apiPath = `${BASE_STORE_API_PATH}/${pkgType}/${type}`;
+      if(queryParam.length > 0){
+        apiPath += `?${queryParam}`;
+      }
+      const response = await jsonRest.get(apiPath);
       return handleResponse(response);
     }
   },
   storeQueryRes: {
-    getEndpoints: async pkgType => {
-      const response = await jsonRest.get(`${BASE_STORE_API_PATH}/query/endpoints/${pkgType}`);
+    getEndpoints: async (pkgType, page) => {
+      const queryParam = genPageStringParam(page);
+      let apiPath = `${BASE_STORE_API_PATH}/query/endpoints/${pkgType}`;
+      if(queryParam.length > 0){
+        apiPath += `?${queryParam}`;
+      }
+      const response = await jsonRest.get(apiPath);
       return handleResponse(response);
     },
     getStoreKeys: async pkgType => {

src/main/webui/src/server/app.js

@@ -109,14 +109,19 @@ const decideMockListFile = (packgeType, type) => {
 // For store listing
 app.get(`${STORE_API_BASE}/:packageType/:type`, async (req, res) => {
   await sleep(2000);
-  const [pkgType, type] = [req.params.packageType, req.params.type];
+  const [pkgType, type, page] = [req.params.packageType, req.params.type, req.query.page];
   if(pkgType==="_all"){
     // TODO: do all packageType for type handling here
   }
   const mockFile = decideMockListFile(pkgType, type);
   if(existsSync(mockFile)){
     const list = require(mockFile);
-    res.status(200).json(list);
+    if (page === undefined) {
+      res.status(200).json(list[0]);
+    } else {
+      const result = list.find(item=>item.current_page===page);
+      res.status(200).json(result);
+    }
   }else{
     res.status(404).json({error: "No such stores!"});
   }