filter.js
This snippet defines a React functional component called Logs. It uses various hooks such as useState and useEffect to manage state and lifecycle, and imports several external modules and components like Kendo Grid and moment.js for date handling.unknown
javascript
9 months ago
6.1 kB
6
Indexable
import React, { useCallback, useState, useEffect } from "react"; import { Grid, GridColumn } from "@progress/kendo-react-grid"; import moment from "moment"; import Loader from "../../control-components/loader/loader"; import FilterModel from "./filter-model"; import TruncatedCell from "./truncate-cell"; import { LogsService } from "../../services/logsService"; const DATA_ITEM_KEY = "id"; const SELECTED_FIELD = "selected"; const Logs = () => { const [loading, setLoading] = useState(false); const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(10); const [sort, setSort] = useState([]); const [logs, setLogs] = useState([]); const [metaData, setMetaData] = useState({}); const [skip, setSkip] = useState(0); const [filters, setFilters] = useState({ staffId: null, clinicId: null, startDate: moment().subtract(3, "days").startOf("day").toISOString(), endDate: moment().endOf("day").toISOString(), }); const fetchLogs = useCallback(() => { setLoading(true); LogsService.getLogs( filters.staffId, filters.clinicId, filters.startDate, filters.endDate, pageSize, page ) .then((response) => { setLogs(response.resultData); setMetaData(response.metaData); setLoading(false); }) .catch((error) => { console.error("Error fetching logs:", error); setLoading(false); }); }, [filters, page, pageSize]); useEffect(() => { fetchLogs(); }, [fetchLogs]); const pageChange = (event) => { const newPage = event.page.skip / event.page.take + 1; setSkip(event.page.skip); setPage(newPage); setPageSize(event.page.take); }; return ( <> {loading && <Loader />} <h4 className="address-title text-grey"> <span className="f-24">Logs</span> </h4> <FilterModel filters={filters} updateFilters={setFilters} page={page} pageSize={pageSize} onPageChange={pageChange} onLogsUpdate={(newLogs, newMetaData) => { setLogs(newLogs); setMetaData(newMetaData); }} /> <div className="grid-table filter-grid"> <div className="mt-3"> <div className="inner-section-edit position-relative text-center"> <div className="grid-table filter-grid header-blue"> <div className="mt-3"> <Grid data={logs} skip={skip} take={pageSize} total={metaData?.totalCount || 0} onPageChange={pageChange} pageable={{ pageSizes: [10, 25, 50, 100, 250, 500], }} selectedField={SELECTED_FIELD} dataItemKey={DATA_ITEM_KEY} sort={sort} sortable={true} onSortChange={(e) => { if (e.sort) { setSort(e.sort); } }} > <GridColumn field="id" title="Id" width="100" /> <GridColumn field="message" title="Message" width="300" cell={TruncatedCell} /> <GridColumn field="callsite" title="Callsite" width="300" cell={TruncatedCell} /> <GridColumn field="exception" title="Exception" width="300" cell={TruncatedCell} /> <GridColumn field="request" title="Request" width="300" cell={TruncatedCell} /> <GridColumn field="messageId" title="Message Id" width="250" cell={TruncatedCell} /> <GridColumn field="url" title="URL" width="250" cell={TruncatedCell} /> <GridColumn field="querystring" title="Querystring" width="250" cell={TruncatedCell} /> <GridColumn field="region" title="Region" width="150" cell={TruncatedCell} /> <GridColumn field="staffId" title="Staff Id" width="150" cell={TruncatedCell} /> <GridColumn field="clinicId" title="Clinic Id" width="150" cell={TruncatedCell} /> <GridColumn field="logger" title="Logger" width="200" cell={TruncatedCell} /> <GridColumn field="level" title="Level" width="150" cell={TruncatedCell} /> <GridColumn field="utcTimeStamp" title="UTC Time Stamp" width="250" cell={(props) => { const field = moment(props.dataItem.utcTimeStamp).format( "MM/DD/YYYY HH:mm:ss" ); return <td className="cursor-default">{field}</td>; }} /> </Grid> </div> </div> </div> </div> </div> </> ); }; export default Logs;
Editor is loading...
Leave a Comment