Add pagination

coder · BrunoQuaresma · Sep 7, 2022 · Aug 30, 2022 · Aug 30, 2022 · Aug 31, 2022
commit 77fa647a1a70e55659d46a5151a53d8c9867ed87
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -4,7 +4,7 @@ import { RequirePermission } from "components/RequirePermission/RequirePermissio
 import { SetupPage } from "pages/SetupPage/SetupPage"
 import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
 import { FC, lazy, Suspense, useContext } from "react"
-import { Navigate, Route, Routes } from "react-router-dom"
+import { Route, Routes } from "react-router-dom"
 import { selectPermissions } from "xServices/auth/authSelectors"
 import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors"
 import { XServiceContext } from "xServices/StateContext"
@@ -139,19 +139,15 @@ export const AppRouter: FC = () => {
           <Route
             index
             element={
-              process.env.NODE_ENV === "production" ? (
-                <Navigate to="/workspaces" />
-              ) : (
-                <AuthAndFrame>
-                  <RequirePermission
-                    isFeatureVisible={
-                      featureVisibility[FeatureNames.AuditLog] && !!permissions?.viewAuditLog
-                    }
-                  >
-                    <AuditPage />
-                  </RequirePermission>
-                </AuthAndFrame>
-              )
+              <AuthAndFrame>
+                <RequirePermission
+                  isFeatureVisible={
+                    featureVisibility[FeatureNames.AuditLog] && !!permissions?.viewAuditLog
+                  }
+                >
+                  <AuditPage />
+                </RequirePermission>
+              </AuthAndFrame>
             }
           ></Route>
         </Route>

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -384,7 +384,17 @@ export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
   return response.data
 }
 
