Changelog 1

locale/en.json

@@ -1256,5 +1256,9 @@
   "CODEX_ID" : "Codex ID",
   "SPECIES_CONSISTENT_ERROR" : "Selected Codex ID does not match the species.",
   "CODEX_ID_CREATION" : "Codex ID Creation",
-  "CODEX_ID_CREATION_DESCRIPTION" : "Codex ID will be assigned based on the species."
+  "CODEX_ID_CREATION_DESCRIPTION" : "Codex ID will be assigned based on the species.",
+  "CHANGE_LOG" : "Change Log",
+  "TIME_CHANGE_OCCURRED" : "Time Change occurred",
+  "MANAGE_REQUESTS" : "Manage Requests",
+  "NO_SEARCH_RESULT" : "Your search did not match any records."
 }

src/AuthenticatedSwitch.jsx

@@ -48,6 +48,7 @@ import Footer from './components/Footer';
 import { defaultCrossfadeDuration } from './constants/defaults';
 import Requests from './pages/setup/Requests';
 import SpeciesManagement from './pages/fieldManagement/SpeciesManagement';
+import ChangeLog from './pages/changeLog/ChangeLog';
 
 export default function AuthenticatedSwitch({
   emailNeedsVerification,
@@ -132,6 +133,9 @@ export default function AuthenticatedSwitch({
                       <Route path="/settings/preferences">
                         <Preferences />
                       </Route>
+                      <Route path="/settings/changelog">
+                        <ChangeLog />
+                      </Route>
                       <Route path="/settings">
                         <ControlPanel />
                       </Route>

src/constants/queryKeys.js

@@ -20,10 +20,6 @@ export default {
   sageJobs: ['sage', 'jobs'],
 };
 
-export function getAuditLogQueryKey(guid) {
-  return ['auditLog', guid];
-}
-
 export function getEncounterQueryKey(guid) {
   return ['encounter', guid];
 }
@@ -103,3 +99,11 @@ export function getSightingFilterQueryKey(
 ) {
   return ['sightingFilterSearch', filters, page, rowsPerPage];
 }
+
+export function getAuditLogQueryKey(
+  filters,
+  page,
+  rowsPerPage,
+) {
+  return ['auditLogFilterSearch', filters, page, rowsPerPage];
+}

src/models/auditLogs/useFilterAuditLogs.js

@@ -0,0 +1,36 @@
+import { get, partition } from 'lodash-es';
+
+import useFetch from '../../hooks/useFetch';
+import { getAuditLogQueryKey } from '../../constants/queryKeys';
+
+export default function useFilterAuditLogs({ queries, params = {} }) {
+
+  return useFetch({
+    method: 'post',
+    queryKey: getAuditLogQueryKey(queries, params),
+    url: '/audit_logs/search',
+    data: queries,
+    params: {
+      limit: 20,
+      offset: 0,
+      sort: 'created',
+      reverse: false,
+      ...params,
+    },
+    dataAccessor: result => {
+      const resultCountString = get(result, [
+        'data',
+        'headers',
+        'x-total-count',
+      ]);
+      return {
+        resultCount: parseInt(resultCountString, 10),
+        results: get(result, ['data', 'data']),
+        statusCode: get(result, ['error', 'response', 'data', 'status']),
+      };
+    },
+    queryOptions: {
+      retry: 2,
+    },
+  });
+}

src/models/auditLogs/useGetAuditLogs.js

@@ -4,7 +4,7 @@ import useFetch from '../../hooks/useFetch';
 export default function useGetAuditLogs(entity_guid) {
   return useFetch({
     queryKey: getAuditLogQueryKey(entity_guid),
-    url: `/audit_logs/${entity_guid}`,
+    url:  `/audit_logs/${entity_guid}`,
     queryOptions: {
       enabled: Boolean(entity_guid),
       retry: 1,

src/pages/changeLog/ChangeLog.jsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import Grid from '@material-ui/core/Grid';
+
+import useDocumentTitle from '../../hooks/useDocumentTitle';
+import MainColumn from '../../components/MainColumn';
+import Button from '../../components/Button';
+import SettingsBreadcrumbs from '../../components/SettingsBreadcrumbs';
+import Text from '../../components/Text';
+import Link from '../../components/Link';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import useTheme from '@material-ui/core/styles/useTheme';
+import { useIntl, FormattedMessage } from 'react-intl';
+import DataDisplay from '../../components/dataDisplays/DataDisplay';
+import SearchIcon from '@material-ui/icons/Search';
+import useFilterAuditLogs from '../../models/auditLogs/useFilterAuditLogs';
+import Paginator from '../../components/dataDisplays/Paginator';
+import TextField from '@material-ui/core/TextField';
+import SadScreen from '../../components/SadScreen';
+import LoadingScreen from '../../components/LoadingScreen';
+
+export default function ChangeLog() {
+
+  useDocumentTitle('CHANGE_LOG');
+  const theme = useTheme();  
+  const intl = useIntl();
+
+  const [inputValue, setInputValue] = useState('');  
+
+  const rowsPerPage = 100;  
+  const [searchParams, setSearchParams] = useState({
+    limit: rowsPerPage,
+    offset: 0,
+    sort: 'created',
+    reverse: true,
+  });  
+
+  const [ formFilters, setFormFilters ] = useState(
+    {
+      "bool" : {
+          "filter" : [],
+      }
+    }
+  ); 
+
+  const buildFilters = (inputValue) => {
+    if(inputValue.trim() !== '') {
+      setFormFilters(
+        {
+          "bool" : {
+             "filter" : [
+                {
+                       "match": {
+                               "item_guid": inputValue
+                       }
+                }
+             ]
+          }
+       }
+    )
+    } else {
+      setFormFilters(
+        {
+          "bool" : {
+             "filter" : []
+          }
+       }
+    )
+    } 
+  }
+
+  const { data : searchedData, loading } = useFilterAuditLogs({
+    queries: formFilters,
+    params: searchParams,
+  });
+
+  const buildAndSortTableRows = (data) => {
+    return data?.map((row) => {
+      return {
+        id: row.guid,
+        time: new Date(row.created).toLocaleString(),
+        message: `MODULE NAME: ${row.module_name}, ITEM GUID: ${row.item_guid}, AUDIT TYPE:  ${row.audit_type},  DETAILS: ${row.message}`,
+      }
+    })?.sort((a, b) => new Date(b.time) - new Date(a.time));
+  }  
+
+  const searchedTableRows = buildAndSortTableRows(searchedData?.results);  
+  const tableColumns = [
+    {
+      name: 'time',
+      label: intl.formatMessage({ id: 'TIME_CHANGE_OCCURRED' }),
+      options: {
+        customBodyRender: labelId => (
+          <FormattedMessage id={labelId} defaultMessage={labelId}/>
+        ),
+      },
+    },
+    {
+      name: 'message',
+      label: intl.formatMessage({ id: 'MESSAGE' }),
+    //   options: { cellRenderer: cellRendererTypes.capitalizedString },
+    },    
+  ];  
+
+
+  if(loading) return <LoadingScreen />  
+  if(searchedData?.statusCode === 403) return <SadScreen
+    statusCode={searchedData?.statusCode}
+/>
+
+  return (
+    <MainColumn>
+        <Link href="/settings"                   
+            style={{
+            display:'flex',
+            alignItems:'center',
+            color: theme.palette.text.primary,
+            fontSize: 22,
+            fontWeight: 'bold',
+            textDecoration: 'none',
+            marginTop: 80,
+            }}
+            >  
+            <ArrowBackIcon />
+            {<FormattedMessage id={'CHANGE_LOG'}/>}  
+        </Link> 
+
+      <SettingsBreadcrumbs currentPageTextId="CHANGE_LOG" />
+
+      <Grid item>   
+        <div
+            style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 12,
+            }}
+        >  
+            <Text
+                variant="h5"
+                component="h5"
+                id="CHANGE_LOG"
+            />
+
+            <div
+              style={{
+                marginTop: 20,
+                display: 'flex',
+                alignItems: 'flex-end',
+                marginBottom: 12, 
+              }}
+            >
+              <Button
+                startIcon={<SearchIcon />}
+                loading={loading}
+                onClick = { () => buildFilters(inputValue)}
+                style={{ height: 30, border: 'none' }}
+              >
+
+              </Button>
+              <TextField
+                id="entity-guid-input"
+                label="ITEM GUID"
+                value={inputValue}
+                onChange={e => setInputValue(e.target.value)}
+                onKeyDown={event => {
+                  if (event.key === 'Enter') {
+                    buildFilters(inputValue)
+                  }
+                }}
+                style={{ width: 420 }}
+              />
+
+            </div>
+
+        </div>
+      <DataDisplay
+        style={{ marginTop: 8 }}
+        noTitleBar
+        variant="secondary"
+        columns={tableColumns}
+        data={searchedTableRows}
+        tableContainerStyles={{ maxHeight: 1000 }}
+        searchParams={searchParams}
+        setSearchParams={setSearchParams}
+        noResultsTextId="NO_SEARCH_RESULT"
+      />
+      <Paginator
+        searchParams={searchParams}
+        setSearchParams={setSearchParams}
+        count={searchedData?.resultCount}
+      />
+    </Grid>
+    </MainColumn>
+  );
+}

src/pages/controlPanel/ControlPanel.jsx

@@ -11,6 +11,8 @@ import SiteStatusIcon from '@material-ui/icons/Speed';
 import UserManagementIcon from '@material-ui/icons/People';
 import AdministrationIcon from '@material-ui/icons/Gavel';
 import GroupWorkIcon from '@material-ui/icons/GroupWork';
+import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
+import ListAltIcon from '@material-ui/icons/ListAlt';
 
 import useDocumentTitle from '../../hooks/useDocumentTitle';
 import useGetMe from '../../models/users/useGetMe';
@@ -88,6 +90,15 @@ const adminPages = [
       'is_contributor',
     ],
   },
+  {
+    icon: ListAltIcon,
+    name: 'change-log',
+    labelId: 'CHANGE_LOG',
+    href: '/settings/changelog',
+    roles: [
+      'is_admin',
+    ],
+  },
 ];
 
 export default function ControlPanel() {

src/pages/match/MatchSighting.jsx

@@ -135,7 +135,6 @@ export default function MatchSighting() {
       ['algorithms', 'hotspotter_nosv', 'scores_by_individual'], [] );
     const annotation = scoresByIndividual.find((score) => score.guid === selectedMatchCandidateGuid);    
     const heatmapUrl = annotation?.heatmap_src;
-    console.log(heatmapUrl);
     setHeatMapUrl(heatmapUrl);
     const checkHeatMap = async () => {
       try {

src/pages/setup/Requests.jsx

@@ -54,7 +54,7 @@ export default function Requests() {
         justifyContent:'center',
         alignItems: 'center',
         }}>
-      <h1>Manage Requests</h1>
+      <Text variant="h4" style={{ marginBottom: 24 }} id="MANAGE_REQUESTS" />
       <Card>
         <CardContent>
           <Text id="INVITATION_REQUESTS" style={{ fontWeight: 'bold' }} />