fixed line breaks
parent
15e5052dbc
commit
487e306f55
|
|
@ -214,13 +214,9 @@ export default function LogCard({
|
|||
color = "#2980b9"; // no match
|
||||
}
|
||||
|
||||
style = { padding: "1px", color };
|
||||
style = { padding: "1px", color, whiteSpace: "pre-line" };
|
||||
|
||||
return (
|
||||
<span style={style}>
|
||||
{log.replace(/(?:\r\n|\r|\n)/g, "<br>")}
|
||||
</span>
|
||||
);
|
||||
return <span style={style}>{log}</span>;
|
||||
}}
|
||||
followOutput={true}
|
||||
/>
|
||||
|
|
@ -253,462 +249,3 @@ export default function LogCard({
|
|||
</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