Merge pull request #1184 from Chia-Network/refactor/audits-list

added the audit page

src/renderer/api/cadt/v1/audit/audit.api.ts

@@ -0,0 +1,46 @@
+import {cadtApi, auditTag} from "../";
+
+const host: string = 'http://localhost:31310'
+
+interface GetAuditParams {
+  page: number;
+  orgUid: string;
+  search?: string;
+  order?: string;
+}
+
+interface GetAuditResponse {
+  page: number,
+  pageCount: number,
+  data: any[]
+}
+
+const auditApi = cadtApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getAudit: builder.query<GetAuditResponse, GetAuditParams>({
+      query: ({ page, orgUid, search, order }: GetAuditParams) => {
+        // Initialize the params object with page and limit
+        const params: GetAuditParams & {limit: number} = { orgUid, page, limit: 10 };
+
+        if (search) {
+          params.search = search.replace(/[^a-zA-Z0-9 _.-]+/, '');
+        }
+
+        if (order) {
+          params.order = order;
+        }
+
+        return {
+          url: `${host}/v1/audit`,
+          params, // Use the constructed params object
+          method: 'GET',
+        };
+      },
+      providesTags: (_response, _error, {orgUid}) => [{type: auditTag, id: orgUid}],
+    })
+  })
+});
+
+export const {
+  useGetAuditQuery
+} = auditApi;

src/renderer/api/cadt/v1/audit/index.ts

@@ -0,0 +1 @@
+export * from './audit.api';

src/renderer/api/cadt/v1/index.ts

@@ -3,16 +3,17 @@ import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
 const projectsTag: string = 'projects';
 const organizationsTag: string = 'organizations';
 const unitsTag: string = 'projects';
+const auditTag: string = 'audit';
 
 const baseQuery = fetchBaseQuery({
   baseUrl: '/',
 });
 
-export { projectsTag, organizationsTag, unitsTag};
+export { projectsTag, organizationsTag, unitsTag, auditTag};
 
 export const cadtApi = createApi({
   baseQuery,
   reducerPath: 'cadtApi',
-  tagTypes: [projectsTag, organizationsTag, unitsTag],
+  tagTypes: [projectsTag, organizationsTag, unitsTag, auditTag],
   endpoints: () => ({}),
 });

src/renderer/api/index.ts

@@ -1,3 +1,4 @@
 export * from './cadt/v1/organizations';
 export * from './cadt/v1/units';
-export * from './cadt/v1/projects';
+export * from './cadt/v1/projects';
+export * from './cadt/v1/audit';

src/renderer/components/blocks/layout/LeftNav.tsx

@@ -64,6 +64,13 @@ const LeftNav = () => {
               >
                 <FormattedMessage id="units-list" />
               </Sidebar.Item>
+              <Sidebar.Item
+                style={{ cursor: 'pointer' }}
+                active={isActive(ROUTES.AUDIT)}
+                onClick={() => navigate(ROUTES.AUDIT)}
+              >
+                <FormattedMessage id="audits" />
+              </Sidebar.Item>
               <Sidebar.Item
                 style={{ cursor: 'pointer' }}
                 active={isActive(ROUTES.GLOSSARY)}

src/renderer/components/blocks/tables/AuditsTable.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { DebouncedFunc } from 'lodash';
+import { DataTable, PageCounter, Pagination } from '@/components';
+import {formatToDataTimeFromSeconds} from "@/utils/transforms";
+
+interface TableProps {
+  data: any[];
+  isLoading: boolean;
+  currentPage: number;
+  onPageChange: DebouncedFunc<(page: any) => void>;
+  setOrder?: (sort: string) => void;
+  order?: string;
+  totalPages: number;
+  totalCount: number;
+}
+
+const AuditsTable: React.FC<TableProps> = ({
+  data,
+  isLoading,
+  currentPage,
+  onPageChange,
+  setOrder,
+  order,
+  totalPages,
+  totalCount,
+}) => {
+
+
+  const columns = useMemo(
+    () => [
+      {
+        title: <FormattedMessage id={'table'} />,
+        key: 'table',
+      },
+      {
+        title: <FormattedMessage id={'timestamp'} />,
+        key: 'onchainConfirmationTimeStamp',
+        render: (row: any) => {
+          return <>{formatToDataTimeFromSeconds(row.onchainConfirmationTimeStamp)}</>;
+        }
+      },
+      {
+        title: <FormattedMessage id={'type'} />,
+        key: 'type',
+      },
+      {
+        title: <FormattedMessage id={'root-hash'} />,
+        key: 'rootHash',
+      },
+      {
+        title: <FormattedMessage id={'author'} />,
+        key: 'author',
+      },
+      {
+        title: <FormattedMessage id={'comment'} />,
+        key: 'comment',
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={columns}
+        onChangeOrder={setOrder}
+        order={order}
+        data={data}
+        primaryKey="id"
+        isLoading={isLoading}
+        footer={
+          <>
+            <PageCounter currentPage={currentPage} totalCount={totalCount} />
+            <Pagination
+              currentPage={currentPage}
+              layout="pagination"
+              onPageChange={onPageChange}
+              showIcons={true}
+              totalPages={totalPages || 1}
+            />
+          </>
+        }
+      />
+    </div>
+  );
+};
+
+export { AuditsTable };

src/renderer/components/blocks/tables/index.ts

@@ -1,4 +1,5 @@
 export * from './ProjectsListTable';
 export * from './SkeletonTable';
 export * from './UnitsListTable';
+export * from './AuditsTable';
 export * from './GlossaryTable';

src/renderer/pages/Audit/AuditPage.tsx

@@ -0,0 +1,116 @@
+import React, { useCallback } from 'react';
+import { useGetAuditQuery } from '@/api';
+import { useQueryParamState } from '@/hooks';
+import {debounce, DebouncedFunc} from 'lodash';
+import {
+  OrganizationSelector,
+  IndeterminateProgressOverlay,
+  SkeletonTable,
+  AuditsTable,
+  SearchBox,
+} from '@/components';
+import {FormattedMessage} from "react-intl";
+
+const AuditPage: React.FC = () => {
+  const [currentPage, setCurrentPage] = useQueryParamState('page', '1');
+  const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
+  const [search, setSearch] = useQueryParamState('search', undefined);
+  const [order, setOrder] = useQueryParamState('order', undefined);
+
+  const {
+    data: auditData,
+    isLoading: auditLoading,
+    isFetching: auditFetching,
+    error: auditError,
+  } = useGetAuditQuery({ page: Number(currentPage), orgUid, search, order }, {skip: !orgUid});
+
+  const handlePageChange: DebouncedFunc<any> = useCallback(
+    debounce((page) => setCurrentPage(page), 800),
+    [setCurrentPage],
+  );
+
+  const handleOrganizationSelected = useCallback(
+    (organization: any) => {
+      setOrgUid(organization?.orgUid);
+    },
+    [setOrgUid],
+  );
+
+  const handleSearchChange: DebouncedFunc<any> = useCallback(
+    debounce((event: any) => {
+      setSearch(event.target.value);
+    }, 800),
+    [setSearch, debounce],
+  );
+
+  const handleSetOrder = useCallback(() => {
+    const currentDirection = order;
+
+      // Cycle through 'ASC', 'DESC', and no order ('')
+      switch (currentDirection) {
+        case 'ASC':
+          setOrder(`DESC`);
+          break;
+        case 'DESC':
+          setOrder('');
+          break;
+        default:
+          setOrder(`ASC`);
+          break;
+      }
+
+  }, [order, setOrder]);
+
+  if (!orgUid){
+    return (
+      <>
+        <div className="flex flex-col md:flex-row gap-6 pl-1 my-2.5 ml-2.5 relative z-30">
+          <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid}/>
+        </div>
+        <div className="flex h-full justify-center items-center">
+          <FormattedMessage id={"please-select-an-organization-to-view-audit-data"}/>
+        </div>
+      </>
+    );
+  }
+
+  if (auditLoading) {
+    return <SkeletonTable/>;
+  }
+
+  if (auditError) {
+    return <FormattedMessage id={"unable-to-load-contents"}/>;
+  }
+
+  if (!auditData) {
+    return <FormattedMessage id={"no-records-found"}/>;
+  }
+
+  return (
+    <>
+      {auditFetching && <IndeterminateProgressOverlay/>}
+      <div className="flex flex-col md:flex-row gap-6 pl-1 my-2.5 relative z-30">
+        <SearchBox defaultValue={search} onChange={handleSearchChange}/>
+        <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid}/>
+      </div>
+        <>
+          {auditLoading ? (
+            <SkeletonTable/>
+          ) : (
+            <AuditsTable
+              data={auditData?.data || []}
+              isLoading={auditLoading}
+              currentPage={Number(currentPage)}
+              onPageChange={handlePageChange}
+              setOrder={handleSetOrder}
+              order={order && `onchainConfirmationTimeStamp:${order}`}
+              totalPages={auditData.pageCount}
+              totalCount={auditData.pageCount * 10}
+            />
+          )}
+        </>
+    </>
+  );
+};
+
+export {AuditPage};

src/renderer/pages/Audit/index.ts

@@ -0,0 +1 @@
+export * from './AuditPage';

src/renderer/pages/ProjectsList/ProjectsList.tsx → src/renderer/pages/ProjectsList/ProjectsListPage.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useGetProjectsQuery } from '@/api';
 import { useQueryParamState, useColumnOrderHandler } from '@/hooks';
-import { debounce } from 'lodash';
+import {debounce, DebouncedFunc} from 'lodash';
 import {
   OrganizationSelector,
   IndeterminateProgressOverlay,
@@ -12,7 +12,7 @@ import {
 } from '@/components';
 import {FormattedMessage} from "react-intl";
 
-const ProjectsList: React.FC = () => {
+const ProjectsListPage: React.FC = () => {
   const [currentPage, setCurrentPage] = useQueryParamState('page', '1');
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
@@ -26,7 +26,7 @@ const ProjectsList: React.FC = () => {
     error: projectsError,
   } = useGetProjectsQuery({ page: Number(currentPage), orgUid, search, order });
 
-  const handlePageChange = useCallback(
+  const handlePageChange: DebouncedFunc<any> = useCallback(
     debounce((page) => setCurrentPage(page), 800),
     [setCurrentPage],
   );
@@ -38,7 +38,7 @@ const ProjectsList: React.FC = () => {
     [setOrgUid],
   );
 
-  const handleSearchChange = useCallback(
+  const handleSearchChange: DebouncedFunc<any> = useCallback(
     debounce((event: any) => {
       setSearch(event.target.value);
     }, 800),
@@ -84,4 +84,4 @@ const ProjectsList: React.FC = () => {
   );
 };
 
-export { ProjectsList };
+export { ProjectsListPage };

src/renderer/pages/ProjectsList/index.ts

@@ -1 +1 @@
-export * from './ProjectsList';
+export * from './ProjectsListPage';

src/renderer/pages/UnitsList/UnitsList.tsx → src/renderer/pages/UnitsList/UnitsListPage.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useGetUnitsQuery } from '@/api';
 import { useQueryParamState, useColumnOrderHandler } from '@/hooks';
-import { debounce } from 'lodash';
+import {debounce, DebouncedFunc} from 'lodash';
 import {
   OrganizationSelector,
   IndeterminateProgressOverlay,
@@ -12,7 +12,7 @@ import {
 } from '@/components';
 import {FormattedMessage} from "react-intl";
 
-const UnitsList: React.FC = () => {
+const UnitsListPage: React.FC = () => {
   const [currentPage, setCurrentPage] = useQueryParamState('page', '1');
   const [orgUid, setOrgUid] = useQueryParamState('orgUid', undefined);
   const [search, setSearch] = useQueryParamState('search', undefined);
@@ -26,7 +26,7 @@ const UnitsList: React.FC = () => {
     error: unitsError,
   } = useGetUnitsQuery({ page: Number(currentPage), orgUid, search, order });
 
-  const handlePageChange = useCallback(
+  const handlePageChange: DebouncedFunc<any> = useCallback(
     debounce((page) => setCurrentPage(page), 800),
     [setCurrentPage],
   );
@@ -38,7 +38,7 @@ const UnitsList: React.FC = () => {
     [setOrgUid],
   );
 
-  const handleSearchChange = useCallback(
+  const handleSearchChange: DebouncedFunc<any> = useCallback(
     debounce((event: any) => {
       setSearch(event.target.value);
     }, 800),
@@ -84,4 +84,4 @@ const UnitsList: React.FC = () => {
   );
 };
 
-export { UnitsList };
+export { UnitsListPage };