Skip to content

Commit 24d5715

Browse files
ArneiArnei
committed
Make error table look nicer for no errors in wf tab
In the workflow tab in the event details, don't display the table header for the errors and warnings table in case there are no errors.
1 parent abccef4 commit 24d5715

1 file changed

Lines changed: 87 additions & 82 deletions

File tree

‎src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx‎

Lines changed: 87 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -70,90 +70,95 @@ const EventDetailsWorkflowErrors = ({
7070
}
7171
</header>
7272

73-
<div className="obj-container">
74-
<table className="main-tbl">
75-
{isFetching || (
76-
<>
77-
<thead>
78-
<tr>
79-
<th className="small" />
80-
<th>
81-
{
82-
t(
83-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DATE",
84-
) /* Date */
85-
}
86-
<i />
87-
</th>
88-
<th>
89-
{
90-
t(
91-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE",
92-
) /* Errors & Warnings */
93-
}
94-
<i />
95-
</th>
96-
<th className="medium" />
97-
</tr>
98-
</thead>
99-
<tbody>
73+
{
74+
/* No errors message */
75+
errors.entries.length === 0 && (
76+
<table className="main-tbl">
77+
<tr>
78+
<td colSpan={4}>
10079
{
101-
/* error details */
102-
errors.entries.map((item, key) => (
103-
<tr key={key}>
104-
<td>
105-
{!!item.severity && (
106-
<div
107-
className={`circle ${severityColor(
108-
item.severity,
109-
)}`}
110-
/>
111-
)}
112-
</td>
113-
<td>
114-
{t("dateFormats.dateTime.medium", {
115-
dateTime: renderValidDate(item.timestamp),
116-
})}
117-
</td>
118-
<td>{item.title}</td>
119-
120-
{/* link to 'Error Details' sub-Tab */}
121-
<td>
122-
<ButtonLikeAnchor
123-
extraClassName="details-link"
124-
onClick={() =>
125-
openSubTab("workflow-error-details", item.id)
126-
}
127-
>
128-
{
129-
t(
130-
"EVENTS.EVENTS.DETAILS.MEDIA.DETAILS",
131-
) /* Details */
132-
}
133-
</ButtonLikeAnchor>
134-
</td>
135-
</tr>
136-
))
137-
}
138-
{
139-
/* No errors message */
140-
errors.entries.length === 0 && (
141-
<tr>
142-
<td colSpan={4}>
143-
{
144-
t(
145-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.EMPTY",
146-
) /* No errors found. */
147-
}
148-
</td>
149-
</tr>
150-
)
80+
t(
81+
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.EMPTY",
82+
) /* No errors found. */
15183
}
152-
</tbody>
153-
</>
154-
)}
155-
</table>
156-
</div>
84+
</td>
85+
</tr>
86+
</table>
87+
)
88+
}
89+
90+
{ errors.entries.length !== 0 && (
91+
<div className="obj-container">
92+
<table className="main-tbl">
93+
{isFetching || (
94+
<>
95+
<thead>
96+
<tr>
97+
<th className="small" />
98+
<th>
99+
{
100+
t(
101+
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DATE",
102+
) /* Date */
103+
}
104+
<i />
105+
</th>
106+
<th>
107+
{
108+
t(
109+
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE",
110+
) /* Errors & Warnings */
111+
}
112+
<i />
113+
</th>
114+
<th className="medium" />
115+
</tr>
116+
</thead>
117+
<tbody>
118+
{
119+
/* error details */
120+
errors.entries.map((item, key) => (
121+
<tr key={key}>
122+
<td>
123+
{!!item.severity && (
124+
<div
125+
className={`circle ${severityColor(
126+
item.severity,
127+
)}`}
128+
/>
129+
)}
130+
</td>
131+
<td>
132+
{t("dateFormats.dateTime.medium", {
133+
dateTime: renderValidDate(item.timestamp),
134+
})}
135+
</td>
136+
<td>{item.title}</td>
137+
138+
{/* link to 'Error Details' sub-Tab */}
139+
<td>
140+
<ButtonLikeAnchor
141+
extraClassName="details-link"
142+
onClick={() =>
143+
openSubTab("workflow-error-details", item.id)
144+
}
145+
>
146+
{
147+
t(
148+
"EVENTS.EVENTS.DETAILS.MEDIA.DETAILS",
149+
) /* Details */
150+
}
151+
</ButtonLikeAnchor>
152+
</td>
153+
</tr>
154+
))
155+
}
156+
</tbody>
157+
</>
158+
)}
159+
</table>
160+
</div>
161+
)}
157162
</div>
158163
);
159164
};

0 commit comments

Comments
 (0)