add search bar for usage logs

Marcusk19 · Jul 29, 2024 · aab31b2 · aab31b2
1 parent bafff30
commit aab31b2
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/web/cypress/e2e/usage-logs.cy.ts b/web/cypress/e2e/usage-logs.cy.ts
@@ -193,4 +193,28 @@ describe('Usage Logs Export', () => {
     cy.contains('Show Chart').click();
     cy.get('[class=pf-v5-c-chart]').should('be.visible');
   });
+
+  it('filter logs', () => {
+    cy.intercept('GET', '/api/v1/organization/projectquay/logs?*', logsResp);
+
+    cy.visit('/organization/projectquay');
+    cy.contains('Logs').click();
+
+    cy.get('[id="log-filter-input"]').type('create');
+
+    cy.get('table')
+      .contains('td', 'Create Repository projectquay/testrepo')
+      .scrollIntoView()
+      .should('be.visible');
+    cy.get('table')
+      .contains('td', 'Organization projectquay created')
+      .scrollIntoView()
+      .should('be.visible');
+    cy.get('table')
+      .contains(
+        'td',
+        'Change visibility for repository projectquay/testrepo to private',
+      )
+      .should('not.exist');
+  });
 });
diff --git a/web/src/hooks/UseLogDescriptions.tsx b/web/src/hooks/UseLogDescriptions.tsx
@@ -605,6 +605,9 @@ export function useLogDescriptions() {
     oauth_token_assigned: function (metadata) {
       return `OAuth token assigned to user ${metadata.assigned_user} by ${metadata.assigning_user} for application ${metadata.application}`;
     },
+    login_success: function (metadata: Metadata) {
+      return `Successful login`;
+    },
   };
 
   return descriptions;

diff --git a/web/src/routes/UsageLogs/UsageLogsTable.tsx b/web/src/routes/UsageLogs/UsageLogsTable.tsx
@@ -1,9 +1,18 @@
-import {Button, Flex, FlexItem, Spinner} from '@patternfly/react-core';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  Spinner,
+  SearchInput,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
 import {Table, Tbody, Td, Th, Thead, Tr} from '@patternfly/react-table';
 import {useInfiniteQuery} from '@tanstack/react-query';
 import RequestError from 'src/components/errors/RequestError';
 import {getLogs} from 'src/hooks/UseUsageLogs';
 import {useLogDescriptions} from 'src/hooks/UseLogDescriptions';
+import {useEffect, useState} from 'react';
 
 interface UsageLogsTableProps {
   starttime: string;
@@ -15,6 +24,20 @@ interface UsageLogsTableProps {
 
 export function UsageLogsTable(props: UsageLogsTableProps) {
   const logDescriptions = useLogDescriptions();
+
+  const [filterValue, setFilterValue] = useState('');
+
+  const filterOnChange = (value: string) => {
+    setFilterValue(value);
+  };
+
+  const filterLogs = (data, filterValue) => {
+    data.logs = data.logs.filter(function (log) {
+      return log.kind.includes(filterValue);
+    });
+    return data;
+  };
+
   const {
     data: logs,
     isLoading: loadingLogs,
@@ -39,6 +62,10 @@ export function UsageLogsTable(props: UsageLogsTableProps) {
       return logResp;
     },
     getNextPageParam: (lastPage: {[key: string]: string}) => lastPage.nextPage,
+    select: (data) => {
+      data.pages = data.pages.map((logs) => filterLogs(logs, filterValue));
+      return data;
+    },
   });
 
   if (loadingLogs) return <Spinner />;
@@ -47,6 +74,20 @@ export function UsageLogsTable(props: UsageLogsTableProps) {
   return (
     <>
       <Flex direction={{default: 'column'}} style={{margin: '20px'}}>
+        <FlexItem>
+          <Split>
+            <SplitItem isFilled />
+            <SplitItem>
+              <SearchInput
+                placeholder="Filter logs"
+                value={filterValue}
+                onChange={(_event, value) => filterOnChange(value)}
+                onClear={() => filterOnChange('')}
+                id="log-filter-input"
+              />
+            </SplitItem>
+          </Split>
+        </FlexItem>
         <FlexItem>
           <Table variant="compact" borders={false} style={{margin: '20px'}}>
             <Thead>