Skip to content

Commit 926667b

Browse files
ArneiArnei
committed
Reduce code duplication in wf tab
Just some code cleanup and formatting
1 parent 65aaa88 commit 926667b

7 files changed

Lines changed: 146 additions & 319 deletions

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

Lines changed: 10 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
2626
import { ParseKeys } from "i18next";
2727
import ModalContentTable from "../../../shared/modals/ModalContentTable";
2828
import EventDetailsWorkflowErrors from "./EventDetailsWorkflowErrors";
29-
import { Operation } from "./EventDetailsWorkflowOperations";
29+
import { Operation, WorfklowOperationsTableBody } from "./EventDetailsWorkflowOperations";
3030

3131
/**
3232
* This component manages the workflow details for the workflows tab of the event details modal
@@ -366,54 +366,28 @@ const OperationsPreview = ({
366366
</header>
367367

368368
{ workflowDone && <>
369-
<table className="main-tbl">
370-
<thead>
371-
<tr>
372-
<th>
373-
{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS") /* Status */}
374-
</th>
375-
<th>
376-
{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE") /* Title */}
377-
</th>
378-
<th>
379-
{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION") /* Description */}
380-
</th>
381-
<th className="medium" />
382-
</tr>
383-
</thead>
384-
<tbody>
385-
{ operationsEntry &&
386-
<Operation
387-
operationId={operationsEntry.index}
388-
item={operationsEntry.operation}
389-
openSubTab={openDetailsSubTab}
390-
/>
369+
<WorfklowOperationsTableBody
370+
operations={operationsEntry
371+
? [{ operation: operationsEntry.operation, operationId: operationsEntry.index}]
372+
: []
391373
}
392-
</tbody>
393-
</table>
394-
<hr style={{ height: "1px", border: 0, borderTop: "1px solid #ccc", margin: "0", padding: "0"}} />
374+
openSubTab={openDetailsSubTab}
375+
/>
376+
<hr style={{ height: "1px", border: 0, borderTop: "1px solid #ccc", margin: "0", padding: "0"}} />
395377
</>}
396378

397379
{/* links to 'Operations' or 'Errors & Warnings' sub-Tabs */}
398380
<div className="obj-container">
399381
<ul>
400382
<li>
401383
<span>
402-
{
403-
t(
404-
"EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.DETAILS_LINK",
405-
) /* Operations */
406-
}
384+
{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.DETAILS_LINK") /* Operations */}
407385
</span>
408386
<ButtonLikeAnchor
409387
extraClassName="details-link"
410388
onClick={() => openSubTab("workflow-operations")}
411389
>
412-
{
413-
t(
414-
"EVENTS.EVENTS.DETAILS.WORKFLOWS.DETAILS",
415-
) /* Details */
416-
}
390+
{t("EVENTS.EVENTS.DETAILS.WORKFLOWS.DETAILS") /* Details */}
417391
</ButtonLikeAnchor>
418392
</li>
419393
</ul>

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

Lines changed: 18 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { WorkflowTabHierarchy } from "../modals/EventDetails";
1414
import { useTranslation } from "react-i18next";
1515
import { fetchWorkflowOperationDetails, setModalWorkflowTabHierarchy } from "../../../../slices/eventDetailsSlice";
1616
import ModalContentTable from "../../../shared/modals/ModalContentTable";
17-
import { Operation } from "./EventDetailsWorkflowOperations";
17+
import { WorkflowOperationsTable } from "./EventDetailsWorkflowOperations";
1818

1919
/**
2020
* This component manages the workflow error details for the workflows tab of the event details modal
@@ -63,97 +63,51 @@ const EventDetailsWorkflowErrorDetails = ({
6363
modalBodyChildren={<Notifications context="not_corner" />}
6464
>
6565
{/* Error operation table */}
66-
<div className="obj tbl-container">
67-
<header>
68-
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.OPERATION")}
69-
</header>
70-
<table className="main-tbl">
71-
<thead>
72-
<tr>
73-
<th>
74-
{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.STATUS") /* Status */}
75-
</th>
76-
<th>
77-
{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.TITLE") /* Title */}
78-
</th>
79-
<th>
80-
{t("EVENTS.EVENTS.DETAILS.WORKFLOW_OPERATIONS.TABLE_HEADERS.DESCRIPTION") /* Description */}
81-
</th>
82-
<th className="medium" />
83-
</tr>
84-
</thead>
85-
<tbody>
86-
{ operationsEntry &&
87-
<Operation
88-
operationId={operationsEntry.index}
89-
item={operationsEntry.operation}
90-
openSubTab={openOperationDetailsSubTab}
91-
/>
92-
}
93-
</tbody>
94-
</table>
95-
</div>
66+
<WorkflowOperationsTable
67+
operations={operationsEntry
68+
? [{ operation: operationsEntry.operation, operationId: operationsEntry.index}]
69+
: []
70+
}
71+
openSubTab={openOperationDetailsSubTab}
72+
title={"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.OPERATION"}
73+
/>
9674

9775
{/* 'Error Details' table */}
9876
<div className="obj tbl-details">
9977
<header>
100-
{
101-
t(
102-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER",
103-
) /* Error Details */
104-
}
78+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HEADER") /* Error Details */}
10579
</header>
10680
<div className="obj-container">
10781
<table className="main-tbl">
10882
{isFetching || (
10983
<tbody>
11084
<tr>
11185
<td>
112-
{
113-
t(
114-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.SEVERITY",
115-
) /* Severity */
116-
}
86+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.SEVERITY") /* Severity */}
11787
</td>
11888
<td>{errorDetails.severity}</td>
11989
</tr>
12090
<tr>
12191
<td>
122-
{
123-
t(
124-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TITLE",
125-
) /* Title */
126-
}
92+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TITLE") /* Title */}
12793
</td>
12894
<td>{errorDetails.title}</td>
12995
</tr>
13096
<tr>
13197
<td>
132-
{
133-
t(
134-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DESCRIPTION",
135-
) /* Description */
136-
}
98+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DESCRIPTION") /* Description */}
13799
</td>
138100
<td>{errorDetails.description}</td>
139101
</tr>
140102
<tr>
141103
<td>
142-
{
143-
t(
144-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.JOB_ID",
145-
) /* Job ID */
146-
}
104+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.JOB_ID") /* Job ID */}
147105
</td>
148106
<td>{errorDetails.jobId}</td>
149107
</tr>
150108
<tr>
151109
<td>
152-
{
153-
t(
154-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DATE",
155-
) /* Date */
156-
}
110+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.DATE") /* Date */}
157111
</td>
158112
<td>
159113
{t("dateFormats.dateTime.medium", {
@@ -163,31 +117,19 @@ const EventDetailsWorkflowErrorDetails = ({
163117
</tr>
164118
<tr>
165119
<td>
166-
{
167-
t(
168-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HOST",
169-
) /* Host */
170-
}
120+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.HOST") /* Host */}
171121
</td>
172122
<td>{errorDetails.processingHost}</td>
173123
</tr>
174124
<tr>
175125
<td>
176-
{
177-
t(
178-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TYPE",
179-
) /* Type */
180-
}
126+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TYPE") /* Type */}
181127
</td>
182128
<td>{errorDetails.serviceType}</td>
183129
</tr>
184130
<tr>
185131
<td>
186-
{
187-
t(
188-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TECHNICAL_DETAILS",
189-
) /* Technical Details */
190-
}
132+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DETAILS.TECHNICAL_DETAILS") /* Technical Details */}
191133
</td>
192134

193135
{/* list of technical error details */}

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

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,7 @@ const EventDetailsWorkflowErrors = ({
6363
return (
6464
<div className="obj tbl-container">
6565
<header>
66-
{
67-
t(
68-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.HEADER",
69-
) /* Errors & Warnings */
70-
}
66+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.HEADER") /* Errors & Warnings */}
7167
</header>
7268

7369
{
@@ -96,20 +92,10 @@ const EventDetailsWorkflowErrors = ({
9692
<tr>
9793
<th className="small" />
9894
<th>
99-
{
100-
t(
101-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DATE",
102-
) /* Date */
103-
}
104-
<i />
95+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.DATE") /* Date */}
10596
</th>
10697
<th>
107-
{
108-
t(
109-
"EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE",
110-
) /* Errors & Warnings */
111-
}
112-
<i />
98+
{t("EVENTS.EVENTS.DETAILS.ERRORS_AND_WARNINGS.TITLE") /* Errors & Warnings */}
11399
</th>
114100
<th className="medium" />
115101
</tr>
@@ -143,11 +129,7 @@ const EventDetailsWorkflowErrors = ({
143129
openSubTab("workflow-error-details", item.id)
144130
}
145131
>
146-
{
147-
t(
148-
"EVENTS.EVENTS.DETAILS.MEDIA.DETAILS",
149-
) /* Details */
150-
}
132+
{t("EVENTS.EVENTS.DETAILS.MEDIA.DETAILS") /* Details */}
151133
</ButtonLikeAnchor>
152134
</td>
153135
</tr>

0 commit comments

Comments
 (0)