ISPN-16264 Add limit select to display up to 1000 entries

src/app/Caches/Entries/CacheEntries.tsx

@@ -35,16 +35,16 @@ import { ConsoleServices } from '@services/ConsoleServices';
 import { useConnectedUser } from '@app/services/userManagementHook';
 import { ConsoleACL } from '@services/securityService';
 import { CacheConfigUtils } from '@services/cacheConfigUtils';
-import { ContentType, EncodingType } from '@services/infinispanRefData';
+import { ContentType, EncodingType, StorageType } from '@services/infinispanRefData';
 import { CreateOrUpdateEntryForm } from '@app/Caches/Entries/CreateOrUpdateEntryForm';
 import { ClearAllEntries } from '@app/Caches/Entries/ClearAllEntries';
 import { DeleteEntry } from '@app/Caches/Entries/DeleteEntry';
 import { ThemeContext } from '@app/providers/ThemeProvider';
 import { SelectSingle } from '@app/Common/SelectSingle';
-import { selectOptionPropsFromArray } from '@utils/selectOptionPropsCreator';
+import { selectOptionProps, selectOptionPropsFromArray } from '@utils/selectOptionPropsCreator';
 
 const CacheEntries = (props: { cacheName: string }) => {
-  const { cacheEntries, totalEntriesCount, loadingEntries, errorEntries, infoEntries, reloadEntries, getByKey } =
+  const { cacheEntries, totalEntriesCount, loadingEntries, errorEntries, infoEntries, reloadEntries, getByKey, limit, setLimit } =
     useCacheEntries();
   const { cache } = useCacheDetail();
   const { connectedUser } = useConnectedUser();
@@ -342,7 +342,15 @@ const CacheEntries = (props: { cacheName: string }) => {
         {clearAllAction()}
         <ToolbarItem variant="pagination">{toolbarPagination('down')}</ToolbarItem>
         <ToolbarItem>
-          <Tooltip content={t('caches.entries.pagination-tooltip')}>
+          <SelectSingle
+            id={'view'}
+            placeholder={'100'}
+            selected={limit}
+            options={selectOptionProps(['100', '500', '1000'])}
+            style={{ width: '100px' }}
+            onSelect={(value) => setLimit(value)}
+          />
+          <Tooltip content={t('caches.entries.pagination-tooltip', {'number' : limit})}>
             <Button variant="plain">
               <HelpIcon />
             </Button>

src/app/assets/languages/en.json

@@ -596,7 +596,7 @@
       "get-entry-button-label": "Query input button",
       "add-entry-button-label": "Add entry",
       "clear-entry-button-label": "Clear all entries",
-      "pagination-tooltip": "Shows up to 100 entries of the cache",
+      "pagination-tooltip": "Shows up to {{number}} entries of the cache",
       "entries-table-label": "Entries",
       "modal-clear-title": "Permanently clear all entries?",
       "modal-clear-label": "Clear all entries modal",

src/app/providers/CacheDetailProvider.tsx

@@ -18,7 +18,9 @@ const initialContext = {
   loadingEntries: false,
   errorEntries: '',
   infoEntries: '',
-  reloadEntries: () => {}
+  limit: '100',
+  reloadEntries: () => {},
+  setLimit: (limit: string) => {}
 };
 
 export const CacheDetailContext = React.createContext(initialContext);
@@ -35,14 +37,18 @@ const CacheDetailProvider = ({ children }) => {
   const [errorEntries, setErrorEntries] = useState(initialContext.errorEntries);
   const [infoEntries, setInfoEntries] = useState(initialContext.infoEntries);
   const [loadingEntries, setLoadingEntries] = useState(initialContext.loadingEntries);
-
+  const [limit, setLimit] = useState(initialContext.limit);
   const loadCache = (name: string | undefined) => {
     if (name != undefined && name != '' && cacheName != name) {
       setCacheName(name);
       setLoading(true);
     }
   };
 
+  useEffect( () => {
+    setLoadingEntries(true);
+  }, [limit]);
+
   useEffect(() => {
     fetchEntries();
   }, [loadingEntries]);
@@ -97,7 +103,7 @@ const CacheDetailProvider = ({ children }) => {
       if (ConsoleServices.security().hasCacheConsoleACL(ConsoleACL.BULK_READ, cacheName, connectedUser)) {
         if (cache) {
           ConsoleServices.caches()
-            .getEntries(cacheName, cache.encoding, '100')
+            .getEntries(cacheName, cache.encoding, limit)
             .then((eitherEntries) => {
               if (eitherEntries.isRight()) {
                 setCacheEntries(eitherEntries.value);
@@ -135,8 +141,10 @@ const CacheDetailProvider = ({ children }) => {
     loadingEntries: loadingEntries,
     errorEntries: errorEntries,
     infoEntries: infoEntries,
+    limit: limit,
     reloadEntries: useCallback(() => setLoadingEntries(true), []),
-    getByKey: fetchEntry
+    getByKey: fetchEntry,
+    setLimit: setLimit
   };
   return <CacheDetailContext.Provider value={contextValue}>{children}</CacheDetailContext.Provider>;
 };

src/app/services/cachesHook.ts

@@ -36,16 +36,18 @@ export function useFetchCaches() {
 }
 
 export function useCacheEntries() {
-  const { cacheEntries, totalEntriesCount, loadingEntries, errorEntries, infoEntries, reloadEntries, getByKey } =
+  const { cacheEntries, totalEntriesCount, loadingEntries, errorEntries, infoEntries, limit, reloadEntries, getByKey, setLimit } =
     useContext(CacheDetailContext);
   return {
     cacheEntries,
     totalEntriesCount,
     loadingEntries,
     errorEntries,
     infoEntries,
+    limit,
     reloadEntries,
-    getByKey
+    getByKey,
+    setLimit
   };
 }