task/WP-930: Audit Trails UI

client/modules/_hooks/src/audit/index.ts

@@ -0,0 +1,6 @@
+export * from './useGetRecentSession';
+export { useGetTapisFileHistory } from './useGetTapisFileHistory';
+export { useGetPortalFileHistory } from './useGetPortalFileHistory';
+export { useGetUsernames } from './useGetUsernames';
+export type { TapisFileAuditEntry } from './useGetTapisFileHistory';
+export type { PortalFileAuditEntry } from './useGetPortalFileHistory';

client/modules/_hooks/src/audit/useGetPortalFileHistory.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+
+interface PortalFileAuditResponse {
+  data: PortalFileAuditEntry[];
+}
+
+export interface PortalFileAuditEntry {
+  timestamp: string;
+  portal: string;
+  username: string;
+  action: string;
+  tracking_id: string;
+  data: object;
+}
+
+async function fetchPortalFileHistory(
+  filename: string
+): Promise<PortalFileAuditResponse> {
+  const encoded = encodeURIComponent(filename);
+  const response = await fetch(`/audit/api/file/${encoded}/portal/combined/`);
+  if (!response.ok) throw new Error(`API Error: ${response.status}`);
+  return response.json();
+}
+
+export function useGetPortalFileHistory(filename: string, enabled: boolean) {
+  return useQuery<PortalFileAuditResponse, Error>({
+    queryKey: ['portalFileHistory', filename],
+    queryFn: () => fetchPortalFileHistory(filename),
+    enabled,
+  });
+}

client/modules/_hooks/src/audit/useGetRecentSession.ts

@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+
+interface PortalAuditResponse {
+  data: PortalAuditEntry[];
+}
+
+export interface PortalAuditEntry {
+  timestamp: string;
+  portal: string;
+  username: string;
+  action: string;
+  tracking_id: string;
+  data: object;
+}
+
+async function fetchPortalAudit(
+  username: string
+): Promise<PortalAuditResponse> {
+  const encoded = encodeURIComponent(username);
+  const response = await fetch(`/audit/api/user/${encoded}/portal/`);
+  if (!response.ok) {
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText}`
+    );
+  }
+  return response.json();
+}
+
+export function useGetRecentSession(username: string, enabled: boolean) {
+  return useQuery<PortalAuditResponse, Error>({
+    queryKey: ['audit', username],
+    queryFn: () => fetchPortalAudit(username),
+    enabled,
+  });
+}

client/modules/_hooks/src/audit/useGetTapisFileHistory.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+
+interface TapisFileAuditResponse {
+  data: TapisFileAuditEntry[];
+}
+
+export interface TapisFileAuditEntry {
+  writer_logtime: string; //date&time
+  obo_user: string; //user
+  action: string; //action
+  target_path: string; //path flow - maybe location
+  source_path: string; //path flow - maybe location
+  data: object; //details
+}
+
+async function fetchTapisFileHistory(
+  filename: string
+): Promise<TapisFileAuditResponse> {
+  const encoded = encodeURIComponent(filename);
+  const response = await fetch(`/audit/api/file/${encoded}/tapis/`);
+  if (!response.ok) throw new Error(`API Error: ${response.status}`);
+  return response.json();
+}
+
+export function useGetTapisFileHistory(filename: string, enabled: boolean) {
+  return useQuery<TapisFileAuditResponse, Error>({
+    queryKey: ['fileHistory', filename],
+    queryFn: () => fetchTapisFileHistory(filename),
+    enabled,
+  });
+}

client/modules/_hooks/src/audit/useGetUsernames.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+export async function fetchPortalUsernames(): Promise<string[]> {
+  const response = await fetch('/audit/api/usernames/portal');
+  if (!response.ok) throw new Error('Failed to fetch usernames');
+  const data = await response.json();
+  return data.usernames || [];
+}
+
+export function useGetUsernames() {
+  return useQuery<string[], Error>({
+    queryKey: ['portalUsernames'],
+    queryFn: fetchPortalUsernames,
+  });
+}

client/modules/_hooks/src/index.ts

@@ -8,3 +8,4 @@ export * from './datafiles';
 export * from './systems';
 export * from './notifications';
 export * from './onboarding';
+export * from './audit';

client/src/audit/AuditTrail.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { AutoComplete } from 'antd';
+import {
+  useGetRecentSession,
+  useGetPortalFileHistory,
+  useGetUsernames,
+} from '@client/hooks';
+import AuditTrailSessionTable from './AuditTrailSessionTable';
+import AuditTrailFileTable from './AuditTrailFileTable';
+
+const AuditTrail: React.FC = () => {
+  type Mode = 'user-session' | 'portal-file';
+  const [query, setQuery] = useState('');
+  const [mode, setMode] = useState<Mode>('user-session');
+
+  const { data: allUsernames } = useGetUsernames();
+  const {
+    data: portalData,
+    error: portalError,
+    isLoading: portalLoading,
+    refetch: refetchPortal,
+  } = useGetRecentSession(query, false);
+
+  const {
+    data: fileData,
+    error: fileError,
+    isLoading: fileLoading,
+    refetch: refetchFile,
+  } = useGetPortalFileHistory(query, false);
+
+  const filteredUsernames =
+    query.length > 0 && allUsernames
+      ? allUsernames
+          .filter((name) => name.toLowerCase().includes(query.toLowerCase()))
+          .slice(0, 20)
+      : [];
+
+  const auditData = mode === 'user-session' ? portalData : fileData;
+  const auditError = mode === 'user-session' ? portalError : fileError;
+  const auditLoading = mode === 'user-session' ? portalLoading : fileLoading;
+  const auditRefetch = mode === 'user-session' ? refetchPortal : refetchFile;
+
+  const onSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    if (trimmed !== query) setQuery(trimmed);
+    auditRefetch();
+  };
+
+  return (
+    <div>
+      <form onSubmit={onSearch} style={{ marginBottom: 16 }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+          }}
+        >
+          <select
+            value={mode}
+            onChange={(e) => {
+              setMode(e.target.value as Mode);
+              setQuery('');
+            }}
+            style={{ marginRight: 8 }}
+          >
+            <option value="user-session">Most Recent User Session Data</option>
+            <option value="portal-file">File search</option>
+          </select>
+          {mode === 'user-session' ? (
+            <AutoComplete
+              value={query}
+              style={{ width: '200px' }}
+              options={filteredUsernames.map((name) => ({
+                value: name,
+                label: name,
+              }))}
+              onSelect={(value) => setQuery(value)}
+              onSearch={(searchText) => setQuery(searchText)}
+              placeholder="Username"
+            />
+          ) : (
+            <input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Filename"
+              style={{ width: '200px' }}
+              maxLength={512}
+            />
+          )}
+          <button
+            type="submit"
+            disabled={auditLoading || !query.trim() || query.length > 512}
+            style={{ marginLeft: '10px' }}
+          >
+            {auditLoading ? 'Loading…' : 'Submit'}
+          </button>
+        </div>
+      </form>
+
+      {mode === 'user-session' ? (
+        <AuditTrailSessionTable
+          auditData={auditData}
+          auditError={auditError}
+          auditLoading={auditLoading}
+        />
+      ) : (
+        <AuditTrailFileTable
+          auditData={auditData}
+          auditError={auditError}
+          auditLoading={auditLoading}
+          searchTerm={(query || '').trim()}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AuditTrail;