test-lib-audits
Version:
React library for audits
511 lines (468 loc) • 18.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactTable = require("react-table");
var _reactTable2 = _interopRequireDefault(_reactTable);
var _moment = require("moment");
var _moment2 = _interopRequireDefault(_moment);
require("react-table/react-table.css");
var _filter = require("../../assets/filter.png");
var _filter2 = _interopRequireDefault(_filter);
var _noun_sorting_ = require("../../assets/noun_sorting_1058866.svg");
var _noun_sorting_2 = _interopRequireDefault(_noun_sorting_);
var _noun_confirm_ = require("../../assets/noun_confirm_275573.svg");
var _noun_confirm_2 = _interopRequireDefault(_noun_confirm_);
var _Pagination = require("./Pagination");
var _Pagination2 = _interopRequireDefault(_Pagination);
require("./style.css");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(function () {
var enterModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).enterModule;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var TableContent = function (_React$Component) {
_inherits(TableContent, _React$Component);
function TableContent(props) {
_classCallCheck(this, TableContent);
var _this = _possibleConstructorReturn(this, (TableContent.__proto__ || Object.getPrototypeOf(TableContent)).call(this, props));
_this.escFunction = function (event) {
if (event.keyCode === 27) {
_this.setState({
filter: {
key: "",
value: "",
obj: {},
type: ""
}
});
}
};
_this.handleKeyFilter = function (col) {
_this.setState({
filter: {
key: col.name,
value: "",
obj: {},
type: col.type
}
});
};
_this.createFilterObj = function () {
var obj = void 0;
if (_this.state.filter.type === "Timestamp") {
obj = {
key: _this.state.filter.key,
value: _this.state.filter.value || (0, _moment2.default)().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);
};
_this.handleFilterValueChange = function (e) {
var value = e.target.value;
_this.setState(function (prevState) {
return { filter: _extends({}, prevState.filter, { value: value }) };
}, function () {
_this.inputRef.current.focus();
});
};
_this.renderColumns = function () {
var filter = _this.state.filter;
var _this$props = _this.props,
sortDirection = _this$props.sortDirection,
sortBy = _this$props.sortBy,
handleSorting = _this$props.handleSorting;
var columns = [];
_this.props.headerProps.map(function (col, idx) {
var lastIndex = _this.props.headerProps.length - 1;
var obj = {
Header: function Header(props) {
return _react2.default.createElement(
"div",
{ className: "time-filter" },
_react2.default.createElement(
"span",
{
onClick: function onClick() {
return col.sortable ? handleSorting(col.name, sortBy === col.name ? sortDirection : "desc") : {};
} },
col.displayName,
col.sortable && _react2.default.createElement("img", { src: _noun_sorting_2.default, alt: "sort", className: "filter-icon" })
),
col.filterable && _react2.default.createElement(
"a",
{ onClick: function onClick() {
return _this.handleKeyFilter(col);
} },
_react2.default.createElement("img", {
src: _filter2.default,
alt: "filter",
width: 10,
height: 10,
className: "filter-icon"
})
),
col.name === filter.key ? [_react2.default.createElement("div", {
key: 0,
id: "modal-backdrop",
className: "modal-backdrop-transparent modal-transition",
onClick: function onClick() {
return _this.handleKeyFilter("");
}
}), _react2.default.createElement(
"div",
{
key: 1,
className: "time-filter-div " + (idx === lastIndex ? "last-filter" : "") },
_react2.default.createElement(
"h5",
{ className: "filter-user-text" },
"Filter By ",
col.displayName,
" ",
_react2.default.createElement(
"span",
{
onClick: function onClick() {
return _this.handleKeyFilter("");
},
className: "cancel-filter-btn" },
"X"
)
),
_react2.default.createElement(
"form",
{ onSubmit: function onSubmit() {
return _this.createFilterObj();
} },
_react2.default.createElement(
"div",
{ className: "filter-input" },
_react2.default.createElement("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" ? (0, _moment2.default)().format("YYYY-MM-DD") : ""),
onChange: function onChange(e) {
return _this.handleFilterValueChange(e);
}
}),
_react2.default.createElement("img", {
src: _noun_confirm_2.default,
className: "confirm-btn",
alt: "confirm",
onClick: function onClick() {
return _this.createFilterObj();
}
})
)
)
)] : null
);
},
headerClassName: "" + (sortBy === col.name ? sortDirection === "desc" ? "-sort-desc" : "-sort-asc" : ""),
accessor: col.name,
sortable: false,
Cell: function Cell(rowProps) {
switch (col.name) {
case "createdAt":
return _react2.default.createElement(
"div",
null,
_react2.default.createElement(
"span",
{ className: "name" },
rowProps.row[col.name] && (0, _moment2.default)(rowProps.row[col.name]).format("DD/MM/YYYY hh:mm:ss")
),
_react2.default.createElement("br", null),
_react2.default.createElement(
"span",
{ className: "time-status" },
rowProps.row[col.name] && (0, _moment2.default)(rowProps.row[col.name]).fromNow("")
)
);
case "severity":
return _react2.default.createElement(
"div",
{
className: "severity-div " + rowProps.row[col.name].toLowerCase() },
_react2.default.createElement(
"span",
{ className: "severity-text" },
rowProps.row[col.name]
),
_react2.default.createElement("div", {
className: "severity-inner-div " + rowProps.row[col.name].toLowerCase()
})
);
default:
return _react2.default.createElement(
"div",
null,
_react2.default.createElement(
"span",
{ className: "name" },
rowProps.row[col.name]
)
);
}
},
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: function Header() {
return _react2.default.createElement(
"div",
null,
_react2.default.createElement("input", { type: "checkbox" })
);
},
sortable: false,
Cell: _react2.default.createElement(
"div",
null,
_react2.default.createElement("input", { type: "checkbox" })
),
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;
};
_this.state = {
filter: {
key: "",
value: "",
obj: "",
type: ""
},
filterKey: "",
filterValue: "",
filterObj: {}
};
_this.inputRef = _react2.default.createRef();
return _this;
}
_createClass(TableContent, [{
key: "componentDidMount",
value: function componentDidMount() {
document.addEventListener("keydown", this.escFunction, false);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener("keydown", this.escFunction, false);
}
}, {
key: "render",
value: function render() {
var data = this.props.rowsData;
return _react2.default.createElement(
"div",
null,
_react2.default.createElement(
"div",
{ className: "table-content" },
_react2.default.createElement(_reactTable2.default, {
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: _Pagination2.default,
className: "-striped -highlight",
columns: this.renderColumns()
})
),
_react2.default.createElement(
"div",
{ className: "table-content-mobile" },
data && data.map(function (audit) {
return _react2.default.createElement(
"div",
{ className: "table-content-div", key: audit._id },
_react2.default.createElement(
"div",
{ className: "info-div" },
_react2.default.createElement("div", {
className: "mark-div " + audit.severity.toLowerCase()
}),
_react2.default.createElement(
"div",
{ className: "section-one" },
_react2.default.createElement(
"div",
{ className: "address-div" },
_react2.default.createElement(
"span",
{ className: "info-name" },
audit.ip
),
_react2.default.createElement("br", null)
),
_react2.default.createElement(
"div",
{ className: "time-div" },
_react2.default.createElement(
"span",
{ className: "info-name" },
(0, _moment2.default)(audit.time).fromNow("")
),
_react2.default.createElement("br", null),
_react2.default.createElement(
"span",
{ className: "info-name" },
(0, _moment2.default)(audit.time).format("hh:mm:ss")
)
)
)
),
_react2.default.createElement(
"div",
{ className: "detail-content-div" },
_react2.default.createElement(
"div",
{ className: "user-div" },
_react2.default.createElement(
"div",
{ className: "detail-div" },
_react2.default.createElement(
"span",
{ className: "email" },
audit.user
)
)
),
_react2.default.createElement(
"div",
null,
_react2.default.createElement(
"span",
{ className: "status-span" },
audit.message
)
),
_react2.default.createElement(
"div",
{ className: "detail-tags" },
_react2.default.createElement(
"div",
{ className: "detail-content" },
_react2.default.createElement(
"div",
{ className: "detail-content-sections" },
_react2.default.createElement(
"span",
{ className: "head-span" },
"Resource"
),
_react2.default.createElement(
"span",
{ className: "child-span" },
audit.resource
)
),
_react2.default.createElement(
"div",
{ className: "detail-content-sections" },
_react2.default.createElement(
"span",
{ className: "head-span" },
"Action"
),
_react2.default.createElement(
"span",
{ className: "child-span" },
audit.action
)
)
)
)
)
);
})
)
);
}
}, {
key: "__reactstandin__regenerateByEval",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return TableContent;
}(_react2.default.Component);
var _default = TableContent;
exports.default = _default;
;
(function () {
var reactHotLoader = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).default;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(TableContent, "TableContent", "src/components/TableContent/index.js");
reactHotLoader.register(_default, "default", "src/components/TableContent/index.js");
})();
;
(function () {
var leaveModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).leaveModule;
leaveModule && leaveModule(module);
})();