och5351 commented on code in PR #27926:
URL: https://github.com/apache/flink/pull/27926#discussion_r3085801214
##########
flink-runtime-web/web-dashboard/src/app/pages/job/rescales/job-rescales.component.html:
##########
@@ -23,11 +23,347 @@
[nzTabBarExtraContent]="extraTemplate"
(nzSelectedIndexChange)="refresh()"
>
+ <nz-tab nzTitle="Overview">
+ <!-- Reusable template for rescale details - unified version with
containerClass parameter -->
+ <ng-template #rescaleDetailsTemplate let-rescale="rescale"
let-containerClass="containerClass">
+ <div [class]="containerClass || 'rescale-details-box'">
+ <h3><strong>Rescale Details</strong></h3>
+ <div>
+ <span>
+ <strong>Rescale UUID:</strong>
+ <span nz-tooltip [nzTooltipTitle]="rescale.rescaleUuid">
+ {{ truncateUuid(rescale.rescaleUuid) }}
+ </span>
+ </span>
+ <nz-divider nzType="vertical"></nz-divider>
+ <span>
+ <strong>Requirements ID:</strong>
+ <span nz-tooltip
[nzTooltipTitle]="rescale.resourceRequirementsUuid">
+ {{ truncateUuid(rescale.resourceRequirementsUuid) }}
+ </span>
+ </span>
+ <nz-divider nzType="vertical"></nz-divider>
+ <span>
+ <strong>Attempt ID:</strong>
+ {{ rescale.rescaleAttemptId }}
+ </span>
+ <nz-divider nzType="vertical"></nz-divider>
+ <span>
+ <strong>Trigger Cause:</strong>
+ {{ rescale.triggerCause }}
+ </span>
+ <nz-divider nzType="vertical"></nz-divider>
+ <span>
+ <strong>Terminal State:</strong>
+ {{ rescale?.terminalState || '-' }}
+ </span>
+ <nz-divider nzType="vertical"></nz-divider>
+ <span>
+ <strong>Terminal Reason:</strong>
+ {{ rescale?.terminatedReason || '-' }}
+ </span>
+ </div>
+ <ng-container *ngIf="getDetail(rescale.rescaleUuid) as detail">
+ <nz-table
+ class="small"
+ [nzData]="detail.vertices | keyvalue"
+ [nzSize]="'small'"
+ [nzFrontPagination]="false"
+ [nzShowPagination]="false"
+ [nzTitle]="verticesTitle"
+ [nzBordered]="true"
+ >
+ <thead>
+ <tr>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The unique ID of target JobVertex consists
of 32 hexadecimal characters"
+ >
+ <strong>ID</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The short name of target
vertex">
+ <strong>Name</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The previous parallelism of target vertex
before the current rescale"
+ >
+ <strong>Previous Parallelism</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The acquired parallelism of target vertex
after the current rescale"
+ >
+ <strong>Acquired Parallelism</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The desired parallelism of the
target vertex">
+ <strong>Desired Parallelism</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The minimal parallelism of
target vertex to run">
+ <strong>Sufficient Parallelism</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The unique ID of the slot sharing group
consists of 32 hexadecimal characters"
+ >
+ <strong>Slot Sharing Group ID</strong>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let vertex of detail.vertices | keyvalue">
+ <td nz-tooltip [nzTooltipTitle]="vertex.value.jobVertexId">
+ {{ truncateUuid(vertex.value.jobVertexId) }}
+ </td>
+ <td nz-tooltip [nzTooltipTitle]="vertex.value.jobVertexName">
+ {{ truncateName(vertex.value.jobVertexName) }}
+ </td>
+ <td>{{ vertex.value.preRescaleParallelism }}</td>
+ <td>{{ vertex.value.postRescaleParallelism || '-' }}</td>
+ <td>{{ vertex.value.desiredParallelism }}</td>
+ <td>{{ vertex.value.sufficientParallelism }}</td>
+ <td nz-tooltip
[nzTooltipTitle]="vertex.value.slotSharingGroupId">
+ {{ truncateUuid(vertex.value.slotSharingGroupId) }}
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+
+ <nz-table
+ class="small"
+ [nzData]="detail.slots | keyvalue"
+ [nzSize]="'small'"
+ [nzFrontPagination]="false"
+ [nzShowPagination]="false"
+ [nzTitle]="slotsTitle"
+ [nzBordered]="true"
+ >
+ <thead>
+ <tr>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The ID of the slot sharing group to which
the slot belongs consists of 32 hexadecimal characters"
+ >
+ <strong>Slot Sharing Group ID</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The name of the slot sharing group to which
the slot belongs"
+ >
+ <strong>Slot Sharing Group Name</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The previous number of slots
before the rescale">
+ <strong>Previous Slots</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The acquired number of slots
after the rescale">
+ <strong>Acquired Slots</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The desired number of slots of
the rescale">
+ <strong>Desired Slots</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The minimal number of slots to deploy tasks
in the rescale"
+ >
+ <strong>Sufficient Slots</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The required resource profile of the slot
sharing group in the rescale"
+ >
+ <strong>Required Profile</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The acquired resource profile of the slot
sharing group in the rescale"
+ >
+ <strong>Acquired Profile</strong>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let slot of detail.slots | keyvalue">
+ <td nz-tooltip
[nzTooltipTitle]="slot.value.slotSharingGroupId">
+ {{ truncateUuid(slot.value.slotSharingGroupId) }}
+ </td>
+ <td>{{ slot.value.slotSharingGroupName }}</td>
+ <td>{{ slot.value.preRescaleSlots }}</td>
+ <td>{{ slot.value.postRescaleSlots || '-' }}</td>
+ <td>{{ slot.value.desiredSlots }}</td>
+ <td>{{ slot.value.minimalRequiredSlots }}</td>
+ <td>
+ <pre style="margin: 0">{{ slot.value.requestResourceProfile
| json }}</pre>
+ </td>
+ <td>
+ <pre style="margin: 0">{{ slot.value.acquiredResourceProfile
| json }}</pre>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+
+ <nz-table
+ class="small"
+ [nzData]="detail.schedulerStates"
+ [nzSize]="'small'"
+ [nzFrontPagination]="false"
+ [nzShowPagination]="false"
+ [nzTitle]="schedulerStatesTitle"
+ [nzBordered]="true"
+ >
+ <thead>
+ <tr>
+ <th nz-tooltip nzTooltipTitle="The scheduler state name">
+ <strong>State</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The time to enter the state">
+ <strong>Enter Time</strong>
+ </th>
+ <th nz-tooltip nzTooltipTitle="The time to leave the state">
+ <strong>Leave Time</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The duration time from enter time to leave
time of the state"
+ >
+ <strong>Duration</strong>
+ </th>
+ <th
+ nz-tooltip
+ nzTooltipTitle="The exception information about current
rescale during the state"
+ >
+ <strong>Exception</strong>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let state of detail.schedulerStates">
+ <td>{{ state.state }}</td>
+ <td>{{ state.enterTimestampInMillis | date: 'yyyy-MM-dd
HH:mm:ss.SSS' }}</td>
+ <td>{{ state.leaveTimestampInMillis | date: 'yyyy-MM-dd
HH:mm:ss.SSS' }}</td>
+ <td>{{ state.durationInMillis | humanizeDuration }}</td>
+ <td>{{ state.stringifiedException }}</td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </ng-container>
+
+ <div *ngIf="!getDetail(rescale.rescaleUuid)">Loading...</div>
+ </div>
+ </ng-template>
+
+ <!-- Reusable template for latest rescale section (like checkpoint
component) -->
+ <ng-template #latestRescaleTemplate let-title="title"
let-rescale="rescale">
+ <tr>
+ <td>
+ <strong>{{ title }}</strong>
+ </td>
+ <td *ngIf="rescale">
+ <span>
+ <strong>Start Time:</strong>
+ {{ rescale.startTimestampInMillis | date: 'yyyy-MM-dd
HH:mm:ss.SSS' }}
+ </span>
+ <nz-divider nzType="vertical"></nz-divider>
+ <span>
+ <strong>End Time:</strong>
+ {{
+ rescale.endTimestampInMillis
+ ? (rescale.endTimestampInMillis | date: 'yyyy-MM-dd
HH:mm:ss.SSS')
+ : '-'
+ }}
+ </span>
+ <nz-divider nzType="vertical"></nz-divider>
+ <span>
+ <strong>Duration:</strong>
+ {{
+ (rescale.endTimestampInMillis || Date.now()) -
rescale.startTimestampInMillis
+ | humanizeDuration
+ }}
+ </span>
+ </td>
+ <td *ngIf="!rescale">None</td>
+ </tr>
+ <tr *ngIf="rescale">
+ <td colspan="2" class="collapse-td">
+ <ng-container
+ *ngTemplateOutlet="rescaleDetailsTemplate; context: { rescale:
rescale }"
+ ></ng-container>
+ </td>
+ </tr>
+ </ng-template>
+
+ <nz-table
+ class="no-border small"
+ [nzData]="rescalesOverview ? [''] : []"
+ [nzSize]="'small'"
+ [nzFrontPagination]="false"
+ [nzShowPagination]="false"
+ >
+ <tbody>
+ <ng-container *ngIf="rescalesOverview">
+ <tr>
+ <td><strong>Rescale Counts</strong></td>
+ <td>
+ <span>
+ <strong>Total:</strong>
+ {{
+ rescalesOverview.rescalesCounts.inProgress +
+ rescalesOverview.rescalesCounts.completed +
+ rescalesOverview.rescalesCounts.failed +
+ rescalesOverview.rescalesCounts.ignored
Review Comment:
Thx, @RocMarshal !
You're right. I fixed it at the component level.
--
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]
