test-lib-audits
Version:
React library for audits
370 lines (359 loc) • 11.7 kB
JavaScript
import React from "react";
import ReactTable from "react-table";
import moment from "moment";
import "react-table/react-table.css";
import filterIcon from "../../assets/filter.png";
import sortIcon from "../../assets/noun_sorting_1058866.svg";
import confirmIcon from "../../assets/noun_confirm_275573.svg";
import Pagination from "./Pagination";
import "./style.css";
class TableContent extends React.Component {
constructor(props) {
super(props);
this.state = {
filter: {
key: "",
value: "",
obj: "",
type: ""
},
filterKey: "",
filterValue: "",
filterObj: {}
};
this.inputRef = React.createRef();
}
escFunction = event => {
if (event.keyCode === 27) {
this.setState({
filter: {
key: "",
value: "",
obj: {},
type: ""
}
});
}
};
componentDidMount() {
document.addEventListener("keydown", this.escFunction, false);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.escFunction, false);
}
handleKeyFilter = col => {
this.setState({
filter: {
key: col.name,
value: "",
obj: {},
type: col.type
}
});
};
createFilterObj = () => {
let obj;
if (this.state.filter.type === "Timestamp") {
obj = {
key: this.state.filter.key,
value: this.state.filter.value || moment().format("YYYY-MM-DD")
};
} else {
obj = {
key: this.state.filter.key,
value: this.state.filter.value
};
}
this.setState({
filter: {
key: "",
value: "",
obj: "",
type: ""
}
});
this.props.filterData(obj);
};
handleFilterValueChange = e => {
const value = e.target.value;
this.setState(
prevState => ({ filter: { ...prevState.filter, value: value } }),
() => {
this.inputRef.current.focus();
}
);
};
renderColumns = () => {
const { filter } = this.state;
const { sortDirection, sortBy, handleSorting } = this.props;
let columns = [];
this.props.headerProps.map((col, idx) => {
const lastIndex = this.props.headerProps.length - 1;
const obj = {
Header: props => {
return (
<div className="time-filter">
<span
onClick={() =>
col.sortable
? handleSorting(
col.name,
sortBy === col.name ? sortDirection : "desc"
)
: {}
}>
{col.displayName}
{col.sortable && (
<img src={sortIcon} alt="sort" className="filter-icon" />
)}
</span>
{col.filterable && (
<a onClick={() => this.handleKeyFilter(col)}>
<img
src={filterIcon}
alt="filter"
width={10}
height={10}
className="filter-icon"
/>
</a>
)}
{col.name === filter.key
? [
<div
key={0}
id="modal-backdrop"
className="modal-backdrop-transparent modal-transition"
onClick={() => this.handleKeyFilter("")}
/>,
<div
key={1}
className={`time-filter-div ${
idx === lastIndex ? "last-filter" : ""
}`}>
<h5 className="filter-user-text">
Filter By {col.displayName}{" "}
<span
onClick={() => this.handleKeyFilter("")}
className="cancel-filter-btn">
X
</span>
</h5>
<form onSubmit={() => this.createFilterObj()}>
<div className="filter-input">
<input
ref={this.inputRef}
type={`${
col.type === "Timestamp" ? "date" : "text"
}`}
placeholder={`Search ${col.displayName}`}
key={col._id}
className="filter-user-input"
name={col.name}
value={
filter.value ||
(col.type === "Timestamp"
? moment().format("YYYY-MM-DD")
: "")
}
onChange={e => this.handleFilterValueChange(e)}
/>
<img
src={confirmIcon}
className="confirm-btn"
alt="confirm"
onClick={() => this.createFilterObj()}
/>
</div>
</form>
</div>
]
: null}
</div>
);
},
headerClassName: `${
sortBy === col.name
? sortDirection === "desc"
? "-sort-desc"
: "-sort-asc"
: ""
}`,
accessor: col.name,
sortable: false,
Cell: rowProps => {
switch (col.name) {
case "createdAt":
return (
<div>
<span className="name">
{rowProps.row[col.name] &&
moment(rowProps.row[col.name]).format(
"DD/MM/YYYY hh:mm:ss"
)}
</span>
<br />
<span className="time-status">
{rowProps.row[col.name] &&
moment(rowProps.row[col.name]).fromNow("")}
</span>
</div>
);
case "severity":
return (
<div
className={`severity-div ${rowProps.row[
col.name
].toLowerCase()}`}>
<span className={`severity-text`}>
{rowProps.row[col.name]}
</span>
<div
className={`severity-inner-div ${rowProps.row[
col.name
].toLowerCase()}`}
/>
</div>
);
default:
return (
<div>
<span className="name">{rowProps.row[col.name]}</span>
</div>
);
}
},
headerStyle: {
backgroundColor: "white",
borderBottom: "1px solid rgb(221, 221, 221)",
textAlign: "start",
padding: "10px"
},
style: { backgroundColor: "white", padding: "10px" },
className: "cell-center"
};
columns.push(obj);
});
if (columns.length > 0) {
columns.unshift({
Header: () => (
<div>
<input type="checkbox" />
</div>
),
sortable: false,
Cell: (
<div>
<input type="checkbox" />
</div>
),
headerStyle: {
backgroundColor: "white",
borderRight: "0px",
borderBottom: "1px solid rgb(221, 221, 221)",
padding: "10px"
},
cellStyle: {
backgroundColor: "black"
},
style: {
backgroundColor: "white",
textAlign: "center",
padding: "10px"
},
className: "cell-center-checkbox",
width: 50
});
}
return columns;
};
render() {
const data = this.props.rowsData;
return (
<div>
{/* web view */}
<div className="table-content">
<ReactTable
style={{
width: "100%",
borderTop: "1px solid rgb(221, 221, 221)",
borderBottom: "0px",
borderRight: "0px",
borderLeft: "0px"
}}
loading={this.props.isLoading && this.props.rowsData.length <= 0}
defaultPageSize={10}
minRows={3}
data={this.props.rowsData}
PaginationComponent={Pagination}
className="-striped -highlight"
columns={this.renderColumns()}
/>
</div>
{/* mobile view */}
<div className="table-content-mobile">
{data &&
data.map(audit => {
return (
<div className="table-content-div" key={audit._id}>
<div className="info-div">
<div
className={`mark-div ${audit.severity.toLowerCase()}`}
/>
<div className="section-one">
<div className="address-div">
<span className="info-name">{audit.ip}</span>
<br />
{/* <img src={flagIcon} alt="flag" width={7} height={7} /> */}
{/* <span className="info-flag-name"> Isreal</span> */}
</div>
<div className="time-div">
<span className="info-name">
{moment(audit.time).fromNow("")}
</span>
<br />
<span className="info-name">
{moment(audit.time).format("hh:mm:ss")}
</span>
</div>
</div>
</div>
<div className="detail-content-div">
<div className="user-div">
{/* <div className="image-div">
<img src={profileIcon} alt="profile" />
</div> */}
<div className="detail-div">
{/* <span className="name">Francisco Pattons</span> */}
{/* <br /> */}
<span className="email">{audit.user}</span>
</div>
</div>
<div>
<span className="status-span">{audit.message}</span>
</div>
<div className="detail-tags">
<div className="detail-content">
<div className="detail-content-sections">
<span className="head-span">Resource</span>
<span className="child-span">{audit.resource}</span>
</div>
<div className="detail-content-sections">
<span className="head-span">Action</span>
<span className="child-span">{audit.action}</span>
</div>
</div>
{/* <div className="menu">
<i className="fa fa-ellipsis-v" />
</div> */}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
}
export default TableContent;