Improve audit page loading (Flagsmith#1995)

* Improve audit page loading * Add page number * Add page number
interactio · Mar 6, 2023 · 3bd8b5b · 3bd8b5b
1 parent db5ce64
commit 3bd8b5b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 62 deletions.
diff --git a/frontend/common/stores/config-store.js b/frontend/common/stores/config-store.js
@@ -44,7 +44,7 @@ flagsmith.init({
     onChange: controller.loaded,
     api: Project.flagsmithClientAPI,
     cacheFlags: true,
-    realtime: Project.flagsmithRealtime,
+    realtime: true,
     AsyncStorage,
     enableAnalytics: Project.flagsmithAnalytics,
 }).catch(() => {

diff --git a/frontend/web/components/AuditLog.tsx b/frontend/web/components/AuditLog.tsx
@@ -20,7 +20,14 @@ const AuditLog: FC<AuditLogType> = (props) => {
     const {searchInput, search, setSearchInput} = useSearchThrottle(Utils.fromParam().search, () => {
         setPage(1);
     });
+    const [environments, setEnvironments] = useState(props.environmentId);
 
+    useEffect(()=>{
+        if(environments!==props.environmentId) {
+            setEnvironments(props.environmentId)
+            setPage(1)
+        }
+    },[props.environmentId])
     useEffect(()=>{
         if(props.onSearchChange) {
             props.onSearchChange(search)
@@ -29,14 +36,15 @@ const AuditLog: FC<AuditLogType> = (props) => {
 
     const hasHadResults = useRef(false);
 
-    const {data: auditLog, isLoading, isError} = useGetAuditLogsQuery({
+    const {data: auditLog, isFetching, isError} = useGetAuditLogsQuery({
         search,
         project: props.projectId,
         page,
         page_size: props.pageSize,
-        environments: props.environmentId,
+        environments,
     });
 
+
     useEffect(()=>{
        props.onErrorChange?.(isError)
     },[])
@@ -85,11 +93,12 @@ const AuditLog: FC<AuditLogType> = (props) => {
         );
     }
 
+
     return (
         <PanelSearch
             id='messages-list'
             title='Log entries'
-            isLoading={isLoading || (!auditLog?.results)}
+            isLoading={isFetching}
             className='no-pad'
             icon='ion-md-browsers'
             items={auditLog?.results}
@@ -98,7 +107,7 @@ const AuditLog: FC<AuditLogType> = (props) => {
             onChange={(e: InputEvent) => {
                 setSearchInput(Utils.safeParseEventValue(e));
             }}
-            paging={auditLog}
+            paging={{...(auditLog||{}), page, pageSize: props.pageSize}}
             nextPage={() => {
                 setPage(page + 1);
             }}

diff --git a/frontend/web/components/Paging.js b/frontend/web/components/Paging.js
@@ -39,64 +39,68 @@ export default class Paging extends PureComponent {
                   disabled={isLoading || !paging.previous} className="icon btn-paging ion-ios-arrow-back"
                   onClick={() => prevPage()}
                 />
-                <Row className="list-item">
-                    {!range.includes(0) && !noPages && (
-                      <>
-                          <div
-                            role="button"
-                            className={cn({
-                                page: true,
-                                'active': currentIndex === 1,
-                            })}
-                            onClick={paging.currentPage === 1 + 1 ? undefined : () => goToPage(1)}
-                          >
-                              {1}
-                          </div>
-                          <div
-                            className={cn({
-                                page: true,
-                            })}
-                          >
-                              ...
-                          </div>
-                      </>
-                    )}
-                    {!noPages && _.map(range, index => (
-                        <div
-                          key={index} role="button"
-                          className={cn({
-                              page: true,
-                              'active': currentIndex === index,
-                          })}
-                          onClick={paging.currentPage === index + 1 ? undefined : () => goToPage(index + 1)}
-                        >
-                            {index + 1}
-                        </div>
-                    ))}
-                    {!noPages && !range.includes(lastPage - 1) && (
-                      <>
+                {!!paging.currentPage ? (
+                    <Row className="list-item">
+                        {!range.includes(0) && !noPages && (
+                            <>
+                                <div
+                                    role="button"
+                                    className={cn({
+                                        page: true,
+                                        'active': currentIndex === 1,
+                                    })}
+                                    onClick={paging.currentPage === 1 + 1 ? undefined : () => goToPage(1)}
+                                >
+                                    {1}
+                                </div>
+                                <div
+                                    className={cn({
+                                        page: true,
+                                    })}
+                                >
+                                    ...
+                                </div>
+                            </>
+                        )}
+                        {!noPages && _.map(range, index => (
+                            <div
+                                key={index} role="button"
+                                className={cn({
+                                    page: true,
+                                    'active': currentIndex === index,
+                                })}
+                                onClick={paging.currentPage === index + 1 ? undefined : () => goToPage(index + 1)}
+                            >
+                                {index + 1}
+                            </div>
+                        ))}
+                        {!noPages && !range.includes(lastPage - 1) && (
+                            <>
 
-                          <div
-                            className={cn({
-                                page: true,
-                            })}
-                            onClick={paging.currentPage === lastPage + 1 ? undefined : () => goToPage(1)}
-                          >
-                              ...
-                          </div>
-                          <div
-                            role="button"
-                            className={cn({
-                                page: true,
-                                'active': currentIndex === lastPage,
-                            })}
-                            onClick={paging.currentPage === lastPage ? undefined : () => goToPage(lastPage)}
-                          >
-                              {lastPage}
-                          </div>
-                      </>
-                    )}
-                </Row>
+                                <div
+                                    className={cn({
+                                        page: true,
+                                    })}
+                                    onClick={paging.currentPage === lastPage + 1 ? undefined : () => goToPage(1)}
+                                >
+                                    ...
+                                </div>
+                                <div
+                                    role="button"
+                                    className={cn({
+                                        page: true,
+                                        'active': currentIndex === lastPage,
+                                    })}
+                                    onClick={paging.currentPage === lastPage ? undefined : () => goToPage(lastPage)}
+                                >
+                                    {lastPage}
+                                </div>
+                            </>
+                        )}
+                    </Row>
+                ): !!paging.page && <span>Page {paging.page}{paging.pageSize&&paging.count ? (
+                    ` of ${Math.ceil(paging.count/paging.pageSize)}`
+                ):""}</span>}
                 <Button
                   className="icon btn-paging ion-ios-arrow-forward" disabled={isLoading || !paging.next}
                   onClick={() => nextPage()}