fixed line breaks
parent
15e5052dbc
commit
487e306f55
|
|
@ -214,13 +214,9 @@ export default function LogCard({
|
||||||
color = "#2980b9"; // no match
|
color = "#2980b9"; // no match
|
||||||
}
|
}
|
||||||
|
|
||||||
style = { padding: "1px", color };
|
style = { padding: "1px", color, whiteSpace: "pre-line" };
|
||||||
|
|
||||||
return (
|
return <span style={style}>{log}</span>;
|
||||||
<span style={style}>
|
|
||||||
{log.replace(/(?:\r\n|\r|\n)/g, "<br>")}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}}
|
}}
|
||||||
followOutput={true}
|
followOutput={true}
|
||||||
/>
|
/>
|
||||||
|
|
@ -253,462 +249,3 @@ export default function LogCard({
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("useffect logs");
|
|
||||||
|
|
||||||
// scroll to bottom
|
|
||||||
if (checkboxAutoScrollChecked && virtuosoRef.current !== undefined) {
|
|
||||||
console.log("logLength current", logs.length);
|
|
||||||
|
|
||||||
//virtuosoRef.current.autoscrollToBottom();
|
|
||||||
|
|
||||||
virtuosoRef.current.scrollToIndex({
|
|
||||||
index: logs.length + 1,
|
|
||||||
align: "start",
|
|
||||||
behavior: "auto",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [logs]);
|
|
||||||
|
|
||||||
<Tooltip title={t("logCard.tooltip.reload")}>
|
|
||||||
<ReloadOutlined onClick={() => loadLogs(selectedDate)} />
|
|
||||||
</Tooltip>
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
const inBrackets = (content, contentColor) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<span style={{ color: "#95a5a6" }}>[</span>
|
|
||||||
<span style={{ color: contentColor }}>{content}</span>
|
|
||||||
<span style={{ color: "#95a5a6" }}>] </span>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getMessageType = (logType) => {
|
|
||||||
if (logType === Constants.SYSTEM_LOG_TYPE.INFO) {
|
|
||||||
return inBrackets("INFO", "#27ae60");
|
|
||||||
}
|
|
||||||
if (logType === Constants.SYSTEM_LOG_TYPE.DEBUG) {
|
|
||||||
return inBrackets("DEB", "#e67e22");
|
|
||||||
}
|
|
||||||
if (logType === Constants.SYSTEM_LOG_TYPE.ERROR) {
|
|
||||||
return inBrackets("ERR", "#e74c3c");
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
};
|
|
||||||
|
|
||||||
{logData.Logs.filter((log) => {
|
|
||||||
return (
|
|
||||||
(log.Type === 0 && checkboxInfoChecked) ||
|
|
||||||
(log.Type === 1 && checkboxErrorChecked)
|
|
||||||
);
|
|
||||||
}).map((log, i) => {
|
|
||||||
if (
|
|
||||||
(log.Type === 0 && !checkboxInfoChecked) ||
|
|
||||||
(log.Type === 1 && !checkboxErrorChecked)
|
|
||||||
) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={i}>
|
|
||||||
{inBrackets(FormatDatetime(log.Time), "#7f8c8d")}{" "}
|
|
||||||
{getMessageType(log.Type)}
|
|
||||||
{log.Message}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*myFetch(
|
|
||||||
`/log?type=${type === "grouptasks" ? "g" : "s"}&date=${date}&lang=${
|
|
||||||
i18n.language
|
|
||||||
}`,
|
|
||||||
"GET",
|
|
||||||
null,
|
|
||||||
{},
|
|
||||||
0,
|
|
||||||
Constants.LOG_API_ADDRESS
|
|
||||||
)
|
|
||||||
.then((data) => {
|
|
||||||
fetchResponse.current = data;
|
|
||||||
|
|
||||||
setLoadingSpinner(false);
|
|
||||||
|
|
||||||
if (data.Logs === null) {
|
|
||||||
data.Logs = [];
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < data.Logs.length; i++) {
|
|
||||||
let items = [];
|
|
||||||
|
|
||||||
if (data.Logs[i].Message === "") {
|
|
||||||
items.push(
|
|
||||||
<span style={{ color: "#e74c3c" }}>
|
|
||||||
Message not found.{" "}
|
|
||||||
{data.Logs[i].LogData.length > 0 && (
|
|
||||||
<>
|
|
||||||
Given Args:{" "}
|
|
||||||
{data.Logs[i].LogData.map((data) => (
|
|
||||||
<span>
|
|
||||||
{data.Type}:{data.Value}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let splittedMessage = data.Logs[i].Message.split(" ");
|
|
||||||
|
|
||||||
for (let s = 0; s < splittedMessage.length; s++) {
|
|
||||||
if (splittedMessage[s].includes("%")) {
|
|
||||||
if (splittedMessage[s] === "%userId%") {
|
|
||||||
const foundData = data.Logs[i].LogData.find(
|
|
||||||
(data) => data.Type === "userId"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (foundData !== undefined) {
|
|
||||||
const foundUser = fetchResponse.current.Users.find(
|
|
||||||
(user) => user.Id === foundData.Value
|
|
||||||
);
|
|
||||||
|
|
||||||
items.push(
|
|
||||||
<span key={s} style={{ color: Constants.COLORS.PRIMARY }}>
|
|
||||||
{foundUser !== undefined
|
|
||||||
? foundUser.Username
|
|
||||||
: foundData.Value}{" "}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else if (splittedMessage[s] === "%groupTaskId%") {
|
|
||||||
const foundData = data.Logs[i].LogData.find(
|
|
||||||
(data) => data.Type === "groupTaskId"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (foundData !== undefined) {
|
|
||||||
const foundGroupTask =
|
|
||||||
fetchResponse.current.GroupTasks.find(
|
|
||||||
(groupTask) => groupTask.Id === foundData.Value
|
|
||||||
);
|
|
||||||
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
children={
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div>
|
|
||||||
<span style={{ fontWeight: "bold" }}>ID: </span>
|
|
||||||
<Link
|
|
||||||
to={`${Constants.ROUTE_PATHS.GROUP_TASKS_VIEW}${foundData.Value}`}
|
|
||||||
>
|
|
||||||
{foundData.Value}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
title={t("logCard.popover.groupTaskId.title")}
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
<span style={{ cursor: "pointer" }}>
|
|
||||||
{foundGroupTask !== undefined
|
|
||||||
? foundGroupTask.GroupName
|
|
||||||
: foundData.Value}
|
|
||||||
</span>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else if (splittedMessage[s] === "%taskStepId%") {
|
|
||||||
const foundData = data.Logs[i].LogData.find(
|
|
||||||
(data) => data.Type === "taskStepId"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (foundData !== undefined) {
|
|
||||||
const foundGroupTaskStep =
|
|
||||||
fetchResponse.current.GroupTasksSteps.find(
|
|
||||||
(step) => step.Id === foundData.Value
|
|
||||||
);
|
|
||||||
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
children={
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div>
|
|
||||||
<span style={{ fontWeight: "bold" }}>ID: </span>
|
|
||||||
<span>
|
|
||||||
{foundGroupTaskStep !== undefined
|
|
||||||
? foundGroupTaskStep.Id
|
|
||||||
: foundData.Value}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
title={t("logCard.popover.groupTaskStep.title")}
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
<span style={{ cursor: "pointer" }}>
|
|
||||||
{foundGroupTaskStep !== undefined
|
|
||||||
? getGroupTaskStepName(foundGroupTaskStep)
|
|
||||||
: foundData.Value}
|
|
||||||
</span>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else if (splittedMessage[s] === "%roleId%") {
|
|
||||||
const foundData = data.Logs[i].LogData.find(
|
|
||||||
(data) => data.Type === "roleId"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (foundData !== undefined) {
|
|
||||||
const foundRole = fetchResponse.current.Roles.find(
|
|
||||||
(role) => role.Id === foundData.Value
|
|
||||||
);
|
|
||||||
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
children={
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div>
|
|
||||||
<span style={{ fontWeight: "bold" }}>ID: </span>
|
|
||||||
<span>{foundData.Value}</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
title={t("logCard.popover.role.title")}
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
<span style={{ cursor: "pointer" }}>
|
|
||||||
{foundRole !== undefined
|
|
||||||
? foundRole.DisplayName
|
|
||||||
: foundData.Value}
|
|
||||||
</span>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else if (splittedMessage[s] === "%groupId%") {
|
|
||||||
const foundDataCategory = data.Logs[i].LogData.find(
|
|
||||||
(data) => data.Type === "category"
|
|
||||||
);
|
|
||||||
|
|
||||||
const foundDataGroupId = data.Logs[i].LogData.find(
|
|
||||||
(data) => data.Type === "groupId"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (
|
|
||||||
foundDataCategory !== undefined &&
|
|
||||||
foundDataGroupId !== undefined
|
|
||||||
) {
|
|
||||||
const foundGroup =
|
|
||||||
fetchResponse.current.CategoryGroups.find(
|
|
||||||
(categoryGroup) =>
|
|
||||||
categoryGroup.category === foundDataCategory.Value
|
|
||||||
).groups.find(
|
|
||||||
(group) => group.id === foundDataGroupId.Value
|
|
||||||
);
|
|
||||||
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
children={
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div>
|
|
||||||
<span style={{ fontWeight: "bold" }}>ID: </span>
|
|
||||||
<span>{foundDataGroupId.Value}</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
title={t("logCard.popover.groupId.title")}
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
<span style={{ cursor: "pointer" }}>
|
|
||||||
{foundGroup !== undefined
|
|
||||||
? foundGroup.name
|
|
||||||
: foundDataGroupId.Value}
|
|
||||||
</span>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
items.push(
|
|
||||||
<ColoredSpanItem
|
|
||||||
key={s}
|
|
||||||
dataLogs={data.Logs[i]}
|
|
||||||
splittedMessage={splittedMessage[s]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
items.push(<span key={s}>{splittedMessage[s]} </span>);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
data.Logs[i].Message = items;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setLogData(data);
|
|
||||||
})
|
|
||||||
.catch((errStatus) => console.log("error", errStatus)); */
|
|
||||||
|
|
||||||
/*
|
|
||||||
const getDate = () => {
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
return `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()}`;
|
|
||||||
}; */
|
|
||||||
|
|
||||||
/*const getColorCode = (index) => {
|
|
||||||
const colorCodes = ["#3498db", "#9b59b6", "#1abc9c"];
|
|
||||||
const colorIndex = index % colorCodes.length;
|
|
||||||
return colorCodes[colorIndex];
|
|
||||||
};
|
|
||||||
|
|
||||||
const ColoredSpanItem = ({ dataLogs, splittedMessage, children }) => {
|
|
||||||
const logDataIndex = dataLogs.LogData.findIndex(
|
|
||||||
(data) => data.Type === splittedMessage.replace(new RegExp("%", "g"), "")
|
|
||||||
);
|
|
||||||
|
|
||||||
if (logDataIndex !== -1) {
|
|
||||||
return (
|
|
||||||
<span style={{ color: getColorCode(logDataIndex) }}>
|
|
||||||
{children === undefined ? (
|
|
||||||
dataLogs.LogData[logDataIndex].Value
|
|
||||||
) : (
|
|
||||||
<>{children}</>
|
|
||||||
)}{" "}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return <></>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getGroupTaskStepName = (groupTaskStep) => {
|
|
||||||
const foundName = fetchResponse.current.CategoryGroups.find(
|
|
||||||
(categoryGroup) =>
|
|
||||||
categoryGroup.category ===
|
|
||||||
fetchResponse.current.GroupTasks.find(
|
|
||||||
(groupTask) => groupTask.Id === groupTaskStep.GroupTasksId
|
|
||||||
)?.Category
|
|
||||||
)?.groups.find(
|
|
||||||
(groups) =>
|
|
||||||
groups.id ===
|
|
||||||
fetchResponse.current.GroupTasks.find(
|
|
||||||
(groupTask) => groupTask.Id === groupTaskStep.GroupTasksId
|
|
||||||
).GroupId
|
|
||||||
).tasks[groupTaskStep.Step - 1];
|
|
||||||
|
|
||||||
return foundName !== undefined ? foundName.name : groupTaskStep.Id;
|
|
||||||
}; */
|
|
||||||
|
|
||||||
/*
|
|
||||||
{logData.Dates.findIndex((date) => date === selectedDate) > 0 ? (
|
|
||||||
<Tooltip title={t("logCard.tooltip.previous")}>
|
|
||||||
<ArrowLeftOutlined
|
|
||||||
onClick={() =>
|
|
||||||
setSelectedDate(
|
|
||||||
logData.Dates[
|
|
||||||
logData.Dates.findIndex((date) => date === selectedDate) -
|
|
||||||
1
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<ArrowLeftOutlined
|
|
||||||
style={{
|
|
||||||
color: "rgba(0, 0, 0, 0.25)",
|
|
||||||
cursor: "not-allowed",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{logData.Dates.findIndex((date) => date === selectedDate) + 1 <
|
|
||||||
logData.Dates.length ? (
|
|
||||||
<Tooltip title={t("logCard.tooltip.next")}>
|
|
||||||
<ArrowRightOutlined
|
|
||||||
onClick={() =>
|
|
||||||
setSelectedDate(
|
|
||||||
logData.Dates[
|
|
||||||
logData.Dates.findIndex((date) => date === selectedDate) +
|
|
||||||
1
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<ArrowRightOutlined
|
|
||||||
style={{
|
|
||||||
color: "rgba(0, 0, 0, 0.25)",
|
|
||||||
cursor: "not-allowed",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
*/
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue