140 lines
3.4 KiB
JavaScript
140 lines
3.4 KiB
JavaScript
import { Result, Timeline, Space, Tag, Divider, Button } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
setBreadcrumbs,
|
|
setSelectedHeader,
|
|
} from "../../redux/application/application.actions";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { useTranslation } from "react-i18next";
|
|
import SocketIO from "socket.io-client";
|
|
import { auth } from "../../firebase/firebase.utils";
|
|
import moment from "moment";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
|
|
setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);
|
|
|
|
export const socket = SocketIO(
|
|
process.env.NODE_ENV === "production"
|
|
? process.env.REACT_APP_AXIOS_BASE_API_URL
|
|
: window.location.origin,
|
|
{
|
|
path: "/ws",
|
|
auth: async (callback) => {
|
|
const token = auth.currentUser && (await auth.currentUser.getIdToken());
|
|
callback({ token });
|
|
},
|
|
}
|
|
);
|
|
|
|
export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
|
|
const { t } = useTranslation();
|
|
const [logs, setLogs] = useState([]);
|
|
|
|
useEffect(() => {
|
|
document.title = t("titles.dms");
|
|
setSelectedHeader("dms");
|
|
setBreadcrumbs([
|
|
{
|
|
link: "/manage/dms",
|
|
label: t("titles.bc.dms"),
|
|
},
|
|
]);
|
|
}, [t, setBreadcrumbs, setSelectedHeader]);
|
|
|
|
useEffect(() => {
|
|
socket.on("connected", () => {
|
|
console.log("Connected again.");
|
|
});
|
|
|
|
socket.on("log-event", (payload) => {
|
|
setLogs((logs) => {
|
|
return [...logs, payload];
|
|
});
|
|
});
|
|
|
|
socket.connect();
|
|
socket.emit("set-log-level", "TRACE");
|
|
|
|
return () => {
|
|
socket.removeAllListeners();
|
|
socket.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
if (!bodyshop.cdk_dealerid) return <Result status="404" />;
|
|
|
|
const dmsType = determineDmsType(bodyshop);
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
onClick={() => {
|
|
socket.emit(
|
|
`${dmsType}-export-job`,
|
|
"752a4f5f-22ab-414b-b182-98d4e62227ef"
|
|
);
|
|
}}
|
|
>
|
|
Export
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={() => {
|
|
setLogs([]);
|
|
socket.disconnect();
|
|
socket.connect();
|
|
}}
|
|
>
|
|
reconnect
|
|
</Button>
|
|
|
|
<Timeline pending={socket.connected && "Processing..."} reverse={true}>
|
|
{logs.map((log, idx) => (
|
|
<Timeline.Item key={idx} color={LogLevelHierarchy(log.level)}>
|
|
<Space wrap align="start" style={{}}>
|
|
<Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
|
|
<span>{moment(log.timestamp).format("MM/DD/YYYY HH:MM:ss")}</span>
|
|
<Divider type="vertical" />
|
|
<span>{log.message}</span>
|
|
</Space>
|
|
</Timeline.Item>
|
|
))}
|
|
</Timeline>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LogLevelHierarchy(level) {
|
|
switch (level) {
|
|
case "TRACE":
|
|
return "pink";
|
|
case "DEBUG":
|
|
return "orange";
|
|
case "INFO":
|
|
return "blue";
|
|
case "WARNING":
|
|
return "yellow";
|
|
case "ERROR":
|
|
return "red";
|
|
default:
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
const determineDmsType = (bodyshop) => {
|
|
if (bodyshop.cdk_dealerid) return "cdk";
|
|
else {
|
|
return "pbs";
|
|
}
|
|
};
|