-export const getAuditLogs = async (): Promise<TypesGen.AuditLog[]> => {
-  const response = await axios.get("/api/v2/audit")
+interface GetAuditLogsOptions {
+  limit: number
+  offset: number
+}
+
+export const getAuditLogs = async (options: GetAuditLogsOptions): Promise<TypesGen.AuditLog[]> => {
+  const response = await axios.get(`/api/v2/audit?limit=${options}&offset=${options.offset}`)
+  return response.data
+}
+
+export const getAuditLogsCount = async (): Promise<number> => {
+  const response = await axios.get(`/api/v2/audit/count`)
   return response.data
 }
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -4,10 +4,31 @@ import { auditMachine } from "xServices/audit/auditXService"
 import { AuditPageView } from "./AuditPageView"
 
 const AuditPage: FC = () => {
-  const [auditState] = useMachine(auditMachine)
-  const { auditLogs } = auditState.context
+  const [auditState, auditSend] = useMachine(auditMachine, {
+    context: {
+      page: 1,
+      limit: 25,
+    },
+  })
+  const { auditLogs, count, page, limit } = auditState.context
 
-  return <AuditPageView auditLogs={auditLogs} />
+  return (
+    <AuditPageView
+      auditLogs={auditLogs}
+      count={count}
+      page={page}
+      limit={limit}
+      onNext={() => {
+        auditSend("NEXT")
+      }}
+      onPrevious={() => {
+        auditSend("PREVIOUS")
+      }}
+      onGoToPage={(page) => {
+        auditSend("GO_TO_PAGE", { page })
+      }}
+    />
+  )
 }
 
 export default AuditPage
diff --git a/site/src/pages/AuditPage/AuditPageView.stories.tsx b/site/src/pages/AuditPage/AuditPageView.stories.tsx
@@ -1,20 +1,29 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import { MockAuditLog, MockAuditLog2 } from "testHelpers/entities"
-import { AuditPageView } from "./AuditPageView"
+import { AuditPageView, AuditPageViewProps } from "./AuditPageView"
 
 export default {
   title: "pages/AuditPageView",
   component: AuditPageView,
 } as ComponentMeta<typeof AuditPageView>
 
-const Template: Story = (args) => <AuditPageView {...args} />
+const Template: Story<AuditPageViewProps> = (args) => <AuditPageView {...args} />
 
 export const AuditPage = Template.bind({})
 AuditPage.args = {
   auditLogs: [MockAuditLog, MockAuditLog2],
+  count: 1000,
+  page: 1,
+  limit: 25,
 }
 
 export const AuditPageSmallViewport = Template.bind({})
+AuditPageSmallViewport.args = {
+  auditLogs: [MockAuditLog, MockAuditLog2],
+  count: 1000,
+  page: 1,
+  limit: 25,
+}
 AuditPageSmallViewport.parameters = {
   chromatic: { viewports: [600] },
 }
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -9,6 +9,7 @@ import { AuditLogRow } from "components/AuditLogRow/AuditLogRow"
 import { CodeExample } from "components/CodeExample/CodeExample"
 import { Margins } from "components/Margins/Margins"
 import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/PageHeader/PageHeader"
+import { PaginationWidget } from "components/PaginationWidget/PaginationWidget"
 import { Stack } from "components/Stack/Stack"
 import { TableLoader } from "components/TableLoader/TableLoader"
 import { AuditHelpTooltip } from "components/Tooltips"
@@ -20,7 +21,27 @@ export const Language = {
   tooltipTitle: "Copy to clipboard and try the Coder CLI",
 }
 
-export const AuditPageView: FC<{ auditLogs?: AuditLog[] }> = ({ auditLogs }) => {
+export interface AuditPageViewProps {
+  auditLogs?: AuditLog[]
+  count?: number
+  page: number
+  limit: number
+  onNext: () => void
+  onPrevious: () => void
+  onGoToPage: (page: number) => void
+}
+
+export const AuditPageView: FC<AuditPageViewProps> = ({
+  auditLogs,
+  count,
+  page,
+  limit,
+  onNext,
+  onPrevious,
+  onGoToPage,
+}) => {
+  const isReady = auditLogs && count
+
   return (
     <Margins>
       <PageHeader
@@ -45,14 +66,27 @@ export const AuditPageView: FC<{ auditLogs?: AuditLog[] }> = ({ auditLogs }) =>
             </TableRow>
           </TableHead>
           <TableBody>
-            {auditLogs ? (
+            {isReady ? (
               auditLogs.map((auditLog) => <AuditLogRow auditLog={auditLog} key={auditLog.id} />)
             ) : (
               <TableLoader />
             )}
           </TableBody>
         </Table>
       </TableContainer>
+
+      {isReady && count > limit && (
+        <PaginationWidget
+          prevLabel=""
+          nextLabel=""
+          onPrevClick={onPrevious}
+          onNextClick={onNext}
+          onPageClick={onGoToPage}
+          numRecords={count}
+          activePage={page}
+          numRecordsPerPage={limit}
+        />
+      )}
     </Margins>
   )
 }
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -704,14 +704,14 @@ export const MockAuditLog: TypesGen.AuditLog = {
   user_agent: "browser",
   resource_type: "workspace",
   resource_id: "ef8d1cf4-82de-4fd9-8980-047dad6d06b5",
-  resource_target: "Bruno's Org",
+  resource_target: "bruno-dev",
+  resource_icon: "",
   action: "create",
   diff: {},
   status_code: 200,
-  additional_fields: {},
-  description: "Colin Adler updated the organization Bruno's Org",
+  additional_fields: "",
+  description: "Colin Adler updated the workspace bruno-dev",
   user: MockUser,
-  resource: MockWorkspace,
 }
 
 export const MockAuditLog2: TypesGen.AuditLog = {
@@ -722,14 +722,17 @@ export const MockAuditLog2: TypesGen.AuditLog = {
     workspace_name: {
       old: "old-workspace-name",
       new: MockWorkspace.name,
+      secret: false,
     },
     workspace_auto_off: {
       old: true,
       new: false,
+      secret: false,
     },
     template_version_id: {
       old: "fbd2116a-8961-4954-87ae-e4575bd29ce0",
       new: "53bded77-7b9d-4e82-8771-991a34d759f9",
+      secret: false,
     },
   },
 }
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
@@ -41,10 +41,16 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         boxShadow: "none",
         color: palette.text.primary,
         backgroundColor: colors.gray[17],
+
         "&:hover": {
           boxShadow: "none",
           backgroundColor: "#000000",
         },
+
+        "&.Mui-disabled": {
+          backgroundColor: palette.background.paper,
+          color: palette.secondary.main,
+        },
       },
       sizeSmall: {
         padding: `0 12px`,

diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
@@ -13,7 +13,7 @@ export const darkPalette: PaletteOptions = {
     dark: colors.blue[9],
   },
   secondary: {
-    main: colors.green[11],
+    main: colors.gray[11],
     contrastText: colors.gray[3],
     dark: colors.indigo[7],
   },

diff --git a/site/src/xServices/audit/auditXService.ts b/site/src/xServices/audit/auditXService.ts
@@ -1,4 +1,4 @@
-import { getAuditLogs } from "api/api"
+import { getAuditLogs, getAuditLogsCount } from "api/api"
 import { getErrorMessage } from "api/errors"
 import { displayError } from "components/GlobalSnackbar/utils"
 import { assign, createMachine } from "xstate"
@@ -9,31 +9,70 @@ export const auditMachine = createMachine(
   {
     id: "auditMachine",
     schema: {
-      context: {} as { auditLogs?: AuditLogs },
+      context: {} as { auditLogs?: AuditLogs; count?: number; page: number; limit: number },
       services: {} as {
         loadAuditLogs: {
           data: AuditLogs
         }
+        loadAuditLogsCount: {
+          data: number
+        }
       },
+      events: {} as
+        | {
+            type: "NEXT"
+          }
+        | {
+            type: "PREVIOUS"
+          }
+        | {
+            type: "GO_TO_PAGE"
+            page: number
+          },
     },
     tsTypes: {} as import("./auditXService.typegen").Typegen0,
-    initial: "loadingLogs",
+    initial: "loading",
     states: {
-      loadingLogs: {
-        invoke: {
-          src: "loadAuditLogs",
-          onDone: {
-            target: "success",
-            actions: ["assignAuditLogs"],
+      loading: {
+        invoke: [
+          {
+            src: "loadAuditLogs",
+            onDone: {
+              actions: ["assignAuditLogs"],
+            },
+            onError: {
+              target: "error",
+              actions: ["displayLoadAuditLogsError"],
+            },
           },
-          onError: {
-            target: "error",
-            actions: ["displayLoadAuditLogsError"],
+          {
+            src: "loadAuditLogsCount",
+            onDone: {
+              actions: ["assignCount"],
+            },
+            onError: {
+              target: "error",
+              actions: ["displayLoadAuditLogsCountError"],
+            },
           },
-        },
+        ],
+        onDone: "success",
       },
       success: {
-        type: "final",
+        on: {
+          NEXT: {
+            actions: ["assignNextPage"],
+            target: "loading",
+          },
+          PREVIOUS: {
+            actions: ["assignPreviousPage"],
+            target: "loading",
+          },
+          GO_TO_PAGE: {
+            actions: ["assignPage"],
+            target: "loading",
+          },
+        },
       },
       error: {
         type: "final",
@@ -45,13 +84,35 @@ export const auditMachine = createMachine(
       assignAuditLogs: assign({
         auditLogs: (_, event) => event.data,
       }),
+      assignCount: assign({
+        count: (_, event) => event.data,
+      }),
+      assignNextPage: assign({
+        page: ({ page }) => page + 1,
+      }),
+      assignPreviousPage: assign({
+        page: ({ page }) => page - 1,
+      }),
+      assignPage: assign({
+        page: ({ page }) => page,
+      }),
       displayLoadAuditLogsError: (_, event) => {
         const message = getErrorMessage(event.data, "Error on loading audit logs.")
         displayError(message)
       },
+      displayLoadAuditLogsCountError: (_, event) => {
+        const message = getErrorMessage(event.data, "Error on loading audit logs count.")
+        displayError(message)
+      },
     },
     services: {
-      loadAuditLogs: () => getAuditLogs(),
+      loadAuditLogs: ({ page, limit }, _) =>
+        getAuditLogs({
+          // The page in the API starts at 0
+          offset: (page - 1) * limit,
+          limit,
+        }),
+      loadAuditLogsCount: () => getAuditLogsCount(),
     },
   },
 )