RocMarshal commented on code in PR #27874:
URL: https://github.com/apache/flink/pull/27874#discussion_r3025549210
##########
flink-runtime-web/web-dashboard/src/app/pages/job/rescales/job-rescales.component.html:
##########
@@ -22,6 +22,319 @@
[nzAnimated]="{ inkBar: true, tabPane: false }"
[nzTabBarExtraContent]="extraTemplate"
>
+ <nz-tab nzTitle="History">
+ <nz-table
+ class="no-border small"
+ [nzSize]="'small'"
+ [nzData]="rescalesHistories || []"
+ [nzFrontPagination]="false"
+ [nzShowPagination]="false"
+ >
+ <thead>
+ <tr>
+ <th nzWidth="70px" nzAlign="center"></th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The unique ID in Rescale consists of 32
hexadecimal characters"
+ >
+ <strong>Rescale UUID</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The number ID of Rescale attempts that occurred
under the same resource requirements"
+ >
+ <strong>Attempt ID</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The unique ID of resource requirements consists of
32 hexadecimal characters"
+ >
+ <strong>Requirements ID</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The reason that triggers the target
Rescale">
+ <strong>Trigger Cause</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The end state of the target Rescale">
+ <strong>Terminal State</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The reason for the completion or termination of
the target Rescale"
+ >
+ <strong>Terminated Reason</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The start time of the target Rescale">
+ <strong>Start Time</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="Duration from the start of the rescale to its
completion or until now"
+ >
+ <strong>Duration</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The end time of the target Rescale">
+ <strong>End Time</strong>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-container *ngFor="let history of rescalesHistories; trackBy:
trackById">
+ <tr>
+ <td
+ nzShowExpand
+ [(nzExpand)]="history.expand"
+ (nzExpandChange)="onExpandChange(history, $event)"
+ ></td>
+ <td nz-tooltip [nzTooltipTitle]="history.rescaleUuid">
+ {{ truncateUuid(history.rescaleUuid) }}
+ </td>
+ <td>{{ history.rescaleAttemptId }}</td>
+ <td nz-tooltip [nzTooltipTitle]="history.resourceRequirementsUuid">
+ {{ truncateUuid(history.resourceRequirementsUuid) }}
+ </td>
+ <td>{{ history.triggerCause }}</td>
+ <td><flink-job-badge
[state]="history.terminalState"></flink-job-badge></td>
+ <td>{{ history.terminatedReason }}</td>
+ <td>{{ history.startTimestampInMillis | date: 'yyyy-MM-dd
HH:mm:ss.SSS' }}</td>
+ <td>
+ {{ history.endTimestampInMillis - history.startTimestampInMillis
| humanizeDuration }}
+ </td>
+ <td>{{ history.endTimestampInMillis | date: 'yyyy-MM-dd
HH:mm:ss.SSS' }}</td>
+ </tr>
+ <tr [nzExpand]="history.expand">
+ <td colspan="10" *ngIf="history.expand" class="collapse-td">
+ <div class="rescale-details-wrapper">
+ <div class="rescale-details-box">
+ <h3><strong>Rescale Details</strong></h3>
+ <p>
+ Rescale UUID:
+ {{ truncateUuid(history.rescaleUuid) }}
+ Attempt ID:
+ {{ history.rescaleAttemptId }}
+
Requirements ID:
+ {{ truncateUuid(history.resourceRequirementsUuid) }}
+ Trigger
Cause:
+ {{ history.triggerCause }}
+ Terminal State:
+ {{ history.terminalState }}
+ Terminal Reason: {{ history.terminatedReason }}
+ </p>
Review Comment:
Thanks @och5351 for your reminder.
As mentioned in the interface section, we defined separate data types for
the two interfaces (even though they have an inheritance relationship).
Therefore, when rendering them, it’s better to keep them independent as well.
In addition, the overhead here is relatively small (including development
complexity), and it helps ensure the completeness of data presentation.
Although these fields do not change or go missing when the frontend receives
data from the backend, I have to admit that this does introduce some redundancy
in the frontend data display.
##########
flink-runtime-web/web-dashboard/src/app/interfaces/job-rescales.ts:
##########
@@ -16,6 +16,76 @@
* limitations under the License.
*/
+export type RescalesHistories = RescalesHistory[];
+
+export interface RescalesHistory {
+ rescaleUuid: string;
+ resourceRequirementsUuid: string;
+ rescaleAttemptId: number;
+ vertices: object;
+ slots: object;
+ schedulerStates: unknown[];
+ startTimestampInMillis: number;
+ endTimestampInMillis: number;
+ terminalState: string;
+ triggerCause: string;
+ terminatedReason: string;
+ expand?: boolean;
+}
+
+export interface RescalesDetailHistory {
+ rescaleUuid: string;
+ resourceRequirementsUuid: string;
+ rescaleAttemptId: number;
+ vertices: { [vertexId: string]: RescaleVertex };
+ slots: { [slotSharingGroupId: string]: RescaleSlot };
+ schedulerStates: SchedulerState[];
+ startTimestampInMillis: number;
+ endTimestampInMillis: number;
+ terminalState: string;
+ triggerCause: string;
+ terminatedReason: string;
+}
Review Comment:
Thanks @och5351
I compared this with the implementations of other existing frontend pages,
and perhaps we can take a balanced approach.
Based on your idea, we can use inheritance to separate the two interfaces.
However, we may need to slightly differentiate the naming:
- RescalesHistory → BriefJobRescaleDetails, since “xxHistory” sounds like a
collection composed of multiple objects.
- RescalesHistories → RescalesHistory, for the same reason, and it also
better aligns with the abstraction level used by the backend when handling this
data.
- RescalesDetailHistory → JobRescaleDetails (extends BriefJobRescaleDetails)
Pls let me know your opinon.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
